next-yak 0.0.1

package/README.md

@@ -0,0 +1,122 @@
+# next-yak
+
+yet another CSS-in-JS library
+
+a CSS-in-JS with the power of "dynamic at the speed and reliability of static" 🙃
+
+the initial version of next-yak will only work for next.js
+
+## Motivation
+
+Most of the existing CSS-in-JS libraries are either slow or have a complex api. This project tries to find a middle ground between speed and api complexity.
+
+The goal of this project is to create a proof of concept for a CSS-in-JS library that has the following properties:
+
+ - fast
+   - no runtime
+   - can be statically extracted
+   - can be optimized by postcss
+   - no processing during hydration
+   - can make use of [103 early hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)
+ - api
+   - ui colocation (mixing css and jsx)
+   - familiar `styled.div` api
+   - composable `styled(Component)`
+   - allows conditional styles
+   - allow to use props in styles
+   - allow to use a context based theme in styles
+   - typescript support
+
+Optimizations are done by postcss. This allows to use the full power of postcss and its plugins. It also allows to use the same optimizations for css files and css-in-js.
+
+# Installation
+
+```bash
+npm install next-yak
+```
+
+```js
+// next.config.js
+const { withYak } = require("next-yak");
+
+const nextConfig = {
+  // your next.js config
+};
+
+module.exports = withYak(nextConfig);
+```
+
+## Nesting
+
+`next-yak` supports nesting out of the box.  
+Next.js 13 supports nesting only with the `postcss-nested` plugin.  
+Therefore you have to create a `postcss.config.js` file in your project root:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    'postcss-nested':{},
+	}
+}
+```
+
+## Example
+
+```tsx
+import { styled, css } from "next-yak";
+
+const Title = styled.h1<{ x: number; children: React.ReactNode }>`
+  display: block;
+  ${({ $x }) => $x % 2 === 0 && css`color: red`}
+  position: relative;
+  top: ${({ $x }) => `${$x * 100}px`};
+`;
+
+const App = () => (
+  <Title $x={3}>
+    Hello World
+  </Title>
+);
+```
+
+## Performance Gains
+
+[![CSS Extract](https://raw.githubusercontent.com/jantimon/yacijs/main/css-extract.gif)](https://raw.githubusercontent.com/jantimon/yacijs/main/css-extract.gif)
+
+## How it works
+
+next-yak converts css-in-js into css modules. This allows to use the full power of postcss and its plugins. It also allows to use the same optimizations for css files and css-in-js.
+
+[![Compile Flow](https://raw.githubusercontent.com/jantimon/yacijs/main/compile-flow.webp)](https://raw.githubusercontent.com/jantimon/yacijs/main/compile-flow.webp)
+
+
+### Atomic CSS
+
+next-yak provide class name helpers. This allows using [tailwind](https://tailwindcss.com/) out of the box without additonal configuration.
+
+```tsx
+import { styled, css, atoms } from "next-yak";
+
+const SpinningTitle = styled.h1<{ isAnimated: boolean; children: React.ReactNode }>`
+  ${atoms("tw-text-lg md:tw-text-xl tw-bg-red-500")}
+  ${({ isAnimated }) => isAnimated && css`animation: spin 1s linear infinite`)}
+`;
+
+const App = () => (
+  <SpinningTitle isAnimated={true}>
+    Hello World
+  </SpinningTitle>
+);
+```
+
+## Todos:
+
+This is a proof of concept. There are a lot of things that need to be done before this can be used in production:
+
+ - [ ] improve js parsing - right now it not reusing babel..
+ - [ ] config hot module reloading
+
+## Prior art
+
+This POC is heavily inspried by [styled-components](https://styled-components.com/), [emotion](https://emotion.sh/docs/introduction) and [linaria](https://github.com/callstack/linaria).

package/dist/cssLiteral.d.ts

@@ -0,0 +1,11 @@
+type ComponentStyles<TProps extends Record<string, unknown>> = (props: TProps) => {
+    className: string;
+    style?: {
+        [key: string]: string;
+    };
+};
+export type CSSInterpolation<TProps extends Record<string, unknown>> = string | number | undefined | null | false | ComponentStyles<TProps> | ((props: TProps) => CSSInterpolation<TProps>);
+type CSSFunction = <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => ComponentStyles<TProps>;
+export declare const css: CSSFunction;
+export {};
+//# sourceMappingURL=cssLiteral.d.ts.map

package/dist/cssLiteral.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssLiteral.d.ts","sourceRoot":"","sources":["../runtime/cssLiteral.tsx"],"names":[],"mappings":"AAAA,KAAK,eAAe,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAC7D,KAAK,EAAE,MAAM,KACV;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC/D,MAAM,GACN,MAAM,GACN,SAAS,GACT,IAAI,GACJ,KAAK,GACL,eAAe,CAAC,MAAM,CAAC,GACvB,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;AAMlD,KAAK,WAAW,GAAG,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACxD,MAAM,EAAE,oBAAoB,EAC5B,GAAG,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAE,KAClC,eAAe,CAAC,MAAM,CAAC,CAAC;AA0E7B,eAAO,MAAM,GAAG,aAA+C,CAAC"}

package/dist/cssLiteral.js

@@ -0,0 +1,63 @@
+const internalImplementation = (...args) => {
+    const classNames = [];
+    const dynamicCssFunctions = [];
+    const style = {};
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (typeof arg === "string") {
+            classNames.push(arg);
+        }
+        else if (typeof arg === "function") {
+            dynamicCssFunctions.push(arg);
+        }
+        else if (typeof arg === "object" && "style" in arg) {
+            for (const key in arg.style) {
+                const value = arg.style[key];
+                if (typeof value === "function") {
+                    dynamicCssFunctions.push((props) => ({
+                        style: { [key]: value(props) },
+                    }));
+                }
+                else {
+                    style[key] = value;
+                }
+            }
+        }
+    }
+    // Non Dynamic CSS
+    if (dynamicCssFunctions.length === 0) {
+        const className = classNames.join(" ");
+        return () => ({ className, style });
+    }
+    // Dynamic CSS with runtime logic
+    const unwrapProps = (props, fn, classNames, style) => {
+        const result = fn(props);
+        if (typeof result === "function") {
+            unwrapProps(props, result, classNames, style);
+        }
+        else if (typeof result === "object") {
+            if ("className" in result && result.className) {
+                classNames.push(result.className);
+            }
+            if ("style" in result && result.style) {
+                for (const key in result.style) {
+                    const value = result.style[key];
+                    style[key] = value;
+                }
+            }
+        }
+    };
+    return (props) => {
+        const allClassNames = [...classNames];
+        const allStyles = { ...style };
+        for (let i = 0; i < dynamicCssFunctions.length; i++) {
+            unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);
+        }
+        return {
+            className: allClassNames.join(" "),
+            style: allStyles,
+        };
+    };
+};
+export const css = internalImplementation;
+//# sourceMappingURL=cssLiteral.js.map

package/dist/cssLiteral.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssLiteral.js","sourceRoot":"","sources":["../runtime/cssLiteral.tsx"],"names":[],"mappings":"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"}

package/dist/cssLiteral.jsx

@@ -0,0 +1,63 @@
+const internalImplementation = (...args) => {
+    const classNames = [];
+    const dynamicCssFunctions = [];
+    const style = {};
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (typeof arg === "string") {
+            classNames.push(arg);
+        }
+        else if (typeof arg === "function") {
+            dynamicCssFunctions.push(arg);
+        }
+        else if (typeof arg === "object" && "style" in arg) {
+            for (const key in arg.style) {
+                const value = arg.style[key];
+                if (typeof value === "function") {
+                    dynamicCssFunctions.push((props) => ({
+                        style: { [key]: value(props) },
+                    }));
+                }
+                else {
+                    style[key] = value;
+                }
+            }
+        }
+    }
+    // Non Dynamic CSS
+    if (dynamicCssFunctions.length === 0) {
+        const className = classNames.join(" ");
+        return () => ({ className, style });
+    }
+    // Dynamic CSS with runtime logic
+    const unwrapProps = (props, fn, classNames, style) => {
+        const result = fn(props);
+        if (typeof result === "function") {
+            unwrapProps(props, result, classNames, style);
+        }
+        else if (typeof result === "object") {
+            if ("className" in result && result.className) {
+                classNames.push(result.className);
+            }
+            if ("style" in result && result.style) {
+                for (const key in result.style) {
+                    const value = result.style[key];
+                    style[key] = value;
+                }
+            }
+        }
+    };
+    return (props) => {
+        const allClassNames = [...classNames];
+        const allStyles = { ...style };
+        for (let i = 0; i < dynamicCssFunctions.length; i++) {
+            unwrapProps(props, dynamicCssFunctions[i], allClassNames, allStyles);
+        }
+        return {
+            className: allClassNames.join(" "),
+            style: allStyles,
+        };
+    };
+};
+export const css = internalImplementation;
+//# sourceMappingURL=cssLiteral.jsx.map

package/dist/cssLiteral.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssLiteral.jsx","sourceRoot":"","sources":["../runtime/cssLiteral.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { css } from "./cssLiteral";
+export * from "./styled";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../runtime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAC;AACjC,cAAc,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { css } from "./cssLiteral";
+export * from "./styled";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../runtime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAC;AACjC,cAAc,UAAU,CAAC"}

package/dist/styled.d.ts

@@ -0,0 +1,183 @@
+import { FunctionComponent } from "react";
+import { CSSInterpolation } from "./cssLiteral";
+import React from "react";
+export declare const styled: ((Component: string | FunctionComponent<any>) => <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element) & {
+    a: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    abbr: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    address: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    area: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    article: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    aside: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    audio: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    b: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    base: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    bdi: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    bdo: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    big: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    blockquote: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    body: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    br: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    button: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    canvas: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    caption: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    center: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    cite: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    code: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    col: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    colgroup: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    data: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    datalist: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    dd: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    del: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    details: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    dfn: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    dialog: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    div: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    dl: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    dt: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    em: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    embed: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    fieldset: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    figcaption: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    figure: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    footer: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    form: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    h1: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    h2: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    h3: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    h4: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    h5: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    h6: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    head: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    header: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    hgroup: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    hr: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    html: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    i: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    iframe: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    img: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    input: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    ins: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    kbd: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    keygen: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    label: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    legend: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    li: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    link: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    main: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    map: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    mark: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    menu: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    menuitem: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    meta: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    meter: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    nav: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    noindex: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    noscript: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    object: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    ol: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    optgroup: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    option: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    output: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    p: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    param: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    picture: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    pre: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    progress: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    q: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    rp: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    rt: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    ruby: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    s: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    samp: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    search: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    slot: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    script: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    section: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    select: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    small: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    source: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    span: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    strong: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    style: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    sub: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    summary: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    sup: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    table: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    template: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    tbody: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    td: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    textarea: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    tfoot: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    th: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    thead: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    time: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    title: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    tr: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    track: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    u: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    ul: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    var: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    video: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    wbr: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    webview: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    svg: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    animate: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    animateMotion: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    animateTransform: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    circle: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    clipPath: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    defs: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    desc: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    ellipse: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feBlend: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feColorMatrix: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feComponentTransfer: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feComposite: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feConvolveMatrix: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feDiffuseLighting: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feDisplacementMap: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feDistantLight: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feDropShadow: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feFlood: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feFuncA: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feFuncB: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feFuncG: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feFuncR: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feGaussianBlur: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feImage: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feMerge: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feMergeNode: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feMorphology: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feOffset: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    fePointLight: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feSpecularLighting: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feSpotLight: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feTile: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    feTurbulence: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    filter: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    foreignObject: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    g: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    image: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    line: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    linearGradient: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    marker: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    mask: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    metadata: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    mpath: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    path: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    pattern: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    polygon: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    polyline: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    radialGradient: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    rect: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    stop: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    switch: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    symbol: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    text: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    textPath: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    tspan: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    use: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+    view: <TProps extends Record<string, unknown>>(styles: TemplateStringsArray, ...values: CSSInterpolation<TProps>[]) => (props: TProps) => React.JSX.Element;
+};
+//# sourceMappingURL=styled.d.ts.map

package/dist/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../runtime/styled.tsx"],"names":[],"mappings":"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"}

package/dist/styled.js

@@ -0,0 +1,31 @@
+import { css } from "./cssLiteral";
+import React from "react";
+const StyledFactory = function (Component) {
+    return (styles, ...values) => {
+        return (props) => {
+            const runtimeStyles = css(styles, ...values)(props);
+            const filteredProps = typeof Component === "string" ? removePrefixedProperties(props) : props;
+            return (React.createElement(Component, { ...filteredProps, style: { ...(props.style || {}), ...runtimeStyles.style }, className: (props.className ? props.className + " " : "") +
+                    runtimeStyles.className }));
+        };
+    };
+};
+export const styled = new Proxy(StyledFactory, {
+    get(target, TagName) {
+        if (typeof TagName !== "string") {
+            throw new Error("Only string tags are supported");
+        }
+        return target(TagName);
+    },
+});
+// Remove all entries that start with a $ sign
+function removePrefixedProperties(obj) {
+    const result = {};
+    for (const key in obj) {
+        if (!key.startsWith("$")) {
+            result[key] = obj[key];
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=styled.js.map

package/dist/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../runtime/styled.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,GAAG,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,aAAa,GAAG,UAAU,SAA0C;IACxE,OAAO,CACL,MAA4B,EAC5B,GAAG,MAAkC,EACrC,EAAE;QACF,OAAO,CAAC,KAAa,EAAE,EAAE;YACvB,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,KAAY,CAAC,CAAC;YAC3D,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC1E,OAAO,CACL,oBAAC,SAAS,OACJ,aAAa,EACjB,KAAK,EAAE,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,GAAG,aAAa,CAAC,KAAK,EAAE,EACzD,SAAS,EACP,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC9C,aAAa,CAAC,SAAS,GAEzB,CACH,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,aAAa,EAAE;IAC7C,GAAG,CAAC,MAAM,EAAE,OAAO;QACjB,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;SACnD;QACD,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;CACF,CAEA,CAAC;AAEF,8CAA8C;AAC9C,SAAS,wBAAwB,CAAoC,GAAM;IACzE,MAAM,MAAM,GAAG,EAAO,CAAC;IACvB,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACxB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;SACxB;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/styled.jsx

@@ -0,0 +1,30 @@
+import { css } from "./cssLiteral";
+const StyledFactory = function (Component) {
+    return (styles, ...values) => {
+        return (props) => {
+            const runtimeStyles = css(styles, ...values)(props);
+            const filteredProps = typeof Component === "string" ? removePrefixedProperties(props) : props;
+            return (<Component {...filteredProps} style={{ ...(props.style || {}), ...runtimeStyles.style }} className={(props.className ? props.className + " " : "") +
+                    runtimeStyles.className}/>);
+        };
+    };
+};
+export const styled = new Proxy(StyledFactory, {
+    get(target, TagName) {
+        if (typeof TagName !== "string") {
+            throw new Error("Only string tags are supported");
+        }
+        return target(TagName);
+    },
+});
+// Remove all entries that start with a $ sign
+function removePrefixedProperties(obj) {
+    const result = {};
+    for (const key in obj) {
+        if (!key.startsWith("$")) {
+            result[key] = obj[key];
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=styled.jsx.map

package/dist/styled.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.jsx","sourceRoot":"","sources":["../runtime/styled.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,GAAG,EAAE,MAAM,cAAc,CAAC;AAErD,MAAM,aAAa,GAAG,UAAU,SAA0C;IACxE,OAAO,CACL,MAA4B,EAC5B,GAAG,MAAkC,EACrC,EAAE;QACF,OAAO,CAAC,KAAa,EAAE,EAAE;YACvB,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,KAAY,CAAC,CAAC;YAC3D,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC1E,OAAO,CACL,CAAC,SAAS,CACR,IAAI,aAAa,CAAC,CAClB,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,GAAG,aAAa,CAAC,KAAK,EAAE,CAAC,CAC1D,SAAS,CAAC,CACR,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC9C,aAAa,CAAC,SAAS,CACxB,EACD,CACH,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,aAAa,EAAE;IAC7C,GAAG,CAAC,MAAM,EAAE,OAAO;QACjB,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;SACnD;QACD,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;CACF,CAEA,CAAC;AAEF,8CAA8C;AAC9C,SAAS,wBAAwB,CAAoC,GAAM;IACzE,MAAM,MAAM,GAAG,EAAO,CAAC;IACvB,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACxB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;SACxB;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}