'use client';

import { tokens } from '../../../theme/tokens';
import { default as React } from 'react';
type ResponsiveValue<T> = T | {
    base?: T;
    sm?: T;
    md?: T;
    lg?: T;
    xl?: T;
};
type SpacingValue = keyof typeof tokens.spacing | number | "auto";
type DisplayValue = "block" | "inline-block" | "inline" | "flex" | "inline-flex" | "grid" | "inline-grid" | "none" | "contents" | "table" | "table-cell" | "table-row" | "table-column" | "table-header-group" | "table-footer-group" | "table-row-group" | "table-column-group" | "list-item";
type PositionValue = "static" | "relative" | "absolute" | "fixed" | "sticky";
type SizeValue = SpacingValue | "full" | "screen" | "min" | "max" | "fit" | "prose" | string;
type FlexValue = "1" | "auto" | "initial" | "none" | string;
type FlexDirectionValue = "row" | "row-reverse" | "column" | "column-reverse";
type FlexWrapValue = "nowrap" | "wrap" | "wrap-reverse";
type JustifyContentValue = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end" | "stretch";
type AlignItemsValue = "flex-start" | "flex-end" | "center" | "baseline" | "stretch" | "start" | "end";
type AlignContentValue = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | "start" | "end";
type ColorValue = string;
type BorderRadiusValue = keyof typeof tokens.borderRadius | number;
type FontSizeValue = keyof typeof tokens.fontSizes | number;
type FontWeightValue = keyof typeof tokens.fontWeights | number;
type LineHeightValue = keyof typeof tokens.lineHeights | number;
type CursorValue = "auto" | "default" | "pointer" | "wait" | "text" | "move" | "help" | "not-allowed" | "none" | "context-menu" | "progress" | "cell" | "crosshair" | "vertical-text" | "alias" | "copy" | "no-drop" | "grab" | "grabbing" | "all-scroll" | "col-resize" | "row-resize" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "ne-resize" | "nw-resize" | "se-resize" | "sw-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "zoom-in" | "zoom-out";
type UserSelectValue = "none" | "text" | "all" | "auto";
type PointerEventsValue = "none" | "auto";
type ObjectFitValue = "contain" | "cover" | "fill" | "none" | "scale-down";
type ObjectPositionValue = "top" | "bottom" | "left" | "right" | "center" | "top left" | "top right" | "bottom left" | "bottom right" | string;
type BackgroundSizeValue = "auto" | "cover" | "contain" | string;
type BackgroundPositionValue = "top" | "bottom" | "left" | "right" | "center" | "top left" | "top right" | "bottom left" | "bottom right" | string;
type BackgroundRepeatValue = "repeat" | "no-repeat" | "repeat-x" | "repeat-y" | "space" | "round";
type BorderStyleValue = "none" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
type ListStyleTypeValue = "none" | "disc" | "circle" | "square" | "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | "lower-greek" | "lower-latin" | "upper-latin" | "armenian" | "georgian" | "lower-alpha" | "upper-alpha";
type ListStylePositionValue = "inside" | "outside";
type WhiteSpaceValue = "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | "break-spaces";
type WordBreakValue = "normal" | "break-all" | "keep-all" | "break-word";
type HyphensValue = "none" | "manual" | "auto";
type WritingModeValue = "horizontal-tb" | "vertical-rl" | "vertical-lr";
type TextOrientationValue = "mixed" | "upright" | "sideways-right" | "sideways" | "use-glyph-orientation";
type ResizeValue = "none" | "both" | "horizontal" | "vertical";
type ScrollBehaviorValue = "auto" | "smooth";
type AppearanceValue = "none" | "auto";
type FilterValue = string;
type TransformValue = string;
type TransitionValue = string;
type AnimationValue = string;
export interface BoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content" | "color"> {
    as?: keyof JSX.IntrinsicElements;
    m?: ResponsiveValue<SpacingValue>;
    mt?: ResponsiveValue<SpacingValue>;
    mr?: ResponsiveValue<SpacingValue>;
    mb?: ResponsiveValue<SpacingValue>;
    ml?: ResponsiveValue<SpacingValue>;
    mx?: ResponsiveValue<SpacingValue>;
    my?: ResponsiveValue<SpacingValue>;
    p?: ResponsiveValue<SpacingValue>;
    pt?: ResponsiveValue<SpacingValue>;
    pr?: ResponsiveValue<SpacingValue>;
    pb?: ResponsiveValue<SpacingValue>;
    pl?: ResponsiveValue<SpacingValue>;
    px?: ResponsiveValue<SpacingValue>;
    py?: ResponsiveValue<SpacingValue>;
    display?: ResponsiveValue<DisplayValue>;
    position?: ResponsiveValue<PositionValue>;
    top?: ResponsiveValue<SizeValue>;
    right?: ResponsiveValue<SizeValue>;
    bottom?: ResponsiveValue<SizeValue>;
    left?: ResponsiveValue<SizeValue>;
    zIndex?: ResponsiveValue<keyof typeof tokens.zIndex | number>;
    w?: ResponsiveValue<SizeValue>;
    h?: ResponsiveValue<SizeValue>;
    minW?: ResponsiveValue<SizeValue>;
    minH?: ResponsiveValue<SizeValue>;
    maxW?: ResponsiveValue<SizeValue>;
    maxH?: ResponsiveValue<SizeValue>;
    flex?: ResponsiveValue<FlexValue>;
    flexDirection?: ResponsiveValue<FlexDirectionValue>;
    flexWrap?: ResponsiveValue<FlexWrapValue>;
    flexGrow?: ResponsiveValue<number>;
    flexShrink?: ResponsiveValue<number>;
    flexBasis?: ResponsiveValue<SizeValue>;
    justifyContent?: ResponsiveValue<JustifyContentValue>;
    alignItems?: ResponsiveValue<AlignItemsValue>;
    alignContent?: ResponsiveValue<AlignContentValue>;
    alignSelf?: ResponsiveValue<AlignItemsValue>;
    gap?: ResponsiveValue<SpacingValue>;
    rowGap?: ResponsiveValue<SpacingValue>;
    columnGap?: ResponsiveValue<SpacingValue>;
    gridTemplate?: ResponsiveValue<string>;
    gridTemplateColumns?: ResponsiveValue<string>;
    gridTemplateRows?: ResponsiveValue<string>;
    gridTemplateAreas?: ResponsiveValue<string>;
    gridColumn?: ResponsiveValue<string>;
    gridRow?: ResponsiveValue<string>;
    gridArea?: ResponsiveValue<string>;
    gridAutoColumns?: ResponsiveValue<string>;
    gridAutoRows?: ResponsiveValue<string>;
    gridAutoFlow?: ResponsiveValue<"row" | "column" | "row dense" | "column dense">;
    justifyItems?: ResponsiveValue<JustifyContentValue>;
    justifySelf?: ResponsiveValue<JustifyContentValue>;
    placeContent?: ResponsiveValue<string>;
    placeItems?: ResponsiveValue<string>;
    placeSelf?: ResponsiveValue<string>;
    bg?: ResponsiveValue<ColorValue>;
    bgColor?: ResponsiveValue<ColorValue>;
    bgImage?: ResponsiveValue<string>;
    bgSize?: ResponsiveValue<BackgroundSizeValue>;
    bgPosition?: ResponsiveValue<BackgroundPositionValue>;
    bgRepeat?: ResponsiveValue<BackgroundRepeatValue>;
    bgAttachment?: ResponsiveValue<"fixed" | "local" | "scroll">;
    bgClip?: ResponsiveValue<"border-box" | "padding-box" | "content-box" | "text">;
    bgOrigin?: ResponsiveValue<"border-box" | "padding-box" | "content-box">;
    border?: ResponsiveValue<string>;
    borderTop?: ResponsiveValue<string>;
    borderRight?: ResponsiveValue<string>;
    borderBottom?: ResponsiveValue<string>;
    borderLeft?: ResponsiveValue<string>;
    borderWidth?: ResponsiveValue<string>;
    borderTopWidth?: ResponsiveValue<string>;
    borderRightWidth?: ResponsiveValue<string>;
    borderBottomWidth?: ResponsiveValue<string>;
    borderLeftWidth?: ResponsiveValue<string>;
    borderColor?: ResponsiveValue<ColorValue>;
    borderTopColor?: ResponsiveValue<ColorValue>;
    borderRightColor?: ResponsiveValue<ColorValue>;
    borderBottomColor?: ResponsiveValue<ColorValue>;
    borderLeftColor?: ResponsiveValue<ColorValue>;
    borderStyle?: ResponsiveValue<BorderStyleValue>;
    borderTopStyle?: ResponsiveValue<BorderStyleValue>;
    borderRightStyle?: ResponsiveValue<BorderStyleValue>;
    borderBottomStyle?: ResponsiveValue<BorderStyleValue>;
    borderLeftStyle?: ResponsiveValue<BorderStyleValue>;
    borderRadius?: ResponsiveValue<BorderRadiusValue>;
    borderTopLeftRadius?: ResponsiveValue<BorderRadiusValue>;
    borderTopRightRadius?: ResponsiveValue<BorderRadiusValue>;
    borderBottomLeftRadius?: ResponsiveValue<BorderRadiusValue>;
    borderBottomRightRadius?: ResponsiveValue<BorderRadiusValue>;
    borderCollapse?: ResponsiveValue<"collapse" | "separate">;
    borderSpacing?: ResponsiveValue<string>;
    color?: ResponsiveValue<ColorValue>;
    fontSize?: ResponsiveValue<FontSizeValue>;
    fontWeight?: ResponsiveValue<FontWeightValue>;
    lineHeight?: ResponsiveValue<LineHeightValue>;
    fontFamily?: ResponsiveValue<string>;
    fontStyle?: ResponsiveValue<"normal" | "italic" | "oblique">;
    fontVariant?: ResponsiveValue<string>;
    textAlign?: ResponsiveValue<"left" | "center" | "right" | "justify" | "start" | "end">;
    textTransform?: ResponsiveValue<"uppercase" | "lowercase" | "capitalize" | "none">;
    textDecoration?: ResponsiveValue<string>;
    textDecorationLine?: ResponsiveValue<"none" | "underline" | "overline" | "line-through">;
    textDecorationColor?: ResponsiveValue<ColorValue>;
    textDecorationStyle?: ResponsiveValue<"solid" | "double" | "dotted" | "dashed" | "wavy">;
    textDecorationThickness?: ResponsiveValue<string>;
    textUnderlineOffset?: ResponsiveValue<string>;
    textIndent?: ResponsiveValue<string>;
    textShadow?: ResponsiveValue<string>;
    letterSpacing?: ResponsiveValue<string>;
    wordSpacing?: ResponsiveValue<string>;
    whiteSpace?: ResponsiveValue<WhiteSpaceValue>;
    wordBreak?: ResponsiveValue<WordBreakValue>;
    wordWrap?: ResponsiveValue<"normal" | "break-word">;
    hyphens?: ResponsiveValue<HyphensValue>;
    writingMode?: ResponsiveValue<WritingModeValue>;
    textOrientation?: ResponsiveValue<TextOrientationValue>;
    verticalAlign?: ResponsiveValue<string>;
    listStyle?: ResponsiveValue<string>;
    listStyleType?: ResponsiveValue<ListStyleTypeValue>;
    listStylePosition?: ResponsiveValue<ListStylePositionValue>;
    listStyleImage?: ResponsiveValue<string>;
    overflow?: ResponsiveValue<"visible" | "hidden" | "scroll" | "auto">;
    overflowX?: ResponsiveValue<"visible" | "hidden" | "scroll" | "auto">;
    overflowY?: ResponsiveValue<"visible" | "hidden" | "scroll" | "auto">;
    overflowWrap?: ResponsiveValue<"normal" | "break-word" | "anywhere">;
    textOverflow?: ResponsiveValue<"clip" | "ellipsis" | string>;
    clip?: ResponsiveValue<string>;
    clipPath?: ResponsiveValue<string>;
    opacity?: ResponsiveValue<number>;
    visibility?: ResponsiveValue<"visible" | "hidden" | "collapse">;
    boxShadow?: ResponsiveValue<keyof typeof tokens.shadows | string>;
    textShadow?: ResponsiveValue<string>;
    filter?: ResponsiveValue<FilterValue>;
    backdropFilter?: ResponsiveValue<FilterValue>;
    transform?: ResponsiveValue<TransformValue>;
    transformOrigin?: ResponsiveValue<string>;
    transformStyle?: ResponsiveValue<"flat" | "preserve-3d">;
    perspective?: ResponsiveValue<string>;
    perspectiveOrigin?: ResponsiveValue<string>;
    backfaceVisibility?: ResponsiveValue<"visible" | "hidden">;
    transition?: ResponsiveValue<TransitionValue>;
    transitionProperty?: ResponsiveValue<string>;
    transitionDuration?: ResponsiveValue<string>;
    transitionTimingFunction?: ResponsiveValue<string>;
    transitionDelay?: ResponsiveValue<string>;
    animation?: ResponsiveValue<AnimationValue>;
    animationName?: ResponsiveValue<string>;
    animationDuration?: ResponsiveValue<string>;
    animationTimingFunction?: ResponsiveValue<string>;
    animationDelay?: ResponsiveValue<string>;
    animationIterationCount?: ResponsiveValue<string | number>;
    animationDirection?: ResponsiveValue<"normal" | "reverse" | "alternate" | "alternate-reverse">;
    animationFillMode?: ResponsiveValue<"none" | "forwards" | "backwards" | "both">;
    animationPlayState?: ResponsiveValue<"running" | "paused">;
    cursor?: ResponsiveValue<CursorValue>;
    userSelect?: ResponsiveValue<UserSelectValue>;
    pointerEvents?: ResponsiveValue<PointerEventsValue>;
    resize?: ResponsiveValue<ResizeValue>;
    scrollBehavior?: ResponsiveValue<ScrollBehaviorValue>;
    scrollMargin?: ResponsiveValue<string>;
    scrollPadding?: ResponsiveValue<string>;
    touchAction?: ResponsiveValue<string>;
    willChange?: ResponsiveValue<string>;
    aspectRatio?: ResponsiveValue<string>;
    objectFit?: ResponsiveValue<ObjectFitValue>;
    objectPosition?: ResponsiveValue<ObjectPositionValue>;
    tableLayout?: ResponsiveValue<"auto" | "fixed">;
    captionSide?: ResponsiveValue<"top" | "bottom">;
    emptyCells?: ResponsiveValue<"show" | "hide">;
    outline?: ResponsiveValue<string>;
    outlineColor?: ResponsiveValue<ColorValue>;
    outlineStyle?: ResponsiveValue<BorderStyleValue>;
    outlineWidth?: ResponsiveValue<string>;
    outlineOffset?: ResponsiveValue<string>;
    appearance?: ResponsiveValue<AppearanceValue>;
    content?: ResponsiveValue<string>;
    quotes?: ResponsiveValue<string>;
    counterReset?: ResponsiveValue<string>;
    counterIncrement?: ResponsiveValue<string>;
    gridGap?: ResponsiveValue<SpacingValue>;
    gridRowGap?: ResponsiveValue<SpacingValue>;
    gridColumnGap?: ResponsiveValue<SpacingValue>;
    css?: any;
}
export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
export {};
//# sourceMappingURL=box.d.ts.map