@compiled/react 0.10.0 → 0.10.1

package/dist/browser/class-names/index.d.ts

@@ -1,38 +1,44 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
 import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
 export interface ClassNamesProps {
     children: (opts: {
         css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
-        style: {
-            [key: string]: string;
-        };
+        style: CSSProperties;
     }) => ReactNode;
 }
 /**
- * Use a component where styles are not necessarily tied to an element.
+ * ## Class names
  *
+ * Use a component where styles are not necessarily used on a JSX element.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).
+ *
+ * ### Style with objects
+ *
+ * @example
  * ```
- * // Object CSS
  * <ClassNames>
  *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
  * </ClassNames>
+ * ```
  *
- * // Template literal CSS
+ * ### Style with template literals
+ *
+ * @example
+ * ```
  * <ClassNames>
  *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
  * </ClassNames>
+ * ```
+ *
+ * ### Compose styles with arrays
  *
- * // Array CSS
+ * @example
+ * ```
  * <ClassNames>
  *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
+ *    children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
  * </ClassNames>
  * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-class-names
- *
- * @param props
  */
-export declare function ClassNames(_: ClassNamesProps): JSX.Element;
+export declare function ClassNames({ children }: ClassNamesProps): JSX.Element;

package/dist/browser/class-names/index.js

@@ -1,31 +1,5 @@
 import { createSetupError } from '../utils/error';
-/**
- * Use a component where styles are not necessarily tied to an element.
- *
- * ```
- * // Object CSS
- * <ClassNames>
- *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
- * </ClassNames>
- *
- * // Template literal CSS
- * <ClassNames>
- *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
- * </ClassNames>
- *
- * // Array CSS
- * <ClassNames>
- *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
- * </ClassNames>
- * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-class-names
- *
- * @param props
- */
-export function ClassNames(_) {
+export function ClassNames(_props) {
     throw createSetupError();
 }
 //# sourceMappingURL=index.js.map

package/dist/browser/class-names/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,UAAU,CAAC,CAAkB;IAC3C,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA+ClD,MAAM,UAAU,UAAU,CAAC,MAAuB;IAChD,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/browser/css/index.d.ts

@@ -1,28 +1,31 @@
-import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
+import type { AnyKeyCssProps, BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
 /**
- * Create styles that can be re-used between components with a template literal.
+ * ## CSS
  *
- * ```
- * css`color: red;`;
- * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
+ * Define styles that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
  *
- * @param css
- * @param values
- */
-export default function css<T = void>(_css: TemplateStringsArray, ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
-/**
- * Create styles that can be re-used between components with an object
+ * ### Style with objects
  *
+ * @example
  * ```
- * css({ color: 'red' });
+ * const redText = css({
+ *   color: 'red',
+ * });
+ *
+ * <div css={redText} />
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
+ * ### Style with template literals
+ *
+ * @example
+ * ```
+ * const redText = css`
+ *   color: red;
+ * `;
  *
- * @param css
+ * <div css={redText} />
+ * ```
  */
-export default function css(_css: CSSProps): CSSProps;
+export default function css<T = void>(styles: TemplateStringsArray, ...interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
+export default function css(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;

package/dist/browser/css/index.js

@@ -1,9 +1,9 @@
 /* eslint-disable import/export */
 import { createSetupError } from '../utils/error';
-export default function css(_css) {
-    var _values = [];
+export default function css(_styles) {
+    var _interpolations = [];
     for (var _i = 1; _i < arguments.length; _i++) {
-        _values[_i - 1] = arguments[_i];
+        _interpolations[_i - 1] = arguments[_i];
     }
     throw createSetupError();
 }

package/dist/browser/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAQlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAAwC;IACxC,yBAA8E;SAA9E,UAA8E,EAA9E,qBAA8E,EAA9E,IAA8E;QAA9E,wCAA8E;;IAE9E,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

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

@@ -2,16 +2,42 @@
 import type { CssFunction } from '../types';
 declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
     /**
-     * Tie styles to an element.
+     * ## 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;`} />
      * ```
-     * css={{ fontSize: 12 }} // Object CSS
-     * css={`font-size: 12px;`} // Template literal CSS
-     * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
+     *
+     * ### Compose styles with arrays
+     *
+     * @example
      * ```
+     * import { css } from '@compiled/react';
      *
-     * For more help, read the docs:
-     * https://compiledcssinjs.com/docs/api-css-prop
+     * <div
+     *  css={[
+     *    css({ fontSize: 12 }),
+     *    css`color: red;`,
+     *  ]}
+     * />
+     * ```
      */
     css?: CssFunction | CssFunction[];
 } : {} : {};

package/dist/browser/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/browser/keyframes/index.js.map

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

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

@@ -32,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`; // 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`
+ * );
+ * ```
  */
 export declare const styled: StyledComponentInstantiator;

package/dist/browser/styled/index.js

@@ -1,16 +1,44 @@
 import { createSetupError } from '../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`
+ * );
+ * ```
  */
 export var styled = new Proxy({}, {
     get: function () {

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

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

package/dist/cjs/class-names/index.d.ts

@@ -1,38 +1,44 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
 import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
 export interface ClassNamesProps {
     children: (opts: {
         css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
-        style: {
-            [key: string]: string;
-        };
+        style: CSSProperties;
     }) => ReactNode;
 }
 /**
- * Use a component where styles are not necessarily tied to an element.
+ * ## Class names
  *
+ * Use a component where styles are not necessarily used on a JSX element.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).
+ *
+ * ### Style with objects
+ *
+ * @example
  * ```
- * // Object CSS
  * <ClassNames>
  *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
  * </ClassNames>
+ * ```
  *
- * // Template literal CSS
+ * ### Style with template literals
+ *
+ * @example
+ * ```
  * <ClassNames>
  *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
  * </ClassNames>
+ * ```
+ *
+ * ### Compose styles with arrays
  *
- * // Array CSS
+ * @example
+ * ```
  * <ClassNames>
  *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
+ *    children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
  * </ClassNames>
  * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-class-names
- *
- * @param props
  */
-export declare function ClassNames(_: ClassNamesProps): JSX.Element;
+export declare function ClassNames({ children }: ClassNamesProps): JSX.Element;

package/dist/cjs/class-names/index.js

@@ -2,33 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClassNames = void 0;
 var error_1 = require("../utils/error");
-/**
- * Use a component where styles are not necessarily tied to an element.
- *
- * ```
- * // Object CSS
- * <ClassNames>
- *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
- * </ClassNames>
- *
- * // Template literal CSS
- * <ClassNames>
- *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
- * </ClassNames>
- *
- * // Array CSS
- * <ClassNames>
- *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
- * </ClassNames>
- * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-class-names
- *
- * @param props
- */
-function ClassNames(_) {
+function ClassNames(_props) {
     throw error_1.createSetupError();
 }
 exports.ClassNames = ClassNames;

package/dist/cjs/class-names/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":";;;AAGA,wCAAkD;AAWlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAgB,UAAU,CAAC,CAAkB;IAC3C,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AAFD,gCAEC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":";;;AAGA,wCAAkD;AA+ClD,SAAgB,UAAU,CAAC,MAAuB;IAChD,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AAFD,gCAEC"}

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

@@ -1,28 +1,31 @@
-import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
+import type { AnyKeyCssProps, BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
 /**
- * Create styles that can be re-used between components with a template literal.
+ * ## CSS
  *
- * ```
- * css`color: red;`;
- * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
+ * Define styles that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
  *
- * @param css
- * @param values
- */
-export default function css<T = void>(_css: TemplateStringsArray, ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
-/**
- * Create styles that can be re-used between components with an object
+ * ### Style with objects
  *
+ * @example
  * ```
- * css({ color: 'red' });
+ * const redText = css({
+ *   color: 'red',
+ * });
+ *
+ * <div css={redText} />
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
+ * ### Style with template literals
+ *
+ * @example
+ * ```
+ * const redText = css`
+ *   color: red;
+ * `;
  *
- * @param css
+ * <div css={redText} />
+ * ```
  */
-export default function css(_css: CSSProps): CSSProps;
+export default function css<T = void>(styles: TemplateStringsArray, ...interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
+export default function css(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;

package/dist/cjs/css/index.js

@@ -2,10 +2,10 @@
 /* eslint-disable import/export */
 Object.defineProperty(exports, "__esModule", { value: true });
 var error_1 = require("../utils/error");
-function css(_css) {
-    var _values = [];
+function css(_styles) {
+    var _interpolations = [];
     for (var _i = 1; _i < arguments.length; _i++) {
-        _values[_i - 1] = arguments[_i];
+        _interpolations[_i - 1] = arguments[_i];
     }
     throw error_1.createSetupError();
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":";AAAA,kCAAkC;;AAGlC,wCAAkD;AAkClD,SAAwB,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":";AAAA,kCAAkC;;AAQlC,wCAAkD;AAqClD,SAAwB,GAAG,CACzB,OAAwC;IACxC,yBAA8E;SAA9E,UAA8E,EAA9E,qBAA8E,EAA9E,IAA8E;QAA9E,wCAA8E;;IAE9E,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}

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

@@ -2,16 +2,42 @@
 import type { CssFunction } from '../types';
 declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
     /**
-     * Tie styles to an element.
+     * ## 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;`} />
      * ```
-     * css={{ fontSize: 12 }} // Object CSS
-     * css={`font-size: 12px;`} // Template literal CSS
-     * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
+     *
+     * ### Compose styles with arrays
+     *
+     * @example
      * ```
+     * import { css } from '@compiled/react';
      *
-     * For more help, read the docs:
-     * https://compiledcssinjs.com/docs/api-css-prop
+     * <div
+     *  css={[
+     *    css({ fontSize: 12 }),
+     *    css`color: red;`,
+     *  ]}
+     * />
+     * ```
      */
     css?: CssFunction | CssFunction[];
 } : {} : {};