declare global {
  /**
   * TODO: Add more specific types instead of using `any`
   *
   * Style properties that can be applied to Tonic UI components.
   * Includes both native CSS properties and styled-system properties.
   *
   * @example
   * // Native CSS properties
   * <Box backgroundColor="red" color="white" padding="16px" />
   *
   * @example
   * // Styled-system shorthand properties
   * <Box bg="red" color="white" p="4x" />
   *
   * @example
   * // The sx prop for custom styles with theme access
   * <Box sx={{ ':hover': { backgroundColor: 'blue:50' } }} />
   */
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  type StyleProps = Record<string, any>;

  /**
   * Theme token scales returned by `createTheme()` and `useTheme()`.
   * Represents the theme object structure with nested token values
   * (e.g. `{ colors: { red: { 600: '#dd1128' } }, space: { '4x': '1rem' } }`).
   *
   * This is intentionally separate from `StyleProps` which describes
   * styled-system props on components (e.g. `<Box mb="2x" />`).
   */
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  type ThemeScales = Record<string, any>;
}


import { ElementType, ForwardRefExoticComponent, ComponentPropsWithoutRef, RefAttributes } from 'react';

type SxStyleObject = {
    [key: string]: string | number | boolean | null | undefined | SxStyleObject | Array<string | number | null> | ((theme: ThemeScales) => string | number | SxStyleObject);
};
type BoxProps = {
    /**
     * - The element type to render as.
     */
    as?: ElementType;
    /**
     * - Custom styles that have access to the theme. Accepts a style object, a function receiving the theme, or an array of both.
     */
    sx?: SxStyleObject | ((theme: ThemeScales) => SxStyleObject) | Array<SxStyleObject | ((theme: ThemeScales) => SxStyleObject) | boolean | null | undefined>;
};
/** @import { ElementType, ForwardRefExoticComponent, ComponentPropsWithoutRef, RefAttributes } from 'react' */
/**
 * @typedef {{ [key: string]: string | number | boolean | null | undefined | SxStyleObject | Array<string | number | null> | ((theme: ThemeScales) => string | number | SxStyleObject) }} SxStyleObject
 */
/**
 * @typedef {Object} BoxProps
 * @property {ElementType} [as] - The element type to render as.
 * @property {SxStyleObject | ((theme: ThemeScales) => SxStyleObject) | Array<SxStyleObject | ((theme: ThemeScales) => SxStyleObject) | boolean | null | undefined>} [sx] - Custom styles that have access to the theme. Accepts a style object, a function receiving the theme, or an array of both.
 */
/**
 * Box is a primitive component for styling and layout.
 * It accepts all HTML attributes and style props from the styled system.
 * @type {ForwardRefExoticComponent<StyleProps & ComponentPropsWithoutRef<'div'> & BoxProps & RefAttributes<HTMLElement>>}
 */
declare const Box: ForwardRefExoticComponent<StyleProps & ComponentPropsWithoutRef<"div"> & BoxProps & RefAttributes<HTMLElement>>;

export { Box };
export type { BoxProps, SxStyleObject };