import type { AriaAttributes, AriaRole, ReactNode } from 'react'; import type { css } from 'styled-components'; export type BaseAriaProps = AriaAttributes & { /** * ARIA role for semantic meaning of the component. * See {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles|ARIA Role docs}. */ role?: AriaRole; }; export interface AssignableElementProps { /** The element to render */ as?: React.ElementType; } export interface BaseProps { /** Tag for testing */ 'data-tag'?: string; /** HTML id property */ id?: string; } /** @deprecated use StylableProps with className instead */ export interface LegacyStylableProps { /** * Custom css applied to the root element * @deprecated use `className` with CSS Module styles instead. **/ css?: ReturnType; } export type StyleVariableObject = Record<`--${string}`, string | number>; export interface StylableProps { /** Custom className applied to the root element */ className?: string; /** * Inject CSS variables into the component for use within CSS Modules. * Only accepts a record of `--${string}: string | number` values. **/ style?: StyleVariableObject; } export interface ChildrenProps { /** content to render */ children?: ReactNode; } export interface LoggerProps { /** * Unique identifier of the component used for logging. */ loggerId?: string; /** * Optional additional fields to log in `Studio Action` */ loggerProps?: Record; }