styled-components 5.0.0-testgrouplimit.0 → 5.1.0

package/dist/styled-components.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled-components.esm.js","sources":["../src/constants.js","../src/sheet/Tag.js","../src/sheet/GroupedTag.js","../src/sheet/GroupIDAllocator.js","../src/sheet/Sheet.js","../src/models/StyleSheetManager.js","../src/utils/isStaticRules.js","../src/models/ComponentStyle.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js","../src/constructors/createGlobalStyle.js","../src/models/ServerStyleSheet.js","../src/base.js"],"sourcesContent":["// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR =\n  (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||\n  'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n  (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) ||\n  (typeof process !== 'undefined' &&\n    (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY)) ||\n  process.env.NODE_ENV !== 'production';\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n  if (isServer) {\n    return new VirtualTag(target);\n  } else if (useCSSOMInjection) {\n    return new CSSOMTag(target);\n  } else {\n    return new TextTag(target);\n  }\n};\n\nexport class CSSOMTag implements Tag {\n  element: HTMLStyleElement;\n\n  sheet: CSSStyleSheet;\n\n  length: number;\n\n  constructor(target?: HTMLElement) {\n    const element = (this.element = makeStyleTag(target));\n\n    // Avoid Edge bug where empty style elements don't create sheets\n    element.appendChild(document.createTextNode(''));\n\n    this.sheet = getSheet(element);\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    try {\n      this.sheet.insertRule(rule, index);\n      this.length++;\n      return true;\n    } catch (_error) {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.sheet.deleteRule(index);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    const rule = this.sheet.cssRules[index];\n    // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n    if (rule !== undefined && typeof rule.cssText === 'string') {\n      return rule.cssText;\n    } else {\n      return '';\n    }\n  }\n}\n\n/** A Tag that emulates the CSSStyleSheet API but uses text nodes */\nexport class TextTag implements Tag {\n  element: HTMLStyleElement;\n\n  nodes: NodeList<Node>;\n\n  length: number;\n\n  constructor(target?: HTMLElement) {\n    const element = (this.element = makeStyleTag(target));\n    this.nodes = element.childNodes;\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    if (index <= this.length && index >= 0) {\n      const node = document.createTextNode(rule);\n      const refNode = this.nodes[index];\n      this.element.insertBefore(node, refNode || null);\n      this.length++;\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.element.removeChild(this.nodes[index]);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    if (index < this.length) {\n      return this.nodes[index].textContent;\n    } else {\n      return '';\n    }\n  }\n}\n\n/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */\nexport class VirtualTag implements Tag {\n  rules: string[];\n\n  length: number;\n\n  constructor(_target?: HTMLElement) {\n    this.rules = [];\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    if (index <= this.length) {\n      this.rules.splice(index, 0, rule);\n      this.length++;\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.rules.splice(index, 1);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    if (index < this.length) {\n      return this.rules[index];\n    } else {\n      return '';\n    }\n  }\n}\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport type { GroupedTag, Tag } from './types';\nimport throwStyledError from '../utils/error';\n\n/** Create a GroupedTag with an underlying Tag implementation */\nexport const makeGroupedTag = (tag: Tag): GroupedTag => {\n  return new DefaultGroupedTag(tag);\n};\n\nconst BASE_SIZE = 1 << 9;\n\nclass DefaultGroupedTag implements GroupedTag {\n  groupSizes: Uint32Array;\n\n  length: number;\n\n  tag: Tag;\n\n  constructor(tag: Tag) {\n    this.groupSizes = new Uint32Array(BASE_SIZE);\n    this.length = BASE_SIZE;\n    this.tag = tag;\n  }\n\n  indexOfGroup(group: number): number {\n    let index = 0;\n    for (let i = 0; i < group; i++) {\n      index += this.groupSizes[i];\n    }\n\n    return index;\n  }\n\n  insertRules(group: number, rules: string[]): void {\n    if (group >= this.groupSizes.length) {\n      const oldBuffer = this.groupSizes;\n      const oldSize = oldBuffer.length;\n\n      let newSize = oldSize;\n      while (group >= newSize) {\n        newSize <<= 1;\n        if (newSize < 0) {\n          throwStyledError(16, `${group}`);\n        }\n      }\n\n      this.groupSizes = new Uint32Array(newSize);\n      this.groupSizes.set(oldBuffer);\n      this.length = newSize;\n\n      for (let i = oldSize; i < newSize; i++) {\n        this.groupSizes[i] = 0;\n      }\n    }\n\n    let ruleIndex = this.indexOfGroup(group + 1);\n    for (let i = 0, l = rules.length; i < l; i++) {\n      if (this.tag.insertRule(ruleIndex, rules[i])) {\n        this.groupSizes[group]++;\n        ruleIndex++;\n      }\n    }\n  }\n\n  clearGroup(group: number): void {\n    if (group < this.length) {\n      const length = this.groupSizes[group];\n      const startIndex = this.indexOfGroup(group);\n      const endIndex = startIndex + length;\n\n      this.groupSizes[group] = 0;\n\n      for (let i = startIndex; i < endIndex; i++) {\n        this.tag.deleteRule(startIndex);\n      }\n    }\n  }\n\n  getGroup(group: number): string {\n    let css = '';\n    if (group >= this.length || this.groupSizes[group] === 0) {\n      return css;\n    }\n\n    const length = this.groupSizes[group];\n    const startIndex = this.indexOfGroup(group);\n    const endIndex = startIndex + length;\n\n    for (let i = startIndex; i < endIndex; i++) {\n      css += `${this.tag.getRule(i)}\\n`;\n    }\n\n    return css;\n  }\n}\n","// @flow\n\nimport throwStyledError from '../utils/error';\n\nconst MAX_SMI = 1 << 31 - 1;\n\nlet groupIDRegister: Map<string, number> = new Map();\nlet reverseRegister: Map<number, string> = new Map();\nlet nextFreeGroup = 1;\n\nexport const resetGroupIds = () => {\n  groupIDRegister = new Map();\n  reverseRegister = new Map();\n  nextFreeGroup = 1;\n};\n\nexport const getGroupForId = (id: string): number => {\n  if (groupIDRegister.has(id)) {\n    return (groupIDRegister.get(id): any);\n  }\n\n  const group = nextFreeGroup++;\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    ((group | 0) < 0 || group > MAX_SMI)\n  ) {\n    throwStyledError(16, `${group}`);\n  }\n\n  groupIDRegister.set(id, group);\n  reverseRegister.set(group, id);\n  return group;\n};\n\nexport const getIdForGroup = (group: number): void | string => {\n  return reverseRegister.get(group);\n};\n\nexport const setGroupForId = (id: string, group: number) => {\n  if (group >= nextFreeGroup) {\n    nextFreeGroup = group + 1;\n  }\n\n  groupIDRegister.set(id, group);\n  reverseRegister.set(group, id);\n};\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\nimport { makeTag } from './Tag';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n  isServer?: boolean,\n  useCSSOMInjection?: boolean,\n  target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map<string, Set<string>>;\n\nconst defaultOptions = {\n  isServer: !IS_BROWSER,\n  useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/** Contains the main stylesheet logic for stringification and caching */\nexport default class StyleSheet implements Sheet {\n  gs: GlobalStylesAllocationMap;\n\n  names: NamesAllocationMap;\n\n  options: SheetOptions;\n\n  tag: void | GroupedTag;\n\n  /** Register a group ID to give it an index */\n  static registerId(id: string): number {\n    return getGroupForId(id);\n  }\n\n  constructor(\n    options: SheetConstructorArgs = defaultOptions,\n    globalStyles?: GlobalStylesAllocationMap = {},\n    names?: NamesAllocationMap\n  ) {\n    this.options = {\n      ...defaultOptions,\n      ...options,\n    };\n\n    this.gs = globalStyles;\n    this.names = new Map(names);\n\n    // We rehydrate only once and use the sheet that is created first\n    if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {\n      SHOULD_REHYDRATE = false;\n      rehydrateSheet(this);\n    }\n  }\n\n  reconstructWithOptions(options: SheetConstructorArgs) {\n    return new StyleSheet({ ...this.options, ...options }, this.gs, this.names);\n  }\n\n  allocateGSInstance(id: string) {\n    return (this.gs[id] = (this.gs[id] || 0) + 1);\n  }\n\n  /** Lazily initialises a GroupedTag for when it's actually needed */\n  getTag(): GroupedTag {\n    return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));\n  }\n\n  /** Check whether a name is known for caching */\n  hasNameForId(id: string, name: string): boolean {\n    return this.names.has(id) && (this.names.get(id): any).has(name);\n  }\n\n  /** Mark a group's name as known for caching */\n  registerName(id: string, name: string) {\n    getGroupForId(id);\n\n    if (!this.names.has(id)) {\n      const groupNames = new Set();\n      groupNames.add(name);\n      this.names.set(id, groupNames);\n    } else {\n      (this.names.get(id): any).add(name);\n    }\n  }\n\n  /** Insert new rules which also marks the name as known */\n  insertRules(id: string, name: string, rules: string[]) {\n    this.registerName(id, name);\n    this.getTag().insertRules(getGroupForId(id), rules);\n  }\n\n  /** Clears all cached names for a given group ID */\n  clearNames(id: string) {\n    if (this.names.has(id)) {\n      (this.names.get(id): any).clear();\n    }\n  }\n\n  /** Clears all rules for a given group ID */\n  clearRules(id: string) {\n    this.getTag().clearGroup(getGroupForId(id));\n    this.clearNames(id);\n  }\n\n  /** Clears the entire tag which deletes all rules but not its names */\n  clearTag() {\n    // NOTE: This does not clear the names, since it's only used during SSR\n    // so that we can continuously output only new rules\n    this.tag = undefined;\n  }\n\n  /** Outputs the current sheet as a CSS string with markers for SSR */\n  toString(): string {\n    return outputSheet(this);\n  }\n}\n","// @flow\nimport React, { useContext, useEffect, useMemo, useState, type Node, type Context } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport createStylisInstance, { type Stringifier } from '../utils/stylis';\n\ntype Props = {\n  children?: Node,\n  disableCSSOMInjection?: boolean,\n  disableVendorPrefixes?: boolean,\n  sheet?: StyleSheet,\n  stylisPlugins?: Array<Function>,\n  target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context<StyleSheet | void> = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context<Stringifier | void> = React.createContext();\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport const masterSheet: StyleSheet = new StyleSheet();\nexport const masterStylis: Stringifier = createStylisInstance();\n\nexport function useStyleSheet(): StyleSheet {\n  return useContext(StyleSheetContext) || masterSheet;\n}\n\nexport function useStylis(): Stringifier {\n  return useContext(StylisContext) || masterStylis;\n}\n\nexport default function StyleSheetManager(props: Props) {\n  const [plugins, setPlugins] = useState(props.stylisPlugins);\n  const contextStyleSheet = useStyleSheet();\n\n  const styleSheet = useMemo(() => {\n    let sheet = contextStyleSheet;\n\n    if (props.sheet) {\n      // eslint-disable-next-line prefer-destructuring\n      sheet = props.sheet;\n    } else if (props.target) {\n      sheet = sheet.reconstructWithOptions({ target: props.target });\n    }\n\n    if (props.disableCSSOMInjection) {\n      sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n    }\n\n    return sheet;\n  }, [props.disableCSSOMInjection, props.sheet, props.target]);\n\n  const stylis = useMemo(\n    () =>\n      createStylisInstance({\n        options: { prefix: !props.disableVendorPrefixes },\n        plugins,\n      }),\n    [props.disableVendorPrefixes, plugins]\n  );\n\n  useEffect(() => {\n    if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n  }, [props.stylisPlugins]);\n\n  return (\n    <StyleSheetContext.Provider value={styleSheet}>\n      <StylisContext.Provider value={stylis}>\n        {process.env.NODE_ENV !== 'production'\n          ? React.Children.only(props.children)\n          : props.children}\n      </StylisContext.Provider>\n    </StyleSheetContext.Provider>\n  );\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n  for (let i = 0; i < rules.length; i += 1) {\n    const rule = rules[i];\n\n    if (isFunction(rule) && !isStyledComponent(rule)) {\n      // functions are allowed to be static if they're just being\n      // used to get the classname of a nested styled component\n      return false;\n    }\n  }\n\n  return true;\n}\n","// @flow\n\nimport flatten from '../utils/flatten';\nimport { hash, phash } from '../utils/hash';\nimport generateName from '../utils/generateAlphabeticName';\nimport isStaticRules from '../utils/isStaticRules';\nimport StyleSheet from '../sheet';\n\nimport type { RuleSet, Stringifier } from '../types';\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\nexport default class ComponentStyle {\n  baseHash: number;\n\n  componentId: string;\n\n  isStatic: boolean;\n\n  rules: RuleSet;\n\n  staticRulesId: string;\n\n  constructor(rules: RuleSet, componentId: string) {\n    this.rules = rules;\n    this.staticRulesId = '';\n    this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules);\n    this.componentId = componentId;\n    this.baseHash = hash(componentId);\n\n    // NOTE: This registers the componentId, which ensures a consistent order\n    // for this component's styles compared to others\n    StyleSheet.registerId(componentId);\n  }\n\n  /*\n   * Flattens a rule set into valid CSS\n   * Hashes it, wraps the whole chunk in a .hash1234 {}\n   * Returns the hash to be injected on render()\n   * */\n  generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet, stylis: Stringifier) {\n    const { componentId } = this;\n\n    // force dynamic classnames if user-supplied stylis plugins are in use\n    if (this.isStatic && !stylis.hash) {\n      if (this.staticRulesId && styleSheet.hasNameForId(componentId, this.staticRulesId)) {\n        return this.staticRulesId;\n      }\n\n      const cssStatic = flatten(this.rules, executionContext, styleSheet).join('');\n      const name = generateName(phash(this.baseHash, cssStatic.length) >>> 0);\n\n      if (!styleSheet.hasNameForId(componentId, name)) {\n        const cssStaticFormatted = stylis(cssStatic, `.${name}`, undefined, componentId);\n\n        styleSheet.insertRules(componentId, name, cssStaticFormatted);\n      }\n\n      this.staticRulesId = name;\n\n      return name;\n    } else {\n      const { length } = this.rules;\n      let dynamicHash = phash(this.baseHash, stylis.hash);\n      let css = '';\n\n      for (let i = 0; i < length; i++) {\n        const partRule = this.rules[i];\n        if (typeof partRule === 'string') {\n          css += partRule;\n\n          if (process.env.NODE_ENV !== 'production') dynamicHash = phash(dynamicHash, partRule + i);\n        } else {\n          const partChunk = flatten(partRule, executionContext, styleSheet);\n          const partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;\n          dynamicHash = phash(dynamicHash, partString + i);\n          css += partString;\n        }\n      }\n\n      const name = generateName(dynamicHash >>> 0);\n\n      if (!styleSheet.hasNameForId(componentId, name)) {\n        const cssFormatted = stylis(css, `.${name}`, undefined, componentId);\n        styleSheet.insertRules(componentId, name, cssFormatted);\n      }\n\n      return name;\n    }\n  }\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport React, {\n  createElement,\n  useContext,\n  useDebugValue,\n  type AbstractComponent,\n  type Ref,\n} from 'react';\nimport hoist from 'hoist-non-react-statics';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport generateComponentId from '../utils/generateComponentId';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport { ThemeContext } from './ThemeProvider';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\n/* global $Call */\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(displayName: string, parentComponentId: string) {\n  const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n  // Ensure that no displayName can lead to duplicate componentIds\n  identifiers[name] = (identifiers[name] || 0) + 1;\n\n  const componentId = `${name}-${generateComponentId(name + identifiers[name])}`;\n  return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs<Config>(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n  // NOTE: can't memoize this\n  // returns [context, resolvedAttrs]\n  // where resolvedAttrs is only the things injected by the attrs themselves\n  const context = { ...props, theme };\n  const resolvedAttrs = {};\n\n  attrs.forEach(attrDef => {\n    let resolvedAttrDef = attrDef;\n    let key;\n\n    if (isFunction(resolvedAttrDef)) {\n      resolvedAttrDef = resolvedAttrDef(context);\n    }\n\n    /* eslint-disable guard-for-in */\n    for (key in resolvedAttrDef) {\n      context[key] = resolvedAttrs[key] =\n        key === 'className'\n          ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n          : resolvedAttrDef[key];\n    }\n    /* eslint-enable guard-for-in */\n  });\n\n  return [context, resolvedAttrs];\n}\n\ninterface StyledComponentWrapperProperties {\n  attrs: Attrs;\n  componentStyle: ComponentStyle;\n  displayName: string;\n  foldedComponentIds: Array<string>;\n  target: Target;\n  styledComponentId: string;\n  warnTooManyClasses: $Call<typeof createWarnTooManyClasses, string, string>;\n}\n\ntype StyledComponentWrapper<Config, Instance> = AbstractComponent<Config, Instance> &\n  StyledComponentWrapperProperties;\n\nfunction useInjectedStyle<T>(\n  componentStyle: ComponentStyle,\n  hasAttrs: boolean,\n  resolvedAttrs: T,\n  warnTooManyClasses?: $Call<typeof createWarnTooManyClasses, string, string>\n) {\n  const styleSheet = useStyleSheet();\n  const stylis = useStylis();\n\n  // statically styled-components don't need to build an execution context object,\n  // and shouldn't be increasing the number of class names\n  const isStatic = componentStyle.isStatic && !hasAttrs;\n\n  const className = isStatic\n    ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n    : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n  useDebugValue(className);\n\n  if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n    warnTooManyClasses(className);\n  }\n\n  return className;\n}\n\nfunction useStyledComponentImpl<Config: {}, Instance>(\n  forwardedComponent: StyledComponentWrapper<Config, Instance>,\n  props: Object,\n  forwardedRef: Ref<any>\n) {\n  const {\n    attrs: componentAttrs,\n    componentStyle,\n    // $FlowFixMe\n    defaultProps,\n    foldedComponentIds,\n    styledComponentId,\n    target,\n  } = forwardedComponent;\n\n  useDebugValue(styledComponentId);\n\n  // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n  // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n  // should be an immutable value, but behave for now.\n  const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n  const [context, attrs] = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);\n\n  const generatedClassName = useInjectedStyle(\n    componentStyle,\n    componentAttrs.length > 0,\n    context,\n    process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n  );\n\n  const refToForward = forwardedRef;\n\n  const elementToBeCreated: Target = attrs.as || props.as || target;\n\n  const isTargetTag = isTag(elementToBeCreated);\n  const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n  const shouldFilterProps = isTargetTag || 'as' in computedProps || 'forwardedAs' in computedProps;\n  const propsForElement = shouldFilterProps ? {} : { ...computedProps };\n\n  if (shouldFilterProps) {\n    // eslint-disable-next-line guard-for-in\n    for (const key in computedProps) {\n      if (key === 'forwardedAs') {\n        propsForElement.as = computedProps[key];\n      } else if (key !== 'as' && key !== 'forwardedAs' && (!isTargetTag || validAttr(key))) {\n        // Don't pass through non HTML tags through to HTML elements\n        propsForElement[key] = computedProps[key];\n      }\n    }\n  }\n\n  if (props.style && attrs.style !== props.style) {\n    propsForElement.style = { ...props.style, ...attrs.style };\n  }\n\n  propsForElement.className = Array.prototype\n    .concat(\n      foldedComponentIds,\n      styledComponentId,\n      generatedClassName !== styledComponentId ? generatedClassName : null,\n      props.className,\n      attrs.className\n    )\n    .filter(Boolean)\n    .join(' ');\n\n  propsForElement.ref = refToForward;\n\n  return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n  target: Target | StyledComponentWrapper<*, *>,\n  options: Object,\n  rules: RuleSet\n) {\n  const isTargetStyledComp = isStyledComponent(target);\n  const isCompositeComponent = !isTag(target);\n\n  const {\n    displayName = generateDisplayName(target),\n    componentId = generateId(options.displayName, options.parentComponentId),\n    attrs = EMPTY_ARRAY,\n  } = options;\n\n  const styledComponentId =\n    options.displayName && options.componentId\n      ? `${escape(options.displayName)}-${options.componentId}`\n      : options.componentId || componentId;\n\n  // fold the underlying StyledComponent attrs up (implicit extend)\n  const finalAttrs =\n    // $FlowFixMe\n    isTargetStyledComp && target.attrs\n      ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n      : attrs;\n\n  const componentStyle = new ComponentStyle(\n    isTargetStyledComp\n      ? // fold the underlying StyledComponent rules up (implicit extend)\n        // $FlowFixMe\n        target.componentStyle.rules.concat(rules)\n      : rules,\n    styledComponentId\n  );\n\n  /**\n   * forwardRef creates a new interim component, which we'll take advantage of\n   * instead of extending ParentComponent to create _another_ interim class\n   */\n  let WrappedStyledComponent;\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forwardRef = (props, ref) => useStyledComponentImpl(WrappedStyledComponent, props, ref);\n\n  forwardRef.displayName = displayName;\n\n  // $FlowFixMe this is a forced cast to merge it StyledComponentWrapperProperties\n  WrappedStyledComponent = (React.forwardRef(forwardRef): StyledComponentWrapper<*, *>);\n\n  WrappedStyledComponent.attrs = finalAttrs;\n  WrappedStyledComponent.componentStyle = componentStyle;\n  WrappedStyledComponent.displayName = displayName;\n\n  // this static is used to preserve the cascade of static classes for component selector\n  // purposes; this is especially important with usage of the css prop\n  WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n    ? // $FlowFixMe\n      Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n    : EMPTY_ARRAY;\n\n  WrappedStyledComponent.styledComponentId = styledComponentId;\n\n  // fold the underlying StyledComponent target up since we folded the styles\n  WrappedStyledComponent.target = isTargetStyledComp\n    ? // $FlowFixMe\n      target.target\n    : target;\n\n  // $FlowFixMe\n  WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n    const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n    const newComponentId =\n      previousComponentId &&\n      `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n    const newOptions = {\n      ...optionsToCopy,\n      attrs: finalAttrs,\n      componentId: newComponentId,\n    };\n\n    return createStyledComponent(tag, newOptions, rules);\n  };\n\n  // $FlowFixMe\n  Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n    get() {\n      return this._foldedDefaultProps;\n    },\n\n    set(obj) {\n      // $FlowFixMe\n      this._foldedDefaultProps = isTargetStyledComp ? merge({}, target.defaultProps, obj) : obj;\n    },\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n      displayName,\n      styledComponentId\n    );\n  }\n\n  // $FlowFixMe\n  WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n  if (isCompositeComponent) {\n    hoist(WrappedStyledComponent, (target: any), {\n      // all SC-specific things should not be hoisted\n      attrs: true,\n      componentStyle: true,\n      displayName: true,\n      foldedComponentIds: true,\n      self: true,\n      styledComponentId: true,\n      target: true,\n      withComponent: true,\n    });\n  }\n\n  return WrappedStyledComponent;\n}\n","// @flow\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport StyleSheet from '../sheet';\n\nimport type { RuleSet, Stringifier } from '../types';\n\nexport default class GlobalStyle {\n  componentId: string;\n\n  isStatic: boolean;\n\n  rules: RuleSet;\n\n  constructor(rules: RuleSet, componentId: string) {\n    this.rules = rules;\n    this.componentId = componentId;\n    this.isStatic = isStaticRules(rules);\n  }\n\n  createStyles(\n    instance: number,\n    executionContext: Object,\n    styleSheet: StyleSheet,\n    stylis: Stringifier\n  ) {\n    const flatCSS = flatten(this.rules, executionContext, styleSheet);\n    const css = stylis(flatCSS.join(''), '');\n    const id = this.componentId + instance;\n\n    // NOTE: We use the id as a name as well, since these rules never change\n    styleSheet.insertRules(id, id, css);\n  }\n\n  removeStyles(instance: number, styleSheet: StyleSheet) {\n    styleSheet.clearRules(this.componentId + instance);\n  }\n\n  renderStyles(\n    instance: number,\n    executionContext: Object,\n    styleSheet: StyleSheet,\n    stylis: Stringifier\n  ) {\n    StyleSheet.registerId(this.componentId + instance);\n\n    // NOTE: Remove old styles, then inject the new ones\n    this.removeStyles(instance, styleSheet);\n    this.createStyles(instance, executionContext, styleSheet, stylis);\n  }\n}\n","// @flow\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { STATIC_EXECUTION_CONTEXT } from '../constants';\nimport GlobalStyle from '../models/GlobalStyle';\nimport { useStyleSheet, useStylis } from '../models/StyleSheetManager';\nimport determineTheme from '../utils/determineTheme';\nimport { ThemeContext } from '../models/ThemeProvider';\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport generateComponentId from '../utils/generateComponentId';\nimport css from './css';\n\nimport type { Interpolation } from '../types';\n\ntype GlobalStyleComponentPropsType = Object;\n\nexport default function createGlobalStyle(\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) {\n  const rules = css(strings, ...interpolations);\n  const styledComponentId = `sc-global-${generateComponentId(JSON.stringify(rules))}`;\n  const globalStyle = new GlobalStyle(rules, styledComponentId);\n\n  function GlobalStyleComponent(props: GlobalStyleComponentPropsType) {\n    const styleSheet = useStyleSheet();\n    const stylis = useStylis();\n    const theme = useContext(ThemeContext);\n    const instanceRef = useRef(null);\n\n    if (instanceRef.current === null) {\n      instanceRef.current = styleSheet.allocateGSInstance(styledComponentId);\n    }\n\n    const instance = instanceRef.current;\n\n    if (process.env.NODE_ENV !== 'production' && React.Children.count(props.children)) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The global style component ${styledComponentId} was given child JSX. createGlobalStyle does not render children.`\n      );\n    }\n\n    if (globalStyle.isStatic) {\n      globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);\n    } else {\n      const context = {\n        ...props,\n        theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps),\n      };\n\n      globalStyle.renderStyles(instance, context, styleSheet, stylis);\n    }\n\n    useEffect(() => () => globalStyle.removeStyles(instance, styleSheet), EMPTY_ARRAY);\n\n    return null;\n  }\n\n  // $FlowFixMe\n  return React.memo(GlobalStyleComponent);\n}\n","// @flow\n/* eslint-disable no-underscore-dangle */\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n  isStreaming: boolean;\n\n  instance: StyleSheet;\n\n  sealed: boolean;\n\n  constructor() {\n    this.instance = new StyleSheet({ isServer: true });\n    this.sealed = false;\n  }\n\n  _emitSheetCSS = (): string => {\n    const css = this.instance.toString();\n    const nonce = getNonce();\n    const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n    const htmlAttr = attrs.filter(Boolean).join(' ');\n\n    return `<style ${htmlAttr}>${css}</style>`;\n  };\n\n  collectStyles(children: any) {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n  }\n\n  getStyleTags = (): string => {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    return this._emitSheetCSS();\n  };\n\n  getStyleElement = () => {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    const props = {\n      [SC_ATTR]: '',\n      [SC_ATTR_VERSION]: SC_VERSION,\n      dangerouslySetInnerHTML: {\n        __html: this.instance.toString(),\n      },\n    };\n\n    const nonce = getNonce();\n    if (nonce) {\n      (props: any).nonce = nonce;\n    }\n\n    // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n    return [<style {...props} key=\"sc-0-0\" />];\n  };\n\n  // eslint-disable-next-line consistent-return\n  interleaveWithNodeStream(input: any) {\n    if (!__SERVER__ || IS_BROWSER) {\n      return throwStyledError(3);\n    } else if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    if (__SERVER__) {\n      this.seal();\n\n      // eslint-disable-next-line global-require\n      const { Readable, Transform } = require('stream');\n\n      const readableStream: Readable = input;\n      const { instance: sheet, _emitSheetCSS } = this;\n\n      const transformer = new Transform({\n        transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n          // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n          // then reset its rules so we get only new ones for the next chunk\n          const renderedHtml = chunk.toString();\n          const html = _emitSheetCSS();\n\n          sheet.clearTag();\n\n          // prepend style html to chunk, unless the start of the chunk is a\n          // closing tag in which case append right after that\n          if (CLOSING_TAG_R.test(renderedHtml)) {\n            const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n            const before = renderedHtml.slice(0, endOfClosingTag);\n            const after = renderedHtml.slice(endOfClosingTag);\n\n            this.push(before + html + after);\n          } else {\n            this.push(html + renderedHtml);\n          }\n\n          callback();\n        },\n      });\n\n      readableStream.on('error', err => {\n        // forward the error to the transform stream\n        transformer.emit('error', err);\n      });\n\n      return readableStream.pipe(transformer);\n    }\n  }\n\n  seal = () => {\n    this.sealed = true;\n  };\n}\n","// @flow\n\n/* Import singletons */\nimport isStyledComponent from './utils/isStyledComponent';\nimport css from './constructors/css';\nimport createGlobalStyle from './constructors/createGlobalStyle';\nimport keyframes from './constructors/keyframes';\nimport ServerStyleSheet from './models/ServerStyleSheet';\n\nimport StyleSheetManager, {\n  StyleSheetContext,\n  StyleSheetConsumer,\n} from './models/StyleSheetManager';\n\n/* Import components */\nimport ThemeProvider, { ThemeContext, ThemeConsumer } from './models/ThemeProvider';\n\n/* Import Higher Order Components */\nimport withTheme from './hoc/withTheme';\n\n/* Import hooks */\nimport useTheme from './hooks/useTheme';\n\n/* Define bundle version for export */\ndeclare var __VERSION__: string;\nconst version = __VERSION__;\n\n/* Warning if you've imported this file on React Native */\nif (\n  process.env.NODE_ENV !== 'production' &&\n  typeof navigator !== 'undefined' &&\n  navigator.product === 'ReactNative'\n) {\n  // eslint-disable-next-line no-console\n  console.warn(\n    \"It looks like you've imported 'styled-components' on React Native.\\n\" +\n      \"Perhaps you're looking to import 'styled-components/native'?\\n\" +\n      'Read more about this at https://www.styled-components.com/docs/basics#react-native'\n  );\n}\n\n/* Warning if there are several instances of styled-components */\nif (\n  process.env.NODE_ENV !== 'production' &&\n  process.env.NODE_ENV !== 'test' &&\n  typeof window !== 'undefined'\n) {\n  window['__styled-components-init__'] = window['__styled-components-init__'] || 0;\n\n  if (window['__styled-components-init__'] === 1) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"It looks like there are several instances of 'styled-components' initialized in this application. \" +\n        'This may cause dynamic styles not rendering properly, errors happening during rehydration process, ' +\n        'missing theme prop, and makes your application bigger without a good reason.\\n\\n' +\n        'See https://s-c.sh/2BAXzed for more info.'\n    );\n  }\n\n  window['__styled-components-init__'] += 1;\n}\n\n/* Export everything */\nexport * from './secretInternals';\nexport {\n  createGlobalStyle,\n  css,\n  isStyledComponent,\n  keyframes,\n  ServerStyleSheet,\n  StyleSheetConsumer,\n  StyleSheetContext,\n  StyleSheetManager,\n  ThemeConsumer,\n  ThemeContext,\n  ThemeProvider,\n  useTheme,\n  version,\n  withTheme,\n};\n"],"names":["nodes","insertRule","names","id","stylisPlugins","shouldFilterProps","isCompositeComponent","flatten"],"mappings":"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"}
+{"version":3,"file":"styled-components.esm.js","sources":["../src/constants.js","../src/sheet/Tag.js","../src/sheet/GroupedTag.js","../src/sheet/GroupIDAllocator.js","../src/sheet/Sheet.js","../src/models/StyleSheetManager.js","../src/utils/isStaticRules.js","../src/models/ComponentStyle.js","../src/models/StyledComponent.js","../src/models/GlobalStyle.js","../src/constructors/createGlobalStyle.js","../src/models/ServerStyleSheet.js","../src/base.js"],"sourcesContent":["// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR =\n  (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||\n  'data-styled';\n\nexport const SC_ATTR_ACTIVE = 'active';\nexport const SC_ATTR_VERSION = 'data-styled-version';\nexport const SC_VERSION = __VERSION__;\nexport const SPLITTER = '/*!sc*/\\n';\n\nexport const IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nexport const DISABLE_SPEEDY =\n  (typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY) ||\n  (typeof process !== 'undefined' &&\n    (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY)) ||\n  process.env.NODE_ENV !== 'production';\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n  if (isServer) {\n    return new VirtualTag(target);\n  } else if (useCSSOMInjection) {\n    return new CSSOMTag(target);\n  } else {\n    return new TextTag(target);\n  }\n};\n\nexport class CSSOMTag implements Tag {\n  element: HTMLStyleElement;\n\n  sheet: CSSStyleSheet;\n\n  length: number;\n\n  constructor(target?: HTMLElement) {\n    const element = (this.element = makeStyleTag(target));\n\n    // Avoid Edge bug where empty style elements don't create sheets\n    element.appendChild(document.createTextNode(''));\n\n    this.sheet = getSheet(element);\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    try {\n      this.sheet.insertRule(rule, index);\n      this.length++;\n      return true;\n    } catch (_error) {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.sheet.deleteRule(index);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    const rule = this.sheet.cssRules[index];\n    // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n    if (rule !== undefined && typeof rule.cssText === 'string') {\n      return rule.cssText;\n    } else {\n      return '';\n    }\n  }\n}\n\n/** A Tag that emulates the CSSStyleSheet API but uses text nodes */\nexport class TextTag implements Tag {\n  element: HTMLStyleElement;\n\n  nodes: NodeList<Node>;\n\n  length: number;\n\n  constructor(target?: HTMLElement) {\n    const element = (this.element = makeStyleTag(target));\n    this.nodes = element.childNodes;\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    if (index <= this.length && index >= 0) {\n      const node = document.createTextNode(rule);\n      const refNode = this.nodes[index];\n      this.element.insertBefore(node, refNode || null);\n      this.length++;\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.element.removeChild(this.nodes[index]);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    if (index < this.length) {\n      return this.nodes[index].textContent;\n    } else {\n      return '';\n    }\n  }\n}\n\n/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */\nexport class VirtualTag implements Tag {\n  rules: string[];\n\n  length: number;\n\n  constructor(_target?: HTMLElement) {\n    this.rules = [];\n    this.length = 0;\n  }\n\n  insertRule(index: number, rule: string): boolean {\n    if (index <= this.length) {\n      this.rules.splice(index, 0, rule);\n      this.length++;\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  deleteRule(index: number): void {\n    this.rules.splice(index, 1);\n    this.length--;\n  }\n\n  getRule(index: number): string {\n    if (index < this.length) {\n      return this.rules[index];\n    } else {\n      return '';\n    }\n  }\n}\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport type { GroupedTag, Tag } from './types';\nimport { SPLITTER } from '../constants';\nimport throwStyledError from '../utils/error';\n\n/** Create a GroupedTag with an underlying Tag implementation */\nexport const makeGroupedTag = (tag: Tag): GroupedTag => {\n  return new DefaultGroupedTag(tag);\n};\n\nconst BASE_SIZE = 1 << 9;\n\nclass DefaultGroupedTag implements GroupedTag {\n  groupSizes: Uint32Array;\n\n  length: number;\n\n  tag: Tag;\n\n  constructor(tag: Tag) {\n    this.groupSizes = new Uint32Array(BASE_SIZE);\n    this.length = BASE_SIZE;\n    this.tag = tag;\n  }\n\n  indexOfGroup(group: number): number {\n    let index = 0;\n    for (let i = 0; i < group; i++) {\n      index += this.groupSizes[i];\n    }\n\n    return index;\n  }\n\n  insertRules(group: number, rules: string[]): void {\n    if (group >= this.groupSizes.length) {\n      const oldBuffer = this.groupSizes;\n      const oldSize = oldBuffer.length;\n\n      let newSize = oldSize;\n      while (group >= newSize) {\n        newSize <<= 1;\n        if (newSize < 0) {\n          throwStyledError(16, `${group}`);\n        }\n      }\n\n      this.groupSizes = new Uint32Array(newSize);\n      this.groupSizes.set(oldBuffer);\n      this.length = newSize;\n\n      for (let i = oldSize; i < newSize; i++) {\n        this.groupSizes[i] = 0;\n      }\n    }\n\n    let ruleIndex = this.indexOfGroup(group + 1);\n    for (let i = 0, l = rules.length; i < l; i++) {\n      if (this.tag.insertRule(ruleIndex, rules[i])) {\n        this.groupSizes[group]++;\n        ruleIndex++;\n      }\n    }\n  }\n\n  clearGroup(group: number): void {\n    if (group < this.length) {\n      const length = this.groupSizes[group];\n      const startIndex = this.indexOfGroup(group);\n      const endIndex = startIndex + length;\n\n      this.groupSizes[group] = 0;\n\n      for (let i = startIndex; i < endIndex; i++) {\n        this.tag.deleteRule(startIndex);\n      }\n    }\n  }\n\n  getGroup(group: number): string {\n    let css = '';\n    if (group >= this.length || this.groupSizes[group] === 0) {\n      return css;\n    }\n\n    const length = this.groupSizes[group];\n    const startIndex = this.indexOfGroup(group);\n    const endIndex = startIndex + length;\n\n    for (let i = startIndex; i < endIndex; i++) {\n      css += `${this.tag.getRule(i)}${SPLITTER}`;\n    }\n\n    return css;\n  }\n}\n","// @flow\n\nimport throwStyledError from '../utils/error';\n\nconst MAX_SMI = 1 << 31 - 1;\n\nlet groupIDRegister: Map<string, number> = new Map();\nlet reverseRegister: Map<number, string> = new Map();\nlet nextFreeGroup = 1;\n\nexport const resetGroupIds = () => {\n  groupIDRegister = new Map();\n  reverseRegister = new Map();\n  nextFreeGroup = 1;\n};\n\nexport const getGroupForId = (id: string): number => {\n  if (groupIDRegister.has(id)) {\n    return (groupIDRegister.get(id): any);\n  }\n\n  const group = nextFreeGroup++;\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    ((group | 0) < 0 || group > MAX_SMI)\n  ) {\n    throwStyledError(16, `${group}`);\n  }\n\n  groupIDRegister.set(id, group);\n  reverseRegister.set(group, id);\n  return group;\n};\n\nexport const getIdForGroup = (group: number): void | string => {\n  return reverseRegister.get(group);\n};\n\nexport const setGroupForId = (id: string, group: number) => {\n  if (group >= nextFreeGroup) {\n    nextFreeGroup = group + 1;\n  }\n\n  groupIDRegister.set(id, group);\n  reverseRegister.set(group, id);\n};\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\nimport { makeTag } from './Tag';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n  isServer?: boolean,\n  useCSSOMInjection?: boolean,\n  target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map<string, Set<string>>;\n\nconst defaultOptions = {\n  isServer: !IS_BROWSER,\n  useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/** Contains the main stylesheet logic for stringification and caching */\nexport default class StyleSheet implements Sheet {\n  gs: GlobalStylesAllocationMap;\n\n  names: NamesAllocationMap;\n\n  options: SheetOptions;\n\n  tag: void | GroupedTag;\n\n  /** Register a group ID to give it an index */\n  static registerId(id: string): number {\n    return getGroupForId(id);\n  }\n\n  constructor(\n    options: SheetConstructorArgs = defaultOptions,\n    globalStyles?: GlobalStylesAllocationMap = {},\n    names?: NamesAllocationMap\n  ) {\n    this.options = {\n      ...defaultOptions,\n      ...options,\n    };\n\n    this.gs = globalStyles;\n    this.names = new Map(names);\n\n    // We rehydrate only once and use the sheet that is created first\n    if (!this.options.isServer && IS_BROWSER && SHOULD_REHYDRATE) {\n      SHOULD_REHYDRATE = false;\n      rehydrateSheet(this);\n    }\n  }\n\n  reconstructWithOptions(options: SheetConstructorArgs) {\n    return new StyleSheet({ ...this.options, ...options }, this.gs, this.names);\n  }\n\n  allocateGSInstance(id: string) {\n    return (this.gs[id] = (this.gs[id] || 0) + 1);\n  }\n\n  /** Lazily initialises a GroupedTag for when it's actually needed */\n  getTag(): GroupedTag {\n    return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));\n  }\n\n  /** Check whether a name is known for caching */\n  hasNameForId(id: string, name: string): boolean {\n    return this.names.has(id) && (this.names.get(id): any).has(name);\n  }\n\n  /** Mark a group's name as known for caching */\n  registerName(id: string, name: string) {\n    getGroupForId(id);\n\n    if (!this.names.has(id)) {\n      const groupNames = new Set();\n      groupNames.add(name);\n      this.names.set(id, groupNames);\n    } else {\n      (this.names.get(id): any).add(name);\n    }\n  }\n\n  /** Insert new rules which also marks the name as known */\n  insertRules(id: string, name: string, rules: string[]) {\n    this.registerName(id, name);\n    this.getTag().insertRules(getGroupForId(id), rules);\n  }\n\n  /** Clears all cached names for a given group ID */\n  clearNames(id: string) {\n    if (this.names.has(id)) {\n      (this.names.get(id): any).clear();\n    }\n  }\n\n  /** Clears all rules for a given group ID */\n  clearRules(id: string) {\n    this.getTag().clearGroup(getGroupForId(id));\n    this.clearNames(id);\n  }\n\n  /** Clears the entire tag which deletes all rules but not its names */\n  clearTag() {\n    // NOTE: This does not clear the names, since it's only used during SSR\n    // so that we can continuously output only new rules\n    this.tag = undefined;\n  }\n\n  /** Outputs the current sheet as a CSS string with markers for SSR */\n  toString(): string {\n    return outputSheet(this);\n  }\n}\n","// @flow\nimport React, { useContext, useEffect, useMemo, useState, type Node, type Context } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport createStylisInstance, { type Stringifier } from '../utils/stylis';\n\ntype Props = {\n  children?: Node,\n  disableCSSOMInjection?: boolean,\n  disableVendorPrefixes?: boolean,\n  sheet?: StyleSheet,\n  stylisPlugins?: Array<Function>,\n  target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context<StyleSheet | void> = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context<Stringifier | void> = React.createContext();\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport const masterSheet: StyleSheet = new StyleSheet();\nexport const masterStylis: Stringifier = createStylisInstance();\n\nexport function useStyleSheet(): StyleSheet {\n  return useContext(StyleSheetContext) || masterSheet;\n}\n\nexport function useStylis(): Stringifier {\n  return useContext(StylisContext) || masterStylis;\n}\n\nexport default function StyleSheetManager(props: Props) {\n  const [plugins, setPlugins] = useState(props.stylisPlugins);\n  const contextStyleSheet = useStyleSheet();\n\n  const styleSheet = useMemo(() => {\n    let sheet = contextStyleSheet;\n\n    if (props.sheet) {\n      // eslint-disable-next-line prefer-destructuring\n      sheet = props.sheet;\n    } else if (props.target) {\n      sheet = sheet.reconstructWithOptions({ target: props.target });\n    }\n\n    if (props.disableCSSOMInjection) {\n      sheet = sheet.reconstructWithOptions({ useCSSOMInjection: false });\n    }\n\n    return sheet;\n  }, [props.disableCSSOMInjection, props.sheet, props.target]);\n\n  const stylis = useMemo(\n    () =>\n      createStylisInstance({\n        options: { prefix: !props.disableVendorPrefixes },\n        plugins,\n      }),\n    [props.disableVendorPrefixes, plugins]\n  );\n\n  useEffect(() => {\n    if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n  }, [props.stylisPlugins]);\n\n  return (\n    <StyleSheetContext.Provider value={styleSheet}>\n      <StylisContext.Provider value={stylis}>\n        {process.env.NODE_ENV !== 'production'\n          ? React.Children.only(props.children)\n          : props.children}\n      </StylisContext.Provider>\n    </StyleSheetContext.Provider>\n  );\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n  for (let i = 0; i < rules.length; i += 1) {\n    const rule = rules[i];\n\n    if (isFunction(rule) && !isStyledComponent(rule)) {\n      // functions are allowed to be static if they're just being\n      // used to get the classname of a nested styled component\n      return false;\n    }\n  }\n\n  return true;\n}\n","// @flow\n\nimport flatten from '../utils/flatten';\nimport { hash, phash } from '../utils/hash';\nimport generateName from '../utils/generateAlphabeticName';\nimport isStaticRules from '../utils/isStaticRules';\nimport StyleSheet from '../sheet';\n\nimport type { RuleSet, Stringifier } from '../types';\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\nexport default class ComponentStyle {\n  baseHash: number;\n\n  componentId: string;\n\n  isStatic: boolean;\n\n  rules: RuleSet;\n\n  staticRulesId: string;\n\n  constructor(rules: RuleSet, componentId: string) {\n    this.rules = rules;\n    this.staticRulesId = '';\n    this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules);\n    this.componentId = componentId;\n    this.baseHash = hash(componentId);\n\n    // NOTE: This registers the componentId, which ensures a consistent order\n    // for this component's styles compared to others\n    StyleSheet.registerId(componentId);\n  }\n\n  /*\n   * Flattens a rule set into valid CSS\n   * Hashes it, wraps the whole chunk in a .hash1234 {}\n   * Returns the hash to be injected on render()\n   * */\n  generateAndInjectStyles(executionContext: Object, styleSheet: StyleSheet, stylis: Stringifier) {\n    const { componentId } = this;\n\n    // force dynamic classnames if user-supplied stylis plugins are in use\n    if (this.isStatic && !stylis.hash) {\n      if (this.staticRulesId && styleSheet.hasNameForId(componentId, this.staticRulesId)) {\n        return this.staticRulesId;\n      }\n\n      const cssStatic = flatten(this.rules, executionContext, styleSheet).join('');\n      const name = generateName(phash(this.baseHash, cssStatic.length) >>> 0);\n\n      if (!styleSheet.hasNameForId(componentId, name)) {\n        const cssStaticFormatted = stylis(cssStatic, `.${name}`, undefined, componentId);\n\n        styleSheet.insertRules(componentId, name, cssStaticFormatted);\n      }\n\n      this.staticRulesId = name;\n\n      return name;\n    } else {\n      const { length } = this.rules;\n      let dynamicHash = phash(this.baseHash, stylis.hash);\n      let css = '';\n\n      for (let i = 0; i < length; i++) {\n        const partRule = this.rules[i];\n        if (typeof partRule === 'string') {\n          css += partRule;\n\n          if (process.env.NODE_ENV !== 'production') dynamicHash = phash(dynamicHash, partRule + i);\n        } else {\n          const partChunk = flatten(partRule, executionContext, styleSheet);\n          const partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;\n          dynamicHash = phash(dynamicHash, partString + i);\n          css += partString;\n        }\n      }\n\n      const name = generateName(dynamicHash >>> 0);\n\n      if (!styleSheet.hasNameForId(componentId, name)) {\n        const cssFormatted = stylis(css, `.${name}`, undefined, componentId);\n        styleSheet.insertRules(componentId, name, cssFormatted);\n      }\n\n      return name;\n    }\n  }\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport React, {\n  createElement,\n  useContext,\n  useDebugValue,\n  type AbstractComponent,\n  type Ref,\n} from 'react';\nimport hoist from 'hoist-non-react-statics';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport determineTheme from '../utils/determineTheme';\nimport escape from '../utils/escape';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport generateComponentId from '../utils/generateComponentId';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport { ThemeContext } from './ThemeProvider';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Attrs, RuleSet, Target } from '../types';\n\n/* global $Call */\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(displayName: string, parentComponentId: string) {\n  const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n  // Ensure that no displayName can lead to duplicate componentIds\n  identifiers[name] = (identifiers[name] || 0) + 1;\n\n  const componentId = `${name}-${generateComponentId(name + identifiers[name])}`;\n  return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs<Config>(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n  // NOTE: can't memoize this\n  // returns [context, resolvedAttrs]\n  // where resolvedAttrs is only the things injected by the attrs themselves\n  const context = { ...props, theme };\n  const resolvedAttrs = {};\n\n  attrs.forEach(attrDef => {\n    let resolvedAttrDef = attrDef;\n    let key;\n\n    if (isFunction(resolvedAttrDef)) {\n      resolvedAttrDef = resolvedAttrDef(context);\n    }\n\n    /* eslint-disable guard-for-in */\n    for (key in resolvedAttrDef) {\n      context[key] = resolvedAttrs[key] =\n        key === 'className'\n          ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n          : resolvedAttrDef[key];\n    }\n    /* eslint-enable guard-for-in */\n  });\n\n  return [context, resolvedAttrs];\n}\n\ninterface StyledComponentWrapperProperties {\n  attrs: Attrs;\n  componentStyle: ComponentStyle;\n  displayName: string;\n  foldedComponentIds: Array<string>;\n  target: Target;\n  shouldForwardProp: ?(prop: string, isValidAttr: (prop: string) => boolean) => boolean;\n  styledComponentId: string;\n  warnTooManyClasses: $Call<typeof createWarnTooManyClasses, string, string>;\n}\n\ntype StyledComponentWrapper<Config, Instance> = AbstractComponent<Config, Instance> &\n  StyledComponentWrapperProperties;\n\nfunction useInjectedStyle<T>(\n  componentStyle: ComponentStyle,\n  hasAttrs: boolean,\n  resolvedAttrs: T,\n  warnTooManyClasses?: $Call<typeof createWarnTooManyClasses, string, string>\n) {\n  const styleSheet = useStyleSheet();\n  const stylis = useStylis();\n\n  // statically styled-components don't need to build an execution context object,\n  // and shouldn't be increasing the number of class names\n  const isStatic = componentStyle.isStatic && !hasAttrs;\n\n  const className = isStatic\n    ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n    : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n  useDebugValue(className);\n\n  if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n    warnTooManyClasses(className);\n  }\n\n  return className;\n}\n\nfunction useStyledComponentImpl<Config: {}, Instance>(\n  forwardedComponent: StyledComponentWrapper<Config, Instance>,\n  props: Object,\n  forwardedRef: Ref<any>\n) {\n  const {\n    attrs: componentAttrs,\n    componentStyle,\n    // $FlowFixMe\n    defaultProps,\n    foldedComponentIds,\n    // $FlowFixMe\n    shouldForwardProp,\n    styledComponentId,\n    target,\n  } = forwardedComponent;\n\n  useDebugValue(styledComponentId);\n\n  // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n  // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n  // should be an immutable value, but behave for now.\n  const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n  const [context, attrs] = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);\n\n  const generatedClassName = useInjectedStyle(\n    componentStyle,\n    componentAttrs.length > 0,\n    context,\n    process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n  );\n\n  const refToForward = forwardedRef;\n\n  const elementToBeCreated: Target = attrs.$as || props.$as || attrs.as || props.as || target;\n\n  const isTargetTag = isTag(elementToBeCreated);\n  const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n  const propFilterFn = shouldForwardProp || (isTargetTag && validAttr);\n  const propsForElement = {};\n\n  // eslint-disable-next-line guard-for-in\n  for (const key in computedProps) {\n    if (key[0] === '$' || key === 'as') continue;\n    else if (key === 'forwardedAs') {\n      propsForElement.as = computedProps[key];\n    } else if (!propFilterFn || propFilterFn(key, validAttr)) {\n      // Don't pass through non HTML tags through to HTML elements\n      propsForElement[key] = computedProps[key];\n    }\n  }\n\n  if (props.style && attrs.style !== props.style) {\n    propsForElement.style = { ...props.style, ...attrs.style };\n  }\n\n  propsForElement.className = Array.prototype\n    .concat(\n      foldedComponentIds,\n      styledComponentId,\n      generatedClassName !== styledComponentId ? generatedClassName : null,\n      props.className,\n      attrs.className\n    )\n    .filter(Boolean)\n    .join(' ');\n\n  propsForElement.ref = refToForward;\n\n  return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n  target: Target | StyledComponentWrapper<*, *>,\n  options: Object,\n  rules: RuleSet\n) {\n  const isTargetStyledComp = isStyledComponent(target);\n  const isCompositeComponent = !isTag(target);\n\n  const {\n    displayName = generateDisplayName(target),\n    componentId = generateId(options.displayName, options.parentComponentId),\n    attrs = EMPTY_ARRAY,\n  } = options;\n\n  const styledComponentId =\n    options.displayName && options.componentId\n      ? `${escape(options.displayName)}-${options.componentId}`\n      : options.componentId || componentId;\n\n  // fold the underlying StyledComponent attrs up (implicit extend)\n  const finalAttrs =\n    // $FlowFixMe\n    isTargetStyledComp && target.attrs\n      ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)\n      : attrs;\n\n  // eslint-disable-next-line prefer-destructuring\n  let shouldForwardProp = options.shouldForwardProp;\n\n  // $FlowFixMe\n  if (isTargetStyledComp && target.shouldForwardProp) {\n    if (shouldForwardProp) {\n      // compose nested shouldForwardProp calls\n      shouldForwardProp = (prop, filterFn) =>\n        // $FlowFixMe\n        target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn);\n    } else {\n      // eslint-disable-next-line prefer-destructuring\n      shouldForwardProp = target.shouldForwardProp;\n    }\n  }\n\n  const componentStyle = new ComponentStyle(\n    isTargetStyledComp\n      ? // fold the underlying StyledComponent rules up (implicit extend)\n        // $FlowFixMe\n        target.componentStyle.rules.concat(rules)\n      : rules,\n    styledComponentId\n  );\n\n  /**\n   * forwardRef creates a new interim component, which we'll take advantage of\n   * instead of extending ParentComponent to create _another_ interim class\n   */\n  let WrappedStyledComponent;\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forwardRef = (props, ref) => useStyledComponentImpl(WrappedStyledComponent, props, ref);\n\n  forwardRef.displayName = displayName;\n\n  // $FlowFixMe this is a forced cast to merge it StyledComponentWrapperProperties\n  WrappedStyledComponent = (React.forwardRef(forwardRef): StyledComponentWrapper<*, *>);\n\n  WrappedStyledComponent.attrs = finalAttrs;\n  WrappedStyledComponent.componentStyle = componentStyle;\n  WrappedStyledComponent.displayName = displayName;\n  WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n  // this static is used to preserve the cascade of static classes for component selector\n  // purposes; this is especially important with usage of the css prop\n  WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n    ? // $FlowFixMe\n      Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)\n    : EMPTY_ARRAY;\n\n  WrappedStyledComponent.styledComponentId = styledComponentId;\n\n  // fold the underlying StyledComponent target up since we folded the styles\n  WrappedStyledComponent.target = isTargetStyledComp\n    ? // $FlowFixMe\n      target.target\n    : target;\n\n  // $FlowFixMe\n  WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n    const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n    const newComponentId =\n      previousComponentId &&\n      `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n    const newOptions = {\n      ...optionsToCopy,\n      attrs: finalAttrs,\n      componentId: newComponentId,\n    };\n\n    return createStyledComponent(tag, newOptions, rules);\n  };\n\n  // $FlowFixMe\n  Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n    get() {\n      return this._foldedDefaultProps;\n    },\n\n    set(obj) {\n      // $FlowFixMe\n      this._foldedDefaultProps = isTargetStyledComp ? merge({}, target.defaultProps, obj) : obj;\n    },\n  });\n\n  if (process.env.NODE_ENV !== 'production') {\n    checkDynamicCreation(displayName, styledComponentId);\n\n    WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n      displayName,\n      styledComponentId\n    );\n  }\n\n  // $FlowFixMe\n  WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n  if (isCompositeComponent) {\n    hoist(WrappedStyledComponent, (target: any), {\n      // all SC-specific things should not be hoisted\n      attrs: true,\n      componentStyle: true,\n      displayName: true,\n      foldedComponentIds: true,\n      shouldForwardProp: true,\n      self: true,\n      styledComponentId: true,\n      target: true,\n      withComponent: true,\n    });\n  }\n\n  return WrappedStyledComponent;\n}\n","// @flow\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\nimport StyleSheet from '../sheet';\n\nimport type { RuleSet, Stringifier } from '../types';\n\nexport default class GlobalStyle {\n  componentId: string;\n\n  isStatic: boolean;\n\n  rules: RuleSet;\n\n  constructor(rules: RuleSet, componentId: string) {\n    this.rules = rules;\n    this.componentId = componentId;\n    this.isStatic = isStaticRules(rules);\n  }\n\n  createStyles(\n    instance: number,\n    executionContext: Object,\n    styleSheet: StyleSheet,\n    stylis: Stringifier\n  ) {\n    const flatCSS = flatten(this.rules, executionContext, styleSheet);\n    const css = stylis(flatCSS.join(''), '');\n    const id = this.componentId + instance;\n\n    // NOTE: We use the id as a name as well, since these rules never change\n    styleSheet.insertRules(id, id, css);\n  }\n\n  removeStyles(instance: number, styleSheet: StyleSheet) {\n    styleSheet.clearRules(this.componentId + instance);\n  }\n\n  renderStyles(\n    instance: number,\n    executionContext: Object,\n    styleSheet: StyleSheet,\n    stylis: Stringifier\n  ) {\n    StyleSheet.registerId(this.componentId + instance);\n\n    // NOTE: Remove old styles, then inject the new ones\n    this.removeStyles(instance, styleSheet);\n    this.createStyles(instance, executionContext, styleSheet, stylis);\n  }\n}\n","// @flow\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { STATIC_EXECUTION_CONTEXT } from '../constants';\nimport GlobalStyle from '../models/GlobalStyle';\nimport { useStyleSheet, useStylis } from '../models/StyleSheetManager';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport determineTheme from '../utils/determineTheme';\nimport { ThemeContext } from '../models/ThemeProvider';\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport generateComponentId from '../utils/generateComponentId';\nimport css from './css';\n\nimport type { Interpolation } from '../types';\n\ntype GlobalStyleComponentPropsType = Object;\n\nexport default function createGlobalStyle(\n  strings: Array<string>,\n  ...interpolations: Array<Interpolation>\n) {\n  const rules = css(strings, ...interpolations);\n  const styledComponentId = `sc-global-${generateComponentId(JSON.stringify(rules))}`;\n  const globalStyle = new GlobalStyle(rules, styledComponentId);\n\n  if (process.env.NODE_ENV !== 'production') {\n    checkDynamicCreation(styledComponentId);\n  }\n\n  function GlobalStyleComponent(props: GlobalStyleComponentPropsType) {\n    const styleSheet = useStyleSheet();\n    const stylis = useStylis();\n    const theme = useContext(ThemeContext);\n    const instanceRef = useRef(null);\n\n    if (instanceRef.current === null) {\n      instanceRef.current = styleSheet.allocateGSInstance(styledComponentId);\n    }\n\n    const instance = instanceRef.current;\n\n    if (process.env.NODE_ENV !== 'production' && React.Children.count(props.children)) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The global style component ${styledComponentId} was given child JSX. createGlobalStyle does not render children.`\n      );\n    }\n\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      rules.some(rule => typeof rule === 'string' && rule.indexOf('@import') !== -1)\n    ) {\n      console.warn(\n        `Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.`\n      );\n    }\n\n    if (globalStyle.isStatic) {\n      globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);\n    } else {\n      const context = {\n        ...props,\n        theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps),\n      };\n\n      globalStyle.renderStyles(instance, context, styleSheet, stylis);\n    }\n\n    useEffect(() => () => globalStyle.removeStyles(instance, styleSheet), EMPTY_ARRAY);\n\n    return null;\n  }\n\n  // $FlowFixMe\n  return React.memo(GlobalStyleComponent);\n}\n","// @flow\n/* eslint-disable no-underscore-dangle */\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n  isStreaming: boolean;\n\n  instance: StyleSheet;\n\n  sealed: boolean;\n\n  constructor() {\n    this.instance = new StyleSheet({ isServer: true });\n    this.sealed = false;\n  }\n\n  _emitSheetCSS = (): string => {\n    const css = this.instance.toString();\n    const nonce = getNonce();\n    const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n    const htmlAttr = attrs.filter(Boolean).join(' ');\n\n    return `<style ${htmlAttr}>${css}</style>`;\n  };\n\n  collectStyles(children: any) {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    return <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>;\n  }\n\n  getStyleTags = (): string => {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    return this._emitSheetCSS();\n  };\n\n  getStyleElement = () => {\n    if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    const props = {\n      [SC_ATTR]: '',\n      [SC_ATTR_VERSION]: SC_VERSION,\n      dangerouslySetInnerHTML: {\n        __html: this.instance.toString(),\n      },\n    };\n\n    const nonce = getNonce();\n    if (nonce) {\n      (props: any).nonce = nonce;\n    }\n\n    // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n    return [<style {...props} key=\"sc-0-0\" />];\n  };\n\n  // eslint-disable-next-line consistent-return\n  interleaveWithNodeStream(input: any) {\n    if (!__SERVER__ || IS_BROWSER) {\n      return throwStyledError(3);\n    } else if (this.sealed) {\n      return throwStyledError(2);\n    }\n\n    if (__SERVER__) {\n      this.seal();\n\n      // eslint-disable-next-line global-require\n      const { Readable, Transform } = require('stream');\n\n      const readableStream: Readable = input;\n      const { instance: sheet, _emitSheetCSS } = this;\n\n      const transformer = new Transform({\n        transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n          // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n          // then reset its rules so we get only new ones for the next chunk\n          const renderedHtml = chunk.toString();\n          const html = _emitSheetCSS();\n\n          sheet.clearTag();\n\n          // prepend style html to chunk, unless the start of the chunk is a\n          // closing tag in which case append right after that\n          if (CLOSING_TAG_R.test(renderedHtml)) {\n            const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n            const before = renderedHtml.slice(0, endOfClosingTag);\n            const after = renderedHtml.slice(endOfClosingTag);\n\n            this.push(before + html + after);\n          } else {\n            this.push(html + renderedHtml);\n          }\n\n          callback();\n        },\n      });\n\n      readableStream.on('error', err => {\n        // forward the error to the transform stream\n        transformer.emit('error', err);\n      });\n\n      return readableStream.pipe(transformer);\n    }\n  }\n\n  seal = () => {\n    this.sealed = true;\n  };\n}\n","// @flow\n\n/* Import singletons */\nimport isStyledComponent from './utils/isStyledComponent';\nimport css from './constructors/css';\nimport createGlobalStyle from './constructors/createGlobalStyle';\nimport keyframes from './constructors/keyframes';\nimport ServerStyleSheet from './models/ServerStyleSheet';\n\nimport StyleSheetManager, {\n  StyleSheetContext,\n  StyleSheetConsumer,\n} from './models/StyleSheetManager';\n\n/* Import components */\nimport ThemeProvider, { ThemeContext, ThemeConsumer } from './models/ThemeProvider';\n\n/* Import Higher Order Components */\nimport withTheme from './hoc/withTheme';\n\n/* Import hooks */\nimport useTheme from './hooks/useTheme';\n\n/* Define bundle version for export */\ndeclare var __VERSION__: string;\nconst version = __VERSION__;\n\n/* Warning if you've imported this file on React Native */\nif (\n  process.env.NODE_ENV !== 'production' &&\n  typeof navigator !== 'undefined' &&\n  navigator.product === 'ReactNative'\n) {\n  // eslint-disable-next-line no-console\n  console.warn(\n    \"It looks like you've imported 'styled-components' on React Native.\\n\" +\n      \"Perhaps you're looking to import 'styled-components/native'?\\n\" +\n      'Read more about this at https://www.styled-components.com/docs/basics#react-native'\n  );\n}\n\n/* Warning if there are several instances of styled-components */\nif (\n  process.env.NODE_ENV !== 'production' &&\n  process.env.NODE_ENV !== 'test' &&\n  typeof window !== 'undefined'\n) {\n  window['__styled-components-init__'] = window['__styled-components-init__'] || 0;\n\n  if (window['__styled-components-init__'] === 1) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"It looks like there are several instances of 'styled-components' initialized in this application. \" +\n        'This may cause dynamic styles not rendering properly, errors happening during rehydration process, ' +\n        'missing theme prop, and makes your application bigger without a good reason.\\n\\n' +\n        'See https://s-c.sh/2BAXzed for more info.'\n    );\n  }\n\n  window['__styled-components-init__'] += 1;\n}\n\n/* Export everything */\nexport * from './secretInternals';\nexport {\n  createGlobalStyle,\n  css,\n  isStyledComponent,\n  keyframes,\n  ServerStyleSheet,\n  StyleSheetConsumer,\n  StyleSheetContext,\n  StyleSheetManager,\n  ThemeConsumer,\n  ThemeContext,\n  ThemeProvider,\n  useTheme,\n  version,\n  withTheme,\n};\n"],"names":["nodes","insertRule","names","id","stylisPlugins","isCompositeComponent","flatten"],"mappings":"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"}

package/dist/styled-components.js

@@ -25,7 +25,7 @@
 
   // 
   var isPlainObject = (function (x) {
-    return typeof x === 'object' && x.constructor === Object;
+    return x !== null && typeof x === 'object' && (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' && !reactIs.typeOf(x);
   });
 
   // 
@@ -86,7 +86,8 @@
   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 = "5.0.0-testgrouplimit.0";
+  var SC_VERSION = "5.1.0";
+  var SPLITTER = '/*!sc*/\n';
   var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
   var DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || typeof process !== 'undefined' && (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY) || "development" !== 'production'; // Shared empty execution context when generating static styles
 
@@ -228,9 +229,7 @@
       return new TextTag(target);
     }
   };
-  var CSSOMTag =
-  /*#__PURE__*/
-  function () {
+  var CSSOMTag = /*#__PURE__*/function () {
     function CSSOMTag(target) {
       var element = this.element = makeStyleTag(target); // Avoid Edge bug where empty style elements don't create sheets
 
@@ -270,9 +269,7 @@
   }();
   /** A Tag that emulates the CSSStyleSheet API but uses text nodes */
 
-  var TextTag =
-  /*#__PURE__*/
-  function () {
+  var TextTag = /*#__PURE__*/function () {
     function TextTag(target) {
       var element = this.element = makeStyleTag(target);
       this.nodes = element.childNodes;
@@ -310,9 +307,7 @@
   }();
   /** A completely virtual (server-side) Tag that doesn't manipulate the DOM */
 
-  var VirtualTag =
-  /*#__PURE__*/
-  function () {
+  var VirtualTag = /*#__PURE__*/function () {
     function VirtualTag(_target) {
       this.rules = [];
       this.length = 0;
@@ -354,9 +349,7 @@
   };
   var BASE_SIZE = 1 << 9;
 
-  var DefaultGroupedTag =
-  /*#__PURE__*/
-  function () {
+  var DefaultGroupedTag = /*#__PURE__*/function () {
     function DefaultGroupedTag(tag) {
       this.groupSizes = new Uint32Array(BASE_SIZE);
       this.length = BASE_SIZE;
@@ -433,7 +426,7 @@
       var endIndex = startIndex + length;
 
       for (var i = startIndex; i < endIndex; i++) {
-        css += this.tag.getRule(i) + "\n";
+        css += "" + this.tag.getRule(i) + SPLITTER;
       }
 
       return css;
@@ -476,8 +469,7 @@
 
   // 
   var SELECTOR = "style[" + SC_ATTR + "][" + SC_ATTR_VERSION + "=\"" + SC_VERSION + "\"]";
-  var RULE_RE = /(?:\s*)?(.*?){((?:{[^}]*}|(?!{).*?)*)}/g;
-  var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\]");
+  var MARKER_RE = new RegExp("^" + SC_ATTR + "\\.g(\\d+)\\[id=\"([\\w\\d-]+)\"\\].*?\"([^\"]*)");
   var outputSheet = function outputSheet(sheet) {
     var tag = sheet.getTag();
     var length = tag.length;
@@ -502,7 +494,7 @@
       // after the actual rules to simplify the rehydration
 
 
-      css += "" + rules + selector + "{content:\"" + content + "\"}\n";
+      css += "" + rules + selector + "{content:\"" + content + "\"}" + SPLITTER;
     }
 
     return css;
@@ -521,13 +513,13 @@
   };
 
   var rehydrateSheetFromTag = function rehydrateSheetFromTag(sheet, style) {
-    var rawHTML = style.innerHTML;
+    var parts = style.innerHTML.split(SPLITTER);
     var rules = [];
-    var parts; // parts = [match, selector, content]
-    // eslint-disable-next-line no-cond-assign
 
-    while (parts = RULE_RE.exec(rawHTML)) {
-      var marker = parts[1].match(MARKER_RE);
+    for (var i = 0, l = parts.length; i < l; i++) {
+      var part = parts[i].trim();
+      if (!part) continue;
+      var marker = part.match(MARKER_RE);
 
       if (marker) {
         var group = parseInt(marker[1], 10) | 0;
@@ -538,13 +530,13 @@
           setGroupForId(id, group); // Rehydrate names and rules
           // looks like: data-styled.g11[id="idA"]{content:"nameA,"}
 
-          rehydrateNamesFromContent(sheet, id, parts[2].split('"')[1]);
+          rehydrateNamesFromContent(sheet, id, marker[3]);
           sheet.getTag().insertRules(group, rules);
         }
 
         rules.length = 0;
       } else {
-        rules.push(parts[0].trim());
+        rules.push(part);
       }
     }
   };
@@ -572,9 +564,7 @@
   };
   /** Contains the main stylesheet logic for stringification and caching */
 
-  var StyleSheet =
-  /*#__PURE__*/
-  function () {
+  var StyleSheet = /*#__PURE__*/function () {
     /** Register a group ID to give it an index */
     StyleSheet.registerId = function registerId(id) {
       return getGroupForId(id);
@@ -1563,18 +1553,16 @@
     React.useEffect(function () {
       if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);
     }, [props.stylisPlugins]);
-    return React__default.createElement(StyleSheetContext.Provider, {
+    return /*#__PURE__*/React__default.createElement(StyleSheetContext.Provider, {
       value: styleSheet
-    }, React__default.createElement(StylisContext.Provider, {
+    }, /*#__PURE__*/React__default.createElement(StylisContext.Provider, {
       value: stylis
     },  React__default.Children.only(props.children) ));
   }
 
   // 
 
-  var Keyframes =
-  /*#__PURE__*/
-  function () {
+  var Keyframes = /*#__PURE__*/function () {
     function Keyframes(name, stringifyArgs) {
       var _this = this;
 
@@ -1811,9 +1799,7 @@
 
   // 
 
-  var GlobalStyle =
-  /*#__PURE__*/
-  function () {
+  var GlobalStyle = /*#__PURE__*/function () {
     function GlobalStyle(rules, componentId) {
       this.rules = rules;
       this.componentId = componentId;
@@ -1844,6 +1830,36 @@
     return GlobalStyle;
   }();
 
+  // 
+  var invalidHookCallRe = /invalid hook call/i;
+  var seen = new Set();
+  var checkDynamicCreation = function checkDynamicCreation(displayName, componentId) {
+    {
+      var parsedIdString = componentId ? " with the id of \"" + componentId + "\"" : '';
+      var message = "The component " + displayName + parsedIdString + " has been created dynamically.\n" + 'You may see this warning because you\'ve called styled inside another component.\n' + 'To resolve this only create new StyledComponents outside of any render method and function component.';
+
+      try {
+        // We purposefully call `useRef` outside of a component and expect it to throw
+        // If it doesn't, then we're inside another component.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useRef();
+
+        if (!seen.has(message)) {
+          // eslint-disable-next-line no-console
+          console.warn(message);
+          seen.add(message);
+        }
+      } catch (error) {
+        // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to
+        // be called outside of a React component.
+        if (invalidHookCallRe.test(error.message)) {
+          // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently
+          seen["delete"](message);
+        }
+      }
+    }
+  };
+
   // 
   var determineTheme = (function (props, providedTheme, defaultProps) {
     if (defaultProps === void 0) {
@@ -1892,7 +1908,7 @@
       return null;
     }
 
-    return React__default.createElement(ThemeContext.Provider, {
+    return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
       value: themeContext
     }, props.children);
   }
@@ -1939,6 +1955,10 @@
     var styledComponentId = "sc-global-" + generateComponentId(JSON.stringify(rules));
     var globalStyle = new GlobalStyle(rules, styledComponentId);
 
+    {
+      checkDynamicCreation(styledComponentId);
+    }
+
     function GlobalStyleComponent(props) {
       var styleSheet = useStyleSheet();
       var stylis = useStylis();
@@ -1956,6 +1976,12 @@
         console.warn("The global style component " + styledComponentId + " was given child JSX. createGlobalStyle does not render children.");
       }
 
+      if ( rules.some(function (rule) {
+        return typeof rule === 'string' && rule.indexOf('@import') !== -1;
+      })) {
+        console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.");
+      }
+
       if (globalStyle.isStatic) {
         globalStyle.renderStyles(instance, STATIC_EXECUTION_CONTEXT, styleSheet, stylis);
       } else {
@@ -1995,9 +2021,7 @@
     return new Keyframes(name, [rules, name, '@keyframes']);
   }
 
-  var ServerStyleSheet =
-  /*#__PURE__*/
-  function () {
+  var ServerStyleSheet = /*#__PURE__*/function () {
     function ServerStyleSheet() {
       var _this = this;
 
@@ -2035,7 +2059,7 @@
         } // v4 returned an array for this fn, so we'll do the same for v5 for backward compat
 
 
-        return [React__default.createElement("style", _extends({}, props, {
+        return [/*#__PURE__*/React__default.createElement("style", _extends({}, props, {
           key: "sc-0-0"
         }))];
       };
@@ -2057,7 +2081,7 @@
         return throwStyledComponentsError(2);
       }
 
-      return React__default.createElement(StyleSheetManager, {
+      return /*#__PURE__*/React__default.createElement(StyleSheetManager, {
         sheet: this.instance
       }, children);
     };
@@ -2191,7 +2215,7 @@
         console.warn("[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"" + getComponentName(Component) + "\"");
       }
 
-      return React__default.createElement(Component, _extends({}, props, {
+      return /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
         theme: themeProp,
         ref: ref
       }));
@@ -2216,7 +2240,7 @@
   // 
   /* Define bundle version for export */
 
-  var version = "5.0.0-testgrouplimit.0";
+  var version = "5.1.0";
   /* Warning if you've imported this file on React Native */
 
   if ( typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
@@ -2297,7 +2321,7 @@
     };
   }
 
-  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+  var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
   var index = memoize(function (prop) {
     return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
@@ -2381,9 +2405,7 @@
    the React-specific stuff.
    */
 
-  var ComponentStyle =
-  /*#__PURE__*/
-  function () {
+  var ComponentStyle = /*#__PURE__*/function () {
     function ComponentStyle(rules, componentId) {
       this.rules = rules;
       this.staticRulesId = '';
@@ -2574,6 +2596,7 @@
         componentStyle = forwardedComponent.componentStyle,
         defaultProps = forwardedComponent.defaultProps,
         foldedComponentIds = forwardedComponent.foldedComponentIds,
+        shouldForwardProp = forwardedComponent.shouldForwardProp,
         styledComponentId = forwardedComponent.styledComponentId,
         target = forwardedComponent.target;
     React.useDebugValue(styledComponentId); // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,
@@ -2588,21 +2611,18 @@
 
     var generatedClassName = useInjectedStyle(componentStyle, componentAttrs.length > 0, context,  forwardedComponent.warnTooManyClasses );
     var refToForward = forwardedRef;
-    var elementToBeCreated = attrs.as || props.as || target;
+    var elementToBeCreated = attrs.$as || props.$as || attrs.as || props.as || target;
     var isTargetTag = isTag(elementToBeCreated);
     var computedProps = attrs !== props ? _extends({}, props, {}, attrs) : props;
-    var shouldFilterProps = isTargetTag || 'as' in computedProps || 'forwardedAs' in computedProps;
-    var propsForElement = shouldFilterProps ? {} : _extends({}, computedProps);
-
-    if (shouldFilterProps) {
-      // eslint-disable-next-line guard-for-in
-      for (var key in computedProps) {
-        if (key === 'forwardedAs') {
-          propsForElement.as = computedProps[key];
-        } else if (key !== 'as' && key !== 'forwardedAs' && (!isTargetTag || index(key))) {
-          // Don't pass through non HTML tags through to HTML elements
-          propsForElement[key] = computedProps[key];
-        }
+    var propFilterFn = shouldForwardProp || isTargetTag && index;
+    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 (!propFilterFn || propFilterFn(key, index)) {
+        // Don't pass through non HTML tags through to HTML elements
+        propsForElement[key] = computedProps[key];
       }
     }
 
@@ -2627,7 +2647,24 @@
     var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + "-" + options.componentId : options.componentId || componentId; // fold the underlying StyledComponent attrs up (implicit extend)
 
     var finalAttrs = // $FlowFixMe
-    isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs;
+    isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs; // eslint-disable-next-line prefer-destructuring
+
+    var shouldForwardProp = options.shouldForwardProp; // $FlowFixMe
+
+    if (isTargetStyledComp && target.shouldForwardProp) {
+      if (shouldForwardProp) {
+        // compose nested shouldForwardProp calls
+        shouldForwardProp = function shouldForwardProp(prop, filterFn) {
+          return (// $FlowFixMe
+            target.shouldForwardProp(prop, filterFn) && options.shouldForwardProp(prop, filterFn)
+          );
+        };
+      } else {
+        // eslint-disable-next-line prefer-destructuring
+        shouldForwardProp = target.shouldForwardProp;
+      }
+    }
+
     var componentStyle = new ComponentStyle(isTargetStyledComp ? // fold the underlying StyledComponent rules up (implicit extend)
     // $FlowFixMe
     target.componentStyle.rules.concat(rules) : rules, styledComponentId);
@@ -2647,7 +2684,8 @@
     WrappedStyledComponent = React__default.forwardRef(forwardRef);
     WrappedStyledComponent.attrs = finalAttrs;
     WrappedStyledComponent.componentStyle = componentStyle;
-    WrappedStyledComponent.displayName = displayName; // this static is used to preserve the cascade of static classes for component selector
+    WrappedStyledComponent.displayName = displayName;
+    WrappedStyledComponent.shouldForwardProp = shouldForwardProp; // this static is used to preserve the cascade of static classes for component selector
     // purposes; this is especially important with usage of the css prop
 
     WrappedStyledComponent.foldedComponentIds = isTargetStyledComp ? // $FlowFixMe
@@ -2683,6 +2721,7 @@
     });
 
     {
+      checkDynamicCreation(displayName, styledComponentId);
       WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName, styledComponentId);
     } // $FlowFixMe
 
@@ -2698,6 +2737,7 @@
         componentStyle: true,
         displayName: true,
         foldedComponentIds: true,
+        shouldForwardProp: true,
         self: true,
         styledComponentId: true,
         target: true,