/**
 * @file inputStyles.stylex.ts
 * @input Uses theme tokens (color, spacing, radius, shadow, transition)
 * @output Exports shared input wrapper appearance styles
 * @position Shared styles consumed by TextInput, TextArea, NumberInput, DateInput,
 *   TimeInput, Selector, Typeahead, and Tokenizer
 *
 * Centralizes the input wrapper appearance (borders, focus outlines, hover shadows,
 * disabled state, status variants) so all input components stay in sync.
 * Individual components layer their own overrides (padding, alignment, etc.)
 * via stylex.props composition.
 */
import * as stylex from '@stylexjs/stylex';
/**
 * Base wrapper styles shared by all input components.
 * Components apply these as a foundation and override specific properties
 * (e.g. padding, alignItems, gap) as needed.
 */
export declare const inputWrapperStyles: Readonly<{
    readonly base: Readonly<{
        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 1>;
        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
        readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "4px">;
        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "8px">;
        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", "1px">;
        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0064E0, #2694FE)" | "light-dark(#CCD3DB, #494D53)">;
        readonly '--_field-radius': stylex.StyleXClassNameFor<"--_field-radius", "8px">;
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "var(--_field-radius)">;
        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#FFFFFF, #1F1F22)">;
        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "border-color, box-shadow">;
        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms" | "0s">;
        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | `inset 0px 0px 0px 2px ${stylex.StyleXVar<"light-dark(#0082FB33, #0082FB3F)">}` | {
            readonly '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${stylex.StyleXVar<"light-dark(#CCD3DB, #494D53)">} 30%, transparent)`;
        }>;
        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
    }>;
    readonly disabled: Readonly<{
        readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5>;
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#CCD3DB, #494D53)">;
        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none">;
    }>;
}>;
/**
 * Status border colors for input wrappers.
 * Keyed by InputStatusType.
 */
export declare const inputStatusBorderStyles: Readonly<{
    readonly warning: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E9AF08, #F2C00B)">;
    }>;
    readonly error: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E3193B, #F5394F)">;
    }>;
    readonly success: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0D8626, #0D8626)">;
    }>;
}>;
/**
 * Status hover shadow styles for input wrappers.
 * Keyed by InputStatusType.
 */
export declare const inputStatusHoverShadowStyles: Readonly<{
    readonly warning: Readonly<{
        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | {
            readonly '@media (hover: hover)': stylex.StyleXVar<"inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3)">;
        }>;
    }>;
    readonly error: Readonly<{
        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | {
            readonly '@media (hover: hover)': stylex.StyleXVar<"inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3)">;
        }>;
    }>;
    readonly success: Readonly<{
        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "none" | {
            readonly '@media (hover: hover)': stylex.StyleXVar<"inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3)">;
        }>;
    }>;
}>;
/**
 * Status focus border styles using :focus-within.
 * Used by input wrappers that contain a child input/textarea element.
 * Keyed by InputStatusType.
 */
export declare const inputStatusFocusWithinStyles: Readonly<{
    readonly warning: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E9AF08, #F2C00B)">;
    }>;
    readonly error: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E3193B, #F5394F)">;
    }>;
    readonly success: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0D8626, #0D8626)">;
    }>;
}>;
/**
 * Status focus border styles using :focus.
 * Used by components where the wrapper itself receives focus (e.g. Selector button).
 * Keyed by InputStatusType.
 */
export declare const inputStatusFocusStyles: Readonly<{
    readonly warning: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E9AF08, #F2C00B)">;
    }>;
    readonly error: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#E3193B, #F5394F)">;
    }>;
    readonly success: Readonly<{
        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "light-dark(#0D8626, #0D8626)">;
    }>;
}>;
//# sourceMappingURL=inputStyles.stylex.d.ts.map