@compiled/react 0.8.0 → 0.10.1

package/dist/cjs/jsx/jsx-local-namespace.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+import type { CssFunction } from '../types';
+declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
+    /**
+     * ## CSS prop
+     *
+     * Style a JSX element.
+     * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-css-prop).
+     *
+     * ### Style with objects
+     *
+     * @example
+     * ```
+     * import { css } from '@compiled/react';
+     *
+     * <div css={css({ fontSize: 12 })} />
+     * ```
+     *
+     * ### Style with template literals
+     *
+     * @example
+     * ```
+     * import { css } from '@compiled/react';
+     *
+     * <div css={css`color: red;`} />
+     * ```
+     *
+     * ### Compose styles with arrays
+     *
+     * @example
+     * ```
+     * import { css } from '@compiled/react';
+     *
+     * <div
+     *  css={[
+     *    css({ fontSize: 12 }),
+     *    css`color: red;`,
+     *  ]}
+     * />
+     * ```
+     */
+    css?: CssFunction | CssFunction[];
+} : {} : {};
+declare type ReactJSXElement = JSX.Element;
+declare type ReactJSXElementClass = JSX.ElementClass;
+declare type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+declare type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+declare type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
+declare type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+declare type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+declare type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+export declare namespace CompiledJSX {
+    type Element = ReactJSXElement;
+    type ElementClass = ReactJSXElementClass;
+    type ElementAttributesProperty = ReactJSXElementAttributesProperty;
+    type ElementChildrenAttribute = ReactJSXElementChildrenAttribute;
+    type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>;
+    type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
+    type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
+    type IntrinsicElements = {
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+            css?: CssFunction | CssFunction[];
+        };
+    };
+}
+export {};

package/dist/cjs/jsx/jsx-local-namespace.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=jsx-local-namespace.js.map

package/dist/cjs/jsx/jsx-local-namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-local-namespace.js","sourceRoot":"","sources":["../../../src/jsx/jsx-local-namespace.tsx"],"names":[],"mappings":""}

package/dist/cjs/jsx/jsx-runtime.d.ts

@@ -0,0 +1,2 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+export * from 'react/jsx-runtime';

package/dist/cjs/jsx/jsx-runtime.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Pass through the (automatic) jsx runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+__exportStar(require("react/jsx-runtime"), exports);
+//# sourceMappingURL=jsx-runtime.js.map

package/dist/cjs/jsx/jsx-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,oDAAkC"}

package/dist/cjs/keyframes/index.d.ts

@@ -1,24 +1,14 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
 export declare type KeyframeSteps = string | Record<string, CSSProps>;
 /**
- * Create keyframes using a tagged template expression:
+ * ## Keyframes
  *
- * ```
- * const fadeOut = keyframes`
- *   from { opacity: 1; }
- *   to   { opacity: 0; }
- * `;
- * ```
- *
- * @param _strings The input string values
- * @param _interpolations The arguments used in the expression
- */
-export declare function keyframes(_strings: TemplateStringsArray, ..._interpolations: BasicTemplateInterpolations[]): string;
-/**
- * Create keyframes using:
+ * Define keyframes to be used in a [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).
+ * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-keyframes).
  *
- * 1. An object expression
+ * ### Style with objects
  *
+ * @example
  * ```
  * const fadeOut = keyframes({
  *   from: {
@@ -28,20 +18,26 @@ export declare function keyframes(_strings: TemplateStringsArray, ..._interpolat
  *     opacity: 0,
  *   },
  * });
+ *
+ * <div css={{ animation: `${fadeOut} 2s` }} />
  * ```
  *
- * 2. A string
+ * ### Style with template literals
  *
+ * @example
  * ```
- * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
- * ```
+ * const fadeOut = keyframes`
+ *   from {
+ *     opacity: 1;
+ *   }
  *
- * 3. A template literal
+ *   to {
+ *     opacity: 0;
+ *   }
+ * `;
  *
+ * <div css={{ animation: `${fadeOut} 2s` }} />
  * ```
- * const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
- * ```
- *
- * @param _steps The waypoints along the animation sequence
  */
-export declare function keyframes(_steps: KeyframeSteps): string;
+export declare function keyframes(steps: KeyframeSteps): string;
+export declare function keyframes(strings: TemplateStringsArray, ...interpolations: BasicTemplateInterpolations[]): string;

package/dist/cjs/keyframes/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { BasicTemplateInterpolations, CSSProps } from '../types';

package/dist/cjs/keyframes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/keyframes/index.tsx"],"names":[],"mappings":";;;AACA,wCAAkD;AAsDlD,SAAgB,SAAS,CACvB,eAAqD;IACrD,yBAAiD;SAAjD,UAAiD,EAAjD,qBAAiD,EAAjD,IAAiD;QAAjD,wCAAiD;;IAEjD,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,8BAKC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/keyframes/index.tsx"],"names":[],"mappings":";;;AACA,wCAAkD;AAkDlD,SAAgB,SAAS,CACvB,eAAqD;IACrD,yBAAiD;SAAjD,UAAiD,EAAjD,qBAAiD,EAAjD,IAAiD;QAAjD,wCAAiD;;IAEjD,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,8BAKC"}

package/dist/cjs/runtime/ax.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ax
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 /**

package/dist/cjs/runtime/css-custom-property.d.ts

@@ -7,4 +7,4 @@
  * @param suffix
  * @param prefix
  */
-export default function cssCustomPropertyValue(value: string | number | number | null, suffix?: string | undefined | null, prefix?: string | undefined | null): string | number;
+export default function cssCustomPropertyValue(value: string | number | null | undefined, suffix?: string | undefined | null, prefix?: string | undefined | null): string | number;

package/dist/cjs/runtime/css-custom-property.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for css-custom-property
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 /**
@@ -13,7 +13,7 @@
  * @param prefix
  */
 declare export default function cssCustomPropertyValue(
-  value: string | number | number | null,
+  value: string | number | null | void,
   suffix?: string | void | null,
   prefix?: string | void | null
 ): string | number;

package/dist/cjs/runtime/css-custom-property.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-custom-property.js","sourceRoot":"","sources":["../../../src/runtime/css-custom-property.tsx"],"names":[],"mappings":";;AAAA;;;;;;;;GAQG;AACH,SAAwB,sBAAsB,CAC5C,KAAsC,EACtC,MAAkC,EAClC,MAAkC;IAElC,IAAI,KAAK,IAAI,SAAS,EAAE;QACtB,IAAI,MAAM,EAAE;YACV,IAAI,MAAM,EAAE;gBACV,OAAO,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;aAChC;YAED,OAAO,KAAK,GAAG,MAAM,CAAC;SACvB;QAED,OAAO,KAAK,CAAC;KACd;IAED,qFAAqF;IACrF,4EAA4E;IAC5E,kEAAkE;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC;AArBD,yCAqBC"}
+{"version":3,"file":"css-custom-property.js","sourceRoot":"","sources":["../../../src/runtime/css-custom-property.tsx"],"names":[],"mappings":";;AAAA;;;;;;;;GAQG;AACH,SAAwB,sBAAsB,CAC5C,KAAyC,EACzC,MAAkC,EAClC,MAAkC;IAElC,IAAI,KAAK,IAAI,SAAS,EAAE;QACtB,IAAI,MAAM,EAAE;YACV,IAAI,MAAM,EAAE;gBACV,OAAO,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;aAChC;YAED,OAAO,KAAK,GAAG,MAAM,CAAC;SACvB;QAED,OAAO,KAAK,CAAC;KACd;IAED,qFAAqF;IACrF,4EAA4E;IAC5E,kEAAkE;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC;AArBD,yCAqBC"}

package/dist/cjs/runtime/dev-warnings.d.ts

@@ -1,2 +1 @@
-export declare const warn: (str: string, ...args: any[]) => void;
 export declare const analyzeCssInDev: (sheet: string) => void;

package/dist/cjs/runtime/dev-warnings.js

@@ -5,7 +5,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.analyzeCssInDev = exports.warn = void 0;
+exports.analyzeCssInDev = void 0;
 var selectorsToWarn = [':first-child', ':nth-child'];
 var hasWarned = {};
 var warn = function (str) {
@@ -15,14 +15,13 @@ var warn = function (str) {
     }
     return console.error.apply(console, __spreadArray(["\n \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557   \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2557     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557\n\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\n\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2588\u2588\u2554\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551  \u2588\u2588\u2551\n\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u255D  \u2588\u2588\u2551  \u2588\u2588\u2551\n\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551 \u255A\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\n \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u255D\n\n  @compiled/react/runtime - DEV WARNING\n\n  " + str + "\n"], args));
 };
-exports.warn = warn;
 var analyzeCssInDev = function (sheet) {
     if (hasWarned[sheet]) {
         return;
     }
     var shouldWarnAboutSelectors = selectorsToWarn.map(function (selector) { return sheet.includes(selector); }).filter(Boolean).length > 0;
     if (shouldWarnAboutSelectors) {
-        exports.warn("Selectors \"" + selectorsToWarn.join(', ') + "\" are dangerous to use when server side rendering.\n  Alternatively try and use \":nth-of-type\", or placing data attributes and targetting those instead.\n  Read https://compiledcssinjs.com/docs/server-side-rendering for more advice.");
+        warn("Selectors \"" + selectorsToWarn.join(', ') + "\" are dangerous to use when server side rendering.\n  Alternatively try and use \":nth-of-type\", or placing data attributes and targetting those instead.\n  Read https://compiledcssinjs.com/docs/server-side-rendering for more advice.");
     }
     hasWarned[sheet] = true;
 };

package/dist/cjs/runtime/dev-warnings.js.flow

@@ -1,8 +1,7 @@
 /**
  * Flowtype definitions for dev-warnings
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
-declare export var warn: (str: string, ...args: any[]) => void;
 declare export var analyzeCssInDev: (sheet: string) => void;

package/dist/cjs/runtime/dev-warnings.js.map

@@ -1 +1 @@
-{"version":3,"file":"dev-warnings.js","sourceRoot":"","sources":["../../../src/runtime/dev-warnings.tsx"],"names":[],"mappings":";;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACvD,IAAM,SAAS,GAAyB,EAAE,CAAC;AAEpC,IAAM,IAAI,GAAG,UAAC,GAAW;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IAC9C,OAAA,OAAO,CAAC,KAAK,OAAb,OAAO,iBACL,q6DAUA,GAAG,OACN,GACM,IAAI;AAbT,CAcC,CAAC;AAfS,QAAA,IAAI,QAeb;AAEG,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,OAAO;KACR;IAED,IAAM,wBAAwB,GAC5B,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxB,CAAwB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzF,IAAI,wBAAwB,EAAE;QAC5B,YAAI,CACF,iBAAc,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gPAEiC,CAC1E,CAAC;KACH;IAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,CAAC,CAAC;AAjBW,QAAA,eAAe,mBAiB1B"}
+{"version":3,"file":"dev-warnings.js","sourceRoot":"","sources":["../../../src/runtime/dev-warnings.tsx"],"names":[],"mappings":";;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACvD,IAAM,SAAS,GAAyB,EAAE,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,GAAW;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IACvC,OAAA,OAAO,CAAC,KAAK,OAAb,OAAO,iBACL,q6DAUA,GAAG,OACN,GACM,IAAI;AAbT,CAcC,CAAC;AAEG,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,OAAO;KACR;IAED,IAAM,wBAAwB,GAC5B,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxB,CAAwB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzF,IAAI,wBAAwB,EAAE;QAC5B,IAAI,CACF,iBAAc,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gPAEiC,CAC1E,CAAC;KACH;IAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,CAAC,CAAC;AAjBW,QAAA,eAAe,mBAiB1B"}

package/dist/cjs/runtime/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 declare export { default as CS } from './style';

package/dist/cjs/runtime/is-node.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for is-node
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 /**

package/dist/cjs/runtime/sheet.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 /**
  * Ordered style buckets using their short psuedo name.
  * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.

package/dist/cjs/runtime/sheet.js.flow

@@ -1,10 +1,10 @@
 /**
  * Flowtype definitions for sheet
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 /**
  * Ordered style buckets using their short psuedo name.
  * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.

package/dist/cjs/runtime/style-cache.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style-cache
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { ProviderComponent, UseCacheHook } from './types';

package/dist/cjs/runtime/style-cache.js.map

@@ -1 +1 @@
-{"version":3,"file":"style-cache.js","sourceRoot":"","sources":["../../../src/runtime/style-cache.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,+BAAkD;AAClD,qCAA8C;AAG9C;;;GAGG;AACH,IAAM,KAAK,GAAQ,2BAAiB,EAAE,CAAC,CAAC,CAAC,qBAAa,CAA8B,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAE/F,IAAI,CAAC,2BAAiB,EAAE,EAAE;IACxB;;;;OAIG;IACH,IAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAmB,mBAAmB,CAAC,CAAC;IACnF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,iGAAiG;QACjG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KACzC;CACF;AAED;;GAEG;AACI,IAAM,QAAQ,GAAiB;IACpC,IAAI,2BAAiB,EAAE,EAAE;QACvB,mFAAmF;QACnF,wGAAwG;QACxG,sDAAsD;QACtD,OAAO,kBAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KAChC;IAED,6CAA6C;IAC7C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAVW,QAAA,QAAQ,YAUnB;AAEF;;;;;GAKG;AACH,IAAM,kBAAkB,GAAsB,UAAC,KAAK;IAClD,IAAI,2BAAiB,EAAE,EAAE;QACvB,4EAA4E;QAC5E,sDAAsD;QACtD,IAAM,QAAQ,GAAG,gBAAQ,EAAE,CAAC;QAC5B,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAkB,CAAC;KAC3E;IAED,OAAO,KAAK,CAAC,QAAuB,CAAC;AACvC,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}
+{"version":3,"file":"style-cache.js","sourceRoot":"","sources":["../../../src/runtime/style-cache.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,+BAAkD;AAElD,qCAA8C;AAG9C;;;GAGG;AACH,IAAM,KAAK,GAAQ,2BAAiB,EAAE,CAAC,CAAC,CAAC,qBAAa,CAA8B,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAE/F,IAAI,CAAC,2BAAiB,EAAE,EAAE;IACxB;;;;OAIG;IACH,IAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAmB,mBAAmB,CAAC,CAAC;IACnF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,iGAAiG;QACjG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KACzC;CACF;AAED;;GAEG;AACI,IAAM,QAAQ,GAAiB;IACpC,IAAI,2BAAiB,EAAE,EAAE;QACvB,mFAAmF;QACnF,wGAAwG;QACxG,sDAAsD;QACtD,OAAO,kBAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KAChC;IAED,6CAA6C;IAC7C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAVW,QAAA,QAAQ,YAUnB;AAEF;;;;;GAKG;AACH,IAAM,kBAAkB,GAAsB,UAAC,KAAK;IAClD,IAAI,2BAAiB,EAAE,EAAE;QACvB,4EAA4E;QAC5E,sDAAsD;QACtD,IAAM,QAAQ,GAAG,gBAAQ,EAAE,CAAC;QAC5B,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAkB,CAAC;KAC3E;IAED,OAAO,KAAK,CAAC,QAAuB,CAAC;AACvC,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}

package/dist/cjs/runtime/style.js

@@ -23,10 +23,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var sheet_1 = __importStar(require("./sheet"));
 var dev_warnings_1 = require("./dev-warnings");
-var style_cache_1 = require("./style-cache");
 var is_node_1 = require("./is-node");
+var sheet_1 = __importStar(require("./sheet"));
+var style_cache_1 = require("./style-cache");
 function Style(props) {
     var inserted = style_cache_1.useCache();
     if (process.env.NODE_ENV === 'development') {

package/dist/cjs/runtime/style.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { StyleSheetOpts } from './types';

package/dist/cjs/runtime/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/runtime/style.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,+CAA8E;AAC9E,+CAAiD;AAEjD,6CAAyC;AACzC,qCAA8C;AAU9C,SAAwB,KAAK,CAAC,KAAiB;IAC7C,IAAM,QAAQ,GAAG,sBAAQ,EAAE,CAAC;IAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,8BAAe,CAAC,CAAC;KACzC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;QACzB,IAAI,2BAAiB,EAAE,EAAE;YACvB,IAAM,gBAAc,GAAoC,EAAE,CAAC;YAC3D,IAAI,SAAS,GAAG,KAAK,CAAC;YAEtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;qBAAM;oBACL,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;oBACvB,SAAS,GAAG,IAAI,CAAC;iBAClB;gBAED,IAAM,UAAU,GAAG,0BAAkB,CAAC,KAAK,CAAC,CAAC;gBAC7C,gBAAc,CAAC,UAAU,CAAC,GAAG,CAAC,gBAAc,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC;aACzE;YAED,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,6DAEE,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,uBAAuB,EAAE;oBACvB,MAAM,EAAE,2BAAmB,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,gBAAc,CAAC,MAAM,CAAC,EAAtB,CAAsB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;iBAC7E,GACD,CACH,CAAC;SACH;aAAM;YACL,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;gBAED,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;gBACvB,eAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AApDD,wBAoDC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/runtime/style.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B,+CAAiD;AACjD,qCAA8C;AAC9C,+CAA8E;AAC9E,6CAAyC;AAWzC,SAAwB,KAAK,CAAC,KAAiB;IAC7C,IAAM,QAAQ,GAAG,sBAAQ,EAAE,CAAC;IAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,8BAAe,CAAC,CAAC;KACzC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;QACzB,IAAI,2BAAiB,EAAE,EAAE;YACvB,IAAM,gBAAc,GAAoC,EAAE,CAAC;YAC3D,IAAI,SAAS,GAAG,KAAK,CAAC;YAEtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;qBAAM;oBACL,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;oBACvB,SAAS,GAAG,IAAI,CAAC;iBAClB;gBAED,IAAM,UAAU,GAAG,0BAAkB,CAAC,KAAK,CAAC,CAAC;gBAC7C,gBAAc,CAAC,UAAU,CAAC,GAAG,CAAC,gBAAc,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC;aACzE;YAED,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,6DAEE,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,uBAAuB,EAAE;oBACvB,MAAM,EAAE,2BAAmB,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,gBAAc,CAAC,MAAM,CAAC,EAAtB,CAAsB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;iBAC7E,GACD,CACH,CAAC;SACH;aAAM;YACL,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;gBAED,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;gBACvB,eAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AApDD,wBAoDC"}

package/dist/cjs/runtime/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 export interface StyleSheetOpts {

package/dist/cjs/runtime.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 declare export { CC, CS, ax, ix } from './runtime/index';

package/dist/cjs/styled/index.d.ts

@@ -1,19 +1,16 @@
 import type { ComponentType } from 'react';
-import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
-export interface FunctionIterpolation<TProps> {
-    (props: TProps): CSSProps | string | number | boolean | undefined;
-}
+import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
 /**
  * Typing for the CSS object.
  */
-export declare type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
+export declare type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
 /**
  * Extra props added to the output Styled Component.
  */
 export interface StyledProps {
     as?: keyof JSX.IntrinsicElements;
 }
-export declare type Interpolations<TProps extends unknown> = (BasicTemplateInterpolations | FunctionIterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
+export declare type Interpolations<TProps extends unknown> = (BasicTemplateInterpolations | FunctionInterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
 /**
  * This allows us to take the generic `TTag` (that will be a valid `DOM` tag) and then use it to
  * define correct props based on it from `JSX.IntrinsicElements`, while also injecting our own
@@ -35,16 +32,44 @@ export interface StyledComponentInstantiator extends StyledComponentMap {
     <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledFunctionFromComponent<TInheritedProps>;
 }
 /**
- * Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
+ * ## Styled component
+ *
+ * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
+ *
+ * ### Style with objects
+ *
+ * @example
+ * ```
+ * styled.div({
+ *   fontSize: 12,
+ * });
+ * ```
  *
+ * ### Style with template literals
+ *
+ * @example
+ * ```
+ * styled.div`
+ *   font-size: 12px
+ * `;
  * ```
- * styled.div`font-size: 12px`; // Template literal CSS
- * styled.div({ fontSize: 12 }); // Object CSS
- * styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
- * styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
+ *
+ * ### Compose styles with arrays
+ *
+ * @example
  * ```
+ * import { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * styled.div(
+ *   { fontSize: 12 },
+ *   css`font-size: 12px`
+ * );
+ * ```
  */
 export declare const styled: StyledComponentInstantiator;

package/dist/cjs/styled/index.js

@@ -3,17 +3,45 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.styled = void 0;
 var error_1 = require("../utils/error");
 /**
- * Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
+ * ## Styled component
  *
+ * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
+ *
+ * ### Style with objects
+ *
+ * @example
+ * ```
+ * styled.div({
+ *   fontSize: 12,
+ * });
+ * ```
+ *
+ * ### Style with template literals
+ *
+ * @example
  * ```
- * styled.div`font-size: 12px`; // Template literal CSS
- * styled.div({ fontSize: 12 }); // Object CSS
- * styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
- * styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
+ * styled.div`
+ *   font-size: 12px
+ * `;
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * ### Compose styles with arrays
+ *
+ * @example
+ * ```
+ * import { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
+ *
+ * styled.div(
+ *   { fontSize: 12 },
+ *   css`font-size: 12px`
+ * );
+ * ```
  */
 exports.styled = new Proxy({}, {
     get: function () {

package/dist/cjs/styled/index.js.flow

@@ -1,18 +1,15 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { ComponentType } from 'react';
-import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
-export interface FunctionIterpolation<TProps> {
-  (props: TProps): CSSProps | string | number | boolean | void;
-}
+import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
 /**
  * Typing for the CSS object.
  */
-export type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
+export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
 /**
  * Extra props added to the output Styled Component.
  */
@@ -21,7 +18,7 @@ export type StyledProps = {
 };
 export type Interpolations<TProps: mixed> = (
   | BasicTemplateInterpolations
-  | FunctionIterpolation<TProps>
+  | FunctionInterpolation<TProps>
   | CssObject<TProps>
   | CssObject<TProps>[]
 )[];
@@ -36,7 +33,7 @@ export interface StyledFunctionFromTag<TTag: $Keys<$JSXIntrinsics>> {
     ...interpolations: Interpolations<TProps>
   ): React$ComponentType<{
     ...TProps,
-    ...$ElementType<$JSXIntrinsics, TTag>,
+    ...$Exact<$ElementType<$JSXIntrinsics, TTag>>,
     ...StyledProps,
   }>;
 }

package/dist/cjs/styled/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":";;;AACA,wCAAkD;AA6DlD;;;;;;;;;;;;GAYG;AACU,QAAA,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,wBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":";;;AAGA,wCAAkD;AAwDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACU,QAAA,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,wBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}

package/dist/cjs/types.d.ts

@@ -3,11 +3,14 @@ import type * as CSS from 'csstype';
  * Typing for the interpolations.
  */
 export declare type BasicTemplateInterpolations = string | number;
+export interface FunctionInterpolation<TProps> {
+    (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | undefined;
+}
 /**
  * These are all the CSS props that will exist.
  */
-export declare type CSSProps = CSS.Properties<string | number>;
+export declare type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
 export declare type AnyKeyCssProps<TValue> = {
-    [key: string]: AnyKeyCssProps<TValue> | CSSProps | string | number | TValue;
+    [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue;
 };
 export declare type CssFunction<TValue = void> = CSSProps | AnyKeyCssProps<TValue> | TemplateStringsArray | string | boolean | undefined;

package/dist/cjs/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import * as CSS from 'csstype';
@@ -9,12 +9,15 @@ import * as CSS from 'csstype';
  * Typing for the interpolations.
  */
 export type BasicTemplateInterpolations = string | number;
+export interface FunctionInterpolation<TProps> {
+  (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | void;
+}
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps = CSS.Properties<string | number>;
+export type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
 export type AnyKeyCssProps<TValue> = {
-  [key: string]: AnyKeyCssProps<TValue> | CSSProps | string | number | TValue,
+  [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue,
   ...
 };
 export type CssFunction<TValue = void> =

package/dist/cjs/utils/error.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for error
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 declare export var createSetupError: () => Error;