{"version":3,"file":"styled-components.browser.cjs.js","sources":["../src/utils/interleave.js","../src/utils/isPlainObject.js","../src/utils/empties.js","../src/utils/isFunction.js","../src/utils/getComponentName.js","../src/utils/isStyledComponent.js","../src/constants.js","../src/utils/error.js","../src/utils/errors.js","../src/sheet/GroupedTag.js","../src/sheet/GroupIDAllocator.js","../src/sheet/Rehydration.js","../src/utils/nonce.js","../src/sheet/dom.js","../src/sheet/Tag.js","../src/sheet/Sheet.js","../src/utils/generateAlphabeticName.js","../src/utils/hash.js","../src/utils/isStaticRules.js","../src/models/ComponentStyle.js","../src/utils/stylis.js","../src/utils/stylisPluginInsertRule.js","../src/models/StyleSheetManager.js","../src/models/Keyframes.js","../src/utils/hyphenateStyleName.js","../src/utils/flatten.js","../src/utils/isStatelessFunction.js","../src/utils/addUnitIfNeeded.js","../src/constructors/css.js","../src/utils/checkDynamicCreation.js","../src/utils/determineTheme.js","../src/utils/escape.js","../src/utils/generateComponentId.js","../src/utils/isTag.js","../src/utils/mixinDeep.js","../src/models/ThemeProvider.js","../src/models/StyledComponent.js","../src/utils/generateDisplayName.js","../src/utils/joinStrings.js","../src/utils/createWarnTooManyClasses.js","../src/utils/domElements.js","../src/constructors/styled.js","../src/constructors/constructWithOptions.js","../src/models/GlobalStyle.js","../src/models/ServerStyleSheet.js","../src/secretInternals.js","../src/base.js","../src/constructors/createGlobalStyle.js","../src/constructors/keyframes.js","../src/hooks/useTheme.js","../src/hoc/withTheme.js"],"sourcesContent":["// @flow\nimport type { Interpolation } from '../types';\n\nexport default (\n strings: Array,\n interpolations: Array\n): Array => {\n const result = [strings[0]];\n\n for (let i = 0, len = interpolations.length; i < len; i += 1) {\n result.push(interpolations[i], strings[i + 1]);\n }\n\n return result;\n};\n","// @flow\nimport { typeOf } from 'react-is';\n\nexport default (x: any): boolean =>\n x !== null &&\n typeof x === 'object' &&\n (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' &&\n !typeOf(x);\n","// @flow\nexport const EMPTY_ARRAY = Object.freeze([]);\nexport const EMPTY_OBJECT = Object.freeze({});\n","// @flow\nexport default function isFunction(test: any): boolean %checks {\n return typeof test === 'function';\n}\n","// @flow\nimport type { IStyledComponent } from '../types';\n\nexport default function getComponentName(\n target: $PropertyType\n): string {\n return (\n (process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) ||\n // $FlowFixMe\n target.displayName ||\n // $FlowFixMe\n target.name ||\n 'Component'\n );\n}\n","// @flow\nexport default function isStyledComponent(target: any): boolean %checks {\n return target && typeof target.styledComponentId === 'string';\n}\n","// @flow\n\ndeclare var SC_DISABLE_SPEEDY: ?boolean;\ndeclare var __VERSION__: string;\n\nexport const SC_ATTR: string =\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 Boolean(typeof SC_DISABLE_SPEEDY === 'boolean'\n ? SC_DISABLE_SPEEDY\n : (typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''\n ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY\n : (typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== ''\n ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY\n : process.env.NODE_ENV !== 'production'\n )\n ));\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","// @flow\nimport errorMap from './errors';\n\nconst ERRORS = process.env.NODE_ENV !== 'production' ? errorMap : {};\n\n/**\n * super basic version of sprintf\n */\nfunction format(...args) {\n let a = args[0];\n const b = [];\n\n for (let c = 1, len = args.length; c < len; c += 1) {\n b.push(args[c]);\n }\n\n b.forEach(d => {\n a = a.replace(/%[a-z]/, d);\n });\n\n return a;\n}\n\n/**\n * Create an error file out of errors.md for development and a simple web link to the full errors\n * in production mode.\n */\nexport default function throwStyledComponentsError(\n code: string | number,\n ...interpolations: Array\n) {\n if (process.env.NODE_ENV === 'production') {\n throw new Error(\n `An error occurred. See https://git.io/JUIaE#${code} for more information.${\n interpolations.length > 0 ? ` Args: ${interpolations.join(', ')}` : ''\n }`\n );\n } else {\n throw new Error(format(ERRORS[code], ...interpolations).trim());\n }\n}\n","export default {\"1\":\"Cannot create styled-component for component: %s.\\n\\n\",\"2\":\"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\\n\\n- Are you trying to reuse it across renders?\\n- Are you accidentally calling collectStyles twice?\\n\\n\",\"3\":\"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\\n\\n\",\"4\":\"The `StyleSheetManager` expects a valid target or sheet prop!\\n\\n- Does this error occur on the client and is your target falsy?\\n- Does this error occur on the server and is the sheet falsy?\\n\\n\",\"5\":\"The clone method cannot be used on the client!\\n\\n- Are you running in a client-like environment on the server?\\n- Are you trying to run SSR on the client?\\n\\n\",\"6\":\"Trying to insert a new style tag, but the given Node is unmounted!\\n\\n- Are you using a custom target that isn't mounted?\\n- Does your document not have a valid head element?\\n- Have you accidentally removed a style tag manually?\\n\\n\",\"7\":\"ThemeProvider: Please return an object from your \\\"theme\\\" prop function, e.g.\\n\\n```js\\ntheme={() => ({})}\\n```\\n\\n\",\"8\":\"ThemeProvider: Please make your \\\"theme\\\" prop an object.\\n\\n\",\"9\":\"Missing document ``\\n\\n\",\"10\":\"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\\n\\n\",\"11\":\"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\\n\\n\",\"12\":\"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\\\`\\\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\\n\\n\",\"13\":\"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\\n\\n\",\"14\":\"ThemeProvider: \\\"theme\\\" prop is required.\\n\\n\",\"15\":\"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to ``, please make sure each plugin is uniquely-named, e.g.\\n\\n```js\\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\\n```\\n\\n\",\"16\":\"Reached the limit of how many styled components may be created at group %s.\\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\\nas for instance in your render method then you may be running into this limitation.\\n\\n\",\"17\":\"CSSStyleSheet could not be found on HTMLStyleElement.\\nHas styled-components' style tag been unmounted or altered by another script?\\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 = new Map();\nlet reverseRegister: Map = 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 while (reverseRegister.has(nextFreeGroup)) {\n nextFreeGroup++;\n }\n\n const group = nextFreeGroup++;\n\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\n\nimport { SPLITTER, SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport { getIdForGroup, setGroupForId } from './GroupIDAllocator';\nimport type { Sheet } from './types';\n\nconst SELECTOR = `style[${SC_ATTR}][${SC_ATTR_VERSION}=\"${SC_VERSION}\"]`;\nconst MARKER_RE = new RegExp(`^${SC_ATTR}\\\\.g(\\\\d+)\\\\[id=\"([\\\\w\\\\d-]+)\"\\\\].*?\"([^\"]*)`);\n\nexport const outputSheet = (sheet: Sheet) => {\n const tag = sheet.getTag();\n const { length } = tag;\n\n let css = '';\n for (let group = 0; group < length; group++) {\n const id = getIdForGroup(group);\n if (id === undefined) continue;\n\n const names = sheet.names.get(id);\n const rules = tag.getGroup(group);\n if (!names || !rules || !names.size) continue;\n\n const selector = `${SC_ATTR}.g${group}[id=\"${id}\"]`;\n\n let content = '';\n if (names !== undefined) {\n names.forEach(name => {\n if (name.length > 0) {\n content += `${name},`;\n }\n });\n }\n\n // NOTE: It's easier to collect rules and have the marker\n // after the actual rules to simplify the rehydration\n css += `${rules}${selector}{content:\"${content}\"}${SPLITTER}`;\n }\n\n return css;\n};\n\nconst rehydrateNamesFromContent = (sheet: Sheet, id: string, content: string) => {\n const names = content.split(',');\n let name;\n\n for (let i = 0, l = names.length; i < l; i++) {\n // eslint-disable-next-line\n if ((name = names[i])) {\n sheet.registerName(id, name);\n }\n }\n};\n\nconst rehydrateSheetFromTag = (sheet: Sheet, style: HTMLStyleElement) => {\n const parts = (style.textContent || '').split(SPLITTER);\n const rules: string[] = [];\n\n for (let i = 0, l = parts.length; i < l; i++) {\n const part = parts[i].trim();\n if (!part) continue;\n\n const marker = part.match(MARKER_RE);\n\n if (marker) {\n const group = parseInt(marker[1], 10) | 0;\n const id = marker[2];\n\n if (group !== 0) {\n // Rehydrate componentId to group index mapping\n setGroupForId(id, group);\n // Rehydrate names and rules\n // looks like: data-styled.g11[id=\"idA\"]{content:\"nameA,\"}\n rehydrateNamesFromContent(sheet, id, marker[3]);\n sheet.getTag().insertRules(group, rules);\n }\n\n rules.length = 0;\n } else {\n rules.push(part);\n }\n }\n};\n\nexport const rehydrateSheet = (sheet: Sheet) => {\n const nodes = document.querySelectorAll(SELECTOR);\n\n for (let i = 0, l = nodes.length; i < l; i++) {\n const node = ((nodes[i]: any): HTMLStyleElement);\n if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {\n rehydrateSheetFromTag(sheet, node);\n\n if (node.parentNode) {\n node.parentNode.removeChild(node);\n }\n }\n }\n};\n","// @flow\n/* eslint-disable camelcase, no-undef */\n\ndeclare var window: { __webpack_nonce__: string };\n\nconst getNonce = () => {\n\n return typeof window !== 'undefined'\n ? typeof window.__webpack_nonce__ !== 'undefined'\n ? window.__webpack_nonce__\n : null\n : null;\n};\n\nexport default getNonce;\n","// @flow\n\nimport { SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport getNonce from '../utils/nonce';\nimport throwStyledError from '../utils/error';\n\nconst ELEMENT_TYPE = 1; /* Node.ELEMENT_TYPE */\n\n/** Find last style element if any inside target */\nconst findLastStyleTag = (target: HTMLElement): void | HTMLStyleElement => {\n const { childNodes } = target;\n\n for (let i = childNodes.length; i >= 0; i--) {\n const child = ((childNodes[i]: any): ?HTMLElement);\n if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {\n return ((child: any): HTMLStyleElement);\n }\n }\n\n return undefined;\n};\n\n/** Create a style element inside `target` or after the last */\nexport const makeStyleTag = (target?: HTMLElement): HTMLStyleElement => {\n const head = ((document.head: any): HTMLElement);\n const parent = target || head;\n const style = document.createElement('style');\n const prevStyle = findLastStyleTag(parent);\n const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;\n\n style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);\n style.setAttribute(SC_ATTR_VERSION, SC_VERSION);\n\n const nonce = getNonce();\n\n if (nonce) style.setAttribute('nonce', nonce);\n\n parent.insertBefore(style, nextSibling);\n\n return style;\n};\n\n/** Get the CSSStyleSheet instance for a given style element */\nexport const getSheet = (tag: HTMLStyleElement): CSSStyleSheet => {\n if (tag.sheet) {\n return ((tag.sheet: any): CSSStyleSheet);\n }\n\n // Avoid Firefox quirk where the style element might not have a sheet property\n const { styleSheets } = document;\n for (let i = 0, l = styleSheets.length; i < l; i++) {\n const sheet = styleSheets[i];\n if (sheet.ownerNode === tag) {\n return ((sheet: any): CSSStyleSheet);\n }\n }\n\n throwStyledError(17);\n return (undefined: any);\n};\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;\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\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport { EMPTY_OBJECT } from '../utils/empties';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\nimport { makeTag } from './Tag';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\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>;\n\nconst defaultOptions: SheetOptions = {\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 server: boolean;\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 = EMPTY_OBJECT,\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 this.server = !!options.isServer;\n\n // We rehydrate only once and use the sheet that is created first\n if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {\n SHOULD_REHYDRATE = false;\n rehydrateSheet(this);\n }\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n return new StyleSheet(\n { ...this.options, ...options },\n this.gs,\n (withNames && this.names) || undefined\n );\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\n/* eslint-disable no-bitwise */\n\nconst AD_REPLACER_R = /(a)(d)/gi;\n\n/* This is the \"capacity\" of our alphabet i.e. 2x26 for all letters plus their capitalised\n * counterparts */\nconst charsLength = 52;\n\n/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */\nconst getAlphabeticChar = (code: number): string =>\n String.fromCharCode(code + (code > 25 ? 39 : 97));\n\n/* input a number, usually a hash and convert it to base-52 */\nexport default function generateAlphabeticName(code: number): string {\n let name = '';\n let x;\n\n /* get a char and divide by alphabet-length */\n for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {\n name = getAlphabeticChar(x % charsLength) + name;\n }\n\n return (getAlphabeticChar(x % charsLength) + name).replace(AD_REPLACER_R, '$1-$2');\n}\n","// @flow\n/* eslint-disable */\n\nexport const SEED = 5381;\n\n// When we have separate strings it's useful to run a progressive\n// version of djb2 where we pretend that we're still looping over\n// the same string\nexport const phash = (h: number, x: string): number => {\n let i = x.length;\n\n while (i) {\n h = (h * 33) ^ x.charCodeAt(--i);\n }\n\n return h;\n};\n\n// This is a djb2 hashing function\nexport const hash = (x: string): number => {\n return phash(SEED, x);\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\nimport { SC_VERSION } from '../constants';\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport generateName from '../utils/generateAlphabeticName';\nimport { hash, phash } from '../utils/hash';\nimport isStaticRules from '../utils/isStaticRules';\n\nconst SEED = hash(SC_VERSION);\n\n/**\n * ComponentStyle is all the CSS-specific stuff, not the React-specific stuff.\n */\nexport default class ComponentStyle {\n baseHash: number;\n\n baseStyle: ?ComponentStyle;\n\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n staticRulesId: string;\n\n constructor(rules: RuleSet, componentId: string, baseStyle?: ComponentStyle) {\n this.rules = rules;\n this.staticRulesId = '';\n this.isStatic = process.env.NODE_ENV === 'production' &&\n (baseStyle === undefined || baseStyle.isStatic) &&\n isStaticRules(rules);\n this.componentId = componentId;\n\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n this.baseHash = phash(SEED, componentId);\n\n this.baseStyle = baseStyle;\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 const names = [];\n\n if (this.baseStyle) {\n names.push(this.baseStyle.generateAndInjectStyles(executionContext, styleSheet, stylis));\n }\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 names.push(this.staticRulesId);\n } else {\n const cssStatic = flatten(this.rules, executionContext, styleSheet, stylis).join('');\n const name = generateName(phash(this.baseHash, cssStatic) >>> 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 names.push(name);\n this.staticRulesId = name;\n }\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\n if (typeof partRule === 'string') {\n css += partRule;\n\n if (process.env.NODE_ENV !== 'production') dynamicHash = phash(dynamicHash, partRule + i);\n } else if (partRule) {\n const partChunk = flatten(partRule, executionContext, styleSheet, stylis);\n const partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;\n dynamicHash = phash(dynamicHash, partString + i);\n css += partString;\n }\n }\n\n if (css) {\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 names.push(name);\n }\n }\n\n return names.join(' ');\n }\n}\n","import Stylis from '@emotion/stylis';\nimport { type Stringifier } from '../types';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from './empties';\nimport throwStyledError from './error';\nimport { phash, SEED } from './hash';\nimport insertRulePlugin from './stylisPluginInsertRule';\n\nconst COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\nconst COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];\n\ntype StylisInstanceConstructorArgs = {\n options?: Object,\n plugins?: Array,\n};\n\nexport default function createStylisInstance({\n options = EMPTY_OBJECT,\n plugins = EMPTY_ARRAY,\n}: StylisInstanceConstructorArgs = EMPTY_OBJECT) {\n const stylis = new Stylis(options);\n\n // Wrap `insertRulePlugin to build a list of rules,\n // and then make our own plugin to return the rules. This\n // makes it easier to hook into the existing SSR architecture\n\n let parsingRules = [];\n\n // eslint-disable-next-line consistent-return\n const returnRulesPlugin = context => {\n if (context === -2) {\n const parsedRules = parsingRules;\n parsingRules = [];\n return parsedRules;\n }\n };\n\n const parseRulesPlugin = insertRulePlugin(rule => {\n parsingRules.push(rule);\n });\n\n let _componentId: string;\n let _selector: string;\n let _selectorRegexp: RegExp;\n let _consecutiveSelfRefRegExp: RegExp;\n\n const selfReferenceReplacer = (match, offset, string) => {\n if (\n // do not replace the first occurrence if it is complex (has a modifier)\n (offset === 0 ? COMPLEX_SELECTOR_PREFIX.indexOf(string[_selector.length]) === -1 : true) &&\n // no consecutive self refs (.b.b); that is a precedence boost and treated differently\n !string.match(_consecutiveSelfRefRegExp)\n ) {\n return `.${_componentId}`;\n }\n\n return match;\n };\n\n /**\n * When writing a style like\n *\n * & + & {\n * color: red;\n * }\n *\n * The second ampersand should be a reference to the static component class. stylis\n * has no knowledge of static class so we have to intelligently replace the base selector.\n *\n * https://github.com/thysultan/stylis.js/tree/v3.5.4#plugins <- more info about the context phase values\n * \"2\" means this plugin is taking effect at the very end after all other processing is complete\n */\n const selfReferenceReplacementPlugin = (context, _, selectors) => {\n if (context === 2 && selectors.length && selectors[0].lastIndexOf(_selector) > 0) {\n // eslint-disable-next-line no-param-reassign\n selectors[0] = selectors[0].replace(_selectorRegexp, selfReferenceReplacer);\n }\n };\n\n stylis.use([...plugins, selfReferenceReplacementPlugin, parseRulesPlugin, returnRulesPlugin]);\n\n function stringifyRules(css, selector, prefix, componentId = '&'): Stringifier {\n const flatCSS = css.replace(COMMENT_REGEX, '');\n const cssStr = selector && prefix ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS;\n\n // stylis has no concept of state to be passed to plugins\n // but since JS is single-threaded, we can rely on that to ensure\n // these properties stay in sync with the current stylis run\n _componentId = componentId;\n _selector = selector;\n _selectorRegexp = new RegExp(`\\\\${_selector}\\\\b`, 'g');\n _consecutiveSelfRefRegExp = new RegExp(`(\\\\${_selector}\\\\b){2,}`);\n\n return stylis(prefix || !selector ? '' : selector, cssStr);\n }\n\n stringifyRules.hash = plugins.length\n ? plugins\n .reduce((acc, plugin) => {\n if (!plugin.name) {\n throwStyledError(15);\n }\n\n return phash(acc, plugin.name);\n }, SEED)\n .toString()\n : '';\n\n return stringifyRules;\n}\n","/**\n * MIT License\n *\n * Copyright (c) 2016 Sultan Tarimo\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy of\n * this software and associated documentation files (the \"Software\"),\n * to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n * sell copies of the Software and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n * OR IMPLIED INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR\n * IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n/* eslint-disable */\n\nexport default function(insertRule) {\n const delimiter = '/*|*/';\n const needle = `${delimiter}}`;\n\n function toSheet(block) {\n if (block) {\n try {\n insertRule(`${block}}`);\n } catch (e) {}\n }\n }\n\n return function ruleSheet(\n context,\n content,\n selectors,\n parents,\n line,\n column,\n length,\n ns,\n depth,\n at\n ) {\n switch (context) {\n // property\n case 1:\n // @import\n if (depth === 0 && content.charCodeAt(0) === 64) return insertRule(`${content};`), '';\n break;\n // selector\n case 2:\n if (ns === 0) return content + delimiter;\n break;\n // at-rule\n case 3:\n switch (ns) {\n // @font-face, @page\n case 102:\n case 112:\n return insertRule(selectors[0] + content), '';\n default:\n return content + (at === 0 ? delimiter : '');\n }\n case -2:\n content.split(needle).forEach(toSheet);\n }\n };\n}\n","// @flow\nimport React, { type Context, type Node, useContext, useEffect, useMemo, useState } from 'react';\nimport shallowequal from 'shallowequal';\nimport StyleSheet from '../sheet';\nimport type { Stringifier } from '../types';\nimport createStylisInstance from '../utils/stylis';\n\ntype Props = {\n children?: Node,\n disableCSSOMInjection?: boolean,\n disableVendorPrefixes?: boolean,\n sheet?: StyleSheet,\n stylisPlugins?: Array,\n target?: HTMLElement,\n};\n\nexport const StyleSheetContext: Context = React.createContext();\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\nexport const StylisContext: Context = 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 }, false);\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 \n \n {process.env.NODE_ENV !== 'production'\n ? React.Children.only(props.children)\n : props.children}\n \n \n );\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n id: string;\n\n name: string;\n\n rules: string;\n\n constructor(name: string, rules: string) {\n this.name = name;\n this.id = `sc-keyframes-${name}`;\n this.rules = rules;\n }\n\n inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n const resolvedName = this.name + stylisInstance.hash;\n\n if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n styleSheet.insertRules(\n this.id,\n resolvedName,\n stylisInstance(this.rules, resolvedName, '@keyframes')\n );\n }\n };\n\n toString = () => {\n return throwStyledError(12, String(this.name));\n };\n\n getName(stylisInstance: Stringifier = masterStylis) {\n return this.name + stylisInstance.hash;\n }\n}\n","// @flow\n\n/**\n * inlined version of\n * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js\n */\n\nconst uppercaseCheck = /([A-Z])/;\nconst uppercasePattern = /([A-Z])/g;\nconst msPattern = /^ms-/;\nconst prefixAndLowerCase = (char: string): string => `-${char.toLowerCase()}`;\n\n/**\n * Hyphenates a camelcased CSS property name, for example:\n *\n * > hyphenateStyleName('backgroundColor')\n * < \"background-color\"\n * > hyphenateStyleName('MozTransition')\n * < \"-moz-transition\"\n * > hyphenateStyleName('msTransition')\n * < \"-ms-transition\"\n *\n * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix\n * is converted to `-ms-`.\n *\n * @param {string} string\n * @return {string}\n */\nexport default function hyphenateStyleName(string: string): string {\n return uppercaseCheck.test(string)\n ? string\n .replace(uppercasePattern, prefixAndLowerCase)\n .replace(msPattern, '-ms-')\n : string;\n}\n","// @flow\nimport { isElement } from 'react-is';\nimport getComponentName from './getComponentName';\nimport isFunction from './isFunction';\nimport isStatelessFunction from './isStatelessFunction';\nimport isPlainObject from './isPlainObject';\nimport isStyledComponent from './isStyledComponent';\nimport Keyframes from '../models/Keyframes';\nimport hyphenate from './hyphenateStyleName';\nimport addUnitIfNeeded from './addUnitIfNeeded';\nimport { type Stringifier } from '../types';\n\n/**\n * It's falsish not falsy because 0 is allowed.\n */\nconst isFalsish = chunk => chunk === undefined || chunk === null || chunk === false || chunk === '';\n\nexport const objToCssArray = (obj: Object, prevKey?: string): Array => {\n const rules = [];\n\n for (const key in obj) {\n if (!obj.hasOwnProperty(key) || isFalsish(obj[key])) continue;\n\n if ((Array.isArray(obj[key]) && obj[key].isCss) || isFunction(obj[key])) {\n rules.push(`${hyphenate(key)}:`, obj[key], ';');\n } else if (isPlainObject(obj[key])) {\n rules.push(...objToCssArray(obj[key], key));\n } else {\n rules.push(`${hyphenate(key)}: ${addUnitIfNeeded(key, obj[key])};`);\n }\n }\n\n return prevKey ? [`${prevKey} {`, ...rules, '}'] : rules;\n};\n\nexport default function flatten(\n chunk: any,\n executionContext: ?Object,\n styleSheet: ?Object,\n stylisInstance: ?Stringifier\n): any {\n if (Array.isArray(chunk)) {\n const ruleSet = [];\n\n for (let i = 0, len = chunk.length, result; i < len; i += 1) {\n result = flatten(chunk[i], executionContext, styleSheet, stylisInstance);\n\n if (result === '') continue;\n else if (Array.isArray(result)) ruleSet.push(...result);\n else ruleSet.push(result);\n }\n\n return ruleSet;\n }\n\n if (isFalsish(chunk)) {\n return '';\n }\n\n /* Handle other components */\n if (isStyledComponent(chunk)) {\n return `.${chunk.styledComponentId}`;\n }\n\n /* Either execute or defer the function */\n if (isFunction(chunk)) {\n if (isStatelessFunction(chunk) && executionContext) {\n const result = chunk(executionContext);\n\n if (process.env.NODE_ENV !== 'production' && isElement(result)) {\n // eslint-disable-next-line no-console\n console.warn(\n `${getComponentName(\n chunk\n )} is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.`\n );\n }\n\n return flatten(result, executionContext, styleSheet, stylisInstance);\n } else return chunk;\n }\n\n if (chunk instanceof Keyframes) {\n if (styleSheet) {\n chunk.inject(styleSheet, stylisInstance);\n return chunk.getName(stylisInstance);\n } else return chunk;\n }\n\n /* Handle objects */\n return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();\n}\n","// @flow\nexport default function isStatelessFunction(test: any): boolean {\n return (\n typeof test === 'function'\n && !(\n test.prototype\n && test.prototype.isReactComponent\n )\n );\n}\n","// @flow\nimport unitless from '@emotion/unitless';\n\n// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js\nexport default function addUnitIfNeeded(name: string, value: any): any {\n // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133\n // $FlowFixMe\n if (value == null || typeof value === 'boolean' || value === '') {\n return '';\n }\n\n if (typeof value === 'number' && value !== 0 && !(name in unitless)) {\n return `${value}px`; // Presumes implicit 'px' suffix for unitless numbers\n }\n\n return String(value).trim();\n}\n","// @flow\nimport interleave from '../utils/interleave';\nimport isPlainObject from '../utils/isPlainObject';\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport isFunction from '../utils/isFunction';\nimport flatten from '../utils/flatten';\nimport type { Interpolation, RuleSet, Styles } from '../types';\n\n/**\n * Used when flattening object styles to determine if we should\n * expand an array of styles.\n */\nconst addTag = arg => {\n if (Array.isArray(arg)) {\n // eslint-disable-next-line no-param-reassign\n arg.isCss = true;\n }\n return arg;\n};\n\nexport default function css(styles: Styles, ...interpolations: Array): RuleSet {\n if (isFunction(styles) || isPlainObject(styles)) {\n // $FlowFixMe\n return addTag(flatten(interleave(EMPTY_ARRAY, [styles, ...interpolations])));\n }\n\n if (interpolations.length === 0 && styles.length === 1 && typeof styles[0] === 'string') {\n // $FlowFixMe\n return styles;\n }\n\n // $FlowFixMe\n return addTag(flatten(interleave(styles, interpolations)));\n}\n","// @flow\n\nimport { useRef } from 'react';\n\nconst invalidHookCallRe = /invalid hook call/i;\nconst seen = new Set();\n\nexport const checkDynamicCreation = (displayName: string, componentId?: string) => {\n if (process.env.NODE_ENV !== 'production') {\n const parsedIdString = componentId ? ` with the id of \"${componentId}\"` : '';\n const message =\n `The component ${displayName}${parsedIdString} has been created dynamically.\\n` +\n \"You may see this warning because you've called styled inside another component.\\n\" +\n 'To resolve this only create new StyledComponents outside of any render method and function component.';\n\n // If a hook is called outside of a component:\n // React 17 and earlier throw an error\n // React 18 and above use console.error\n\n const originalConsoleError = console.error // eslint-disable-line no-console\n try {\n let didNotCallInvalidHook = true\n /* $FlowIgnore[cannot-write] */\n console.error = (consoleErrorMessage, ...consoleErrorArgs) => { // eslint-disable-line no-console\n // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to\n // be called outside of a React component.\n if (invalidHookCallRe.test(consoleErrorMessage)) {\n didNotCallInvalidHook = false\n // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently\n seen.delete(message);\n } else {\n originalConsoleError(consoleErrorMessage, ...consoleErrorArgs);\n }\n }\n // We purposefully call `useRef` outside of a component and expect it to throw\n // If it doesn't, then we're inside another component.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useRef();\n\n if (didNotCallInvalidHook && !seen.has(message)) {\n // eslint-disable-next-line no-console\n console.warn(message);\n seen.add(message);\n }\n } catch (error) {\n // The error here is expected, since we're expecting anything that uses `checkDynamicCreation` to\n // be called outside of a React component.\n if (invalidHookCallRe.test(error.message)) {\n // This shouldn't happen, but resets `warningSeen` if we had this error happen intermittently\n seen.delete(message);\n }\n } finally {\n /* $FlowIgnore[cannot-write] */\n console.error = originalConsoleError; // eslint-disable-line no-console\n }\n }\n};\n","// @flow\nimport { EMPTY_OBJECT } from './empties';\n\ntype Props = {\n theme?: any,\n};\n\nexport default (props: Props, providedTheme: any, defaultProps: any = EMPTY_OBJECT) => {\n return (props.theme !== defaultProps.theme && props.theme) || providedTheme || defaultProps.theme;\n};\n","// @flow\n\n// Source: https://www.w3.org/TR/cssom-1/#serialize-an-identifier\n// Control characters and non-letter first symbols are not supported\nconst escapeRegex = /[!\"#$%&'()*+,./:;<=>?@[\\\\\\]^`{|}~-]+/g;\n\nconst dashesAtEnds = /(^-|-$)/g;\n\n/**\n * TODO: Explore using CSS.escape when it becomes more available\n * in evergreen browsers.\n */\nexport default function escape(str: string): string {\n return (\n str\n // Replace all possible CSS selectors\n .replace(escapeRegex, '-')\n\n // Remove extraneous hyphens at the start and end\n .replace(dashesAtEnds, '')\n );\n}\n","// @flow\n/* eslint-disable */\nimport generateAlphabeticName from './generateAlphabeticName';\nimport { hash } from './hash';\n\nexport default (str: string): string => {\n return generateAlphabeticName(hash(str) >>> 0);\n};\n","// @flow\nimport type { IStyledComponent } from '../types';\n\nexport default function isTag(target: $PropertyType): boolean %checks {\n return (\n typeof target === 'string' &&\n (process.env.NODE_ENV !== 'production'\n ? target.charAt(0) === target.charAt(0).toLowerCase()\n : true)\n );\n}\n","/* eslint-disable */\n/**\n mixin-deep; https://github.com/jonschlinkert/mixin-deep\n Inlined such that it will be consistently transpiled to an IE-compatible syntax.\n\n The MIT License (MIT)\n\n Copyright (c) 2014-present, Jon Schlinkert.\n\n Permission is hereby granted, free of charge, to any person obtaining a copy\n of this software and associated documentation files (the \"Software\"), to deal\n in the Software without restriction, including without limitation the rights\n to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n copies of the Software, and to permit persons to whom the Software is\n furnished to do so, subject to the following conditions:\n\n The above copyright notice and this permission notice shall be included in\n all copies or substantial portions of the Software.\n\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n THE SOFTWARE.\n*/\n\nconst isObject = val => {\n return (\n typeof val === 'function' || (typeof val === 'object' && val !== null && !Array.isArray(val))\n );\n};\n\nconst isValidKey = key => {\n return key !== '__proto__' && key !== 'constructor' && key !== 'prototype';\n};\n\nfunction mixin(target, val, key) {\n const obj = target[key];\n if (isObject(val) && isObject(obj)) {\n mixinDeep(obj, val);\n } else {\n target[key] = val;\n }\n}\n\nexport default function mixinDeep(target, ...rest) {\n for (const obj of rest) {\n if (isObject(obj)) {\n for (const key in obj) {\n if (isValidKey(key)) {\n mixin(target, obj[key], key);\n }\n }\n }\n }\n\n return target;\n}\n","// @flow\nimport React, { useContext, useMemo, type Element, type Context } from 'react';\nimport throwStyledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\nexport type Theme = { [key: string]: mixed };\n\ntype ThemeArgument = Theme | ((outerTheme?: Theme) => Theme);\n\ntype Props = {\n children?: Element,\n theme: ThemeArgument,\n};\n\nexport const ThemeContext: Context = React.createContext();\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\nfunction mergeTheme(theme: ThemeArgument, outerTheme?: Theme): Theme {\n if (!theme) {\n return throwStyledError(14);\n }\n\n if (isFunction(theme)) {\n const mergedTheme = theme(outerTheme);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')\n ) {\n return throwStyledError(7);\n }\n\n return mergedTheme;\n }\n\n if (Array.isArray(theme) || typeof theme !== 'object') {\n return throwStyledError(8);\n }\n\n return outerTheme ? { ...outerTheme, ...theme } : theme;\n}\n\n/**\n * Provide a theme to an entire react component tree via context\n */\nexport default function ThemeProvider(props: Props) {\n const outerTheme = useContext(ThemeContext);\n const themeContext = useMemo(() => mergeTheme(props.theme, outerTheme), [\n props.theme,\n outerTheme,\n ]);\n\n if (!props.children) {\n return null;\n }\n\n return {props.children};\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport hoist from 'hoist-non-react-statics';\nimport React, { createElement, type Ref, useContext, useDebugValue } from 'react';\nimport { SC_VERSION } from '../constants';\nimport type {\n Attrs,\n IStyledComponent,\n IStyledStatics,\n RuleSet,\n ShouldForwardProp,\n Target,\n} from '../types';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\nimport escape from '../utils/escape';\nimport generateComponentId from '../utils/generateComponentId';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { ThemeContext } from './ThemeProvider';\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(\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n SC_VERSION + name + identifiers[name]\n )}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs(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\nfunction useInjectedStyle(\n componentStyle: ComponentStyle,\n isStatic: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call\n) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n\n const className = isStatic\n ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(className);\n\n if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n warnTooManyClasses(className);\n }\n\n return className;\n}\n\nfunction useStyledComponentImpl(\n forwardedComponent: IStyledComponent,\n props: Object,\n forwardedRef: Ref,\n isStatic: boolean\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n defaultProps,\n foldedComponentIds,\n shouldForwardProp,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') 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 isStatic,\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 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 (\n shouldForwardProp\n ? shouldForwardProp(key, validAttr, elementToBeCreated)\n : isTargetTag\n ? validAttr(key)\n : true\n ) {\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: $PropertyType,\n options: {\n attrs?: Attrs,\n componentId: string,\n displayName?: string,\n parentComponentId?: string,\n shouldForwardProp?: ShouldForwardProp,\n },\n rules: RuleSet\n) {\n const isTargetStyledComp = isStyledComponent(target);\n const isCompositeComponent = !isTag(target);\n\n const {\n attrs = EMPTY_ARRAY,\n componentId = generateId(options.displayName, options.parentComponentId),\n displayName = generateDisplayName(target),\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 isTargetStyledComp && ((target: any): IStyledComponent).attrs\n ? Array.prototype.concat(((target: any): IStyledComponent).attrs, attrs).filter(Boolean)\n : attrs;\n\n // eslint-disable-next-line prefer-destructuring\n let shouldForwardProp = options.shouldForwardProp;\n\n if (isTargetStyledComp && target.shouldForwardProp) {\n if (options.shouldForwardProp) {\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, filterFn, elementToBeCreated) =>\n ((((target: any): IStyledComponent).shouldForwardProp: any): ShouldForwardProp)(\n prop,\n filterFn,\n elementToBeCreated\n ) &&\n ((options.shouldForwardProp: any): ShouldForwardProp)(prop, filterFn, elementToBeCreated);\n } else {\n // eslint-disable-next-line prefer-destructuring\n shouldForwardProp = ((target: any): IStyledComponent).shouldForwardProp;\n }\n }\n\n const componentStyle = new ComponentStyle(\n rules,\n styledComponentId,\n isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n );\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 && attrs.length === 0;\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: IStyledComponent;\n\n const forwardRef = (props, ref) =>\n // eslint-disable-next-line\n useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);\n\n forwardRef.displayName = displayName;\n\n WrappedStyledComponent = ((React.forwardRef(forwardRef): any): IStyledComponent);\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 ? Array.prototype.concat(\n ((target: any): IStyledComponent).foldedComponentIds,\n ((target: any): IStyledComponent).styledComponentId\n )\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 ? ((target: any): IStyledComponent).target\n : target;\n\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 Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n this._foldedDefaultProps = isTargetStyledComp\n ? merge({}, ((target: any): IStyledComponent).defaultProps, obj)\n : 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 WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isCompositeComponent) {\n hoist<\n IStyledStatics,\n $PropertyType,\n { [key: $Keys]: true }\n >(WrappedStyledComponent, ((target: any): $PropertyType), {\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 styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport type { IStyledComponent } from '../types';\nimport getComponentName from './getComponentName';\nimport isTag from './isTag';\n\nexport default function generateDisplayName(\n target: $PropertyType\n): string {\n return isTag(target) ? `styled.${target}` : `Styled(${getComponentName(target)})`;\n}\n","/**\n * Convenience function for joining strings to form className chains\n */\nexport default function joinStrings(a: ?String, b: ?String): ?String {\n return a && b ? `${a} ${b}` : a || b;\n}\n","// @flow\n\nexport const LIMIT = 200;\n\nexport default (displayName: string, componentId: string) => {\n let generatedClasses = {};\n let warningSeen = false;\n\n return (className: string) => {\n if (!warningSeen) {\n generatedClasses[className] = true;\n if (Object.keys(generatedClasses).length >= LIMIT) {\n // Unable to find latestRule in test environment.\n /* eslint-disable no-console, prefer-template */\n const parsedIdString = componentId ? ` with the id of \"${componentId}\"` : '';\n\n console.warn(\n `Over ${LIMIT} classes were generated for component ${displayName}${parsedIdString}.\\n` +\n 'Consider using the attrs method, together with a style object for frequently changed styles.\\n' +\n 'Example:\\n' +\n ' const Component = styled.div.attrs(props => ({\\n' +\n ' style: {\\n' +\n ' background: props.background,\\n' +\n ' },\\n' +\n ' }))`width: 100%;`\\n\\n' +\n ' '\n );\n warningSeen = true;\n generatedClasses = {};\n }\n }\n };\n};\n","// @flow\n// Thanks to ReactDOMFactories for this handy list!\n\nexport default [\n 'a',\n 'abbr',\n 'address',\n 'area',\n 'article',\n 'aside',\n 'audio',\n 'b',\n 'base',\n 'bdi',\n 'bdo',\n 'big',\n 'blockquote',\n 'body',\n 'br',\n 'button',\n 'canvas',\n 'caption',\n 'cite',\n 'code',\n 'col',\n 'colgroup',\n 'data',\n 'datalist',\n 'dd',\n 'del',\n 'details',\n 'dfn',\n 'dialog',\n 'div',\n 'dl',\n 'dt',\n 'em',\n 'embed',\n 'fieldset',\n 'figcaption',\n 'figure',\n 'footer',\n 'form',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'head',\n 'header',\n 'hgroup',\n 'hr',\n 'html',\n 'i',\n 'iframe',\n 'img',\n 'input',\n 'ins',\n 'kbd',\n 'keygen',\n 'label',\n 'legend',\n 'li',\n 'link',\n 'main',\n 'map',\n 'mark',\n 'marquee',\n 'menu',\n 'menuitem',\n 'meta',\n 'meter',\n 'nav',\n 'noscript',\n 'object',\n 'ol',\n 'optgroup',\n 'option',\n 'output',\n 'p',\n 'param',\n 'picture',\n 'pre',\n 'progress',\n 'q',\n 'rp',\n 'rt',\n 'ruby',\n 's',\n 'samp',\n 'script',\n 'section',\n 'select',\n 'small',\n 'source',\n 'span',\n 'strong',\n 'style',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'textarea',\n 'tfoot',\n 'th',\n 'thead',\n 'time',\n 'title',\n 'tr',\n 'track',\n 'u',\n 'ul',\n 'var',\n 'video',\n 'wbr',\n\n // SVG\n 'circle',\n 'clipPath',\n 'defs',\n 'ellipse',\n 'foreignObject',\n 'g',\n 'image',\n 'line',\n 'linearGradient',\n 'marker',\n 'mask',\n 'path',\n 'pattern',\n 'polygon',\n 'polyline',\n 'radialGradient',\n 'rect',\n 'stop',\n 'svg',\n 'text',\n 'textPath',\n 'tspan',\n];\n","// @flow\nimport constructWithOptions from './constructWithOptions';\nimport StyledComponent from '../models/StyledComponent';\nimport domElements from '../utils/domElements';\n\nimport type { Target } from '../types';\n\nconst styled = (tag: Target) => constructWithOptions(StyledComponent, tag);\n\n// Shorthands for all valid HTML Elements\ndomElements.forEach(domElement => {\n styled[domElement] = styled(domElement);\n});\n\nexport default styled;\n","// @flow\nimport { isValidElementType } from 'react-is';\nimport css from './css';\nimport throwStyledError from '../utils/error';\nimport { EMPTY_OBJECT } from '../utils/empties';\n\nimport type { Target } from '../types';\n\nexport default function constructWithOptions(\n componentConstructor: Function,\n tag: Target,\n options: Object = EMPTY_OBJECT\n) {\n if (!isValidElementType(tag)) {\n return throwStyledError(1, String(tag));\n }\n\n /* This is callable directly as a template function */\n // $FlowFixMe: Not typed to avoid destructuring arguments\n const templateFunction = (...args) => componentConstructor(tag, options, css(...args));\n\n /* If config methods are called, wrap up a new template function and merge options */\n templateFunction.withConfig = config =>\n constructWithOptions(componentConstructor, tag, { ...options, ...config });\n\n /* Modify/inject new props at runtime */\n templateFunction.attrs = attrs =>\n constructWithOptions(componentConstructor, tag, {\n ...options,\n attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean),\n });\n\n return templateFunction;\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\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 // pre-register the first instance to ensure global styles\n // load before component ones\n StyleSheet.registerId(this.componentId + 1);\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, stylis);\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 if (instance > 2) 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\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 if (!css) return '';\n\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 ``;\n };\n\n collectStyles(children: any) {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return {children};\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 [