import * as React from "react"; import { styleFn } from "@styled-system/core"; /** * @internal * A higher-order component for working with the `useStyledSystem` hook in class-based components. * It takes a React component and converts style props into a single className prop. * * Generate boilerplate for using this hook with our scaffolding tool: https://o80pm.csb.app/ * * Returns The transformed React component. * * @param Component The React component you want to use with styled system. * @param styleParser The style parser, constructed with `compose`. * @example * ```js * import * as React from 'react'; * import {compose} from '@styled-system/core'; * import withStyledSystem from './with_styled_system'; * import { * flexContainerSet, * flexContainerSetPropTypes, * FlexContainerSetProps, * flexItemSet, * FlexItemSetProps, * flexItemSetPropTypes, * margin, * marginPropTypes, * MarginProps, * } from './system'; * * interface Props { * className?: string; * onClick: () => void; * children: React.ReactNode; * }; * * interface MyComponentStyleProps extends FlexContainerSetProps, FlexItemSetProps, MarginProps {} * * const styleParser = compose( * flexContainerSet, * flexItemSet, * margin, * ); * * const myComponentStylePropTypes = { * ...flexContainerSetPropTypes, * ...flexItemSetPropTypes, * ...marginPropTypes, * }; * * class MyComponent extends React.Component { * static staticProp = 'STATIC'; * render() { * const {className, onClick, children} = this.props; * return ( *
* {children} *
* ); * } * } * * export default withStyledSystem( * MyComponent, * styleParser, * myComponentStylePropTypes, * { * // Optional default style props. * margin: 3 * } * ); * ``` */ export default function withStyledSystem(Component: ((new (props: Props) => React.Component) & { displayName?: string; }) | React.RefForwardingComponent | React.FunctionComponent, styleParser: styleFn, stylePropTypes: { [key: string]: unknown; }, defaultStyleProps?: StyleProps): React.RefForwardingComponent> & Statics; /** * @internal * A helper method to split props into style props (for use with styled system) and * non-style props (to be passed into the wrapped component). * * Returns A result object with two keys: `styleProps` and `nonStyleProps`, which contain the * respective split props. * * @param props Props to be split into style and non-style props. * @param stylePropNames The list of allowed style prop names. * @param defaultStyleProps Default values for style props. */ export declare function splitStyleProps(props: AllProps, stylePropNames?: Array, defaultStyleProps?: StyleProps): { styleProps: StyleProps; nonStyleProps: Omit; };