import { type ComponentPropsWithRef, type ElementType } from 'react';
export type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'desktop' | 'mobile';
export type DefaultPositions = 'center' | 'end' | 'start';
export type VPoint = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48;
export type VSpacing = VPoint | 'auto' | 'inherit';
export type UtilityFragmentProperties<ET extends ElementType = 'div'> = {
    vAlignContent?: DefaultPositions | 'around' | 'between' | 'evenly';
    vAlignItems?: DefaultPositions | 'baseline' | 'stretch';
    vAlignSelf?: DefaultPositions | 'auto' | 'stretch';
    vColGap?: VPoint;
    vContainerHide?: BreakPoints;
    vElevation?: 'inset' | 'large' | 'medium' | 'none' | 'small' | 'xlarge' | 'xxlarge' | 'xsmall';
    vFlex?: boolean;
    vFlexCol?: boolean;
    vFlexColReverse?: boolean;
    vFlexGrow?: boolean;
    vFlexGrow0?: boolean;
    vFlexInline?: boolean;
    vFlexNoWrap?: boolean;
    vFlexRow?: boolean;
    vFlexRowReverse?: boolean;
    vFlexShrink?: boolean;
    vFlexShrink0?: boolean;
    vFlexWrap?: boolean;
    vFlexWrapReverse?: boolean;
    vGap?: Omit<VSpacing, 'auto'> | 'normal';
    vHide?: boolean;
    vJustifyContent?: DefaultPositions | 'around' | 'between' | 'evenly';
    vMargin?: VSpacing;
    vMarginBottom?: VSpacing;
    vMarginHorizontal?: VSpacing;
    vMarginLeft?: VSpacing;
    vMarginRight?: VSpacing;
    vMarginTop?: VSpacing;
    vMarginVertical?: VSpacing;
    vMediaHide?: BreakPoints;
    vPadding?: VSpacing;
    vPaddingBottom?: VSpacing;
    vPaddingHorizontal?: VSpacing;
    vPaddingLeft?: VSpacing;
    vPaddingRight?: VSpacing;
    vPaddingTop?: VSpacing;
    vPaddingVertical?: VSpacing;
    vRowGap?: VPoint;
} & ComponentPropsWithRef<ET>;
/**
 * Wraps around a component and add Nova utility classes to its direct child without adding extra elements to the DOM.
 * @docs {@link https://design.visa.com/base-elements/responsive-grid-system/breakpoints/?code_library=react | See Docs}
 * @vgar TODO
 * @wcag TODO
 */
declare const UtilityFragment: {
    <ET extends ElementType = "div">({ children, className, vAlignContent, vAlignItems, vAlignSelf, vColGap, vContainerHide, vElevation, vFlex, vFlexCol, vFlexColReverse, vFlexGrow, vFlexGrow0, vFlexInline, vFlexNoWrap, vFlexRow, vFlexRowReverse, vFlexShrink, vFlexShrink0, vFlexWrap, vFlexWrapReverse, vGap, vHide, vJustifyContent, vMargin, vMarginBottom, vMarginHorizontal, vMarginLeft, vMarginRight, vMarginTop, vMarginVertical, vMediaHide, vPadding, vPaddingBottom, vPaddingHorizontal, vPaddingLeft, vPaddingRight, vPaddingTop, vPaddingVertical, vRowGap, ...remainingProps }: UtilityFragmentProperties<ET>): import("react").DetailedReactHTMLElement<{
        className: string | undefined;
    } & Omit<UtilityFragmentProperties<ET>, "className" | "children" | "vAlignContent" | "vAlignItems" | "vAlignSelf" | "vColGap" | "vContainerHide" | "vElevation" | "vFlex" | "vFlexCol" | "vFlexColReverse" | "vFlexGrow" | "vFlexGrow0" | "vFlexInline" | "vFlexNoWrap" | "vFlexRow" | "vFlexRowReverse" | "vFlexShrink" | "vFlexShrink0" | "vFlexWrap" | "vFlexWrapReverse" | "vGap" | "vHide" | "vJustifyContent" | "vMargin" | "vMarginBottom" | "vMarginHorizontal" | "vMarginLeft" | "vMarginRight" | "vMarginTop" | "vMarginVertical" | "vMediaHide" | "vPadding" | "vPaddingBottom" | "vPaddingHorizontal" | "vPaddingLeft" | "vPaddingRight" | "vPaddingTop" | "vPaddingVertical" | "vRowGap">, HTMLElement>;
    displayName: string;
};
export default UtilityFragment;