styled-components 6.4.0-prerelease.3 → 6.4.0-prerelease.5

package/README.md

@@ -7,7 +7,9 @@
 <br />
 
 <div align="center">
-  <strong>Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅</strong>
+  <strong>Fast, expressive styling for React.</strong>
+  <br />
+  Server components, client components, streaming SSR, React Native—one API.
   <br />
   <br />
   <a href="https://www.npmjs.com/package/styled-components"><img src="https://img.shields.io/npm/dm/styled-components.svg" alt="npm downloads"></a>
@@ -16,19 +18,22 @@
 
 ---
 
-`styled-components` lets you write actual CSS in your JavaScript using tagged template literals. It removes the mapping between components and styles, making components the styling primitive.
+Style React components with real CSS, scoped automatically and delivered only when needed. No class name juggling, no separate files, no build step required.
 
-- Built-in TypeScript types (no `@types` package needed)
-- React Server Components (RSC) support via automatic runtime detection
-- React Native support
-- Compatible with React 16.8+, including React 19
+- **Works everywhere React runs.** Server components, client components, streaming SSR, and React Native—same API, automatic runtime detection.
+- **Full CSS, no compromises.** Media queries, pseudo-selectors, nesting, keyframes, global styles. If CSS supports it, so does styled-components.
+- **TypeScript-first.** Built-in types ship with the package. Props flow through to your styles with full inference—no `@types` install, no manual generics.
+- **<13kB gzipped.** Small enough to disappear in your bundle. No build plugin required.
 
-## Installation
+## Install
 
 ```sh
 npm install styled-components
 ```
 
+<details>
+<summary>pnpm / yarn</summary>
+
 ```sh
 pnpm add styled-components
 ```
@@ -37,55 +42,228 @@ pnpm add styled-components
 yarn add styled-components
 ```
 
-## Example
+</details>
+
+## Quick examples
+
+### Dynamic props
+
+Vary styles based on component props. Prefix transient props with `$` to keep them off the DOM.
 
-```jsx
+```tsx
 import styled from 'styled-components';
 
-const Title = styled.h1`
-  font-size: 1.5em;
-  text-align: center;
-  color: palevioletred;
+const Button = styled.button<{ $primary?: boolean }>`
+  background: ${props => (props.$primary ? 'palevioletred' : 'white')};
+  color: ${props => (props.$primary ? 'white' : 'palevioletred')};
+  font-size: 1em;
+  padding: 0.25em 1em;
+  border: 2px solid palevioletred;
+  border-radius: 3px;
 `;
 
-const Wrapper = styled.section`
-  padding: 4em;
-  background: papayawhip;
+<Button>Normal</Button>
+<Button $primary>Primary</Button>
+```
+
+### Extending styles
+
+Build variants on top of existing styled components.
+
+```tsx
+const TomatoButton = styled(Button)`
+  background: tomato;
+  color: white;
+  border-color: tomato;
 `;
+```
+
+### Polymorphic `as` prop
+
+Swap the rendered element without changing styles.
 
-function MyUI() {
-  return (
-    <Wrapper>
-      <Title>Hello World, this is my first styled component!</Title>
-    </Wrapper>
-  );
-}
+```tsx
+// Renders a <a> tag with Button styles
+<Button as="a" href="/home">Link Button</Button>
 ```
 
-Style objects are also supported:
+### Pseudos and nesting
+
+Use `&` to reference the component's generated class name—works with pseudo-classes, pseudo-elements, and nested selectors.
+
+```tsx
+const Input = styled.input`
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0.5em;
+
+  &:focus {
+    border-color: palevioletred;
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #aaa;
+  }
+`;
+```
+
+### Animations
+
+Define `@keyframes` once, reference them across components. Names are scoped automatically.
+
+```tsx
+import styled, { keyframes } from 'styled-components';
+
+const rotate = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+const Spinner = styled.div`
+  animation: ${rotate} 1s linear infinite;
+  width: 40px;
+  height: 40px;
+  border: 3px solid palevioletred;
+  border-top-color: transparent;
+  border-radius: 50%;
+`;
+```
+
+### Theming
+
+Share design tokens across your app via React context. Every styled component receives `props.theme`.
+
+```tsx
+import styled, { ThemeProvider } from 'styled-components';
+
+const theme = {
+  fg: 'palevioletred',
+  bg: 'white',
+};
+
+const Card = styled.div`
+  background: ${props => props.theme.bg};
+  color: ${props => props.theme.fg};
+  padding: 2em;
+`;
+
+<ThemeProvider theme={theme}>
+  <Card>Themed content</Card>
+</ThemeProvider>
+```
+
+### RSC-compatible themes
+
+`createTheme` turns your tokens into CSS custom properties. Class name hashes stay stable across theme variants—no hydration mismatch when switching light/dark.
 
-```jsx
-const Button = styled.button({
-  color: 'grey',
+```tsx
+import styled, { createTheme, ThemeProvider } from 'styled-components';
+
+const { theme, GlobalStyle: ThemeVars } = createTheme({
+  colors: {
+    fg: 'palevioletred',
+    bg: 'white',
+  },
+  space: {
+    md: '1rem',
+  },
 });
+
+const Card = styled.div`
+  color: ${theme.colors.fg};       /* var(--sc-colors-fg, palevioletred) */
+  background: ${theme.colors.bg};
+  padding: ${theme.space.md};
+`;
+
+// Render <ThemeVars /> at the root to emit the CSS variable declarations
+// Pass the theme to ThemeProvider for stable hashes
+<ThemeProvider theme={theme}>
+  <ThemeVars />
+  <Card>Token-driven content</Card>
+</ThemeProvider>
 ```
 
-## [Docs](https://www.styled-components.com/docs)
+### Shared styles with `css`
+
+Extract reusable style blocks to share across components or apply conditionally.
 
-See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs) for full usage information.
+```tsx
+import styled, { css } from 'styled-components';
 
-- [Getting started](https://www.styled-components.com/docs/basics)
-- [API Reference](https://styled-components.com/docs/api)
-- [Theming](https://www.styled-components.com/docs/advanced#theming)
-- [Server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)
-- [React Server Components](https://www.styled-components.com/docs/advanced#react-server-components)
-- [React Native](https://www.styled-components.com/docs/basics#react-native)
+const truncate = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
 
-## Contributing
+const Label = styled.span`
+  ${truncate}
+  max-width: 200px;
+`;
+```
 
-See our [contributing and community guidelines](./CONTRIBUTING.md) and [Code of Conduct](./CODE_OF_CONDUCT.md).
+### Styling third-party components
 
-Check out [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) for community libraries, projects, and examples.
+Wrap any component that accepts a `className` prop.
+
+```tsx
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)`
+  color: palevioletred;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+```
+
+### Global styles
+
+Inject app-wide CSS like resets and font faces. Supports theming and dynamic updates.
+
+```tsx
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+  }
+`;
+
+// Render <GlobalStyle /> at the root of your app
+```
+
+### Attrs
+
+Set default or static HTML attributes so consumers don't have to.
+
+```tsx
+const PasswordInput = styled.input.attrs({
+  type: 'password',
+  placeholder: 'Enter password',
+})`
+  border: 1px solid #ccc;
+  padding: 0.5em;
+`;
+```
+
+## Documentation
+
+- [Getting started](https://styled-components.com/docs/basics)
+- [API reference](https://styled-components.com/docs/api)
+- [Server-side rendering](https://styled-components.com/docs/advanced#server-side-rendering)
+- [React Server Components](https://styled-components.com/docs/advanced#react-server-components)
+- [Theming](https://styled-components.com/docs/advanced#theming)
+- [React Native](https://styled-components.com/docs/basics#react-native)
+
+## Community
+
+[Contributing guidelines](./CONTRIBUTING.md) | [Code of Conduct](./CODE_OF_CONDUCT.md) | [awesome-styled-components](https://github.com/styled-components/awesome-styled-components)
 
 ## Contributors
 
@@ -95,7 +273,7 @@ This project exists thanks to all the people who contribute.
 
 ## Backers
 
-Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/styled-components#backer)]
+Thank you to all our backers! [[Become a backer](https://opencollective.com/styled-components#backer)]
 
 <a href="https://opencollective.com/styled-components#backers" target="_blank"><img src="https://opencollective.com/styled-components/backers.svg?width=890"></a>
 
@@ -105,14 +283,10 @@ Support this project by becoming a sponsor. [[Become a sponsor](https://opencoll
 
 <a href="https://opencollective.com/styled-components#sponsors" target="_blank"><img src="https://opencollective.com/styled-components/sponsors.svg?width=890"></a>
 
-## License
-
-Licensed under the MIT License, Copyright © 2016-present styled-components contributors.
-
-See [LICENSE](./LICENSE) for more information.
-
 ## Acknowledgements
 
-This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.
+This project builds on earlier work by Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson, and Andrey Sitnik. Special thanks to [@okonet](https://github.com/okonet) for the logo.
+
+## License
 
-Special thanks to [@okonet](https://github.com/okonet) for the fantastic logo.
+Licensed under the MIT License, Copyright © 2016-present styled-components contributors. See [LICENSE](./LICENSE) for details.

package/dist/constructors/createTheme.d.ts

@@ -56,7 +56,7 @@ interface CreateThemeOptions {
     selector?: string;
 }
 /**
- * Create a theme contract that bridges `ThemeProvider` and CSS custom properties.
+ * Create a theme backed by CSS custom properties, bridging `ThemeProvider` and CSS variables.
  *
  * Returns an object with the same shape as the input theme, but every leaf value
  * is a `var(--prefix-*, fallback)` CSS string. Use these in styled component

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

@@ -1,2 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("@emotion/is-prop-valid"),n=require("react"),r=require("@emotion/unitless"),o=require("stylis");function s(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var a=/*#__PURE__*/s(t),c=/*#__PURE__*/s(n),u=/*#__PURE__*/s(r),l=/*#__PURE__*/i(o),d="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",p="active",h="data-styled-version",f="6.4.0-prerelease.3",m="/*!sc*/\n",y="undefined"!=typeof window&&"undefined"!=typeof document,v=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),g="sc-keyframes-",S={},_="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function w(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],r=[],o=1,s=e.length;o<s;o+=1)r.push(e[o]);return r.forEach(function(e){n=n.replace(/%[a-z]/,e)}),n}function b(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];return"production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(w.apply(void 0,e.__spreadArray([_[t]],n,!1)).trim())}var E=1<<30,C=new Map,N=new Map,A=1,P=function(e){if(C.has(e))return C.get(e);for(;N.has(A);)A++;var t=A++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>E))throw b(16,"".concat(t));return C.set(e,t),N.set(t,e),t},I=function(e,t){A=t+1,C.set(e,t),N.set(t,e)},O=/invalid hook call/i,x=new Set,R=function(t,n){if("production"!==process.env.NODE_ENV){var r=n?' with the id of "'.concat(n,'"'):"",o="The component ".concat(t).concat(r," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n",s=console.error;try{var i=!0;console.error=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];O.test(t)?(i=!1,x.delete(o)):s.apply(void 0,e.__spreadArray([t],n,!1))},"function"==typeof c.default.useState&&c.default.useState(null),i&&!x.has(o)&&(console.warn(o),x.add(o))}catch(e){O.test(e.message)&&x.delete(o)}finally{console.error=s}}},T=Object.freeze([]),D=Object.freeze({});function j(e,t,n){return void 0===n&&(n=D),e.theme!==n.theme&&e.theme||t||n.theme}var k=new Set(["a","abbr","address","area","article","aside","audio","b","bdi","bdo","blockquote","body","button","br","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","main","map","mark","menu","meter","nav","object","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","slot","small","span","strong","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","switch","symbol","text","textPath","tspan","use"]),M=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,V=/(^-|-$)/g;function G(e){return e.replace(M,"-").replace(V,"")}var F=/(a)(d)/gi,L=function(e){return String.fromCharCode(e+(e>25?39:97))};function z(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=L(t%52)+n;return(L(t%52)+n).replace(F,"$1-$2")}var B,$=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},q=function(e){return $(5381,e)};function Y(e){return z(q(e)>>>0)}function W(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function H(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var U="function"==typeof Symbol&&Symbol.for,J=U?Symbol.for("react.memo"):60115,X=U?Symbol.for("react.forward_ref"):60112,Z={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},K={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},Q={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},ee=((B={})[X]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},B[J]=Q,B);function te(e){return("type"in(t=e)&&t.type.$$typeof)===J?Q:"$$typeof"in e?ee[e.$$typeof]:Z;var t}var ne=Object.defineProperty,re=Object.getOwnPropertyNames,oe=Object.getOwnPropertySymbols,se=Object.getOwnPropertyDescriptor,ie=Object.getPrototypeOf,ae=Object.prototype;function ce(e,t,n){if("string"!=typeof t){if(ae){var r=ie(t);r&&r!==ae&&ce(e,r,n)}var o=re(t);oe&&(o=o.concat(oe(t)));for(var s=te(e),i=te(t),a=0;a<o.length;++a){var c=o[a];if(!(c in K||n&&n[c]||i&&c in i||s&&c in s)){var u=se(t,c);try{ne(e,c,u)}catch(e){}}}}return e}function ue(e){return"function"==typeof e}function le(e){return"object"==typeof e&&"styledComponentId"in e}function de(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function pe(e,t){return e.join(t||"")}function he(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function fe(e,t,n){if(void 0===n&&(n=!1),!n&&!he(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var r=0;r<t.length;r++)e[r]=fe(e[r],t[r]);else if(he(t))for(var r in t)e[r]=fe(e[r],t[r]);return e}function me(e,t){Object.defineProperty(e,"toString",{value:t})}var ye=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e,this._cGroup=0,this._cIndex=0}return e.prototype.indexOfGroup=function(e){if(e===this._cGroup)return this._cIndex;var t=this._cIndex;if(e>this._cGroup)for(var n=this._cGroup;n<e;n++)t+=this.groupSizes[n];else for(n=this._cGroup-1;n>=e;n--)t-=this.groupSizes[n];return this._cGroup=e,this._cIndex=t,t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)if((o<<=1)<0)throw b(16,"".concat(e));this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0}for(var i=this.indexOfGroup(e+1),a=0,c=(s=0,t.length);s<c;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++,a++);a>0&&this._cGroup>e&&(this._cIndex+=a)},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);t>0&&this._cGroup>e&&(this._cIndex-=t)}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+=this.tag.getRule(s)+m;return t},e}(),ve="style[".concat(d,"][").concat(h,'="').concat(f,'"]'),ge=new RegExp("^".concat(d,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Se=function(e){return"undefined"!=typeof ShadowRoot&&e instanceof ShadowRoot||"host"in e&&11===e.nodeType},_e=function(e){if(!e)return document;if(Se(e))return e;if("getRootNode"in e){var t=e.getRootNode();if(Se(t))return t}return document},we=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r)},be=function(e,t){for(var n,r=(null!==(n=t.textContent)&&void 0!==n?n:"").split(m),o=[],s=0,i=r.length;s<i;s++){var a=r[s].trim();if(a){var c=a.match(ge);if(c){var u=0|parseInt(c[1],10),l=c[2];0!==u&&(I(l,u),we(e,l,c[3]),e.getTag().insertRules(u,o)),o.length=0}else o.push(a)}}},Ee=function(e){for(var t=_e(e.options.target).querySelectorAll(ve),n=0,r=t.length;n<r;n++){var o=t[n];o&&o.getAttribute(d)!==p&&(be(e,o),o.parentNode&&o.parentNode.removeChild(o))}},Ce=!1;function Ne(){if(!1!==Ce)return Ce;if("undefined"!=typeof document){var e=document.head.querySelector('meta[property="csp-nonce"]');if(e)return Ce=e.nonce||e.getAttribute("content")||void 0;var t=document.head.querySelector('meta[name="sc-nonce"]');if(t)return Ce=t.getAttribute("content")||void 0}return Ce="undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0}var Ae=function(e,t){var n=document.head,r=e||n,o=document.createElement("style"),s=function(e){var t=Array.from(e.querySelectorAll("style[".concat(d,"]")));return t[t.length-1]}(r),i=void 0!==s?s.nextSibling:null;o.setAttribute(d,p),o.setAttribute(h,f);var a=t||Ne();return a&&o.setAttribute("nonce",a),r.insertBefore(o,i),o},Pe=function(){function e(e,t){this.element=Ae(e,t),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){var t;if(e.sheet)return e.sheet;for(var n=null!==(t=e.getRootNode().styleSheets)&&void 0!==t?t:document.styleSheets,r=0,o=n.length;r<o;r++){var s=n[r];if(s.ownerNode===e)return s}throw b(17)}(this.element),this.length=0}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),Ie=function(){function e(e,t){this.element=Ae(e,t),this.nodes=this.element.childNodes,this.length=0}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,!0}return!1},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),Oe=function(){function e(e){this.rules=[],this.length=0}return e.prototype.insertRule=function(e,t){return e<=this.length&&(e===this.length?this.rules.push(t):this.rules.splice(e,0,t),this.length++,!0)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),xe=y,Re={isServer:!y,useCSSOMInjection:!v},Te=function(){function t(t,n,r){void 0===t&&(t=D),void 0===n&&(n={});var o=this;this.options=e.__assign(e.__assign({},Re),t),this.gs=n,this.keyframeIds=new Set,this.names=new Map(r),this.server=!!t.isServer,!this.server&&y&&xe&&(xe=!1,Ee(this)),me(this,function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=function(n){var o=function(e){return N.get(e)}(n);if(void 0===o)return"continue";var s=e.names.get(o);if(void 0===s||!s.size)return"continue";var i=t.getGroup(n);if(0===i.length)return"continue";var a=d+".g"+n+'[id="'+o+'"]',c="";s.forEach(function(e){e.length>0&&(c+=e+",")}),r+=i+a+'{content:"'+c+'"}'+m},s=0;s<n;s++)o(s);return r}(o)})}return t.registerId=function(e){return P(e)},t.prototype.rehydrate=function(){!this.server&&y&&Ee(this)},t.prototype.reconstructWithOptions=function(n,r){void 0===r&&(r=!0);var o=new t(e.__assign(e.__assign({},this.options),n),this.gs,r&&this.names||void 0);return o.keyframeIds=new Set(this.keyframeIds),!this.server&&y&&n.target!==this.options.target&&_e(this.options.target)!==_e(n.target)&&Ee(o),o},t.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target,r=e.nonce;return e.isServer?new Oe(n):t?new Pe(n,r):new Ie(n,r)}(this.options),new ye(e)));var e},t.prototype.hasNameForId=function(e,t){var n,r;return null!==(r=null===(n=this.names.get(e))||void 0===n?void 0:n.has(t))&&void 0!==r&&r},t.prototype.registerName=function(e,t){P(e),e.startsWith(g)&&this.keyframeIds.add(e);var n=this.names.get(e);n?n.add(t):this.names.set(e,new Set([t]))},t.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(P(e),n)},t.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear()},t.prototype.clearRules=function(e){this.getTag().clearGroup(P(e)),this.clearNames(e)},t.prototype.clearTag=function(){this.tag=void 0},t}();function De(e,t){return null==t||"boolean"==typeof t||""===t?"":"number"!=typeof t||0===t||e in u.default||e.startsWith("--")?String(t).trim():"".concat(t,"px")}var je=function(e){return e>="A"&&e<="Z"};function ke(e){for(var t="",n=0;n<e.length;n++){var r=e[n];if(1===n&&"-"===r&&"-"===e[0])return e;je(r)?t+="-"+r.toLowerCase():t+=r}return t.startsWith("ms-")?"-"+t:t}var Me=Symbol.for("sc-keyframes");function Ve(e){return"object"==typeof e&&null!==e&&Me in e}var Ge=function(e){return null==e||!1===e||""===e},Fe=function(t){var n=[];for(var r in t){var o=t[r];t.hasOwnProperty(r)&&!Ge(o)&&(Array.isArray(o)&&o.isCss||ue(o)?n.push("".concat(ke(r),":"),o,";"):he(o)?n.push.apply(n,e.__spreadArray(e.__spreadArray(["".concat(r," {")],Fe(o),!1),["}"],!1)):n.push("".concat(ke(r),": ").concat(De(r,o),";")))}return n};function Le(e,t,n,r,o){if(void 0===o&&(o=[]),"string"==typeof e)return e&&o.push(e),o;if(Ge(e))return o;if(le(e))return o.push(".".concat(e.styledComponentId)),o;if(ue(e)){if(!ue(i=e)||i.prototype&&i.prototype.isReactComponent||!t)return o.push(e),o;var s=e(t);return"production"===process.env.NODE_ENV||"object"!=typeof s||Array.isArray(s)||Ve(s)||he(s)||null===s||console.error("".concat(W(e)," 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.")),Le(s,t,n,r,o)}var i;if(Ve(e))return n?(e.inject(n,r),o.push(e.getName(r))):o.push(e),o;if(he(e)){for(var a=Fe(e),c=0;c<a.length;c++)o.push(a[c]);return o}if(!Array.isArray(e))return o.push(e.toString()),o;for(c=0;c<e.length;c++)Le(e[c],t,n,r,o);return o}function ze(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(ue(n)&&!le(n))return!1}return!0}var Be=q(f),$e=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&ze(e),this.componentId=t,this.baseHash=$(Be,t),this.baseStyle=n,Te.registerId(t)}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))r=de(r,this.staticRulesId);else{var o=pe(Le(this.rules,e,t,n)),s=z($(this.baseHash,o)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(o,"."+s,void 0,this.componentId);t.insertRules(this.componentId,s,i)}r=de(r,s),this.staticRulesId=s}else{for(var a=$(this.baseHash,n.hash),c="",u=0;u<this.rules.length;u++){var l=this.rules[u];if("string"==typeof l)c+=l,"production"!==process.env.NODE_ENV&&(a=$(a,l));else if(l){var d=pe(Le(l,e,t,n));a=$($(a,String(u)),d),c+=d}}if(c){var p=z(a>>>0);if(!t.hasNameForId(this.componentId,p)){var h=n(c,"."+p,void 0,this.componentId);t.insertRules(this.componentId,p,h)}r=de(r,p)}}return r},e}(),qe=/&/g,Ye=47,We=42;function He(e){if(-1===e.indexOf("}"))return!1;for(var t=e.length,n=0,r=0,o=!1,s=0;s<t;s++){var i=e.charCodeAt(s);if(0!==r||o||i!==Ye||e.charCodeAt(s+1)!==We)if(o)i===We&&e.charCodeAt(s+1)===Ye&&(o=!1,s++);else if(34!==i&&39!==i||0!==s&&92===e.charCodeAt(s-1)){if(0===r)if(123===i)n++;else if(125===i&&--n<0)return!0}else 0===r?r=i:r===i&&(r=0);else o=!0,s++}return 0!==n||0!==r}function Ue(e,t){return e.map(function(e){return"rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return"".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ue(e.children,t)),e})}function Je(e){var t,n,r,o=void 0===e?D:e,s=o.options,i=void 0===s?D:s,a=o.plugins,c=void 0===a?T:a,u=function(e,r,o){return o.startsWith(n)&&o.endsWith(n)&&o.replaceAll(n,"").length>0?".".concat(t):e},d=c.slice();d.push(function(e){e.type===l.RULESET&&e.value.includes("&")&&(r||(r=new RegExp("\\".concat(n,"\\b"),"g")),e.props[0]=e.props[0].replace(qe,n).replace(r,u))}),i.prefix&&d.push(l.prefixer),d.push(l.stringify);var p=[],h=l.middleware(d.concat(l.rulesheet(function(e){return p.push(e)}))),f=function(e,o,s,a){void 0===o&&(o=""),void 0===s&&(s=""),void 0===a&&(a="&"),t=a,n=o,r=void 0;var c=function(e){if(!He(e))return e;for(var t=e.length,n="",r=0,o=0,s=0,i=!1,a=0;a<t;a++){var c=e.charCodeAt(a);if(0!==s||i||c!==Ye||e.charCodeAt(a+1)!==We)if(i)c===We&&e.charCodeAt(a+1)===Ye&&(i=!1,a++);else if(34!==c&&39!==c||0!==a&&92===e.charCodeAt(a-1)){if(0===s)if(123===c)o++;else if(125===c){if(--o<0){for(var u=a+1;u<t;){var l=e.charCodeAt(u);if(59===l||10===l)break;u++}u<t&&59===e.charCodeAt(u)&&u++,o=0,a=u-1,r=u;continue}0===o&&(n+=e.substring(r,a+1),r=a+1)}else 59===c&&0===o&&(n+=e.substring(r,a+1),r=a+1)}else 0===s?s=c:s===c&&(s=0);else i=!0,a++}if(r<t){var d=e.substring(r);He(d)||(n+=d)}return n}(function(e){if(-1===e.indexOf("//"))return e;for(var t=e.length,n=[],r=0,o=0,s=0,i=0;o<t;){var a=e.charCodeAt(o);if(34!==a&&39!==a||0!==o&&92===e.charCodeAt(o-1))if(0===s)if(a===Ye&&o+1<t&&e.charCodeAt(o+1)===We){for(o+=2;o+1<t&&(e.charCodeAt(o)!==We||e.charCodeAt(o+1)!==Ye);)o++;o+=2}else if(40===a&&o>=3&&108==(32|e.charCodeAt(o-1))&&114==(32|e.charCodeAt(o-2))&&117==(32|e.charCodeAt(o-3)))i=1,o++;else if(i>0)41===a?i--:40===a&&i++,o++;else if(a===We&&o+1<t&&e.charCodeAt(o+1)===Ye)o>r&&n.push(e.substring(r,o)),r=o+=2;else if(a===Ye&&o+1<t&&e.charCodeAt(o+1)===Ye){for(o>r&&n.push(e.substring(r,o));o<t&&10!==e.charCodeAt(o);)o++;r=o}else o++;else o++;else 0===s?s=a:s===a&&(s=0),o++}return 0===r?e:(r<t&&n.push(e.substring(r)),n.join(""))}(e)),u=l.compile(s||o?"".concat(s," ").concat(o," { ").concat(c," }"):c);return i.namespace&&(u=Ue(u,i.namespace)),p=[],l.serialize(u,h),p};return f.hash=c.length?c.reduce(function(e,t){return t.name||b(15),$(e,t.name)},5381).toString():"",f}var Xe=new Te,Ze=Je(),Ke=c.default.createContext({shouldForwardProp:void 0,styleSheet:Xe,stylis:Ze}),Qe=Ke.Consumer,et=c.default.createContext(void 0);function tt(){return c.default.useContext(Ke)}function nt(e){if(!c.default.useMemo)return e.children;var t=tt().styleSheet,n=c.default.useMemo(function(){var n=t;return e.sheet?n=e.sheet:e.target?n=n.reconstructWithOptions({target:e.target,nonce:e.nonce},!1):void 0!==e.nonce&&(n=n.reconstructWithOptions({nonce:e.nonce})),e.disableCSSOMInjection&&(n=n.reconstructWithOptions({useCSSOMInjection:!1})),n},[e.disableCSSOMInjection,e.nonce,e.sheet,e.target,t]),r=c.default.useMemo(function(){return Je({options:{namespace:e.namespace,prefix:e.enableVendorPrefixes},plugins:e.stylisPlugins})},[e.enableVendorPrefixes,e.namespace,e.stylisPlugins]),o=c.default.useMemo(function(){return{shouldForwardProp:e.shouldForwardProp,styleSheet:n,stylis:r}},[e.shouldForwardProp,n,r]);return c.default.createElement(Ke.Provider,{value:o},c.default.createElement(et.Provider,{value:r},e.children))}var rt=c.default.createContext(void 0),ot=rt.Consumer,st={},it=new Set;function at(t,r,o){var s=le(t),i=t,u=!H(t),l=r.attrs,d=void 0===l?T:l,p=r.componentId,h=void 0===p?function(e,t){var n="string"!=typeof e?"sc":G(e);st[n]=(st[n]||0)+1;var r="".concat(n,"-").concat(Y(f+n+st[n]));return t?"".concat(t,"-").concat(r):r}(r.displayName,r.parentComponentId):p,m=r.displayName,y=void 0===m?function(e){return H(e)?"styled.".concat(e):"Styled(".concat(W(e),")")}(t):m,v=r.displayName&&r.componentId?"".concat(G(r.displayName),"-").concat(r.componentId):r.componentId||h,g=s&&i.attrs?i.attrs.concat(d).filter(Boolean):d,S=r.shouldForwardProp;if(s&&i.shouldForwardProp){var _=i.shouldForwardProp;if(r.shouldForwardProp){var w=r.shouldForwardProp;S=function(e,t){return _(e,t)&&w(e,t)}}else S=_}var b=new $e(o,v,s?i.componentStyle:void 0);function E(t,r){return function(t,r,o){var s=t.attrs,i=t.componentStyle,u=t.defaultProps,l=t.foldedComponentIds,d=t.styledComponentId,p=t.target,h=c.default.useContext(rt),f=tt(),m=t.shouldForwardProp||f.shouldForwardProp;"production"!==process.env.NODE_ENV&&c.default.useDebugValue&&c.default.useDebugValue(d);var y=j(r,h,u)||D,v=function(t,n,r){for(var o,s=e.__assign(e.__assign({},n),{className:void 0,theme:r}),i=0;i<t.length;i+=1){var a=ue(o=t[i])?o(e.__assign({},s)):o;for(var c in a)"className"===c?s.className=de(s.className,a[c]):"style"===c?s.style=e.__assign(e.__assign({},s.style),a[c]):c in n&&void 0===n[c]||(s[c]=a[c])}return"className"in n&&"string"==typeof n.className&&(s.className=de(s.className,n.className)),s}(s,r,y),g=v.as||p,S={};for(var _ in v)void 0===v[_]||"$"===_[0]||"as"===_||"theme"===_&&v.theme===y||("forwardedAs"===_?S.as=v.forwardedAs:m&&!m(_,g)||(S[_]=v[_],m||"development"!==process.env.NODE_ENV||a.default(_)||it.has(_)||!k.has(g)||(it.add(_),console.warn('styled-components: it looks like an unknown prop "'.concat(_,'" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));var w=function(e,t,n,r){var o=e.generateAndInjectStyles(t,n,r);return"production"!==process.env.NODE_ENV&&c.default.useDebugValue&&c.default.useDebugValue(o),o}(i,v,f.styleSheet,f.stylis);"production"!==process.env.NODE_ENV&&t.warnTooManyClasses&&t.warnTooManyClasses(w);var b=de(l,d);return w&&(b+=" "+w),v.className&&(b+=" "+v.className),S[H(g)&&!k.has(g)?"class":"className"]=b,o&&(S.ref=o),n.createElement(g,S)}(C,t,r)}E.displayName=y;var C=c.default.forwardRef(E);return C.attrs=g,C.componentStyle=b,C.displayName=y,C.shouldForwardProp=S,C.foldedComponentIds=s?de(i.foldedComponentIds,i.styledComponentId):"",C.styledComponentId=v,C.target=s?i.target:t,Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=s?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var r=0,o=t;r<o.length;r++)fe(e,o[r],!0);return e}({},i.defaultProps,e):e}}),"production"!==process.env.NODE_ENV&&(R(y,v),C.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={}}}}(y,v)),me(C,function(){return".".concat(C.styledComponentId)}),u&&ce(C,t,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0}),C}function ct(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n}var ut=function(e){return Object.assign(e,{isCss:!0})};function lt(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(ue(t)||he(t))return ut(Le(ct(T,e.__spreadArray([t],n,!0))));var o=t;return 0===n.length&&1===o.length&&"string"==typeof o[0]?Le(o):ut(Le(ct(o,n)))}function dt(t,n,r){if(void 0===r&&(r=D),!n)throw b(1,n);var o=function(o){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return t(n,r,lt.apply(void 0,e.__spreadArray([o],s,!1)))};return o.attrs=function(o){return dt(t,n,e.__assign(e.__assign({},r),{attrs:Array.prototype.concat(r.attrs,o).filter(Boolean)}))},o.withConfig=function(o){return dt(t,n,e.__assign(e.__assign({},r),o))},o}var pt=function(e){return dt(at,e)},ht=pt;k.forEach(function(e){ht[e]=pt(e)});var ft,mt,yt=function(){function e(e,t){this.instanceRules=new Map,this.rules=e,this.componentId=t,this.isStatic=ze(e),Te.registerId(this.componentId)}return e.prototype.removeStyles=function(e,t){this.instanceRules.delete(e),this.rebuildGroup(t)},e.prototype.renderStyles=function(e,t,n,r){var o=this.componentId;if(this.isStatic)if(n.hasNameForId(o,o+e))this.instanceRules.has(e)||this.computeRules(e,t,n,r);else{var s=this.computeRules(e,t,n,r);n.insertRules(o,s.name,s.rules)}else{var i=this.instanceRules.get(e);if(this.computeRules(e,t,n,r),!n.server&&i){var a=i.rules,c=this.instanceRules.get(e).rules;if(a.length===c.length){for(var u=!0,l=0;l<a.length;l++)if(a[l]!==c[l]){u=!1;break}if(u)return}}this.rebuildGroup(n)}},e.prototype.computeRules=function(e,t,n,r){var o=pe(Le(this.rules,t,n,r)),s={name:this.componentId+e,rules:r(o,"")};return this.instanceRules.set(e,s),s},e.prototype.rebuildGroup=function(e){var t=this.componentId;e.clearRules(t),this.instanceRules.forEach(function(n){e.insertRules(t,n.name,n.rules)})},e}();function vt(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];var o=lt.apply(void 0,e.__spreadArray([t],n,!1)),s="sc-global-".concat(Y(JSON.stringify(o))),i=new yt(o,s);"production"!==process.env.NODE_ENV&&R(s);var a=function(e){var t,n=tt(),r=c.default.useContext(rt),a=c.default.useRef(null);return null===a.current&&(a.current=n.styleSheet.allocateGSInstance(s)),t=a.current,"production"!==process.env.NODE_ENV&&c.default.Children.count(e.children)&&console.warn("The global style component ".concat(s," was given child JSX. createGlobalStyle does not render children.")),"production"!==process.env.NODE_ENV&&o.some(function(e){return"string"==typeof e&&-1!==e.indexOf("@import")})&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),n.styleSheet.server&&u(t,e,n.styleSheet,r,n.stylis),c.default.useLayoutEffect(function(){return n.styleSheet.server||u(t,e,n.styleSheet,r,n.stylis),function(){i.removeStyles(t,n.styleSheet)}},i.isStatic?[t,n.styleSheet]:[t,e,n.styleSheet,r,n.stylis]),n.styleSheet.server&&i.instanceRules.delete(t),null};function u(t,n,r,o,s){if(i.isStatic)i.renderStyles(t,S,r,s);else{var c=e.__assign(e.__assign({},n),{theme:j(n,o,a.defaultProps)});i.renderStyles(t,c,r,s)}}return c.default.memo(a)}function gt(e,t,n,r,o){for(var s in e){var i=e[s],a=o?o+"-"+s:s;if("object"==typeof i&&null!==i){var c={};gt(i,t,c,r,a),n[s]=c}else n[s]=r(a,i,s)}}function St(e,t,n,r){var o="";for(var s in e){var i=e[s],a=t[s],c=r?r+"-"+s:s;"object"==typeof i&&null!==i?"object"==typeof a&&null!==a&&(o+=St(i,a,n,c)):void 0!==a&&"function"!=typeof a&&(o+="--"+n+c+":"+a+";")}return o}var _t=function(){function e(e,t){var n=this;this[mt]=!0,this.inject=function(e,t){void 0===t&&(t=Ze);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"))},this.name=e,this.id=g+e,this.rules=t,P(this.id),me(this,function(){throw b(12,String(n.name))})}return e.prototype.getName=function(e){return void 0===e&&(e=Ze),this.name+e.hash},e}();mt=Me;var wt=function(){function t(t){var n=(void 0===t?{}:t).nonce,r=this;this._emitSheetCSS=function(){var e=r.instance.toString();if(!e)return"";var t=r.instance.options.nonce||Ne(),n=pe([t&&'nonce="'.concat(t,'"'),"".concat(d,'="true"'),"".concat(h,'="').concat(f,'"')].filter(Boolean)," ");return"<style ".concat(n,">").concat(e,"</style>")},this.getStyleTags=function(){if(r.sealed)throw b(2);return r._emitSheetCSS()},this.getStyleElement=function(){var t;if(r.sealed)throw b(2);var n=r.instance.toString();if(!n)return[];var o=((t={})[d]="",t[h]=f,t.dangerouslySetInnerHTML={__html:n},t),s=r.instance.options.nonce||Ne();return s&&(o.nonce=s),[c.default.createElement("style",e.__assign({},o,{key:"sc-0-0"}))]},this.seal=function(){r.sealed=!0},this.instance=new Te({isServer:!0,nonce:n}),this.sealed=!1}return t.prototype.collectStyles=function(e){if(this.sealed)throw b(2);return c.default.createElement(nt,{sheet:this.instance},e)},t.prototype.interleaveWithNodeStream=function(e){throw b(3)},t}(),bt={StyleSheet:Te,mainSheet:Xe};"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var Et="__sc-".concat(d,"__");"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[Et]||(window[Et]=0),1===window[Et]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info."),window[Et]+=1),exports.ServerStyleSheet=wt,exports.StyleSheetConsumer=Qe,exports.StyleSheetContext=Ke,exports.StyleSheetManager=nt,exports.ThemeConsumer=ot,exports.ThemeContext=rt,exports.ThemeProvider=function(t){var n=c.default.useContext(rt),r=c.default.useMemo(function(){return function(t,n){if(!t)throw b(14);if(ue(t)){var r=t(n);if("production"!==process.env.NODE_ENV&&(null===r||Array.isArray(r)||"object"!=typeof r))throw b(7);return r}if(Array.isArray(t)||"object"!=typeof t)throw b(8);return n?e.__assign(e.__assign({},n),t):t}(t.theme,n)},[t.theme,n]);return t.children?c.default.createElement(rt.Provider,{value:r},t.children):null},exports.__PRIVATE__=bt,exports.createGlobalStyle=vt,exports.createTheme=function(t,n){var r,o,s,i,a=(null!==(r=null==n?void 0:n.prefix)&&void 0!==r?r:"sc")+"-",c=null!==(o=null==n?void 0:n.selector)&&void 0!==o?o:":root",u=(gt(t,s=a,i={},function(e,t){if("production"!==process.env.NODE_ENV){for(var n=String(t),r=0,o=0;o<n.length&&(40===n.charCodeAt(o)?r++:41===n.charCodeAt(o)&&r--,!(r<0));o++);0!==r&&console.warn('createTheme: value "'.concat(n,'" at "').concat(e,'" contains unbalanced parentheses and may break the var() fallback'))}return"var(--"+s+e+", "+t+")"}),i),l=vt(ft||(ft=e.__makeTemplateObject(["\n    "," {\n      ","\n    }\n  "],["\n    "," {\n      ","\n    }\n  "])),c,function(e){return St(t,e.theme,a)});return Object.assign(u,{GlobalStyle:l,raw:t,resolve:function(e){if(!y)throw new Error("createTheme.resolve() is client-only");var n=null!=e?e:document.documentElement;return function(e,t,n){var r={};return gt(e,t,r,function(e,r){return n.getPropertyValue("--"+t+e).trim()||r}),r}(t,a,getComputedStyle(n))}})},exports.css=lt,exports.default=ht,exports.isStyledComponent=le,exports.keyframes=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");var o=pe(lt.apply(void 0,e.__spreadArray([t],n,!1))),s=Y(o);return new _t(s,o)},exports.styled=ht,exports.useTheme=function(){var e=c.default.useContext(rt);if(!e)throw b(18);return e},exports.version=f,exports.withTheme=function(t){var n=c.default.forwardRef(function(n,r){var o=j(n,c.default.useContext(rt),t.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===o&&console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "'.concat(W(t),'"')),c.default.createElement(t,e.__assign(e.__assign({},n),{theme:o,ref:r}))});return n.displayName="WithTheme(".concat(W(t),")"),ce(n,t)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/is-prop-valid"),t=require("react"),n=require("stylis");function o(e){return e&&e.__esModule?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var r,i,a=/*#__PURE__*/o(e),l=/*#__PURE__*/o(t),c=/*#__PURE__*/s(n);const u="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",d="active",h="data-styled-version",p="6.4.0-prerelease.5",f="/*!sc*/\n",m="undefined"!=typeof window&&"undefined"!=typeof document;function y(e){if("undefined"!=typeof process&&void 0!==process.env){const t=process.env[e];if(void 0!==t&&""!==t)return"false"!==t}}const g=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:null!==(i=null!==(r=y("REACT_APP_SC_DISABLE_SPEEDY"))&&void 0!==r?r:y("SC_DISABLE_SPEEDY"))&&void 0!==i?i:"undefined"==typeof process||void 0===process.env||"production"!==process.env.NODE_ENV),S="sc-keyframes-",v={},b="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function w(e,...t){return"production"===process.env.NODE_ENV?new Error(`An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#${e} for more information.${t.length>0?` Args: ${t.join(", ")}`:""}`):new Error(function(...e){let t=e[0];const n=[];for(let t=1,o=e.length;t<o;t+=1)n.push(e[t]);return n.forEach(e=>{t=t.replace(/%[a-z]/,e)}),t}(b[e],...t).trim())}const C=1<<30;let N=new Map,O=new Map,E=1;const _=e=>{if(N.has(e))return N.get(e);for(;O.has(E);)E++;const t=E++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>C))throw w(16,`${t}`);return N.set(e,t),O.set(t,e),t},A=e=>O.get(e),I=(e,t)=>{E=t+1,N.set(e,t),O.set(t,e)},$=/invalid hook call/i,P=new Set,R=(e,t)=>{if("production"!==process.env.NODE_ENV){const n=`The component ${e}${t?` with the id of "${t}"`:""} has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n`,o=console.error;try{let e=!0;console.error=(t,...s)=>{$.test(t)?(e=!1,P.delete(n)):o(t,...s)},"function"==typeof l.default.useState&&l.default.useState(null),e&&!P.has(n)&&(console.warn(n),P.add(n))}catch(e){$.test(e.message)&&P.delete(n)}finally{console.error=o}}},x=Object.freeze([]),j=Object.freeze({});function T(e,t,n=j){return e.theme!==n.theme&&e.theme||t||n.theme}var k=new Set(["a","abbr","address","area","article","aside","audio","b","bdi","bdo","blockquote","body","button","br","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","main","map","mark","menu","meter","nav","object","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","search","section","select","slot","small","span","strong","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","switch","symbol","text","textPath","tspan","use"]);const D=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,M=/(^-|-$)/g;function V(e){return e.replace(D,"-").replace(M,"")}const G=/(a)(d)/gi,F=e=>String.fromCharCode(e+(e>25?39:97));function z(e){let t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=F(t%52)+n;return(F(t%52)+n).replace(G,"$1-$2")}const L=(e,t)=>{let n=t.length;for(;n;)e=33*e^t.charCodeAt(--n);return e},W=e=>L(5381,e);function q(e){return z(W(e)>>>0)}function B(e){return"production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function H(e){return"string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}function Y(e){return H(e)?`styled.${e}`:`Styled(${B(e)})`}const U=Symbol.for("react.memo"),J=Symbol.for("react.forward_ref"),X={contextType:!0,defaultProps:!0,displayName:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,propTypes:!0,type:!0},Z={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},K={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},Q={[J]:{$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},[U]:K};function ee(e){return("type"in(t=e)&&t.type.$$typeof)===U?K:"$$typeof"in e?Q[e.$$typeof]:X;var t}const te=Object.defineProperty,ne=Object.getOwnPropertyNames,oe=Object.getOwnPropertySymbols,se=Object.getOwnPropertyDescriptor,re=Object.getPrototypeOf,ie=Object.prototype;function ae(e,t,n){if("string"!=typeof t){const o=re(t);o&&o!==ie&&ae(e,o,n);const s=ne(t).concat(oe(t)),r=ee(e),i=ee(t);for(let o=0;o<s.length;++o){const a=s[o];if(!(a in Z||n&&n[a]||i&&a in i||r&&a in r)){const n=se(t,a);try{te(e,a,n)}catch(e){}}}}return e}function le(e){return"function"==typeof e}function ce(e){return"object"==typeof e&&"styledComponentId"in e}function ue(e,t){return e&&t?`${e} ${t}`:e||t||""}function de(e,t){return e.join(t||"")}function he(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function pe(e,t,n=!1){if(!n&&!he(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(let n=0;n<t.length;n++)e[n]=pe(e[n],t[n]);else if(he(t))for(const n in t)e[n]=pe(e[n],t[n]);return e}function fe(e,t){Object.defineProperty(e,"toString",{value:t})}const me=class{constructor(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e,this._cGroup=0,this._cIndex=0}indexOfGroup(e){if(e===this._cGroup)return this._cIndex;let t=this._cIndex;if(e>this._cGroup)for(let n=this._cGroup;n<e;n++)t+=this.groupSizes[n];else for(let n=this._cGroup-1;n>=e;n--)t-=this.groupSizes[n];return this._cGroup=e,this._cIndex=t,t}insertRules(e,t){if(e>=this.groupSizes.length){const t=this.groupSizes,n=t.length;let o=n;for(;e>=o;)if(o<<=1,o<0)throw w(16,`${e}`);this.groupSizes=new Uint32Array(o),this.groupSizes.set(t),this.length=o;for(let e=n;e<o;e++)this.groupSizes[e]=0}let n=this.indexOfGroup(e+1),o=0;for(let s=0,r=t.length;s<r;s++)this.tag.insertRule(n,t[s])&&(this.groupSizes[e]++,n++,o++);o>0&&this._cGroup>e&&(this._cIndex+=o)}clearGroup(e){if(e<this.length){const t=this.groupSizes[e],n=this.indexOfGroup(e),o=n+t;this.groupSizes[e]=0;for(let e=n;e<o;e++)this.tag.deleteRule(n);t>0&&this._cGroup>e&&(this._cIndex-=t)}}getGroup(e){let t="";if(e>=this.length||0===this.groupSizes[e])return t;const n=this.groupSizes[e],o=this.indexOfGroup(e),s=o+n;for(let e=o;e<s;e++)t+=this.tag.getRule(e)+f;return t}},ye=`style[${u}][${h}="${p}"]`,ge=new RegExp(`^${u}\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)`),Se=e=>"undefined"!=typeof ShadowRoot&&e instanceof ShadowRoot||"host"in e&&11===e.nodeType,ve=e=>{if(!e)return document;if(Se(e))return e;if("getRootNode"in e){const t=e.getRootNode();if(Se(t))return t}return document},be=(e,t,n)=>{const o=n.split(",");let s;for(let n=0,r=o.length;n<r;n++)(s=o[n])&&e.registerName(t,s)},we=(e,t)=>{var n;const o=(null!==(n=t.textContent)&&void 0!==n?n:"").split(f),s=[];for(let t=0,n=o.length;t<n;t++){const n=o[t].trim();if(!n)continue;const r=n.match(ge);if(r){const t=0|parseInt(r[1],10),n=r[2];0!==t&&(I(n,t),be(e,n,r[3]),e.getTag().insertRules(t,s)),s.length=0}else s.push(n)}},Ce=e=>{const t=ve(e.options.target).querySelectorAll(ye);for(let n=0,o=t.length;n<o;n++){const o=t[n];o&&o.getAttribute(u)!==d&&(we(e,o),o.parentNode&&o.parentNode.removeChild(o))}};let Ne=!1;function Oe(){if(!1!==Ne)return Ne;if("undefined"!=typeof document){const e=document.head.querySelector('meta[property="csp-nonce"]');if(e)return Ne=e.nonce||e.getAttribute("content")||void 0;const t=document.head.querySelector('meta[name="sc-nonce"]');if(t)return Ne=t.getAttribute("content")||void 0}return Ne="undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0}const Ee=(e,t)=>{const n=document.head,o=e||n,s=document.createElement("style"),r=(e=>{const t=Array.from(e.querySelectorAll(`style[${u}]`));return t[t.length-1]})(o),i=void 0!==r?r.nextSibling:null;s.setAttribute(u,d),s.setAttribute(h,p);const a=t||Oe();return a&&s.setAttribute("nonce",a),o.insertBefore(s,i),s},_e=class{constructor(e,t){this.element=Ee(e,t),this.element.appendChild(document.createTextNode("")),this.sheet=(e=>{var t;if(e.sheet)return e.sheet;const n=null!==(t=e.getRootNode().styleSheets)&&void 0!==t?t:document.styleSheets;for(let t=0,o=n.length;t<o;t++){const o=n[t];if(o.ownerNode===e)return o}throw w(17)})(this.element),this.length=0}insertRule(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return!1}}deleteRule(e){this.sheet.deleteRule(e),this.length--}getRule(e){const t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""}},Ae=class{constructor(e,t){this.element=Ee(e,t),this.nodes=this.element.childNodes,this.length=0}insertRule(e,t){if(e<=this.length&&e>=0){const n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,!0}return!1}deleteRule(e){this.element.removeChild(this.nodes[e]),this.length--}getRule(e){return e<this.length?this.nodes[e].textContent:""}},Ie=class{constructor(e){this.rules=[],this.length=0}insertRule(e,t){return e<=this.length&&(e===this.length?this.rules.push(t):this.rules.splice(e,0,t),this.length++,!0)}deleteRule(e){this.rules.splice(e,1),this.length--}getRule(e){return e<this.length?this.rules[e]:""}};let $e=m;const Pe={isServer:!m,useCSSOMInjection:!g};class Re{static registerId(e){return _(e)}constructor(e=j,t={},n){this.options=Object.assign(Object.assign({},Pe),e),this.gs=t,this.keyframeIds=new Set,this.names=new Map(n),this.server=!!e.isServer,!this.server&&m&&$e&&($e=!1,Ce(this)),fe(this,()=>(e=>{const t=e.getTag(),{length:n}=t;let o="";for(let s=0;s<n;s++){const n=A(s);if(void 0===n)continue;const r=e.names.get(n);if(void 0===r||!r.size)continue;const i=t.getGroup(s);if(0===i.length)continue;const a=u+".g"+s+'[id="'+n+'"]';let l="";r.forEach(e=>{e.length>0&&(l+=e+",")}),o+=i+a+'{content:"'+l+'"}'+f}return o})(this))}rehydrate(){!this.server&&m&&Ce(this)}reconstructWithOptions(e,t=!0){const n=new Re(Object.assign(Object.assign({},this.options),e),this.gs,t&&this.names||void 0);return n.keyframeIds=new Set(this.keyframeIds),!this.server&&m&&e.target!==this.options.target&&ve(this.options.target)!==ve(e.target)&&Ce(n),n}allocateGSInstance(e){return this.gs[e]=(this.gs[e]||0)+1}getTag(){return this.tag||(this.tag=(e=(({isServer:e,useCSSOMInjection:t,target:n,nonce:o})=>e?new Ie(n):t?new _e(n,o):new Ae(n,o))(this.options),new me(e)));var e}hasNameForId(e,t){var n,o;return null!==(o=null===(n=this.names.get(e))||void 0===n?void 0:n.has(t))&&void 0!==o&&o}registerName(e,t){_(e),e.startsWith(S)&&this.keyframeIds.add(e);const n=this.names.get(e);n?n.add(t):this.names.set(e,new Set([t]))}insertRules(e,t,n){this.registerName(e,t),this.getTag().insertRules(_(e),n)}clearNames(e){this.names.has(e)&&this.names.get(e).clear()}clearRules(e){this.getTag().clearGroup(_(e)),this.clearNames(e)}clearTag(){this.tag=void 0}}const xe={animationIterationCount:1,aspectRatio:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexShrink:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,scale:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1};function je(e,t){return null==t||"boolean"==typeof t||""===t?"":"number"!=typeof t||0===t||e in xe||e.startsWith("--")?String(t).trim():`${t}px`}const Te=e=>e>="A"&&e<="Z";function ke(e){let t="";for(let n=0;n<e.length;n++){const o=e[n];if(1===n&&"-"===o&&"-"===e[0])return e;Te(o)?t+="-"+o.toLowerCase():t+=o}return t.startsWith("ms-")?"-"+t:t}const De=Symbol.for("sc-keyframes");function Me(e){return"object"==typeof e&&null!==e&&De in e}const Ve=e=>null==e||!1===e||""===e,Ge=e=>{const t=[];for(const n in e){const o=e[n];e.hasOwnProperty(n)&&!Ve(o)&&(Array.isArray(o)&&o.isCss||le(o)?t.push(`${ke(n)}:`,o,";"):he(o)?t.push(`${n} {`,...Ge(o),"}"):t.push(`${ke(n)}: ${je(n,o)};`))}return t};function Fe(e,t,n,o,s=[]){if("string"==typeof e)return e&&s.push(e),s;if(Ve(e))return s;if(ce(e))return s.push(`.${e.styledComponentId}`),s;if(le(e)){if(!le(r=e)||r.prototype&&r.prototype.isReactComponent||!t)return s.push(e),s;{const r=e(t);return"production"===process.env.NODE_ENV||"object"!=typeof r||Array.isArray(r)||Me(r)||he(r)||null===r||console.error(`${B(e)} 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.`),Fe(r,t,n,o,s)}}var r;if(Me(e))return n?(e.inject(n,o),s.push(e.getName(o))):s.push(e),s;if(he(e)){const t=Ge(e);for(let e=0;e<t.length;e++)s.push(t[e]);return s}if(!Array.isArray(e))return s.push(e.toString()),s;for(let r=0;r<e.length;r++)Fe(e[r],t,n,o,s);return s}function ze(e){for(let t=0;t<e.length;t+=1){const n=e[t];if(le(n)&&!ce(n))return!1}return!0}const Le=W(p);class We{constructor(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&ze(e),this.componentId=t,this.baseHash=L(Le,t),this.baseStyle=n,Re.registerId(t)}generateAndInjectStyles(e,t,n){let o=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))o=ue(o,this.staticRulesId);else{const s=de(Fe(this.rules,e,t,n)),r=z(L(this.baseHash,s)>>>0);if(!t.hasNameForId(this.componentId,r)){const e=n(s,"."+r,void 0,this.componentId);t.insertRules(this.componentId,r,e)}o=ue(o,r),this.staticRulesId=r}else{let s=L(this.baseHash,n.hash),r="";for(let o=0;o<this.rules.length;o++){const i=this.rules[o];if("string"==typeof i)r+=i,"production"!==process.env.NODE_ENV&&(s=L(s,i));else if(i){const a=de(Fe(i,e,t,n));s=L(L(s,String(o)),a),r+=a}}if(r){const e=z(s>>>0);if(!t.hasNameForId(this.componentId,e)){const o=n(r,"."+e,void 0,this.componentId);t.insertRules(this.componentId,e,o)}o=ue(o,e)}}return o}}const qe=/&/g,Be=47,He=42;function Ye(e){if(-1===e.indexOf("}"))return!1;const t=e.length;let n=0,o=0,s=!1;for(let r=0;r<t;r++){const t=e.charCodeAt(r);if(0!==o||s||t!==Be||e.charCodeAt(r+1)!==He)if(s)t===He&&e.charCodeAt(r+1)===Be&&(s=!1,r++);else if(34!==t&&39!==t||0!==r&&92===e.charCodeAt(r-1)){if(0===o)if(123===t)n++;else if(125===t&&(n--,n<0))return!0}else 0===o?o=t:o===t&&(o=0);else s=!0,r++}return 0!==n||0!==o}function Ue(e,t){return e.map(e=>("rule"===e.type&&(e.value=`${t} ${e.value}`,e.value=e.value.replaceAll(",",`,${t} `),e.props=e.props.map(e=>`${t} ${e}`)),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ue(e.children,t)),e))}function Je({options:e=j,plugins:t=x}=j){let n,o,s;const r=(e,t,s)=>s.startsWith(o)&&s.endsWith(o)&&s.replaceAll(o,"").length>0?`.${n}`:e,i=t.slice();i.push(e=>{e.type===c.RULESET&&e.value.includes("&")&&(s||(s=new RegExp(`\\${o}\\b`,"g")),e.props[0]=e.props[0].replace(qe,o).replace(s,r))}),e.prefix&&i.push(c.prefixer),i.push(c.stringify);let a=[];const l=c.middleware(i.concat(c.rulesheet(e=>a.push(e)))),u=(t,r="",i="",u="&")=>{n=u,o=r,s=void 0;const d=function(e){if(!Ye(e))return e;const t=e.length;let n="",o=0,s=0,r=0,i=!1;for(let a=0;a<t;a++){const l=e.charCodeAt(a);if(0!==r||i||l!==Be||e.charCodeAt(a+1)!==He)if(i)l===He&&e.charCodeAt(a+1)===Be&&(i=!1,a++);else if(34!==l&&39!==l||0!==a&&92===e.charCodeAt(a-1)){if(0===r)if(123===l)s++;else if(125===l){if(s--,s<0){let n=a+1;for(;n<t;){const t=e.charCodeAt(n);if(59===t||10===t)break;n++}n<t&&59===e.charCodeAt(n)&&n++,s=0,a=n-1,o=n;continue}0===s&&(n+=e.substring(o,a+1),o=a+1)}else 59===l&&0===s&&(n+=e.substring(o,a+1),o=a+1)}else 0===r?r=l:r===l&&(r=0);else i=!0,a++}if(o<t){const t=e.substring(o);Ye(t)||(n+=t)}return n}(function(e){if(-1===e.indexOf("//"))return e;const t=e.length,n=[];let o=0,s=0,r=0,i=0;for(;s<t;){const a=e.charCodeAt(s);if(34!==a&&39!==a||0!==s&&92===e.charCodeAt(s-1))if(0===r)if(a===Be&&s+1<t&&e.charCodeAt(s+1)===He){for(s+=2;s+1<t&&(e.charCodeAt(s)!==He||e.charCodeAt(s+1)!==Be);)s++;s+=2}else if(40===a&&s>=3&&108==(32|e.charCodeAt(s-1))&&114==(32|e.charCodeAt(s-2))&&117==(32|e.charCodeAt(s-3)))i=1,s++;else if(i>0)41===a?i--:40===a&&i++,s++;else if(a===He&&s+1<t&&e.charCodeAt(s+1)===Be)s>o&&n.push(e.substring(o,s)),s+=2,o=s;else if(a===Be&&s+1<t&&e.charCodeAt(s+1)===Be){for(s>o&&n.push(e.substring(o,s));s<t&&10!==e.charCodeAt(s);)s++;o=s}else s++;else s++;else 0===r?r=a:r===a&&(r=0),s++}return 0===o?e:(o<t&&n.push(e.substring(o)),n.join(""))}(t));let h=c.compile(i||r?`${i} ${r} { ${d} }`:d);return e.namespace&&(h=Ue(h,e.namespace)),a=[],c.serialize(h,l),a};return u.hash=t.length?t.reduce((e,t)=>(t.name||w(15),L(e,t.name)),5381).toString():"",u}const Xe=new Re,Ze=Je(),Ke=l.default.createContext({shouldForwardProp:void 0,styleSheet:Xe,stylis:Ze}),Qe=Ke.Consumer,et=l.default.createContext(void 0);function tt(){return l.default.useContext(Ke)}function nt(e){if(!l.default.useMemo)return e.children;const{styleSheet:t}=tt(),n=l.default.useMemo(()=>{let n=t;return e.sheet?n=e.sheet:e.target?n=n.reconstructWithOptions({target:e.target,nonce:e.nonce},!1):void 0!==e.nonce&&(n=n.reconstructWithOptions({nonce:e.nonce})),e.disableCSSOMInjection&&(n=n.reconstructWithOptions({useCSSOMInjection:!1})),n},[e.disableCSSOMInjection,e.nonce,e.sheet,e.target,t]),o=l.default.useMemo(()=>Je({options:{namespace:e.namespace,prefix:e.enableVendorPrefixes},plugins:e.stylisPlugins}),[e.enableVendorPrefixes,e.namespace,e.stylisPlugins]),s=l.default.useMemo(()=>({shouldForwardProp:e.shouldForwardProp,styleSheet:n,stylis:o}),[e.shouldForwardProp,n,o]);return l.default.createElement(Ke.Provider,{value:s},l.default.createElement(et.Provider,{value:o},e.children))}const ot=l.default.createContext(void 0),st=ot.Consumer,rt={};function it(e,t){const n="string"!=typeof e?"sc":V(e);rt[n]=(rt[n]||0)+1;const o=`${n}-${q(p+n+rt[n])}`;return t?`${t}-${o}`:o}let at=new Set;function lt(e,n,o){const s=ce(e),r=e,i=!H(e),{attrs:c=x,componentId:u=it(n.displayName,n.parentComponentId),displayName:d=Y(e)}=n,h=n.displayName&&n.componentId?`${V(n.displayName)}-${n.componentId}`:n.componentId||u,p=s&&r.attrs?r.attrs.concat(c).filter(Boolean):c;let{shouldForwardProp:f}=n;if(s&&r.shouldForwardProp){const e=r.shouldForwardProp;if(n.shouldForwardProp){const t=n.shouldForwardProp;f=(n,o)=>e(n,o)&&t(n,o)}else f=e}const m=new We(o,h,s?r.componentStyle:void 0);function y(e,n){return function(e,n,o){const{attrs:s,componentStyle:r,defaultProps:i,foldedComponentIds:c,styledComponentId:u,target:d}=e,h=l.default.useContext(ot),p=tt(),f=e.shouldForwardProp||p.shouldForwardProp;"production"!==process.env.NODE_ENV&&l.default.useDebugValue&&l.default.useDebugValue(u);const m=T(n,h,i)||j,y=function(e,t,n){const o=Object.assign(Object.assign({},t),{className:void 0,theme:n});let s;for(let n=0;n<e.length;n+=1){s=e[n];const r=le(s)?s(Object.assign({},o)):s;for(const e in r)"className"===e?o.className=ue(o.className,r[e]):"style"===e?o.style=Object.assign(Object.assign({},o.style),r[e]):e in t&&void 0===t[e]||(o[e]=r[e])}return"className"in t&&"string"==typeof t.className&&(o.className=ue(o.className,t.className)),o}(s,n,m),g=y.as||d,S={};for(const e in y)void 0===y[e]||"$"===e[0]||"as"===e||"theme"===e&&y.theme===m||("forwardedAs"===e?S.as=y.forwardedAs:f&&!f(e,g)||(S[e]=y[e],f||"development"!==process.env.NODE_ENV||a.default(e)||at.has(e)||!k.has(g)||(at.add(e),console.warn(`styled-components: it looks like an unknown prop "${e}" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via \`<StyleSheetManager shouldForwardProp={...}>\` (connect an API like \`@emotion/is-prop-valid\`) or consider using transient props (\`$\` prefix for automatic filtering.)`))));const v=function(e,t,n,o){const s=e.generateAndInjectStyles(t,n,o);return"production"!==process.env.NODE_ENV&&l.default.useDebugValue&&l.default.useDebugValue(s),s}(r,y,p.styleSheet,p.stylis);"production"!==process.env.NODE_ENV&&e.warnTooManyClasses&&e.warnTooManyClasses(v);let b=ue(c,u);return v&&(b+=" "+v),y.className&&(b+=" "+y.className),S[H(g)&&!k.has(g)?"class":"className"]=b,o&&(S.ref=o),t.createElement(g,S)}(g,e,n)}y.displayName=d;let g=l.default.forwardRef(y);return g.attrs=p,g.componentStyle=m,g.displayName=d,g.shouldForwardProp=f,g.foldedComponentIds=s?ue(r.foldedComponentIds,r.styledComponentId):"",g.styledComponentId=h,g.target=s?r.target:e,Object.defineProperty(g,"defaultProps",{get(){return this._foldedDefaultProps},set(e){this._foldedDefaultProps=s?function(e,...t){for(const n of t)pe(e,n,!0);return e}({},r.defaultProps,e):e}}),"production"!==process.env.NODE_ENV&&(R(d,h),g.warnTooManyClasses=((e,t)=>{let n={},o=!1;return s=>{!o&&(n[s]=!0,Object.keys(n).length>=200)&&(console.warn(`Over 200 classes were generated for component ${e}${t?` with the id of "${t}"`:""}.\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))\`width: 100%;\`\n\n  <Component />`),o=!0,n={})}})(d,h)),fe(g,()=>`.${g.styledComponentId}`),i&&ae(g,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0}),g}function ct(e,t){const n=[e[0]];for(let o=0,s=t.length;o<s;o+=1)n.push(t[o],e[o+1]);return n}const ut=e=>Object.assign(e,{isCss:!0});function dt(e,...t){if(le(e)||he(e))return ut(Fe(ct(x,[e,...t])));const n=e;return 0===t.length&&1===n.length&&"string"==typeof n[0]?Fe(n):ut(Fe(ct(n,t)))}function ht(e,t,n=j){if(!t)throw w(1,t);const o=(o,...s)=>e(t,n,dt(o,...s));return o.attrs=o=>ht(e,t,Object.assign(Object.assign({},n),{attrs:Array.prototype.concat(n.attrs,o).filter(Boolean)})),o.withConfig=o=>ht(e,t,Object.assign(Object.assign({},n),o)),o}const pt=e=>ht(lt,e),ft=pt;k.forEach(e=>{ft[e]=pt(e)});class mt{constructor(e,t){this.instanceRules=new Map,this.rules=e,this.componentId=t,this.isStatic=ze(e),Re.registerId(this.componentId)}removeStyles(e,t){this.instanceRules.delete(e),this.rebuildGroup(t)}renderStyles(e,t,n,o){const s=this.componentId;if(this.isStatic){if(n.hasNameForId(s,s+e))this.instanceRules.has(e)||this.computeRules(e,t,n,o);else{const r=this.computeRules(e,t,n,o);n.insertRules(s,r.name,r.rules)}return}const r=this.instanceRules.get(e);if(this.computeRules(e,t,n,o),!n.server&&r){const t=r.rules,n=this.instanceRules.get(e).rules;if(t.length===n.length){let e=!0;for(let o=0;o<t.length;o++)if(t[o]!==n[o]){e=!1;break}if(e)return}}this.rebuildGroup(n)}computeRules(e,t,n,o){const s=de(Fe(this.rules,t,n,o)),r={name:this.componentId+e,rules:o(s,"")};return this.instanceRules.set(e,r),r}rebuildGroup(e){const t=this.componentId;e.clearRules(t),this.instanceRules.forEach(n=>{e.insertRules(t,n.name,n.rules)})}}function yt(e,...t){const n=dt(e,...t),o=`sc-global-${q(JSON.stringify(n))}`,s=new mt(n,o);"production"!==process.env.NODE_ENV&&R(o);const r=e=>{const t=tt(),r=l.default.useContext(ot);let a;{const e=l.default.useRef(null);null===e.current&&(e.current=t.styleSheet.allocateGSInstance(o)),a=e.current}return"production"!==process.env.NODE_ENV&&l.default.Children.count(e.children)&&console.warn(`The global style component ${o} was given child JSX. createGlobalStyle does not render children.`),"production"!==process.env.NODE_ENV&&n.some(e=>"string"==typeof e&&-1!==e.indexOf("@import"))&&console.warn("Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."),t.styleSheet.server&&i(a,e,t.styleSheet,r,t.stylis),l.default.useLayoutEffect(()=>(t.styleSheet.server||i(a,e,t.styleSheet,r,t.stylis),()=>{s.removeStyles(a,t.styleSheet)}),s.isStatic?[a,t.styleSheet]:[a,e,t.styleSheet,r,t.stylis]),t.styleSheet.server&&s.instanceRules.delete(a),null};function i(e,t,n,o,i){if(s.isStatic)s.renderStyles(e,v,n,i);else{const a=Object.assign(Object.assign({},t),{theme:T(t,o,r.defaultProps)});s.renderStyles(e,a,n,i)}}return l.default.memo(r)}function gt(e,t,n,o,s){for(const r in e){const i=e[r],a=s?s+"-"+r:r;if("object"==typeof i&&null!==i){const e={};gt(i,t,e,o,a),n[r]=e}else n[r]=o(a,i,r)}}function St(e,t,n,o){let s="";for(const r in e){const i=e[r],a=t[r],l=o?o+"-"+r:r;"object"==typeof i&&null!==i?"object"==typeof a&&null!==a&&(s+=St(i,a,n,l)):void 0!==a&&"function"!=typeof a&&(s+="--"+n+l+":"+a+";")}return s}var vt;class bt{constructor(e,t){this[vt]=!0,this.inject=(e,t=Ze)=>{const n=this.name+t.hash;e.hasNameForId(this.id,n)||e.insertRules(this.id,n,t(this.rules,n,"@keyframes"))},this.name=e,this.id=S+e,this.rules=t,_(this.id),fe(this,()=>{throw w(12,String(this.name))})}getName(e=Ze){return this.name+e.hash}}vt=De;const wt={StyleSheet:Re,mainSheet:Xe};"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");const Ct=`__sc-${u}__`;"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[Ct]||(window[Ct]=0),1===window[Ct]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info."),window[Ct]+=1),exports.ServerStyleSheet=class{constructor({nonce:e}={}){this._emitSheetCSS=()=>{const e=this.instance.toString();if(!e)return"";const t=this.instance.options.nonce||Oe();return`<style ${de([t&&`nonce="${t}"`,`${u}="true"`,`${h}="${p}"`].filter(Boolean)," ")}>${e}</style>`},this.getStyleTags=()=>{if(this.sealed)throw w(2);return this._emitSheetCSS()},this.getStyleElement=()=>{if(this.sealed)throw w(2);const e=this.instance.toString();if(!e)return[];const t={[u]:"",[h]:p,dangerouslySetInnerHTML:{__html:e}},n=this.instance.options.nonce||Oe();return n&&(t.nonce=n),[l.default.createElement("style",Object.assign({},t,{key:"sc-0-0"}))]},this.seal=()=>{this.sealed=!0},this.instance=new Re({isServer:!0,nonce:e}),this.sealed=!1}collectStyles(e){if(this.sealed)throw w(2);return l.default.createElement(nt,{sheet:this.instance},e)}interleaveWithNodeStream(e){throw w(3)}},exports.StyleSheetConsumer=Qe,exports.StyleSheetContext=Ke,exports.StyleSheetManager=nt,exports.ThemeConsumer=st,exports.ThemeContext=ot,exports.ThemeProvider=function(e){const t=l.default.useContext(ot),n=l.default.useMemo(()=>function(e,t){if(!e)throw w(14);if(le(e)){const n=e(t);if("production"!==process.env.NODE_ENV&&(null===n||Array.isArray(n)||"object"!=typeof n))throw w(7);return n}if(Array.isArray(e)||"object"!=typeof e)throw w(8);return t?Object.assign(Object.assign({},t),e):e}(e.theme,t),[e.theme,t]);return e.children?l.default.createElement(ot.Provider,{value:n},e.children):null},exports.__PRIVATE__=wt,exports.createGlobalStyle=yt,exports.createTheme=function(e,t){var n,o;const s=(null!==(n=null==t?void 0:t.prefix)&&void 0!==n?n:"sc")+"-",r=null!==(o=null==t?void 0:t.selector)&&void 0!==o?o:":root",i=function(e,t){const n={};return gt(e,t,n,(e,n)=>{if("production"!==process.env.NODE_ENV){const t=String(n);let o=0;for(let e=0;e<t.length&&(40===t.charCodeAt(e)?o++:41===t.charCodeAt(e)&&o--,!(o<0));e++);0!==o&&console.warn(`createTheme: value "${t}" at "${e}" contains unbalanced parentheses and may break the var() fallback`)}return"var(--"+t+e+", "+n+")"}),n}(e,s),a=yt`
+    ${r} {
+      ${t=>St(e,t.theme,s)}
+    }
+  `;return Object.assign(i,{GlobalStyle:a,raw:e,resolve(t){if(!m)throw new Error("createTheme.resolve() is client-only");const n=null!=t?t:document.documentElement;return function(e,t,n){const o={};return gt(e,t,o,(e,o)=>n.getPropertyValue("--"+t+e).trim()||o),o}(e,s,getComputedStyle(n))}})},exports.css=dt,exports.default=ft,exports.isStyledComponent=ce,exports.keyframes=function(e,...t){"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");const n=de(dt(e,...t)),o=q(n);return new bt(o,n)},exports.styled=ft,exports.useTheme=function(){const e=l.default.useContext(ot);if(!e)throw w(18);return e},exports.version=p,exports.withTheme=function(e){const t=l.default.forwardRef((t,n)=>{const o=T(t,l.default.useContext(ot),e.defaultProps);return"production"!==process.env.NODE_ENV&&void 0===o&&console.warn(`[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class "${B(e)}"`),l.default.createElement(e,Object.assign(Object.assign({},t),{theme:o,ref:n}))});return t.displayName=`WithTheme(${B(e)})`,ae(t,e)};
 //# sourceMappingURL=styled-components.browser.cjs.js.map