import type { SharedTokens } from '@instructure/ui-themes';
/**
 * This function creates CSS-in-JS styles for focus indicators.
 *
 * @returns CSS-in-JS style object containing focus outline styles ready for use with emotion or similar libraries.
 */
declare const calcFocusOutlineStyles: (
/**
 * The focus outline theme configuration object containing color and sizing tokens.
 */
theme: SharedTokens["focusOutline"], params?: {
    /**
     * The color variant to use for the focus outline
     */
    focusColor?: "info" | "inverse" | "success" | "danger";
    /**
     * Whether to position the outline outside ('offset') or inside ('inset') the element.
     */
    focusPosition?: "offset" | "inset";
    /**
     * Whether to include smooth transition animations for focus changes.
     */
    shouldAnimateFocus?: boolean;
    /**
     * Whether to apply focus styles to :focus-within pseudo-class for container elements.
     */
    focusWithin?: boolean;
    /**
     * Whether to force showing the focus outline.
     */
    withFocusOutline?: boolean;
    /**
     * What CSS selector to use to display the focus ring, `:focus` by default.
     */
    customCSSSelector?: string;
}) => {
    '&:focus-within'?: {
        outlineColor: string;
        outlineStyle: string;
        outlineWidth: string;
        outlineOffset: string;
    } | undefined;
    outlineColor: string;
    outlineStyle: string;
    outlineWidth?: string | undefined;
    outlineOffset: string;
    transition?: string | undefined;
};
export default calcFocusOutlineStyles;
export { calcFocusOutlineStyles };
//# sourceMappingURL=calcFocusOutlineStyles.d.ts.map