styled-components 6.0.0-beta.6 → 6.0.0-beta.7

package/dist/base.d.ts

@@ -5,7 +5,7 @@ import keyframes from './constructors/keyframes';
 import withTheme from './hoc/withTheme';
 import useTheme from './hooks/useTheme';
 import ServerStyleSheet from './models/ServerStyleSheet';
-import StyleSheetManager, { StyleSheetConsumer, StyleSheetContext } from './models/StyleSheetManager';
+import { IStyleSheetContext, IStyleSheetManager, IStylisContext, StyleSheetConsumer, StyleSheetContext, StyleSheetManager } from './models/StyleSheetManager';
 import ThemeProvider, { ThemeConsumer, ThemeContext } from './models/ThemeProvider';
 import isStyledComponent from './utils/isStyledComponent';
 declare global {
@@ -15,4 +15,4 @@ declare global {
 }
 export * from './secretInternals';
 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, };
+export { createGlobalStyle, css, isStyledComponent, IStyleSheetManager, IStyleSheetContext, IStylisContext, keyframes, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, useTheme, SC_VERSION as version, withTheme, };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import styled from './constructors/styled';
 export * from './base';
 export { CSSProp, DefaultTheme, ExecutionContext, ExecutionProps, IStyledComponent, IStyledComponentFactory, IStyledStatics, PolymorphicComponent, PolymorphicComponentProps, Runtime, StyledObject, StyledOptions, WebTarget, } from './types';
-export { styled as default };
+export { styled, styled as default };

package/dist/models/StyleSheetManager.d.ts

@@ -1,21 +1,46 @@
 import React from 'react';
 import StyleSheet from '../sheet';
 import { Stringifier } from '../types';
-declare type Props = {
-    children?: React.ReactChild;
+export declare type IStyleSheetContext = StyleSheet | void;
+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 useStyleSheet(): StyleSheet;
+export declare function useStylis(): Stringifier;
+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;
+    /**
+     * 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 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 mainSheet: StyleSheet;
-export declare const mainStylis: Stringifier;
-export declare function useStyleSheet(): StyleSheet;
-export declare function useStylis(): Stringifier;
-export default function StyleSheetManager(props: Props): JSX.Element;
-export {};
+}>;
+export declare function StyleSheetManager(props: IStyleSheetManager): JSX.Element;

package/dist/native/index.d.ts

@@ -34,4 +34,4 @@ declare const styled: (<Target extends NativeTarget>(tag: Target) => Styled<"nat
 };
 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/dist/styled-components-macro.cjs.js

@@ -8,11 +8,6 @@ var traverse = require('@babel/traverse');
 var babelPluginMacros = require('babel-plugin-macros');
 var babelPlugin = require('babel-plugin-styled-components');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var traverse__default = /*#__PURE__*/_interopDefaultLegacy(traverse);
-var babelPlugin__default = /*#__PURE__*/_interopDefaultLegacy(babelPlugin);
-
 function styledComponentsMacro(_a) {
     var references = _a.references, state = _a.state, t = _a.babel.types, _b = _a.config, _c = _b === void 0 ? {} : _b, _d = _c.importModuleName, importModuleName = _d === void 0 ? 'styled-components' : _d, config = tslib.__rest(_c, ["importModuleName"]);
     var program = state.file.path;
@@ -38,11 +33,11 @@ function styledComponentsMacro(_a) {
     });
     // SECOND STEP : apply babel-plugin-styled-components to the file
     var stateWithOpts = tslib.__assign(tslib.__assign({}, state), { opts: tslib.__assign(tslib.__assign({}, config), { topLevelImportPaths: (config.topLevelImportPaths || []).concat(importModuleName) }), customImportName: customImportName });
-    traverse__default["default"](program.parent, babelPlugin__default["default"]({ types: t }).visitor, undefined, stateWithOpts);
+    traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);
 }
 var index = babelPluginMacros.createMacro(styledComponentsMacro, {
     configName: 'styledComponents',
 });
 
-exports["default"] = index;
+exports.default = index;
 //# sourceMappingURL=styled-components-macro.cjs.js.map

package/dist/styled-components-macro.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components-macro.cjs.js","sources":["../src/macro/index.ts"],"sourcesContent":["import { types } from '@babel/core';\nimport { addDefault, addNamed } from '@babel/helper-module-imports';\nimport traverse from '@babel/traverse';\nimport { createMacro, MacroParams } from 'babel-plugin-macros';\nimport babelPlugin from 'babel-plugin-styled-components';\n\nfunction styledComponentsMacro({\n  references,\n  state,\n  babel: { types: t },\n  config: { importModuleName = 'styled-components', ...config } = {},\n}: MacroParams) {\n  const program = state.file.path;\n\n  // FIRST STEP : replace `styled-components/macro` by `styled-components\n  // references looks like this\n  // { default: [path, path], css: [path], ... }\n  let customImportName;\n  Object.keys(references).forEach(refName => {\n    // generate new identifier\n    let id: types.Identifier;\n    if (refName === 'default') {\n      id = addDefault(program, importModuleName, { nameHint: 'styled' });\n      customImportName = id;\n    } else {\n      id = addNamed(program, refName, importModuleName, { nameHint: refName });\n    }\n\n    // update references with the new identifiers\n    references[refName].forEach(referencePath => {\n      // eslint-disable-next-line no-param-reassign\n      (referencePath.node as types.Identifier).name = id.name;\n    });\n  });\n\n  // SECOND STEP : apply babel-plugin-styled-components to the file\n  const stateWithOpts = {\n    ...state,\n    opts: {\n      ...config,\n      topLevelImportPaths: (config.topLevelImportPaths || []).concat(importModuleName),\n    },\n    customImportName,\n  };\n  traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);\n}\n\nexport default createMacro(styledComponentsMacro, {\n  configName: 'styledComponents',\n});\n"],"names":["__rest","addDefault","addNamed","__assign","traverse","babelPlugin","createMacro"],"mappings":";;;;;;;;;;;;;;;AAMA,SAAS,qBAAqB,CAAC,EAKjB,EAAA;IAJZ,IAAA,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,KAAK,GAAA,EAAA,CAAA,KAAA,EACW,CAAC,GAAA,EAAA,CAAA,KAAA,CAAA,KAAA,EACjB,EAAA,GAAA,EAAA,CAAA,MAAkE,EAAlE,EAAA,GAAA,EAAA,KAAA,KAAA,CAAA,GAAgE,EAAE,GAAA,EAAA,EAAxD,EAAsC,GAAA,EAAA,CAAA,gBAAA,EAAtC,gBAAgB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,mBAAmB,GAAA,EAAA,EAAK,MAAM,GAAnDA,YAAA,CAAA,EAAA,EAAA,CAAA,kBAAA,CAAqD,CAAK,CAAA;AAElE,IAAA,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;;;AAKhC,IAAA,IAAI,gBAAgB,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,UAAA,OAAO,EAAA;;AAErC,QAAA,IAAI,EAAoB,CAAC;QACzB,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,YAAA,EAAE,GAAGC,8BAAU,CAAC,OAAO,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YACnE,gBAAgB,GAAG,EAAE,CAAC;AACvB,SAAA;AAAM,aAAA;AACL,YAAA,EAAE,GAAGC,4BAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;AAC1E,SAAA;;AAGD,QAAA,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,UAAA,aAAa,EAAA;;YAEtC,aAAa,CAAC,IAAyB,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AAC1D,SAAC,CAAC,CAAC;AACL,KAAC,CAAC,CAAC;;IAGH,IAAM,aAAa,GACdC,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,KAAK,CACR,EAAA,EAAA,IAAI,EACCA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,MAAM,CACT,EAAA,EAAA,mBAAmB,EAAE,CAAC,MAAM,CAAC,mBAAmB,IAAI,EAAE,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAElF,CAAA,EAAA,gBAAgB,EAAA,gBAAA,EAAA,CACjB,CAAC;IACFC,4BAAQ,CAAC,OAAO,CAAC,MAAM,EAAEC,+BAAW,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AACxF,CAAC;AAED,YAAeC,6BAAW,CAAC,qBAAqB,EAAE;AAChD,IAAA,UAAU,EAAE,kBAAkB;AAC/B,CAAA,CAAC;;;;"}
+{"version":3,"file":"styled-components-macro.cjs.js","sources":["../src/macro/index.ts"],"sourcesContent":["import { types } from '@babel/core';\nimport { addDefault, addNamed } from '@babel/helper-module-imports';\nimport traverse from '@babel/traverse';\nimport { createMacro, MacroParams } from 'babel-plugin-macros';\nimport babelPlugin from 'babel-plugin-styled-components';\n\nfunction styledComponentsMacro({\n  references,\n  state,\n  babel: { types: t },\n  config: { importModuleName = 'styled-components', ...config } = {},\n}: MacroParams) {\n  const program = state.file.path;\n\n  // FIRST STEP : replace `styled-components/macro` by `styled-components\n  // references looks like this\n  // { default: [path, path], css: [path], ... }\n  let customImportName;\n  Object.keys(references).forEach(refName => {\n    // generate new identifier\n    let id: types.Identifier;\n    if (refName === 'default') {\n      id = addDefault(program, importModuleName, { nameHint: 'styled' });\n      customImportName = id;\n    } else {\n      id = addNamed(program, refName, importModuleName, { nameHint: refName });\n    }\n\n    // update references with the new identifiers\n    references[refName].forEach(referencePath => {\n      // eslint-disable-next-line no-param-reassign\n      (referencePath.node as types.Identifier).name = id.name;\n    });\n  });\n\n  // SECOND STEP : apply babel-plugin-styled-components to the file\n  const stateWithOpts = {\n    ...state,\n    opts: {\n      ...config,\n      topLevelImportPaths: (config.topLevelImportPaths || []).concat(importModuleName),\n    },\n    customImportName,\n  };\n  traverse(program.parent, babelPlugin({ types: t }).visitor, undefined, stateWithOpts);\n}\n\nexport default createMacro(styledComponentsMacro, {\n  configName: 'styledComponents',\n});\n"],"names":["__rest","addDefault","addNamed","__assign","createMacro"],"mappings":";;;;;;;;;;AAMA,SAAS,qBAAqB,CAAC,EAKjB,EAAA;IAJZ,IAAA,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,KAAK,GAAA,EAAA,CAAA,KAAA,EACW,CAAC,GAAA,EAAA,CAAA,KAAA,CAAA,KAAA,EACjB,EAAA,GAAA,EAAA,CAAA,MAAkE,EAAlE,EAAA,GAAA,EAAA,KAAA,KAAA,CAAA,GAAgE,EAAE,GAAA,EAAA,EAAxD,EAAsC,GAAA,EAAA,CAAA,gBAAA,EAAtC,gBAAgB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,mBAAmB,GAAA,EAAA,EAAK,MAAM,GAAnDA,YAAA,CAAA,EAAA,EAAA,CAAA,kBAAA,CAAqD,CAAK,CAAA;AAElE,IAAA,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;;;AAKhC,IAAA,IAAI,gBAAgB,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,UAAA,OAAO,EAAA;;AAErC,QAAA,IAAI,EAAoB,CAAC;QACzB,IAAI,OAAO,KAAK,SAAS,EAAE;AACzB,YAAA,EAAE,GAAGC,8BAAU,CAAC,OAAO,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YACnE,gBAAgB,GAAG,EAAE,CAAC;AACvB,SAAA;AAAM,aAAA;AACL,YAAA,EAAE,GAAGC,4BAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;AAC1E,SAAA;;AAGD,QAAA,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,UAAA,aAAa,EAAA;;YAEtC,aAAa,CAAC,IAAyB,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AAC1D,SAAC,CAAC,CAAC;AACL,KAAC,CAAC,CAAC;;IAGH,IAAM,aAAa,GACdC,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,KAAK,CACR,EAAA,EAAA,IAAI,EACCA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,MAAM,CACT,EAAA,EAAA,mBAAmB,EAAE,CAAC,MAAM,CAAC,mBAAmB,IAAI,EAAE,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAElF,CAAA,EAAA,gBAAgB,EAAA,gBAAA,EAAA,CACjB,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AACxF,CAAC;AAED,YAAeC,6BAAW,CAAC,qBAAqB,EAAE;AAChD,IAAA,UAAU,EAAE,kBAAkB;AAC/B,CAAA,CAAC;;;;"}

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

@@ -8,17 +8,11 @@ var shallowequal = require('shallowequal');
 var stylis = require('stylis');
 var unitless = require('@emotion/unitless');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var shallowequal__default = /*#__PURE__*/_interopDefaultLegacy(shallowequal);
-var unitless__default = /*#__PURE__*/_interopDefaultLegacy(unitless);
-
 var SC_ATTR = (typeof process !== '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.6";
+var SC_VERSION = "6.0.0-beta.7";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
 var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'
@@ -1026,7 +1020,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 = '&'; }
@@ -1039,11 +1037,16 @@ 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));
+        return serialize(stylis.compile(options.namespace || prefix || selector
+            ? "".concat(options.namespace ? options.namespace + ' ' : '').concat(prefix, " ").concat(selector, " { ").concat(flatCSS, " }")
+            : flatCSS), stylis.middleware(middlewares));
     };
     stringifyRules.hash = plugins.length
         ? plugins
@@ -1058,9 +1061,9 @@ function createStylisInstance(_a) {
     return stringifyRules;
 }
 
-var StyleSheetContext = React__default["default"].createContext(undefined);
+var StyleSheetContext = React.createContext(undefined);
 var StyleSheetConsumer = StyleSheetContext.Consumer;
-var StylisContext = React__default["default"].createContext(undefined);
+var StylisContext = React.createContext(undefined);
 StylisContext.Consumer;
 var mainSheet = new StyleSheet();
 var mainStylis = createStylisInstance();
@@ -1089,17 +1092,17 @@ function StyleSheetManager(props) {
     }, [props.disableCSSOMInjection, props.sheet, props.target]);
     var stylis = React.useMemo(function () {
         return createStylisInstance({
-            options: { prefix: !props.disableVendorPrefixes },
+            options: { namespace: props.namespace, prefix: !props.disableVendorPrefixes },
             plugins: plugins,
         });
-    }, [props.disableVendorPrefixes, plugins]);
+    }, [props.disableVendorPrefixes, props.namespace, plugins]);
     React.useEffect(function () {
-        if (!shallowequal__default["default"](plugins, props.stylisPlugins))
+        if (!shallowequal(plugins, props.stylisPlugins))
             setPlugins(props.stylisPlugins);
     }, [props.stylisPlugins]);
-    return (React__default["default"].createElement(StyleSheetContext.Provider, { value: styleSheet },
-        React__default["default"].createElement(StylisContext.Provider, { value: stylis }, process.env.NODE_ENV !== 'production'
-            ? React__default["default"].Children.only(props.children)
+    return (React.createElement(StyleSheetContext.Provider, { value: styleSheet },
+        React.createElement(StylisContext.Provider, { value: stylis }, process.env.NODE_ENV !== 'production'
+            ? React.Children.only(props.children)
             : props.children)));
 }
 
@@ -1133,7 +1136,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)) {
         return "".concat(value, "px"); // Presumes implicit 'px' suffix for unitless numbers
     }
     return String(value).trim();
@@ -1340,7 +1343,7 @@ var ComponentStyle = /** @class */ (function () {
     return ComponentStyle;
 }());
 
-var ThemeContext = React__default["default"].createContext(undefined);
+var ThemeContext = React.createContext(undefined);
 var ThemeConsumer = ThemeContext.Consumer;
 function mergeTheme(theme, outerTheme) {
     if (!theme) {
@@ -1369,7 +1372,7 @@ function ThemeProvider(props) {
     if (!props.children) {
         return null;
     }
-    return React__default["default"].createElement(ThemeContext.Provider, { value: themeContext }, props.children);
+    return React.createElement(ThemeContext.Provider, { value: themeContext }, props.children);
 }
 
 var identifiers = {};
@@ -1491,7 +1494,7 @@ function createStyledComponent(target, options, rules) {
      * 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.forwardRef(forwardRef);
     WrappedStyledComponent.attrs = finalAttrs;
     WrappedStyledComponent.componentStyle = componentStyle;
     WrappedStyledComponent.displayName = displayName;
@@ -1504,13 +1507,6 @@ function createStyledComponent(target, options, rules) {
     WrappedStyledComponent.styledComponentId = styledComponentId;
     // fold the underlying StyledComponent target up since we folded the styles
     WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;
-    WrappedStyledComponent.withComponent = function withComponent(tag) {
-        var previousComponentId = options.componentId, optionsToCopy = tslib.__rest(options, ["componentId"]);
-        var newComponentId = previousComponentId &&
-            "".concat(previousComponentId, "-").concat(isTag(tag) ? tag : escape(getComponentName(tag)));
-        var newOptions = tslib.__assign(tslib.__assign({}, optionsToCopy), { attrs: finalAttrs, componentId: newComponentId });
-        return createStyledComponent(tag, newOptions, rules);
-    };
     Object.defineProperty(WrappedStyledComponent, 'defaultProps', {
         get: function () {
             return this._foldedDefaultProps;
@@ -1537,7 +1533,6 @@ function createStyledComponent(target, options, rules) {
             shouldForwardProp: true,
             styledComponentId: true,
             target: true,
-            withComponent: true,
         });
     }
     return WrappedStyledComponent;
@@ -1660,10 +1655,10 @@ function createGlobalStyle(strings) {
     var GlobalStyleComponent = function (props) {
         var styleSheet = useStyleSheet();
         var stylis = useStylis();
-        var theme = React__default["default"].useContext(ThemeContext);
-        var instanceRef = React__default["default"].useRef(styleSheet.allocateGSInstance(styledComponentId));
+        var theme = React.useContext(ThemeContext);
+        var instanceRef = React.useRef(styleSheet.allocateGSInstance(styledComponentId));
         var instance = instanceRef.current;
-        if (process.env.NODE_ENV !== 'production' && React__default["default"].Children.count(props.children)) {
+        if (process.env.NODE_ENV !== 'production' && React.Children.count(props.children)) {
             // eslint-disable-next-line no-console
             console.warn("The global style component ".concat(styledComponentId, " was given child JSX. createGlobalStyle does not render children."));
         }
@@ -1678,7 +1673,7 @@ function createGlobalStyle(strings) {
         {
             // eslint-disable-next-line react-hooks/rules-of-hooks
             // @ts-expect-error still using React 17 types for the time being
-            (React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect)(function () {
+            (React.useInsertionEffect || React.useLayoutEffect)(function () {
                 if (!styleSheet.server) {
                     renderStyles(instance, props, styleSheet, theme, stylis);
                     return function () { return globalStyle.removeStyles(instance, styleSheet); };
@@ -1696,7 +1691,7 @@ function createGlobalStyle(strings) {
             globalStyle.renderStyles(instance, context, styleSheet, stylis);
         }
     }
-    return React__default["default"].memo(GlobalStyleComponent);
+    return React.memo(GlobalStyleComponent);
 }
 
 function keyframes(strings) {
@@ -1717,14 +1712,14 @@ function keyframes(strings) {
 }
 
 function withTheme(Component) {
-    var WithTheme = React__default["default"].forwardRef(function (props, ref) {
-        var theme = React__default["default"].useContext(ThemeContext);
+    var WithTheme = React.forwardRef(function (props, ref) {
+        var theme = React.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.createElement(Component, tslib.__assign({}, props, { theme: themeProp, ref: ref }));
     });
     WithTheme.displayName = "WithTheme(".concat(getComponentName(Component), ")");
     return hoistNonReactStatics(WithTheme, Component);
@@ -1769,7 +1764,7 @@ var ServerStyleSheet = /** @class */ (function () {
                 props.nonce = nonce;
             }
             // v4 returned an array for this fn, so we'll do the same for v5 for backward compat
-            return [React__default["default"].createElement("style", tslib.__assign({}, props, { key: "sc-0-0" }))];
+            return [React.createElement("style", tslib.__assign({}, props, { key: "sc-0-0" }))];
         };
         this.seal = function () {
             _this.sealed = true;
@@ -1781,7 +1776,7 @@ var ServerStyleSheet = /** @class */ (function () {
         if (this.sealed) {
             throw throwStyledComponentsError(2);
         }
-        return React__default["default"].createElement(StyleSheetManager, { sheet: this.instance }, children);
+        return React.createElement(StyleSheetManager, { sheet: this.instance }, children);
     };
     // eslint-disable-next-line consistent-return
     // @ts-expect-error alternate return types are not possible due to code transformation
@@ -1834,9 +1829,10 @@ exports.ThemeProvider = ThemeProvider;
 exports.__PRIVATE__ = __PRIVATE__;
 exports.createGlobalStyle = createGlobalStyle;
 exports.css = css;
-exports["default"] = styled;
+exports.default = styled;
 exports.isStyledComponent = isStyledComponent;
 exports.keyframes = keyframes;
+exports.styled = styled;
 exports.useTheme = useTheme;
 exports.version = SC_VERSION;
 exports.withTheme = withTheme;