import { componentsCSSProps, CSSProps, CSSPropType } from './cssProps';
type ExtractValues<P extends CSSProps> = {
    [K in keyof P as P[K]['type'] extends 'values' ? K : never]: CSSPropType<P[K]> | undefined;
};
type PassedValues<P extends CSSProps> = keyof ExtractValues<P> extends never ? never : ExtractValues<P>;
/**
 * This hook should be called by components with CSS props of type `values`, for the `prop-*` utility classes to
 * work in browsers that don't support CSS container style queries (only Chrome and Safari TP support them as of
 * September 2024). Here's how it works: first of all, it checks if style queries are supported by trying to use
 * them on an invisible element (with `@style-[--style-queries-test=testing]:[--style-queries-test:success]` and
 * by setting that custom property on the root element of every component in the custom Tailwind plugin). If the
 * element doesn't have `--style-queries-test: success` as a result, we know style queries are not supported and
 * the polyfill is needed. A `ResizeObserver` is then used to detect changes to the custom properties set by the
 * `prop-*` utility classes. Ideally, we would use some kind of computed style observer, but that doesn't exist,
 * except as a proposal (https://github.com/w3c/csswg-drafts/issues/8982). So instead, anytime one of the custom
 * properties that interest us changes, we make sure another one changes as well; for instance if we have a prop
 * named `size`, we will have a `--gds-prop-size` property as well as `--gds-prop-polyfill-size`, and the latter
 * is a length (with a unique value for each possible value of the prop, e.g. `1px`, `2px`, etc.) so that it can
 * be used to resize the invisible element, which triggers the `ResizeObserver`. From there, we read the updated
 * values from the custom properties and render them in data attributes on the root element, which the `@prop-*`
 * variants generate selectors for in addition to native style queries. To accomplish this, the hook returns two
 * things: `polyfillAttributes`, an object that should be spread on the root element, and `polyfillElement`, the
 * aforementioned invisible element that should be rendered somewhere under it (if possible, as a direct child).
 * TODO: Consider using `@bramus/style-observer` instead of `ResizeObserver` (but it's tricky because the custom
 * properties need to be registered as `<custom-ident>`, which may not be compatible with other parts of the CSS
 * props system).
 */
export declare function useCSSPropsPolyfill<C extends keyof typeof componentsCSSProps>(componentName: C, passedValues: PassedValues<(typeof componentsCSSProps)[C]>, forceEnable?: boolean): {
    polyfillAttributes: {
        [k: string]: (string | number | boolean) | undefined;
    };
    polyfillElement: import("react/jsx-runtime").JSX.Element | null;
};
export {};
//# sourceMappingURL=useCSSPropsPolyfill.d.ts.map