/// <reference types="react" />
import { AliasKey, FontSize, SpacingKey } from '@jet-pie/theme/variations/skip';
import { ThemeWithMode, ThemeMode } from './types';
declare type DarkeningKeys = 'hover01' | 'hover02' | 'active01' | 'active02';
export declare const extractCSSVarName: (cssVar: string) => string;
export declare const isUsingCssVar: (colorAlias: string) => boolean;
export declare const getColorAliasValue: (colorAlias: string) => string;
export declare const getDarkenColor: (darkenKey: DarkeningKeys, alias: AliasKey) => (props: {
    theme: ThemeWithMode;
}) => string | number | ((props: {
    theme: ThemeWithMode;
}) => string | number);
export declare const getLightenColor: (lightenKey: DarkeningKeys, alias: AliasKey) => (props: {
    theme: ThemeWithMode;
}) => string | number | ((props: {
    theme: ThemeWithMode;
}) => string | number);
export declare const transparentizeAliasColor: (darkenKey: DarkeningKeys | number, alias: AliasKey) => (props: {
    theme: ThemeWithMode;
}) => string | number | ((props: {
    theme: ThemeWithMode;
}) => string | number);
export declare const getFontSize: (fontSize: FontSize) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
export declare const getColorAlias: (alias: AliasKey, theme?: ThemeWithMode | undefined) => string | number | ((props: {
    theme: ThemeWithMode;
}) => string | number);
export declare const noop: () => void;
export declare const slugify: (string: string) => string;
export declare const unitJSX: JSX.Element;
export declare const getDirection: (direction?: string) => import("styled-components").FlattenSimpleInterpolation;
export declare const kebabToCamelCase: (str: string) => string;
export declare const getDefaultTransition: (element?: string) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
/**
 *
 * Use this function for getting spacing values from the theme.
 * @param values {SpacingKey}
 * 's00' => 0px;
 * 's04' => 4px;
 * 's08' => 8px;
 * 's12' => 12px;
 * 's16' => 16px;
 * 's24' => 24px;
 * 's32' => 32px;
 * 's40' => 40px;
 * 's56' => 56px;
 * 's64' => 64px;
 * 's80' => 80px;
 */
export declare const getSpacing: (...values: SpacingKey[]) => (props: {
    theme: ThemeWithMode;
}) => string;
/**
 * Use this curried function for appending a string to the data-testid or data-trackid
 * provided to the component. This makes it easier to add those values the wrapper
 * element and sub-elements that a complex component might have.
 * @param id: the data-testid or data-trackid provided to the component
 * @returns function: (addon: string): string
 */
export declare const getId: (id?: string | undefined) => (addon?: string | undefined) => string | undefined;
/**
 * Use this function for asserting if the value is undefined | null
 * @param value: string | number | undefined | null | readonly string[]
 * @returns {boolean}
 */
export declare function isDifferentFromUndefinedOrNull(value: string | number | undefined | null | readonly string[]): boolean;
export declare const getComponentRoot: (componentRoot: string | HTMLElement | undefined) => HTMLElement;
export declare const getFocusableElements: (content: HTMLElement | null) => Array<HTMLElement>;
export declare const isDarkMode: (mode: ThemeMode) => boolean;
export declare const isLightMode: (mode: ThemeMode) => boolean;
export declare const getModifiedColorByThemeMode: (lightenKey: DarkeningKeys, alias: AliasKey) => (props: {
    theme: ThemeWithMode;
}) => string | number | ((props: {
    theme: ThemeWithMode;
}) => string | number);
/**
 * Returns a predicate filter function to filter out a transient props
 * @param transientProps array of string keys.
 */
export declare const convertToTransientProps: <T extends {}>(transientProps: (keyof T)[]) => (prop: string) => boolean;
export {};