/*!
 * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */
import type { ComponentPropsWithoutRef, ComponentRef, ElementType } from "react";
import { type CSSObject } from "@emotion/styled";
import { type DesignTokens } from "./OdysseyDesignTokensContext.js";
export type CreateOdysseyStyledComponentArgs<Tag extends ElementType> = {
    shouldForwardProp?: (prop: string) => boolean;
    tag: Tag;
};
type OdysseyStyleFunction<Tag extends ElementType, StyleProps extends object> = (props: ComponentPropsWithoutRef<Tag> & StyleProps & {
    odysseyDesignTokens: DesignTokens;
}) => CSSObject;
/**
 * Creates a styled component that automatically receives Odyssey design tokens from context, eliminating the need to pass `odysseyDesignTokens` as a prop at every call site.
 *
 * @example Basic usage
 * ```tsx
 * const StyledCard = createOdysseyStyledComponent({ tag: "div" })(
 *   ({ odysseyDesignTokens }) => ({
 *     padding: odysseyDesignTokens.Spacing4,
 *     borderRadius: odysseyDesignTokens.BorderRadiusTight,
 *   })
 * );
 * // No need to call useOdysseyDesignTokens or pass tokens as a prop:
 * <StyledCard>content</StyledCard>
 * ```
 *
 * @example With custom styling props
 * ```tsx
 * const StyledButton = createOdysseyStyledComponent({
 *   tag: "button",
 *   shouldForwardProp: (prop) => prop !== "isActive",
 * })<{ isActive: boolean }>(({ odysseyDesignTokens, isActive }) => ({
 *   backgroundColor: isActive
 *     ? odysseyDesignTokens.PalettePrimaryMain
 *     : "transparent",
 * }));
 * <StyledButton isActive={true}>click me</StyledButton>
 * ```
 *
 * @example As a ref target
 * ```tsx
 * // The returned component forwards its ref to the underlying DOM node, so it
 * // can anchor a MUI Tooltip or Popper, or be focused and measured directly.
 * const buttonRef = useRef<HTMLButtonElement>(null);
 * <StyledButton isActive={false} ref={buttonRef} />
 * ```
 */
export declare const createOdysseyStyledComponent: <Tag extends ElementType>({ tag, shouldForwardProp, }: CreateOdysseyStyledComponentArgs<Tag>) => <StyleProps extends object = Record<never, never>>(styleArg: OdysseyStyleFunction<Tag, StyleProps> | CSSObject) => import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ComponentPropsWithoutRef<Tag> & StyleProps> & import("react").RefAttributes<ComponentRef<Tag>>>>;
export {};
//# sourceMappingURL=createOdysseyStyledComponent.d.ts.map