{"version":3,"file":"styled-components.native.esm.js","sources":["../../src/utils/empties.ts","../../src/utils/error.ts","../../src/utils/errors.ts","../../src/utils/setToString.ts","../../src/constants.ts","../../src/sheet/GroupedTag.ts","../../src/sheet/GroupIDAllocator.ts","../../src/sheet/Rehydration.ts","../../src/sheet/dom.ts","../../src/utils/nonce.ts","../../src/sheet/Tag.ts","../../src/sheet/Sheet.ts","../../src/utils/hash.ts","../../src/utils/stylis.ts","../../src/models/StyleSheetManager.tsx","../../src/models/Keyframes.ts","../../src/utils/getComponentName.ts","../../src/utils/hyphenateStyleName.ts","../../src/utils/isFunction.ts","../../src/utils/isPlainObject.ts","../../src/utils/isStyledComponent.ts","../../src/utils/flatten.ts","../../src/utils/addUnitIfNeeded.ts","../../src/utils/isStatelessFunction.ts","../../src/utils/interleave.ts","../../src/constructors/css.ts","../../src/constructors/constructWithOptions.ts","../../src/models/ThemeProvider.tsx","../../src/utils/determineTheme.ts","../../src/utils/hoist.ts","../../src/hoc/withTheme.tsx","../../src/utils/generateAlphabeticName.ts","../../src/utils/joinStrings.ts","../../src/models/InlineStyle.ts","../../src/utils/mixinDeep.ts","../../src/models/StyledNativeComponent.ts","../../src/native/index.ts","../../src/utils/generateComponentId.ts","../../src/utils/generateDisplayName.ts","../../src/utils/isTag.ts"],"sourcesContent":["import { Dict } from '../types';\n\nexport const EMPTY_ARRAY = Object.freeze([]) as Readonly;\nexport const EMPTY_OBJECT = Object.freeze({}) as Readonly>;\n","import { Dict } from '../types';\nimport errorMap from './errors';\n\nconst ERRORS: Dict = process.env.NODE_ENV !== 'production' ? errorMap : {};\n\n/**\n * super basic version of sprintf\n */\nfunction format(...args: [string, ...any]) {\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: any[]\n) {\n if (process.env.NODE_ENV === 'production') {\n return new Error(\n `An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#${code} for more information.${\n interpolations.length > 0 ? ` Args: ${interpolations.join(', ')}` : ''\n }`\n );\n } else {\n return new Error(format(ERRORS[code], ...interpolations).trim());\n }\n}\n","export default {\n '1': 'Cannot create styled-component for component: %s.\\n\\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\",\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',\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',\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',\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\",\n '7': 'ThemeProvider: Please return an object from your \"theme\" prop function, e.g.\\n\\n```js\\ntheme={() => ({})}\\n```\\n\\n',\n '8': 'ThemeProvider: Please make your \"theme\" prop an object.\\n\\n',\n '9': 'Missing document ``\\n\\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',\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',\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',\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',\n '14': 'ThemeProvider: \"theme\" prop is required.\\n\\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\",\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\",\n '17': \"CSSStyleSheet could not be found on HTMLStyleElement.\\nHas styled-components' style tag been unmounted or altered by another script?\\n\",\n '18': 'ThemeProvider: Please make sure your useTheme hook is within a ``',\n};\n","/**\n * If the Object prototype is frozen, the \"toString\" property is non-writable. This means that any objects which inherit this property\n * cannot have the property changed using a \"=\" assignment operator. If using strict mode, attempting that will cause an error. If not using\n * strict mode, attempting that will be silently ignored.\n *\n * If the Object prototype is frozen, inherited non-writable properties can still be shadowed using one of two mechanisms:\n *\n * 1. ES6 class methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#methods\n * 2. Using the `Object.defineProperty()` static method:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\n *\n * However, this project uses Babel to transpile ES6 classes, and transforms ES6 class methods to use the assignment operator instead:\n * https://babeljs.io/docs/babel-plugin-transform-class-properties#options\n *\n * Therefore, the most compatible way to shadow the prototype's \"toString\" property is to define a new \"toString\" property on this object.\n */\nexport function setToString(object: object, toStringFn: () => string) {\n Object.defineProperty(object, 'toString', { value: toStringFn });\n}\n","declare let SC_DISABLE_SPEEDY: boolean | null | undefined;\ndeclare let __VERSION__: string;\n\nexport const SC_ATTR: string =\n (typeof process !== 'undefined' &&\n typeof process.env !== 'undefined' &&\n (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 = Boolean(\n typeof SC_DISABLE_SPEEDY === 'boolean'\n ? SC_DISABLE_SPEEDY\n : typeof process !== 'undefined' &&\n typeof process.env !== 'undefined' &&\n typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&\n process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''\n ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'\n ? false\n : process.env.REACT_APP_SC_DISABLE_SPEEDY\n : typeof process !== 'undefined' &&\n typeof process.env !== 'undefined' &&\n typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&\n process.env.SC_DISABLE_SPEEDY !== ''\n ? process.env.SC_DISABLE_SPEEDY === 'false'\n ? false\n : process.env.SC_DISABLE_SPEEDY\n : process.env.NODE_ENV !== 'production'\n);\n\n// Shared empty execution context when generating static styles\nexport const STATIC_EXECUTION_CONTEXT = {};\n","import { SPLITTER } from '../constants';\nimport styledError from '../utils/error';\nimport { GroupedTag, Tag } from './types';\n\n/** Create a GroupedTag with an underlying Tag implementation */\nexport const makeGroupedTag = (tag: Tag) => {\n return new DefaultGroupedTag(tag);\n};\n\nconst BASE_SIZE = 1 << 9;\n\nconst DefaultGroupedTag = class DefaultGroupedTag implements GroupedTag {\n groupSizes: Uint32Array;\n length: number;\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) {\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[]) {\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 throw styledError(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\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) {\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) {\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","import styledError 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) as any;\n }\n\n while (reverseRegister.has(nextFreeGroup)) {\n nextFreeGroup++;\n }\n\n const group = nextFreeGroup++;\n\n if (process.env.NODE_ENV !== 'production' && ((group | 0) < 0 || group > MAX_SMI)) {\n throw styledError(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 groupIDRegister.set(id, group);\n reverseRegister.set(group, id);\n};\n","import { SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION, SPLITTER } from '../constants';\nimport { getIdForGroup, setGroupForId } from './GroupIDAllocator';\nimport { 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 === undefined || rules.length === 0) 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 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] as any as 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","import { SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport styledError from '../utils/error';\nimport getNonce from '../utils/nonce';\n\n/** Find last style element if any inside target */\nconst findLastStyleTag = (target: HTMLElement): void | HTMLStyleElement => {\n const arr = Array.from(target.querySelectorAll(`style[${SC_ATTR}]`));\n\n return arr[arr.length - 1];\n};\n\n/** Create a style element inside `target` or after the last */\nexport const makeStyleTag = (target?: HTMLElement | undefined): HTMLStyleElement => {\n const head = document.head;\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 as any as 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 as any as CSSStyleSheet;\n }\n }\n\n throw styledError(17);\n};\n","declare let __webpack_nonce__: string;\n\nexport default function getNonce() {\n return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;\n}\n","import { getSheet, makeStyleTag } from './dom';\nimport { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions) => {\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 const CSSOMTag = class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement | undefined) {\n this.element = makeStyleTag(target);\n\n // Avoid Edge bug where empty style elements don't create sheets\n this.element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(this.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\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule && rule.cssText) {\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 const TextTag = class TextTag implements Tag {\n element: HTMLStyleElement;\n nodes: NodeListOf;\n length: number;\n\n constructor(target?: HTMLElement | undefined) {\n this.element = makeStyleTag(target);\n this.nodes = this.element.childNodes;\n this.length = 0;\n }\n\n insertRule(index: number, rule: string) {\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) {\n this.element.removeChild(this.nodes[index]);\n this.length--;\n }\n\n getRule(index: number) {\n if (index < this.length) {\n return this.nodes[index].textContent as string;\n } else {\n return '';\n }\n }\n};\n\n/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */\nexport const VirtualTag = class VirtualTag implements Tag {\n rules: string[];\n\n length: number;\n\n constructor(_target?: HTMLElement | undefined) {\n this.rules = [];\n this.length = 0;\n }\n\n insertRule(index: number, rule: string) {\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) {\n this.rules.splice(index, 1);\n this.length--;\n }\n\n getRule(index: number) {\n if (index < this.length) {\n return this.rules[index];\n } else {\n return '';\n }\n }\n};\n","import { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport { EMPTY_OBJECT } from '../utils/empties';\nimport { setToString } from '../utils/setToString';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\nimport { makeTag } from './Tag';\nimport { GroupedTag, Sheet, SheetOptions } from './types';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean;\n useCSSOMInjection?: boolean;\n target?: HTMLElement | undefined;\n};\n\ntype GlobalStylesAllocationMap = {\n [key: string]: number;\n};\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 names: NamesAllocationMap;\n options: SheetOptions;\n server: boolean;\n tag?: GroupedTag | undefined;\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 as Object,\n globalStyles: GlobalStylesAllocationMap = {},\n names?: NamesAllocationMap | undefined\n ) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.gs = globalStyles;\n this.names = new Map(names as NamesAllocationMap);\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 setToString(this, () => outputSheet(this));\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames = 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() {\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) as 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) as 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 | 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) as 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","export 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) => {\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) => {\n return phash(SEED, x);\n};\n","import * as stylis from 'stylis';\nimport { Stringifier } from '../types';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from './empties';\nimport throwStyledError from './error';\nimport { phash, SEED } from './hash';\n\nconst AMP_REGEX = /&/g;\nconst COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\n\nexport type ICreateStylisInstance = {\n options?: { namespace?: string | undefined; prefix?: boolean | undefined } | undefined;\n plugins?: stylis.Middleware[] | undefined;\n};\n\n/**\n * Takes an element and recurses through it's rules added the namespace to the start of each selector.\n * Takes into account media queries by recursing through child rules if they are present.\n */\nfunction recursivelySetNamepace(compiled: stylis.Element[], namespace: String): stylis.Element[] {\n return compiled.map(rule => {\n if (rule.type === 'rule') {\n // add the namespace to the start\n rule.value = `${namespace} ${rule.value}`;\n // add the namespace after each comma for subsequent selectors.\n // @ts-expect-error we target modern browsers but intentionally transpile to ES5 for speed\n rule.value = rule.value.replaceAll(',', `,${namespace} `);\n rule.props = (rule.props as string[]).map(prop => {\n return `${namespace} ${prop}`;\n });\n }\n\n if (Array.isArray(rule.children) && rule.type !== '@keyframes') {\n rule.children = recursivelySetNamepace(rule.children, namespace);\n }\n return rule;\n });\n}\n\nexport default function createStylisInstance(\n {\n options = EMPTY_OBJECT as object,\n plugins = EMPTY_ARRAY as unknown as stylis.Middleware[],\n }: ICreateStylisInstance = EMPTY_OBJECT as object\n) {\n let _componentId: string;\n let _selector: string;\n let _selectorRegexp: RegExp;\n\n const selfReferenceReplacer: Parameters[1] = (match, offset, string) => {\n if (\n /**\n * We only want to refer to the static class directly in the following scenarios:\n *\n * 1. The selector is alone on the line `& { color: red; }`\n * 2. The selector is part of a self-reference selector `& + & { color: red; }`\n */\n string === _selector ||\n (string.startsWith(_selector) &&\n string.endsWith(_selector) &&\n string.replaceAll(_selector, '').length > 0)\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/v4.0.2#abstract-syntax-structure\n */\n const selfReferenceReplacementPlugin: stylis.Middleware = element => {\n if (element.type === stylis.RULESET && element.value.includes('&')) {\n (element.props as string[])[0] = element.props[0]\n // catch any hanging references that stylis missed\n .replace(AMP_REGEX, _selector)\n .replace(_selectorRegexp, selfReferenceReplacer);\n }\n };\n\n const middlewares = plugins.slice();\n\n middlewares.push(selfReferenceReplacementPlugin);\n\n /**\n * Enables automatic vendor-prefixing for styles.\n */\n if (options.prefix) {\n middlewares.push(stylis.prefixer);\n }\n\n middlewares.push(stylis.stringify);\n\n const stringifyRules: Stringifier = (\n css: string,\n selector = '',\n /**\n * This \"prefix\" referes to a _selector_ prefix.\n */\n prefix = '',\n componentId = '&'\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\n const flatCSS = css.replace(COMMENT_REGEX, '');\n let compiled = stylis.compile(\n prefix || selector ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS\n );\n\n if (options.namespace) {\n compiled = recursivelySetNamepace(compiled, options.namespace);\n }\n\n const stack: string[] = [];\n\n stylis.serialize(\n compiled,\n stylis.middleware(middlewares.concat(stylis.rulesheet(value => stack.push(value))))\n );\n\n return stack;\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","import React, { useContext, useEffect, useMemo, useState } from 'react';\nimport shallowequal from 'shallowequal';\nimport type stylis from 'stylis';\nimport StyleSheet from '../sheet';\nimport { ShouldForwardProp, Stringifier } from '../types';\nimport createStylisInstance from '../utils/stylis';\n\nexport const mainSheet: StyleSheet = new StyleSheet();\nexport const mainStylis: Stringifier = createStylisInstance();\n\nexport type IStyleSheetContext = {\n shouldForwardProp?: ShouldForwardProp<'web'> | undefined;\n styleSheet: StyleSheet;\n stylis: Stringifier;\n};\n\nexport const StyleSheetContext = React.createContext({\n shouldForwardProp: undefined,\n styleSheet: mainSheet,\n stylis: mainStylis,\n});\n\nexport const StyleSheetConsumer = StyleSheetContext.Consumer;\n\nexport type IStylisContext = Stringifier | void;\nexport const StylisContext = React.createContext(undefined);\nexport const StylisConsumer = StylisContext.Consumer;\n\nexport function useStyleSheetContext() {\n return useContext(StyleSheetContext);\n}\n\nexport type IStyleSheetManager = React.PropsWithChildren<{\n /**\n * If desired, you can pass this prop to disable \"speedy\" insertion mode, which\n * uses the browser [CSSOM APIs](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet).\n * When disabled, rules are inserted as simple text into style blocks.\n */\n disableCSSOMInjection?: undefined | boolean;\n /**\n * If you are working exclusively with modern browsers, vendor prefixes can often be omitted\n * to reduce the weight of CSS on the page.\n */\n enableVendorPrefixes?: undefined | boolean;\n /**\n * Provide an optional selector to be prepended to all generated style rules.\n */\n namespace?: undefined | string;\n /**\n * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.\n */\n sheet?: undefined | StyleSheet;\n /**\n * Starting in v6, styled-components no longer does its own prop validation\n * and recommends use of transient props \"$prop\" to pass style-only props to\n * components. If for some reason you are not able to use transient props, a\n * prop validation function can be provided via `StyleSheetManager`, such as\n * `@emotion/is-prop-valid`.\n *\n * When the return value is `true`, props will be forwarded to the DOM/underlying\n * component. If return value is `false`, the prop will be discarded after styles\n * are calculated.\n *\n * Manually composing `styled.{element}.withConfig({shouldForwardProp})` will\n * override this default.\n */\n shouldForwardProp?: undefined | IStyleSheetContext['shouldForwardProp'];\n /**\n * An array of plugins to be run by stylis (style processor) during compilation.\n * Check out [what's available on npm*](https://www.npmjs.com/search?q=keywords%3Astylis).\n *\n * \\* The plugin(s) must be compatible with stylis v4 or above.\n */\n stylisPlugins?: undefined | stylis.Middleware[];\n /**\n * Provide an alternate DOM node to host generated styles; useful for iframes.\n */\n target?: undefined | HTMLElement;\n}>;\n\nexport function StyleSheetManager(props: IStyleSheetManager): JSX.Element {\n const [plugins, setPlugins] = useState(props.stylisPlugins);\n const { styleSheet } = useStyleSheetContext();\n\n const resolvedStyleSheet = useMemo(() => {\n let sheet = styleSheet;\n\n if (props.sheet) {\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, styleSheet]);\n\n const stylis = useMemo(\n () =>\n createStylisInstance({\n options: { namespace: props.namespace, prefix: props.enableVendorPrefixes },\n plugins,\n }),\n [props.enableVendorPrefixes, props.namespace, plugins]\n );\n\n useEffect(() => {\n if (!shallowequal(plugins, props.stylisPlugins)) setPlugins(props.stylisPlugins);\n }, [props.stylisPlugins]);\n\n const styleSheetContextValue = useMemo(\n () => ({\n shouldForwardProp: props.shouldForwardProp,\n styleSheet: resolvedStyleSheet,\n stylis,\n }),\n [props.shouldForwardProp, resolvedStyleSheet, stylis]\n );\n\n return (\n \n {props.children}\n \n );\n}\n","import StyleSheet from '../sheet';\nimport { Keyframes as KeyframesType, Stringifier } from '../types';\nimport styledError from '../utils/error';\nimport { setToString } from '../utils/setToString';\nimport { mainStylis } from './StyleSheetManager';\n\nexport default class Keyframes implements KeyframesType {\n id: string;\n name: string;\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 setToString(this, () => {\n throw styledError(12, String(this.name));\n });\n }\n\n inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = mainStylis): void => {\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 getName(stylisInstance: Stringifier = mainStylis): string {\n return this.name + stylisInstance.hash;\n }\n}\n","import { StyledTarget } from '../types';\n\nexport default function getComponentName(target: StyledTarget) {\n return (\n (process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) ||\n (target as Exclude, string>).displayName ||\n (target as Function).name ||\n 'Component'\n );\n}\n","const isUpper = (c: string) => c >= 'A' && c <= 'Z';\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 */\nexport default function hyphenateStyleName(string: string): string {\n let output = '';\n\n for (let i = 0; i < string.length; i++) {\n const c = string[i];\n // Check for CSS variable prefix\n if (i === 1 && c === '-' && string[0] === '-') {\n return string;\n }\n\n if (isUpper(c)) {\n output += '-' + c.toLowerCase();\n } else {\n output += c;\n }\n }\n\n return output.startsWith('ms-') ? '-' + output : output;\n}\n","export default function isFunction(test: any): test is Function {\n return typeof test === 'function';\n}\n","export default function isPlainObject(x: any): x is Record {\n return (\n x !== null &&\n typeof x === 'object' &&\n x.constructor.name === Object.name &&\n /* check for reasonable markers that the object isn't an element for react & preact/compat */\n !('props' in x && x.$$typeof)\n );\n}\n","import { StyledComponentBrand } from '../types';\n\nexport default function isStyledComponent(target: any): target is StyledComponentBrand {\n return typeof target === 'object' && 'styledComponentId' in target;\n}\n","import Keyframes from '../models/Keyframes';\nimport StyleSheet from '../sheet';\nimport {\n AnyComponent,\n Dict,\n ExecutionContext,\n Interpolation,\n IStyledComponent,\n RuleSet,\n Stringifier,\n StyledObject,\n} from '../types';\nimport addUnitIfNeeded from './addUnitIfNeeded';\nimport { EMPTY_ARRAY } from './empties';\nimport getComponentName from './getComponentName';\nimport hyphenate from './hyphenateStyleName';\nimport isFunction from './isFunction';\nimport isPlainObject from './isPlainObject';\nimport isStatelessFunction from './isStatelessFunction';\nimport isStyledComponent from './isStyledComponent';\n\n/**\n * It's falsish not falsy because 0 is allowed.\n */\nconst isFalsish = (chunk: any): chunk is undefined | null | false | '' =>\n chunk === undefined || chunk === null || chunk === false || chunk === '';\n\nexport const objToCssArray = (obj: Dict): string[] => {\n const rules = [];\n\n for (const key in obj) {\n const val = obj[key];\n if (!obj.hasOwnProperty(key) || isFalsish(val)) continue;\n\n // @ts-expect-error Property 'isCss' does not exist on type 'any[]'\n if ((Array.isArray(val) && val.isCss) || isFunction(val)) {\n rules.push(`${hyphenate(key)}:`, val, ';');\n } else if (isPlainObject(val)) {\n rules.push(`${key} {`, ...objToCssArray(val), '}');\n } else {\n rules.push(`${hyphenate(key)}: ${addUnitIfNeeded(key, val)};`);\n }\n }\n\n return rules;\n};\n\nexport default function flatten(\n chunk: Interpolation