import * as react from 'react'; import { ReactNode, SVGProps, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, ForwardRefExoticComponent, ForwardedRef, ChangeEventHandler, FocusEventHandler, CSSProperties, HTMLAttributes, ElementType, KeyboardEventHandler, TextareaHTMLAttributes, RefObject } from 'react'; import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace'; import * as _emotion_styled from '@emotion/styled'; import * as _emotion_react from '@emotion/react'; import { Theme, CSSObject, css } from '@emotion/react'; import { consoleLightTheme } from '@scaleway/themes'; export { consoleDarkTheme as darkTheme, consoleLightTheme as theme } from '@scaleway/themes'; import { BarDatum, BarTooltipProps, BarSvgProps, ResponsiveBar } from '@nivo/bar'; import { Box, ValueFormat, DatumValue } from '@nivo/core'; import { ReactDatePickerProps } from 'react-datepicker'; import { Serie, LineSvgProps } from '@nivo/line'; import { ScaleSpec } from '@nivo/scales'; import { PopoverStateReturn } from 'reakit/Popover'; import { DialogProps, DialogStateReturn } from 'reakit/Dialog'; import Select, { OptionProps, Props, CommonProps as CommonProps$1, GroupBase } from 'react-select'; import { ToastOptions } from 'react-toastify'; type ActionBarProps = { children: ReactNode; /** * The position of the bar (start at 0) */ rank?: number; role?: string; 'aria-modal'?: 'true' | 'false'; className?: string; 'data-testid'?: string; }; declare const ActionBar: ({ children, role, rank, "aria-modal": ariaModal, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal; type ScreenSize = keyof typeof consoleLightTheme.screens; type SCWUITheme = typeof consoleLightTheme; declare const typography: { body: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodySmall: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodySmallStrong: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodySmallStronger: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodyStrong: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodyStronger: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; caption: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; captionSmall: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; code: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; heading: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; headingLarge: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; headingSmall: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; }; type RecursivePartial = { [P in keyof T]?: RecursivePartial; }; /** * Will extend theme with new theme properties * @param {SCWUITheme} baseTheme the theme you want to extend from, by default it is set to light theme * @param {RecursivePartial} extendedTheme the properties of a new theme you want to apply from baseTheme */ declare const extendTheme: (extendedTheme: RecursivePartial) => { colors: { danger: { background: string; backgroundDisabled: string; backgroundHover: string; backgroundStrong: string; backgroundStrongDisabled: string; backgroundStrongHover: string; backgroundWeak: string; backgroundWeakDisabled: string; backgroundWeakHover: string; border: string; borderDisabled: string; borderHover: string; borderStrong: string; borderStrongDisabled: string; borderStrongHover: string; borderWeak: string; borderWeakDisabled: string; borderWeakHover: string; icon: string; iconDisabled: string; iconHover: string; iconStrong: string; iconStrongDisabled: string; iconStrongHover: string; iconWeak: string; iconWeakDisabled: string; iconWeakHover: string; text: string; textDisabled: string; textHover: string; textStrong: string; textStrongDisabled: string; textStrongHover: string; textWeak: string; textWeakDisabled: string; textWeakHover: string; }; info: { background: string; backgroundDisabled: string; backgroundHover: string; backgroundStrong: string; backgroundStrongDisabled: string; backgroundStrongHover: string; backgroundWeak: string; backgroundWeakDisabled: string; backgroundWeakHover: string; border: string; borderDisabled: string; borderHover: string; borderStrong: string; borderStrongDisabled: string; borderStrongHover: string; borderWeak: string; borderWeakDisabled: string; borderWeakHover: string; icon: string; iconDisabled: string; iconHover: string; iconStrong: string; iconStrongDisabled: string; iconStrongHover: string; iconWeak: string; iconWeakDisabled: string; iconWeakHover: string; text: string; textDisabled: string; textHover: string; textStrong: string; textStrongDisabled: string; textStrongHover: string; textWeak: string; textWeakDisabled: string; textWeakHover: string; }; neutral: { background: string; backgroundDisabled: string; backgroundHover: string; backgroundStrong: string; backgroundStrongDisabled: string; backgroundStrongHover: string; backgroundStronger: string; backgroundStrongerDisabled: string; backgroundWeak: string; backgroundWeakDisabled: string; backgroundWeakElevated: string; backgroundWeakHover: string; border: string; borderDisabled: string; borderHover: string; borderStrong: string; borderStrongDisabled: string; borderStrongHover: string; borderStronger: string; borderStrongerDisabled: string; borderWeak: string; borderWeakDisabled: string; borderWeakHover: string; icon: string; iconDisabled: string; iconHover: string; iconStrong: string; iconStrongDisabled: string; iconStrongHover: string; iconStronger: string; iconStrongerDisabled: string; iconWeak: string; iconWeakDisabled: string; iconWeakHover: string; text: string; textDisabled: string; textHover: string; textStrong: string; textStrongDisabled: string; textStrongHover: string; textStronger: string; textStrongerDisabled: string; textWeak: string; textWeakDisabled: string; textWeakHover: string; }; other: { data: { charts: { danger: string; data1: string; data10: string; data11: string; data12: string; data13: string; data14: string; data2: string; data3: string; data4: string; data5: string; data6: string; data7: string; data8: string; data9: string; success: string; }; }; gradients: { background: { aqua: string; blue: string; fuschia: string; green: string; orange: string; pink: string; primary: string; purple: string; }; }; icon: { category: { primary: { fill: string; fillStrong: string; }; }; product: { danger: { fill: string; fillDisabled: string; fillStrong: string; fillStrongDisabled: string; fillWeak: string; fillWeakDisabled: string; }; primary: { fill: string; fillDisabled: string; fillStrong: string; fillStrongDisabled: string; fillWeak: string; fillWeakDisabled: string; }; warning: { fill: string; fillDisabled: string; fillStrong: string; fillStrongDisabled: string; fillWeak: string; fillWeakDisabled: string; }; }; }; }; overlay: string; primary: { background: string; backgroundDisabled: string; backgroundHover: string; backgroundStrong: string; backgroundStrongDisabled: string; backgroundStrongHover: string; backgroundWeak: string; backgroundWeakDisabled: string; backgroundWeakHover: string; border: string; borderDisabled: string; borderHover: string; borderStrong: string; borderStrongDisabled: string; borderStrongHover: string; borderWeak: string; borderWeakDisabled: string; borderWeakHover: string; icon: string; iconDisabled: string; iconHover: string; iconStrong: string; iconStrongDisabled: string; iconStrongHover: string; iconWeak: string; iconWeakDisabled: string; iconWeakHover: string; text: string; textDisabled: string; textHover: string; textStrong: string; textStrongDisabled: string; textStrongHover: string; textWeak: string; textWeakDisabled: string; textWeakHover: string; }; secondary: { backgroundStrong: string; }; success: { background: string; backgroundDisabled: string; backgroundHover: string; backgroundStrong: string; backgroundStrongDisabled: string; backgroundStrongHover: string; backgroundWeak: string; backgroundWeakDisabled: string; backgroundWeakHover: string; border: string; borderDisabled: string; borderHover: string; borderStrong: string; borderStrongDisabled: string; borderStrongHover: string; borderWeak: string; borderWeakDisabled: string; borderWeakHover: string; icon: string; iconDisabled: string; iconHover: string; iconStrong: string; iconStrongDisabled: string; iconStrongHover: string; iconWeak: string; iconWeakDisabled: string; iconWeakHover: string; text: string; textDisabled: string; textHover: string; textStrong: string; textStrongDisabled: string; textStrongHover: string; textWeak: string; textWeakDisabled: string; textWeakHover: string; }; warning: { background: string; backgroundDisabled: string; backgroundHover: string; backgroundStrong: string; backgroundStrongDisabled: string; backgroundStrongHover: string; backgroundWeak: string; backgroundWeakDisabled: string; backgroundWeakHover: string; border: string; borderDisabled: string; borderHover: string; borderStrong: string; borderStrongDisabled: string; borderStrongHover: string; borderWeak: string; borderWeakDisabled: string; borderWeakHover: string; icon: string; iconDisabled: string; iconHover: string; iconStrong: string; iconStrongDisabled: string; iconStrongHover: string; iconWeak: string; iconWeakDisabled: string; iconWeakHover: string; text: string; textDisabled: string; textHover: string; textStrong: string; textStrongDisabled: string; textStrongHover: string; textWeak: string; textWeakDisabled: string; textWeakHover: string; }; }; radii: { circle: string; default: string; large: string; none: string; small: string; xlarge: string; }; shadows: { bulk: string; defaultShadow: string; drawer: string; dropdown: string; focusDanger: string; focusInfo: string; focusNeutral: string; focusPrimary: string; focusSuccess: string; focusWarning: string; hoverDanger: string; hoverPrimary: string; hoverWarning: string; menu: string; modal: string; popover: string; tooltip: string; }; space: { '0': string; '0.25': string; '0.5': string; '1': string; '1.5': string; '10': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; }; theme: string; typography: { body: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodySmall: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodySmallStrong: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodySmallStronger: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodyStrong: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; bodyStronger: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; caption: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; captionSmall: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; code: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; heading: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; headingLarge: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; headingSmall: { fontFamily: string; fontSize: string; fontWeight: string; letterSpacing: string; lineHeight: string; paragraphSpacing: string; textCase: string; textDecoration: string; weight: string; }; }; screens: { xsmall: number; small: number; medium: number; large: number; xlarge: number; }; }; type Color = Extract; declare const SENTIMENTS: readonly ["primary", "neutral", "success", "danger", "warning", "info"]; declare const ICONS: { readonly alert: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly anchor: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'arrow-down': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'arrow-left': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'arrow-left-double': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'arrow-right': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'arrow-right-bottom': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'arrow-right-double': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'arrow-up': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly asterisk: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'auto-fix': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly bullhorn: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly burger: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'book-open-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly calculator: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'calendar-range': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly cancel: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly id: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly check: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'checkbox-circle-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'clock-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly close: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'close-circle-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'copy-content': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly credentials: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'credit-card': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly delete: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly detach: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly doc: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'dots-horizontal': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'dots-vertical': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly download: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'drag-variant': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'drag-vertical': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly east: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'email-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly expand: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly eye: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'eye-off': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly filter: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly github: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'help-circle-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'information-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly lock: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly logout: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly members: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly minus: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly moon: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'open-in-new': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly organization: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly pencil: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'play-circle-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly plus: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly privacy: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly profile: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'progress-check': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'ray-end-arrow': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'ray-start-arrow': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'ray-start-end': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'ray-top-arrow': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly reboot: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly restore: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly revoke: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly rocket: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly search: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly send: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly settings: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly sort: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly sun: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly support: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly switch_orga: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly unlock: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly upload: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly view: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'weather-night': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly attach: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly phone: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly earth: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly 'email-remove-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; }; type IconName = keyof typeof ICONS; declare const Icon: react.ForwardRefExoticComponent<{ size?: string | number | undefined; name?: "filter" | "view" | "sort" | "id" | "alert" | "search" | "anchor" | "arrow-down" | "arrow-left" | "arrow-left-double" | "arrow-right" | "arrow-right-bottom" | "arrow-right-double" | "arrow-up" | "asterisk" | "auto-fix" | "bullhorn" | "burger" | "book-open-outline" | "calculator" | "calendar-range" | "cancel" | "check" | "checkbox-circle-outline" | "clock-outline" | "close" | "close-circle-outline" | "copy-content" | "credentials" | "credit-card" | "delete" | "detach" | "doc" | "dots-horizontal" | "dots-vertical" | "download" | "drag-variant" | "drag-vertical" | "east" | "email-outline" | "expand" | "eye" | "eye-off" | "github" | "help-circle-outline" | "information-outline" | "lock" | "logout" | "members" | "minus" | "moon" | "open-in-new" | "organization" | "pencil" | "play-circle-outline" | "plus" | "privacy" | "profile" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rocket" | "send" | "settings" | "sun" | "support" | "switch_orga" | "unlock" | "upload" | "weather-night" | "attach" | "phone" | "earth" | "email-remove-outline" | undefined; prominence?: "default" | "strong" | "stronger" | "weak" | undefined; color?: Color | undefined; 'data-testid'?: string | undefined; disabled?: boolean | undefined; } & Pick, "cursor" | "stroke" | "strokeWidth" | "className"> & react.RefAttributes>; type SENTIMENT = (typeof SENTIMENTS)[number]; declare const SIZE_HEIGHT: { readonly large: 48; readonly medium: 40; readonly small: 32; readonly xsmall: 24; }; type ButtonSize = keyof typeof SIZE_HEIGHT; declare const VARIANTS_COMPONENTS: { filled: { button: _emotion_styled.StyledComponent<{ theme?: Theme | undefined; as?: react.ElementType | undefined; } & Required> & { iconOnly: boolean; }, react.DetailedHTMLProps, HTMLButtonElement>, {}>; link: _emotion_styled.StyledComponent<{ theme?: Theme | undefined; as?: react.ElementType | undefined; } & Required> & { iconOnly: boolean; }, react.DetailedHTMLProps, HTMLAnchorElement>, {}>; }; outlined: { button: _emotion_styled.StyledComponent<{ theme?: Theme | undefined; as?: react.ElementType | undefined; } & Required> & { iconOnly: boolean; }, react.DetailedHTMLProps, HTMLButtonElement>, {}>; link: _emotion_styled.StyledComponent<{ theme?: Theme | undefined; as?: react.ElementType | undefined; } & Required> & { iconOnly: boolean; }, react.DetailedHTMLProps, HTMLAnchorElement>, {}>; }; ghost: { button: _emotion_styled.StyledComponent<{ theme?: Theme | undefined; as?: react.ElementType | undefined; } & Required> & { iconOnly: boolean; }, react.DetailedHTMLProps, HTMLButtonElement>, {}>; link: _emotion_styled.StyledComponent<{ theme?: Theme | undefined; as?: react.ElementType | undefined; } & Required> & { iconOnly: boolean; }, react.DetailedHTMLProps, HTMLAnchorElement>, {}>; }; }; type ButtonVariant = keyof typeof VARIANTS_COMPONENTS; type CommonProps = { type?: ButtonHTMLAttributes['type']; variant?: ButtonVariant; role?: AriaRole; size?: ButtonSize; className?: string; 'data-testid'?: string; sentiment?: SENTIMENT; disabled?: boolean; iconPosition?: 'left' | 'right'; fullWidth?: boolean; isLoading?: boolean; 'aria-label'?: string; 'aria-current'?: boolean; onClick?: MouseEventHandler; tooltip?: string; }; type FinalProps = CommonProps & ({ children: ReactNode; icon?: ComponentProps['name']; name?: string; href?: never; target?: never; download?: never; } | { children?: never; icon: ComponentProps['name']; name?: string; href?: never; target?: never; download?: never; } | { children: ReactNode; icon?: ComponentProps['name']; name?: never; href: string; target?: string; download?: string; } | { children?: never; icon: ComponentProps['name']; name?: never; href: string; target?: string; download?: string; }); declare const Button: react.ForwardRefExoticComponent>; declare const ALERT_SENTIMENTS: readonly ["danger", "info", "success", "warning"]; type AlertSentiment = (typeof ALERT_SENTIMENTS)[number]; type AlertProps = { children: ReactNode; /** * Add a title at the top of your alert. */ title?: string; sentiment?: AlertSentiment; buttonText?: ComponentProps['children']; onClickButton?: () => void; onClose?: () => void; closable?: boolean; className?: string; 'data-testid'?: string; /** * Disabled the alert button. */ disabled?: boolean; }; declare const Alert: ({ children, title, sentiment, buttonText, onClickButton, closable, onClose, className, disabled, "data-testid": dataTestId, }: AlertProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null; type Without = { [P in Exclude]?: never; }; type SingleXOR = T | U extends object ? (Without & U) | (Without & T) : T | U; type XOR = T extends [infer Only] ? Only : T extends [infer A, infer B, ...infer Rest] ? XOR<[SingleXOR, ...Rest]> : never; type AvatarProps = { /** * Size of the component */ size?: number; /** * Background color when `text` prop is specified */ textBgColor?: string; /** * Text color when `text` prop is specified */ textColor?: string; /** * Text size when `text` prop is specified or size of the lock when `lock` is true */ textSize?: number; /** * Used only when `text` prop is specified */ lock?: boolean; className?: string; 'data-testid'?: string; } & XOR<[ { /** * **`image` or `text` property is required** */ image: string; }, { /** * **`image` or `text` property is required** */ text: string; } ]>; declare const Avatar: ({ image, size, text, textBgColor, textColor, textSize, lock, className, "data-testid": dataTestId, }: AvatarProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; declare const SIZES$1: { large: number; medium: number; small: number; }; declare const PROMINENCES$2: { default: string; strong: string; }; type BadgeProps = { sentiment?: Color; size?: keyof typeof SIZES$1; prominence?: keyof typeof PROMINENCES$2; /** * Defines icon to display on left side of badge. **Only available on medium and large sizes**. */ icon?: IconName; disabled?: boolean; className?: string; children: ReactNode; 'data-testid'?: string; }; declare const Badge: ({ sentiment, size, prominence, icon, disabled, className, children, "data-testid": dataTestId, }: BadgeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type BarChartToolTipProps = { color: string; indexValue: string; formattedValue: string; className?: string; 'data-testid'?: string; }; declare const BarChartToolTip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartToolTipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type Formatter = ValueFormat; type TickSpec = NonNullable['axisBottom']>['tickValues']; type BarChartProps = { height?: string | number; margin?: Box; data?: BarDatum[]; axisFormatters?: Partial>; pointFormatters?: Partial>; tickValues?: Partial>; keys?: string[]; className?: string; tooltipFunction?: (props: BarTooltipProps) => ComponentProps; chartProps?: Partial>; 'data-testid'?: string; }; /** * @experimental This component is experimental and may be subject to breaking changes in the future. */ declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: BarChartProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type BarProps = { /** * Unique id of the bar */ id: string; /** * The value of the bar */ value: number; /** * Text to display inside the bar */ text?: string; onClick?: MouseEventHandler; onDoubleClick?: MouseEventHandler; onMouseDown?: MouseEventHandler; onMouseUp?: MouseEventHandler; onMouseEnter?: MouseEventHandler; onMouseLeave?: MouseEventHandler; /** * A tooltip to display when hovering the bar */ tooltip?: ReactNode; }; type BarStackProps = { data: BarProps[]; total?: number; className?: string; 'data-testid'?: string; }; declare const BarStack: ({ data, total, className, "data-testid": dataTestId, }: BarStackProps) => JSX.Element; type ItemProps$1 = { children: ReactNode; 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time'; /** * Make the component act a `Link` tag */ to?: string; disabled?: boolean; /** * ID of the step, automatically injected by Breadcrumbs parent tag */ step?: number; onClick?: (event: MouseEvent, step: number) => void; }; declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, step, }: ItemProps$1) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type BreadcrumbsProps = { selected?: number; children: ReactNode; className?: string; 'data-testid'?: string; }; type BreadcrumbsType = ((props: BreadcrumbsProps) => JSX.Element) & { Item: typeof Item; }; declare const Breadcrumbs: BreadcrumbsType; type Variant$1 = 'intro' | 'promotional'; type BannerProps = { variant?: Variant$1; size?: 'small' | 'medium'; title: string; children: ReactNode; direction?: 'row' | 'column'; onClose?: () => void; buttonText?: string; onClickButton?: ComponentProps['onClick']; linkText?: string; linkHref?: string; image?: ReactNode; className?: string; }; declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, }: BannerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null; declare const sentiments$1: { readonly danger: ({ theme }: { theme: Theme; }) => string; readonly neutral: ({ theme }: { theme: Theme; }) => string; readonly disabled: ({ theme }: { theme: Theme; }) => string; readonly info: ({ theme }: { theme: Theme; }) => string; readonly primary: ({ theme }: { theme: Theme; }) => string; readonly success: ({ theme }: { theme: Theme; }) => string; readonly warning: ({ theme }: { theme: Theme; }) => string; }; type BulletSentiment = keyof typeof sentiments$1; declare const sizes: { readonly medium: "\n width: 32px;\n height: 32px;\n font-size: 16px;\n "; readonly small: "\n width: 24px;\n height: 24px;\n font-size: 14px;\n "; }; type BulletSize = keyof typeof sizes; type ContentProps$1 = { icon: ComponentProps['name']; text?: never; } | { icon?: never; text: string; }; type BulletProps = { className?: string; size?: BulletSize; tooltip?: string; tooltipBaseId?: string; sentiment?: BulletSentiment; 'data-testid'?: string; } & ContentProps$1; declare const Bullet: ({ className, sentiment, size, icon, text, tooltip, tooltipBaseId, "data-testid": dataTestId, }: BulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type CheckboxProps = { error?: string | ReactNode; size?: number; progress?: boolean; disabled?: boolean; checked?: boolean | 'indeterminate'; className?: string; ['data-visibility']?: string; required?: boolean; 'data-testid'?: string; } & Pick, 'onFocus' | 'onBlur' | 'name' | 'value' | 'autoFocus' | 'id' | 'onChange'> & XOR<[ { /** * **`children` or `aria-label` property is required** */ 'aria-label': string; }, { children: ReactNode; } ]>; declare const Checkbox: react.ForwardRefExoticComponent>; declare const SIZES: { readonly small: 32; readonly large: 48; }; type CopyButtonProps = { size?: keyof typeof SIZES; value: string; copyText?: string; copiedText?: string; sentiment?: 'primary' | 'neutral'; noBorder?: boolean; className?: string; 'data-testid'?: string; }; declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, noBorder, className, "data-testid": dataTestId, }: CopyButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type DateInputProps = Pick, 'autoFocus' | 'disabled' | 'locale' | 'maxDate' | 'minDate' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'required'> & { error?: string; format?: (value?: Date | string) => string | undefined; /** * Label of the field */ label?: string; value?: Date | string; className?: string; 'data-testid'?: string; }; declare const DateInput: ({ autoFocus, disabled, error, format, label, locale, maxDate, minDate, name, onBlur, onChange, onFocus, required, value, className, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type ExpandableProps = { /** * The content to display */ children: ReactNode; /** * To display or not the content */ opened?: boolean; /** * The minimum height of the content */ minHeight?: number; className?: string; 'data-testid'?: string; }; declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, }: ExpandableProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; declare const CONTAINER_SIZES: { readonly small: 720; readonly medium: 720; readonly large: 1140; }; type SizesTypes = keyof typeof CONTAINER_SIZES; type EmptyStateProps = { title?: string; description: ReactNode; /** * Container size will be same on `small` and `medium` * only the image size will change on those properties. * `small` and `medium` container is 720px wide * `large` container is 1080px wide */ size?: SizesTypes; /** * You can give the path of an image or a component that will render an image. */ image?: ReactNode; primaryButton?: ReactNode; secondaryButton?: ReactNode; learnMore?: { link: string; text: string; target?: string; }; bordered?: boolean; className?: string; children?: ReactNode; 'data-testid'?: string; }; declare const EmptyState: ({ image, title, size, description, primaryButton, secondaryButton, learnMore, className, bordered, children, "data-testid": dataTestId, }: EmptyStateProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type Transformer = (value: DatumValue) => string; type CustomLegendProps = { axisTransformer?: Transformer; data?: Serie[]; selected: string[]; setSelected: (selected: string[]) => void; className?: string; 'data-testid'?: string; }; declare const CustomLegend: ({ axisTransformer, data, selected, setSelected, className, "data-testid": dataTestId, }: CustomLegendProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type LineChartProps = { height?: string | number; margin?: Box; xScale?: ScaleSpec; yScale?: ScaleSpec; data?: Serie[]; withLegend?: boolean; axisFormatters?: Partial['axisTransformer']>>; pointFormatters?: Partial>>; tickValues?: Partial>; chartProps?: Partial; 'data-testid'?: string; }; /** * @experimental This component is experimental and may be subject to breaking changes in the future. */ declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, "data-testid": dataTestId, }: LineChartProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; declare const PROMINENCES$1: { default: string; weak: string; strong: string; }; type ProminenceProps$1 = keyof typeof PROMINENCES$1; type LinkSizes = 'large' | 'small'; type LinkIconPosition = 'left' | 'right'; type LinkProps = { children: ReactNode; target?: HTMLAttributeAnchorTarget; download?: string | boolean; sentiment?: Color; prominence?: ProminenceProps$1; size?: LinkSizes; iconPosition?: LinkIconPosition; rel?: AnchorHTMLAttributes['rel']; className?: string; href: string; onClick?: MouseEventHandler; 'aria-label'?: string; oneLine?: boolean; 'data-testid'?: string; }; declare const Link: react.ForwardRefExoticComponent>; type HeaderCellProps$1 = { children: ReactNode; className?: string; isOrdered?: boolean; orderDirection?: 'asc' | 'desc' | 'none'; onOrder?: (newOrder: 'asc' | 'desc') => void; info?: string; }; declare const HeaderCell$1: ({ children, isOrdered, orderDirection, onOrder, className, info, }: HeaderCellProps$1) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type SelectBarProps$1 = { className?: string; children: (p: { selectedItems: T[]; unselectAll: () => void; }) => ReactNode; data: T[]; /** * The idKey of each data entry * */ idKey: keyof T; }; declare function SelectBar$1({ children, data, idKey, className, }: SelectBarProps$1): _emotion_react_types_jsx_namespace.EmotionJSX.Element | null; type ColumnProps$1 = Pick, 'isOrdered' | 'onOrder' | 'orderDirection'> & { label?: string; width?: string; info?: string; }; type ListProps = { selectable?: boolean; columns: ColumnProps$1[]; children: ReactNode; /** * Set it to true if you want to display a placeholder during loading * */ loading?: boolean; /** * Auto collapse is collapsing expandable row when another is expanding * */ autoCollapse?: boolean; }; declare const List: react.ForwardRefExoticComponent> & { Row: react.ForwardRefExoticComponent<{ children: ReactNode; id: string; expandable?: ReactNode; selectDisabled?: string | boolean | undefined; disabled?: boolean | undefined; sentiment?: "primary" | "neutral" | "success" | "danger" | "warning" | "info" | undefined; className?: string | undefined; 'data-testid'?: string | undefined; } & react.RefAttributes>; Cell: react.ForwardRefExoticComponent<{ children?: ReactNode; className?: string | undefined; preventClick?: boolean | undefined; 'data-testid'?: string | undefined; } & react.RefAttributes>; SelectBar: typeof SelectBar$1; useListContext: () => { registerExpandableRow: (rowId: string) => () => void; expandedRowIds: { [x: string]: boolean; }; expandRow: (rowId: string) => void; collapseRow: (rowId: string) => void; registerSelectableRow: (rowId: string) => () => void; selectedRowIds: { [x: string]: boolean; }; selectRow: (rowId: string) => void; unselectRow: (rowId: string) => void; selectable: boolean; allRowSelectValue: boolean | "indeterminate" | undefined; selectAll: () => void; unselectAll: () => void; }; }; type LoaderProps = { active?: boolean; color?: Color | string; percentage?: number; size?: number | string; strokeWidth?: number; /** * Text is placed in center of ProgressCircle. */ text?: string; trailColor?: Color | string; /** * Label should be defined for accessibility, to indicate what is loading */ label?: string; }; declare const Loader: ({ percentage, text, size, strokeWidth, color, trailColor, active, label, }: LoaderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type DisclosureElement = ((popover: Partial) => ReactElement) | (ReactElement & { ref?: Ref; }); declare const arrowPlacementStyles: { readonly bottom: (theme: Theme) => _emotion_react.SerializedStyles; readonly 'bottom-end': (theme: Theme) => _emotion_react.SerializedStyles; readonly 'bottom-start': (theme: Theme) => _emotion_react.SerializedStyles; readonly top: (theme: Theme) => _emotion_react.SerializedStyles; readonly 'top-end': (theme: Theme) => _emotion_react.SerializedStyles; readonly 'top-start': (theme: Theme) => _emotion_react.SerializedStyles; }; type ArrowPlacement = keyof typeof arrowPlacementStyles; type MenuProps = { ariaLabel?: string; id?: string; placement?: ArrowPlacement; children?: ((props: PopoverStateReturn) => ReactNode) | ReactNode; className?: string; disclosure: DisclosureElement; hasArrow?: boolean; visible?: boolean; 'data-testid'?: string; }; declare const Menu: react.ForwardRefExoticComponent> & { Item: react.ForwardRefExoticComponent<{ href?: string | undefined; disabled?: boolean | undefined; tooltip?: string | undefined; className?: string | undefined; children: ReactNode; onClick?: react.MouseEventHandler | undefined; borderless?: boolean | undefined; sentiment?: ("neutral" | "danger") | undefined; 'data-testid'?: string | undefined; } & react.RefAttributes>; }; declare const MODAL_WIDTH: { large: number; medium: number; small: number; xsmall: number; xxsmall: number; }; type ModalWidth = keyof typeof MODAL_WIDTH; declare const MODAL_PLACEMENT: { bottom: string; 'bottom-left': string; 'bottom-right': string; center: string; left: string; right: string; top: string; 'top-left': string; 'top-right': string; }; type ModalPlacement = keyof typeof MODAL_PLACEMENT; declare const MODAL_ANIMATION: { fold: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; scaleBack: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; scaleUp: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; sketch: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; slideBottom: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; slideLeft: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; slideRight: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; slideTop: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; zoom: { enter: _emotion_react.Keyframes; leave: _emotion_react.Keyframes; }; }; type ModalAnimation = keyof typeof MODAL_ANIMATION; type DisclosureParam = ((dialog?: Partial) => ReactElement) | ReactElement; type ModalProps = Partial> & { animation?: ModalAnimation; ariaLabel?: string; bordered?: boolean; customDialogBackdropStyles?: JSX.IntrinsicAttributes['css']; customDialogStyles?: JSX.IntrinsicAttributes['css']; disclosure?: DisclosureParam; height?: string; isClosable?: boolean; modal?: boolean; onClose?: () => void; onBeforeClose?: () => Promise | void; opened?: boolean; placement?: ModalPlacement; width?: ModalWidth; children: ReactNode | ((args: DialogStateReturn) => ReactNode); className?: string; 'data-testid'?: string; }; declare const Modal: react.MemoExoticComponent<({ animated, animation, ariaLabel, id, bordered, children, customDialogBackdropStyles, customDialogStyles, disclosure, height, hideOnClickOutside, hideOnEsc, isClosable, modal, onClose, onBeforeClose, opened, placement, preventBodyScroll, width, className, "data-testid": dataTestId, }: ModalProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element>; type NoticeProps = { children: ReactNode; className?: string; 'data-testid'?: string; }; declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type PaginationProps = { /** Event function called when changing the page */ onChange: (newPage: number) => void; /** The current page */ page: number; /** Number of page you have */ pageCount: number; /** How many page button you want to have */ pageTabCount?: number; /** Disable all buttons */ disabled?: boolean; className?: string; 'data-testid'?: string; }; /** * Display multiple buttons to allow navigation between a paginated resource */ declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, "data-testid": dataTestId, }: PaginationProps) => JSX.Element; type Rule = { name: string; text: string; valid: boolean; }; type PasswordCheckProps = { /** * Is an array of object that contains password rules. `name` is the name of the rule, `text` the text associated * with the rule and `valid` is a boolean that determine if the rule is respected or not. */ rules: Rule[]; className?: string; 'data-testid'?: string; }; declare const PasswordCheck: ({ rules, className, "data-testid": dataTestId, }: PasswordCheckProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type Strength = { /** * Color to display */ color: string; /** * Text to display */ t: string; }; type Score = 0 | 1 | 2 | 3 | 4; type ResponseEstimate = { score: Score; }; type PasswordStrengthMeterProps = { /** * A function that should return a score based on password (index of strength array). The higher score is the stronger password is. */ estimate?: ((passwordToTest: string, userInputs: string[]) => Promise) | ((passwordToTest: string, userInputs: string[]) => ResponseEstimate); onChange?: (score: number) => unknown; password?: string; /** * Strength is used for defining different color and text associated with it. */ strength: Strength[]; title: string; /** * An array of string that defines what word shouldn't be used in the password. */ forbiddenInputs?: string[]; className?: string; 'data-testid'?: string; }; declare const PasswordStrengthMeter: ({ password, onChange, strength, title, estimate, forbiddenInputs, className, "data-testid": dataTestId, }: PasswordStrengthMeterProps) => JSX.Element; type Data = { name?: string | null; needPattern?: boolean | null; percent: number; id: string; value?: string | null; }; type PieChartProps = { chartProps?: Record; data?: Data[]; height?: number; width?: number; emptyLegend?: string; content?: ReactNode; withLegend?: boolean; margin?: Box; }; /** * @experimental This component is experimental and may be subject to breaking changes in the future. */ declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend, margin, chartProps, }: PieChartProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; declare const variants$1: { readonly block: ({ length }: { length?: number | undefined; }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly blocks: ({ col, length, }: { col?: number | undefined; length?: number | undefined; }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly box: ({ col, length, }: { col?: number | undefined; length?: number | undefined; }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly donut: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly line: _emotion_styled.StyledComponent<{ theme?: _emotion_react.Theme | undefined; as?: react.ElementType | undefined; }, react.DetailedHTMLProps, HTMLDivElement>, {}>; readonly list: ({ length, col, }: { length?: number | undefined; col?: number | undefined; }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; readonly slider: ({ length }: { length?: number | undefined; }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; }; type SkeletonVariant = keyof typeof variants$1; type SkeletonProps = { variant?: SkeletonVariant; length?: number; col?: number; className?: string; }; declare const Skeleton: ({ variant, length, col, className, }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; declare const progressBarSentiments: readonly ["primary", "success", "warning", "info"]; type ProgressBarProps = { sentiment?: (typeof progressBarSentiments)[number]; value?: number; /** Put ProgressBar in a loading state */ progress?: boolean; className?: string; 'data-testid'?: string; }; declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, }: ProgressBarProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element; type RadioProps = { error?: string | ReactNode; checked?: boolean; size?: number; value: string | number; className?: string; 'data-testid'?: string; } & Required, 'onChange'>> & Pick, 'onFocus' | 'onBlur' | 'disabled' | 'autoFocus' | 'onKeyDown' | 'id' | 'name' | 'required'> & ({ 'aria-label': string; children?: never; } | { 'aria-label'?: never; children: ReactNode; }); declare const Radio: react.ForwardRefExoticComponent>; type SelectOption = { value: string; label: ReactNode; disabled?: boolean; description?: string; inlineDescription?: string; }; type SelectStyleProps = { error?: string; /** * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles) */ customStyle: (state: SelectProps & WithSelectProps) => Record; animation?: string; /** * Time of the animation */ animationDuration: number; /** * Show/hide the label inside the component */ noTopLabel?: boolean; theme: Theme; }; type WithSelectProps = { selectProps: SelectProps; }; type SelectProps = StyledContainerProps & Omit, 'value'> & CommonProps$1> & { value?: string | SelectOption; checked?: boolean; error?: string; labelId?: string; required?: boolean; time?: boolean; }; type StyledContainerProps = { isDisabled?: boolean; additionalStyles?: Parameters[0]; }; type StateManagedSelect = typeof Select; type SelectInputProps = SelectProps & SelectStyleProps & { /** * Name of the animation */ animation?: string; /** * Play the animation when the value change */ animationOnChange?: boolean; disabled?: boolean; readOnly?: boolean; innerRef?: ForwardedRef; /** * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components) */ customComponents?: SelectProps['components']; children: ReactNode; emptyState?: ComponentProps