import { T as ThemeConditionMedia, a as ThemeConditionAttr, b as ThemeConditionClass, c as ThemeConditionSelector, d as ThemeCondition, e as ThemeConditionAnd, f as ThemeConditionOr, g as ThemeOverrides, h as ThemeModeDefinition, i as ThemeSurface, j as ThemeConfig, k as TokenValues, l as TokenRef, C as CSSProperties, V as VariantDefinitions, m as ComponentConfigInput, n as ComponentReturn, F as FlatComponentConfigInput, o as FlatComponentReturn, S as SlotVariantDefinitions, p as SlotComponentConfigInput, q as SlotComponentFunction, M as MultiSlotConfigInput, r as MultiSlotReturn, s as StyleUtils, t as CSSPropertiesWithUtils, G as GlobalStyleTuple, u as FontFaceProps, v as CSSVarRef } from './global-style-tuple-CDbP5BY3.js';
export { w as CSSValue, x as ComponentConfig, y as ComponentConfigContext, z as ComponentInternalVarRef, A as ComponentSelections, B as ComponentVarDefinitions, D as ComponentVarDescriptor, E as ComponentVarNode, H as ComponentVarOptions, I as ComponentVarRefTree, J as ComponentVariants, K as DeepPartialTokenValues, L as FlatComponentConfig, N as FlatComponentSelections, O as FlatTokenEntry, P as FontFaceSrc, Q as KeyframeStops, R as SlotComponentConfig, U as SlotStyles, W as StyleDefinitions, X as StyleDefinitionsWithUtils, Y as ThemeConditionNot, Z as VariantOptionStyle, _ as flattenTokenEntries } from './global-style-tuple-CDbP5BY3.js';
export { e as ensureDocumentStylesAttached, f as flushSync, g as getRegisteredCss, i as insertRules, r as reset } from './hmr-D5sXuQgK.js';
import 'csstype';

/**
 * Declare cascade layer order and optionally prepend framework layer names
 * (e.g. Bootstrap) so TypeStyles participates in the same ordering graph.
 */
type CascadeLayersObjectInput = {
    readonly order: readonly string[];
    readonly prependFrameworkLayers?: readonly string[];
};
/** Argument to `createStyles` / `createTokens` / `createTypeStyles` when enabling `@layer`. */
type CascadeLayersInput = readonly string[] | CascadeLayersObjectInput;
/** Normalized cascade layer stack for runtime CSS emission. */
type ResolvedCascadeLayers = {
    /** Dedup key for the `@layer a, b, c;` preamble. */
    readonly preambleKey: string;
    /** Full `@layer …;` order statement (prepend + own layers). */
    readonly preambleCss: string;
    /** Layers TypeStyles may emit into (excludes `prependFrameworkLayers`). */
    readonly ownOrder: readonly string[];
    /** Full ordering passed to the preamble. */
    readonly fullOrder: readonly string[];
};

/** When present, theme rules are wrapped in `@layer` alongside token `:root` CSS. */
type ThemeEmitLayerContext = {
    readonly stack: ResolvedCascadeLayers;
    readonly layer: string;
};
declare function condMedia(query: string): ThemeConditionMedia;
declare function condAttr(name: string, value: string, opts: {
    scope: 'self' | 'ancestor';
}): ThemeConditionAttr;
declare function condClassName(name: string, opts: {
    scope: 'self' | 'ancestor';
}): ThemeConditionClass;
declare function condSelector(selector: string): ThemeConditionSelector;
declare function condAnd(...conditions: ThemeCondition[]): ThemeConditionAnd;
declare function condOr(...conditions: ThemeCondition[]): ThemeConditionOr;
/**
 * Negate a condition. Double negation is folded (`not(not(x))` → `x`).
 *
 * Supported inner shapes (single CSS branch after compile):
 * - `when.media` / `when.prefersDark` / `when.prefersLight` → `@media not (…)`
 * - `when.attr` / `when.className` with `scope: 'self'` → `:not(…)` on the theme class
 * - `when.attr` / `when.className` with `scope: 'ancestor'` → `:root:not(…) .theme-*` (intended when state lives on `html` / `:root`)
 *
 * Not supported: `when.selector`, `when.or`, combined `@media` + selector, or both ancestor and self selector parts on the same branch. Those log a dev warning and emit no rule.
 */
declare function condNot(condition: ThemeCondition): ThemeCondition;
/**
 * Condition builders for theme mode layers.
 *
 * @example
 * ```ts
 * tokens.when.prefersDark
 * tokens.when.media('(prefers-color-scheme: dark)')
 * tokens.when.attr('data-color-mode', 'dark', { scope: 'ancestor' })
 * tokens.when.or(tokens.when.prefersDark, tokens.when.attr('data-mode', 'dark', { scope: 'self' }))
 * ```
 */
declare const when: {
    readonly media: typeof condMedia;
    readonly attr: typeof condAttr;
    readonly className: typeof condClassName;
    readonly selector: typeof condSelector;
    readonly and: typeof condAnd;
    readonly or: typeof condOr;
    readonly not: typeof condNot;
    /** Shorthand for `when.media('(prefers-color-scheme: dark)')`. */
    readonly prefersDark: ThemeConditionMedia;
    /** Shorthand for `when.media('(prefers-color-scheme: light)')`. */
    readonly prefersLight: ThemeConditionMedia;
};
type ColorModeMediaOnlyOptions = {
    dark: ThemeOverrides;
};
type ColorModeAttributeOnlyOptions = {
    attribute: string;
    values: {
        dark: string;
        light?: string;
    };
    scope: 'self' | 'ancestor';
    dark: ThemeOverrides;
    light?: ThemeOverrides;
};
type ColorModeMediaOrAttributeOptions = {
    attribute: string;
    values: {
        dark: string;
        light?: string;
        system?: string;
    };
    scope: 'self' | 'ancestor';
    dark: ThemeOverrides;
};
type ColorModeSystemWithOverrideOptions = {
    attribute: string;
    values: {
        light: string;
        dark: string;
        system?: string;
    };
    scope: 'self' | 'ancestor';
    light: ThemeOverrides;
    dark: ThemeOverrides;
};
declare function presetMediaOnly(opts: ColorModeMediaOnlyOptions): ThemeModeDefinition[];
declare function presetAttributeOnly(opts: ColorModeAttributeOnlyOptions): ThemeModeDefinition[];
/**
 * Dark when the OS prefers dark **or** the attribute matches `values.dark`.
 *
 * **`values.system`** — Optional app-facing token only. No extra CSS rule is emitted for it:
 * with `data-*` set to `system`, neither branch of the `or` matches from the attribute side;
 * appearance follows the media branch (and your `base` tokens) like OS “system” mode.
 */
declare function presetMediaOrAttribute(opts: ColorModeMediaOrAttributeOptions): ThemeModeDefinition[];
declare function presetSystemWithLightDarkOverride(opts: ColorModeSystemWithOverrideOptions): ThemeModeDefinition[];
/**
 * Color mode presets that expand into `ThemeModeDefinition[]` arrays.
 * Use via the `colorMode` property on `tokens.createTheme()`.
 *
 * @example
 * ```ts
 * tokens.createTheme('acme', {
 *   base: lightTokens,
 *   colorMode: tokens.colorMode.systemWithLightDarkOverride({
 *     attribute: 'data-color-mode',
 *     values: { light: 'light', dark: 'dark' },
 *     scope: 'ancestor',
 *     light: lightTokens,
 *     dark: darkTokens,
 *   }),
 * });
 * ```
 */
declare const colorMode: {
    readonly mediaOnly: typeof presetMediaOnly;
    readonly attributeOnly: typeof presetAttributeOnly;
    readonly mediaOrAttribute: typeof presetMediaOrAttribute;
    readonly systemWithLightDarkOverride: typeof presetSystemWithLightDarkOverride;
};
/**
 * Create a themed surface with base token overrides and optional mode layers.
 *
 * Returns a `ThemeSurface` object whose `className` (and string coercion)
 * is a stable, human-readable class name like `"theme-acme"`.
 *
 * @example
 * ```ts
 * const acme = tokens.createTheme('acme', {
 *   base: { color: { text: { primary: '#111827' } } },
 *   colorMode: tokens.colorMode.mediaOnly({ dark: darkOverrides }),
 * });
 *
 * // acme.className === 'theme-acme'
 * // `${acme}` === 'theme-acme'
 * ```
 */
declare function createTheme(name: string, config: ThemeConfig, scopeId?: string, layerContext?: ThemeEmitLayerContext): ThemeSurface;
/**
 * Shorthand: create a theme surface that applies `darkOverrides` under
 * `@media (prefers-color-scheme: dark)`.
 *
 * Equivalent to:
 * ```ts
 * tokens.createTheme(name, {
 *   modes: [{ id: 'dark', overrides: darkOverrides, when: tokens.when.prefersDark }],
 * });
 * ```
 */
declare function createDarkMode(name: string, darkOverrides: ThemeOverrides, scopeId?: string, layerContext?: ThemeEmitLayerContext): ThemeSurface;

type CreateTokensOptions = {
    /**
     * Prefix for CSS custom property namespaces and theme class segments so multiple
     * packages on one page do not share `--color-*` or `.theme-*` collisions.
     */
    scopeId?: string;
    /**
     * When set with **`tokenLayer`**, `:root` custom properties and theme surfaces are wrapped in
     * `@layer tokenLayer { … }`, and a matching `@layer …;` order preamble is registered.
     */
    layers?: CascadeLayersInput;
    /**
     * Default `@layer` from **`layers`** for token and theme CSS (`:root`, themes). Required when **`layers`** is set.
     * Override per call: `tokens.create('color', { … }, { layer: '…' })`.
     */
    tokenLayer?: string;
};
/**
 * Design token and theme API bound to an optional `scopeId`.
 */
type TokensApi = {
    /** Same `scopeId` passed to `createTokens`, if any. */
    readonly scopeId: string | undefined;
    create: <T extends TokenValues>(namespace: string, values: T, options?: {
        layer?: string;
    }) => TokenRef<T>;
    use: <T extends TokenValues = TokenValues>(namespace: string) => TokenRef<T>;
    createTheme: (name: string, config: ThemeConfig) => ThemeSurface;
    createDarkMode: (name: string, darkOverrides: ThemeOverrides) => ThemeSurface;
    when: typeof when;
    colorMode: typeof colorMode;
};
/**
 * Create a tokens + theme API for a package or app. Each instance keeps its own
 * namespace registry; with `scopeId`, emitted custom properties and theme classes
 * are prefixed so they do not collide with other bundles on the same page.
 *
 * @example
 * ```ts
 * const tokens = createTokens({ scopeId: 'design-system' });
 * const color = tokens.create('color', { primary: '#0066ff' });
 * color.primary // var(--design-system-color-primary)
 * ```
 */
declare function createTokens(options?: CreateTokensOptions): TokensApi;

/**
 * How generated class names are formed for `styles.class`, `styles.component`,
 * and related APIs.
 *
 * - `semantic` — readable names like `button-base`, `button-intent-primary` (default).
 * - `hashed` — stable hash from namespace, variant segment, and declarations, with a short namespace slug for debugging.
 * - `atomic` — hash-only names (shortest); same collision properties as `hashed` when `scopeId` differs.
 */
type ClassNamingMode = 'semantic' | 'hashed' | 'atomic';
type ClassNamingConfig = {
    mode: ClassNamingMode;
    /** Prefix for hashed / atomic output and for `hashClass`. Default `ts`. */
    prefix: string;
    /**
     * Package, app, or per-file id: same logical `styles.component` / `styles.class` name under different
     * scopes produces different classes. In development, re-registering the same scope + component name
     * (e.g. HMR) clears prior rules instead of throwing. Use `fileScopeId(import.meta)` for file-local
     * isolation (CSS Modules–style).
     */
    scopeId: string;
    /**
     * When set (via `createStyles({ layers: … })`), every `class` / `hashClass` / `component`
     * call must pass `{ layer: … }` and emitted rules are wrapped in `@layer`.
     */
    cascadeLayers?: ResolvedCascadeLayers;
};
/** Default naming options used by `createStyles()` when no overrides are passed. */
declare const defaultClassNamingConfig: ClassNamingConfig;
declare function mergeClassNaming(partial?: Partial<ClassNamingConfig>): ClassNamingConfig;
/**
 * Stable, short id derived from `import.meta.url` (file path). Use as `createStyles({ scopeId: fileScopeId(import.meta) })`
 * so the same logical namespace in different files does not collide (similar to CSS Modules file scope).
 *
 * @example
 * ```ts
 * const styles = createStyles({ scopeId: fileScopeId(import.meta) });
 * styles.component('button', { base: { padding: '8px' } });
 * ```
 */
declare function fileScopeId(meta: {
    url: string;
}): string;
/** CSS custom property namespace segment for `tokens.create` / `createTheme` when `scopeId` is set. */
declare function scopedTokenNamespace(scopeId: string | undefined, logicalNamespace: string): string;

/**
 * Type-level `Array.prototype.join(', ')` for tuple literals — used by {@link has}, {@link is}, {@link where}
 * so `[builder(…)]` keys stay **specific template literals** (TypeScript otherwise invents a `string` index
 * when mixed with plain CSS longhands unless the key type is narrow).
 */
type JoinComma<T extends readonly string[]> = T extends readonly [] ? '' : T extends readonly [infer A extends string] ? A : T extends readonly [infer A extends string, ...infer R extends string[]] ? R['length'] extends 0 ? A : `${A}, ${JoinComma<R>}` : string;
/**
 * Type-level `Array.prototype.join(' and ')` for container query condition groups.
 */
type JoinAnd<T extends readonly string[]> = T extends readonly [] ? '' : T extends readonly [infer A extends string] ? A : T extends readonly [infer A extends string, ...infer R extends string[]] ? R['length'] extends 0 ? A : `${A} and ${JoinAnd<R>}` : string;

/**
 * Object key for nested styles: `@container … { … }`.
 * Returned by {@link container} for typed container queries (see also raw `@container` strings).
 */
type ContainerQueryKey = `@container ${string}`;
/**
 * Typed `container-name` from {@link createContainerRef} or `styles.containerRef()` (human-readable; use for `containerName` and {@link container}).
 */
type ContainerNameRef = string & {
    readonly __containerNameRef?: true;
};
/**
 * Size features for {@link container}. Maps to parenthesis groups joined with `and`.
 * Numbers become `px` except `aspectRatio` (emitted as a number or pass a string like `16 / 9`).
 */
type ContainerQueryFeatures = {
    minWidth?: string | number;
    maxWidth?: string | number;
    minHeight?: string | number;
    maxHeight?: string | number;
    minInlineSize?: string | number;
    maxInlineSize?: string | number;
    minBlockSize?: string | number;
    maxBlockSize?: string | number;
    aspectRatio?: string | number;
    orientation?: 'portrait' | 'landscape';
};
/**
 * Named container + size features (`name` matches `containerName` on an ancestor).
 */
type ContainerQueryObject = ContainerQueryFeatures & {
    name?: string;
};
type EmitLengthish<V> = V extends 0 ? '0' : V extends number ? `${V}px` : V extends string ? V : never;
type EmitAspect<V> = V extends 0 ? '0' : V extends number ? `${V}` : V extends string ? V : never;
type GMinWidth<F extends ContainerQueryFeatures> = F['minWidth'] extends infer V ? V extends string | number ? [`(min-width: ${EmitLengthish<V>})`] : [] : [];
type GMaxWidth<F extends ContainerQueryFeatures> = F['maxWidth'] extends infer V ? V extends string | number ? [`(max-width: ${EmitLengthish<V>})`] : [] : [];
type GMinHeight<F extends ContainerQueryFeatures> = F['minHeight'] extends infer V ? V extends string | number ? [`(min-height: ${EmitLengthish<V>})`] : [] : [];
type GMaxHeight<F extends ContainerQueryFeatures> = F['maxHeight'] extends infer V ? V extends string | number ? [`(max-height: ${EmitLengthish<V>})`] : [] : [];
type GMinInlineSize<F extends ContainerQueryFeatures> = F['minInlineSize'] extends infer V ? V extends string | number ? [`(min-inline-size: ${EmitLengthish<V>})`] : [] : [];
type GMaxInlineSize<F extends ContainerQueryFeatures> = F['maxInlineSize'] extends infer V ? V extends string | number ? [`(max-inline-size: ${EmitLengthish<V>})`] : [] : [];
type GMinBlockSize<F extends ContainerQueryFeatures> = F['minBlockSize'] extends infer V ? V extends string | number ? [`(min-block-size: ${EmitLengthish<V>})`] : [] : [];
type GMaxBlockSize<F extends ContainerQueryFeatures> = F['maxBlockSize'] extends infer V ? V extends string | number ? [`(max-block-size: ${EmitLengthish<V>})`] : [] : [];
type GAspectRatio<F extends ContainerQueryFeatures> = F['aspectRatio'] extends infer V ? V extends string | number ? [`(aspect-ratio: ${EmitAspect<V>})`] : [] : [];
type GOrientation<F extends ContainerQueryFeatures> = F['orientation'] extends infer V ? V extends 'portrait' | 'landscape' ? [`(orientation: ${V})`] : [] : [];
type ContainerConditionTuple<F extends ContainerQueryFeatures> = [
    ...GMinWidth<F>,
    ...GMaxWidth<F>,
    ...GMinHeight<F>,
    ...GMaxHeight<F>,
    ...GMinInlineSize<F>,
    ...GMaxInlineSize<F>,
    ...GMinBlockSize<F>,
    ...GMaxBlockSize<F>,
    ...GAspectRatio<F>,
    ...GOrientation<F>
];
type CondFromFeatures<F extends ContainerQueryFeatures> = JoinAnd<ContainerConditionTuple<F>>;
type NamePart<F extends ContainerQueryObject> = F['name'] extends string ? F['name'] extends '' ? '' : F['name'] : '';
/** Narrow `@container` key for {@link container} object form — allows `[container({ … })]` without widening. */
type ContainerObjectKey<F extends ContainerQueryObject> = CondFromFeatures<Omit<F, 'name'>> extends infer B extends string ? B extends '' ? never : NamePart<F> extends '' ? `@container ${B}` : `@container ${NamePart<F>} ${B}` : never;
type CreateContainerRefOptions = {
    /**
     * When non-empty, the name is `{scopeId}-{label}` (sanitized), same as `createStyles({ scopeId })`.
     * When empty, the name is `{prefix}-{label}` instead.
     */
    scopeId?: string;
    /**
     * Used only if **`scopeId`** is empty: `{prefix}-{label}`. Default `ts` (same default as class `prefix`).
     */
    prefix?: string;
};
/**
 * Build a **human-readable** `container-name`: share one value between `containerName` and {@link container}’s `name` argument without repeating string literals.
 *
 * Shape: **`{scopeId}-{label}`** when `scopeId` is set, else **`{prefix}-{label}`** (defaults match `createStyles`).
 *
 * Prefer **`styles.containerRef(label)`** so `scopeId` / `prefix` come from your instance.
 *
 * @example
 * ```ts
 * const shell = createContainerRef('product-shell', { scopeId: 'my-app' });
 *
 * styles.class('shell', {
 *   containerType: 'inline-size',
 *   containerName: shell,
 * });
 *
 * styles.class('shell-body', {
 *   ...styles.atRuleBlock(styles.container(shell, { minWidth: 480 }), { flexDirection: 'row' }),
 * });
 * ```
 */
declare function createContainerRef(label: string, options?: CreateContainerRefOptions): ContainerNameRef;
/**
 * Build a typed `@container` key for use in style objects (same output shape as a manual `'@container …'` string).
 *
 * **Ecosystem notes:** StyleX and Panda usually expose `@container` as string keys (or Panda conditions);
 * Vanilla Extract’s `createContainer()` scopes names—here you set `containerName` and pass the same string as `name`.
 *
 * @example Size query
 * ```ts
 * styles.class('card', {
 *   containerType: 'inline-size',
 *   ...styles.atRuleBlock(styles.container({ minWidth: 400 }), { padding: '24px' }),
 * });
 * ```
 *
 * @example Named container
 * ```ts
 * styles.class('item', {
 *   ...styles.atRuleBlock(styles.container('sidebar', { minWidth: 300 }), {
 *     flexDirection: 'row',
 *   }),
 * });
 * ```
 *
 * @example Style / scroll / `not` — raw condition after `@container`
 * ```ts
 * ...styles.atRuleBlock(styles.container('style(--theme: dark)'), { color: '#fff' })
 * ```
 */
declare function container<const F extends ContainerQueryObject>(features: F): ContainerObjectKey<F>;
declare function container<const N extends string, const F extends ContainerQueryFeatures>(name: N, features: F): CondFromFeatures<F> extends infer B extends string ? B extends '' ? never : `@container ${N} ${B}` : never;
/** Raw condition after `@container` — literal `S` preserves a narrow key for `[container('…')]`. */
declare function container<const S extends string>(rawCondition: S): `@container ${S}`;
declare function container(rawCondition: string): ContainerQueryKey;

/**
 * Returns a one-key object to **spread** into a style map.
 *
 * TypeScript widens **computed** `[someFn()]` keys to `string`, which clashes with {@link CSSProperties}’s
 * `` `@${string}` `` index signature. Spreading `Record<@${string}, CSSProperties>` preserves a narrow key type.
 *
 * Works for keys from `container()`, literal `'@media (…)'`, `'@supports (…)'`, etc.
 *
 * @example
 * ```ts
 * styles.class('card', {
 *   padding: '16px',
 *   ...atRuleBlock(styles.container({ minWidth: 400 }), { padding: '24px' }),
 * });
 * ```
 */
declare function atRuleBlock<const K extends `@${string}`>(key: K, block: CSSProperties): Record<K, CSSProperties>;

/**
 * Object key for nested styles using {@link has} — compiles to `.base:has(…)`.
 * Prefer variadic {@link has} so keys narrow to a single literal (mixes cleanly with longhands).
 */
type HasNestedKey = `&:has(${string})`;
/**
 * Object key for nested styles using {@link is} — compiles to `.base:is(…)`.
 */
type IsNestedKey = `&:is(${string})`;
/**
 * Object key for nested styles using {@link where} — compiles to `.base:where(…)` (zero-specificity).
 */
type WhereNestedKey = `&:where(${string})`;
/**
 * Pseudos often grouped with {@link is} for shared focus/hover styles.
 * Plain strings still work; this union improves autocomplete at call sites.
 */
type IsPseudoArg = ':hover' | ':active' | ':focus' | ':focus-visible' | ':focus-within' | ':disabled' | ':enabled' | ':checked' | ':indeterminate' | ':read-only' | ':read-write' | ':placeholder-shown' | ':default' | ':required' | ':optional' | ':valid' | ':invalid' | ':in-range' | ':out-of-range' | ':any-link' | ':link' | ':visited' | ':target' | ':target-within';
/**
 * Build a nested style key for `:has()` — parental/descendant-aware styling without leaving the style object.
 *
 * Accepts a [relative selector list](https://drafts.csswg.org/selectors/#relative-real-selector-list):
 * multiple arguments become comma-separated branches inside `:has()`.
 *
 * **Ecosystem:** StyleX exposes contextual selectors via dedicated `when.*` helpers; Panda/Stitches lean on
 * nesting strings. TypeStyles keeps emit as real CSS and adds small builders beside raw `'&:has(…)'` keys.
 *
 * @example
 * ```ts
 * styles.class('nav', {
 *   base: { display: 'flex' },
 *   [has('.active')]: { borderBottom: '2px solid blue' },
 * });
 * ```
 */
declare function has<const T extends readonly string[]>(...relativeSelectors: T): `&:has(${JoinComma<T>})`;
/**
 * Build a nested style key for `:is()` — group pseudos or tags into one branch with the specificity of the
 * most specific argument selector.
 *
 * @example
 * ```ts
 * [is(':hover', ':focus-visible')]: { outline: '2px solid blue' }
 * ```
 */
declare function is<const T extends readonly string[]>(...selectors: T): `&:is(${JoinComma<T>})`;
/**
 * Build a nested style key for `:where()` — **zero-specificity** wrapper so library defaults stay easy for
 * consumers to override (unlike `:is()`, which preserves specificity of its arguments).
 *
 * @example
 * ```ts
 * [where('.nav')]: { display: 'flex', gap: '8px' }
 * ```
 */
declare function where<const T extends readonly string[]>(...selectors: T): `&:where(${JoinComma<T>})`;

/**
 * Compose multiple component functions or class strings into one.
 * Returns a new function that calls all inputs and joins results.
 *
 * @example
 * ```ts
 * const base = styles.component('base', { base: { padding: '8px' } });
 * const primary = styles.component('primary', { base: { color: 'blue' } });
 * const button = styles.compose(base, primary);
 *
 * button(); // "base-base primary-base"
 * ```
 */
type AnySelectorFunction = {
    (...args: unknown[]): string;
};
declare function compose(...selectors: Array<AnySelectorFunction | string | false | null | undefined>): AnySelectorFunction;
type StylesApi = {
    /** Resolved naming config for this instance (useful for debugging). */
    readonly classNaming: Readonly<ClassNamingConfig>;
    /**
     * Typed `@container` object keys for nested styles (size features, named containers, or raw conditions).
     * Same function as the named export `container` from `typestyles`.
     */
    readonly container: typeof container;
    /**
     * Readable `container-name` for `containerName`: `{scopeId}-{label}` or `{prefix}-{label}` when `scopeId` is empty.
     * Same as `createContainerRef(label, { scopeId, prefix })` from this instance’s naming config.
     */
    readonly containerRef: (label: string) => ContainerNameRef;
    /**
     * Build a spreadable `{ [ @key ]: nested }` so computed `@…` keys stay typed (see `atRuleBlock` export).
     */
    readonly atRuleBlock: typeof atRuleBlock;
    /**
     * Nested `&:has(…)` object keys (same helpers as the `has` export).
     */
    readonly has: typeof has;
    /**
     * Nested `&:is(…)` object keys for grouped states (same as the `is` export).
     */
    readonly is: typeof is;
    /**
     * Nested `&:where(…)` keys — zero-specificity defaults (same as the `where` export).
     */
    readonly where: typeof where;
    class: (name: string, properties: CSSProperties) => string;
    hashClass: (properties: CSSProperties, label?: string) => string;
    component: {
        <const V extends VariantDefinitions>(namespace: string, config: ComponentConfigInput<V>): ComponentReturn<V>;
        <const K extends string>(namespace: string, config: FlatComponentConfigInput<K>): FlatComponentReturn<K>;
        <const Slots extends readonly string[], V extends SlotVariantDefinitions<Slots[number]>>(namespace: string, config: SlotComponentConfigInput<Slots, V>): SlotComponentFunction<Slots, V>;
        <const Slots extends readonly string[]>(namespace: string, config: MultiSlotConfigInput<Slots>): MultiSlotReturn<Slots>;
    };
    withUtils: <U extends StyleUtils>(utils: U) => StylesWithUtilsApi<U>;
    compose: typeof compose;
};
/** Options argument for styles when `createStyles({ layers })` is used. */
type LayerOption<L extends string = string> = {
    readonly layer: L;
};
type CreateStylesInput = Partial<Omit<ClassNamingConfig, 'cascadeLayers'>> & {
    layers?: CascadeLayersInput;
    /**
     * Only applies when using `createTokens` / `createTypeStyles` for `:root` and theme CSS.
     * Ignored by `createStyles` alone (passing it here avoids repeating the key at the factory).
     */
    tokenLayer?: string;
};
type LayeredComponentFn<L extends string> = {
    <const V extends VariantDefinitions>(namespace: string, config: ComponentConfigInput<V>, options: LayerOption<L>): ComponentReturn<V>;
    <const K extends string>(namespace: string, config: FlatComponentConfigInput<K>, options: LayerOption<L>): FlatComponentReturn<K>;
    <const Slots extends readonly string[], V extends SlotVariantDefinitions<Slots[number]>>(namespace: string, config: SlotComponentConfigInput<Slots, V>, options: LayerOption<L>): SlotComponentFunction<Slots, V>;
    <const Slots extends readonly string[]>(namespace: string, config: MultiSlotConfigInput<Slots>, options: LayerOption<L>): MultiSlotReturn<Slots>;
};
type LayeredComponentFnWithUtils<L extends string> = {
    <const V extends VariantDefinitions>(namespace: string, config: ComponentConfigInput<V>, options: LayerOption<L>): ComponentReturn<V>;
    <const K extends string>(namespace: string, config: FlatComponentConfigInput<K>, options: LayerOption<L>): FlatComponentReturn<K>;
    <const Slots extends readonly string[], V extends SlotVariantDefinitions<Slots[number]>>(namespace: string, config: SlotComponentConfigInput<Slots, V>, options: LayerOption<L>): SlotComponentFunction<Slots, V>;
    <const Slots extends readonly string[]>(namespace: string, config: MultiSlotConfigInput<Slots>, options: LayerOption<L>): MultiSlotReturn<Slots>;
};
type StylesWithUtilsApiLayered<U extends StyleUtils, L extends string> = Omit<StylesWithUtilsApi<U>, 'class' | 'hashClass' | 'component'> & {
    class: (name: string, properties: CSSPropertiesWithUtils<U>, options: LayerOption<L>) => string;
    hashClass: (properties: CSSPropertiesWithUtils<U>, options: LayerOption<L> & {
        label?: string;
    }) => string;
    component: LayeredComponentFnWithUtils<L>;
    compose: typeof compose;
};
type StylesApiWithLayers<L extends string> = Omit<StylesApi, 'class' | 'hashClass' | 'component' | 'withUtils'> & {
    class: (name: string, properties: CSSProperties, options: LayerOption<L>) => string;
    hashClass: (properties: CSSProperties, options: LayerOption<L> & {
        label?: string;
    }) => string;
    component: LayeredComponentFn<L>;
    withUtils: <U extends StyleUtils>(utils: U) => StylesWithUtilsApiLayered<U, L>;
};
/**
 * Create a styles API with its own class naming config (scope, mode, prefix).
 * Use one instance per package or micro-frontend so hashed names stay isolated without global mutation.
 * Pass **`scopeId`** (or `fileScopeId(import.meta)` per module) so duplicate logical namespaces across
 * files do not collide; in development, registering the same name twice under one scope throws.
 *
 * Pass **`layers`** to enable CSS cascade layers: a tuple (or `{ order, prependFrameworkLayers? }`)
 * defines a single `@layer a, b, c;` preamble, and every `class` / `hashClass` / `component` call
 * must pass `{ layer: … }` with a name from that stack.
 */
declare function createStyles<const L extends readonly string[]>(options: Partial<Omit<ClassNamingConfig, 'cascadeLayers'>> & {
    layers: L;
    tokenLayer?: L[number];
}): StylesApiWithLayers<L[number]>;
declare function createStyles(options: Partial<Omit<ClassNamingConfig, 'cascadeLayers'>> & {
    layers: CascadeLayersObjectInput;
    tokenLayer?: string;
}): StylesApiWithLayers<string>;
declare function createStyles(options?: CreateStylesInput): StylesApi;
type StylesWithUtilsApi<U extends StyleUtils> = {
    readonly container: typeof container;
    readonly containerRef: (label: string) => ContainerNameRef;
    readonly atRuleBlock: typeof atRuleBlock;
    readonly has: typeof has;
    readonly is: typeof is;
    readonly where: typeof where;
    class: (name: string, properties: CSSPropertiesWithUtils<U>) => string;
    hashClass: (properties: CSSPropertiesWithUtils<U>, label?: string) => string;
    component: {
        <const V extends VariantDefinitions>(namespace: string, config: ComponentConfigInput<V>): ComponentReturn<V>;
        <const K extends string>(namespace: string, config: FlatComponentConfigInput<K>): FlatComponentReturn<K>;
        <const Slots extends readonly string[], V extends SlotVariantDefinitions<Slots[number]>>(namespace: string, config: SlotComponentConfigInput<Slots, V>): SlotComponentFunction<Slots, V>;
        <const Slots extends readonly string[]>(namespace: string, config: MultiSlotConfigInput<Slots>): MultiSlotReturn<Slots>;
    };
    compose: typeof compose;
};

type CreateGlobalOptions = {
    /**
     * Prefixes inserted rule keys so globals from different bundles dedupe independently.
     * Within one scope, each `selector` (+ optional `layer`) maps to a single rule: a second
     * `global.style('body', …)` with different properties is ignored; non-production builds warn.
     */
    scopeId?: string;
};
type CreateGlobalWithLayers = CreateGlobalOptions & {
    layers: CascadeLayersInput;
    /**
     * Default `@layer` for `style()` when the call (or recipe tuple) omits `{ layer }`.
     * Must be one of the stack’s own layer names (not a prepended framework layer).
     */
    globalLayer?: string;
};
type GlobalApiUnlayered = {
    readonly cascadeLayers: undefined;
    style(tuple: GlobalStyleTuple): void;
    style(selector: string, properties: CSSProperties, options?: {
        layer?: string;
    }): void;
    /** Apply multiple recipe tuples (e.g. {@link reset} from `typestyles/globals`). */
    apply(...tuples: GlobalStyleTuple[]): void;
    fontFace(family: string, props: FontFaceProps): void;
};
type GlobalApiLayered = {
    readonly cascadeLayers: ResolvedCascadeLayers;
    style(tuple: GlobalStyleTuple): void;
    style(selector: string, properties: CSSProperties, options?: {
        layer?: string;
    }): void;
    apply(...tuples: GlobalStyleTuple[]): void;
    fontFace(family: string, props: FontFaceProps): void;
};
declare function createGlobal(options?: CreateGlobalOptions): GlobalApiUnlayered;
declare function createGlobal(options: CreateGlobalWithLayers): GlobalApiLayered;

type NamingPartial = Partial<Omit<ClassNamingConfig, 'cascadeLayers'>>;
type GlobalLayerOption<L extends string = string> = {
    /**
     * Default `@layer` for `global.style()` when using `layers`.
     * Omit to require `{ layer }` on each `global.style` call or recipe tuple.
     * Per-call override: `global.style(selector, props, { layer: '…' })` or `body(props, { layer: '…' })`.
     */
    globalLayer?: L;
};
/** Unified factory: one `scopeId`, shared cascade layer stack for both class rules and token/theme CSS. */
declare function createTypeStyles(options: NamingPartial): {
    styles: StylesApi;
    tokens: TokensApi;
    global: GlobalApiUnlayered;
};
declare function createTypeStyles<const L extends readonly [string, ...string[]]>(options: NamingPartial & {
    layers: L;
    tokenLayer: L[number];
} & GlobalLayerOption<L[number]>): {
    styles: StylesApiWithLayers<L[number]>;
    tokens: TokensApi;
    global: GlobalApiLayered;
};
declare function createTypeStyles(options: NamingPartial & {
    layers: CascadeLayersObjectInput;
    tokenLayer: string;
} & GlobalLayerOption): {
    styles: StylesApiWithLayers<string>;
    tokens: TokensApi;
    global: GlobalApiLayered;
};

/**
 * A keyframe stop is either 'from', 'to', or a percentage like '50%'.
 */
type KeyframeStops = Record<string, CSSProperties>;
/**
 * Create a CSS @keyframes animation and return its name.
 *
 * The returned string is the animation name — use it directly in
 * `animation` shorthand or `animationName`.
 *
 * @example
 * ```ts
 * const fadeIn = keyframes.create('fadeIn', {
 *   from: { opacity: 0 },
 *   to: { opacity: 1 },
 * });
 *
 * const card = styles.component('card', {
 *   base: { animation: `${fadeIn} 300ms ease` },
 * });
 * ```
 *
 * @example
 * ```ts
 * const bounce = keyframes.create('bounce', {
 *   '0%': { transform: 'translateY(0)' },
 *   '50%': { transform: 'translateY(-20px)' },
 *   '100%': { transform: 'translateY(0)' },
 * });
 * ```
 */
declare function createKeyframes(name: string, stops: KeyframeStops): string;

/**
 * Type-safe helpers for CSS color functions.
 *
 * Each function returns a plain CSS string — no runtime color math.
 * Works naturally with token references since tokens are strings too.
 */
type ColorValue = string | number;
/** Color spaces supported by color-mix(). */
type ColorMixSpace = 'srgb' | 'srgb-linear' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec2020' | 'lab' | 'oklab' | 'xyz' | 'xyz-d50' | 'xyz-d65' | 'hsl' | 'hwb' | 'lch' | 'oklch';
/**
 * `rgb(r g b)` or `rgb(r g b / a)`
 *
 * @example
 * ```ts
 * color.rgb(0, 102, 255)        // "rgb(0 102 255)"
 * color.rgb(0, 102, 255, 0.5)   // "rgb(0 102 255 / 0.5)"
 * ```
 */
declare function rgb(r: ColorValue, g: ColorValue, b: ColorValue, alpha?: ColorValue): string;
/**
 * `hsl(h s l)` or `hsl(h s l / a)`
 *
 * @example
 * ```ts
 * color.hsl(220, '100%', '50%')       // "hsl(220 100% 50%)"
 * color.hsl(220, '100%', '50%', 0.8)  // "hsl(220 100% 50% / 0.8)"
 * ```
 */
declare function hsl(h: ColorValue, s: ColorValue, l: ColorValue, alpha?: ColorValue): string;
/**
 * `oklch(L C h)` or `oklch(L C h / a)`
 *
 * @example
 * ```ts
 * color.oklch(0.7, 0.15, 250)       // "oklch(0.7 0.15 250)"
 * color.oklch(0.7, 0.15, 250, 0.5)  // "oklch(0.7 0.15 250 / 0.5)"
 * ```
 */
declare function oklch(l: ColorValue, c: ColorValue, h: ColorValue, alpha?: ColorValue): string;
/**
 * `oklab(L a b)` or `oklab(L a b / alpha)`
 *
 * @example
 * ```ts
 * color.oklab(0.7, -0.1, -0.1)       // "oklab(0.7 -0.1 -0.1)"
 * color.oklab(0.7, -0.1, -0.1, 0.5)  // "oklab(0.7 -0.1 -0.1 / 0.5)"
 * ```
 */
declare function oklab(l: ColorValue, a: ColorValue, b: ColorValue, alpha?: ColorValue): string;
/**
 * `lab(L a b)` or `lab(L a b / alpha)`
 *
 * @example
 * ```ts
 * color.lab('50%', 40, -20)  // "lab(50% 40 -20)"
 * ```
 */
declare function lab(l: ColorValue, a: ColorValue, b: ColorValue, alpha?: ColorValue): string;
/**
 * `lch(L C h)` or `lch(L C h / alpha)`
 *
 * @example
 * ```ts
 * color.lch('50%', 80, 250)  // "lch(50% 80 250)"
 * ```
 */
declare function lch(l: ColorValue, c: ColorValue, h: ColorValue, alpha?: ColorValue): string;
/**
 * `hwb(h w b)` or `hwb(h w b / alpha)`
 *
 * @example
 * ```ts
 * color.hwb(220, '10%', '0%')  // "hwb(220 10% 0%)"
 * ```
 */
declare function hwb(h: ColorValue, w: ColorValue, b: ColorValue, alpha?: ColorValue): string;
/**
 * `color-mix(in colorspace, color1 p1%, color2 p2%)`
 *
 * Mixes two colors in the given color space. Percentages are optional.
 *
 * @example
 * ```ts
 * color.mix('red', 'blue')                      // "color-mix(in srgb, red, blue)"
 * color.mix('red', 'blue', 30)                   // "color-mix(in srgb, red 30%, blue)"
 * color.mix(theme.primary, 'white', 20)          // "color-mix(in srgb, var(--theme-primary) 20%, white)"
 * color.mix('red', 'blue', 50, 'oklch')          // "color-mix(in oklch, red 50%, blue)"
 * ```
 */
declare function mix(color1: string, color2: string, percentage?: number, colorSpace?: ColorMixSpace): string;
/**
 * `light-dark(lightColor, darkColor)`
 *
 * Uses the `light-dark()` CSS function that resolves based on
 * the computed `color-scheme` of the element.
 *
 * @example
 * ```ts
 * color.lightDark('#111', '#eee')                     // "light-dark(#111, #eee)"
 * color.lightDark(theme.textLight, theme.textDark)     // "light-dark(var(--theme-textLight), var(--theme-textDark))"
 * ```
 */
declare function lightDark(lightColor: string, darkColor: string): string;
/**
 * Adjust the alpha/opacity of any color using `color-mix()`.
 *
 * This is a common pattern: mixing a color with transparent to change opacity.
 * Works with any color value including token references.
 *
 * @example
 * ```ts
 * color.alpha('red', 0.5)              // "color-mix(in srgb, red 50%, transparent)"
 * color.alpha(theme.primary, 0.2)      // "color-mix(in srgb, var(--theme-primary) 20%, transparent)"
 * color.alpha('#0066ff', 0.8, 'oklch') // "color-mix(in oklch, #0066ff 80%, transparent)"
 * ```
 */
declare function alpha(colorValue: string, opacity: number, colorSpace?: ColorMixSpace): string;

type colorFns_ColorMixSpace = ColorMixSpace;
declare const colorFns_alpha: typeof alpha;
declare const colorFns_hsl: typeof hsl;
declare const colorFns_hwb: typeof hwb;
declare const colorFns_lab: typeof lab;
declare const colorFns_lch: typeof lch;
declare const colorFns_lightDark: typeof lightDark;
declare const colorFns_mix: typeof mix;
declare const colorFns_oklab: typeof oklab;
declare const colorFns_oklch: typeof oklch;
declare const colorFns_rgb: typeof rgb;
declare namespace colorFns {
  export { type colorFns_ColorMixSpace as ColorMixSpace, colorFns_alpha as alpha, colorFns_hsl as hsl, colorFns_hwb as hwb, colorFns_lab as lab, colorFns_lch as lch, colorFns_lightDark as lightDark, colorFns_mix as mix, colorFns_oklab as oklab, colorFns_oklch as oklch, colorFns_rgb as rgb };
}

/**
 * Apply styles to an arbitrary CSS selector.
 *
 * Use for CSS resets, body/root defaults, third-party elements, or any
 * selector that isn't tied to a specific component class.
 *
 * @example
 * ```ts
 * global.style('body', { margin: 0, fontFamily: 'sans-serif' });
 * global.style('a:hover', { textDecoration: 'underline' });
 * global.style('*, *::before, *::after', { boxSizing: 'border-box' });
 * ```
 *
 * Also accepts a tuple from `typestyles/globals` recipes:
 *
 * ```ts
 * import { boxSizing, body } from 'typestyles/globals';
 * global.style(boxSizing());
 * global.style(body({ margin: 0 }));
 * ```
 *
 * Optional `{ layer }` on the tuple or as a third argument is ignored on the root `global` object —
 * use `createGlobal({ layers })` or `createTypeStyles({ layers }).global` for `@layer`.
 */
declare function globalStyle(tuple: GlobalStyleTuple): void;
declare function globalStyle(selector: string, properties: CSSProperties, options?: {
    layer?: string;
}): void;
/** Apply multiple `typestyles/globals` tuples (e.g. {@link reset}) in one call. */
declare function globalApply(...tuples: GlobalStyleTuple[]): void;
/**
 * Declare a `@font-face` rule to load a custom font.
 *
 * Multiple weights/styles of the same family can be registered by calling
 * this function multiple times with different `src` values — each call is
 * deduplicated by `family +` normalized `src`.
 *
 * @example
 * ```ts
 * global.fontFace('Inter', {
 *   src: "url('/fonts/Inter-Regular.woff2') format('woff2')",
 *   fontWeight: 400,
 *   fontStyle: 'normal',
 *   fontDisplay: 'swap',
 * });
 *
 * global.fontFace('Inter', {
 *   src: "url('/fonts/Inter-Bold.woff2') format('woff2')",
 *   fontWeight: 700,
 *   fontStyle: 'normal',
 *   fontDisplay: 'swap',
 * });
 * ```
 *
 * @example Variable font (weight range)
 * ```ts
 * global.fontFace('InterVar', {
 *   src: "url('/fonts/Inter.var.woff2') format('woff2')",
 *   fontWeight: '100 900',
 *   fontDisplay: 'swap',
 * });
 * ```
 *
 * @example Multiple `src` entries (e.g. `local()` then remote)
 * ```ts
 * global.fontFace('Inter', {
 *   src: [`local('Inter')`, "url('/fonts/Inter.woff2') format('woff2')"],
 *   fontDisplay: 'swap',
 * });
 * ```
 */
declare function globalFontFace(family: string, props: FontFaceProps): void;

/**
 * Create a unique CSS custom property reference.
 *
 * Returns a `var(--ts-N)` string that can be used anywhere a CSS value is
 * accepted. Use assignVars() to set its value per element via inline styles.
 *
 * @example
 * ```ts
 * const cardBg = createVar();
 *
 * const card = styles.component('card', {
 *   base: { background: cardBg, padding: '16px' },
 * });
 *
 * // Consumer sets the variable per instance:
 * <div className={card('base')} style={assignVars({ [cardBg]: '#ff0099' })} />
 * ```
 */
declare function createVar(): CSSVarRef;
/**
 * Build a CSS custom property assignment map from var refs to values.
 *
 * The returned object is safe to spread into a React (or any framework)
 * inline `style` prop.
 *
 * @example
 * ```ts
 * assignVars({ [cardBg]: '#ff0099' })
 * // → { '--ts-1': '#ff0099' }
 * ```
 */
declare function assignVars(vars: Partial<Record<CSSVarRef, string>>): Record<string, string>;

/**
 * Join class name parts, filtering out falsy values.
 *
 * A lightweight utility for combining TypeStyles classes, external class
 * strings, and conditional expressions into a single `className` string.
 *
 * @example
 * ```ts
 * import { cx } from 'typestyles';
 *
 * cx('card', isActive && 'active', className);
 * // => "card active my-external-class"
 *
 * cx(button('base', 'primary'), 'extra');
 * // => "button-base button-primary extra"
 * ```
 */
declare function cx(...parts: Array<string | undefined | null | false | 0 | ''>): string;

/**
 * Helpers for CSS `calc()` and `clamp()` that keep the function parentheses in one place.
 * Values are plain strings at runtime — no validation of inner syntax.
 */
/** Token refs, lengths, percentages, etc. */
type CssMathValue = string | number;
/**
 * Tagged template: wraps the interpolated expression in `calc(...)`.
 *
 * @example
 * ```ts
 * import { calc } from 'typestyles';
 *
 * calc`100vh - 2 * ${t.space[4]}`
 * // => "calc(100vh - 2 * var(--space-4))"
 * ```
 */
declare function calc(strings: TemplateStringsArray, ...values: CssMathValue[]): string;
/**
 * CSS `clamp(MIN, PREFERRED, MAX)`.
 *
 * @example
 * ```ts
 * import { clamp } from 'typestyles';
 *
 * clamp('1rem', '5vw', '3rem')
 * // => "clamp(1rem, 5vw, 3rem)"
 * ```
 */
declare function clamp(min: CssMathValue, preferred: CssMathValue, max: CssMathValue): string;

/**
 * Helper for CSS `content` string values. Emits a double-quoted CSS string; values are plain strings
 * at runtime — same spirit as `calc` / `clamp` in css-math.
 */
/**
 * Wrap `text` in a CSS string (`content: "…";`). `null` / `undefined` yield `''` (omit the property
 * or pair with a conditional if you need no declaration).
 *
 * @example
 * ```ts
 * import { content } from 'typestyles';
 *
 * content() // => '' (skip property or use a conditional if you want no rule)
 * content('') // => '""' → valid `content: "";` for an empty pseudo-element box
 * content('*') // => '"*"' → `content: "*";`
 * ```
 */
declare function content(text?: string | null): string;

/**
 * Default style API (semantic class names, empty `scopeId`). Prefer `createStyles({ scopeId, mode, prefix })`
 * per package or micro-frontend for isolation.
 *
 * @example
 * ```ts
 * // Multi-variant component (CVA-style)
 * const button = styles.component('button', {
 *   base: { padding: '8px 16px' },
 *   variants: {
 *     intent: { primary: { backgroundColor: '#0066ff' } },
 *     size: { sm: { fontSize: '14px' }, lg: { fontSize: '18px' } },
 *   },
 *   defaultVariants: { intent: 'primary', size: 'sm' },
 * });
 *
 * button({ intent: 'primary', size: 'lg' })
 *
 * const card = styles.class('card', { padding: '1rem' });
 * ```
 */
declare const styles: StylesApi;
/**
 * Global CSS API for arbitrary selectors and font-face declarations.
 *
 * @example
 * ```ts
 * global.style('body', { margin: 0 });
 * global.apply(...reset());
 * global.fontFace('Inter', { src: "url('/Inter.woff2') format('woff2')", fontWeight: 400 });
 * global.fontFace('Inter', { src: [`local('Inter')`, "url('/Inter.woff2') format('woff2')"] });
 * ```
 */
declare const global: {
    readonly style: typeof globalStyle;
    readonly apply: typeof globalApply;
    readonly fontFace: typeof globalFontFace;
};
/**
 * Default token API (unscoped custom properties). Prefer `createTokens({ scopeId })` when multiple
 * bundles share a page.
 *
 * @example
 * ```ts
 * const color = tokens.create('color', { primary: '#0066ff' });
 * color.primary // "var(--color-primary)"
 *
 * const acme = tokens.createTheme('acme', {
 *   base: { color: { primary: '#ff6600' } },
 *   colorMode: tokens.colorMode.mediaOnly({ dark: darkOverrides }),
 * });
 * ```
 */
declare const tokens: TokensApi;
/**
 * Keyframe animation API.
 *
 * @example
 * ```ts
 * const fadeIn = keyframes.create('fadeIn', {
 *   from: { opacity: 0 },
 *   to: { opacity: 1 },
 * });
 *
 * const card = styles.component('card', {
 *   base: { animation: `${fadeIn} 300ms ease` },
 * });
 * ```
 */
declare const keyframes: {
    readonly create: typeof createKeyframes;
};
/**
 * Type-safe CSS color function helpers.
 *
 * Each function returns a plain CSS color string — no runtime color math.
 * Composes naturally with token references.
 *
 * @example
 * ```ts
 * color.rgb(0, 102, 255)                    // "rgb(0 102 255)"
 * color.oklch(0.7, 0.15, 250)               // "oklch(0.7 0.15 250)"
 * color.mix(theme.primary, 'white', 20)      // "color-mix(in srgb, var(--theme-primary) 20%, white)"
 * color.alpha(theme.primary, 0.5)            // "color-mix(in srgb, var(--theme-primary) 50%, transparent)"
 * color.lightDark('#111', '#eee')            // "light-dark(#111, #eee)"
 * ```
 */
declare const color: typeof colorFns;

export { CSSProperties, CSSPropertiesWithUtils, CSSVarRef, type CascadeLayersInput, type CascadeLayersObjectInput, type ClassNamingConfig, type ClassNamingMode, type ColorMixSpace, ComponentConfigInput, ComponentReturn, type ContainerNameRef, type ContainerObjectKey, type ContainerQueryFeatures, type ContainerQueryKey, type ContainerQueryObject, type CreateContainerRefOptions, type CreateStylesInput, type CreateTokensOptions, type CssMathValue, FlatComponentConfigInput, FlatComponentReturn, FontFaceProps, type GlobalApiLayered, type GlobalApiUnlayered, GlobalStyleTuple, type HasNestedKey, type IsNestedKey, type IsPseudoArg, type LayerOption, type LayeredComponentFn, MultiSlotConfigInput, type ResolvedCascadeLayers, SlotComponentConfigInput, SlotComponentFunction, SlotVariantDefinitions, StyleUtils, type StylesApi, type StylesApiWithLayers, ThemeCondition, ThemeConditionAnd, ThemeConditionAttr, ThemeConditionClass, ThemeConditionMedia, ThemeConditionOr, ThemeConditionSelector, ThemeConfig, type ThemeEmitLayerContext, ThemeModeDefinition, ThemeOverrides, ThemeSurface, TokenRef, TokenValues, type TokensApi, VariantDefinitions, type WhereNestedKey, assignVars, atRuleBlock, calc, clamp, color, colorMode, container, content, createContainerRef, createDarkMode, createGlobal, createStyles, createTheme, createTokens, createTypeStyles, createVar, cx, defaultClassNamingConfig, fileScopeId, global, has, is, keyframes, mergeClassNaming, scopedTokenNamespace, styles, tokens, when, where };