@ultraviolet/ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2427 @@
+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 '@ultraviolet/themes';
+export { consoleDarkTheme as darkTheme, consoleLightTheme as theme } from '@ultraviolet/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<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]>;
+};
+/**
+ * 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<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
+ */
+declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
+    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<keyof typeof consoleLightTheme.colors, 'primary' | 'neutral' | 'success' | 'danger' | 'warning' | 'info'>;
+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<SVGProps<SVGSVGElement>, "cursor" | "stroke" | "strokeWidth" | "className"> & react.RefAttributes<SVGSVGElement>>;
+
+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<any> | undefined;
+        } & Required<Pick<FinalProps, "size" | "disabled" | "sentiment" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, react.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+        link: _emotion_styled.StyledComponent<{
+            theme?: Theme | undefined;
+            as?: react.ElementType<any> | undefined;
+        } & Required<Pick<FinalProps, "size" | "disabled" | "sentiment" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+    };
+    outlined: {
+        button: _emotion_styled.StyledComponent<{
+            theme?: Theme | undefined;
+            as?: react.ElementType<any> | undefined;
+        } & Required<Pick<FinalProps, "size" | "disabled" | "sentiment" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, react.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+        link: _emotion_styled.StyledComponent<{
+            theme?: Theme | undefined;
+            as?: react.ElementType<any> | undefined;
+        } & Required<Pick<FinalProps, "size" | "disabled" | "sentiment" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+    };
+    ghost: {
+        button: _emotion_styled.StyledComponent<{
+            theme?: Theme | undefined;
+            as?: react.ElementType<any> | undefined;
+        } & Required<Pick<FinalProps, "size" | "disabled" | "sentiment" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, react.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+        link: _emotion_styled.StyledComponent<{
+            theme?: Theme | undefined;
+            as?: react.ElementType<any> | undefined;
+        } & Required<Pick<FinalProps, "size" | "disabled" | "sentiment" | "iconPosition" | "fullWidth">> & {
+            iconOnly: boolean;
+        }, react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+    };
+};
+type ButtonVariant = keyof typeof VARIANTS_COMPONENTS;
+type CommonProps = {
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['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<HTMLElement>;
+    tooltip?: string;
+};
+type FinalProps = CommonProps & ({
+    children: ReactNode;
+    icon?: ComponentProps<typeof Icon>['name'];
+    name?: string;
+    href?: never;
+    target?: never;
+    download?: never;
+} | {
+    children?: never;
+    icon: ComponentProps<typeof Icon>['name'];
+    name?: string;
+    href?: never;
+    target?: never;
+    download?: never;
+} | {
+    children: ReactNode;
+    icon?: ComponentProps<typeof Icon>['name'];
+    name?: never;
+    href: string;
+    target?: string;
+    download?: string;
+} | {
+    children?: never;
+    icon: ComponentProps<typeof Icon>['name'];
+    name?: never;
+    href: string;
+    target?: string;
+    download?: string;
+});
+declare const Button: react.ForwardRefExoticComponent<FinalProps & react.RefAttributes<Element>>;
+
+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<typeof Button>['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<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+type SingleXOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+type XOR<T extends unknown[]> = T extends [infer Only] ? Only : T extends [infer A, infer B, ...infer Rest] ? XOR<[SingleXOR<A, B>, ...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<DatumValue>;
+type TickSpec = NonNullable<ComponentProps<typeof ResponsiveBar>['axisBottom']>['tickValues'];
+type BarChartProps = {
+    height?: string | number;
+    margin?: Box;
+    data?: BarDatum[];
+    axisFormatters?: Partial<Record<'bottom' | 'left' | 'right' | 'top', Formatter>>;
+    pointFormatters?: Partial<Record<'x' | 'y', Formatter>>;
+    tickValues?: Partial<Record<'bottom' | 'left' | 'right' | 'top', TickSpec>>;
+    keys?: string[];
+    className?: string;
+    tooltipFunction?: (props: BarTooltipProps<BarDatum>) => ComponentProps<typeof BarChartToolTip>;
+    chartProps?: Partial<BarSvgProps<BarDatum>>;
+    '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<HTMLDivElement>;
+    onDoubleClick?: MouseEventHandler<HTMLDivElement>;
+    onMouseDown?: MouseEventHandler<HTMLDivElement>;
+    onMouseUp?: MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * 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<HTMLLIElement>, 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<typeof Button>['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<typeof Icon>['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<InputHTMLAttributes<HTMLInputElement>, '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<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+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<ReactDatePickerProps<string>, '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<Record<'bottom' | 'left' | 'right' | 'top', ComponentProps<typeof CustomLegend>['axisTransformer']>>;
+    pointFormatters?: Partial<Record<'x' | 'y', ValueFormat<DatumValue>>>;
+    tickValues?: Partial<Record<'bottom' | 'left' | 'right' | 'top', number | string>>;
+    chartProps?: Partial<LineSvgProps>;
+    '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<HTMLAnchorElement>['rel'];
+    className?: string;
+    href: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    'aria-label'?: string;
+    oneLine?: boolean;
+    'data-testid'?: string;
+};
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+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<T> = {
+    className?: string;
+    children: (p: {
+        selectedItems: T[];
+        unselectAll: () => void;
+    }) => ReactNode;
+    data: T[];
+    /**
+     * The idKey of each data entry
+     * */
+    idKey: keyof T;
+};
+declare function SelectBar$1<T>({ children, data, idKey, className, }: SelectBarProps$1<T>): _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+
+type ColumnProps$1 = Pick<ComponentProps<typeof HeaderCell$1>, '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<ListProps & react.RefAttributes<HTMLDivElement>> & {
+    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<HTMLDivElement>>;
+    Cell: react.ForwardRefExoticComponent<{
+        children?: ReactNode;
+        className?: string | undefined;
+        preventClick?: boolean | undefined;
+        'data-testid'?: string | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    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<PopoverStateReturn>) => ReactElement) | (ReactElement & {
+    ref?: Ref<HTMLButtonElement>;
+});
+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<MenuProps & react.RefAttributes<HTMLButtonElement>> & {
+    Item: react.ForwardRefExoticComponent<{
+        href?: string | undefined;
+        disabled?: boolean | undefined;
+        tooltip?: string | undefined;
+        className?: string | undefined;
+        children: ReactNode;
+        onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+        borderless?: boolean | undefined;
+        sentiment?: ("neutral" | "danger") | undefined;
+        'data-testid'?: string | undefined;
+    } & react.RefAttributes<HTMLElement>>;
+};
+
+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<DialogStateReturn>) => ReactElement) | ReactElement;
+type ModalProps = Partial<Pick<DialogProps, 'animated' | 'id' | 'hideOnEsc' | 'hideOnClickOutside' | 'preventBodyScroll'>> & {
+    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> | 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<ResponseEstimate>) | ((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<string, unknown>;
+    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<any> | undefined;
+    }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, 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<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'disabled' | 'autoFocus' | 'onKeyDown' | 'id' | 'name' | 'required'> & ({
+    'aria-label': string;
+    children?: never;
+} | {
+    'aria-label'?: never;
+    children: ReactNode;
+});
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+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<string, CSSObject>;
+    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<Props<SelectOption>, 'value'> & CommonProps$1<SelectOption, boolean, GroupBase<SelectOption>> & {
+    value?: string | SelectOption;
+    checked?: boolean;
+    error?: string;
+    labelId?: string;
+    required?: boolean;
+    time?: boolean;
+};
+type StyledContainerProps = {
+    isDisabled?: boolean;
+    additionalStyles?: Parameters<typeof css>[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<StateManagedSelect>;
+    /**
+     * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
+     */
+    customComponents?: SelectProps['components'];
+    children: ReactNode;
+    emptyState?: ComponentProps<Select>['noOptionsMessage'];
+    'data-testid'?: string;
+};
+type OptionComponent = (props: Partial<OptionProps<SelectOption> & SelectOption>) => JSX.Element;
+declare const SelectInput: ForwardRefExoticComponent<Partial<SelectInputProps>> & {
+    Option: OptionComponent;
+};
+
+type SelectableCardProps = {
+    name?: string;
+    children?: (({ disabled, checked, }: Pick<SelectableCardProps, 'checked' | 'disabled'>) => ReactNode) | ReactNode;
+    value: string | number;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    showTick?: boolean;
+    type?: 'radio' | 'checkbox';
+    disabled?: boolean;
+    checked?: boolean;
+    className?: string;
+    isError?: boolean;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    id?: string;
+    tooltip?: string;
+    label?: ReactNode;
+    'data-testid'?: string;
+};
+declare const SelectableCard: react.ForwardRefExoticComponent<SelectableCardProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const containerSizes: {
+    large: number;
+    medium: number;
+    small: number;
+};
+type ContainerSizesType = keyof typeof containerSizes;
+type NumberInputProps = {
+    disabled?: boolean;
+    maxValue?: number;
+    minValue?: number;
+    name?: string;
+    onChange?: (input: number | undefined) => void;
+    onMaxCrossed?(): void;
+    onMinCrossed?(): void;
+    size?: ContainerSizesType;
+    /**
+     * Define how much will stepper increase / decrease each time you click on + / - button.
+     */
+    step?: number;
+    /**
+     * Text displayed into component at the right of number value.
+     */
+    text?: string;
+    defaultValue?: number;
+    value?: number;
+    disabledTooltip?: string;
+    className?: string;
+    'data-testid'?: string;
+    label?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    id?: string;
+    placeholder?: string;
+    error?: string | boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'>;
+declare const NumberInput: ({ disabled, maxValue, minValue, name, onChange, onFocus, onBlur, onMaxCrossed, onMinCrossed, size, step, text, defaultValue, value, disabledTooltip, className, label, id, placeholder, error, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": dataTestId, }: NumberInputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type Direction = 'horizontal' | 'vertical';
+type SeparatorProps = {
+    icon?: ComponentProps<typeof Icon>['name'];
+    direction?: Direction;
+    thickness?: number;
+    color?: Color;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Separator: ({ direction, thickness, color, icon, className, "data-testid": dataTestId, }: SeparatorProps) => JSX.Element;
+
+type CarouselItemProps = {
+    children: ReactNode;
+};
+type CarouselProps = {
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+};
+declare const Carousel: {
+    ({ children, className, "data-testid": dataTestId, }: CarouselProps): JSX.Element;
+    Item: ({ children }: CarouselItemProps) => JSX.Element;
+};
+
+type Prefixes = 'lines' | 'command';
+type SnippetProps = {
+    className?: string;
+    children: string;
+    /**
+     * prefix display an element at the beginning of the snippet that is not copiable or selectable.
+     * For `lines` prefix it will display the line number.
+     * For `command` prefix it will display a `$` sign.
+     */
+    prefix?: Prefixes;
+    showText?: string;
+    hideText?: string;
+    'data-testid'?: string;
+} & Pick<ComponentProps<typeof CopyButton>, 'copyText' | 'copiedText'>;
+declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, }: SnippetProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type StackProps = {
+    gap?: keyof SCWUITheme['space'] | number;
+    direction?: 'row' | 'column';
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+    wrap?: boolean | CSSProperties['flexWrap'];
+    className?: string;
+    children: ReactNode;
+    'data-testid'?: string;
+};
+declare const Stack: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any> | undefined;
+} & StackProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare const sentiments: {
+    readonly danger: ({ theme }: {
+        theme: Theme;
+    }) => string;
+    readonly info: ({ theme }: {
+        theme: Theme;
+    }) => string;
+    readonly neutral: ({ theme }: {
+        theme: Theme;
+    }) => string;
+    readonly success: ({ theme }: {
+        theme: Theme;
+    }) => string;
+    readonly warning: ({ theme }: {
+        theme: Theme;
+    }) => string;
+};
+type StatusSentiment = keyof typeof sentiments;
+type StatusProps = {
+    animated?: boolean;
+    className?: string;
+    sentiment: StatusSentiment;
+    tooltip?: string;
+    'data-testid'?: string;
+};
+declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, }: StatusProps) => JSX.Element;
+
+type Sizes = 'small' | 'medium';
+type ContentProps = {
+    bulletIcon: ComponentProps<typeof Bullet>['icon'];
+    bulletText?: never;
+} | {
+    bulletIcon?: never;
+    bulletText: string;
+};
+type ItemProps = {
+    sentiment?: ComponentProps<typeof Bullet>['sentiment'];
+    size?: Sizes;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+} & ContentProps;
+type StepListProps = {
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+declare const StepList: {
+    ({ children, className, "data-testid": dataTestId, }: StepListProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    Item: ({ bulletText, bulletIcon, sentiment, children, size, disabled, className, }: ItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+
+type StepperProps = {
+    animated?: boolean;
+    selected?: number;
+    children: ReactNode[];
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Stepper: ({ children, selected, animated, className, "data-testid": dataTestId, }: StepperProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type SwitchButtonProps = {
+    name: string;
+    onBlur?: FocusEventHandler;
+    onChange: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
+    tooltip?: string;
+    value?: string | number;
+    leftButton: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    };
+    rightButton: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    };
+    className?: string;
+    'data-testid'?: string;
+};
+declare const SwitchButton: ({ value, onChange, onFocus, onBlur, name, leftButton, rightButton, tooltip, className, "data-testid": dataTestId, }: SwitchButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type HeaderCellProps = {
+    children: ReactNode;
+    className?: string;
+    isOrdered?: boolean;
+    orderDirection?: 'asc' | 'desc' | 'none';
+    onOrder?: (newOrder: 'asc' | 'desc') => void;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    info?: string;
+};
+declare const HeaderCell: ({ children, className, isOrdered, onOrder, orderDirection, width, maxWidth, minWidth, info, }: HeaderCellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type SelectBarProps<T> = {
+    className?: string;
+    children: (p: {
+        selectedItems: T[];
+        unselectAll: () => void;
+    }) => ReactNode;
+    data: T[];
+    /**
+     * The idKey of each data entry
+     * */
+    idKey: keyof T;
+};
+declare function SelectBar<T>({ children, data, idKey, className, }: SelectBarProps<T>): _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+
+type ColumnProps = Pick<ComponentProps<typeof HeaderCell>, 'isOrdered' | 'onOrder' | 'orderDirection'> & {
+    label?: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    info?: string;
+};
+type TableProps = {
+    selectable?: boolean;
+    columns: ColumnProps[];
+    children: ReactNode;
+    /**
+     * Set it to true if you want to display a placeholder during loading
+     * */
+    loading?: boolean;
+    bordered?: boolean;
+    stripped?: boolean;
+};
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>> & {
+    Body: ({ children }: {
+        children: ReactNode;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    Row: ({ children, className, id, selectDisabled, "data-testid": dataTestid, }: {
+        children: ReactNode;
+        className?: string | undefined;
+        id: string;
+        'data-testid'?: string | undefined;
+        selectDisabled?: string | boolean | undefined;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    Cell: ({ children, className, colSpan, rowSpan }: {
+        children?: ReactNode;
+        className?: string | undefined;
+        colSpan?: number | undefined;
+        rowSpan?: number | undefined;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    useTableContext: () => {
+        bordered: boolean;
+        stripped: boolean;
+        selectedRowIds: {
+            [x: string]: boolean;
+        };
+        selectRow: (rowId: string) => void;
+        unselectRow: (rowId: string) => void;
+        selectable: boolean;
+        allRowSelectValue: boolean | "indeterminate" | undefined;
+        selectAll: () => void;
+        unselectAll: () => void;
+        registerSelectableRow: (rowId: string) => () => void;
+    };
+    SelectBar: typeof SelectBar;
+};
+
+type TabsProps = {
+    selected?: string | number;
+    onChange: (data: string | number) => void;
+    moreDisclosure?: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'role'>;
+declare const Tabs: {
+    ({ children, onChange, moreDisclosure, selected, className, "data-testid": dataTestId, ...props }: TabsProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    Tab: react.ForwardRefExoticComponent<Omit<{
+        as?: react.ElementType | undefined;
+        badge?: ReactNode;
+        children?: ReactNode;
+        className?: string | undefined;
+        counter?: string | number | undefined;
+        disabled?: boolean | undefined;
+        value?: string | number | undefined;
+        onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+        onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
+        tooltip?: string | undefined;
+    } & Omit<any, "tooltip" | "children" | "role" | "className" | "as" | "disabled" | "value" | "badge" | "counter">, "ref"> & react.RefAttributes<HTMLElement>>;
+    Menu: react.ForwardRefExoticComponent<{
+        children: ReactNode;
+        disclosure: ReactNode;
+        visible?: boolean | undefined;
+        id?: string | undefined;
+    } & Omit<react.ButtonHTMLAttributes<HTMLButtonElement>, "aria-disabled"> & react.RefAttributes<HTMLButtonElement>>;
+    MenuItem: ({ value, children, onClick, ...props }: {
+        value?: string | number | undefined;
+    } & {
+        href?: string | undefined;
+        disabled?: boolean | undefined;
+        tooltip?: string | undefined;
+        className?: string | undefined;
+        children: ReactNode;
+        onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+        borderless?: boolean | undefined;
+        sentiment?: ("neutral" | "danger") | undefined;
+        'data-testid'?: string | undefined;
+    } & react.RefAttributes<HTMLElement> & {
+        theme?: _emotion_react.Theme | undefined;
+    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+
+type TagProps = {
+    isLoading?: boolean;
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    sentiment?: Color;
+    disabled?: boolean;
+    /**
+     * Defines icon to display on left side of badge. **Only available on medium and large sizes**.
+     */
+    icon?: IconName;
+    copiable?: boolean;
+    copyText?: string;
+    copiedText?: string;
+    className?: string;
+    children: ReactNode;
+    'data-testid'?: string;
+};
+declare const Tag: ({ children, isLoading, onClose, icon, copiable, copyText, copiedText, disabled, sentiment, className, "data-testid": dataTestId, }: TagProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+declare const variants: {
+    readonly base: ({ theme: { colors, shadows, radii } }: {
+        theme: Theme;
+    }) => string;
+    readonly bordered: ({ theme: { shadows } }: {
+        theme: Theme;
+    }) => string;
+    readonly 'no-border': ({ theme: { shadows } }: {
+        theme: Theme;
+    }) => string;
+};
+type Variant = keyof typeof variants;
+type TagInputProp = (string | {
+    label: string;
+    index: string;
+})[];
+type TagInputProps = {
+    disabled?: boolean;
+    id?: string;
+    manualInput?: boolean;
+    name?: string;
+    onChange?: (tags: string[]) => void;
+    onChangeError?: (error: Error | string) => void;
+    placeholder?: string;
+    tags?: TagInputProp;
+    variant?: Variant;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+declare const TagInput: ({ disabled, id, manualInput, name, onChange, onChangeError, placeholder, tags, variant, className, "data-testid": dataTestId, }: TagInputProps) => JSX.Element;
+
+type TagListProps = {
+    /**
+     * This property define maximum characters length of all tags until it hide tags into tooltip.
+     */
+    maxLength?: number;
+    tags?: string[];
+    /**
+     * This property define maximum characters length of all tags until it hide tags into tooltip.
+     */
+    threshold?: number;
+    /**
+     * This property define maximum width of each tag. This doesn't apply for tags in tooltip.
+     */
+    multiline?: boolean;
+    /**
+     * This property define the title of the Popover, when some tags are hidden because of the threshold.
+     */
+    popoverTitle: string;
+    className?: string;
+    'data-testid'?: string;
+} & Pick<ComponentProps<typeof Tag>, 'copiable' | 'copyText' | 'copiedText'>;
+declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, copiable, copyText, copiedText, className, "data-testid": dataTestId, }: TagListProps) => JSX.Element | null;
+
+declare const PROMINENCES: {
+    default: string;
+    strong: string;
+    stronger: string;
+    weak: string;
+};
+type ProminenceProps = keyof typeof PROMINENCES;
+type TextVariant = keyof typeof typography;
+type TextProps = {
+    className?: string;
+    children: ReactNode;
+    variant: TextVariant;
+    color?: Color;
+    prominence?: ProminenceProps;
+    as: ElementType;
+    oneLine?: boolean;
+    disabled?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    id?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    htmlFor?: string;
+    'data-testid'?: string;
+};
+declare const Text: ({ variant, children, as, color, oneLine, prominence, className, disabled, italic, underline, id, dir, htmlFor, "data-testid": dataTestId, }: TextProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+declare const inputSizes: {
+    medium: {
+        default: string;
+        full: string;
+    };
+    small: {
+        default: string;
+        full: string;
+    };
+};
+type TextInputSizes = keyof typeof inputSizes;
+type StyledInputProps = {
+    disabled?: boolean;
+    error?: boolean;
+    fillAvailable?: boolean;
+    hasLabel?: boolean;
+    paddingRightFactor: number;
+    isPlaceholderVisible?: boolean;
+    multiline?: boolean;
+    resizable?: boolean;
+    inputSize: TextInputSizes;
+} & (InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>);
+type InputProps = Omit<Exclude<StyledInputProps, TextareaHTMLAttributes<HTMLTextAreaElement>>, 'inputSize'>;
+type TextInputProps = {
+    'data-testid'?: string;
+    ariaControls?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    className?: string;
+    cols?: number;
+    defaultValue?: string;
+    disabled?: boolean;
+    edit?: boolean;
+    error?: string;
+    fillAvailable?: boolean;
+    generated?: boolean;
+    height?: string | number;
+    id?: string;
+    label?: string;
+    multiline?: boolean;
+    name?: string;
+    notice?: string;
+    noTopLabel?: boolean;
+    onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onChange?: (value: string) => void;
+    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyUp?: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    placeholder?: string;
+    random?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    resizable?: boolean;
+    rows?: number;
+    size?: TextInputSizes;
+    tabIndex?: number;
+    type?: string;
+    unit?: string;
+    valid?: boolean;
+    value?: string | number;
+    wrap?: string;
+    inputProps?: InputProps;
+    max?: InputHTMLAttributes<HTMLInputElement>['max'];
+    min?: InputHTMLAttributes<HTMLInputElement>['min'];
+} & (Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> | Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>);
+declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
+
+declare const schedules: {
+    half: readonly ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"];
+    hours: readonly ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"];
+    quarter: readonly ["00:00", "00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45", "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30", "05:45", "06:00", "06:15", "06:30", "06:45", "07:00", "07:15", "07:30", "07:45", "08:00", "08:15", "08:30", "08:45", "09:00", "09:15", "09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00", "11:15", "11:30", "11:45", "12:00", "12:15", "12:30", "12:45", "13:00", "13:15", "13:30", "13:45", "14:00", "14:15", "14:30", "14:45", "15:00", "15:15", "15:30", "15:45", "16:00", "16:15", "16:30", "16:45", "17:00", "17:15", "17:30", "17:45", "18:00", "18:15", "18:30", "18:45", "19:00", "19:15", "19:30", "19:45", "20:00", "20:15", "20:30", "20:45", "21:00", "21:15", "21:30", "21:45", "22:00", "22:15", "22:30", "22:45", "23:00", "23:15", "23:30", "23:45"];
+};
+type ScheduleType = keyof typeof schedules;
+declare const options: (schedule: ScheduleType) => {
+    label: "00:00" | "01:00" | "02:00" | "03:00" | "04:00" | "05:00" | "06:00" | "07:00" | "08:00" | "09:00" | "10:00" | "11:00" | "12:00" | "13:00" | "14:00" | "15:00" | "16:00" | "17:00" | "18:00" | "19:00" | "20:00" | "21:00" | "22:00" | "23:00" | "00:30" | "01:30" | "02:30" | "03:30" | "04:30" | "05:30" | "06:30" | "07:30" | "08:30" | "09:30" | "10:30" | "11:30" | "12:30" | "13:30" | "14:30" | "15:30" | "16:30" | "17:30" | "18:30" | "19:30" | "20:30" | "21:30" | "22:30" | "23:30" | "00:15" | "00:45" | "01:15" | "01:45" | "02:15" | "02:45" | "03:15" | "03:45" | "04:15" | "04:45" | "05:15" | "05:45" | "06:15" | "06:45" | "07:15" | "07:45" | "08:15" | "08:45" | "09:15" | "09:45" | "10:15" | "10:45" | "11:15" | "11:45" | "12:15" | "12:45" | "13:15" | "13:45" | "14:15" | "14:45" | "15:15" | "15:45" | "16:15" | "16:45" | "17:15" | "17:45" | "18:15" | "18:45" | "19:15" | "19:45" | "20:15" | "20:45" | "21:15" | "21:45" | "22:15" | "22:45" | "23:15" | "23:45";
+    value: "00:00" | "01:00" | "02:00" | "03:00" | "04:00" | "05:00" | "06:00" | "07:00" | "08:00" | "09:00" | "10:00" | "11:00" | "12:00" | "13:00" | "14:00" | "15:00" | "16:00" | "17:00" | "18:00" | "19:00" | "20:00" | "21:00" | "22:00" | "23:00" | "00:30" | "01:30" | "02:30" | "03:30" | "04:30" | "05:30" | "06:30" | "07:30" | "08:30" | "09:30" | "10:30" | "11:30" | "12:30" | "13:30" | "14:30" | "15:30" | "16:30" | "17:30" | "18:30" | "19:30" | "20:30" | "21:30" | "22:30" | "23:30" | "00:15" | "00:45" | "01:15" | "01:45" | "02:15" | "02:45" | "03:15" | "03:45" | "04:15" | "04:45" | "05:15" | "05:45" | "06:15" | "06:45" | "07:15" | "07:45" | "08:15" | "08:45" | "09:15" | "09:45" | "10:15" | "10:45" | "11:15" | "11:45" | "12:15" | "12:45" | "13:15" | "13:45" | "14:15" | "14:45" | "15:15" | "15:45" | "16:15" | "16:45" | "17:15" | "17:45" | "18:15" | "18:45" | "19:15" | "19:45" | "20:15" | "20:45" | "21:15" | "21:45" | "22:15" | "22:45" | "23:15" | "23:45";
+}[];
+type TimeInputProps = Partial<ComponentProps<typeof SelectInput>> & {
+    schedule?: ScheduleType;
+};
+type TimeInputType = ((props: TimeInputProps) => JSX.Element) & {
+    options: typeof options;
+};
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+declare const TimeInput: TimeInputType;
+
+declare const toast: {
+    error: (children: ReactNode, options?: ToastOptions) => number | string;
+    info: (children: ReactNode, options?: ToastOptions) => number | string;
+    success: (children: ReactNode, options?: ToastOptions) => number | string;
+};
+type ToastContainerProps = {
+    /**
+     * Whether to display the newest toast on top.
+     * `Default: false`
+     */
+    newestOnTop?: boolean;
+    /**
+     * Limit the number of toast displayed at the same time
+     */
+    limit?: number;
+    /**
+     * Position of the toast container
+     */
+    position?: ToastOptions['position'];
+    'data-testid'?: string;
+};
+declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, }: ToastContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type ToggleProps = {
+    id?: string;
+    checked?: boolean;
+    name: string;
+    tooltip?: string;
+    /**
+     * If `onChange` is given component will work as a controlled component if not it will work as an uncontrolled component.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    size?: 'large' | 'small';
+    labelPosition?: 'left' | 'right';
+    label?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    required?: boolean;
+    'data-testid'?: string;
+};
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+
+type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto';
+
+type TooltipProps = {
+    /**
+     * Id is automatically generated if not set. It is used for associating tooltip wrapper with tooltip portal.
+     */
+    id?: string;
+    children: ReactNode | ((renderProps: {
+        className?: string;
+        onBlur: () => void;
+        onFocus: () => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        ref: RefObject<HTMLDivElement>;
+    }) => ReactNode);
+    maxWidth?: number;
+    /**
+     * `auto` placement will change the position of the tooltip if it doesn't fit in the viewport.
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Content of the tooltip, preferably text inside.
+     */
+    text?: ReactNode;
+    className?: string;
+    /**
+     * It will force display tooltip. This can be useful if you need to always display the tooltip without hover needed.
+     */
+    visible?: boolean;
+    innerRef?: Ref<HTMLDivElement | null>;
+    role?: string;
+    'data-testid'?: string;
+};
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+type VerificationCodeProps = {
+    disabled?: boolean;
+    error?: boolean;
+    className?: string;
+    /**
+     * Amount of field you want
+     */
+    fields?: number;
+    initialValue?: string;
+    inputId?: string;
+    inputStyle?: string;
+    /**
+     * Triggered when a field change
+     */
+    onChange?: (data: unknown) => void;
+    /**
+     * Triggered when all fields are completed
+     */
+    onComplete?: (data: unknown) => void;
+    placeholder?: string;
+    required?: boolean;
+    /**
+     * Type of the fields
+     */
+    type?: 'text' | 'number';
+    'data-testid'?: string;
+    'aria-label'?: string;
+};
+declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => JSX.Element;
+
+type RowProps = {
+    className?: string;
+    'data-testid'?: string;
+    children: ReactNode;
+    templateColumns: string;
+    gap?: keyof SCWUITheme['space'] | number;
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
+};
+declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, }: RowProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type CardProps = {
+    children: ReactNode;
+    /**
+     * Header can be a string but also a component if you need more complex header.
+     */
+    header?: ReactNode;
+    /**
+     * isActive enable a primary style on Card component for when you need to highlight it.
+     */
+    isActive?: boolean;
+    disabled?: boolean;
+    className?: string;
+    'data-testid'?: string;
+};
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+type SentimentType = 'neutral' | 'primary';
+declare const SIZES_WIDTH: {
+    small: number;
+    medium: number;
+    large: number;
+};
+type PopoverProps = {
+    children: ReactNode;
+    content: ReactNode;
+    title: string;
+    sentiment?: SentimentType;
+    visible?: boolean;
+    size?: keyof typeof SIZES_WIDTH;
+    onClose: () => void;
+    className?: string;
+    'data-testid'?: string;
+} & Pick<ComponentProps<typeof Tooltip>, 'placement'>;
+declare const Popover: ({ visible, children, placement, content, title, sentiment, size, onClose, className, "data-testid": dataTestId, }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+declare const getUUID: (prefix?: string) => string;
+
+declare const bounce: _emotion_react.Keyframes;
+declare const ping: _emotion_react.Keyframes;
+declare const flash: _emotion_react.Keyframes;
+declare const zoomIn: _emotion_react.Keyframes;
+declare const zoomOut: _emotion_react.Keyframes;
+declare const unfoldIn: _emotion_react.Keyframes;
+declare const unfoldOut: _emotion_react.Keyframes;
+declare const fadeIn: _emotion_react.Keyframes;
+declare const fadeOut: _emotion_react.Keyframes;
+declare const scaleUp: _emotion_react.Keyframes;
+declare const scaleDown: _emotion_react.Keyframes;
+declare const quickScaleDown: _emotion_react.Keyframes;
+declare const scaleBack: _emotion_react.Keyframes;
+declare const scaleForward: _emotion_react.Keyframes;
+declare const sketchIn: _emotion_react.Keyframes;
+declare const sketchOut: _emotion_react.Keyframes;
+declare const slideDownLarge: _emotion_react.Keyframes;
+declare const slideUpLarge: _emotion_react.Keyframes;
+declare const slideFromBottom: _emotion_react.Keyframes;
+declare const slideFromTop: _emotion_react.Keyframes;
+declare const slideFromRight: _emotion_react.Keyframes;
+declare const slideFromLeft: _emotion_react.Keyframes;
+declare const slideToBottom: _emotion_react.Keyframes;
+declare const slideToTop: _emotion_react.Keyframes;
+declare const slideToRight: _emotion_react.Keyframes;
+declare const slideToLeft: _emotion_react.Keyframes;
+declare const pulse: _emotion_react.Keyframes;
+
+declare const Breakpoint: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any> | undefined;
+} & {
+    down?: "large" | "small" | "xlarge" | "xsmall" | "medium" | undefined;
+    up?: "large" | "small" | "xlarge" | "xsmall" | "medium" | undefined;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare const up: (size: ScreenSize, rules: string) => string;
+declare const down: (size: ScreenSize, rules: string) => string;
+
+declare const normalize: () => string;
+
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CopyButton, DateInput, EmptyState, Expandable, Icon, LineChart, Link, List, Loader, Menu, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, Row, SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };