{"version":3,"file":"styled-components.browser.cjs.js","sources":["../src/constants.ts","../src/utils/checkDynamicCreation.ts","../src/utils/createWarnTooManyClasses.ts","../src/utils/empties.ts","../src/utils/determineTheme.ts","../src/utils/domElements.ts","../src/utils/escape.ts","../src/utils/generateAlphabeticName.ts","../src/utils/hash.ts","../src/utils/generateComponentId.ts","../src/utils/getComponentName.ts","../src/utils/isTag.ts","../src/utils/generateDisplayName.ts","../src/utils/hoist.ts","../src/utils/isStyledComponent.ts","../src/utils/joinStrings.ts","../src/utils/isPlainObject.ts","../src/utils/mixinDeep.ts","../src/utils/errors.ts","../src/utils/error.ts","../src/sheet/GroupedTag.ts","../src/sheet/GroupIDAllocator.ts","../src/sheet/Rehydration.ts","../src/utils/nonce.ts","../src/sheet/dom.ts","../src/sheet/Tag.ts","../src/sheet/Sheet.ts","../src/utils/stylis.ts","../src/models/StyleSheetManager.tsx","../src/models/Keyframes.ts","../src/utils/addUnitIfNeeded.ts","../src/utils/hyphenateStyleName.ts","../src/utils/isFunction.ts","../src/utils/isStatelessFunction.ts","../src/utils/flatten.ts","../src/utils/isStaticRules.ts","../src/models/ComponentStyle.ts","../src/models/ThemeProvider.tsx","../src/models/StyledComponent.ts","../src/utils/interleave.ts","../src/constructors/css.ts","../src/constructors/constructWithOptions.ts","../src/constructors/styled.tsx","../src/models/GlobalStyle.ts","../src/constructors/createGlobalStyle.ts","../src/constructors/keyframes.ts","../src/hoc/withTheme.tsx","../src/hooks/useTheme.ts","../src/models/ServerStyleSheet.tsx","../src/secretInternals.ts","../src/base.ts"],"sourcesContent":["declare let SC_DISABLE_SPEEDY: boolean | null | undefined;\ndeclare let __VERSION__: string;\n\nexport const SC_ATTR: string =\n (typeof process !== 'undefined' && typeof process.env !== '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 = 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 { 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;\n try {\n let didNotCallInvalidHook = true;\n console.error = (consoleErrorMessage, ...consoleErrorArgs) => {\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 useRef();\n\n if (didNotCallInvalidHook && !seen.has(message)) {\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 as 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 console.error = originalConsoleError;\n }\n }\n};\n","import { Dict } from '../types';\n\nexport const LIMIT = 200;\n\nexport default (displayName: string, componentId: string) => {\n let generatedClasses: Dict = {};\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\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","import { Dict } from '../types';\n\nexport const EMPTY_ARRAY = Object.freeze([]) as Readonly;\nexport const EMPTY_OBJECT = Object.freeze({}) as Readonly>;\n","import { ExecutionProps } from '../types';\nimport { EMPTY_OBJECT } from './empties';\n\nexport default function determineTheme(\n props: ExecutionProps,\n providedTheme: any,\n defaultProps: any = EMPTY_OBJECT\n) {\n return (props.theme !== defaultProps.theme && props.theme) || providedTheme || defaultProps.theme;\n}\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 '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 'use',\n 'var',\n 'video',\n 'wbr', // 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 'tspan',\n] as const;\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) {\n return str // Replace all possible CSS selectors\n .replace(escapeRegex, '-') // Remove extraneous hyphens at the start and end\n .replace(dashesAtEnds, '');\n}\n","const 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.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) {\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","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 generateAlphabeticName from './generateAlphabeticName';\nimport { hash } from './hash';\n\nexport default function generateComponentId(str: string) {\n return generateAlphabeticName(hash(str) >>> 0);\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","import { StyledTarget } from '../types';\n\nexport default function isTag(target: StyledTarget<'web'>): target is string {\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","import { StyledTarget } from '../types';\nimport getComponentName from './getComponentName';\nimport isTag from './isTag';\n\nexport default function generateDisplayName(target: StyledTarget) {\n return isTag(target) ? `styled.${target}` : `Styled(${getComponentName(target)})`;\n}\n","import React from 'react';\nimport { AnyComponent } from '../types';\n\nconst hasSymbol = typeof Symbol === 'function' && Symbol.for;\n\n// copied from react-is\nconst REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;\nconst REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;\n\n/**\n * Adapted from hoist-non-react-statics to avoid the react-is dependency.\n */\nconst REACT_STATICS = {\n childContextTypes: true,\n contextType: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDefaultProps: true,\n getDerivedStateFromError: true,\n getDerivedStateFromProps: true,\n mixins: true,\n propTypes: true,\n type: true,\n};\n\nconst KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true,\n};\n\nconst FORWARD_REF_STATICS = {\n $$typeof: true,\n render: true,\n defaultProps: true,\n displayName: true,\n propTypes: true,\n};\n\nconst MEMO_STATICS = {\n $$typeof: true,\n compare: true,\n defaultProps: true,\n displayName: true,\n propTypes: true,\n type: true,\n};\n\nconst TYPE_STATICS = {\n [REACT_FORWARD_REF_TYPE]: FORWARD_REF_STATICS,\n [REACT_MEMO_TYPE]: MEMO_STATICS,\n};\n\ntype OmniComponent = AnyComponent;\n\n// adapted from react-is\nfunction isMemo(\n object: OmniComponent | React.MemoExoticComponent\n): object is React.MemoExoticComponent {\n const $$typeofType = 'type' in object && object.type.$$typeof;\n\n return $$typeofType === REACT_MEMO_TYPE;\n}\n\nfunction getStatics(component: OmniComponent) {\n // React v16.11 and below\n if (isMemo(component)) {\n return MEMO_STATICS;\n }\n\n // React v16.12 and above\n return '$$typeof' in component\n ? TYPE_STATICS[component['$$typeof'] as unknown as string]\n : REACT_STATICS;\n}\n\nconst defineProperty = Object.defineProperty;\nconst getOwnPropertyNames = Object.getOwnPropertyNames;\nconst getOwnPropertySymbols = Object.getOwnPropertySymbols;\nconst getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nconst getPrototypeOf = Object.getPrototypeOf;\nconst objectPrototype = Object.prototype;\n\ntype ExcludeList = {\n [key: string]: true;\n};\n\ntype NonReactStatics = {\n [key in Exclude<\n keyof S,\n S extends React.MemoExoticComponent\n ? keyof typeof MEMO_STATICS | keyof C\n : S extends React.ForwardRefExoticComponent\n ? keyof typeof FORWARD_REF_STATICS | keyof C\n : keyof typeof REACT_STATICS | keyof typeof KNOWN_STATICS | keyof C\n >]: S[key];\n};\n\nexport default function hoistNonReactStatics<\n T extends OmniComponent,\n S extends OmniComponent,\n C extends ExcludeList = {}\n>(targetComponent: T, sourceComponent: S, excludelist?: C) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n\n if (objectPrototype) {\n const inheritedComponent = getPrototypeOf(sourceComponent);\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, excludelist);\n }\n }\n\n let keys: (String | Symbol)[] = getOwnPropertyNames(sourceComponent);\n\n if (getOwnPropertySymbols) {\n keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n }\n\n const targetStatics = getStatics(targetComponent);\n const sourceStatics = getStatics(sourceComponent);\n\n for (let i = 0; i < keys.length; ++i) {\n const key = keys[i] as unknown as string;\n if (\n !(key in KNOWN_STATICS) &&\n !(excludelist && excludelist[key]) &&\n !(sourceStatics && key in sourceStatics) &&\n !(targetStatics && key in targetStatics)\n ) {\n const descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n try {\n // Avoid failures from read-only properties\n defineProperty(targetComponent, key, descriptor!);\n } catch (e) {\n /* ignore */\n }\n }\n }\n }\n\n return targetComponent as T & NonReactStatics;\n}\n","import { IStyledComponent } from '../types';\n\nexport default function isStyledComponent(target: any): target is IStyledComponent<'web', any, any> {\n return typeof target === 'object' && 'styledComponentId' in target;\n}\n","/**\n * Convenience function for joining strings to form className chains\n */\nexport default function joinStrings(...args: any[]): string {\n return args.filter(Boolean).join(' ');\n}\n","export default function isPlainObject(x: any): boolean {\n return (\n x !== null &&\n typeof x === 'object' &&\n /* a check for empty prototype would be more typical, but that\n doesn't play well with objects created in different vm contexts */\n (!x.constructor || x.constructor.name === 'Object') &&\n (x.toString ? x.toString() : Object.prototype.toString.call(x)) === '[object Object]' &&\n /* check for reasonable markers that the object isn't an element for react & preact/compat */\n !('props' in x && (x.$$typeof || x.constructor === undefined))\n );\n}\n","import isPlainObject from './isPlainObject';\n\nfunction mixinRecursively(target: any, source: any, forceMerge = false) {\n /* only merge into POJOs, Arrays, but for top level objects only\n * allow to merge into anything by passing forceMerge = true */\n if (!forceMerge && !isPlainObject(target) && !Array.isArray(target)) {\n return source;\n }\n\n if (Array.isArray(source)) {\n for (let key = 0; key < source.length; key++) {\n target[key] = mixinRecursively(target[key], source[key]);\n }\n } else if (isPlainObject(source)) {\n for (const key in source) {\n target[key] = mixinRecursively(target[key], source[key]);\n }\n }\n\n return target;\n}\n\n/**\n * Arrays & POJOs merged recursively, other objects and value types are overridden\n * If target is not a POJO or an Array, it will get source properties injected via shallow merge\n * Source objects applied left to right. Mutates & returns target. Similar to lodash merge.\n */\nexport default function mixinDeep(target: any, ...sources: any[]) {\n for (const source of sources) {\n mixinRecursively(target, source, true);\n }\n\n return target;\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};\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.${interpolations.length > 0 ? ` Args: ${interpolations.join(', ')}` : ''\n }`\n );\n } else {\n return new Error(format(ERRORS[code], ...interpolations).trim());\n }\n}\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 | 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 if (Array.isArray(rules)) {\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 } else {\n if (this.tag.insertRule(ruleIndex, rules)) {\n this.groupSizes[group]++;\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","declare let __webpack_nonce__: string;\n\nexport default function getNonce() {\n return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;\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\nconst ELEMENT_TYPE = 1;\n/* 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] as any as HTMLElement | null | undefined;\n if (child && child.nodeType === ELEMENT_TYPE && child.hasAttribute(SC_ATTR)) {\n return child as any as 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 as any as 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 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","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) {\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 const TextTag = class TextTag implements Tag {\n element: HTMLStyleElement;\n nodes: NodeListOf;\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) {\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) {\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 { 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;\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;\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\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\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 /** Outputs the current sheet as a CSS string with markers for SSR */\n toString(): string {\n return outputSheet(this);\n }\n}\n","import { compile, Element, Middleware, middleware, prefixer, RULESET, stringify } from 'stylis';\nimport { Stringifier } from '../types';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from './empties';\nimport throwStyledError from './error';\nimport { phash, SEED } from './hash';\n\nconst COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\nconst COMPLEX_SELECTOR_PREFIX = [':', '[', '.', '#'];\n\nexport type ICreateStylisInstance = {\n options?: { namespace?: string; prefix?: boolean };\n plugins?: Middleware[];\n};\n\n/**\n * Serialize stylis output as an array of css strings. It is important that rules are\n * separated when using CSSOM injection.\n */\nfunction serialize(children: Element[], callback: Middleware): string[] {\n return children.map((c, i) => callback(c, i, children, callback)).filter(Boolean) as string[];\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: Element[], namespace: String): 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)) {\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 Middleware[],\n }: ICreateStylisInstance = EMPTY_OBJECT as object\n) {\n let _componentId: string;\n let _selector: string;\n let _selectorRegexp: RegExp;\n let _consecutiveSelfRefRegExp: RegExp;\n\n const selfReferenceReplacer: Parameters[1] = (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.includes(string[_selector.length]) : true) && // 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/v4.0.2#abstract-syntax-structure\n */\n const selfReferenceReplacementPlugin: Middleware = element => {\n if (element.type === RULESET && element.value.includes('&')) {\n const props = element.props as string[];\n props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);\n }\n };\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 let flatCSS = css.replace(COMMENT_REGEX, '');\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 const middlewares = plugins.slice();\n\n /**\n * Enables automatic vendor-prefixing for styles.\n */\n if (options.prefix || options.prefix === undefined) {\n middlewares.unshift(prefixer);\n }\n\n middlewares.push(selfReferenceReplacementPlugin, stringify);\n let compiled = compile(prefix || selector ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS);\n\n if (options.namespace) {\n compiled = recursivelySetNamepace(compiled, options.namespace);\n }\n return serialize(compiled, middleware(middlewares));\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 StyleSheet from '../sheet';\nimport { ShouldForwardProp, Stringifier } from '../types';\nimport createStylisInstance from '../utils/stylis';\n\nexport type IStyleSheetContext = {\n shouldForwardProp?: ShouldForwardProp<'web'>;\n styleSheet?: StyleSheet;\n};\nexport const StyleSheetContext = React.createContext({\n shouldForwardProp: undefined,\n styleSheet: undefined,\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 const mainSheet: StyleSheet = new StyleSheet();\nexport const mainStylis: Stringifier = createStylisInstance();\n\nexport function useShouldForwardProp() {\n return useContext(StyleSheetContext).shouldForwardProp;\n}\n\nexport function useStyleSheet(): StyleSheet {\n return useContext(StyleSheetContext).styleSheet || mainSheet;\n}\n\nexport function useStylis(): Stringifier {\n return useContext(StylisContext) || mainStylis;\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?: 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 disableVendorPrefixes?: boolean;\n /**\n * Provide an optional selector to be prepended to all generated style rules.\n */\n namespace?: string;\n /**\n * Create and provide your own `StyleSheet` if necessary for advanced SSR scenarios.\n */\n sheet?: 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?: 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?: stylis.Middleware[];\n /**\n * Provide an alternate DOM node to host generated styles; useful for iframes.\n */\n target?: HTMLElement;\n}>;\n\nexport function StyleSheetManager(props: IStyleSheetManager): JSX.Element {\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 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: { namespace: props.namespace, prefix: !props.disableVendorPrefixes },\n plugins,\n }),\n [props.disableVendorPrefixes, props.namespace, 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","import StyleSheet from '../sheet';\nimport { Keyframes as KeyframesType, Stringifier } from '../types';\nimport styledError from '../utils/error';\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\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 toString = (): void => {\n throw styledError(12, String(this.name));\n };\n\n getName(stylisInstance: Stringifier = mainStylis): string {\n return this.name + stylisInstance.hash;\n }\n}\n","import 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) {\n // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133\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","/**\n * inlined version of\n * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js\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 */\nexport default function hyphenateStyleName(string: string) {\n return uppercaseCheck.test(string) && !string.startsWith('--')\n ? string.replace(uppercasePattern, prefixAndLowerCase).replace(msPattern, '-ms-')\n : string;\n}\n","export default function isFunction(test: any) {\n return typeof test === 'function';\n}\n","export default function isStatelessFunction(test: any) {\n return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);\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 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, prevKey?: string): string[] => {\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: Interpolation,\n executionContext?: ExecutionContext & Props,\n styleSheet?: StyleSheet,\n stylisInstance?: Stringifier\n): RuleSet {\n if (Array.isArray(chunk)) {\n const ruleSet: 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.length === 0) continue;\n\n 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 as unknown as IStyledComponent<'web', 'div', any>).styledComponentId}`];\n }\n\n /* Either execute or defer the function */\n if (isFunction(chunk)) {\n if (isStatelessFunction(chunk) && executionContext) {\n const chunkFn = chunk as (props: {}) => Interpolation;\n const result = chunkFn(executionContext);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n typeof result === 'object' &&\n !Array.isArray(result) &&\n !(result instanceof Keyframes) &&\n !isPlainObject(result) &&\n result !== null\n ) {\n console.error(\n `${getComponentName(\n chunkFn as AnyComponent\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 {\n return [chunk as unknown as IStyledComponent<'web', 'div', any>];\n }\n }\n\n if (chunk instanceof Keyframes) {\n if (styleSheet) {\n chunk.inject(styleSheet, stylisInstance);\n return [chunk.getName(stylisInstance)];\n } else {\n return [chunk];\n }\n }\n\n /* Handle objects */\n return isPlainObject(chunk) ? objToCssArray(chunk as StyledObject) : [chunk.toString()];\n}\n","import { RuleSet } from '../types';\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\n\nexport default function isStaticRules(rules: RuleSet) {\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","import { SC_VERSION } from '../constants';\nimport StyleSheet from '../sheet';\nimport { 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 baseStyle: ComponentStyle | null | undefined;\n componentId: string;\n isStatic: boolean;\n names: string[];\n rules: RuleSet;\n staticRulesId: string;\n\n constructor(rules: RuleSet, componentId: string, baseStyle?: ComponentStyle) {\n this.names = [];\n this.rules = rules;\n this.staticRulesId = '';\n this.isStatic =\n 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(\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ): string {\n const { componentId } = this;\n\n this.names.length = 0;\n\n if (this.baseStyle) {\n this.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 this.names.push(this.staticRulesId);\n } else {\n const cssStatic = (\n flatten(this.rules, executionContext, styleSheet, stylis) as string[]\n ).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 styleSheet.insertRules(componentId, name, cssStaticFormatted);\n }\n\n this.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);\n } else if (partRule) {\n const partChunk = flatten(partRule, executionContext, styleSheet, stylis) as\n | string\n | string[];\n const partString = Array.isArray(partChunk) ? partChunk.join('') : partChunk;\n dynamicHash = phash(dynamicHash, partString);\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 this.names.push(name);\n }\n }\n\n return this.names.join(' ');\n }\n}\n","import React, { useContext, useMemo } from 'react';\nimport styledError from '../utils/error';\nimport isFunction from '../utils/isFunction';\n\n/**\n * Override DefaultTheme to get accurate typings for your project.\n *\n * ```\n * // create styled-components.d.ts in your project source\n * // if it isn't being picked up, check tsconfig compilerOptions.types\n * import type { CSSProp } from \"styled-components\";\n * import Theme from './theme';\n *\n * type ThemeType = typeof Theme;\n *\n * declare module \"styled-components\" {\n * export interface DefaultTheme extends ThemeType {}\n * }\n *\n * declare module \"react\" {\n * interface DOMAttributes {\n * css?: CSSProp;\n * }\n * }\n * ```\n */\nexport interface DefaultTheme {\n [key: string]: any;\n}\n\ntype ThemeFn = (outerTheme?: DefaultTheme) => DefaultTheme;\ntype ThemeArgument = DefaultTheme | ThemeFn;\n\ntype Props = {\n children?: React.ReactNode;\n theme: ThemeArgument;\n};\n\nexport const ThemeContext = React.createContext(undefined);\n\nexport const ThemeConsumer = ThemeContext.Consumer;\n\nfunction mergeTheme(theme: ThemeArgument, outerTheme?: DefaultTheme): DefaultTheme {\n if (!theme) {\n throw styledError(14);\n }\n\n if (isFunction(theme)) {\n const themeFn = theme as ThemeFn;\n const mergedTheme = themeFn(outerTheme);\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (mergedTheme === null || Array.isArray(mergedTheme) || typeof mergedTheme !== 'object')\n ) {\n throw styledError(7);\n }\n\n return mergedTheme;\n }\n\n if (Array.isArray(theme) || typeof theme !== 'object') {\n throw styledError(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): JSX.Element | null {\n const outerTheme = useContext(ThemeContext);\n const themeContext = useMemo(\n () => mergeTheme(props.theme, outerTheme),\n [props.theme, outerTheme]\n );\n\n if (!props.children) {\n return null;\n }\n\n return {props.children};\n}\n","import React, { createElement, Ref, useContext, useDebugValue } from 'react';\nimport { SC_VERSION } from '../constants';\nimport type {\n AnyComponent,\n AttrsArg,\n Dict,\n ExecutionContext,\n ExecutionProps,\n IStyledComponent,\n IStyledComponentFactory,\n IStyledStatics,\n OmitNever,\n RuleSet,\n StyledOptions,\n WebTarget,\n} from '../types';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport domElements from '../utils/domElements';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\nimport escape from '../utils/escape';\nimport generateComponentId from '../utils/generateComponentId';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport hoist from '../utils/hoist';\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 { useShouldForwardProp, useStyleSheet, useStylis } from './StyleSheetManager';\nimport { ThemeContext } from './ThemeProvider';\n\nconst identifiers: { [key: string]: number } = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(displayName?: string, parentComponentId?: string): 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 useInjectedStyle(\n componentStyle: ComponentStyle,\n isStatic: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: ReturnType\n) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n\n const className = componentStyle.generateAndInjectStyles(\n isStatic ? EMPTY_OBJECT : resolvedAttrs,\n styleSheet,\n stylis\n );\n\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<'web', Target, Props>,\n props: Props,\n forwardedRef: Ref,\n isStatic: boolean\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n defaultProps,\n foldedComponentIds,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n const defaultShouldForwardProp = useShouldForwardProp();\n const shouldForwardProp = forwardedComponent.shouldForwardProp || defaultShouldForwardProp;\n\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) || EMPTY_OBJECT;\n\n const context = componentAttrs.reduce<\n ExecutionContext & Props & { class?: string; className?: string; ref?: React.Ref }\n >(\n (p, attrDef) => {\n const resolvedAttrDef = typeof attrDef === 'function' ? attrDef(p) : attrDef;\n\n for (const key in resolvedAttrDef) {\n // @ts-expect-error bad types\n p[key] =\n key === 'className'\n ? joinStrings(p[key], resolvedAttrDef[key])\n : key === 'style'\n ? { ...p[key], ...resolvedAttrDef[key] }\n : resolvedAttrDef[key];\n }\n\n return p;\n },\n { ...props, theme }\n );\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 const elementToBeCreated: WebTarget = context.as || target;\n const isTargetTag = isTag(elementToBeCreated);\n const propsForElement: Dict = {};\n\n for (const key in context) {\n // @ts-expect-error for..in iterates strings instead of keyof\n if (context[key] === undefined) {\n // Omit undefined values from props passed to wrapped element.\n // This enables using .attrs() to remove props, for example.\n } else if (key[0] === '$' || key === 'as' || key === 'theme') {\n // Omit transient props and execution props.\n } else if (key === 'forwardedAs') {\n propsForElement.as = context.forwardedAs;\n } else if (!shouldForwardProp || shouldForwardProp(key, elementToBeCreated)) {\n // @ts-expect-error for..in iterates strings instead of keyof\n propsForElement[key] = context[key];\n }\n }\n\n propsForElement[\n // handle custom elements which React doesn't properly alias\n isTargetTag &&\n domElements.indexOf(elementToBeCreated as Extract) === -1\n ? 'class'\n : 'className'\n ] = foldedComponentIds\n .concat(\n styledComponentId,\n generatedClassName !== styledComponentId ? generatedClassName : '',\n context.className || ''\n )\n .filter(Boolean)\n .join(' ');\n\n propsForElement.ref = refToForward;\n\n return createElement(elementToBeCreated, propsForElement);\n}\n\nfunction createStyledComponent<\n Target extends WebTarget,\n OuterProps extends object,\n Statics extends object = object\n>(\n target: Target,\n options: StyledOptions<'web', OuterProps>,\n rules: RuleSet\n): ReturnType> {\n const isTargetStyledComp = isStyledComponent(target);\n const styledComponentTarget = target as IStyledComponent<'web', Target, OuterProps>;\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 && styledComponentTarget.attrs\n ? styledComponentTarget.attrs\n .concat(attrs as unknown as AttrsArg[])\n .filter(Boolean)\n : (attrs as AttrsArg[]);\n\n let { shouldForwardProp } = options;\n\n if (isTargetStyledComp && styledComponentTarget.shouldForwardProp) {\n const shouldForwardPropFn = styledComponentTarget.shouldForwardProp;\n\n if (options.shouldForwardProp) {\n const passedShouldForwardPropFn = options.shouldForwardProp;\n\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, elementToBeCreated) =>\n shouldForwardPropFn(prop, elementToBeCreated) &&\n passedShouldForwardPropFn(prop, elementToBeCreated);\n } else {\n shouldForwardProp = shouldForwardPropFn;\n }\n }\n\n const componentStyle = new ComponentStyle(\n rules,\n styledComponentId,\n isTargetStyledComp ? (styledComponentTarget.componentStyle as 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 function forwardRef(props: ExecutionProps & OuterProps, ref: Ref) {\n return useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);\n }\n\n forwardRef.displayName = displayName;\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 = React.forwardRef(forwardRef) as unknown as IStyledComponent<\n 'web',\n typeof target,\n OuterProps\n > &\n Statics;\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 ? styledComponentTarget.foldedComponentIds.concat(styledComponentTarget.styledComponentId)\n : (EMPTY_ARRAY as string[]);\n\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n WrappedStyledComponent.target = isTargetStyledComp ? styledComponentTarget.target : target;\n\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n this._foldedDefaultProps = isTargetStyledComp\n ? merge({}, styledComponentTarget.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 // 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 an assignment. If using strict mode, attempting that will cause an error. If not using strict\n // mode, attempting that will be silently ignored.\n // However, we can still explicitly shadow the prototype's \"toString\" property by defining a new \"toString\" property on this object.\n Object.defineProperty(WrappedStyledComponent, 'toString', { value: () => `.${WrappedStyledComponent.styledComponentId}` });\n\n if (isCompositeComponent) {\n const compositeComponentTarget = target as AnyComponent;\n\n hoist(\n WrappedStyledComponent,\n compositeComponentTarget,\n {\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 } as { [key in keyof OmitNever>]: true }\n );\n }\n\n return WrappedStyledComponent;\n}\n\nexport default createStyledComponent;\n","import { Interpolation } from '../types';\n\nexport default function interleave(\n strings: readonly string[],\n interpolations: Interpolation[]\n): Interpolation[] {\n const result: Interpolation[] = [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","import { Interpolation, RuleSet, StyledObject, StyleFunction, Styles } from '../types';\nimport { EMPTY_ARRAY } from '../utils/empties';\nimport flatten from '../utils/flatten';\nimport interleave from '../utils/interleave';\nimport isFunction from '../utils/isFunction';\nimport isPlainObject from '../utils/isPlainObject';\n\n/**\n * Used when flattening object styles to determine if we should\n * expand an array of styles.\n */\nconst addTag = >(arg: T): T & { isCss: true } =>\n Object.assign(arg, { isCss: true } as const);\n\nfunction css(\n styles: Styles,\n ...interpolations: Interpolation[]\n): RuleSet;\nfunction css(\n styles: Styles,\n ...interpolations: Interpolation[]\n): RuleSet;\nfunction css(\n styles: Styles,\n ...interpolations: Interpolation[]\n): RuleSet {\n if (isFunction(styles) || isPlainObject(styles)) {\n const styleFunctionOrObject = styles as StyleFunction | StyledObject;\n\n return addTag(\n flatten(\n interleave(EMPTY_ARRAY, [\n styleFunctionOrObject,\n ...interpolations,\n ])\n )\n );\n }\n\n const styleStringArray = styles as TemplateStringsArray;\n\n if (\n interpolations.length === 0 &&\n styleStringArray.length === 1 &&\n typeof styleStringArray[0] === 'string'\n ) {\n return flatten(styleStringArray);\n }\n\n return addTag(flatten(interleave(styleStringArray, interpolations)));\n}\n\nexport default css;\n","import React from 'react';\nimport {\n Attrs,\n AttrsArg,\n ExecutionProps,\n Interpolation,\n IStyledComponent,\n IStyledComponentFactory,\n KnownTarget,\n Runtime,\n StyledOptions,\n StyledTarget,\n Styles,\n} from '../types';\nimport { EMPTY_OBJECT } from '../utils/empties';\nimport styledError from '../utils/error';\nimport css from './css';\n\n/**\n * for types a and b, if b shares a field with a, mark a's field as optional\n */\ntype OptionalIntersection = {\n [K in Extract]?: A[K];\n};\n\ntype AttrsResult = T extends (...args: any) => infer P ? P : T;\n\ntype ExtractAttrsTarget<\n R extends Runtime,\n P extends ExecutionProps,\n DefaultTarget extends StyledTarget\n> = P['as'] extends KnownTarget ? P['as'] : DefaultTarget;\n\n/**\n * If attrs type is a function (no type provided, inferring from usage), extract the return value\n * and merge it with the existing type to hole-punch any required fields that are satisfied as\n * a result of running attrs. Otherwise if we have a definite type then union the base props\n * with the passed attr type to capture any intended overrides.\n */\ntype PropsSatisfiedByAttrs<\n T extends Attrs,\n Props extends object,\n Result extends ExecutionProps = AttrsResult\n> = Omit &\n OptionalIntersection &\n Partial>;\n\nexport interface Styled<\n R extends Runtime,\n Target extends StyledTarget,\n OuterProps extends object = object,\n OuterStatics extends object = object,\n RuntimeInjectedProps extends ExecutionProps = object\n> {\n (\n initialStyles: Styles,\n ...interpolations: Interpolation[]\n ): // @ts-expect-error KnownTarget is a subset of StyledTarget\n IStyledComponent, OuterProps & Props> &\n OuterStatics &\n Statics;\n\n attrs: <\n T extends Attrs,\n TResult extends ExecutionProps = AttrsResult,\n // @ts-expect-error KnownTarget is a subset of StyledTarget\n TTarget extends StyledTarget = ExtractAttrsTarget\n >(\n attrs: AttrsArg infer P ? OuterProps & P : OuterProps & T>\n ) => Styled<\n R,\n TTarget,\n PropsSatisfiedByAttrs,\n OuterStatics,\n Omit & TResult\n >;\n\n withConfig: (config: StyledOptions) => Styled;\n}\n\nexport default function constructWithOptions<\n R extends Runtime,\n Target extends StyledTarget,\n OuterProps extends object = Target extends KnownTarget\n ? React.ComponentPropsWithRef\n : object,\n OuterStatics extends object = object\n>(\n componentConstructor: IStyledComponentFactory,\n tag: Target,\n options: StyledOptions = EMPTY_OBJECT\n): Styled {\n // We trust that the tag is a valid component as long as it isn't falsish\n // Typically the tag here is a string or function (i.e. class or pure function component)\n // However a component may also be an object if it uses another utility, e.g. React.memo\n // React will output an appropriate warning however if the `tag` isn't valid\n if (!tag) {\n throw styledError(1, tag);\n }\n\n /* This is callable directly as a template function */\n const templateFunction = (\n initialStyles: Styles,\n ...interpolations: Interpolation[]\n ) =>\n componentConstructor(\n tag,\n options as StyledOptions,\n css(initialStyles, ...interpolations)\n );\n\n /* Modify/inject new props at runtime */\n templateFunction.attrs = (\n attrs: AttrsArg infer P ? OuterProps & P : OuterProps & T>\n ) =>\n constructWithOptions, OuterStatics>(\n componentConstructor as unknown as IStyledComponentFactory<\n R,\n Target,\n PropsSatisfiedByAttrs,\n OuterStatics\n >,\n tag,\n {\n ...options,\n attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean),\n }\n );\n\n /**\n * If config methods are called, wrap up a new template function and merge options */\n templateFunction.withConfig = (config: StyledOptions) =>\n constructWithOptions(componentConstructor, tag, {\n ...options,\n ...config,\n });\n\n return templateFunction;\n}\n","import createStyledComponent from '../models/StyledComponent';\nimport { WebTarget } from '../types';\nimport domElements from '../utils/domElements';\nimport constructWithOptions, { Styled } from './constructWithOptions';\n\nconst baseStyled = (tag: Target) =>\n constructWithOptions<'web', Target>(createStyledComponent, tag);\n\nconst styled = baseStyled as typeof baseStyled & {\n [E in keyof JSX.IntrinsicElements]: Styled<'web', E, JSX.IntrinsicElements[E]>;\n};\n\n// Shorthands for all valid HTML Elements\ndomElements.forEach(domElement => {\n // @ts-expect-error someday they'll handle imperative assignment properly\n styled[domElement] = baseStyled(domElement);\n});\n\nexport default styled;\n","import StyleSheet from '../sheet';\nimport { ExecutionContext, FlattenerResult, RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\n\nexport default class GlobalStyle {\n componentId: string;\n isStatic: boolean;\n rules: FlattenerResult;\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: ExecutionContext & Props,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ): void {\n const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis) as string[];\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): void {\n styleSheet.clearRules(this.componentId + instance);\n }\n\n renderStyles(\n instance: number,\n executionContext: ExecutionContext & Props,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ): void {\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","import React from 'react';\nimport { STATIC_EXECUTION_CONTEXT } from '../constants';\nimport GlobalStyle from '../models/GlobalStyle';\nimport { useStyleSheet, useStylis } from '../models/StyleSheetManager';\nimport { DefaultTheme, ThemeContext } from '../models/ThemeProvider';\nimport StyleSheet from '../sheet';\nimport { ExecutionContext, ExecutionProps, Interpolation, Stringifier, Styles } from '../types';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport determineTheme from '../utils/determineTheme';\nimport generateComponentId from '../utils/generateComponentId';\nimport css from './css';\n\nexport default function createGlobalStyle(\n strings: Styles,\n ...interpolations: Array>\n) {\n const rules = css(strings, ...interpolations);\n const styledComponentId = `sc-global-${generateComponentId(JSON.stringify(rules))}`;\n const globalStyle = new GlobalStyle(rules, styledComponentId);\n\n if (process.env.NODE_ENV !== 'production') {\n checkDynamicCreation(styledComponentId);\n }\n\n const GlobalStyleComponent: React.ComponentType = props => {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n const theme = React.useContext(ThemeContext);\n const instanceRef = React.useRef(styleSheet.allocateGSInstance(styledComponentId));\n\n const instance = instanceRef.current;\n\n if (process.env.NODE_ENV !== 'production' && React.Children.count(props.children)) {\n console.warn(\n `The global style component ${styledComponentId} was given child JSX. createGlobalStyle does not render children.`\n );\n }\n\n if (\n process.env.NODE_ENV !== 'production' &&\n rules.some(rule => typeof rule === 'string' && rule.indexOf('@import') !== -1)\n ) {\n console.warn(\n `Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical meta tag to the stylesheet, or simply embedding it manually in your index.html section for a simpler app.`\n );\n }\n\n if (styleSheet.server) {\n renderStyles(instance, props, styleSheet, theme, stylis);\n }\n\n if (!__SERVER__) {\n // @ts-expect-error still using React 17 types for the time being\n (React.useInsertionEffect || React.useLayoutEffect)(() => {\n if (!styleSheet.server) {\n renderStyles(instance, props, styleSheet, theme, stylis);\n return () => globalStyle.removeStyles(instance, styleSheet);\n }\n }, [instance, props, styleSheet, theme, stylis]);\n }\n\n return null;\n };\n\n function renderStyles(\n instance: number,\n props: ExecutionProps,\n styleSheet: StyleSheet,\n theme: DefaultTheme | undefined,\n stylis: Stringifier\n ) {\n if (globalStyle.isStatic) {\n globalStyle.renderStyles(\n instance,\n STATIC_EXECUTION_CONTEXT as unknown as ExecutionContext & Props,\n styleSheet,\n stylis\n );\n } else {\n const context = {\n ...props,\n theme: determineTheme(props, theme, GlobalStyleComponent.defaultProps),\n } as ExecutionContext & Props;\n\n globalStyle.renderStyles(instance, context, styleSheet, stylis);\n }\n }\n\n return React.memo(GlobalStyleComponent);\n}\n","import Keyframes from '../models/Keyframes';\nimport { Interpolation, Styles } from '../types';\nimport generateComponentId from '../utils/generateComponentId';\nimport css from './css';\n\nexport default function keyframes(\n strings: Styles,\n ...interpolations: Array>\n): Keyframes {\n /* Warning if you've used keyframes on React Native */\n if (\n process.env.NODE_ENV !== 'production' &&\n typeof navigator !== 'undefined' &&\n navigator.product === 'ReactNative'\n ) {\n console.warn(\n '`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.'\n );\n }\n\n const rules = (css(strings, ...interpolations) as string[]).join('');\n const name = generateComponentId(rules);\n return new Keyframes(name, rules);\n}\n","import React from 'react';\nimport { ThemeContext } from '../models/ThemeProvider';\nimport { AnyComponent, ExecutionProps } from '../types';\nimport determineTheme from '../utils/determineTheme';\nimport getComponentName from '../utils/getComponentName';\nimport hoist from '../utils/hoist';\n\nexport default function withTheme(Component: T) {\n const WithTheme = React.forwardRef>(\n (props, ref) => {\n const theme = React.useContext(ThemeContext);\n const themeProp = determineTheme(props, theme, Component.defaultProps);\n\n if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {\n console.warn(\n `[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"${getComponentName(\n Component\n )}\"`\n );\n }\n\n return ;\n }\n );\n\n WithTheme.displayName = `WithTheme(${getComponentName(Component)})`;\n\n return hoist(WithTheme, Component);\n}\n","import { useContext } from 'react';\nimport { DefaultTheme, ThemeContext } from '../models/ThemeProvider';\n\nconst useTheme = (): DefaultTheme | undefined => useContext(ThemeContext);\n\nexport default useTheme;\n","import React from 'react';\nimport type * as streamInternal from 'stream';\nimport { Readable } from 'stream';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport StyleSheet from '../sheet';\nimport styledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport { StyleSheetManager } from './StyleSheetManager';\n\ndeclare const __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n instance: StyleSheet;\n sealed: boolean;\n\n constructor() {\n this.instance = new StyleSheet({ isServer: true });\n this.sealed = false;\n }\n\n _emitSheetCSS = (): string => {\n const css = this.instance.toString();\n const nonce = getNonce();\n const attrs = [\n nonce && `nonce=\"${nonce}\"`,\n `${SC_ATTR}=\"true\"`,\n `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`,\n ];\n const htmlAttr = attrs.filter(Boolean).join(' ');\n\n return ``;\n };\n\n collectStyles(children: any): JSX.Element {\n if (this.sealed) {\n throw styledError(2);\n }\n\n return {children};\n }\n\n getStyleTags = (): string => {\n if (this.sealed) {\n throw styledError(2);\n }\n\n return this._emitSheetCSS();\n };\n\n getStyleElement = () => {\n if (this.sealed) {\n throw styledError(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 as 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 [