import { BillingAddressRequirement, CreditCardAdditionalFields } from './payment-method-form';
import { Appearance } from './types';
/**
 * Scoped CSS so resting `.Input` / `.Label` declarations land on the
 * host skeleton, not the iframe. `font-family` keeps a system fallback
 * in case the host has not loaded the merchant face.
 */
export declare function skeletonRulesToCss(scope: string, rules: Appearance["rules"] | undefined): string | undefined;
export declare const SKELETON_STYLES = "\n.amos-js-form-skeleton {\n  box-sizing: border-box;\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif;\n  gap: var(--field-gap);\n  margin: 0 -4px;\n  padding-block: 0.25rem;\n  pointer-events: none;\n  width: calc(100% + 8px);\n}\n.amos-js-form-skeleton-field {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  min-width: 0;\n  width: 100%;\n}\n.amos-js-form-skeleton-label {\n  /* Hidden copy of the form label so font-size / line-height / wrapping\n   * occupy the same space as the iframe. Empty boxes collapse to 0 height\n   * even with line-height set. */\n  flex-shrink: 0;\n  font-size: var(--label-font-size);\n  font-weight: var(--label-font-weight, 500);\n  line-height: 1.75rem;\n  visibility: hidden;\n}\n.amos-js-form-skeleton-input {\n  animation: amos-js-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  /* input-background is often white like the page; input (border color)\n   * stays visible. Input backgroundColor from rules still wins via\n   * scoped skeleton CSS when the merchant sets it. */\n  background: var(--input, var(--accent));\n  border: var(--input-border-width, 1px) solid transparent;\n  border-radius: calc(var(--radius) * 0.8);\n  box-sizing: border-box;\n  font-size: var(--input-font-size, 0.875rem);\n  font-weight: var(--input-font-weight, 400);\n  height: auto;\n  line-height: 1;\n  min-height: var(--input-height);\n  overflow: hidden;\n  padding: 0 var(--input-padding, 0.75rem);\n  width: 100%;\n}\n.amos-js-form-skeleton-input::before {\n  /* Line box so .Input fontSize / lineHeight / padding grow this the\n   * same way they grow a real control (height is a minimum). */\n  content: \"\\00a0\";\n}\n.amos-js-form-skeleton-input-floating {\n  min-height: var(--floating-input-height);\n}\n.amos-js-form-skeleton-row {\n  align-items: flex-start;\n  display: flex;\n  gap: var(--control-gap);\n  width: 100%;\n}\n.amos-js-form-skeleton-row-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--field-gap);\n  width: 100%;\n}\n@container (min-width: 24rem) {\n  .amos-js-form-skeleton-row-stack {\n    align-items: flex-start;\n    flex-direction: row;\n    gap: var(--control-gap);\n  }\n}\n.amos-js-wallet-skeleton {\n  flex: none;\n  width: 100%;\n}\n@keyframes amos-js-skeleton-pulse {\n  50% { opacity: 0.5; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .amos-js-form-skeleton-input {\n    animation: none;\n  }\n}\n";
export declare function ensureSkeletonStyles(): void;
/**
 * Host-skeleton `--font-family`. Matches first-paint iframe defaults:
 * merchant `--font-family` wins; `fonts: []` without that key uses the
 * system stack so Inter is not measured when the iframe will not load it.
 */
export declare function resolveSkeletonFontFamily(appearance: Appearance | undefined): string;
export type PaymentMethodFormSkeletonKind = "card" | "bank";
export type PaymentMethodFormSkeletonOptions = {
    kind: PaymentMethodFormSkeletonKind;
    appearance?: Appearance;
    additionalFields?: CreditCardAdditionalFields;
    billingAddressRequirement?: BillingAddressRequirement;
};
export type PaymentMethodFormSkeleton = {
    element: HTMLElement;
    update: (options: PaymentMethodFormSkeletonOptions) => void;
};
/**
 * Host-page placeholder that mirrors card/bank field layout using the
 * same appearance variables the iframe will apply. Shown immediately
 * while the iframe document loads, then removed when appearance is
 * ready.
 */
export declare function createPaymentMethodFormSkeleton(options: PaymentMethodFormSkeletonOptions): PaymentMethodFormSkeleton;
export type WalletButtonSkeletonOptions = {
    /** Painted height of the wallet button slot (CSS length). */
    height: string;
    /** Corner radius matching the iframe / native button. */
    borderRadius?: string;
};
export type WalletButtonSkeleton = {
    element: HTMLElement;
    update: (options: WalletButtonSkeletonOptions) => void;
};
/**
 * Host-page placeholder for Google Pay / Apple Pay: a pulsing bar at
 * the button's height. Shown immediately while the iframe loads, then
 * removed when appearance is ready.
 */
export declare function createWalletButtonSkeleton(options: WalletButtonSkeletonOptions): WalletButtonSkeleton;
/**
 * Corner radius for a wallet-button skeleton. Prefers host iframe
 * chrome, then native Google / Apple button radius, then 4px.
 */
export declare function resolveWalletButtonSkeletonBorderRadius({ iframeStyle, buttonProps, }: {
    iframeStyle?: {
        borderRadius?: string | number;
    };
    buttonProps?: {
        buttonRadius?: number;
        style?: Record<string, string | number | undefined>;
    };
}): string;