import * as EmotionCSS from '@emotion/css';
import _createInstance from '@emotion/css/create-instance';
import { ComponentSelector, Keyframes, SerializedStyles } from '@emotion/serialize';
import * as CSS from 'csstype';
declare let _instance: ReturnType<typeof _createInstance>;
export declare const createStylesCache: Record<string, boolean>;
export type CSSProperties = CSS.PropertiesFallback<number | string>;
export type CSSPropertiesWithMultiValues = {
    [K in keyof CSSProperties]: (CSSProperties[K] | string) | Array<Extract<CSSProperties[K] | (string & {}), string>>;
};
export type CSSPseudos = {
    [K in CSS.Pseudos]?: CSSObjectWithVars;
};
export interface CSSOthersObject {
    [propertiesName: string]: CSSInterpolation;
}
export interface ArrayStyleProps extends Array<CSSInterpolation> {
}
export type CSSInterpolation = StyleProps | ArrayStyleProps;
export interface CSSObjectWithVars extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {
}
/**
 * Style properties in a JavaScript camelCase. Everything Emotion allows is also
 * allowed here.
 */
export type StyleProps = null | undefined | boolean | number | string | ComponentSelector | Keyframes | SerializedStyles | CSSObjectWithVars;
/**
 * Prettify object types. @see https://www.totaltypescript.com/concepts/the-prettify-helper
 */
export type Prettify<T> = {
    [K in keyof T]: T[K];
} & {};
/**
 * Extract all the modifiers from a stencil. Usually you'll want to use {@link ExtractStencilProps}
 * instead.
 */
export type ExtractStencilModifiers<T extends BaseStencil<any, any, any, any, any>> = {
    [K in keyof T['__modifiers']]?: MaybeBoolean<keyof T['__modifiers'][K]>;
};
/**
 * Recursively extract all the modifiers from a stencil and its extended stencils. Usually you'll
 * want to use {@link ExtractStencilProps} instead.
 */
export type ExtractExtendedStencilModifiers<T extends BaseStencil<any, any, any, any, any>> = T extends BaseStencil<any, any, any, infer E> ? [E] extends [never] ? ExtractStencilModifiers<T> : ExtractExtendedStencilModifiers<E> & ExtractStencilModifiers<T> : {};
/**
 * Extract all the variables from a stencil. Usually you'll want to use {@link ExtractStencilProps}
 * instead.
 */
export type ExtractStencilVars<T extends BaseStencil<any, any, any, any, any>> = {
    [K in keyof T['__vars']]?: string;
};
/**
 * Recursively extract all the variables from a stencil and its extended stencils. Usually you'll
 * want to use {@link ExtractStencilProps} instead.
 */
export type ExtractExtendedStencilVars<T extends BaseStencil<any, any, any, any, any>> = T extends BaseStencil<any, any, any, infer E> ? [E] extends [never] ? ExtractStencilVars<T> : ExtractExtendedStencilVars<E> & ExtractStencilVars<T> : {};
/**
 * Returns an interface containing all the modifiers and variables from a stencil to be used in a
 * component's prop interface.
 *
 * ```ts
 * interface MyComponentProps extends ExtractStencilProps<typeof myComponentStencil> {
 *   // other props
 * }
 * ```
 */
export type ExtractStencilProps<T extends BaseStencil<any, any, any, any, any>> = Prettify<ExtractStencilModifiers<T> & ExtractStencilVars<T>>;
/**
 * Returns an interface containing all the modifiers and variables from a stencil, including
 * extended stencils, to be used in a component's prop interface. If your component's props already
 * extend another component's props that already include stencil props, use `ExtractStencilProps`
 * instead.
 *
 * ```ts
 * interface MyComponentProps extends ExtractExtendedStencilProps<typeof myComponentStencil> {
 *   // other props
 * }
 * ```
 */
export type ExtractExtendedStencilProps<T extends BaseStencil<any, any, any, any, any>> = Prettify<ExtractExtendedStencilModifiers<T> & ExtractExtendedStencilVars<T>>;
type DefaultedVarsShape = Record<string, string> | Record<string, Record<string, string>>;
/**
 * Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with
 * `{padding: 'var(--foo)'}`. It also works on variables in the middle of the property. Takes any
 * string and returns a string with CSS variables wrapped if necessary.
 *
 * ```ts
 * maybeWrapCSSVariables('1rem'); // 1rem
 * maybeWrapCSSVariables('--foo'); // var(--foo)
 * maybeWrapCSSVariables('var(--foo)'); // var(--foo)
 * maybeWrapCSSVariables('calc(--foo)'); // calc(var(--foo))
 * ```
 */
export declare function maybeWrapCSSVariables(input: string): string;
export declare function wrapProperty<T>(value: T): T;
/**
 * Walks through all the properties and values of a style and converts properties and/or values that
 * need special processing. An example might be using a CSS variable without a `var()` wrapping.
 */
export declare function wrapAllProperties<T extends unknown>(obj: T): T;
export type CS = string | Record<string, string>;
/**
 * CSS variable map type. In developer/dynamic mode, we don't know what the hash is going to be. All
 * variables will look like `--{hash}-{name}`. But the static optimizers generates the name based on
 * the AST, so the `id` will be known. Instead of something like `--abc123-color`, the `ID` is set
 * by the optimizer.
 *
 * For example:
 * ```ts
 * // dynamic
 * const myVars = createVars('color') // type is `Record<'color', string>`
 *
 * // optimizer rewrites the code
 * const myVars = createVars<'color', 'myVars'>('color')
 * // type is now `{color: "--color-myVars"}`
 *
 * myVars.color // type is `--color-myVars`
 * ```
 *
 * This is so optimized variables can be used directly by the static parser downstream. The variable
 * names become statically analyzable.
 */
export type CsVarsMap<T extends string, ID extends string | never> = [ID] extends [never] ? Record<T, string> : {
    [K in T]: `--${K}-${ID}`;
};
export type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, ID> & {
    (input: Partial<Record<T, string>>): Record<T, string>;
};
/**
 * Take a CSS Variable name and return a variable property
 *
 * ```ts
 * const myVars = createVars('color')
 *
 * const myStyles = createStyles({
 *   color: cssVar(myVars.color) // color: 'var(--color-{hash})'
 * })
 * ```
 *
 * It can also support an optional fallback. Fallbacks should only be used if it is reasonable to
 * expect a CSS variable isn't defined.
 * ```ts
 * const myStyles = createStyles({
 *   color: cssVar(myVars.color, 'red') // color: 'var(--color-{hash}, red)'
 * })
 * ```
 *
 * If the project is set up for parsing with fallback files, a fallback will automatically be filled
 * during the parsing phase. This is helpful for cases when CSS variables are expected, but not set
 * in the environment.
 */
export declare function cssVar<I extends string, F extends string | undefined = undefined>(input: I, fallback?: F): `var(${I}${F extends undefined ? `` : F extends `--${string}` ? `, var(${F})` : `, ${F}`})`;
/**
 * Create temporary CSS variables to use in components. The CSS variable names will
 * be unique at runtime to avoid collisions. The return value is a function and a
 * Map. The function can be used to pass in values from JavaScript. The function will
 * return a map of variable keys to CSS Variable names.
 *
 * ```ts
 * // creates a `color` and `background` CSS variable
 * const myVars = createVars('color', 'background')
 *
 * // 'color' is a typed property. The type is `string`
 * console.log(myVars.color) // `'var(--color-{hash})'`
 *
 * // 'color' is a typed property. The type is `string?`
 * // The returned object can be assigned to the `style` property of an element
 * console.log(myVars({ color: 'red' })) //  `{'--color-{hash}': 'red'}`
 *
 * const div = document.createElement('div')
 * div.style = myVars({ color: 'red' }) // <div style="--color-{hash}: red;" />
 * ```
 */
export declare function createVars<T extends string, ID extends string>(input: {
    id: ID;
    args: T[];
}): CsVars<T, ID>;
export declare function createVars<T extends string>(...args: T[]): CsVars<T, never>;
export declare function createVars<T extends DefaultedVarsShape, ID extends string = never>(input: T, id?: ID): DefaultedVars<T, ID>;
type CSSVarName<ID extends string, Name> = `--${ToString<Name>}-${ID}`;
/**
 * For custom themes that do not overwrite every default. This is the type given to stencil
 * functions where everything is optional.
 */
type OptionalVars<T> = {
    [P in keyof T]?: T[P] extends string ? string : OptionalVars<T[P]>;
};
/**
 * Vars passed to style config functions. The values will always be strings.
 */
type RequiredVars<T> = {
    [P in keyof T]: T[P] extends string ? `--${string}` : RequiredVars<T[P]>;
};
type ToString<T> = string & T;
/**
 * Maps JS var names to CSS variable names
 *
 * ```ts
 * // ID unknown
 * DefaultedVarsMapToCSSVarNames<{foo: 'red'}, never> = Record<'foo', string>
 * // ID unknown, nested
 * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}> = Record<'foo', Record<'bar', string>>
 *
 * // ID known
 * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: '--red-my-id' }
 * // ID known, nested
 * DefaultedVarsMapToCSSVarNames<{foo: { bar: 'red' }}, 'my-id'> = { foo: { bar: '--red-my-id' }}
 * ```
 */
export type DefaultedVarsMapToCSSVarNames<V extends DefaultedVarsShape, ID extends string | never> = [ID] extends [never] ? V extends Record<string, string> ? {
    [K in keyof V]: `--${string}`;
} : {
    [K in keyof V]: {
        [K2 in keyof V[K]]: `--${string}`;
    };
} : {
    [K in keyof V]: V[K] extends Record<string, string> ? {
        [K2 in keyof V[K]]: CSSVarName<`${ToString<K2>}-${ID}`, K>;
    } : CSSVarName<ID, K>;
};
type ExtractValue<T, K> = K extends keyof T ? T[K] : K extends `${infer K1}-${infer K2}` ? K1 extends keyof T ? ExtractValue<T[K1], K2> : never : never;
/**
 * Maps CSS var names to defaulted values if possible. If no ID is provided, TypeScript won't know
 * the CSS var name and will return `Record<string, string>`. If the ID is known, a full mapping
 * will be returned.
 *
 * ```ts
 * // ID known
 * DefaultedVarsMap<{foo: 'red'}, 'my-id'> = { '--foo-my-id': 'red' }
 * // ID known, nested
 * DefaultedVarsMap<{foo: { bar: 'red' }}, 'my-id'> = { foo: { '--bar-my-id': 'red' }}
 * ```
 */
export type DefaultedVarsMap<V extends DefaultedVarsShape, ID extends string> = {
    $$defaults: [ID] extends [never] ? Record<string, string> : V extends Record<string, string> ? {
        [K in keyof V as CSSVarName<ID, K>]: V[K];
    } : {
        [K in FlattenObjectKeys<V> as CSSVarName<ID, K>]: ExtractValue<V, K>;
    };
};
type DefaultedVars<V extends DefaultedVarsShape, ID extends string> = DefaultedVarsMapToCSSVarNames<V, ID> & DefaultedVarsMap<V, ID> & DefaultVarsFn<V>;
type StencilDefaultVars<V extends DefaultedVarsShape, E extends BaseStencil<any, any, any, any, any> = never, ID extends string = never> = [E] extends [never] ? DefaultedVars<V, ID> : E extends BaseStencil<any, any, infer VE, any, infer IDE> ? DefaultedVarsMapToCSSVarNames<VE, IDE> & DefaultedVarsMap<VE, IDE> & DefaultedVarsMapToCSSVarNames<V, ID> & DefaultedVarsMap<V, ID> & DefaultVarsFn<V> : never;
type DefaultVarsFn<V extends DefaultedVarsShape> = {
    (input: OptionalVars<V>): Record<string, string>;
};
type FlattenObjectKeys<T extends Record<string, any>, K = keyof T> = K extends string ? T[K] extends Record<string, any> ? `${ToString<K>}-${FlattenObjectKeys<T[ToString<K>]>}` : `${ToString<K>}` : never;
export declare function createDefaultedVars<T extends DefaultedVarsShape, ID extends string = never>(input: T, id?: ID): DefaultedVars<T, ID>;
type ModifierConfig = Record<string, Record<string, CS>>;
/**
 * Helper type to convert `'true'` into `true` for boolean modifiers which are a pain to type as a
 * prop.
 */
type MaybeBoolean<T> = T extends 'true' | 'false' ? T | boolean : T;
type ModifierValues<T extends ModifierConfig> = {
    [P in keyof T]: MaybeBoolean<keyof T[P]>;
};
type ModifierFn<T extends ModifierConfig> = (modifiers: Partial<ModifierValues<T>>) => string;
export type ModifierReturn<T extends ModifierConfig> = T & ModifierFn<T>;
/**
 * Creates a modifier function that takes in a modifier config and will return a CSS class name that
 * matches the result. Modifiers can be thought as `if` or `switch` statements when conditionally
 * changing the styles of a component based on props. This function can be thought of as a helper
 * function that makes it easier to work with modifiers. Without it, you would have to implement
 * if/switch/ternary for each option.
 *
 * ```tsx
 * const myModifiers = createModifiers({
 *   // a modifier called 'size'
 *   size: {
 *     small: createStyles({ fontSize: 12 }),
 *     medium: createStyles({ fontSize: 14 })
 *   }
 * })
 *
 * // with the modifier function
 * myModifiers({ size: 'medium' }) // returns the medium class name
 *
 * // manually without the function
 * size === 'small' ? myModifiers.size.small : size === 'medium' ? myModifiers.size.medium : ''
 * ```
 */
export declare function createModifiers<M extends ModifierConfig>(input: M): ModifierReturn<M>;
export type CompoundModifier<M extends ModifierConfig> = {
    modifiers: {
        [K in keyof M]?: keyof M[K];
    };
    styles: string;
};
/**
 * Creates a compound modifier function that takes in a modifier config and a compound modifier
 * config and returns a space-delimited list of CSS class names to apply to an element. This
 * function is similar to the {@link createModifiers} function.
 *
 * ```tsx
 * const myModifiers = createModifiers({
 *   size: {large: 'large'},
 *   position: {start: 'start'}
 * })
 *
 * const myCompound = createCompoundModifiers(myModifiers, [
 *   {
 *     modifiers: {
 *       size: 'large',
 *       position: 'start'
 *     },
 *     styles: 'large-start'
 *   }
 * ])
 *
 * myCompound({size: 'large', position: 'start'}) // 'large-start'
 * myCompound({size: 'large'}) // ''
 * ```
 */
export declare function createCompoundModifiers<M extends ModifierConfig>(
/**
 * Modifiers created via `createModifiers`. The type will be extracted and applied to your
 * compound modifiers.
 */
modifiers: ModifierReturn<M>, compound: CompoundModifier<M>[]): ModifierFn<M>;
/**
 * All acceptable values of the `cs` prop. It can be a CSS class name, any CSS properties, an object
 * with a `className` and `styles`, or an array of these
 */
export type CSToPropsInput = undefined | CS | CsToPropsReturn | CSSObjectWithVars | CSToPropsInput[];
export type CsToPropsReturn = {
    className?: string;
    style?: CSSObjectWithVars;
};
/**
 * A function that takes in a single input, or an array. The type of the input is either:
 *
 * - `string` - it represents a CSS class name
 * - `undefined` - there is no value. This is provided for convenience for developers to not have to
 *   filter out undefined
 * - `{--{varName}-{hash}: {value}}` - a `Map` of CSS variable to values
 * - `{style: ..., className: ...}` an object already returned by another `csToProps` function call
 *   (for nesting)
 * - An array containing any of the above. This will recurse over each entry to produce a single,
 *   reduced `{style: ..., className: ...}` object
 * @param input
 * @returns
 */
export declare function csToProps(input: CSToPropsInput): CsToPropsReturn;
export interface CSProps {
    /** The `cs` prop takes in a single value or an array of values. You can pass the CSS class name
     * returned by {@link createStyles}, or the result of {@link createVars} and
     * {@link createModifiers}. If you're extending a component already using `cs`, you can merge that
     * prop in as well. Any style that is passed to the `cs` prop will override style props. If you
     * wish to have styles that are overridden by the `css` prop, or styles added via the `styled`
     * API, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also
     * handle style props, use {@link mergeStyles} instead.
     *
     *
     * ```tsx
     * import {handleCsProp} from '@workday/canvas-kit-styling';
     * import {mergeStyles} from '@workday/canvas-kit-react/layout';
     *
     * // ...
     *
     * // `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
     * // function signature, but adds support for style props.
     *
     * return (
     *   <Element
     *     {...handleCsProp(elemProps, [
     *       myStyles,
     *       myModifiers({ size: 'medium' }),
     *       myVars({ backgroundColor: 'red' })
     *     ])}
     *   >
     *     {children}
     *   </Element>
     * )
     * ```
     */
    cs?: CSToPropsInput;
}
/**
 * Creates CSS styles based on object-style input. It has a side-effect of adding CSS to the page
 * and will return a space-delimitated string of CSS class names meant to be added to an element.
 *
 * It can take a number of inputs of various types. The simplest is object-styles.
 *
 * ```ts
 * const myStyles = createStyles({
 *   backgroundColor: 'red'
 * })
 * ```
 *
 * The `createStyles` function is curried into 2 parts. The first function could be done at build
 * time. The returned function combines CSS class names and will remain as a small runtime.
 *
 * > **Note:** The order of calling `createStyles` is important. Each call will make a single CSS
 * > class selector and will be injected into the document's
 * > [StyleSheetList](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList). Style
 * > properties will be merge by the rules of [CSS
 * > specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). If two selectors
 * > have the same specificity, the last defined wins. Always make sure that the properties you want
 * > to win are last in your file.
 */
export declare function createStyles(...args: ({
    name: string;
    styles: string;
} | StyleProps | string)[]): string;
/**
 * This function handles the `cs` prop for you, as well as local styles you want to define. It will
 * force style merging with Emotion's runtime APIs, including [styled
 * components](https://emotion.sh/docs/styled) and the [css prop](https://emotion.sh/docs/css-prop).
 *
 * Runtime style merging works by forcing Emotion's styling merging if use of runtime APIs have been
 * detected. If only `createStyles` were used to style a component, the faster non-runtime styling
 * will be used.
 *
 * You can use `handleCsProp` if you wish to use {@link createStyles} on your own components and want
 * your components to be compatible with Emotion's runtime styling APIs.
 *
 * ```tsx
 * import {createStyles, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
 *
 * interface MyComponentProps extends CSProps {
 *   // other props
 * }
 *
 * const myStyles = createStyles({
 *   background: 'green',
 *   height: 40,
 *   width: 40
 * })
 *
 * const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
 *   return (
 *     <div
 *       {...handleCsProp(elemProps, [myStyles])}
 *     >
 *       {children}
 *     </div>
 *   )
 * }
 *
 * const StyledMyComponent(MyComponent)({
 *   background: 'red'
 * })
 *
 * const myOverridingStyles = createStyles({
 *   background: 'blue'
 * })
 *
 * // now everything works. Without `handleCsProp`, the last component would be a red box
 * export default () => (
 *   <>
 *     <MyComponent>Green box</MyComponent>
 *     <StyledMyComponent>Red box</StyledMyComponent>
 *     <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
 *   </>
 * )
 * ```
 */
export declare function handleCsProp<T extends CSProps & {
    className?: string | undefined;
    style?: CSS.Properties<string | number> | undefined;
}>(
/**
 * All the props to be spread onto an element. The `cs` prop will be removed an reduced to
 * `className` and `style` props which should be safe on every element.
 */
elemProps: T, 
/**
 * Optional local style created by `createStyles`. Using this parameter, you can style your
 * element while supporting proper style merging order.
 */
localCs?: CSToPropsInput): Omit<T, 'cs'>;
type StylesReturn<P extends Record<string, string>, V extends DefaultedVarsShape = {}, E extends BaseStencil<any, any, any, any, any> = never> = SerializedStyles | CSSObjectWithVars | ((vars: [E] extends [never] ? RequiredVars<V> & StencilVarsParts<P> : [E] extends [BaseStencil<any, infer PE, infer VE, any, any>] ? RequiredVars<VE & V> & StencilVarsParts<PE & P> : never) => SerializedStyles | CSSObjectWithVars);
export type StencilModifierConfig<P extends Record<string, string>, V extends DefaultedVarsShape = {}, E extends BaseStencil<any, any, any, any, any> = never> = Record<string, Record<string, StylesReturn<P, V, E>>>;
export type StencilCompoundConfig<M, P extends Record<string, string>, V extends DefaultedVarsShape = {}, E extends BaseStencil<any, any, any, any, any> = never> = {
    modifiers: [E] extends [never] ? MappedBoolean<M> : [E] extends [BaseStencil<infer ME, any, any, any, any>] ? MappedBoolean<ME & M> : never;
    styles: StylesReturn<P, V, E>;
};
export type MappedBoolean<T> = {
    [K in keyof T]?: MaybeBoolean<keyof T[K]>;
};
type ModifierValuesStencil<M extends StencilModifierConfig<any, any, any> = {}, V extends DefaultedVarsShape = {}> = {
    [K in keyof M]?: K extends keyof V ? MaybeBoolean<keyof M[K]> | (string & {}) : MaybeBoolean<keyof M[K]>;
};
export interface StencilConfig<M extends Record<string, Record<string, StylesReturn<P, V, E>>>, P extends Record<string, string> = {}, V extends DefaultedVarsShape = {}, E extends BaseStencil<any, any, any, any, any> = never, ID extends string | never = never> {
    /**
     * A Stencil can extend another stencil. Styles are not copied from one stencil to another, but
     * rather the class name generated for each stencil will be included in the stencil output. For
     * example:
     *
     * ```ts
     * const baseStencil = createStencil({
     *   base: {padding: 5}
     * });
     * const extendingStencil = createStencil({
     *   extends: baseStencil,
     *   base: {margin: 5}
     * });
     * ```
     *
     * In this example, `extendingStencil` does not have a base style that includes `padding`, but
     * calling the stencil will return both style classes created:
     *
     * ```ts
     * extendingStencil() // {className: 'css-{base} css-{extending}'}
     * ```
     *
     * Notice when the stencil is called, it will return the CSS class name of each stencil.
     *
     * An extending stencil can use a `compound` modifier that includes references to the base stencil
     * modifiers. For runtime, each compound modifier has a unique class name. The static CSS
     * extraction will use the base modifier name in the selector.
     */
    extends?: E;
    /**
     * A Stencil supports sub-elements called "parts". A part is modelled after the
     * [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) specification for shadow
     * trees in web components. A part refers to a sub-element for styling purposes. Compound
     * components should allow direct access to each semantic element, but sometimes a semantic
     * element needs to contain sub-elements that are not semantic for styling purposes. A part is a
     * style hook for these elements. A part allows for an explicit API for styling these elements so
     * that style overriding doesn't need complicated CSS selectors to target them. The part API is a
     * convenient wrapper to avoid magic stings. A part key should be short and descriptive - it
     * represents the JS name of the part. The value should be more descriptive since it will become
     * part of a CSS selector. For example, if the part key is "separator", the value should describe
     * what stencil the separator belongs to. A unique name avoids naming collisions. If a
     * `cardStencil` has a `separator` part and an `inputStencil` has a `separator` part, the value of
     * each should be `card-separator` and `input-separator` respectively. If you do not uniquely set
     * values, you can get unwanted CSS selector matching where the `inputStencil`'s part matches the
     * CSS of the `cardStencil` if a `Card` component contains an `Input` component.
     *
     * ```ts
     * const myButtonStencil = createStencil({
     *   parts: {
     *     icon: 'my-button-icon',
     *     label: 'my-button-label'
     *   },
     *   base: ({iconPart}) => ({
     *     padding: 10,
     *     // other base styles
     *
     *     [iconPart]: { // '[data-part="my-icon"]'
     *       // icon part styles
     *     },
     *     ':hover': {
     *       // hover base styles
     *       [iconPart]: {
     *         // hover styles for icon part
     *       }
     *     },
     *   })
     * })
     *
     * The part can then be used in a component's render function.
     * const MyComponent = ({children, ...elemProps}) => {
     *   return (
     *     <button {...handleCsProp(elemProps, myButtonStencil())}>
     *       <i {...myButtonStencil.parts.icon} />
     *       <span {...myButtonStencil.parts.label}>{children}</span>
     *     </button>
     *   )
     * }
     * ```
     */
    parts?: P;
    /**
     * A Stencil can support CSS variables. Since CSS variables cascade by default, variables are
     * defined with defaults. These defaults are added automatically to the `base` styles to prevent
     * CSS variables defined higher in the DOM tree from cascading into a component.
     *
     * ```ts
     * const buttonStencil = createStencil({
     *   vars: {color: 'red'},
     *   base: {padding: 5}
     * })
     * ```
     *
     * ```css
     * .css-button {
     *   --css-button-color: red;
     *   padding: 5px;
     * }
     * ```
     *
     * Access to variables in `base` and `modifiers` is done via a function wrapper that gives
     * all variables.
     *
     * ```ts
     * const buttonStencil = createStyles({
     *   vars: {color: 'red'},
     *   base({color}) {
     *     return {color: color}
     *   }
     * })
     * ```
     *
     * ```css
     * .css-button {
     *   --color-button: red;
     *   color: var(--color-button);
     * }
     * ```
     */
    vars?: V;
    /**
     * Base styles. These styles will always be returned when the stencil is called
     */
    base: StylesReturn<P, V, E>;
    /**
     * Stencil modifiers. The styles of a modifier are returned if the stencil is called with a
     * modifier key that matches the modifier value. For example:
     *
     * ```tsx
     * const stencil = createStencil({
     *   base: {
     *     padding: 5,
     *   },
     *   modifiers: {
     *     size: {
     *       large: {
     *         padding: 10
     *       }
     *     }
     *   }
     * })
     *
     * stencil({}) // padding is 5px
     * stencil({size: 'large'}) // padding is 10px
     * ```
     */
    modifiers?: M;
    /**
     * Stencil compound modifiers. The styles of a compound modifier are returned only if each modifier
     * matches the specified value. For example:
     *
     * ```tsx
     * const stencil = createStencil({
     *   base: {
     *     padding: 5,
     *   },
     *   modifiers: {
     *     size: {
     *       large: {
     *         padding: 10
     *       }
     *     },
     *     position: {
     *       start: {
     *         paddingInlineStart: 0
     *       }
     *     }
     *   },
     *   compound: [
     *     {
     *       modifiers: {
     *         size: 'large',
     *         position: 'start',
     *       },
     *       styles: {
     *         paddingInlineStart: 5
     *       }
     *     }
     *   ]
     * })
     *
     * stencil({})
     * // {padding: 5px;}
     * stencil({size: 'large'})
     * // {padding: 10px;}
     * stencil({position: 'start' })
     * // {padding: 5px; paddingInlineStart: 0}
     * stencil({size: 'large', position: 'start' })
     * // {padding: 10px; paddingInlineStart: 5px;}
     * ```
     */
    compound?: StencilCompoundConfig<M, P, V, E>[];
    /**
     * Modifiers are optional. If you need a modifier to always be defined, a default modifier value
     * will be used when a modifier is `undefined`
     */
    defaultModifiers?: [E] extends [never] ? StencilDefaultModifierReturn<M> : E extends BaseStencil<infer ME, any, any, any, any> ? StencilDefaultModifierReturn<ME & M> : undefined;
}
type StencilModifierReturn<M extends StencilModifierConfig<any, V>, V extends DefaultedVarsShape> = {
    [K1 in keyof M]: {
        [K2 in keyof M[K1]]: string;
    };
};
type StencilDefaultModifierReturn<M> = {
    [K1 in keyof M]?: keyof M[K1];
};
export interface BaseStencil<M extends StencilModifierConfig<P, V> = {}, P extends Record<string, string> = {}, V extends DefaultedVarsShape = {}, E extends BaseStencil<any, any, any, any, any> = never, ID extends string = never> {
    __extends?: E;
    __vars: V;
    __modifiers: M;
    __id: ID;
    __parts?: P;
}
export interface Stencil<M extends StencilModifierConfig<P, V, E> = {}, P extends Record<string, string> = {}, V extends DefaultedVarsShape = {}, E extends BaseStencil<any, any, any, any, any> = never, ID extends string = never> extends BaseStencil<M, P, V, E, ID> {
    (options?: [E] extends [never] ? ModifierValuesStencil<M, V> & VariableValuesStencil<V> : E extends BaseStencil<infer ME, any, infer VE, any, any> ? ModifierValuesStencil<ME & M, VE & V> & VariableValuesStencil<VE & V> : never): {
        className: string;
        style?: Record<string, string>;
    };
    parts: [E] extends [BaseStencil<any, infer PE, any, any, any>] ? StencilPartProps<PE & P> : StencilPartProps<P>;
    vars: StencilDefaultVars<V, E, ID>;
    base: string;
    modifiers: [E] extends [BaseStencil<infer ME, any, infer VE, any, any>] ? StencilModifierReturn<ME & M, VE & V> : StencilModifierReturn<M, V>;
    defaultModifiers: [E] extends [BaseStencil<infer ME, any, any, any, any>] ? StencilDefaultModifierReturn<ME & M> : StencilDefaultModifierReturn<M>;
}
type VariableValuesStencil<V extends DefaultedVarsShape> = V extends Record<string, string> ? {
    [K in keyof V]?: string;
} : {
    [K1 in keyof V]?: {
        [K2 in keyof V[K1]]: string;
    };
};
/**
 * This function is used in conjunction with Stencils to get a selector to match the current element
 * and a parent modifier. The selector will match a parent element with a modifier applied and the current
 * element. It should be used on the `base` config of a Stencil.
 *
 * ```ts
 * const childStencil = createStencil({
 *   base: {
 *     // base styles
 *     [parentModifier(parentStencil.modifiers.size.large)]: {
 *       // maybe adjust padding of this element
 *     }
 *   }
 * })
 * ```
 * @deprecated `parentModifier` is deprecated. While we support compat mode, we can't use `parentModifier`. If consumers pass in a style prop, this will created an unstable hash, breaking this function.
 */
export declare function parentModifier(value: string): string;
export type StencilVarsParts<T> = {
    [K in keyof T as `${K & string}${Capitalize<'Part'>}`]: `[data-part="${T[K] & string}"]`;
};
export type StencilPartProps<T> = {
    [K in keyof T]: {
        'data-part': T[K];
    };
};
/**
 * Creates a reuseable Stencil for styling elements. It takes vars, base styles, modifiers, and
 * compound modifiers.
 */
export declare function createStencil<M extends StencilModifierConfig<P, V, E>, // TODO: default to `{}` and fix inference in `StylesReturn` types so that modifier style return functions give correct inference to variables
const P extends Record<string, string> = {}, V extends DefaultedVarsShape = {}, E extends BaseStencil<any, any, any, any, any> = never, // use BaseStencil to avoid infinite loops
ID extends string = never>(config: StencilConfig<M, P, V, E, ID>, id?: ID): Stencil<M, P, V, E, ID>;
/**
 * Gets the current Emotion CSS instance, falling back to the one from `@emotion/css` if one wasn't
 * already created. This allows a custom cache to be created as an opt-in
 */
export declare function getInstance(): typeof _instance;
/**
 * Creates a custom instance of Emotion CSS. If this function is never called, the instance will be
 * what gets imported from `@emotion/css`. This function must be called before any Canvas Kit
 * component is imported or before any other `@workday/canvas-kit-styling` function is called. All
 * the style utility functions need an instance and will automatically create one if one isn't
 * already created.
 *
 * The style utilities inject styles as soon as they are called which means an instance needs to be
 * created before any Canvas Kit components are even imported. Your application bootstrap must
 * import a file that imports `@workday/canvas-kit-styling` and calls `createInstance` _before_ any
 * other Canvas Kit components are imported.
 */
export declare const createInstance: typeof _createInstance;
/**
 * Returns the cache used by all style utilities
 */
export declare function getCache(): EmotionCSS.EmotionCache;
/**
 * Create static keyframes. Use as a drop-in replacement to `keyframes` found in `@emotion/css` or
 * `@emotion/react`
 */
export declare function keyframes<ID extends string>(...args: ({
    name: ID;
    styles: string;
} | StyleProps | TemplateStringsArray)[]): ID;
/**
 * Allows injecting of global styles.
 */
export declare const injectGlobal: typeof EmotionCSS.injectGlobal;
export {};
//# sourceMappingURL=cs.d.ts.map