import { SpaceProps, SizingProps, LayoutProps, InteractivityProps, EffectsProps, BordersProps, TablesProps, BackgroundsProps, ColorProps, OverflowProps, OverflowXProps, OverflowYProps, FlexProps as FlexProps$1, FlexGrowProps, FlexShrinkProps, FlexBasisProps, JustifySelfProps, AlignSelfProps, OrderProps, GridAreaProps, GridColumnProps, GridRowProps, FlexboxesProps, GapProps, TypographyProps as TypographyProps$1, ITheme, Theme, SystemProp, OpacityProps, Inset, ThemeColor, DefaultTheme as DefaultTheme$1, GridsProps, MaxHeightProps as MaxHeightProps$1, MarginProps, MinWidthProps as MinWidthProps$1, MaxWidthProps as MaxWidthProps$1, BackgroundColorProps, SynthesizedPath, CSSScalar, ThemeNamespaceValue } from '@xstyled/styled-components'; export { generateHexAlphaVariants, useColor, useColorMode, useDown, useRadius, useScreens, useShadow, useSpace, useTh, useTheme, useUp, useViewportWidth } from '@xstyled/styled-components'; import * as React$1 from 'react'; import React__default, { ElementType, ReactElement, ReactNode, ReactEventHandler, PropsWithChildren, ForwardedRef, ComponentType, SVGProps, MouseEventHandler, ImgHTMLAttributes, CSSProperties, HTMLProps, Dispatch, ButtonHTMLAttributes, ChangeEvent, MouseEvent as MouseEvent$1, MutableRefObject } from 'react'; import * as react_jsx_runtime from 'react/jsx-runtime'; import * as _xstyled_system from '@xstyled/system'; import { SizingProps as SizingProps$1, HeightProps, MinHeightProps, MaxHeightProps, WidthProps, MinWidthProps, MaxWidthProps, SystemProp as SystemProp$1, Color, Theme as Theme$1 } from '@xstyled/system'; import * as styled_components from 'styled-components'; import * as framer_motion from 'framer-motion'; import { MotionProps } from 'framer-motion'; import * as _loadable_component from '@loadable/component'; import * as _xstyled_util from '@xstyled/util'; declare const timingFunctions: { 'ease-in': string; 'ease-out': string; 'ease-in-out': string; }; declare const transitionProperties: { default: string[]; colors: string[]; opacity: string[]; shadow: string[]; transform: string[]; }; declare const transitions: { [key: string]: string; }; declare const animations: { spin: string; ping: string; pulse: string; bounce: string; }; declare const colors: { modes: { dark: { 'text-highlight': any; 'text-base': any; 'text-secondary': any; 'text-placeholder': any; 'text-disabled': any; 'text-info': any; 'text-success': any; 'text-warning': any; 'text-critical': any; 'text-inverted': any; 'text-contrast-light': any; 'text-contrast-dark': any; 'text-contrast-critical': any; 'text-interactive-neutral': any; 'text-interactive-neutral-hover': any; 'text-interactive-neutral-active': any; 'text-interactive-primary': any; 'text-interactive-primary-hover': any; 'text-interactive-primary-active': any; 'text-interactive-primary-ghost': any; 'text-interactive-informative': any; 'text-interactive-informative-hover': any; 'text-interactive-informative-active': any; 'text-interactive-informative-ghost': any; 'text-interactive-secondary': any; 'text-interactive-secondary-hover': any; 'text-interactive-secondary-active': any; 'text-interactive-secondary-ghost': any; 'text-interactive-critical': any; 'text-interactive-critical-hover': any; 'text-interactive-critical-active': any; 'text-interactive-critical-ghost': any; 'text-interactive-warning': any; 'text-interactive-warning-hover': any; 'text-interactive-warning-active': any; 'text-interactive-warning-ghost': any; 'text-interactive-contrast-light': any; 'surface-background': any; 'surface-default': any; 'surface-default-alpha': any; 'surface-default-contrast-alpha': any; 'surface-overlay': string; 'surface-disabled': any; 'surface-info': any; 'surface-success': any; 'surface-warning': any; 'surface-critical': any; 'surface-critical-light': any; 'surface-inverted': any; 'surface-contrast-secondary': any; 'surface-interactive-default': any; 'surface-interactive-default-hover': any; 'surface-interactive-default-active': any; 'surface-interactive-primary': any; 'surface-interactive-primary-hover': any; 'surface-interactive-primary-active': any; 'surface-interactive-secondary': any; 'surface-interactive-secondary-hover': any; 'surface-interactive-secondary-active': any; 'surface-interactive-neutral': any; 'surface-interactive-neutral-hover': any; 'surface-interactive-neutral-active': any; 'surface-interactive-informative': any; 'surface-interactive-informative-hover': any; 'surface-interactive-informative-active': any; 'surface-interactive-warning': any; 'surface-interactive-warning-hover': any; 'surface-interactive-warning-active': any; 'surface-interactive-critical': any; 'surface-interactive-critical-hover': any; 'surface-interactive-critical-active': any; 'surface-interactive-primary-ghost': string; 'surface-interactive-primary-ghost-hover': any; 'surface-interactive-primary-ghost-active': any; 'surface-interactive-informative-ghost': string; 'surface-interactive-informative-ghost-hover': any; 'surface-interactive-informative-ghost-active': any; 'surface-interactive-secondary-ghost': string; 'surface-interactive-secondary-ghost-hover': any; 'surface-interactive-secondary-ghost-active': any; 'surface-interactive-warning-ghost': string; 'surface-interactive-warning-ghost-hover': any; 'surface-interactive-warning-ghost-active': any; 'surface-interactive-critical-ghost': string; 'surface-interactive-critical-ghost-hover': any; 'surface-interactive-critical-ghost-active': any; 'surface-interactive-disabled': any; 'graphic-default': any; 'graphic-neutral': any; 'graphic-primary': any; 'graphic-primary-strong': any; 'graphic-info': any; 'graphic-info-strong': any; 'graphic-success': any; 'graphic-success-strong': any; 'graphic-warning': any; 'graphic-warning-strong': any; 'graphic-critical': any; 'graphic-critical-strong': any; 'graphic-disabled': any; 'graphic-disabled-strong': any; 'graphic-inverted': any; 'graphic-contrast-dark': any; 'graphic-contrast-light': any; 'graphic-interactive-default': any; 'graphic-interactive-default-hover': any; 'graphic-interactive-default-active': any; 'graphic-interactive-primary': any; 'graphic-interactive-primary-hover': any; 'graphic-interactive-primary-active': any; 'graphic-interactive-informative': any; 'graphic-interactive-informative-hover': any; 'graphic-interactive-informative-active': any; 'graphic-interactive-secondary': any; 'graphic-interactive-secondary-hover': any; 'graphic-interactive-secondary-active': any; 'graphic-interactive-critical': any; 'graphic-interactive-critical-hover': any; 'graphic-interactive-critical-active': any; 'graphic-interactive-warning': any; 'graphic-interactive-warning-hover': any; 'graphic-interactive-warning-active': any; 'graphic-interactive-primary-ghost': string; 'graphic-interactive-primary-hover-ghost': any; 'graphic-interactive-primary-active-ghost': any; 'graphic-interactive-informative-ghost': string; 'graphic-interactive-informative-hover-ghost': any; 'graphic-interactive-informative-active-ghost': any; 'graphic-interactive-secondary-ghost': string; 'graphic-interactive-secondary-hover-ghost': any; 'graphic-interactive-secondary-active-ghost': any; 'graphic-interactive-critical-ghost': string; 'graphic-interactive-critical-hover-ghost': any; 'graphic-interactive-critical-active-ghost': any; 'icon-default': any; 'icon-highlight': any; 'icon-base': any; 'icon-primary': any; 'icon-secondary': any; 'icon-disabled': any; 'icon-info': any; 'icon-success': any; 'icon-warning': any; 'icon-critical': any; 'icon-inverted': any; 'icon-contrast-secondary': any; 'icon-contrast-light': any; 'icon-contrast-dark': any; 'icon-secondary-inverted': any; 'icon-interactive-default': any; 'icon-interactive-default-hover': any; 'icon-interactive-default-active': any; 'icon-interactive-primary': any; 'icon-interactive-primary-hover': any; 'icon-interactive-primary-active': any; 'icon-interactive-informative': any; 'icon-interactive-informative-hover': any; 'icon-interactive-informative-active': any; 'icon-interactive-secondary': any; 'icon-interactive-secondary-hover': any; 'icon-interactive-secondary-active': any; 'icon-interactive-critical': any; 'icon-interactive-critical-hover': any; 'icon-interactive-critical-active': any; 'icon-interactive-warning': any; 'icon-interactive-warning-hover': any; 'icon-interactive-warning-active': any; 'call-assigned': any; 'call-answered': any; 'call-missed': any; 'call-callback': any; 'call-abandoned': any; 'call-voicemail': any; 'surface-primary-alpha': string; 'surface-secondary-alpha': string; 'surface-primary-contrast-dark-alpha': string; 'surface-secondary-contrast-dark-alpha': string; }; }; white: string; black: string; 'text-highlight': any; 'text-base': any; 'text-secondary': any; 'text-placeholder': any; 'text-disabled': any; 'text-info': any; 'text-success': any; 'text-warning': any; 'text-critical': any; 'text-inverted': any; 'text-contrast-light': any; 'text-contrast-dark': any; 'text-contrast-light-highlight': any; 'text-contrast-light-base': any; 'text-contrast-light-secondary': any; 'text-contrast-critical': any; 'text-interactive-neutral': any; 'text-interactive-neutral-hover': any; 'text-interactive-neutral-active': any; 'text-interactive-primary': any; 'text-interactive-primary-hover': any; 'text-interactive-primary-active': any; 'text-interactive-primary-ghost': any; 'text-interactive-informative': any; 'text-interactive-informative-hover': any; 'text-interactive-informative-active': any; 'text-interactive-informative-ghost': any; 'text-interactive-secondary': any; 'text-interactive-secondary-hover': any; 'text-interactive-secondary-active': any; 'text-interactive-secondary-ghost': any; 'text-interactive-critical': any; 'text-interactive-critical-hover': any; 'text-interactive-critical-active': any; 'text-interactive-critical-ghost': any; 'text-interactive-warning': any; 'text-interactive-warning-hover': any; 'text-interactive-warning-active': any; 'text-interactive-warning-ghost': any; 'text-interactive-contrast-light': any; 'text-interactive-contrast-light-hover': any; 'text-interactive-contrast-light-active': any; 'surface-background': any; 'surface-default': any; 'surface-default-contrast-alpha': any; 'surface-overlay': string; 'surface-disabled': any; 'surface-info': any; 'surface-success': any; 'surface-warning': any; 'surface-critical': any; 'surface-critical-light': any; 'surface-inverted': any; 'surface-contrast-light': any; 'surface-contrast-light-alpha': any; 'surface-contrast-dark-alpha': any; 'surface-contrast-secondary': any; 'surface-interactive-default': any; 'surface-interactive-default-hover': any; 'surface-interactive-default-active': any; 'surface-interactive-primary': any; 'surface-interactive-primary-hover': any; 'surface-interactive-primary-active': any; 'surface-interactive-secondary': any; 'surface-interactive-secondary-hover': any; 'surface-interactive-secondary-active': any; 'surface-interactive-neutral': any; 'surface-interactive-neutral-hover': any; 'surface-interactive-neutral-active': any; 'surface-interactive-informative': any; 'surface-interactive-informative-hover': any; 'surface-interactive-informative-active': any; 'surface-interactive-warning': any; 'surface-interactive-warning-hover': any; 'surface-interactive-warning-active': any; 'surface-interactive-critical': any; 'surface-interactive-critical-hover': any; 'surface-interactive-critical-active': any; 'surface-interactive-primary-ghost': string; 'surface-interactive-primary-ghost-hover': any; 'surface-interactive-primary-ghost-active': any; 'surface-interactive-informative-ghost': string; 'surface-interactive-informative-ghost-hover': any; 'surface-interactive-informative-ghost-active': any; 'surface-interactive-secondary-ghost': string; 'surface-interactive-secondary-ghost-hover': any; 'surface-interactive-secondary-ghost-active': any; 'surface-interactive-warning-ghost': string; 'surface-interactive-warning-ghost-hover': any; 'surface-interactive-warning-ghost-active': any; 'surface-interactive-critical-ghost': string; 'surface-interactive-critical-ghost-hover': any; 'surface-interactive-critical-ghost-active': any; 'surface-interactive-disabled': any; 'surface-interactive-contrast-light-alpha': any; 'surface-interactive-contrast-light-alpha-hover': any; 'surface-interactive-contrast-light-alpha-active': any; 'graphic-default': any; 'graphic-neutral': any; 'graphic-primary': any; 'graphic-primary-strong': any; 'graphic-informative': any; 'graphic-informative-strong': any; 'graphic-info': any; 'graphic-info-strong': any; 'graphic-success': any; 'graphic-success-strong': any; 'graphic-warning': any; 'graphic-warning-strong': any; 'graphic-critical': any; 'graphic-critical-strong': any; 'graphic-disabled': any; 'graphic-disabled-strong': any; 'graphic-inverted': any; 'graphic-contrast-dark': any; 'graphic-contrast-light': any; 'graphic-interactive-default': any; 'graphic-interactive-default-hover': any; 'graphic-interactive-default-active': any; 'graphic-interactive-primary': any; 'graphic-interactive-primary-hover': any; 'graphic-interactive-primary-active': any; 'graphic-interactive-informative': any; 'graphic-interactive-informative-hover': any; 'graphic-interactive-informative-active': any; 'graphic-interactive-secondary': any; 'graphic-interactive-secondary-hover': any; 'graphic-interactive-secondary-active': any; 'graphic-interactive-critical': any; 'graphic-interactive-critical-hover': any; 'graphic-interactive-critical-active': any; 'graphic-interactive-warning': any; 'graphic-interactive-warning-hover': any; 'graphic-interactive-warning-active': any; 'graphic-interactive-primary-ghost': string; 'graphic-interactive-primary-hover-ghost': any; 'graphic-interactive-primary-active-ghost': any; 'graphic-interactive-informative-ghost': string; 'graphic-interactive-informative-hover-ghost': any; 'graphic-interactive-informative-active-ghost': any; 'graphic-interactive-critical-ghost': string; 'graphic-interactive-critical-hover-ghost': any; 'graphic-interactive-critical-active-ghost': any; 'graphic-interactive-secondary-ghost': string; 'graphic-interactive-secondary-hover-ghost': any; 'graphic-interactive-secondary-active-ghost': any; 'graphic-interactive-contrast-light-alpha': any; 'graphic-interactive-contrast-light-alpha-hover': any; 'graphic-interactive-contrast-light-alpha-active': any; 'icon-default': any; 'icon-highlight': any; 'icon-base': any; 'icon-primary': any; 'icon-secondary': any; 'icon-disabled': any; 'icon-info': any; 'icon-success': any; 'icon-warning': any; 'icon-critical': any; 'icon-inverted': any; 'icon-secondary-inverted': any; 'icon-contrast-secondary': any; 'icon-contrast-light': any; 'icon-contrast-dark': any; 'icon-interactive-default': any; 'icon-interactive-default-hover': any; 'icon-interactive-default-active': any; 'icon-interactive-primary': any; 'icon-interactive-primary-hover': any; 'icon-interactive-primary-active': any; 'icon-interactive-informative': any; 'icon-interactive-informative-hover': any; 'icon-interactive-informative-active': any; 'icon-interactive-secondary': any; 'icon-interactive-secondary-hover': any; 'icon-interactive-secondary-active': any; 'icon-interactive-critical': any; 'icon-interactive-critical-hover': any; 'icon-interactive-critical-active': any; 'icon-interactive-warning': any; 'icon-interactive-warning-hover': any; 'icon-interactive-warning-active': any; 'icon-interactive-contrast': any; 'icon-interactive-contrast-hover': any; 'icon-interactive-contrast-active': any; 'call-assigned': any; 'call-answered': any; 'call-missed': any; 'call-callback': any; 'call-abandoned': any; 'call-voicemail': any; 'surface-primary-alpha': string; 'surface-secondary-alpha': string; 'surface-primary-contrast-dark-alpha': string; 'surface-secondary-contrast-dark-alpha': string; 'primary-900': string; 'primary-800': string; 'primary-700': string; 'primary-600': string; 'primary-500': string; 'primary-300': string; 'primary-100': string; 'primary-50': string; 'neutral-1000': string; 'neutral-900': string; 'neutral-800': string; 'neutral-700': string; 'neutral-600': string; 'neutral-500': string; 'neutral-400': string; 'neutral-300': string; 'neutral-200': string; 'neutral-100': string; 'neutral-0': string; 'secondary-900': string; 'secondary-800': string; 'secondary-700': string; 'secondary-600': string; 'secondary-500': string; 'secondary-400': string; 'secondary-300': string; 'secondary-200': string; 'secondary-100': string; 'secondary-50': string; 'informative-800': string; 'informative-700': string; 'informative-600': string; 'informative-500': string; 'informative-300': string; 'informative-100': string; 'success-800': string; 'success-700': string; 'success-500': string; 'success-300': string; 'success-100': string; 'warning-800': string; 'warning-700': string; 'warning-600': string; 'warning-500': string; 'warning-300': string; 'warning-100': string; 'critical-950': string; 'critical-900': string; 'critical-800': string; 'critical-700': string; 'critical-600': string; 'critical-500': string; 'critical-300': string; 'critical-100': string; 'critical-50': string; 'decorative1-800': string; 'decorative1-700': string; 'decorative1-600': string; 'decorative1-300': string; 'decorative1-100': string; 'decorative2-800': string; 'decorative2-700': string; 'decorative2-600': string; 'decorative2-300': string; 'decorative2-100': string; }; declare const durations: { instant: string; 'fast-in': string; 'fast-out': string; 'slow-in': string; 'slow-out': string; }; declare const fonts: { default: string; }; declare const gridTemplateColumns: { 1: string; 2: string; 3: string; 4: string; 5: string; 6: string; 7: string; 8: string; 9: string; 10: string; 11: string; 12: string; }; declare const gridTemplateRows: { 1: string; 2: string; 3: string; 4: string; 5: string; 6: string; }; declare const radii: { none: string; xs: string; sm: string; md: string; default: string; lg: string; full: string; }; declare const screens: { _: number; xs: number; sm: number; md: number; lg: number; xl: number; }; declare const shadows: { 1: string; 2: string; 3: string; 4: string; 5: string; 6: string; }; declare const space: { 0: number; 0.5: number; 1: number; 2: number; 3: number; 4: number; 5: number; 6: number; 7: number; 8: number; 9: number; xxxs: number; xxs: number; xs: number; s: number; m: number; l: number; xl: number; xxl: number; xxxl: number; }; declare const states: { _: null; motionSafe: string; motionReduce: string; first: string; last: string; odd: string; even: string; visited: string; checked: string; focusWithin: string; hover: string; focus: string; focusVisible: string; active: string; disabled: string; placeholder: string; }; declare const typography: { supportingRegularXS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingMediumXS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingSemiboldXS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingRegularS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingMediumS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingSemiboldS: { fontWeight: number; fontSize: string; lineHeight: string; }; bodyRegularS: { fontWeight: number; fontSize: string; lineHeight: string; }; bodyMediumS: { fontWeight: number; fontSize: string; lineHeight: string; }; bodySemiboldS: { fontWeight: number; fontSize: string; lineHeight: string; }; bodyRegularM: { fontWeight: number; fontSize: string; lineHeight: string; }; bodyMediumM: { fontWeight: number; fontSize: string; lineHeight: string; }; bodySemiboldM: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightXS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumXS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldXS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightM: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumM: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldM: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightXL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumXL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldXL: { fontWeight: number; fontSize: string; lineHeight: string; }; }; declare const defaultTheme: { useColorSchemeMediaQuery: boolean; colors: { modes: { dark: { 'text-highlight': any; 'text-base': any; 'text-secondary': any; 'text-placeholder': any; 'text-disabled': any; 'text-info': any; 'text-success': any; 'text-warning': any; 'text-critical': any; 'text-inverted': any; 'text-contrast-light': any; 'text-contrast-dark': any; 'text-contrast-critical': any; 'text-interactive-neutral': any; 'text-interactive-neutral-hover': any; 'text-interactive-neutral-active': any; 'text-interactive-primary': any; 'text-interactive-primary-hover': any; 'text-interactive-primary-active': any; 'text-interactive-primary-ghost': any; 'text-interactive-informative': any; 'text-interactive-informative-hover': any; 'text-interactive-informative-active': any; 'text-interactive-informative-ghost': any; 'text-interactive-secondary': any; 'text-interactive-secondary-hover': any; 'text-interactive-secondary-active': any; 'text-interactive-secondary-ghost': any; 'text-interactive-critical': any; 'text-interactive-critical-hover': any; 'text-interactive-critical-active': any; 'text-interactive-critical-ghost': any; 'text-interactive-warning': any; 'text-interactive-warning-hover': any; 'text-interactive-warning-active': any; 'text-interactive-warning-ghost': any; 'text-interactive-contrast-light': any; 'surface-background': any; 'surface-default': any; 'surface-default-alpha': any; 'surface-default-contrast-alpha': any; 'surface-overlay': string; 'surface-disabled': any; 'surface-info': any; 'surface-success': any; 'surface-warning': any; 'surface-critical': any; 'surface-critical-light': any; 'surface-inverted': any; 'surface-contrast-secondary': any; 'surface-interactive-default': any; 'surface-interactive-default-hover': any; 'surface-interactive-default-active': any; 'surface-interactive-primary': any; 'surface-interactive-primary-hover': any; 'surface-interactive-primary-active': any; 'surface-interactive-secondary': any; 'surface-interactive-secondary-hover': any; 'surface-interactive-secondary-active': any; 'surface-interactive-neutral': any; 'surface-interactive-neutral-hover': any; 'surface-interactive-neutral-active': any; 'surface-interactive-informative': any; 'surface-interactive-informative-hover': any; 'surface-interactive-informative-active': any; 'surface-interactive-warning': any; 'surface-interactive-warning-hover': any; 'surface-interactive-warning-active': any; 'surface-interactive-critical': any; 'surface-interactive-critical-hover': any; 'surface-interactive-critical-active': any; 'surface-interactive-primary-ghost': string; 'surface-interactive-primary-ghost-hover': any; 'surface-interactive-primary-ghost-active': any; 'surface-interactive-informative-ghost': string; 'surface-interactive-informative-ghost-hover': any; 'surface-interactive-informative-ghost-active': any; 'surface-interactive-secondary-ghost': string; 'surface-interactive-secondary-ghost-hover': any; 'surface-interactive-secondary-ghost-active': any; 'surface-interactive-warning-ghost': string; 'surface-interactive-warning-ghost-hover': any; 'surface-interactive-warning-ghost-active': any; 'surface-interactive-critical-ghost': string; 'surface-interactive-critical-ghost-hover': any; 'surface-interactive-critical-ghost-active': any; 'surface-interactive-disabled': any; 'graphic-default': any; 'graphic-neutral': any; 'graphic-primary': any; 'graphic-primary-strong': any; 'graphic-info': any; 'graphic-info-strong': any; 'graphic-success': any; 'graphic-success-strong': any; 'graphic-warning': any; 'graphic-warning-strong': any; 'graphic-critical': any; 'graphic-critical-strong': any; 'graphic-disabled': any; 'graphic-disabled-strong': any; 'graphic-inverted': any; 'graphic-contrast-dark': any; 'graphic-contrast-light': any; 'graphic-interactive-default': any; 'graphic-interactive-default-hover': any; 'graphic-interactive-default-active': any; 'graphic-interactive-primary': any; 'graphic-interactive-primary-hover': any; 'graphic-interactive-primary-active': any; 'graphic-interactive-informative': any; 'graphic-interactive-informative-hover': any; 'graphic-interactive-informative-active': any; 'graphic-interactive-secondary': any; 'graphic-interactive-secondary-hover': any; 'graphic-interactive-secondary-active': any; 'graphic-interactive-critical': any; 'graphic-interactive-critical-hover': any; 'graphic-interactive-critical-active': any; 'graphic-interactive-warning': any; 'graphic-interactive-warning-hover': any; 'graphic-interactive-warning-active': any; 'graphic-interactive-primary-ghost': string; 'graphic-interactive-primary-hover-ghost': any; 'graphic-interactive-primary-active-ghost': any; 'graphic-interactive-informative-ghost': string; 'graphic-interactive-informative-hover-ghost': any; 'graphic-interactive-informative-active-ghost': any; 'graphic-interactive-secondary-ghost': string; 'graphic-interactive-secondary-hover-ghost': any; 'graphic-interactive-secondary-active-ghost': any; 'graphic-interactive-critical-ghost': string; 'graphic-interactive-critical-hover-ghost': any; 'graphic-interactive-critical-active-ghost': any; 'icon-default': any; 'icon-highlight': any; 'icon-base': any; 'icon-primary': any; 'icon-secondary': any; 'icon-disabled': any; 'icon-info': any; 'icon-success': any; 'icon-warning': any; 'icon-critical': any; 'icon-inverted': any; 'icon-contrast-secondary': any; 'icon-contrast-light': any; 'icon-contrast-dark': any; 'icon-secondary-inverted': any; 'icon-interactive-default': any; 'icon-interactive-default-hover': any; 'icon-interactive-default-active': any; 'icon-interactive-primary': any; 'icon-interactive-primary-hover': any; 'icon-interactive-primary-active': any; 'icon-interactive-informative': any; 'icon-interactive-informative-hover': any; 'icon-interactive-informative-active': any; 'icon-interactive-secondary': any; 'icon-interactive-secondary-hover': any; 'icon-interactive-secondary-active': any; 'icon-interactive-critical': any; 'icon-interactive-critical-hover': any; 'icon-interactive-critical-active': any; 'icon-interactive-warning': any; 'icon-interactive-warning-hover': any; 'icon-interactive-warning-active': any; 'call-assigned': any; 'call-answered': any; 'call-missed': any; 'call-callback': any; 'call-abandoned': any; 'call-voicemail': any; 'surface-primary-alpha': string; 'surface-secondary-alpha': string; 'surface-primary-contrast-dark-alpha': string; 'surface-secondary-contrast-dark-alpha': string; }; }; white: string; black: string; 'text-highlight': any; 'text-base': any; 'text-secondary': any; 'text-placeholder': any; 'text-disabled': any; 'text-info': any; 'text-success': any; 'text-warning': any; 'text-critical': any; 'text-inverted': any; 'text-contrast-light': any; 'text-contrast-dark': any; 'text-contrast-light-highlight': any; 'text-contrast-light-base': any; 'text-contrast-light-secondary': any; 'text-contrast-critical': any; 'text-interactive-neutral': any; 'text-interactive-neutral-hover': any; 'text-interactive-neutral-active': any; 'text-interactive-primary': any; 'text-interactive-primary-hover': any; 'text-interactive-primary-active': any; 'text-interactive-primary-ghost': any; 'text-interactive-informative': any; 'text-interactive-informative-hover': any; 'text-interactive-informative-active': any; 'text-interactive-informative-ghost': any; 'text-interactive-secondary': any; 'text-interactive-secondary-hover': any; 'text-interactive-secondary-active': any; 'text-interactive-secondary-ghost': any; 'text-interactive-critical': any; 'text-interactive-critical-hover': any; 'text-interactive-critical-active': any; 'text-interactive-critical-ghost': any; 'text-interactive-warning': any; 'text-interactive-warning-hover': any; 'text-interactive-warning-active': any; 'text-interactive-warning-ghost': any; 'text-interactive-contrast-light': any; 'text-interactive-contrast-light-hover': any; 'text-interactive-contrast-light-active': any; 'surface-background': any; 'surface-default': any; 'surface-default-contrast-alpha': any; 'surface-overlay': string; 'surface-disabled': any; 'surface-info': any; 'surface-success': any; 'surface-warning': any; 'surface-critical': any; 'surface-critical-light': any; 'surface-inverted': any; 'surface-contrast-light': any; 'surface-contrast-light-alpha': any; 'surface-contrast-dark-alpha': any; 'surface-contrast-secondary': any; 'surface-interactive-default': any; 'surface-interactive-default-hover': any; 'surface-interactive-default-active': any; 'surface-interactive-primary': any; 'surface-interactive-primary-hover': any; 'surface-interactive-primary-active': any; 'surface-interactive-secondary': any; 'surface-interactive-secondary-hover': any; 'surface-interactive-secondary-active': any; 'surface-interactive-neutral': any; 'surface-interactive-neutral-hover': any; 'surface-interactive-neutral-active': any; 'surface-interactive-informative': any; 'surface-interactive-informative-hover': any; 'surface-interactive-informative-active': any; 'surface-interactive-warning': any; 'surface-interactive-warning-hover': any; 'surface-interactive-warning-active': any; 'surface-interactive-critical': any; 'surface-interactive-critical-hover': any; 'surface-interactive-critical-active': any; 'surface-interactive-primary-ghost': string; 'surface-interactive-primary-ghost-hover': any; 'surface-interactive-primary-ghost-active': any; 'surface-interactive-informative-ghost': string; 'surface-interactive-informative-ghost-hover': any; 'surface-interactive-informative-ghost-active': any; 'surface-interactive-secondary-ghost': string; 'surface-interactive-secondary-ghost-hover': any; 'surface-interactive-secondary-ghost-active': any; 'surface-interactive-warning-ghost': string; 'surface-interactive-warning-ghost-hover': any; 'surface-interactive-warning-ghost-active': any; 'surface-interactive-critical-ghost': string; 'surface-interactive-critical-ghost-hover': any; 'surface-interactive-critical-ghost-active': any; 'surface-interactive-disabled': any; 'surface-interactive-contrast-light-alpha': any; 'surface-interactive-contrast-light-alpha-hover': any; 'surface-interactive-contrast-light-alpha-active': any; 'graphic-default': any; 'graphic-neutral': any; 'graphic-primary': any; 'graphic-primary-strong': any; 'graphic-informative': any; 'graphic-informative-strong': any; 'graphic-info': any; 'graphic-info-strong': any; 'graphic-success': any; 'graphic-success-strong': any; 'graphic-warning': any; 'graphic-warning-strong': any; 'graphic-critical': any; 'graphic-critical-strong': any; 'graphic-disabled': any; 'graphic-disabled-strong': any; 'graphic-inverted': any; 'graphic-contrast-dark': any; 'graphic-contrast-light': any; 'graphic-interactive-default': any; 'graphic-interactive-default-hover': any; 'graphic-interactive-default-active': any; 'graphic-interactive-primary': any; 'graphic-interactive-primary-hover': any; 'graphic-interactive-primary-active': any; 'graphic-interactive-informative': any; 'graphic-interactive-informative-hover': any; 'graphic-interactive-informative-active': any; 'graphic-interactive-secondary': any; 'graphic-interactive-secondary-hover': any; 'graphic-interactive-secondary-active': any; 'graphic-interactive-critical': any; 'graphic-interactive-critical-hover': any; 'graphic-interactive-critical-active': any; 'graphic-interactive-warning': any; 'graphic-interactive-warning-hover': any; 'graphic-interactive-warning-active': any; 'graphic-interactive-primary-ghost': string; 'graphic-interactive-primary-hover-ghost': any; 'graphic-interactive-primary-active-ghost': any; 'graphic-interactive-informative-ghost': string; 'graphic-interactive-informative-hover-ghost': any; 'graphic-interactive-informative-active-ghost': any; 'graphic-interactive-critical-ghost': string; 'graphic-interactive-critical-hover-ghost': any; 'graphic-interactive-critical-active-ghost': any; 'graphic-interactive-secondary-ghost': string; 'graphic-interactive-secondary-hover-ghost': any; 'graphic-interactive-secondary-active-ghost': any; 'graphic-interactive-contrast-light-alpha': any; 'graphic-interactive-contrast-light-alpha-hover': any; 'graphic-interactive-contrast-light-alpha-active': any; 'icon-default': any; 'icon-highlight': any; 'icon-base': any; 'icon-primary': any; 'icon-secondary': any; 'icon-disabled': any; 'icon-info': any; 'icon-success': any; 'icon-warning': any; 'icon-critical': any; 'icon-inverted': any; 'icon-secondary-inverted': any; 'icon-contrast-secondary': any; 'icon-contrast-light': any; 'icon-contrast-dark': any; 'icon-interactive-default': any; 'icon-interactive-default-hover': any; 'icon-interactive-default-active': any; 'icon-interactive-primary': any; 'icon-interactive-primary-hover': any; 'icon-interactive-primary-active': any; 'icon-interactive-informative': any; 'icon-interactive-informative-hover': any; 'icon-interactive-informative-active': any; 'icon-interactive-secondary': any; 'icon-interactive-secondary-hover': any; 'icon-interactive-secondary-active': any; 'icon-interactive-critical': any; 'icon-interactive-critical-hover': any; 'icon-interactive-critical-active': any; 'icon-interactive-warning': any; 'icon-interactive-warning-hover': any; 'icon-interactive-warning-active': any; 'icon-interactive-contrast': any; 'icon-interactive-contrast-hover': any; 'icon-interactive-contrast-active': any; 'call-assigned': any; 'call-answered': any; 'call-missed': any; 'call-callback': any; 'call-abandoned': any; 'call-voicemail': any; 'surface-primary-alpha': string; 'surface-secondary-alpha': string; 'surface-primary-contrast-dark-alpha': string; 'surface-secondary-contrast-dark-alpha': string; 'primary-900': string; 'primary-800': string; 'primary-700': string; 'primary-600': string; 'primary-500': string; 'primary-300': string; 'primary-100': string; 'primary-50': string; 'neutral-1000': string; 'neutral-900': string; 'neutral-800': string; 'neutral-700': string; 'neutral-600': string; 'neutral-500': string; 'neutral-400': string; 'neutral-300': string; 'neutral-200': string; 'neutral-100': string; 'neutral-0': string; 'secondary-900': string; 'secondary-800': string; 'secondary-700': string; 'secondary-600': string; 'secondary-500': string; 'secondary-400': string; 'secondary-300': string; 'secondary-200': string; 'secondary-100': string; 'secondary-50': string; 'informative-800': string; 'informative-700': string; 'informative-600': string; 'informative-500': string; 'informative-300': string; 'informative-100': string; 'success-800': string; 'success-700': string; 'success-500': string; 'success-300': string; 'success-100': string; 'warning-800': string; 'warning-700': string; 'warning-600': string; 'warning-500': string; 'warning-300': string; 'warning-100': string; 'critical-950': string; 'critical-900': string; 'critical-800': string; 'critical-700': string; 'critical-600': string; 'critical-500': string; 'critical-300': string; 'critical-100': string; 'critical-50': string; 'decorative1-800': string; 'decorative1-700': string; 'decorative1-600': string; 'decorative1-300': string; 'decorative1-100': string; 'decorative2-800': string; 'decorative2-700': string; 'decorative2-600': string; 'decorative2-300': string; 'decorative2-100': string; }; space: { 0: number; 0.5: number; 1: number; 2: number; 3: number; 4: number; 5: number; 6: number; 7: number; 8: number; 9: number; xxxs: number; xxs: number; xs: number; s: number; m: number; l: number; xl: number; xxl: number; xxxl: number; }; inset: { 0: number; 0.5: number; 1: number; 2: number; 3: number; 4: number; 5: number; 6: number; 7: number; 8: number; 9: number; xxxs: number; xxs: number; xs: number; s: number; m: number; l: number; xl: number; xxl: number; xxxl: number; }; screens: { _: number; xs: number; sm: number; md: number; lg: number; xl: number; }; durations: { instant: string; 'fast-in': string; 'fast-out': string; 'slow-in': string; 'slow-out': string; }; radii: { none: string; xs: string; sm: string; md: string; default: string; lg: string; full: string; }; shadows: { 1: string; 2: string; 3: string; 4: string; 5: string; 6: string; }; gridTemplateColumns: { 1: string; 2: string; 3: string; 4: string; 5: string; 6: string; 7: string; 8: string; 9: string; 10: string; 11: string; 12: string; }; gridTemplateRows: { 1: string; 2: string; 3: string; 4: string; 5: string; 6: string; }; fonts: { default: string; }; typography: { supportingRegularXS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingMediumXS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingSemiboldXS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingRegularS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingMediumS: { fontWeight: number; fontSize: string; lineHeight: string; }; supportingSemiboldS: { fontWeight: number; fontSize: string; lineHeight: string; }; bodyRegularS: { fontWeight: number; fontSize: string; lineHeight: string; }; bodyMediumS: { fontWeight: number; fontSize: string; lineHeight: string; }; bodySemiboldS: { fontWeight: number; fontSize: string; lineHeight: string; }; bodyRegularM: { fontWeight: number; fontSize: string; lineHeight: string; }; bodyMediumM: { fontWeight: number; fontSize: string; lineHeight: string; }; bodySemiboldM: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightXS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumXS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldXS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldS: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightM: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumM: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldM: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingLightXL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingMediumXL: { fontWeight: number; fontSize: string; lineHeight: string; }; headingBoldXL: { fontWeight: number; fontSize: string; lineHeight: string; }; }; transitions: { [key: string]: string; }; transitionProperties: { default: string[]; colors: string[]; opacity: string[]; shadow: string[]; transform: string[]; }; timingFunctions: { 'ease-in': string; 'ease-out': string; 'ease-in-out': string; }; animations: { spin: string; ping: string; pulse: string; bounce: string; }; states: { _: null; motionSafe: string; motionReduce: string; first: string; last: string; odd: string; even: string; visited: string; checked: string; focusWithin: string; hover: string; focus: string; focusVisible: string; active: string; disabled: string; placeholder: string; }; }; type BaseTheme = { useColorSchemeMediaQuery: boolean; colors: typeof colors; space: typeof space; inset: typeof space; screens: Partial; durations: typeof durations; radii: typeof radii; shadows: typeof shadows; gridTemplateColumns: typeof gridTemplateColumns; gridTemplateRows: typeof gridTemplateRows; fonts: typeof fonts; typography: typeof typography; transitions: typeof transitions; transitionProperties: typeof transitionProperties; timingFunctions: typeof timingFunctions; animations: typeof animations; states: typeof states; }; interface DefaultTheme extends BaseTheme { } type PrimitiveValue = string | number; type Dict = Record; type Assign = { [K in keyof T]: K extends keyof U ? U[K] : T[K]; } & U; type HtmlProp = 'color' | 'size' | 'translate' | 'transition' | 'width' | 'height' | 'content'; type PatchHtmlProps = Omit; type AssignHtmlProps = Assign, P>; interface PolymorphicProps { as?: ElementType; } type HTMLTractorProps = AssignHtmlProps, PolymorphicProps>; interface AsProps { as?: T; } /** * Extract the props of a React element or component */ type PropsOf = React__default.ComponentPropsWithoutRef & AsProps; type OmitCommonProps = Omit; type RightJoinProps = OmitCommonProps & OverrideProps; type MergeWithAs = (RightJoinProps | RightJoinProps) & { as?: AsComponent; }; type ComponentWithAs = { (props: MergeWithAs, React__default.ComponentProps, Props, AsComponent>): React__default.ReactElement; displayName?: string; id?: string; }; type AccordionSelected = PrimitiveValue; interface AccordionProps { selected?: AccordionSelected; defaultSelected?: AccordionSelected; onChange?: (selected: AccordionSelected) => void; children: ReactElement | ReactElement[]; } /** * Accordion displays a list of items that can be shown individually by clicking an item's header. */ declare const Accordion: ({ children, selected: selectedProp, defaultSelected, onChange, ...accordionProps }: AccordionProps) => react_jsx_runtime.JSX.Element; declare const AccordionBody: { ({ children, ...styleProps }: React__default.PropsWithChildren<{}>): react_jsx_runtime.JSX.Element; displayName: string; }; declare const AccordionHeader: { ({ children, ...styleProps }: React$1.PropsWithChildren<{}>): react_jsx_runtime.JSX.Element; displayName: string; }; interface AccordionItemProps { children: ReactElement | ReactElement[]; /** The id of AccordionItem */ id: AccordionSelected; } declare function AccordionItem({ children, id }: AccordionItemProps): react_jsx_runtime.JSX.Element; declare namespace AccordionItem { var displayName: string; } declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"]; declare const ALIGN_OPTIONS: readonly ["start", "center", "end"]; type Side = (typeof SIDE_OPTIONS)[number]; type Align = (typeof ALIGN_OPTIONS)[number]; interface PopoverRootProps { children: React$1.ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; } interface FlexBoxItemProps extends FlexProps$1, FlexGrowProps, FlexShrinkProps, FlexBasisProps, JustifySelfProps, AlignSelfProps, OrderProps { } interface GridItemProps extends GridAreaProps, GridColumnProps, GridRowProps { } interface BoxProps extends SpaceProps, SizingProps, LayoutProps, InteractivityProps, EffectsProps, BordersProps, TablesProps, BackgroundsProps, ColorProps, FlexBoxItemProps, GridItemProps, OverflowProps, OverflowXProps, OverflowYProps { } declare const Box: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, styled_components.DefaultTheme, BoxProps, "color">; interface MotionBoxProps extends BoxProps, MotionProps { id?: string; role?: string; children?: ReactNode; } declare const MotionBox: framer_motion.CustomDomComponent; type PopoverTriggerProps = React.ComponentProps<'div'> & BoxProps & { children: React.ReactNode; }; interface FlexProps extends BoxProps, FlexboxesProps, GapProps { } declare const Flex: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, FlexProps, "color">; interface PortalProps { children: React$1.ReactNode; containerRef?: React$1.RefObject; zIndex?: number; } declare const MAX_Z_INDEX = 2147483647; declare const Portal: React$1.ForwardRefExoticComponent>; interface PurePopoverContentProps { /** * Side of the popover */ side?: Side; /** * Specifies the offset value in pixels for the popover position from the given side of the target element. */ sideOffset?: number; /** * Specifies the alignment of the popover with the target element. */ align?: Align; /** * Specifies the offset value in pixels for the popover position from the given align position of the target element. */ alignOffset?: number; /** * Specifies the collision tolerance value in pixels. * If the popover overlaps with the boundary element, * it will be moved by this tolerance value until it fits within the viewable area. */ collisionTolerance?: number; /** * Specifies whether or not the popover should avoid collisions with the boundary element. * * If set to true and the collision happens, either the side and/or the align props will flip to fit the popover into the screen. */ avoidCollisions?: boolean; /** * When set to true, the popover will be rendered as a portal. */ portalled?: boolean; /** * Make the popover take the full width of the trigger. */ takeTriggerWidth?: boolean; /** * Close when clicking outside of the popover content. */ closeOnOutsideClick?: boolean; /** * Close when clicking anywhere in the document. */ closeOnInsideClick?: boolean; /** * Close when scrolling outside of the popover content. */ closeOnScroll?: boolean; /** * Makes the arrow point to the center of the trigger. */ arrowPointsAtCenter?: boolean; /** * When set to true, the popover content will try to take the left space until the reaching the edge of the screen. */ takeViewportHeight?: boolean; /** * Sets the z-index of the popover content. */ zIndex?: number; children: React$1.ReactNode; /** * Allows to specify a custom container for the portal. * This allows tooltips rendered inside pop-windows to be rendered in the pop-up window. */ portalContainerRef?: PortalProps['containerRef']; } type PopoverContentProps = FlexProps & PurePopoverContentProps & React$1.ComponentProps<'div'>; interface PopoverArrowProps { offset?: number; children: React$1.ReactNode; } declare const Popover: { Root: ({ children, open: openProp, defaultOpen, onOpenChange }: PopoverRootProps) => react_jsx_runtime.JSX.Element; Trigger: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; Content: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; Arrow: React$1.ForwardRefExoticComponent>; }; interface PopoverCtx { trigger: HTMLElement | null; onTriggerChange: (trigger: HTMLElement | null) => void; open: boolean; setOpen: (open: boolean) => void; toggleOpen: () => void; } declare const PopoverContext: React$1.Context; declare const usePopoverContext: () => PopoverCtx; interface PopoverPlacementCtx { side?: Side; align?: Align; } declare const PopoverPlacementContext: React$1.Context; declare const usePopoverPlacement: () => PopoverPlacementCtx; interface PopoverArrowCtx { arrowStyles: React$1.CSSProperties; onArrowChange(arrow: HTMLSpanElement | null): void; onArrowOffsetChange(offset?: number): void; } declare const PopoverArrowContext: React$1.Context; declare const usePopoverArrow: () => PopoverArrowCtx; interface DropdownProps extends PurePopoverContentProps, Pick { /** The trigger of the dropdown */ trigger: ReactElement; /** Dropdown will be triggered on hover instead of onClick (the default way of triggering) */ triggerOnHover?: boolean; /** * Initial visible state of dropdown */ defaultVisible?: boolean; /** Toggle visibility in a controlled manner */ visible?: boolean; /** Handle visibility change in a controlled manner */ onVisibilityChange?: (visible: boolean) => void; /** Use if you would like to have the dropdown close on inside click */ closeOnInsideClick?: boolean; /** * Set data-test for unit testing purposes */ ['data-test']?: string; } declare const Dropdown: ({ trigger, triggerOnHover, side, align, defaultVisible, visible, onVisibilityChange, closeOnInsideClick, children, "data-test": testId, maxWidth, ...otherProps }: DropdownProps) => react_jsx_runtime.JSX.Element; type ComponentSizes = 'small' | 'regular' | 'large'; type ButtonProps = { /** * Defines the size of the Button. **/ size?: ButtonSizes; /** * Defines the color or the variant of the Button. */ variant?: ButtonVariants; /** * Defines the mode of the Button which changes how the background and the border and displayed. */ mode?: ButtonModes; /** * Specify whether the Button should be disabled, or not. */ disabled?: boolean; /** * If set to `true`, the Button will have the same width as its parent's */ block?: boolean; /** * Specify the shape of the Button */ shape?: ButtonShapes; /** * Whether or not the Button is on readOnly mode. */ readOnly?: boolean; /** * Specify the content of the Button. */ children?: ReactNode; } & HTMLTractorProps<'button'>; interface ButtonContainerProps { shape: ButtonShapes; buttonSize: ButtonSizes; variant: ButtonVariants; mode: ButtonModes; disabled?: boolean; block?: boolean; readOnly?: boolean; onClick?: ReactEventHandler; } type ButtonSizes = 'xSmall' | ComponentSizes; type ButtonVariants = 'primary' | 'critical' | 'secondary' | 'warning' | 'informative'; type ButtonModes = 'fill' | 'outline' | 'ghost' | 'link'; type ButtonShapes = 'default' | 'circle'; /** * The Button component is a clickable UI element that triggers actions and communicates calls to action to the user. * It allows users to interact with pages and applications in various ways. The text displayed on the Button label should clearly express what action will occur when the user interacts with it. */ declare const Button: ComponentWithAs<"button", ButtonProps>; interface DropdownButtonProps extends Omit { /** Opened dropdown icon */ iconOpen?: React$1.ReactElement; /** Closed dropdown icon */ iconClose?: React$1.ReactElement; /** The button content */ children?: React$1.ReactNode; /** * Set data-test for unit testing purposes */ ['data-test']?: string; } declare const DropdownButton: React$1.ForwardRefExoticComponent>; declare const useDropdownContext: () => PopoverCtx; type MenuSelectionModes = 'single' | 'multiple' | 'none'; type MenuSizes = ComponentSizes | 'xLarge'; interface MenuCtx { menuDisabled?: boolean; selectionMode: MenuSelectionModes; size: MenuSizes; menuBordered: boolean; menuReadOnly?: boolean; onItemSelect: (key: K) => void; selectedKeys: K[]; setSelectedKeys: (keys: K[]) => void; } interface UseMenuSelection { selectionMode: MenuSelectionModes; selectedKeys?: K[]; defaultSelectedKeys?: K[]; disabled?: boolean; onSelect?: (selectedKey: K, currentSelectedKeys: K[]) => void; onDeselect?: (selectedKey: K, currentSelectedKeys: K[]) => void; onSelectionChange?: (currentSelectedKeys: K[]) => void; } declare const useMenuSelection: ({ selectionMode, selectedKeys: controlledSelectedKeys, defaultSelectedKeys, onSelect, onDeselect, onSelectionChange, disabled }: UseMenuSelection) => { onItemSelect: (key: K) => void; menuDisabled: boolean | undefined; selectedKeys: K[]; selectionMode: MenuSelectionModes; setSelectedKeys: React$1.Dispatch>; }; declare const MenuContext: React$1.Context>; declare const useMenu: () => MenuCtx; interface MenuProviderProps { selectionMode: MenuSelectionModes; selectedKeys?: K[]; defaultSelectedKeys?: K[]; disabled?: boolean; bordered?: boolean; readOnly?: boolean; size: MenuSizes; onSelect?: (selectedKey: K, currentSelectedKeys: K[]) => void; onDeselect?: (selectedKey: K, currentSelectedKeys: K[]) => void; onSelectionChange?: (currentSelectedKeys: K[]) => void; children: React$1.ReactNode; } declare const MenuProvider: ({ selectionMode, size, bordered, readOnly, selectedKeys: controlledSelectedKeys, defaultSelectedKeys, onSelect, onDeselect, onSelectionChange, disabled, children }: MenuProviderProps) => react_jsx_runtime.JSX.Element; interface MenuItemOptions { /** * Unique ID of the menu item. * * This is only required when `selectionMode` is not set to `none`. */ itemKey?: PrimitiveValue; /** * When set to true, the menu item is disabled and cannot be interacted with. */ disabled?: boolean; /** * Whether or not the item is on readOnly mode. */ readOnly?: boolean; /** * Whether to put a border around the item */ bordered?: boolean; /** * Menu item size */ size?: MenuSizes; } interface MenuItemProps extends HTMLTractorProps<'div'>, MenuItemOptions { } interface MenuItemGroupProps { title?: string; divider?: boolean; children: React$1.ReactNode; } interface PureMenuRootProps { /** * Set data-test for unit testing purposes */ ['data-test']?: string; /** * The selection mode of the menu. */ selectionMode?: MenuSelectionModes; /** * the initial list of selected keys */ defaultSelectedKeys?: T[]; /** * the list of selected keys */ selectedKeys?: T[]; /** * Whether all items are disabled */ disabled?: boolean; /** * Whether all items are read-only */ readOnly?: boolean; /** * Whether all menu container have or not borders */ bordered?: boolean; /** * Called when a menu item is selected */ onItemSelected?: (selectedKey: T, currentSelectedKeys: T[]) => void; /** * Called when a menu item is deselected */ onItemDeselected?: (selectedKey: T, currentSelectedKeys: T[]) => void; /** * Called when the selection changes */ onSelectionChange?: (currentSelectedKeys: T[]) => void; /** * The size of the Menu and menu items. * * Possible values: `small` | `regular` | `large` | `xLarge` */ size?: MenuSizes; /** * The children of the Menu. */ children: React$1.ReactNode; } type MenuRootProps = BoxProps & PureMenuRootProps & Omit, 'ref' | 'content'>; declare const MenuItem: ComponentWithAs<"div", MenuItemProps>; declare const MenuItemCheckIcon: () => react_jsx_runtime.JSX.Element; declare const MenuItemGroup: ({ title, divider, children }: MenuItemGroupProps) => react_jsx_runtime.JSX.Element; interface MenuItemPrefixProps extends BoxProps { children: React__default.ReactNode; } declare const MenuItemPrefix: ({ children, ...boxProps }: MenuItemPrefixProps) => react_jsx_runtime.JSX.Element; declare const InjectGlobalStyle: styled_components.GlobalStyleComponent<_xstyled_util.Props<_xstyled_system.Theme>, styled_components.DefaultTheme>; type ThemeType = Partial | ((theme: DefaultTheme) => DefaultTheme); interface ThemeProviderProps { theme?: ThemeType; deepMerge?: boolean; } declare const ThemeProvider: ({ children, theme, deepMerge }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; interface TypographyProps extends TypographyProps$1, BoxProps { wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'; variant?: TypographyVariants | Partial>; ellipsis?: boolean | number; } type TypographyScreens = keyof DefaultTheme['screens']; type TypographyVariants = keyof DefaultTheme['typography']; type LinkProps = TypographyProps & HTMLTractorProps<'a'>; declare const Typography: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps, "color">; declare const Link: (props: PropsWithChildren) => react_jsx_runtime.JSX.Element; declare const StyledMenuItemLabel: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps, "color">; interface MenuItemLabelProps extends TypographyProps { children: React$1.ReactNode; } declare const MenuItemLabel: ({ children, ...typographyProps }: MenuItemLabelProps) => react_jsx_runtime.JSX.Element; declare const StyledMenuItemDescription: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps, "color">; interface MenuItemDescriptionProps extends TypographyProps { children: React$1.ReactNode; } declare const MenuItemDescription: ({ children, ...typographyProps }: MenuItemDescriptionProps) => react_jsx_runtime.JSX.Element; interface MenuItemSuffixProps extends BoxProps { children: React__default.ReactNode; } declare const MenuItemSuffix: ({ children, ...boxProps }: MenuItemSuffixProps) => react_jsx_runtime.JSX.Element; declare const Menu: (props: MenuRootProps & { ref?: ForwardedRef; }) => React__default.ReactElement; interface ActionMenuItem extends Pick { prefix?: React$1.ReactNode; name: React$1.ReactNode; } interface ActionMenuProps extends Pick { items: ActionMenuItem[]; } declare const ActionMenu: ({ items, trigger, side, align, sideOffset, alignOffset }: ActionMenuProps) => react_jsx_runtime.JSX.Element; declare const colorsOptions: readonly ["green", "yellow", "default"]; type Colors = typeof colorsOptions[number]; interface AudioBarProps { height?: string; color?: Colors; disabled?: boolean; } /** * The AudioBar component is part of the AudioPlayer components. * The component is responsible for displaying and controlling the current time of the playback * The component must be a descendant of the Audio wrapper component in order to interact with its audio * The AudioBar provides 2 ways to change the current time of the playback * - Dragging the thumb to the desired moment * - Clicking on a specific position on the bar. */ declare const AudioBar: ({ height, color, disabled }: AudioBarProps) => react_jsx_runtime.JSX.Element; declare const AudioCurrentTime: () => react_jsx_runtime.JSX.Element; interface Props { initialDuration?: number; } declare const AudioDuration: ({ initialDuration }: Props) => react_jsx_runtime.JSX.Element; interface PlayButtonProps { mode?: 'icon' | 'button'; color?: Colors; loading?: boolean; disabled?: boolean; ariaLabel?: string; onClick?: (status: 'playing' | 'paused' | 'ended') => void; } /** * * The PlayButton component is responsible for the play & pause of the audio. * The component must be a descendant of the Audio component in order to be able to interact with its audio. * The PlayButton has the following displays * - Play - Audio is currently paused * - Pause - Audio is currently playing * - Replay - Audio is paused and got to its ending */ declare const PlayButton: ({ color, disabled, loading, mode, ariaLabel, onClick }: PlayButtonProps) => react_jsx_runtime.JSX.Element; interface QuickAudioPlayerProps { src: string; loading?: boolean; initialDuration?: number; color?: Colors; onPlayClick?: (status: 'playing' | 'paused' | 'ended') => void; } /** * * The QuickAudioPlayer component is a solution for rendering fast and simple the AirCall basic audio player. * The component is using internally the Audio wrapper component so the only requirement for using it is wrapping the app with AudioManager * The QuickAudioPlayer provide the following functionality * - Playing and pausing the playback * - Displaying the current time of the provided audio * - Modifying the current time of the provided audio */ declare const QuickAudioPlayer: ({ src, initialDuration, loading, color, onPlayClick }: QuickAudioPlayerProps) => react_jsx_runtime.JSX.Element; type AvatarSizes = ComponentSizes | 'xLarge' | (string & {}); type AvatarVariants = 'default' | 'green' | 'blue' | 'yellow' | 'pink' | 'orange' | 'mint' | 'purple' | 'teal' | 'gray'; type AvatarShapes = 'circle' | 'rounded'; interface AvatarProps { /** * Defines the size of the avatar. **/ size?: AvatarSizes; /** * Defines the variant of the avatar. * * This is only applicable when the image is not provided. */ variant?: AvatarVariants; /** * Defines the shape of the avatar. */ shape?: AvatarShapes; /** * Disabled state of the avatar. Note that it'll apply a grayscale filter on an avatar image. */ disabled?: boolean; /** * Specify the content of the Avatar. */ children?: ReactNode; } /** * The Avatar component is a visual representation of a user or object, typically consisting of an image or icon and a name or initial. */ declare const Avatar: React__default.ForwardRefExoticComponent>; interface AvatarFallbackProps { children: ReactNode; delayMs?: number; } /** * An element that renders when the image hasn't loaded. * This means whilst it's loading, or if there was an error. * If you notice a flash during loading, you can provide a delayMs prop to delay its rendering * so it only renders for those with slower connections. */ declare const AvatarFallback: ({ children, delayMs }: AvatarFallbackProps) => react_jsx_runtime.JSX.Element | null; interface SizeProps { size?: SystemProp; } declare const size: _xstyled_system.StyleGenerator>; declare const outlineStyles: styled_components.FlattenSimpleInterpolation; declare const outlineFocusVisible: styled_components.FlattenSimpleInterpolation; interface IconProps extends SizeProps, SpaceProps, ColorProps, OpacityProps { component: ComponentType> | string; spin?: boolean; onClick?: MouseEventHandler; children?: ReactNode; } interface IconContainerProps extends SizeProps, SpaceProps, ColorProps, OpacityProps { spin?: boolean; } declare const Icon: React__default.ForwardRefExoticComponent>; interface IconContextProps { icons?: Record>>; } declare const IconContext: React__default.Context; declare const IconProvider: React__default.Provider; declare const useIconContext: () => IconContextProps | null; interface AvatarIconProps { icon: IconProps['component']; size?: IconProps['size']; iconSize?: IconProps['size']; } declare const AvatarIcon: React__default.ForwardRefExoticComponent>; interface AvatarImgProps extends ImgHTMLAttributes { src: string; } declare const AvatarImg: React__default.ForwardRefExoticComponent>; interface AvatarTextProps { name?: string; initials?: string; } declare const AvatarText: React__default.ForwardRefExoticComponent>; interface QuickAvatarProps { size?: AvatarProps['size']; variant?: AvatarProps['variant']; /** * Defines the URL of the image to use. */ src?: AvatarImgProps['src']; /** * Defines icon to use as avatar. */ icon?: AvatarIconProps['icon']; /** * Disabled state of the avatar. Note that it'll apply a grayscale filter on an avatar image. */ disabled?: AvatarProps['disabled']; /** * Avatar initials */ initials?: AvatarTextProps['initials']; /** * Avatar shape. Default is circle. */ shape?: AvatarProps['shape']; /** * Avatar name that will be used to generate initials */ name?: AvatarTextProps['name']; iconSize?: IconProps['size']; } declare const QuickAvatar: React$1.ForwardRefExoticComponent>; interface OffsetTop { offsetTop?: SystemProp | CSSProperties['top'], T>; } interface OffsetRight { offsetRight?: SystemProp | CSSProperties['right'], T>; } interface BadgeProps extends OffsetTop, OffsetRight { /** * Defines the color or the variant of the Badge. */ variant?: BadgeVariants; /** * Defines the size of the badge. **/ size?: BadgeSizes; /** * Defines the background color of the tag */ bg?: ThemeColor | string; /** * Defines the text color of the tag. * If you set the `bg` property but leave this one empty, * the text color will be automatically generated based on * the contrast. */ color?: ThemeColor | string; /** * Defines if should be display or not. */ visible?: boolean; /** * Defines icon to use inside of the badge. */ icon?: ReactNode; children?: ReactNode; } type BadgeSizes = ComponentSizes | 'xLarge'; type BadgeVariants = 'primary' | 'blue' | 'yellow' | 'red' | 'grey'; declare const Badge: React__default.ForwardRefExoticComponent>; interface GridProps extends BoxProps, GridsProps, FlexboxesProps { } declare const Grid: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, GridProps, "color">; type NotificationVariants = 'success' | 'info' | 'warning' | 'critical'; interface NotificationRootProps extends GridProps { /** * Defines the color or the variant of the Notification. */ variant: NotificationVariants; /** * The content to be displayed inside the Notification */ children: ReactNode; 'data-test'?: string; } interface NotificationIconProps extends BoxProps { /** * Controls the display of the icon associated with the Notification. * If set to a valid ReactNode, the default icon will be replaced. * If set to false, the icon will be hidden. * If not provided, the default icon associated to the variant will be used. */ icon?: React.ReactNode | boolean; 'data-test'?: string; } type DismissNotificationFn = () => void; type NotificationAction = { children: ReactNode; variant?: ButtonProps['variant']; mode?: ButtonProps['mode']; onClick: (onDismiss: DismissNotificationFn) => void; [dataAttrs: `data-${string}`]: string; }; declare const BannerIcon: (props: NotificationIconProps) => react_jsx_runtime.JSX.Element; declare const BannerHeading: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps, "color">; declare const BannerParagraph: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps, "color">; declare const BannerSuffix: styled_components.StyledComponent>, _xstyled_system.Theme, {}, never>; declare const BannerButton: ({ children, mode, variant, ...otherButtonProps }: Omit) => react_jsx_runtime.JSX.Element; type BannerVariants = NotificationVariants; type BannerAction = NotificationAction; interface BannerItem { /** * Defines the color or the variant of the button. * * Possible values: 'success' | 'info' | 'warning' | 'error' | 'neutral'; */ variant: BannerVariants; /** * Heading of the banner */ heading: ReactNode; /** * Paragraph of the banner */ paragraph?: ReactNode; /** * List of actions that can */ actions?: BannerAction[]; /** * Customize the icon or use the default banner's variant default icon. */ icon?: React.ReactNode | boolean; /** * Unique Identifier for a banner */ id?: string; } interface InternalBanner extends BannerItem { id: string; } type BannerRootProps = NotificationRootProps & { inline?: boolean; }; /** * The Banner component is intended to be used as a prominent visual element * to convey important information or actions to users. * * It can be used to communicate notifications, warnings, errors, success messages, or calls to action. * The Banner component should be placed at the top of the page or section where the user's attention * needs to be drawn, and can be dismissed or closed by the user when appropriate. */ declare const Banner: ({ variant, ...rest }: BannerRootProps) => react_jsx_runtime.JSX.Element; interface BannerCtx { /** * List of "visible" banners. */ banners: InternalBanner[]; /** * Function which lets you display a banner item on the page. * This function also returns a cleanup function which gives you the ability * to remove the banner "manually". */ showBanner: (banner: BannerItem) => () => void; /** * Function which lets you remove a given banner by its ID from the list. */ removeBanner: (id: string) => void; } declare const BannerContext: React$1.Context; declare const useBanner: () => BannerCtx; interface BannerManagerProps { /** * Container on which the Banners List would be render in. * Defaults to document.body. */ container?: HTMLElement | (() => HTMLElement); } declare const BannerManager: ({ children, container }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; declare const banners: { showBanner: (banner: BannerItem) => void; removeBanner: (id: BannerItem["id"]) => void; }; declare const Checkbox: React__default.ForwardRefExoticComponent<_xstyled_system.SpaceProps<_xstyled_system.Theme> & { id?: string; validationStatus?: FormItemStatuses; checked?: boolean; defaultChecked?: boolean; indeterminate?: boolean; size?: ComponentSizes; disabled?: boolean; readOnly?: boolean; onChange?: (checked: boolean) => void; children?: React__default.ReactNode; } & Omit, "onChange" | "defaultValue" | "value" | "size"> & React__default.RefAttributes>; interface CheckboxLabelProps { children: React$1.ReactNode; } declare const CheckboxLabel: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps & { as: string; 'data-test': string; } & CheckboxLabelProps, "color" | "as" | "data-test">; interface CheckboxDescriptionProps extends TypographyProps { children: React$1.ReactNode; } declare const CheckboxDescription: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps & { as: string; 'data-test': string; } & CheckboxDescriptionProps, "color" | "as" | "data-test">; interface FormProps extends Omit, 'size'> { /** * Defines the size of the form components used inside of the Form. * * Possible values: `small` | `regular` | `large` **/ size?: ComponentSizes; } declare const Form: ({ size, children, ...otherFormProps }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; type FormItemStatuses = 'success' | 'error'; type FormItemSizes = 'success' | 'error'; interface FormItemProps extends GridProps { /** * Input label id */ labelId?: string; /** * Input label text */ label?: string; /** * Input name */ name?: string; /** * Text to display beneath the form input, it can be a simple help text * or even */ helpText?: string; /** * Defines the status of the form input. */ validationStatus?: FormItemStatuses; } declare const FormItem: ({ label, labelId, name, helpText, validationStatus, children, ...otherStylingProps }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; interface FormContextProps { size?: ComponentSizes; } declare const FormContext: React$1.Context; declare const useFormContext: () => FormContextProps | null; interface FormItemContextProps { name?: string; validationStatus?: FormItemStatuses; } declare const FormItemContext: React$1.Context; declare const useFormItemContext: () => FormItemContextProps | null; type CheckboxProps = SpaceProps & { /** * Whenever we want to focus and toggle the checkbox, the input + label will need an id. */ id?: string; /** * Input validation status. */ validationStatus?: FormItemStatuses; /** * Determines whether the checkbox is checked. * * If the value is defined it means that you have to control the subsequent changes of the component. */ checked?: boolean; /** * It defines the initial value of the checkbox, this will only be used to initialized the checkbox. * * It means that the component will handle the subsequent changes and you have nothing to do. */ defaultChecked?: boolean; /** * Determines whether the checkbox is in an indeterminate state. * * intermediate state is used when the checkbox is part of a group of checkboxes and some of them are checked and some are not. */ indeterminate?: boolean; /** * Defines the size of the checkbox button. **/ size?: ComponentSizes; /** * Disables the Checkbox component */ disabled?: boolean; /** * Makes the Checkbox component read only */ readOnly?: boolean; /** * Set event handler for the "change" event */ onChange?: (checked: boolean) => void; /** * If the value passed to the children property is a string, it will be displayed using the appropriate typography styles of the CheckboxLabel. However, * If the value is something other than a string, it will be rendered without any additional label style. */ children?: ReactNode; } & Omit, 'value' | 'defaultValue' | 'size' | 'onChange'>; interface ComboBoxProviderProps { disabled?: boolean; } interface ComboBoxCtx { selectedKeys: K[]; removeAll: () => void; removeKey: (key: K) => void; setSelectedKeys: (keys: K[]) => void; open: boolean; setOpen: (v: boolean) => void; onItemClicked: () => void; disabled?: boolean; } type ComboBoxProps = Omit, 'disabled' | 'bordered' | 'size'> & { size?: MenuSizes; onOpen?: () => void; onClose?: () => void; disabled?: boolean; open?: PopoverRootProps['open']; defaultOpen?: PopoverRootProps['defaultOpen']; }; type BaseProps = { children: React.ReactNode; }; type TriggerProps = BaseProps; type ComboBoxContentProps = PopoverContentProps; type ComboBoxMenuProps = BoxProps & BaseProps; declare function ComboBox({ children, selectionMode, size, onOpen, onClose, disabled, open, defaultOpen, ...props }: ComboBoxProps): react_jsx_runtime.JSX.Element; declare const ComboBoxTrigger: (props: TriggerProps) => react_jsx_runtime.JSX.Element; /** * This component shows when clicking on the ComboBoxTrigger */ declare const ComboBoxContent: ({ children, ...props }: ComboBoxContentProps) => react_jsx_runtime.JSX.Element; declare const ComboBoxItem: React$1.ForwardRefExoticComponent>; /** * The scrollable part inside ComboBoxContent */ declare const ComboBoxMenu: ({ children, ...props }: ComboBoxMenuProps) => react_jsx_runtime.JSX.Element; declare const useComboBox: () => ComboBoxCtx; interface CounterBadgeProps extends OffsetTop, OffsetRight, Omit { /** * Defines the color or the variant of the Badge. */ variant?: CounterBadgeVariants; /** * Defines the size of the badge. **/ size?: CounterBadgeSizes; /** * Defines the counter to show inside of the badge. */ count: number; /** * Shows an empty bubble for count > 0, no text. */ showEmptyBubble?: boolean; /** * Max count to display */ maxCount?: number; /** * Defines the background color of the tag */ bg?: ThemeColor | string; /** * Defines the text color of the tag. * If you set the `bg` property but leave this one empty, * the text color will be automatically generated based on * the contrast. */ color?: ThemeColor | string; children?: ReactNode; } type CounterBadgeSizes = ComponentSizes; type CounterBadgeVariants = 'red' | 'black' | 'primary'; /** * numerical value descriptor for UI elements */ declare const CounterBadge: React__default.ForwardRefExoticComponent>; type DatePickerValue = { startDate: Date | null; endDate: Date | null; }; interface DatePickerProps { /** How many number of months you'd like to show */ numberOfMonths?: DatePickerProviderProps['numberOfMonths']; /** What initial date you'd like the calendar to start at. Automatically converts it to the month */ initialDate?: DatePickerProviderProps['initialDate']; /** locale */ locale?: string; /** Value of the datePicker, including startDate and endDate */ value?: DatePickerValue; defaultValue?: DatePickerValue; /** A function that will return startDate and endDate whenever they are changed */ onChange?: DatePickerProviderProps['onChange']; /** A function that allows for days to be disabled */ isDateDisabled?: (day: Date) => boolean; /** Set the maximum month a user can go to. You can pick an day with the month. */ maxDate?: DatePickerProviderProps['maxDate']; /** Sets the minimum month of the calendar. if minMonth is after initialDate, it will override it. */ minDate?: DatePickerProviderProps['minDate']; /** This will block the user to only be able to pick one date. onChange will return the same object, with only startDate filled in and endDate as null. Defaults to false */ mode?: DatePickerProviderProps['mode']; /** This will set the direction of the calendar. ie. with 3 calendar month, the initialDate will be the furthest * to the right in past and furthest left in future. Defaults to past. */ calendarDirection?: DatePickerProviderProps['calendarDirection']; /** Adjusts the animation times */ transitionTime?: number; /** Test ID for unit tests */ 'data-test'?: string; } interface DatePickerState { initialized: boolean; hoveredDate: Date | null; setHoveredDate: Dispatch; currentMonth: Date; setCurrentMonth: Dispatch; transition?: 'next' | 'prev'; setTransition: Dispatch; currentMonths: Date[]; setCurrentMonths: Dispatch; navigate: (direction: 'next' | 'prev') => void; clickOnDay: (day: Date) => void; startDate: Date | null; endDate: Date | null; transitionTime: number; singleDate: boolean; disabledDay?: (day: Date) => boolean; daySize: number; locale: string; } type DatePickerMode = 'single' | 'range'; interface DatePickerProviderProps { numberOfMonths: number; initialDate: Date; calendarDirection: 'future' | 'past'; minDate?: Date; maxDate?: Date; children: React.ReactElement; onChange: (value: DatePickerValue) => void; mode?: DatePickerMode; value?: DatePickerValue; transitionTime: number; isDateDisabled: (day: Date) => boolean; daySize: number; locale: string; } interface ArrowButtonProps { direction: 'prev' | 'next'; displaced?: number; } declare function DatePicker({ numberOfMonths, initialDate, locale, value, defaultValue, onChange, maxDate, minDate, mode, calendarDirection, transitionTime, isDateDisabled, 'data-test': dataTest }: DatePickerProps): react_jsx_runtime.JSX.Element; interface DividerProps extends BoxProps { /** * Defines the size of the divider. * * Possible values: `xSmall` | `small` or a any string value. **/ size?: DividerSizes; /** * Defines the orientation of the divider. * * Possible values: `vertical` | `horizontal`. */ orientation?: DividerOrientations; } interface DividerContainerProps extends BoxProps { size: DividerSizes; orientation: DividerOrientations; } declare enum DividerSize { X_SMALL = "xSmall", SMALL = "small" } type DividerSizes = 'xSmall' | 'small'; declare enum DividerOrientation { VERTICAL = "vertical", HORIZONTAL = "horizontal" } type DividerOrientations = 'vertical' | 'horizontal'; declare const Divider: ({ size, orientation, bg, ...props }: DividerProps) => react_jsx_runtime.JSX.Element; declare const ModalBody: ({ children, ...boxProps }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; interface ModalCloseProps { className?: string; } declare function ModalClose({ className }: ModalCloseProps): react_jsx_runtime.JSX.Element; interface ModalFooterProps extends FlexProps { 'data-test'?: string; } declare const ModalFooter: ({ children, "data-test": dataTest, ...flexProps }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; type ModalHeaderProps = FlexProps & { closeButton?: boolean; 'data-test'?: string; }; declare const ModalHeader: ({ closeButton, children, "data-test": dataTest, ...restProps }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; declare const ModalTitle: (props: PropsWithChildren) => react_jsx_runtime.JSX.Element; interface FocusTrapProps { /** * children to be rendered */ children: React.ReactNode; /** * whether the focus trap is active */ active: boolean; /** * callback to be called when the user presses the escape key */ onClose?: () => void; /** * whether the focus should be set to the first focusable element * if the user do not use the keyboard to navigate to the focus trap initial focus will be not visible */ autofocus?: boolean; } declare const FocusTrap: (props: FocusTrapProps) => react_jsx_runtime.JSX.Element; type ModalSizes = 'xSmall' | ComponentSizes | 'full'; type ModalProps = { children: React.ReactNode; /** When `true`, the modal will show itself */ show: boolean; /** A callback fired when the header closeButton or backdrop is clicked */ onHide: () => void; /** The root element where the modal will be appended */ portalContainer?: HTMLElement; /** When `true`, `onHide` will be triggered if backdrop is clicked */ rootClose?: boolean; /** data-test of component*/ 'data-test'?: string; /** z-index of the portal container that wraps the modal*/ zIndex?: number; focusOptions?: Partial; }; type ModalDialogProps = ModalProps & SizingProps$1 & { /** The size of modal */ size?: ModalSizes; className?: string; maxHeight?: string; }; declare const ModalDialog: ({ children, show, onHide, portalContainer, rootClose, "data-test": dataTest, zIndex, size, ...rest }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; type DrawerSide = 'left' | 'right' | 'bottom'; type Placement = 'start' | 'center' | 'end'; interface BoderRadius { borderRadius?: string; } type DrawerProps = ModalProps & BoderRadius & HeightProps & MinHeightProps & MaxHeightProps & WidthProps & MinWidthProps & MaxWidthProps & { side?: DrawerSide; onAnimationComplete?: () => void; } & { placement?: Placement; }; type StyledDrawerProps = { side: DrawerSide; w?: DrawerProps['w']; h?: DrawerProps['h']; placement?: Placement; }; declare const Drawer: ({ side, placement, children, show, onHide, portalContainer, rootClose, focusOptions, "data-test": dataTest, w, h, zIndex, onAnimationComplete, ...contentProps }: DrawerProps) => react_jsx_runtime.JSX.Element; declare const DrawerHeader: (props: PropsOf) => react_jsx_runtime.JSX.Element; declare const DrawerTitle: (props: PropsOf) => react_jsx_runtime.JSX.Element; declare const DrawerClose: typeof ModalClose; declare const DrawerBody: ({ children, ...boxProps }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; declare const DrawerFooter: ({ children, ...flexProps }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; interface FlagIconProps extends SizeProps, SpaceProps, OpacityProps { /** * If countryCode is not provided, or if it doesn't exist, * the flag will default to the `USA` flag. */ countryCode?: string; } declare const IconComponent: _loadable_component.LoadableComponent<{ component: string; }>; declare const FlagIcon: React__default.ForwardRefExoticComponent>; interface GaugeProps { /** * Amount of gauges to display. */ gauges?: number; /** * The value of the gauge. Max value is equal to the amount of gauges. */ value: number; } declare const Gauge: React$1.ForwardRefExoticComponent>; type ColorNames = keyof DefaultTheme['colors']; /** * This type is used to allow autocompletion for color names in the theme * and also allow custom colors. * * By using "| (string & {})"", as opposed to just "| string", we are able to allow any string value * without compromising autocomplete functionality. * * More info here: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-567871939 * * There's limitations to this approach, but they are basically part of how TypeScript works. */ type ColorNamesWithAutocompletion = ColorNames | (string & {}); interface IconButtonContainerProps { /** * Set disabled state of the button */ disabled?: boolean; /** * Set background hover disc color. */ discColor?: ColorNamesWithAutocompletion; } type IconButtonProps = Omit & IconButtonContainerProps & ButtonHTMLAttributes; declare const IconButton: React__default.ForwardRefExoticComponent & IconButtonContainerProps & React__default.ButtonHTMLAttributes & React__default.RefAttributes>; interface ListProps { /** * Define if the list should fill the available space. */ fluid?: boolean; /** * Set data-test for unit testing purposes. */ 'data-test'?: string; } declare const List: ({ children, fluid, "data-test": dataTest }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; interface ListViewProps extends MaxHeightProps$1 { children: React.ReactNode; 'data-test'?: string; } declare const StyledListView: styled_components.StyledComponent<"ul", _xstyled_system.Theme, { hasBottomShadow: boolean; hasTopShadow: boolean; }, never>; declare function ListViewBase({ children, 'data-test': dataTest, ...rest }: ListViewProps, ref: React$1.ForwardedRef): react_jsx_runtime.JSX.Element; declare const ListView: React$1.ForwardRefExoticComponent>; interface ListItemProps extends BoxProps { /** * Set data-test for unit testing purposes. */ 'data-test'?: string; } declare const StyledListItem: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, BoxProps & { as: string; }, "color" | "as">; declare function ListItem({ children, 'data-test': dataTest, ...rest }: React$1.PropsWithChildren): react_jsx_runtime.JSX.Element; interface ListFooterProps { /** * Set data-test for unit testing purposes. */ 'data-test'?: string; } declare function ListFooter({ children, 'data-test': dataTest }: React$1.PropsWithChildren): react_jsx_runtime.JSX.Element; /** * Check if the element is at the bottom of the viewport. * @param element - The HTML element to check. * @returns True if the element is at the bottom of the viewport. */ declare function isScrollAtBottom(element: T): boolean; /** * Check if the element is at the top of the viewport. * @param element - The HTML element to check. * @returns True if the element is at the top of the viewport. */ declare function isScrollAtTop(element: T): boolean; interface ModalContextDefinition { onHide: () => void; } declare const ModalContext: React$1.Context; declare const useModalContext: () => ModalContextDefinition; type PaginationProps = { recordsTotalCount: number; pageSize?: number; defaultPageSize?: number; activePage?: number; defaultActivePage?: number; pageSizeOptions?: { value: number; label: string; }[]; hidePageSizeOptions?: boolean; onPageChange?: (newPageNumber: number) => void; onPageSizeChange?: (newPageSize: number) => void; }; /** * Pagination component is usually used along with the Table compoennt and sits at the * bottom right of it. It is used to manipulate the amount of records to be displayed on * the screen, but also which page of records. */ declare const Pagination: ({ activePage: activePageProp, defaultActivePage, onPageChange, recordsTotalCount, pageSizeOptions, pageSize: pageSizeProp, defaultPageSize, hidePageSizeOptions, onPageSizeChange, ...styleProps }: PaginationProps) => react_jsx_runtime.JSX.Element; type TextFieldVariant = 'input' | 'list'; interface TextFieldProps extends Omit, 'size' | 'as' | 'ref'> { /** * Input validation status. */ validationStatus?: FormItemStatuses; /** * Would you like to show an icon on the left side? */ icon?: ComponentType>; /** * Is the field disabled? */ disabled?: boolean; /** * The... Well.. Value. */ value?: string; /** * The default value. */ defaultValue?: string; /** * Whatever happens when the value changes. */ onChange?: (event: ChangeEvent) => void; /** * Passing this callback will show a "clear input" button on the right. */ onClear?: () => void; variant?: TextFieldVariant; suffix?: React__default.ReactNode; } /** * The PasswordInput component is designed to allow users to input information through a text field. */ declare const PasswordInput: React__default.ForwardRefExoticComponent & { size?: TextInputSizes; variant?: TextFieldVariant; suffix?: React__default.ReactNode; } & { 'data-pseudo'?: string; /** Adds aria label to the visibility button, so that screen reader users know what its purpose is */ visibilityButtonAriaLabel?: string; } & React__default.RefAttributes>; interface UseRadioProps { /** * id assigned to input */ id?: string; /** * The name of the input field in a radio */ name?: string; /** * A string value that identifies a given radio. * * it should be unique inside of the same group. */ value?: any; /** * If `true`, the radio will be checked. * * You'll need to pass `onChange` to update its value (since it is now controlled) */ checked?: boolean; /** * If `true`, the radio will be initially checked. */ defaultChecked?: boolean; /** * Function called when checked state of the `input` changes */ onChange?: (event: React.ChangeEvent) => void; /** * Defines the size of the radio button. * * Possible values: `small` | `regular` | `large` **/ size?: ComponentSizes; /** * Disables the Radio component */ disabled?: boolean; /** * If `true`, the radio will be read-only * * @default false */ readOnly?: boolean; /** * Input validation status. * * Possible values are `success` or `error` */ validationStatus?: FormItemStatuses; } /** * With radio buttons, users can make a selection from a list of options that are mutually exclusive, * meaning only one option can be chosen. * * The available options are displayed in full to allow for easy comparison and selection. */ declare const Radio: React__default.ForwardRefExoticComponent>; type RadioProps = UseRadioProps & { /** * If the value passed to the children property is a string, it will be displayed using the appropriate typography styles of the RadioLabel. However, * If the value is something other than a string, it will be rendered without any additional label style. */ children?: ReactNode; 'data-test'?: string; }; declare const RadioGroup: React__default.ForwardRefExoticComponent & { defaultValue?: any; onChange?: (value: any) => void; } & SpacerProps & React__default.RefAttributes>; interface RadioDescriptionProps extends TypographyProps { children: React$1.ReactNode; } declare const RadioDescription: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps & { as: string; 'data-test': string; } & RadioDescriptionProps, "color" | "as" | "data-test">; interface RadioLabelProps { children: React$1.ReactNode; } declare const RadioLabel: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps & { as: string; 'data-test': string; } & RadioLabelProps, "color" | "as" | "data-test">; type SegmentedControlOptionProps = { value: string; disabled?: boolean; onClick?: (event?: MouseEvent$1) => void; onMouseEnter?: () => void; onMouseLeave?: () => void; }; type SegmentedControlVariant = 'primary' | 'secondary'; type SegmentedControlSizes = ComponentSizes; type SegmentedControlSelectionMode = 'single' | 'multiple'; type SegmentedControlProps = { selectedOptions?: string[]; defaultSelectedOptions?: string[]; /** * Pass it the 'id' of a label */ ariaLabelledby?: string; ariaLabel?: string; /** * @default 'single' */ selectionMode?: SegmentedControlSelectionMode; /** * @default 'primary' */ variant?: SegmentedControlVariant; /** * @default 'regular' */ size?: SegmentedControlSizes; fluid?: boolean; onSelectionChange?: (selectedOptions: string[]) => void; /** * All children must implement `forwardRef` */ children: React.ReactElement | React.ReactElement[]; }; type SegmentedControlProviderProps = { selectionMode: SegmentedControlSelectionMode; variant: SegmentedControlVariant; size: SegmentedControlSizes; selectedOptions?: string[]; defaultSelectedOptions?: string[]; onSelectionChange?: (selectedOptions: string[]) => void; fluid?: boolean; }; type SelectedOptionOffset = { offsetWidth: number; offsetLeft: number; offsetHeight: number; value: string; isResizing: boolean; }; type ChangedSelectedOptionOffset = Omit; type SegmentedControlContextValue = { selectionMode: SegmentedControlSelectionMode; variant: SegmentedControlVariant; fluid: boolean; size: SegmentedControlSizes; isOptionSelected: (value: string) => boolean; onSelectOption: (value: string) => void; }; declare function useSegmentedControlSelection(selectionMode: SegmentedControlProviderProps['selectionMode'], controlledSelectedOptions: SegmentedControlProviderProps['selectedOptions'], onSelectionChange: SegmentedControlProviderProps['onSelectionChange'], defaultSelectedOptions: SegmentedControlProviderProps['defaultSelectedOptions']): { isOptionSelected: (value: string) => boolean; onChangeOptionHandler: (value: string) => void; }; /** * Provides closely related choices that affect an object, state or view. */ declare function SegmentedControl({ ariaLabel, selectionMode, selectedOptions, defaultSelectedOptions, variant, size, onSelectionChange, fluid, ariaLabelledby, children }: Readonly): react_jsx_runtime.JSX.Element; declare const SegmentedControlOption: React__default.ForwardRefExoticComponent> & React__default.RefAttributes>; declare const SegmentedControlSeparator: React__default.ForwardRefExoticComponent>; declare function SegmentedControlOptionLabel({ children }: Readonly>): react_jsx_runtime.JSX.Element; /** * Use it for content that could be displayed on the left side of `SegmentedControlOption.Label` * * @example * * ```tsx * * ... * * Option * * * ``` */ declare function SegmentedControlOptionPrefix({ children }: Readonly>): react_jsx_runtime.JSX.Element; /** * Use it for content that could be displayed on the right side of `SegmentedControlOption.Label` * * @example * * ```tsx * * * Option * * ... * * ``` */ declare function SegmentedControlOptionSuffix({ children }: Readonly>): react_jsx_runtime.JSX.Element; type TagSizes = 'xSmall' | ComponentSizes; type TagModes = 'outline' | 'fill'; type TagVariants = 'blue' | 'darkBlue' | 'red' | 'darkRed' | 'yellow' | 'darkYellow' | 'grey' | 'darkGrey' | 'white' | 'secondary' | 'darkSecondary' | 'lightSecondary' | 'primary' | 'darkPrimary' | 'lightPrimary' | 'green' | 'darkGreen' | 'purple' | 'darkPurple' | 'pink'; type TagProps = HTMLTractorProps<'div'> & MarginProps & MinWidthProps$1 & MaxWidthProps$1 & { /** * Defines a set of existing variants of the Tag. */ variant?: TagVariants; /** * Defines the size of the tag. */ size?: TagSizes; /** * Defines the mode of the Tag */ mode?: TagModes; /** * Defines the background color of the tag */ bg?: ThemeColor | string; /** * Defines the text color of the tag. * If you set the `bg` property but leave this one empty, * the text color will be automatically generated based on * the contrast. */ color?: ThemeColor | string; /** * Specify the content of the Button. */ children?: React.ReactNode; }; interface TagContainerProps { tagSize: NonNullable; tagVariant: NonNullable; tagMode?: NonNullable; tagColor?: TagProps['color']; tagBg?: TagProps['bg']; } /** * A tag component is a UI element that visually represents a small piece of information, * such as a label, category, or status. * * Tags are often used to help organize, filter, or search for content, or to indicate the status of an item or action. */ declare const Tag: React__default.ForwardRefExoticComponent<{ slot?: string | undefined | undefined; style?: React__default.CSSProperties | undefined; title?: string | undefined | undefined; suppressHydrationWarning?: boolean | undefined | undefined; className?: string | undefined | undefined; id?: string | undefined | undefined; lang?: string | undefined | undefined; role?: React__default.AriaRole | undefined; tabIndex?: number | undefined | undefined; "aria-activedescendant"?: string | undefined | undefined; "aria-atomic"?: (boolean | "true" | "false") | undefined; "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined; "aria-braillelabel"?: string | undefined | undefined; "aria-brailleroledescription"?: string | undefined | undefined; "aria-busy"?: (boolean | "true" | "false") | undefined; "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined; "aria-colcount"?: number | undefined | undefined; "aria-colindex"?: number | undefined | undefined; "aria-colindextext"?: string | undefined | undefined; "aria-colspan"?: number | undefined | undefined; "aria-controls"?: string | undefined | undefined; "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined; "aria-describedby"?: string | undefined | undefined; "aria-description"?: string | undefined | undefined; "aria-details"?: string | undefined | undefined; "aria-disabled"?: (boolean | "true" | "false") | undefined; "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined; "aria-errormessage"?: string | undefined | undefined; "aria-expanded"?: (boolean | "true" | "false") | undefined; "aria-flowto"?: string | undefined | undefined; "aria-grabbed"?: (boolean | "true" | "false") | undefined; "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined; "aria-hidden"?: (boolean | "true" | "false") | undefined; "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined; "aria-keyshortcuts"?: string | undefined | undefined; "aria-label"?: string | undefined | undefined; "aria-labelledby"?: string | undefined | undefined; "aria-level"?: number | undefined | undefined; "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined; "aria-modal"?: (boolean | "true" | "false") | undefined; "aria-multiline"?: (boolean | "true" | "false") | undefined; "aria-multiselectable"?: (boolean | "true" | "false") | undefined; "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined; "aria-owns"?: string | undefined | undefined; "aria-placeholder"?: string | undefined | undefined; "aria-posinset"?: number | undefined | undefined; "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined; "aria-readonly"?: (boolean | "true" | "false") | undefined; "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined; "aria-required"?: (boolean | "true" | "false") | undefined; "aria-roledescription"?: string | undefined | undefined; "aria-rowcount"?: number | undefined | undefined; "aria-rowindex"?: number | undefined | undefined; "aria-rowindextext"?: string | undefined | undefined; "aria-rowspan"?: number | undefined | undefined; "aria-selected"?: (boolean | "true" | "false") | undefined; "aria-setsize"?: number | undefined | undefined; "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined; "aria-valuemax"?: number | undefined | undefined; "aria-valuemin"?: number | undefined | undefined; "aria-valuenow"?: number | undefined | undefined; "aria-valuetext"?: string | undefined | undefined; children?: React__default.ReactNode; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; } | undefined | undefined; onCopy?: React__default.ClipboardEventHandler | undefined; onCopyCapture?: React__default.ClipboardEventHandler | undefined; onCut?: React__default.ClipboardEventHandler | undefined; onCutCapture?: React__default.ClipboardEventHandler | undefined; onPaste?: React__default.ClipboardEventHandler | undefined; onPasteCapture?: React__default.ClipboardEventHandler | undefined; onCompositionEnd?: React__default.CompositionEventHandler | undefined; onCompositionEndCapture?: React__default.CompositionEventHandler | undefined; onCompositionStart?: React__default.CompositionEventHandler | undefined; onCompositionStartCapture?: React__default.CompositionEventHandler | undefined; onCompositionUpdate?: React__default.CompositionEventHandler | undefined; onCompositionUpdateCapture?: React__default.CompositionEventHandler | undefined; onFocus?: React__default.FocusEventHandler | undefined; onFocusCapture?: React__default.FocusEventHandler | undefined; onBlur?: React__default.FocusEventHandler | undefined; onBlurCapture?: React__default.FocusEventHandler | undefined; onChange?: React__default.FormEventHandler | undefined; onChangeCapture?: React__default.FormEventHandler | undefined; onBeforeInput?: React__default.FormEventHandler | undefined; onBeforeInputCapture?: React__default.FormEventHandler | undefined; onInput?: React__default.FormEventHandler | undefined; onInputCapture?: React__default.FormEventHandler | undefined; onReset?: React__default.FormEventHandler | undefined; onResetCapture?: React__default.FormEventHandler | undefined; onSubmit?: React__default.FormEventHandler | undefined; onSubmitCapture?: React__default.FormEventHandler | undefined; onInvalid?: React__default.FormEventHandler | undefined; onInvalidCapture?: React__default.FormEventHandler | undefined; onLoad?: React__default.ReactEventHandler | undefined; onLoadCapture?: React__default.ReactEventHandler | undefined; onError?: React__default.ReactEventHandler | undefined; onErrorCapture?: React__default.ReactEventHandler | undefined; onKeyDown?: React__default.KeyboardEventHandler | undefined; onKeyDownCapture?: React__default.KeyboardEventHandler | undefined; onKeyPress?: React__default.KeyboardEventHandler | undefined; onKeyPressCapture?: React__default.KeyboardEventHandler | undefined; onKeyUp?: React__default.KeyboardEventHandler | undefined; onKeyUpCapture?: React__default.KeyboardEventHandler | undefined; onAbort?: React__default.ReactEventHandler | undefined; onAbortCapture?: React__default.ReactEventHandler | undefined; onCanPlay?: React__default.ReactEventHandler | undefined; onCanPlayCapture?: React__default.ReactEventHandler | undefined; onCanPlayThrough?: React__default.ReactEventHandler | undefined; onCanPlayThroughCapture?: React__default.ReactEventHandler | undefined; onDurationChange?: React__default.ReactEventHandler | undefined; onDurationChangeCapture?: React__default.ReactEventHandler | undefined; onEmptied?: React__default.ReactEventHandler | undefined; onEmptiedCapture?: React__default.ReactEventHandler | undefined; onEncrypted?: React__default.ReactEventHandler | undefined; onEncryptedCapture?: React__default.ReactEventHandler | undefined; onEnded?: React__default.ReactEventHandler | undefined; onEndedCapture?: React__default.ReactEventHandler | undefined; onLoadedData?: React__default.ReactEventHandler | undefined; onLoadedDataCapture?: React__default.ReactEventHandler | undefined; onLoadedMetadata?: React__default.ReactEventHandler | undefined; onLoadedMetadataCapture?: React__default.ReactEventHandler | undefined; onLoadStart?: React__default.ReactEventHandler | undefined; onLoadStartCapture?: React__default.ReactEventHandler | undefined; onPause?: React__default.ReactEventHandler | undefined; onPauseCapture?: React__default.ReactEventHandler | undefined; onPlay?: React__default.ReactEventHandler | undefined; onPlayCapture?: React__default.ReactEventHandler | undefined; onPlaying?: React__default.ReactEventHandler | undefined; onPlayingCapture?: React__default.ReactEventHandler | undefined; onProgress?: React__default.ReactEventHandler | undefined; onProgressCapture?: React__default.ReactEventHandler | undefined; onRateChange?: React__default.ReactEventHandler | undefined; onRateChangeCapture?: React__default.ReactEventHandler | undefined; onResize?: React__default.ReactEventHandler | undefined; onResizeCapture?: React__default.ReactEventHandler | undefined; onSeeked?: React__default.ReactEventHandler | undefined; onSeekedCapture?: React__default.ReactEventHandler | undefined; onSeeking?: React__default.ReactEventHandler | undefined; onSeekingCapture?: React__default.ReactEventHandler | undefined; onStalled?: React__default.ReactEventHandler | undefined; onStalledCapture?: React__default.ReactEventHandler | undefined; onSuspend?: React__default.ReactEventHandler | undefined; onSuspendCapture?: React__default.ReactEventHandler | undefined; onTimeUpdate?: React__default.ReactEventHandler | undefined; onTimeUpdateCapture?: React__default.ReactEventHandler | undefined; onVolumeChange?: React__default.ReactEventHandler | undefined; onVolumeChangeCapture?: React__default.ReactEventHandler | undefined; onWaiting?: React__default.ReactEventHandler | undefined; onWaitingCapture?: React__default.ReactEventHandler | undefined; onAuxClick?: React__default.MouseEventHandler | undefined; onAuxClickCapture?: React__default.MouseEventHandler | undefined; onClick?: React__default.MouseEventHandler | undefined; onClickCapture?: React__default.MouseEventHandler | undefined; onContextMenu?: React__default.MouseEventHandler | undefined; onContextMenuCapture?: React__default.MouseEventHandler | undefined; onDoubleClick?: React__default.MouseEventHandler | undefined; onDoubleClickCapture?: React__default.MouseEventHandler | undefined; onDrag?: React__default.DragEventHandler | undefined; onDragCapture?: React__default.DragEventHandler | undefined; onDragEnd?: React__default.DragEventHandler | undefined; onDragEndCapture?: React__default.DragEventHandler | undefined; onDragEnter?: React__default.DragEventHandler | undefined; onDragEnterCapture?: React__default.DragEventHandler | undefined; onDragExit?: React__default.DragEventHandler | undefined; onDragExitCapture?: React__default.DragEventHandler | undefined; onDragLeave?: React__default.DragEventHandler | undefined; onDragLeaveCapture?: React__default.DragEventHandler | undefined; onDragOver?: React__default.DragEventHandler | undefined; onDragOverCapture?: React__default.DragEventHandler | undefined; onDragStart?: React__default.DragEventHandler | undefined; onDragStartCapture?: React__default.DragEventHandler | undefined; onDrop?: React__default.DragEventHandler | undefined; onDropCapture?: React__default.DragEventHandler | undefined; onMouseDown?: React__default.MouseEventHandler | undefined; onMouseDownCapture?: React__default.MouseEventHandler | undefined; onMouseEnter?: React__default.MouseEventHandler | undefined; onMouseLeave?: React__default.MouseEventHandler | undefined; onMouseMove?: React__default.MouseEventHandler | undefined; onMouseMoveCapture?: React__default.MouseEventHandler | undefined; onMouseOut?: React__default.MouseEventHandler | undefined; onMouseOutCapture?: React__default.MouseEventHandler | undefined; onMouseOver?: React__default.MouseEventHandler | undefined; onMouseOverCapture?: React__default.MouseEventHandler | undefined; onMouseUp?: React__default.MouseEventHandler | undefined; onMouseUpCapture?: React__default.MouseEventHandler | undefined; onSelect?: React__default.ReactEventHandler | undefined; onSelectCapture?: React__default.ReactEventHandler | undefined; onTouchCancel?: React__default.TouchEventHandler | undefined; onTouchCancelCapture?: React__default.TouchEventHandler | undefined; onTouchEnd?: React__default.TouchEventHandler | undefined; onTouchEndCapture?: React__default.TouchEventHandler | undefined; onTouchMove?: React__default.TouchEventHandler | undefined; onTouchMoveCapture?: React__default.TouchEventHandler | undefined; onTouchStart?: React__default.TouchEventHandler | undefined; onTouchStartCapture?: React__default.TouchEventHandler | undefined; onPointerDown?: React__default.PointerEventHandler | undefined; onPointerDownCapture?: React__default.PointerEventHandler | undefined; onPointerMove?: React__default.PointerEventHandler | undefined; onPointerMoveCapture?: React__default.PointerEventHandler | undefined; onPointerUp?: React__default.PointerEventHandler | undefined; onPointerUpCapture?: React__default.PointerEventHandler | undefined; onPointerCancel?: React__default.PointerEventHandler | undefined; onPointerCancelCapture?: React__default.PointerEventHandler | undefined; onPointerEnter?: React__default.PointerEventHandler | undefined; onPointerLeave?: React__default.PointerEventHandler | undefined; onPointerOver?: React__default.PointerEventHandler | undefined; onPointerOverCapture?: React__default.PointerEventHandler | undefined; onPointerOut?: React__default.PointerEventHandler | undefined; onPointerOutCapture?: React__default.PointerEventHandler | undefined; onGotPointerCapture?: React__default.PointerEventHandler | undefined; onGotPointerCaptureCapture?: React__default.PointerEventHandler | undefined; onLostPointerCapture?: React__default.PointerEventHandler | undefined; onLostPointerCaptureCapture?: React__default.PointerEventHandler | undefined; onScroll?: React__default.UIEventHandler | undefined; onScrollCapture?: React__default.UIEventHandler | undefined; onWheel?: React__default.WheelEventHandler | undefined; onWheelCapture?: React__default.WheelEventHandler | undefined; onAnimationStart?: React__default.AnimationEventHandler | undefined; onAnimationStartCapture?: React__default.AnimationEventHandler | undefined; onAnimationEnd?: React__default.AnimationEventHandler | undefined; onAnimationEndCapture?: React__default.AnimationEventHandler | undefined; onAnimationIteration?: React__default.AnimationEventHandler | undefined; onAnimationIterationCapture?: React__default.AnimationEventHandler | undefined; onTransitionEnd?: React__default.TransitionEventHandler | undefined; onTransitionEndCapture?: React__default.TransitionEventHandler | undefined; key?: React__default.Key | null | undefined; defaultChecked?: boolean | undefined | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined | undefined; accessKey?: string | undefined | undefined; autoFocus?: boolean | undefined | undefined; contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined; contextMenu?: string | undefined | undefined; dir?: string | undefined | undefined; draggable?: (boolean | "true" | "false") | undefined; hidden?: boolean | undefined | undefined; nonce?: string | undefined | undefined; spellCheck?: (boolean | "true" | "false") | undefined; radioGroup?: string | undefined | undefined; about?: string | undefined | undefined; datatype?: string | undefined | undefined; inlist?: any; prefix?: string | undefined | undefined; property?: string | undefined | undefined; rel?: string | undefined | undefined; resource?: string | undefined | undefined; rev?: string | undefined | undefined; typeof?: string | undefined | undefined; vocab?: string | undefined | undefined; autoCapitalize?: string | undefined | undefined; autoCorrect?: string | undefined | undefined; autoSave?: string | undefined | undefined; itemProp?: string | undefined | undefined; itemScope?: boolean | undefined | undefined; itemType?: string | undefined | undefined; itemID?: string | undefined | undefined; itemRef?: string | undefined | undefined; results?: number | undefined | undefined; security?: string | undefined | undefined; unselectable?: "on" | "off" | undefined | undefined; inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined; is?: string | undefined | undefined; } & PolymorphicProps & _xstyled_system.MarginProps<_xstyled_system.Theme> & _xstyled_system.MinWidthProps<_xstyled_system.Theme> & _xstyled_system.MaxWidthProps<_xstyled_system.Theme> & { variant?: TagVariants; size?: TagSizes; mode?: TagModes; bg?: _xstyled_system.ThemeColor | string; color?: _xstyled_system.ThemeColor | string; children?: React__default.ReactNode; } & React__default.RefAttributes>; interface BaseTagDeleteIconProps extends ColorProps, BackgroundColorProps { icon?: ComponentType> | string; 'data-test'?: string; 'aria-label'?: string; discColor?: ColorNamesWithAutocompletion; } type TagDeleteIconProps = BaseTagDeleteIconProps & (({ onClick: MouseEventHandler; } & Omit, 'color'>) | { onClick?: never; }); declare const TagDeleteIcon: ({ icon, onClick, color, "data-test": dataTest, "aria-label": ariaLabel, discColor, ...buttonProps }: TagDeleteIconProps) => react_jsx_runtime.JSX.Element; interface TagLabelProps extends TypographyProps { children: React.ReactNode; } declare const TagLabel: ({ children, color, ...typographyProps }: TagLabelProps) => react_jsx_runtime.JSX.Element; /** * Use it for a tag that could be displayed within either * SegmentedControlOptionPrefix or SegmentedControlOptionSuffix: * * @example * * ```tsx * * * Option * * * ... * * * ``` */ declare function SegmentedControlOptionTag({ children, ...props }: Readonly>>): react_jsx_runtime.JSX.Element; declare const SegmentedControlContext: React$1.Context; declare const useSegmentedControl: () => SegmentedControlContextValue; declare const SegmentedControlProvider: ({ variant, selectionMode, selectedOptions, onSelectionChange, fluid, defaultSelectedOptions, size, children }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; type SelectSide = 'top' | 'bottom'; type SelectMode = 'single' | 'multiple'; interface BaseOptionItem { [key: string]: any; } interface OptionItem extends BaseOptionItem { label: string; value: PrimitiveValue; prefix?: React$1.ReactNode; suffix?: React$1.ReactNode; } type OptionGroup = { label?: string; options: BaseOptionItem[]; }; type Option = BaseOptionItem | OptionGroup; type SelectProps = Pick, 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabled' | 'onItemSelected' | 'onItemDeselected' | 'onSelectionChange'> & Omit & Omit, 'ref' | 'content'> & { placeholder?: string; /** * Array of options that populate the select menu */ options: O[]; /** * A function that resolves a unique identifier for the option */ getOptionValue?: (option: O) => PrimitiveValue; getOptionLabel?: (option: O) => React$1.ReactNode; /** * The size of the Text Field Input. * * Possible values: `small` | `regular` | `large` */ size?: ComponentSizes; trigger?: React$1.ReactNode; renderOption?: (option: O) => React$1.ReactNode; /** * If true, an input with search icon is displayed in the dropdown. `onSearch` will be called when typing in the input. */ searchable?: boolean; /** * The function to trigger when typing in the search input. */ searchOptions?: (inputValue: string) => Promise | O[]; /** * * If `true`, a spinner is displayed in the dropdown menu. */ loading?: boolean; /** * The text to display if `loading` is true. */ loadingText?: string; /** * The element to display if no option exists. */ noOptionsLabel?: React$1.ReactNode; /** * If `true`, the dropdown menu is opened. */ open?: boolean; /** * If `true`, the dropdown menu is initially opened. */ defaultOpen?: boolean; /** * The position of the dropdown menu. * Possible values: `top` | `bottom` */ side?: SelectSide; /** * The alignment of the dropdown menu. */ align?: Align; validationStatus?: FormItemStatuses; disabled?: boolean; 'data-test'?: string; }; declare const Select: (p: SelectProps & { ref?: ForwardedRef; }) => React__default.ReactElement; interface SelectCtx { selectedKeys: PrimitiveValue[]; selectionMode: SelectMode; componentStatus?: SelectProps['validationStatus']; componentSize: NonNullable; disabled: boolean; loading?: boolean; loadingText?: SelectProps['loadingText']; noOptionsLabel?: SelectProps['noOptionsLabel']; getOptionLabel: (option: O) => React$1.ReactNode; getOptionValue: (option: O) => PrimitiveValue; renderOption?: (option: O) => React$1.ReactNode; } declare const useSelect: () => SelectCtx; type SidenavItemProps = FlexProps & { /** * The indicator to display on the left side of the item, * regardless of expanded value. */ indicator: ReactNode; /** * The title of the item to display as a label when `expanded` is `true` */ title: ReactNode; /** * Disables the tooltip of the item. */ disabledTooltip?: boolean; /** * The tooltip of the item to display when `expanded` is `false`. * It usually matches the contents of the title. */ tooltip: string; /** * The tooltip to display when the item is both `expanded` and `disabled`. * Use this to explain why the item is disabled or how to enable it. */ tooltipWhenDisabled?: string; /** * Indicates that the item is expanded. */ expanded?: boolean; /** * The content to be displayed when expanded is true. */ badge?: ReactNode; /** * Indicates whether this link is active. * When set to `"current-page"`, active styles are applied based on the presence of * `aria-current="page"` in the element, which is automatically set when using * `component={NavLink}`, for example. */ active?: boolean | 'current-page'; /** * Disables the item and prevents it from being clicked. */ disabled?: boolean; /** * It displays a "restricted" icon. If `badge` is present, it will be hidden. */ restricted?: boolean; 'data-test'?: string; onClick?: () => void; /** * A link to navigate to. If `component` is "a" it gets assigned to href attribute. */ to?: string; /** * The component to render the SidenavItem as. * @example "a" | "button" | NavLink */ component?: ElementType | ((props: unknown) => ReactNode); /** * Content to add after the `title` when `expanded` is true. */ suffix?: ReactNode; className?: string; }; /** * Provides a button to be used inside a navigation menu */ declare const SidenavItem: ComponentWithAs<"a" | "button", SidenavItemProps>; type SidenavItemIndicatorProps = FlexProps & { children: ReactNode; className?: string; }; type SidenavItemTitleProps = { children: ReactNode; className?: string; }; declare function SidenavItemIndicator({ children, className, ...props }: SidenavItemIndicatorProps): react_jsx_runtime.JSX.Element; declare const Container: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React__default.ReactElement, _xstyled_system.Theme, TypographyProps, "color">; declare function SidenavItemTitle({ children, className, ...props }: SidenavItemTitleProps): react_jsx_runtime.JSX.Element; type SidenavDropdownProps = SidenavItemProps & { children: ReactNode; }; /** * Provides a drop-down to be used in a navigation menu. */ declare function SidenavDropdown({ children, title, className, ...rest }: Readonly): react_jsx_runtime.JSX.Element; type SidenavDropdownItemProps = HTMLTractorProps<'button'> & { disabled?: boolean; /** * Indicates whether this link is active. * When set to `"current-page"`, active styles are applied based on the presence of * `aria-current="page"` in the element, which is automatically set when using * `component={NavLink}`, for example. */ active?: boolean | 'current-page'; /** * A link to navigate to. If `component` is "a" it gets assigned to href attribute. */ to?: string; /** * The component to render the SidenavItem as. * @example "a" | "button" | NavLink */ component?: ElementType; children: ReactNode; className?: string; }; type SidenavDropdownItemLabelProps = { children: ReactNode; className?: string; }; /** * Provides a drop-down item to be used in a `SidenavDropdown`, * or a different component which implements `Dropdown`. */ declare function SidenavDropdownItem({ active, children, onClick, component, to, className, disabled, ...rest }: Readonly): react_jsx_runtime.JSX.Element; declare function SidenavDropdownItemLabel({ children, className }: SidenavDropdownItemLabelProps): react_jsx_runtime.JSX.Element; declare function SidenavDropdownSeparator(): react_jsx_runtime.JSX.Element; type SkeletonShape = 'square' | 'squareRounded' | 'circle' | 'squircle'; type SkeletonAnimation = 'wave' | 'shimmer'; interface SkeletonComponentProps { /** * The shape of the Skeleton, which can be either square, square with rounded corners, a circle, or a squircle. */ shape?: SkeletonShape; /** * A Skeleton animates in two ways: a wave runs across it, or it shimmers, pulsating slowly. */ animation?: SkeletonAnimation; /** * Sometimes the skeleton loading animation needs a delay. */ animationDelay?: boolean; /** * The mode of the skeleton color */ mode?: 'auto' | 'dark'; } type SkeletonProps = BoxProps & SkeletonComponentProps; declare const Skeleton: ({ shape, animation, mode, ...otherProps }: SkeletonProps) => react_jsx_runtime.JSX.Element; interface SliderProps { /** * The ID for when the slider is used, say, in a form. */ id?: string; /** * Min value */ min?: number; /** * Max value */ max?: number; /** * Default value of the slider. Make sure it isn't smaller or larger than the min/max. */ defaultValue?: number; /** * Value of the slider. Make sure it isn't smaller or larger than the min/max. */ value?: number; /** * The onChange event of the slider. */ onChange: (value: string, event: React.ChangeEvent) => void; } declare const Slider: React__default.ForwardRefExoticComponent>; type SpaceFlexProps = Pick & SpaceProps & BordersProps & { onClick?: MouseEventHandler; }; interface ContainerProps extends SpaceFlexProps { space?: SpacerProps['gap']; direction: SpacerProps['direction']; fluid?: SpacerProps['fluid']; reverse: boolean; } interface SpacerProps extends SpaceFlexProps { /** * The space between the children */ space?: GapProps['gap']; /** * The space direction */ direction?: SpacerDirections; /** * Either to take the parent's width or not */ fluid?: boolean; /** * Either to reverse the order of the children or not */ reverse?: boolean; children: ReactNode; itemsSized?: 'auto' | 'evenly-sized'; } type SpacerDirections = 'vertical' | 'horizontal'; type SpaceVariants = keyof DefaultTheme['space']; /** * Component used to space element either horizontally or vertically. */ declare const Spacer: React__default.ForwardRefExoticComponent>; declare const Squircle: React__default.ForwardRefExoticComponent>; type IDType = number | string | undefined; interface TabContainerControlledProps { activeTabId: IDType; defaultActiveTabId?: never; onChange(id: IDType): void; } interface TabContainerUncontrolledProps { activeTabId?: never; defaultActiveTabId?: IDType; onChange?(id?: IDType): void; } interface TabContainerCommonProps { children: React.ReactNode; } type TabContainerProps = TabContainerCommonProps & (TabContainerControlledProps | TabContainerUncontrolledProps); interface TabComponentChildren { children: React.ReactElement | React.ReactElement[]; } type TabContentProps = TabComponentChildren; interface TabItemProps { children: React.ReactNode; id: IDType; } type TabMenuProps = TabComponentChildren & { /** * Whether or not the tab items should be evenly sized */ variant?: 'auto' | 'evenly-sized'; /** * Space between menu items */ space?: SpacerProps['space']; }; interface TabMenuItemProps { children: React.ReactNode; id: IDType; activeTabColor?: string; } declare const TabContainer: React__default.MemoExoticComponent>>; declare const TabContent: React__default.MemoExoticComponent>>; declare const TabItem: React__default.MemoExoticComponent>>; declare const TabMenu: React__default.MemoExoticComponent>>; declare const TabMenuItem: React__default.MemoExoticComponent>>; declare enum OrderDirection { Asc = "ASC", Desc = "DESC" } declare const DEFAULT_PAGE_SIZE = 50; type TablePublicAPI = { clearSelection: () => void; }; declare enum StickTo { Left = "left", Right = "right" } declare enum RowActionType { Inline = "Inline", Dropdown = "Dropdown" } type BaseRecord = { [key: string]: any; }; type OrderInput = { field: string; direction: OrderDirection; }; declare enum ColumnTextAlign { Left = "left", Center = "center", Right = "right" } type TableColumn = { id: string; label: React$1.ReactNode; textAlign?: ColumnTextAlign; renderer?: Renderer; sortable?: boolean; }; type OnSelectionChange = (selectedRows: T[], selectedCount: number) => void; type Renderer = (rowData: T, value: any, rowIndex?: number) => React$1.ReactNode; type Action = { label: string; onExecute: (...args: any[]) => void; icon?: React$1.ComponentType>; renderer?: React$1.FC<{ rowData?: T; }>; }; type BulkActionCallback = (records: T[], event: React$1.MouseEvent) => void | Promise; type BulkAction = { label: string; onExecute: BulkActionCallback; renderer?: React$1.FC<{ rowsData?: T[]; }>; }; type BulkActionsRenderer = (rowsData: T[]) => React$1.ReactElement; type ActionsRenderer = (rowData: T) => React$1.ReactElement; type ActionBarProps = { verticalScrollingParent: React.RefObject; nonVerticallyScrollingParent: React.RefObject; actions?: BulkAction[] | BulkActionsRenderer; selectedRows: T[]; cancelBtnText?: string; selectedItemsText?: string; onCancel?: () => void; onStickyChange?: (stuck: boolean) => void; }; declare const ActionBar: ({ nonVerticallyScrollingParent, actions, selectedRows, verticalScrollingParent, cancelBtnText, selectedItemsText, onCancel, onStickyChange }: ActionBarProps) => react_jsx_runtime.JSX.Element; interface TableProps extends SizingProps { /** * Data to be displayed in the Table. */ data: T[]; /** * Columns of the Table. */ columns: TableColumn[]; /** * If true, the whole table will display skeleton loaders instead of empty rows. Otherwise, the records will display the data. */ loading?: boolean; /** * The first scrolling parent of the Table. This is necessary when having bulk actions to be able to calculate when ActionBar is in the viewport or not. * NOTE: if not provided, the component will crash. */ verticalScrollingParent?: React.RefObject; /** * If true or a function that returns true, the respective record will be entirely disabled. */ disableRow?: boolean | ((rowData: T) => boolean); /** * The message to be displayed if no data provided. */ noDataMessage?: ReactNode; /** * If true, it does not display the ActionBar at all. */ hideActionBar?: boolean; /** * The actions to be displayed on each record. */ rowActions?: Action[] | ActionsRenderer; /** * Inline actions (aka. the actions on each record) can be displayed under two formats: one next to another directly on the row, or under a dropdown. Default style: dropdown. */ rowActionsType?: RowActionType; /** * If any bulk actions provided, the table becomes selectable. These are the actions displayed in the ActionBar when there is at least one selection. */ bulkActions?: BulkAction[] | BulkActionsRenderer; /** * If true, the respective row is not selectable anymore. However, comparing to disableRow prop, here the user can still trigger inlineActions from disabled rows. */ unselectableRowCondition?: (rowData: T) => boolean; /** * Triggered when the selected rows change. */ onSelectionChange?: OnSelectionChange; /** * Triggered when the user clicks on a row. */ onRowClick?: (record: T, event: React.MouseEvent) => void; /** * Triggered when the user changes the order of the table. */ onOrderChange?: (columnId: string) => void; /** * The selected pageSize from the Pagination component. */ pageSize?: number; /** * Records must be unique and for this the Table needs a unique identifier for each record. Through this prop you can set which attribute from the provided objects to be * considered as unique identifier of the record. Default: 'id' */ recordAttributeIdentifier?: string; /** * The order to be displayed in the table. */ order?: OrderInput; /** * Entry point to render footer in the end of the table */ footer?: ReactNode; } declare const Table: (p: TableProps & { ref?: React__default.Ref; }) => ReactElement; declare enum ElementEdge { Left = "left", Right = "right", Top = "top", Bottom = "bottom" } declare const useElementEdgeInView: (elementEdge: ElementEdge, element?: HTMLElement | null, scrollableContainer?: HTMLElement | null) => boolean | undefined; declare const useElementPosition: (element?: HTMLElement | null) => { width: number; left: number; }; interface TabToggleProps { /** * Defines the size of the tab-toggle. **/ size?: ComponentSizes; /** * Determine whether the toggle is checked. * * If the value is defined it means that you have to control the subsequent changes of the component. */ checked?: boolean; /** * It defines the initial value of the checkbox, this will only be used to initialized the checkbox. * * It means that the component will handle the subsequent changes and you have nothing to do. */ defaultChecked?: boolean; /** * Disables the Toggle */ disabled?: boolean; /** * Makes the Toggle read only */ readOnly?: boolean; /** * Set event handler for the "change" event */ onChange?: (checked: boolean) => void; /** * Whenever the toggle is used in a form, we need to give it a name. */ name?: string; /** * Whenever we want to focus and toggle, the input + label will need an id. */ id?: string; /** * Label of checked tab */ checkedLabel: string; /** * Label of unchecked tab */ uncheckedLabel: string; /** * Data-test id for testing purposes */ 'data-test'?: string; } /** * TabToggle is a variant of Toggle which is used when you want to switch between two states. */ declare const TabToggle: React__default.MemoExoticComponent>>; /** * Textarea component. * @description Figma specs https://www.figma.com/file/6HfVoWxocYbsm1Wto1Hqr7/(WIP)-00.-Tractor---Desktop?node-id=2013%3A0 */ declare const Textarea: React__default.ForwardRefExoticComponent & { resizable?: boolean; minHeight?: string | number; } & { 'data-pseudo'?: string; } & React__default.RefAttributes>; type TextareaProps = TextFieldProps & { /** * Is the textarea vertically resizable? */ resizable?: boolean; /** * Minimum height of the textarea. Can be a number (pixels) or a string with CSS units (e.g. '100px', '10rem'). */ minHeight?: string | number; }; type TextareaComponentProps = TextareaProps; interface UseFormReturn { componentStatus: FormItemStatuses | undefined; componentId: string | undefined; componentSize: T; error: boolean; } type UseTextFieldReturn = UseFormReturn; type TextInputSizes = 'xSmall' | ComponentSizes; interface TextInputContainerProps { size: TextInputSizes; } type TextInputProps = TextFieldProps & { /** * The size of the Text Field Input. */ size?: TextInputSizes; /** * Two possible variants for the TextField: "input" and "list". */ variant?: TextFieldVariant; /** * Gets rendered as a suffix of the input. */ suffix?: React.ReactNode; }; type TextInputComponentProps = Omit & Pick; /** * The TextInput component is designed to allow users to input information through a text field. */ declare const TextInput: React__default.ForwardRefExoticComponent & { size?: TextInputSizes; variant?: TextFieldVariant; suffix?: React__default.ReactNode; } & { 'data-pseudo'?: string; } & React__default.RefAttributes>; type ToastVariants = NotificationVariants; type ToastAction = NotificationAction; interface ToastItem { /** * Unique Identifier for a toast */ id?: string; /** * Message of the toast */ message?: React.ReactNode; /** * Defines the color or the variant of the button. * * Possible values: 'success' | 'error' | 'info' | 'warning' | 'neutral'; */ variant: ToastVariants; /** * Customize the icon or use the default toast's variant default icon. */ icon?: React.ReactNode | boolean; /** * Time in ms before the Toast is dismissed. */ dismissIn?: number; /** * When defined, it will replace the close button with whatever content you provide. */ action?: ToastAction; /** * Function that will get called when the toast is clicked. */ onClick?: (onDismiss: () => void) => void; /** * Additional props to pass to the Toast component. */ customComponent?: (onDismiss: () => void, dismissIn: number) => React.ReactNode; } interface InternalToast extends ToastItem { id: string; dismissIn: number; } interface ToastProps extends ToastItem { /** * Internal injected prop used to provide a way to close the Toast * by clicking on a given action. */ onDismiss: () => void; } interface ToastRootProps extends NotificationRootProps { onClick?: () => void; } interface InternalToastRootProps extends ToastRootProps { takeContainerWidth?: boolean; } declare const Toast: ({ variant, children, ...rest }: InternalToastRootProps) => react_jsx_runtime.JSX.Element; declare const ToastMessage: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps & { 'data-test': string; }, "color" | "data-test">; declare const ToastButton: ({ children, mode, variant, ...otherButtonProps }: Omit) => react_jsx_runtime.JSX.Element; declare const ToastIcon: (props: NotificationIconProps) => react_jsx_runtime.JSX.Element; interface ToastCloseIconProps { onClick?: () => void; dismissIn?: number; 'aria-label'?: string; } declare const ToastCloseIcon: ({ onClick, dismissIn, "aria-label": ariaLabel }: ToastCloseIconProps) => react_jsx_runtime.JSX.Element; type ToastPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; interface ToastManagerProps { /** * Container on which the Toasts List would be render in. * Defaults to document.body. */ container?: HTMLElement | (() => HTMLElement); /** * Whether or not the toast items need to take the full width of the container. * Defaults to false. */ takeContainerWidth?: boolean; /** * Position of the Toasts List Container. * Defaults to fixed. */ position?: BoxProps['position']; /** * Placement of the toasts on the screen. * Defaults to 'top-right'. */ placement?: ToastPlacement; } declare const ToastManager: ({ children, container, takeContainerWidth, position, placement }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; interface ToastCtx { /** * List of "visible" toasts. */ toasts: InternalToast[]; /** * Function which lets you display a toast item on the page. * This function also returns a cleanup function which gives you the ability * to remove the toast "manually". */ showToast: (toast: ToastItem) => () => void; /** * Function which lets you remove a given toast by its ID from the list. */ removeToast: (id: string) => void; } interface ToastConfigCtx { position: BoxProps['position']; takeContainerWidth: boolean; placement: ToastPlacement; } declare const ToastContext: React$1.Context; declare const useToast: () => ToastCtx; declare const ToastConfigContext: React$1.Context; declare const useToastConfig: () => ToastConfigCtx; declare const toasts: { showToast: (toast: ToastItem) => void; removeToast: (id: ToastItem["id"]) => void; }; type ToggleSides = 'left' | 'right'; type ToggleProps = { /** * Whenever we want to focus and toggle, the input + label will need an id. */ id?: string; /** * Whenever the toggle is used in a form, we need to give it a name. */ name?: string; /** * Defines the size of the button. **/ size?: ComponentSizes; /** * Defines the size of the button. **/ side?: ToggleSides; /** * Determine whether the toggle is checked. * * If the value is defined it means that you have to control the subsequent changes of the component. */ checked?: boolean; /** * It defines the initial value of the checkbox, this will only be used to initialized the checkbox. * * It means that the component will handle the subsequent changes and you have nothing to do. */ defaultChecked?: boolean; /** * Disables the Toggle */ disabled?: boolean; /** * Makes the Toggle read only */ readOnly?: boolean; /** * Set event handler for the "change" event */ onChange?: (checked: boolean) => void; /** * Input validation status. * * Possible values are `success` or `error` */ validationStatus?: FormItemStatuses; /** * If the value passed to the children property is a string, it will be displayed using the appropriate typography styles of the CheckboxLabel. However, * If the value is something other than a string, it will be rendered without any additional label style. */ children?: React.ReactNode; } & Omit, 'value' | 'defaultValue' | 'size' | 'onChange'>; declare const Toggle: React$1.ForwardRefExoticComponent<{ id?: string; name?: string; size?: ComponentSizes; side?: ToggleSides; checked?: boolean; defaultChecked?: boolean; disabled?: boolean; readOnly?: boolean; onChange?: (checked: boolean) => void; validationStatus?: FormItemStatuses; children?: React$1.ReactNode; } & Omit, "onChange" | "defaultValue" | "value" | "size"> & React$1.RefAttributes>; interface ToggleDescriptionProps extends TypographyProps { children: React$1.ReactNode; } declare const ToggleDescription: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps & { as: string; 'data-test': string; } & ToggleDescriptionProps, "color" | "as" | "data-test">; interface ToggleLabelProps { children: React$1.ReactNode; } declare const ToggleLabel: styled_components.StyledComponent<(props: Omit, HTMLDivElement>, "color">) => React$1.ReactElement, _xstyled_system.Theme, TypographyProps & { as: string; 'data-test': string; } & ToggleLabelProps, "color" | "as" | "data-test">; type TooltipProps = Omit & Omit, 'ref' | 'content'> & { /** * Basically the content you want to display inside of the tooltip. * * No styling will be applied on the text. */ content?: ReactNode; /** * Preformatted content (which uses behind the scenes a Typography component.) */ title?: string; /** * Delay in ms before showing the tooltip on mouse enter */ mouseEnterDelay?: number; /** * Delay in ms before hiding the tooltip on mouse leave */ mouseLeaveDelay?: number; /** * Maximum width of the Tooltip's content */ maxW?: number | string; /** * Whether the tooltip content is visible or not */ visible?: boolean; /** * Called when the tooltip visibility changes */ onVisibilityChange?: (visible: boolean) => void; /** * If children is a Component, instead of a React Element, it will need to forward ref and have the following props, * otherwise, the tooltip will never be shown: * * - onMouseEnter (optional) property, and pass it down to the child component * - onMouseLeave (optional) property, and pass it down to the child component * * @example * * ```tsx * const Component = forwardRef void; onMouseEnter?: () => void; onMouseLeave?: () => void }>( * function ComponentBase({ onClick, onMouseEnter, onMouseLeave }, ref) { * return ( * * ); * } * ); * * ``` */ children: ReactNode; /** * If the tooltip should be disabled */ disabled?: boolean; /** * Color of the title text */ titleColor?: SystemProp$1, Theme$1>; /** * The mode of the tooltip color */ mode?: 'auto' | 'light'; }; /** * The tooltip can be used to provide explanation to an action or a given text. */ declare const Tooltip: React__default.ForwardRefExoticComponent & Omit, HTMLDivElement>, "ref" | "content"> & { content?: React__default.ReactNode; title?: string; mouseEnterDelay?: number; mouseLeaveDelay?: number; maxW?: number | string; visible?: boolean; onVisibilityChange?: (visible: boolean) => void; children: React__default.ReactNode; disabled?: boolean; titleColor?: _xstyled_system.SystemProp<_xstyled_system.Color<_xstyled_system.Theme>, _xstyled_system.Theme>; mode?: "auto" | "light"; } & React__default.RefAttributes>; interface TreePrimitiveProps extends PureMenuRootProps { nodes: RootTreeNode[]; expandedKeys?: K[]; defaultExpandedKeys?: K[]; onExpandChange?: (keys: K[]) => void; children: ReactNode; } interface TreeProps extends Omit, 'children'> { } type TreeNode = { id: T; label: string; description?: React.ReactNode; prefix?: React.ReactNode; suffix?: React.ReactNode; }; type NodeWithChildren = TreeNode & { children: TreeNode[]; }; type RootTreeNode = TreeNode | NodeWithChildren; declare const Tree: (props: TreeProps) => react_jsx_runtime.JSX.Element; interface TreeCtx { nodes: RootTreeNode[]; } declare const useTree: () => TreeCtx; interface TreeSelectTriggerProps extends Omit { } declare const TreeSelectTrigger: { (props: TreeSelectTriggerProps): react_jsx_runtime.JSX.Element; displayName: string; }; interface TreeSelectContentProps extends PopoverContentProps { } /** * This component shows when clicking on the trigger of the TreeSelect component. */ declare const TreeSelectContent: { ({ children, ...props }: TreeSelectContentProps): react_jsx_runtime.JSX.Element; displayName: string; }; interface TreeProviderProps extends MenuProviderProps { nodes: RootTreeNode[]; expandedKeys?: K[]; defaultExpandedKeys?: K[]; onExpandChange?: (expandedKeys: K[]) => void; } interface TreeSelectRootProps extends TreeProviderProps, PopoverRootProps { } declare const TreeSelectRoot: { ({ children, defaultOpen, open, onOpenChange, ...otherProps }: TreeSelectRootProps): react_jsx_runtime.JSX.Element; displayName: string; }; interface TreeSelectProps extends Omit, 'children'> { trigger: React$1.ReactNode; } declare const TreeSelect: { ({ trigger, selectionMode, size, ...treeProps }: TreeSelectProps): react_jsx_runtime.JSX.Element; displayName: string; }; type WhatsAppTemplatePreviewHeaderMedia = { type: 'media'; url: string; format: 'DOCUMENT' | 'IMAGE' | 'LOCATION' | 'TEXT' | 'VIDEO'; }; type WhatsAppTemplatePreviewHeaderText = { type: 'text'; text: string; textExample?: string[]; }; type HeaderComponentType = WhatsAppTemplatePreviewHeaderMedia | WhatsAppTemplatePreviewHeaderText; type WhatsAppTemplatePreviewBodyType = { text: string; textExample?: string[]; }; type WhatsAppTemplatePreviewFooterType = { text: string; }; type WhatsAppTemplatePreviewButtonComponent = { text: string; type?: 'CATALOG' | 'COPY_CODE' | 'FLOW' | 'PHONE_NUMBER' | 'QUICK_REPLY' | 'URL' | 'VOICE_CALL'; }; type WhatsAppTemplatePreviewButtonType = WhatsAppTemplatePreviewButtonComponent[]; type WhatsAppTemplatePreviewMode = 'list' | 'bubble'; interface WhatsAppTemplatePreviewProps { mode?: WhatsAppTemplatePreviewMode; header?: HeaderComponentType; body?: WhatsAppTemplatePreviewBodyType; footer?: WhatsAppTemplatePreviewFooterType; buttons?: WhatsAppTemplatePreviewButtonType; hideCurlyBracesAroundPlaceholders?: boolean; labels: { showMore: string; showLess: string; }; showMediaPreview?: boolean; } declare const WhatsAppTemplatePreview: ({ mode, header, body, footer, buttons, labels, hideCurlyBracesAroundPlaceholders, showMediaPreview }: WhatsAppTemplatePreviewProps) => react_jsx_runtime.JSX.Element; interface WhatsAppTemplatePreviewHeaderProps { mode: WhatsAppTemplatePreviewMode; header: HeaderComponentType; hideCurlyBracesAroundPlaceholders?: boolean; showMediaPreview?: boolean; } declare const WhatsAppTemplatePreviewHeader: ({ mode, header, hideCurlyBracesAroundPlaceholders, showMediaPreview }: WhatsAppTemplatePreviewHeaderProps) => react_jsx_runtime.JSX.Element; type TextContentFormatterProps = { text: string; options?: { whatsapp?: boolean; links?: boolean; }; }; /** * Adds text formatting, it inject different elements. * * Whatsapp: * - Code blocks * - Blockquotes * - Bullet list items * - Numbered list items * * Email: * - Links */ declare const TextContentFormatter: React__default.MemoExoticComponent<({ text, options }: TextContentFormatterProps) => "" | react_jsx_runtime.JSX.Element>; declare function noop(): void; declare function mapValues(value: T, iterator: (item: T[keyof T]) => TResult): { [P in keyof T]: TResult; }; /** * Used to grab a value from the theme, if the theme is not provided * it'll default to the base tractor theme * @param {string} key theme key */ declare const fromTheme: (key: SynthesizedPath, fallback?: CSSScalar) => (props: _xstyled_util.Props<_xstyled_system.Theme>) => CSSScalar; declare const getColor: (key: ColorNamesWithAutocompletion, fallback?: CSSScalar) => (props: _xstyled_util.Props<_xstyled_system.Theme>) => CSSScalar; declare const getRadii: (key: ThemeNamespaceValue<"radii", DefaultTheme>, fallback?: CSSScalar) => (props: _xstyled_util.Props<_xstyled_system.Theme>) => CSSScalar; declare const getSpace: (key: ThemeNamespaceValue<"space", DefaultTheme>, fallback?: CSSScalar) => (props: _xstyled_util.Props<_xstyled_system.Theme>) => CSSScalar; declare const getShadow: (key: ThemeNamespaceValue<"shadows", DefaultTheme>, fallback?: CSSScalar) => (props: _xstyled_util.Props<_xstyled_system.Theme>) => CSSScalar; declare function textColor(color: string, white: ColorNames, dark: ColorNames): string; /** * Joins non-falsy string values * @param values array of values to join. * @param separator string of separator character (by default is " ") * * @example * join(['actions-item', '', false, null, 'menu-item']) => 'actions-item menu-item' * join(['actions-item', '', false, null, 'menu-item'], '1') => 'actions-item1menu-item' */ declare const join: (values: (string | undefined | null | false | number)[], separator?: string) => string; /** * Extracts and decodes the filename from a URL * @param url The URL to parse * @returns The decoded filename, or empty string for data URLs * * @example * parseFileName('https://example.com/path/to/file.pdf') => 'file.pdf' * parseFileName('https://example.com/file%20name.pdf?query=1') => 'file name.pdf' * parseFileName('data:image/png;base64,...') => '' */ declare const parseFileName: (url: string) => string; /** * Checks if a filename has a PDF extension * @param fileName The filename to check * @returns True if the filename ends with '.pdf' (case-insensitive), false otherwise * * @example * isPdfFile('document.pdf') => true * isPdfFile('document.PDF') => true * isPdfFile('document.txt') => false * isPdfFile(undefined) => false */ declare const isPdfFile: (fileName?: string) => boolean; /** * Safely decodes a URI component string * @param encodedString The encoded string to decode * @returns The decoded string, or the original string if decoding fails * * @example * safeDecode('hello%20world') => 'hello world' * safeDecode('invalid%') => 'invalid%' */ declare const safeDecode: (encodedString: string) => string; /** * Validates that a URL has a safe protocol to prevent XSS attacks * Also allows asset URLs (relative paths and Storybook assets) for local development * @param url - The URL to validate * @returns The validated URL if safe, otherwise null * * @example * validateUrlProtocol('https://example.com') => 'https://example.com' * validateUrlProtocol('javascript:alert("XSS")') => null * validateUrlProtocol('data:image/png;base64,...') => null * validateUrlProtocol('blob:https://example.com/123') => 'blob:https://example.com/123' * validateUrlProtocol('./image.jpg') => './image.jpg' * validateUrlProtocol('static/media/image.jpg') => 'static/media/image.jpg' */ declare const validateUrlProtocol: (url: string | undefined) => string | null; interface TractorProps extends ThemeProviderProps { /** * Either to inject global styles or not. * * By default, the styles won't be injected. */ injectStyle?: boolean; icons?: IconContextProps['icons']; toastConfig?: ToastManagerProps; bannerConfig?: BannerManagerProps; colorModeTargetSelector?: string; colorModeTargetElement?: Element; deepMerge?: boolean; } declare const Tractor: ({ theme, icons, injectStyle, colorModeTargetSelector, colorModeTargetElement, children, toastConfig, bannerConfig, deepMerge }: React$1.PropsWithChildren) => react_jsx_runtime.JSX.Element; /** * All credit goes to Chance (Reach UI), Haz (Reakit) and (fluentui) * for creating the base type definitions upon which we improved on */ declare function forwardRef(component: React.ForwardRefRenderFunction, Props> & { as?: ElementType; }>): ComponentWithAs; declare const AudioManager: ({ children }: { children: React__default.ReactNode; }) => react_jsx_runtime.JSX.Element; interface AudioMangerContextType { play: (audioRef: HTMLAudioElement) => void; unregister: (audioRef: HTMLAudioElement) => void; } declare const AudioManagerContext: React__default.Context; declare const useAudioManager: () => AudioMangerContextType; interface HTMLAudioElementWithSetSinkId extends HTMLAudioElement { } type AudioRef = MutableRefObject; interface AudioProps { src: string; /** * set the current speaker device id. * we support only browsers based on chromium * https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId#browser_compatibility */ sinkId?: string; /** * Callback function called when an error occurs during audio playback. * @param error - The MediaError object, or null if the error is cleared. */ onError?: (error: MediaError | null) => void; children: React__default.ReactNode; } type SetSpeedType = (num: number) => void; type SeekType = (num: number) => void; interface AudioContextType { /** * Information of the full length of the audio (in seconds) */ duration: number; /** * Function which will play/pause the audio according to its current state. */ togglePlay: () => Promise; /** * Function for playing the audio. */ play: () => Promise; /** * Function for pausing the audio. */ pause: () => void; /** * Information of the current state of the audio. (playing / paused) */ isPlaying: boolean; /** * Function which accept a specific second and change the playback to that given second. */ seek: SeekType; /** * Function to skip the playback 10 seconds forward. */ fastForward: () => void; /** * Function to rewind the playback 10 seconds. */ rewind: () => void; /** * Information of the current speed. The value is a multiplier applied to the original rate of the audio. */ speed: number; /** * Function to change the current speed/rate of the playback. */ setSpeed: SetSpeedType; /** * Media error */ error: MediaError | null; } declare function Audio({ src, sinkId, children, onError }: AudioProps): react_jsx_runtime.JSX.Element; declare const defaultAudioContext: { duration: number; togglePlay: () => Promise; play: () => Promise; pause: typeof noop; isPlaying: boolean; seek: typeof noop; fastForward: typeof noop; rewind: typeof noop; speed: number; setSpeed: typeof noop; error: null; }; declare const AudioContext: React__default.Context; declare const AudioTimeContext: React__default.Context<{ /** * Current time of the audio (in seconds) */ currentTime: number; }>; declare const useAudio: () => AudioContextType; declare const useAudioTime: () => { /** * Current time of the audio (in seconds) */ currentTime: number; }; declare module '@xstyled/system' { interface Theme extends ITheme, DefaultTheme { } } export { Accordion, AccordionBody, AccordionHeader, AccordionItem, AccordionProps, Action, ActionBar, ActionMenu, ActionMenuItem, ActionMenuProps, ActionsRenderer, Align, ArrowButtonProps, AsProps, Assign, Audio, AudioBar, AudioContext, AudioContextType, AudioCurrentTime, AudioDuration, AudioManager, AudioManagerContext, AudioProps, AudioRef, AudioTimeContext, Avatar, AvatarFallback, AvatarIcon, AvatarImg, AvatarProps, AvatarShapes, AvatarSizes, AvatarText, AvatarVariants, Badge, BadgeProps, BadgeSizes, BadgeVariants, Banner, BannerButton, BannerContext, BannerCtx, BannerHeading, BannerIcon, BannerManager, BannerManagerProps, BannerParagraph, BannerSuffix, BaseOptionItem, BaseProps, BaseRecord, Box, BoxProps, BulkAction, BulkActionCallback, BulkActionsRenderer, Button, ButtonContainerProps, ButtonModes, ButtonProps, ButtonShapes, ButtonSizes, ButtonVariants, ChangedSelectedOptionOffset, Checkbox, CheckboxDescription, CheckboxLabel, CheckboxProps, ColorNames, ColorNamesWithAutocompletion, ColumnTextAlign, ComboBox, ComboBoxContent, ComboBoxContentProps, ComboBoxCtx, ComboBoxItem, ComboBoxMenu, ComboBoxMenuProps, ComboBoxProps, ComboBoxProviderProps, ComboBoxTrigger, ComponentSizes, ComponentWithAs, Container, ContainerProps, CounterBadge, CounterBadgeProps, CounterBadgeSizes, CounterBadgeVariants, DEFAULT_PAGE_SIZE, DatePicker, DatePickerProps, DatePickerProviderProps, DatePickerState, DatePickerValue, DefaultTheme, Dict, Divider, DividerContainerProps, DividerOrientation, DividerOrientations, DividerProps, DividerSize, DividerSizes, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerProps, DrawerSide, DrawerTitle, Dropdown, DropdownButton, DropdownButtonProps, DropdownProps, FlagIcon, FlagIconProps, Flex, FlexProps, FocusTrap, FocusTrapProps, Form, FormContext, FormItem, FormItemContext, FormItemProps, FormItemSizes, FormItemStatuses, FormProps, Gauge, GaugeProps, Grid, GridProps, HTMLAudioElementWithSetSinkId, HTMLTractorProps, HeaderComponentType, HtmlProp, IDType, Icon, IconButton, IconButtonContainerProps, IconButtonProps, IconComponent, IconContainerProps, IconContext, IconContextProps, IconProps, IconProvider, InjectGlobalStyle, Link, LinkProps, List, ListFooter, ListFooterProps, ListItem, ListItemProps, ListProps, ListView, ListViewBase, ListViewProps, MAX_Z_INDEX, Menu, MenuContext, MenuCtx, MenuItem, MenuItemCheckIcon, MenuItemDescription, MenuItemDescriptionProps, MenuItemGroup, MenuItemGroupProps, MenuItemLabel, MenuItemLabelProps, MenuItemPrefix, MenuItemPrefixProps, MenuItemProps, MenuItemSuffix, MenuItemSuffixProps, MenuProvider, MenuProviderProps, MenuRootProps, MenuSelectionModes, MenuSizes, MergeWithAs, ModalBody, ModalClose, ModalContext, ModalContextDefinition, ModalDialog, ModalDialogProps, ModalFooter, ModalHeader, ModalSizes, ModalTitle, MotionBox, NodeWithChildren, OmitCommonProps, OnSelectionChange, Option, OptionGroup, OptionItem, OrderDirection, OrderInput, Pagination, PaginationProps, PasswordInput, Placement, PlayButton, PlayButtonProps, PolymorphicProps, Popover, PopoverArrowContext, PopoverArrowProps, PopoverContentProps, PopoverContext, PopoverCtx, PopoverPlacementContext, PopoverRootProps, PopoverTriggerProps, Portal, PortalProps, PrimitiveValue, PropsOf, PureMenuRootProps, PurePopoverContentProps, QuickAudioPlayer, QuickAudioPlayerProps, QuickAvatar, QuickAvatarProps, Radio, RadioDescription, RadioGroup, RadioLabel, Renderer, RightJoinProps, RootTreeNode, RowActionType, SeekType, SegmentedControl, SegmentedControlContext, SegmentedControlContextValue, SegmentedControlOption, SegmentedControlOptionLabel, SegmentedControlOptionPrefix, SegmentedControlOptionProps, SegmentedControlOptionSuffix, SegmentedControlOptionTag, SegmentedControlProps, SegmentedControlProvider, SegmentedControlProviderProps, SegmentedControlSelectionMode, SegmentedControlSeparator, SegmentedControlVariant, Select, SelectMode, SelectProps, SelectSide, SelectedOptionOffset, SetSpeedType, Side, SidenavDropdown, SidenavDropdownItem, SidenavDropdownItemLabel, SidenavDropdownItemProps, SidenavDropdownItemLabelProps as SidenavDropdownLabelProps, SidenavDropdownProps, SidenavDropdownSeparator, SidenavItem, SidenavItemIndicator, SidenavItemIndicatorProps, SidenavItemProps, SidenavItemTitle, SidenavItemTitleProps, SizeProps, Skeleton, SkeletonComponentProps, SkeletonProps, Slider, SliderProps, SpaceVariants, Spacer, SpacerDirections, SpacerProps, Squircle, StickTo, StyledDrawerProps, StyledListItem, StyledListView, StyledMenuItemDescription, StyledMenuItemLabel, TabComponentChildren, TabContainer, TabContainerCommonProps, TabContainerControlledProps, TabContainerProps, TabContainerUncontrolledProps, TabContent, TabContentProps, TabItem, TabItemProps, TabMenu, TabMenuItem, TabMenuItemProps, TabMenuProps, TabToggle, TabToggleProps, Table, TableColumn, TableProps, TablePublicAPI, Tag, TagContainerProps, TagDeleteIcon, TagDeleteIconProps, TagLabel, TagLabelProps, TagModes, TagProps, TagSizes, TagVariants, TextContentFormatter, TextContentFormatterProps, TextInput, TextInputComponentProps, TextInputContainerProps, TextInputProps, TextInputSizes, Textarea, TextareaComponentProps, TextareaProps, ThemeProvider, Toast, ToastButton, ToastCloseIcon, ToastConfigContext, ToastConfigCtx, ToastContext, ToastCtx, ToastIcon, ToastItem, ToastManager, ToastManagerProps, ToastMessage, ToastPlacement, ToastProps, Toggle, ToggleDescription, ToggleLabel, ToggleProps, ToggleSides, Tooltip, TooltipProps, Tractor, TractorProps, Tree, TreeNode, TreePrimitiveProps, TreeProps, TreeSelect, TreeSelectContent, TreeSelectContentProps, TreeSelectProps, TreeSelectRoot, TreeSelectRootProps, TreeSelectTrigger, TriggerProps, Typography, TypographyProps, TypographyScreens, TypographyVariants, WhatsAppTemplatePreview, WhatsAppTemplatePreviewBodyType, WhatsAppTemplatePreviewButtonType, WhatsAppTemplatePreviewFooterType, WhatsAppTemplatePreviewHeader, WhatsAppTemplatePreviewHeaderMedia, WhatsAppTemplatePreviewHeaderProps, WhatsAppTemplatePreviewHeaderText, WhatsAppTemplatePreviewMode, WhatsAppTemplatePreviewProps, banners, defaultAudioContext, defaultTheme, forwardRef, fromTheme, getColor, getRadii, getShadow, getSpace, isPdfFile, isScrollAtBottom, isScrollAtTop, join, mapValues, noop, outlineFocusVisible, outlineStyles, parseFileName, safeDecode, size, textColor, toasts, useAudio, useAudioManager, useAudioTime, useBanner, useComboBox, useDropdownContext, useElementEdgeInView, useElementPosition, useFormContext, useFormItemContext, useIconContext, useMenu, useMenuSelection, useModalContext, usePopoverArrow, usePopoverContext, usePopoverPlacement, useSegmentedControl, useSegmentedControlSelection, useSelect, useToast, useToastConfig, useTree, validateUrlProtocol };