@orfium/ictinus 4.55.0-next.3 → 4.55.0-next.30

package/dist/index.d.ts

@@ -1,43 +1,56 @@
+/// <reference types="react" />
 export { rem } from 'polished';
 import * as react_media from 'react-media';
-import * as _emotion_react from '@emotion/react';
-import * as React from 'react';
-import React__default, { ButtonHTMLAttributes, MouseEvent as MouseEvent$1, ChangeEvent, InputHTMLAttributes, ReactNode, FC } from 'react';
+import * as _emotion_utils from '@emotion/utils';
+import * as React$1 from 'react';
+import React__default, { ButtonHTMLAttributes, MouseEvent, ChangeEvent, InputHTMLAttributes, Key, FC, FCC, ReactNode } from 'react';
+import * as utils_types from 'utils/types';
 import { TestProps as TestProps$1, TestId as TestId$1 } from 'utils/types';
-import { ClickHandler } from 'hooks/useLoading';
-import { CommonButtonProps as CommonButtonProps$1, EventProps as EventProps$1 } from 'utils/common';
+import { LinkProps } from 'components/Link/Link.types';
 import * as _emotion_serialize from '@emotion/serialize';
 import { CSSObject } from '@emotion/serialize';
+import { ButtonTypes as ButtonTypes$1, PrimitiveButtonTypes } from 'components/Button/Button.types';
+import { IconButtonShape as IconButtonShape$1 } from 'components/IconButton';
+import { ButtonBaseProps as ButtonBaseProps$1 } from 'components/ButtonBase/ButtonBase';
+import { CommonButtonProps as CommonButtonProps$1, EventProps } from 'utils/common';
+import { AvatarProps as AvatarProps$1, AvatarColors as AvatarColors$1 } from 'components/Avatar';
+import * as components_Icon from 'components/Icon';
+import { AcceptedIconNames as AcceptedIconNames$1 } from 'components/Icon';
 import { Elevation as Elevation$1 } from 'index';
 import { SpacingKey as SpacingKey$1 } from 'theme/globals/spacing';
 import { Dayjs } from 'utils/date';
-import { AcceptedIconNames as AcceptedIconNames$1 } from 'components/Icon/types';
-import { TextInputBaseProps } from 'components/TextInputBase';
+import { TextInputBaseProps as TextInputBaseProps$1 } from 'components/TextInputBase';
 import { LocationState, Location } from 'history';
 import { match } from 'react-router';
+import { AcceptedIconNames as AcceptedIconNames$2 } from 'components/Icon/types';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import * as prop_types from 'prop-types';
 import { ReactComponentLike } from 'prop-types';
-import { ButtonBaseProps as ButtonBaseProps$1 } from 'components/ButtonBase/ButtonBase';
-import { FilterOption as FilterOption$1 } from 'components/Filter/types';
-import { SelectOption as SelectOption$1 } from 'components/Select/Select';
-import { AcceptedColorComponentTypes as AcceptedColorComponentTypes$1 } from 'utils/themeFunctions';
-import { AvatarColors as AvatarColors$1 } from 'components/Avatar';
+import { ComponentSizes as ComponentSizes$1 } from 'types';
+import { AriaListBoxProps, RadioAria, SwitchAria } from 'react-aria';
+import { SelectOption as SelectOption$1 } from 'components/Select';
+import { SectionProps } from '@react-types/shared';
+import * as _emotion_react from '@emotion/react';
+import { CSSObject as CSSObject$1 } from '@emotion/react';
+import { RadioGroupState } from 'react-stately';
+import { LabelConfig as LabelConfig$1 } from 'components/Controls/Controls.types';
+import { TooltipPlacement as TooltipPlacement$1 } from 'components/Tooltip/Tooltip.types';
 import { TextFieldProps as TextFieldProps$1 } from 'components/TextField/TextField';
-import { ThemeConfig, Theme as Theme$1 } from 'theme';
+import { ThemeConfig } from 'theme';
 
 declare const queriesKeys: readonly ["des1920", "des1440", "des1366", "des1200", "tab1024", "tab970", "tab750", "mob480", "mob320"];
 declare const queriesSizes: Record<typeof queriesKeys[number], string>;
 declare const useBreakpoints: () => react_media.QueryResults<Record<"des1920" | "des1440" | "des1366" | "des1200" | "tab1024" | "tab970" | "tab750" | "mob480" | "mob320", string>>;
 
-declare const grid: _emotion_react.SerializedStyles;
-declare const well: _emotion_react.SerializedStyles;
-declare const centerAbsoluteVertical: _emotion_react.SerializedStyles;
-declare const transition: (s: number, type?: string) => _emotion_react.SerializedStyles;
-declare const lineEllipsis: _emotion_react.SerializedStyles;
-declare const flex: _emotion_react.SerializedStyles;
-declare const flexCenter: _emotion_react.SerializedStyles;
-declare const flexCenterVertical: _emotion_react.SerializedStyles;
-declare const plainTextButton: _emotion_react.SerializedStyles;
+declare const grid: _emotion_utils.SerializedStyles;
+declare const well: _emotion_utils.SerializedStyles;
+declare const centerAbsoluteVertical: _emotion_utils.SerializedStyles;
+declare const transition: (s: number, type?: string) => _emotion_utils.SerializedStyles;
+declare const lineEllipsis: _emotion_utils.SerializedStyles;
+declare const flex: _emotion_utils.SerializedStyles;
+declare const flexCenter: _emotion_utils.SerializedStyles;
+declare const flexCenterVertical: _emotion_utils.SerializedStyles;
+declare const plainTextButton: _emotion_utils.SerializedStyles;
 
 declare const functions_d_centerAbsoluteVertical: typeof centerAbsoluteVertical;
 declare const functions_d_flex: typeof flex;
@@ -62,7 +75,7 @@ declare namespace functions_d {
   };
 }
 
-declare type Elevation = {
+type Elevation = {
     '01': string;
     '02': string;
     '03': string;
@@ -80,61 +93,61 @@ declare namespace elevation_d {
 
 declare const spacing$1: {
     readonly '0': {
-        readonly value: "0";
+        readonly value: "0px";
         readonly type: "spacing";
     };
     readonly '1': {
-        readonly value: "1";
+        readonly value: "1px";
         readonly type: "spacing";
     };
     readonly '2': {
-        readonly value: "2";
+        readonly value: "2px";
         readonly type: "spacing";
     };
     readonly '3': {
-        readonly value: "4";
+        readonly value: "4px";
         readonly type: "spacing";
     };
     readonly '4': {
-        readonly value: "8";
+        readonly value: "8px";
         readonly type: "spacing";
     };
     readonly '5': {
-        readonly value: "12";
+        readonly value: "12px";
         readonly type: "spacing";
     };
     readonly '6': {
-        readonly value: "16";
+        readonly value: "16px";
         readonly type: "spacing";
     };
     readonly '7': {
-        readonly value: "20";
+        readonly value: "20px";
         readonly type: "spacing";
     };
     readonly '8': {
-        readonly value: "24";
+        readonly value: "24px";
         readonly type: "spacing";
     };
     readonly '9': {
-        readonly value: "32";
+        readonly value: "32px";
         readonly type: "spacing";
     };
     readonly '10': {
-        readonly value: "36";
+        readonly value: "36px";
         readonly type: "spacing";
     };
     readonly '11': {
-        readonly value: "40";
+        readonly value: "40px";
         readonly type: "spacing";
     };
     readonly '12': {
-        readonly value: "44";
+        readonly value: "44px";
         readonly type: "spacing";
     };
 };
 
-declare type SpacingKey = keyof typeof spacing$1;
-declare type Spacing = {
+type SpacingKey = keyof typeof spacing$1;
+type Spacing = {
     get: (val: SpacingKey, fn?: (val: string) => unknown) => string;
 };
 declare const spacing: Spacing;
@@ -154,48 +167,53 @@ declare const fontFamily: {
         readonly value: "Roboto";
         readonly type: "fontFamilies";
     };
+    readonly robotoMono: {
+        readonly value: "Roboto Mono";
+        readonly type: "fontFamilies";
+        readonly description: "alternative font family used for numerical table cells";
+    };
 };
 
 declare const fontSize: {
     readonly '1': {
-        readonly value: "10";
+        readonly value: "10px";
         readonly type: "fontSizes";
         readonly description: "smallest possible body size. Used only for avatar initials";
     };
     readonly '2': {
-        readonly value: "12";
+        readonly value: "12px";
         readonly type: "fontSizes";
     };
     readonly '3': {
-        readonly value: "14";
+        readonly value: "14px";
         readonly type: "fontSizes";
     };
     readonly '4': {
-        readonly value: "16";
+        readonly value: "16px";
         readonly type: "fontSizes";
     };
     readonly '5': {
-        readonly value: "18";
+        readonly value: "18px";
         readonly type: "fontSizes";
     };
     readonly '6': {
-        readonly value: "20";
+        readonly value: "20px";
         readonly type: "fontSizes";
     };
     readonly '7': {
-        readonly value: "22";
+        readonly value: "22px";
         readonly type: "fontSizes";
     };
     readonly '8': {
-        readonly value: "24";
+        readonly value: "24px";
         readonly type: "fontSizes";
     };
     readonly '9': {
-        readonly value: "28";
+        readonly value: "28px";
         readonly type: "fontSizes";
     };
     readonly '10': {
-        readonly value: "32";
+        readonly value: "32px";
         readonly type: "fontSizes";
     };
 };
@@ -204,85 +222,83 @@ declare const fontWeight: {
     readonly regular: {
         readonly value: "400";
         readonly type: "fontWeights";
+        readonly description: "fontWeight=Regular";
     };
     readonly medium: {
         readonly value: "500";
         readonly type: "fontWeights";
-    };
-    readonly semiBold: {
-        readonly value: "600";
-        readonly type: "fontWeights";
+        readonly description: "FontWeight=Medium";
     };
     readonly bold: {
         readonly value: "700";
         readonly type: "fontWeights";
+        readonly description: "FontWeight=Bold";
     };
 };
 
 declare const letterSpacing: {
     readonly '0': {
-        readonly value: "0";
+        readonly value: "0px";
         readonly type: "letterSpacing";
     };
     readonly '1': {
-        readonly value: "0.1";
+        readonly value: "0.1px";
         readonly type: "letterSpacing";
     };
     readonly '2': {
-        readonly value: ".25";
+        readonly value: "0.25px";
         readonly type: "letterSpacing";
     };
     readonly '3': {
-        readonly value: ".5";
+        readonly value: "0.5px";
         readonly type: "letterSpacing";
     };
 };
 
 declare const lineHeight: {
     readonly '1': {
-        readonly value: "14";
+        readonly value: "14px";
         readonly type: "lineHeights";
         readonly description: "For form field labels only";
     };
     readonly '2': {
-        readonly value: "16";
+        readonly value: "16px";
         readonly type: "lineHeights";
-        readonly description: "For input fields only (Form Fields & Tables)";
     };
     readonly '3': {
         readonly value: "18px";
         readonly type: "lineHeights";
     };
     readonly '4': {
-        readonly value: "20";
+        readonly value: "20px";
         readonly type: "lineHeights";
     };
     readonly '5': {
-        readonly value: "22";
+        readonly value: "22px";
         readonly type: "lineHeights";
     };
     readonly '6': {
-        readonly value: "24";
+        readonly value: "24px";
         readonly type: "lineHeights";
     };
     readonly '7': {
-        readonly value: "28";
+        readonly value: "28px";
         readonly type: "lineHeights";
     };
     readonly '8': {
-        readonly value: "32";
+        readonly value: "32px";
         readonly type: "lineHeights";
     };
     readonly '9': {
-        readonly value: "36";
+        readonly value: "36px";
         readonly type: "lineHeights";
     };
     readonly '10': {
-        readonly value: "40";
+        readonly value: "40px";
         readonly type: "lineHeights";
     };
     readonly '11': {
-        readonly value: "48";
+        readonly value: "48px";
         readonly type: "lineHeights";
     };
 };
@@ -310,14 +326,14 @@ declare const textDecoration: {
     };
 };
 
-declare type FontSizeKey = keyof typeof fontSize;
-declare type FontWeightKey = keyof typeof fontWeight;
-declare type FontFamilyKey = keyof typeof fontFamily;
-declare type LineHeightKey = keyof typeof lineHeight;
-declare type LetterSpacingKey = keyof typeof letterSpacing;
-declare type TextCaseKey = keyof typeof textCase;
-declare type TextDecorationKey = keyof typeof textDecoration;
-declare type FontSize = {
+type FontSizeKey = keyof typeof fontSize;
+type FontWeightKey = keyof typeof fontWeight;
+type FontFamilyKey = keyof typeof fontFamily;
+type LineHeightKey = keyof typeof lineHeight;
+type LetterSpacingKey = keyof typeof letterSpacing;
+type TextCaseKey = keyof typeof textCase;
+type TextDecorationKey = keyof typeof textDecoration;
+type FontSize = {
     get: (val: FontSizeKey, fn?: (val: string) => unknown) => string;
     /** @TODO remove this custom font-sizes*/
     '8': string;
@@ -325,36 +341,36 @@ declare type FontSize = {
     '13': string;
     '15': string;
 };
-declare type FontWeight = {
+type FontWeight = {
     get: (val: FontWeightKey, fn?: (val: string) => unknown) => number;
 };
-declare type FontFamily = {
+type FontFamily = {
     get: (val: FontFamilyKey, fn?: (val: string) => unknown) => string;
 };
-declare type LineHeight = {
+type LineHeight = {
     get: (val: LineHeightKey, fn?: (val: string) => unknown) => string;
 };
-declare type LetterSpacing = {
+type LetterSpacing = {
     get: (val: LetterSpacingKey, fn?: (val: string) => unknown) => string;
 };
-declare type TextCase = {
+type TextCase = {
     get: (val: TextCaseKey, fn?: (val: string) => unknown) => string;
 };
-declare type TextDecoration = {
+type TextDecoration = {
     get: (val: TextDecorationKey, fn?: (val: string) => unknown) => string;
 };
-declare type Typography = {
+type Typography = {
     globalFontSize: number;
-    fontSizes: FontSize;
-    weights: FontWeight;
-    fontFamilies: FontFamily;
-    fontFamily: string;
-    lineHeights: LineHeight;
-    letterSpacings: LetterSpacing;
-    textCases: TextCase;
-    textDecorations: TextDecoration;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    fontFamily: FontFamily;
+    defaultFontFamily: string;
+    lineHeight: LineHeight;
+    letterSpacing: LetterSpacing;
+    textCase: TextCase;
+    textDecoration: TextDecoration;
 };
-declare const typography: Typography;
+declare const typography$1: Typography;
 
 type typography_d_FontFamily = FontFamily;
 type typography_d_FontFamilyKey = FontFamilyKey;
@@ -388,11 +404,11 @@ declare namespace typography_d {
     typography_d_TextDecoration as TextDecoration,
     typography_d_TextDecorationKey as TextDecorationKey,
     typography_d_Typography as Typography,
-    typography as default,
+    typography$1 as default,
   };
 }
 
-declare type Overrides = Record<string, any>;
+type Overrides = Record<string, any>;
 declare const overrides: Overrides;
 
 type overrides_d_Overrides = Overrides;
@@ -405,7 +421,7 @@ declare namespace overrides_d {
 
 declare const borderRadius: {
     readonly '0': {
-        readonly value: "0px";
+        readonly value: "0 px";
         readonly type: "borderRadius";
         readonly description: "Corner radius = 0px";
     };
@@ -446,8 +462,8 @@ declare const borderRadius: {
     };
 };
 
-declare type BorderRadiusKey = keyof typeof borderRadius;
-declare type BorderRadius = {
+type BorderRadiusKey = keyof typeof borderRadius;
+type BorderRadius = {
     get: (val: BorderRadiusKey, fn?: (val: string) => unknown) => string;
 };
 
@@ -460,21 +476,26 @@ declare const borderWidth: {
     readonly '2': {
         readonly value: "2px";
         readonly type: "borderWidth";
+        readonly description: "Default 2pxs stroke";
+    };
+    readonly '3': {
+        readonly value: "4px";
+        readonly type: "borderWidth";
     };
 };
 
-declare type BorderWidthKey = keyof typeof borderWidth;
-declare type BorderWidth = {
+type BorderWidthKey = keyof typeof borderWidth;
+type BorderWidth = {
     get: (val: BorderWidthKey, fn?: (val: string) => unknown) => string;
 };
 
 declare const boxShadow: {
     readonly '0': {
         readonly value: {
-            readonly x: "0";
-            readonly y: "0";
-            readonly blur: "0";
-            readonly spread: "0";
+            readonly x: "0px";
+            readonly y: "0px";
+            readonly blur: "0px";
+            readonly spread: "0px";
             readonly color: "#";
             readonly type: "innerShadow";
         };
@@ -482,10 +503,10 @@ declare const boxShadow: {
     };
     readonly '1': {
         readonly value: {
-            readonly x: "0";
-            readonly y: "2";
-            readonly blur: "5";
-            readonly spread: "0";
+            readonly x: "0px";
+            readonly y: "2px";
+            readonly blur: "5px";
+            readonly spread: "0px";
             readonly color: "#10306612";
             readonly type: "dropShadow";
         };
@@ -504,33 +525,321 @@ declare const boxShadow: {
     };
     readonly '3': {
         readonly value: {
+            readonly x: "0px";
+            readonly y: "8px";
+            readonly blur: "16px";
+            readonly spread: "0px";
             readonly color: "#10306612";
             readonly type: "dropShadow";
-            readonly x: "0";
-            readonly y: "8";
-            readonly blur: "16";
-            readonly spread: "0";
         };
         readonly type: "boxShadow";
     };
     readonly '4': {
         readonly value: {
+            readonly x: "0px";
+            readonly y: "16px";
+            readonly blur: "24px";
+            readonly spread: "0px";
             readonly color: "#10306612";
             readonly type: "dropShadow";
-            readonly x: "0";
-            readonly y: "16";
-            readonly blur: "24";
-            readonly spread: "0";
         };
         readonly type: "boxShadow";
     };
+    readonly '5': {
+        readonly value: {
+            readonly x: "0px";
+            readonly y: "-2px";
+            readonly blur: "5px";
+            readonly spread: "0px";
+            readonly color: "#10306612";
+            readonly type: "dropShadow";
+        };
+        readonly type: "boxShadow";
+        readonly description: "boxShadow used for sticky/fixed components (only token where y is negative)";
+    };
 };
 
-declare type BoxShadowKey = keyof typeof boxShadow;
-declare type BoxShadow = {
+type BoxShadowKey = keyof typeof boxShadow;
+type BoxShadow = {
     get: (val: BoxShadowKey, fn?: (val: string) => unknown) => string;
 };
 
+declare const colors$1: {
+    readonly gradient: {
+        readonly '1': {
+            readonly value: "linear-gradient(-90deg, #F814A1 0%, #4945EE 100%)";
+            readonly type: "color";
+        };
+        readonly '2': {
+            readonly value: "linear-gradient(90deg, #B9CDFC 0%, #B9C0FF 100%)";
+            readonly type: "color";
+        };
+        readonly '3': {
+            readonly value: "linear-gradient(-90deg, #1B214F 0%, #020D25 100%)";
+            readonly type: "color";
+        };
+    };
+    readonly orange: {
+        readonly '1': {
+            readonly value: "#FFE6CF";
+            readonly type: "color";
+        };
+        readonly '2': {
+            readonly value: "#FFC187";
+            readonly type: "color";
+        };
+        readonly '3': {
+            readonly value: "#FCA144";
+            readonly type: "color";
+        };
+        readonly '4': {
+            readonly value: "#FA8002";
+            readonly type: "color";
+        };
+        readonly '5': {
+            readonly value: "#E37400";
+            readonly type: "color";
+        };
+    };
+    readonly red: {
+        readonly '1': {
+            readonly value: "#FFE7F0";
+            readonly type: "color";
+        };
+        readonly '2': {
+            readonly value: "#FFB8D1";
+            readonly type: "color";
+        };
+        readonly '3': {
+            readonly value: "#F882AC";
+            readonly type: "color";
+        };
+        readonly '4': {
+            readonly value: "#FF176B";
+            readonly type: "color";
+            readonly description: "AA compliant against white and red.1";
+        };
+        readonly '5': {
+            readonly value: "#CB205D";
+            readonly type: "color";
+            readonly description: "AA compliant against white and red.1";
+        };
+    };
+    readonly tinted: {
+        readonly '1': {
+            readonly value: "#ffffff";
+            readonly type: "color";
+        };
+        readonly '2': {
+            readonly value: "#F5F5FF";
+            readonly type: "color";
+        };
+        readonly '3': {
+            readonly value: "#E7E8FF";
+            readonly type: "color";
+        };
+        readonly '4': {
+            readonly value: "#D6D8FF";
+            readonly type: "color";
+        };
+        readonly '5': {
+            readonly value: "#B9C0FF";
+            readonly type: "color";
+            readonly description: "AA compliant against white and tinted.1";
+        };
+    };
+    readonly blue: {
+        readonly '1': {
+            readonly value: "#e7eefe";
+            readonly type: "color";
+        };
+        readonly '2': {
+            readonly value: "#b9cdfc";
+            readonly type: "color";
+        };
+        readonly '3': {
+            readonly value: "#175bf5";
+            readonly type: "color";
+            readonly description: "AA compliant against white and blue.1";
+        };
+        readonly '4': {
+            readonly value: "#1552DD";
+            readonly type: "color";
+            readonly description: "AA compliant against white and blue.1";
+        };
+        readonly '5': {
+            readonly value: "#1249C4";
+            readonly type: "color";
+            readonly description: "AA compliant against white and blue.1";
+        };
+    };
+    readonly teal: {
+        readonly '1': {
+            readonly value: "#d1faf0";
+            readonly type: "color";
+        };
+        readonly '2': {
+            readonly value: "#8ef4da";
+            readonly type: "color";
+        };
+        readonly '3': {
+            readonly value: "#1de9b6";
+            readonly type: "color";
+        };
+        readonly '4': {
+            readonly value: "#00C6A2";
+            readonly type: "color";
+        };
+        readonly '5': {
+            readonly value: "#0C7D61";
+            readonly type: "color";
+            readonly description: "AA compliant against white and teal.1";
+        };
+    };
+    readonly purple: {
+        readonly '1': {
+            readonly value: "#f3eaff";
+            readonly type: "color";
+        };
+        readonly '2': {
+            readonly value: "#dbc1ff";
+            readonly type: "color";
+        };
+        readonly '3': {
+            readonly value: "#b784ff";
+            readonly type: "color";
+        };
+        readonly '4': {
+            readonly value: "#9347ff";
+            readonly type: "color";
+        };
+        readonly '5': {
+            readonly value: "#6c28cc";
+            readonly type: "color";
+            readonly description: "AA compliant against white and purple.1";
+        };
+    };
+    readonly neutral: {
+        readonly '1': {
+            readonly value: "#ffffff";
+            readonly type: "color";
+        };
+        readonly '2': {
+            readonly value: "#F4F8FF";
+            readonly type: "color";
+        };
+        readonly '3': {
+            readonly value: "#686BB3";
+            readonly type: "color";
+            readonly description: "AA compliant against white";
+        };
+        readonly '4': {
+            readonly value: "#1B214F";
+            readonly type: "color";
+        };
+        readonly '5': {
+            readonly value: "#111530";
+            readonly type: "color";
+            readonly description: "AA compliant against white";
+        };
+    };
+    readonly transparent: {
+        readonly default: {
+            readonly '1': {
+                readonly value: "rgba(84,94,255,0)";
+                readonly type: "color";
+            };
+            readonly '2': {
+                readonly value: "rgba(84,94,255,0.06)";
+                readonly type: "color";
+            };
+            readonly '3': {
+                readonly value: "rgba(84,94,255,0.14)";
+                readonly type: "color";
+            };
+            readonly '4': {
+                readonly value: "rgba(84,94,255,0.24)";
+                readonly type: "color";
+            };
+            readonly '5': {
+                readonly value: "rgba(26,30,95,0.40)";
+                readonly type: "color";
+                readonly description: "AA compliant against white";
+            };
+        };
+        readonly alt: {
+            readonly '1': {
+                readonly value: "rgba(255,255,255,0)";
+                readonly type: "color";
+            };
+            readonly '2': {
+                readonly value: "rgba(255,255,255,0.06)";
+                readonly type: "color";
+            };
+            readonly '3': {
+                readonly value: "rgba(255,255,255,0.14)";
+                readonly type: "color";
+            };
+            readonly '4': {
+                readonly value: "rgba(255,255,255,0.24)";
+                readonly type: "color";
+            };
+            readonly '5': {
+                readonly value: "rgba(255,255,255,0.40)";
+                readonly type: "color";
+                readonly description: "AA compliant against white";
+            };
+        };
+    };
+};
+
+/**
+ * This generic type to convert an object to a dot notation string deeply while ignoring `value` properties at the end
+ * Key paths of figma tokens objects usually used are declared in the following directories:
+ *
+ * src/theme/globals/constants/*
+ * src/theme/tokens/<theme>/variables/*
+ * src/theme/tokens/components/variables/*
+ *
+ * This is needed for all the getToken callbacks to make sure that
+ * all the requested paths return a Token (with value/type/description)
+ *
+ * @example
+ * ```
+ * const avatar = {
+ *     color: {
+ *         red: {
+ *             backgroundColor: {
+ *                 value: 'test'
+ *             }
+ *         }
+ *     },
+ *     size: {
+ *         1: {
+ *             value: 'test'
+ *         }
+ *     }
+ * } as const;
+ *
+ * type AvatarKeys = DotKeys<typeof avatar>;
+ * ```
+ *
+ * the above produces
+ * ```
+ * type AvatarKeys = "color.red.backgroundColor" | "size.1"
+ * ```
+ */
+type DotKeys<T> = T extends Record<string, unknown> ? {
+    [K in keyof T & string]: T[K] extends {
+        value: unknown;
+    } ? `${K}` : `${K}${DotKeys<T[K]> extends infer S ? (S extends string ? `.${S}` : '') : ''}`;
+}[keyof T & string] | (keyof T extends number ? `${keyof T}` : never) : never;
+
+type ColorsKey = DotKeys<typeof colors$1>;
+type Colors = {
+    get: (val: ColorsKey, fn?: (val: string) => unknown) => string;
+};
+
 declare const opacity: {
     readonly '0': {
         readonly value: "0";
@@ -560,106 +869,118 @@ declare const opacity: {
     };
 };
 
-declare type OpacityKey = keyof typeof opacity;
-declare type Opacity = {
+type OpacityKey = keyof typeof opacity;
+type Opacity = {
     get: (val: OpacityKey, fn?: (val: string) => unknown) => string;
 };
 
 declare const sizing: {
     readonly '0': {
-        readonly value: "0";
+        readonly value: "0px";
         readonly type: "sizing";
     };
     readonly '1': {
-        readonly value: "4";
+        readonly value: "4px";
         readonly type: "sizing";
     };
     readonly '2': {
-        readonly value: "8";
+        readonly value: "8px";
         readonly type: "sizing";
     };
     readonly '3': {
-        readonly value: "12";
+        readonly value: "12px";
         readonly type: "sizing";
     };
     readonly '4': {
-        readonly value: "16";
+        readonly value: "16px";
         readonly type: "sizing";
     };
     readonly '5': {
-        readonly value: "20";
+        readonly value: "20px";
         readonly type: "sizing";
     };
     readonly '6': {
-        readonly value: "24";
+        readonly value: "24px";
         readonly type: "sizing";
     };
     readonly '7': {
-        readonly value: "28";
+        readonly value: "28px";
         readonly type: "sizing";
     };
     readonly '8': {
-        readonly value: "32";
+        readonly value: "32px";
         readonly type: "sizing";
     };
     readonly '9': {
-        readonly value: "36";
+        readonly value: "36px";
         readonly type: "sizing";
     };
     readonly '10': {
-        readonly value: "40";
+        readonly value: "40px";
         readonly type: "sizing";
     };
     readonly '11': {
-        readonly value: "44";
+        readonly value: "44px";
         readonly type: "sizing";
     };
     readonly '12': {
-        readonly value: "48";
+        readonly value: "48px";
         readonly type: "sizing";
     };
     readonly '13': {
-        readonly value: "52";
+        readonly value: "52px";
         readonly type: "sizing";
     };
     readonly '14': {
-        readonly value: "56";
+        readonly value: "56px";
         readonly type: "sizing";
     };
     readonly '15': {
-        readonly value: "64";
+        readonly value: "64px";
         readonly type: "sizing";
     };
     readonly '16': {
-        readonly value: "72";
+        readonly value: "72px";
         readonly type: "sizing";
     };
     readonly '17': {
-        readonly value: "80";
+        readonly value: "80px";
         readonly type: "sizing";
     };
     readonly '18': {
-        readonly value: "88";
+        readonly value: "88px";
         readonly type: "sizing";
     };
     readonly '19': {
-        readonly value: "92";
+        readonly value: "92px";
+        readonly type: "sizing";
+    };
+    readonly '20': {
+        readonly value: "100px";
+        readonly type: "sizing";
+    };
+    readonly '21': {
+        readonly value: "120px";
+        readonly type: "sizing";
+    };
+    readonly '22': {
+        readonly value: "140px";
         readonly type: "sizing";
     };
 };
 
-declare type SizingKey = keyof typeof sizing;
-declare type Sizing = {
+type SizingKey = keyof typeof sizing;
+type Sizing = {
     get: (val: SizingKey, fn?: (val: string) => unknown) => string;
 };
 
-declare type NeutralPaletteConfig = {
+type NeutralPaletteConfig = {
     light?: string;
     dark?: string;
     grey?: string;
     transparent?: string;
 };
-declare type GradientPaletteConfig = {
+type GradientPaletteConfig = {
     primary?: string;
     secondary?: string;
     tertiary?: string;
@@ -667,45 +988,1025 @@ declare type GradientPaletteConfig = {
     inverted?: string;
 };
 
-declare type SemanticBackDrop = {
-    get: (val: string) => string;
+declare const colors: {
+    readonly backgroundColor: {
+        readonly default: {
+            readonly value: "{colors.neutral.1}";
+            readonly type: "color";
+            readonly description: "light backgroundColor variant";
+        };
+        readonly transparent: {
+            readonly value: "{colors.transparent.default.1}";
+            readonly type: "color";
+            readonly description: "transparent backgroundColor variant";
+        };
+        readonly tinted: {
+            readonly value: "{colors.neutral.2}";
+            readonly type: "color";
+            readonly description: "tinted backgroundColor. Use as backgroundColor in pages";
+        };
+        readonly inverted: {
+            readonly value: "{colors.neutral.4}";
+            readonly type: "color";
+            readonly description: "invertedBackgroundColor variant";
+        };
+        readonly invertedAlt: {
+            readonly value: "{colors.neutral.5}";
+            readonly type: "color";
+            readonly description: "invertedBackgroundColor, dark variant";
+        };
+    };
+    readonly backdrop: {
+        readonly transparent: {
+            readonly value: "{colors.transparent.default.1}";
+            readonly type: "color";
+            readonly description: "backdrop shade, transparent variant";
+        };
+        readonly dark: {
+            readonly value: "{colors.transparent.default.5}";
+            readonly type: "color";
+            readonly description: "backdrop shade, dark variant";
+        };
+    };
+    readonly palette: {
+        readonly error: {
+            readonly lightest: {
+                readonly type: "color";
+                readonly value: "{colors.red.1}";
+            };
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.red.2}";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.red.3}";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.red.4}";
+            };
+            readonly darkest: {
+                readonly type: "color";
+                readonly value: "{colors.red.5}";
+            };
+        };
+        readonly warning: {
+            readonly lightest: {
+                readonly type: "color";
+                readonly value: "{colors.orange.1}";
+            };
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.orange.2}";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.orange.3}";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.orange.4}";
+            };
+            readonly darkest: {
+                readonly type: "color";
+                readonly value: "{colors.orange.5}";
+            };
+        };
+        readonly primary: {
+            readonly lightest: {
+                readonly type: "color";
+                readonly value: "{colors.blue.1}";
+            };
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.blue.2}";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.blue.3}";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.blue.4}";
+            };
+            readonly darkest: {
+                readonly type: "color";
+                readonly value: "{colors.blue.5}";
+                readonly description: "Used to indicate active state";
+            };
+        };
+        readonly secondary: {
+            readonly lightest: {
+                readonly type: "color";
+                readonly value: "{colors.tinted.1}";
+            };
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.tinted.2}";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.tinted.3}";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.tinted.4}";
+            };
+            readonly darkest: {
+                readonly type: "color";
+                readonly value: "{colors.tinted.5}";
+            };
+        };
+        readonly inverted: {
+            readonly lightest: {
+                readonly type: "color";
+                readonly value: "{colors.teal.1}";
+            };
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.teal.2}";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.teal.3}";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.teal.4}";
+            };
+            readonly darkest: {
+                readonly type: "color";
+                readonly value: "{colors.teal.5}";
+            };
+        };
+        readonly tertiary: {
+            readonly lightest: {
+                readonly value: "{colors.transparent.default.1}";
+                readonly type: "color";
+            };
+            readonly light: {
+                readonly value: "{colors.transparent.default.2}";
+                readonly type: "color";
+            };
+            readonly main: {
+                readonly value: "{colors.transparent.default.3}";
+                readonly type: "color";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.transparent.default.4}";
+            };
+            readonly darkest: {
+                readonly type: "color";
+                readonly value: "{colors.transparent.default.5}";
+            };
+        };
+        readonly tertiaryAlt: {
+            readonly lightest: {
+                readonly value: "{colors.transparent.alt.1}";
+                readonly type: "color";
+            };
+            readonly light: {
+                readonly value: "{colors.transparent.alt.2}";
+                readonly type: "color";
+            };
+            readonly main: {
+                readonly value: "{colors.transparent.alt.3}";
+                readonly type: "color";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.transparent.alt.4}";
+            };
+            readonly darkest: {
+                readonly type: "color";
+                readonly value: "{colors.transparent.alt.5}";
+            };
+        };
+        readonly upsell: {
+            readonly lightest: {
+                readonly value: "{colors.purple.1}";
+                readonly type: "color";
+            };
+            readonly light: {
+                readonly value: "{colors.purple.2}";
+                readonly type: "color";
+            };
+            readonly main: {
+                readonly value: "{colors.purple.3}";
+                readonly type: "color";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.purple.4}";
+            };
+            readonly darkest: {
+                readonly type: "color";
+                readonly value: "{colors.purple.5}";
+            };
+        };
+    };
+    readonly textColor: {
+        readonly default: {
+            readonly primary: {
+                readonly value: "{colors.neutral.4}";
+                readonly type: "color";
+                readonly description: "Sets color for primary text";
+            };
+            readonly secondary: {
+                readonly value: "{colors.neutral.3}";
+                readonly type: "color";
+                readonly description: "Sets color for secondary text";
+            };
+            readonly error: {
+                readonly value: "{colors.red.5}";
+                readonly type: "color";
+                readonly description: "Sets color for error text. AA compliant against white and error.lightest";
+            };
+            readonly active: {
+                readonly value: "{colors.blue.4}";
+                readonly type: "color";
+                readonly description: "Sets color for active text";
+            };
+            readonly visited: {
+                readonly value: "{colors.purple.5}";
+                readonly type: "color";
+                readonly description: "Sets color for visited text (link)";
+            };
+        };
+        readonly inverted: {
+            readonly visited: {
+                readonly value: "{colors.purple.2}";
+                readonly type: "color";
+                readonly description: "Sets color for visited text (link)";
+            };
+            readonly primary: {
+                readonly value: "{colors.neutral.1}";
+                readonly type: "color";
+                readonly description: "Sets color for primary text";
+            };
+            readonly secondary: {
+                readonly value: "{colors.blue.2}";
+                readonly type: "color";
+                readonly description: "Sets color for secondary text";
+            };
+            readonly error: {
+                readonly value: "{colors.red.2}";
+                readonly type: "color";
+                readonly description: "Sets color for error text";
+            };
+            readonly active: {
+                readonly value: "{colors.teal.3}";
+                readonly type: "color";
+                readonly description: "Sets color for active text";
+            };
+        };
+    };
+    readonly borderColor: {
+        readonly decorative: {
+            readonly transparent: {
+                readonly value: "{colors.transparent.default.1}";
+                readonly type: "color";
+                readonly description: "transparent borderColor variant";
+            };
+            readonly muted: {
+                readonly value: "{colors.tinted.3}";
+                readonly type: "color";
+                readonly description: "Default decorative borderColor";
+            };
+        };
+        readonly interactive: {
+            readonly default: {
+                readonly value: "{colors.blue.2}";
+                readonly type: "color";
+                readonly description: "Used in default component state";
+            };
+            readonly active: {
+                readonly value: "{colors.blue.3}";
+                readonly type: "color";
+                readonly description: "Used in active component state";
+            };
+            readonly error: {
+                readonly value: "{colors.red.3}";
+                readonly type: "color";
+                readonly description: "Used in error component state";
+            };
+            readonly focused: {
+                readonly value: "{colors.purple.4}";
+                readonly type: "color";
+                readonly description: "Used in focused component state";
+            };
+        };
+    };
+};
+
+type SemanticColorsKey = DotKeys<typeof colors>;
+type SemanticColors = {
+    get: (val: SemanticColorsKey) => string;
+};
+
+declare const disabledState: {
+    readonly default: {
+        readonly value: "{opacity.4}";
+        readonly type: "opacity";
+    };
 };
 
-declare type SemanticBackgroundColor = {
-    get: (val: string) => string;
+type SemanticDisabledState = {
+    get: (val: DotKeys<typeof disabledState>) => string;
 };
 
-declare type SemanticBorderColor = {
-    get: (val: string) => string;
+declare const icon: {
+    readonly size: {
+        readonly '1': {
+            readonly value: "{sizing.3}";
+            readonly type: "sizing";
+            readonly description: "Sets extra small icon size";
+        };
+        readonly '2': {
+            readonly value: "{sizing.4}";
+            readonly type: "sizing";
+            readonly description: "Sets small icon size";
+        };
+        readonly '3': {
+            readonly value: "{sizing.5}";
+            readonly type: "sizing";
+            readonly description: "Sets medium icon size";
+        };
+        readonly '4': {
+            readonly value: "{sizing.6}";
+            readonly type: "sizing";
+            readonly description: "Sets lage icon size";
+        };
+    };
 };
 
-declare type SemanticDisabledState = {
-    get: (val: string) => string;
+type SemanticIcon = {
+    get: (val: DotKeys<typeof icon>) => string;
+};
+
+declare const palette: {
+    readonly systemic: {
+        readonly error: {
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.red.50}";
+                readonly description: "Used to indicate hover state";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.red.100}";
+                readonly description: "Used to indicate inactive state";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.red.550}";
+                readonly description: "Used to indicate active state";
+            };
+        };
+        readonly success: {
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.teal.50}";
+                readonly description: "Used to indicate hover state";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.teal.100}";
+                readonly description: "Used to indicate inactive state";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.teal.650}";
+                readonly description: "Used to indicate active state";
+            };
+        };
+        readonly warning: {
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.orange.50}";
+                readonly description: "Used to indicate hover state";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.orange.100}";
+                readonly description: "Used to indicate inactive state";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.orange.650}";
+                readonly description: "Used to indicate active state";
+            };
+        };
+        readonly transparent: {
+            readonly light: {
+                readonly value: "rgba(23,91,245,0)";
+                readonly type: "color";
+                readonly description: "Used to indicate inactive state";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "#175bf517";
+                readonly description: "Used to indicate hover state";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "rgba(23, 91, 245, 0.18)";
+                readonly description: "Used to indicate active state";
+            };
+        };
+        readonly primary: {
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.blue.400}";
+                readonly description: "used to indicate hover state";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.blue.500}";
+                readonly description: "Used to indicate inactive state";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.blue.550}";
+                readonly description: "Used to indicate active state";
+            };
+        };
+        readonly secondary: {
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.lightPurple.100}";
+                readonly description: "Used to indicate hover state";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.lightPurple.200}";
+                readonly description: "Used to indicate inactive state";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.lightPurple.300}";
+                readonly description: "Used to indicate active state";
+            };
+        };
+        readonly inverted: {
+            readonly light: {
+                readonly type: "color";
+                readonly value: "{colors.teal.400}";
+                readonly description: "Used to indicate inactive";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.teal.300}";
+                readonly description: "Used to indicate hover state";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.teal.500}";
+                readonly description: "Used to indicate active state";
+            };
+        };
+        readonly tertiary: {
+            readonly light: {
+                readonly value: "{colors.neutral.light}";
+                readonly type: "color";
+                readonly description: "Used to indicate inactive state";
+            };
+            readonly main: {
+                readonly type: "color";
+                readonly value: "{colors.blue.50}";
+                readonly description: "Used to indicate hover state";
+            };
+            readonly dark: {
+                readonly type: "color";
+                readonly value: "{colors.blue.100}";
+                readonly description: "Used to indicate active state";
+            };
+        };
+    };
+    readonly accents: {
+        readonly blue: {
+            readonly main: {
+                readonly value: "{colors.blue.100}";
+                readonly type: "color";
+            };
+            readonly contrast: {
+                readonly value: "{colors.blue.550}";
+                readonly type: "color";
+                readonly description: "AA compliant for small text on 'Light' and 'Main' values of same color ";
+            };
+        };
+        readonly darkBlue: {
+            readonly main: {
+                readonly value: "{colors.darkBlue.100}";
+                readonly type: "color";
+            };
+            readonly contrast: {
+                readonly value: "{colors.darkBlue.550}";
+                readonly type: "color";
+                readonly description: "AA compliant for small text on 'Light' and 'Main' values of same color ";
+            };
+        };
+        readonly purple: {
+            readonly main: {
+                readonly value: "{colors.purple.100}";
+                readonly type: "color";
+            };
+            readonly contrast: {
+                readonly value: "{colors.purple.550}";
+                readonly type: "color";
+                readonly description: "AA compliant for small text on 'Light' and 'Main' values of same color ";
+            };
+        };
+        readonly magenta: {
+            readonly main: {
+                readonly value: "{colors.magenta.100}";
+                readonly type: "color";
+            };
+            readonly contrast: {
+                readonly value: "{colors.magenta.650}";
+                readonly type: "color";
+                readonly description: "AA compliant for small text on 'Light' and 'Main' values of same color ";
+            };
+        };
+        readonly orange: {
+            readonly main: {
+                readonly value: "{colors.orange.100}";
+                readonly type: "color";
+            };
+            readonly contrast: {
+                readonly value: "{colors.orange.700}";
+                readonly type: "color";
+                readonly description: "AA compliant for small text on 'Light' and 'Main' values of same color ";
+            };
+        };
+        readonly teal: {
+            readonly main: {
+                readonly value: "{colors.teal.150}";
+                readonly type: "color";
+            };
+            readonly contrast: {
+                readonly value: "{colors.teal.750}";
+                readonly type: "color";
+                readonly description: "AA compliant for small text on 'Light' and 'Main' values of same color ";
+            };
+        };
+        readonly red: {
+            readonly main: {
+                readonly value: "{colors.red.100}";
+                readonly type: "color";
+            };
+            readonly contrast: {
+                readonly value: "{colors.red.650}";
+                readonly type: "color";
+                readonly description: "AA compliant for small text on 'Light' and 'Main' values of same color ";
+            };
+        };
+        readonly lightPurple: {
+            readonly main: {
+                readonly value: "{colors.lightPurple.200}";
+                readonly type: "color";
+            };
+            readonly contrast: {
+                readonly value: "{colors.lightPurple.750}";
+                readonly type: "color";
+                readonly description: "AA compliant for small text on 'Light' and 'Main' values of same color ";
+            };
+        };
+    };
 };
 
-declare type SemanticPalette = {
-    get: (val: string) => string;
+type SemanticPalette = {
+    get: (val: DotKeys<typeof palette>) => string;
 };
 
-declare type SemanticTextColor = {
-    get: (val: string) => string;
+declare const state: {
+    readonly hover: {
+        readonly '1': {
+            readonly value: "{sizing.6}";
+            readonly type: "sizing";
+            readonly description: "Sets extra small hover size";
+        };
+        readonly '2': {
+            readonly value: "{sizing.8}";
+            readonly type: "sizing";
+            readonly description: "Sets small hover size";
+        };
+        readonly '3': {
+            readonly value: "{sizing.9}";
+            readonly type: "sizing";
+            readonly description: "Sets medium hover size";
+        };
+        readonly '4': {
+            readonly value: "{sizing.10}";
+            readonly type: "sizing";
+            readonly description: "Sets lage hover size";
+        };
+    };
+    readonly backgroundColor: {
+        readonly hover: {
+            readonly value: "{colors.transparent.default.2}";
+            readonly type: "color";
+            readonly description: "Sets color for hover state";
+        };
+    };
+    readonly borderRadius: {
+        readonly hover: {
+            readonly value: "{borderRadius.7}";
+            readonly type: "borderRadius";
+            readonly description: "Sets border radius for circular hover shape";
+        };
+    };
 };
 
-declare type TextColorTypes = 'primary' | 'secondary' | 'light';
-declare type ColorScheme = 'semantic' | 'dark';
-declare type SemanticTheme = {
-    backdrop: SemanticBackDrop;
-    backgroundColor: SemanticBackgroundColor;
-    borderColor: SemanticBorderColor;
-    disabledState: SemanticDisabledState;
+type SemanticState = {
+    get: (val: DotKeys<typeof state>) => string;
+};
+
+declare const typography: {
+    readonly normal: {
+        readonly headline01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.10}";
+                readonly fontSize: "{fontSize.10}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Largest text on the screen, reserved for the page title. Can only appear once";
+        };
+        readonly headline02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.9}";
+                readonly fontSize: "{fontSize.9}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 2, reserved for important copy that is not a title (e.g. section titles)";
+        };
+        readonly headline03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.8}";
+                readonly fontSize: "{fontSize.8}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 3";
+        };
+        readonly headline04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.7}";
+                readonly fontSize: "{fontSize.6}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 4";
+        };
+        readonly headline05: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.6}";
+                readonly fontSize: "{fontSize.5}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 5";
+        };
+        readonly title01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Large variant";
+        };
+        readonly title02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Medium variant";
+        };
+        readonly title03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Small variant";
+        };
+        readonly label01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Large variant";
+        };
+        readonly label02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Medium variant";
+        };
+        readonly label03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Small variant";
+        };
+        readonly label04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly fontSize: "{fontSize.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Resrved for short to medium, medium emphasis text (less than titles) or text within components. Extra small variant";
+        };
+        readonly body01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Large variant";
+        };
+        readonly body02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Medium variant";
+        };
+        readonly body03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Small variant";
+        };
+        readonly body04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly fontSize: "{fontSize.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for text within components. Extra small variant";
+        };
+    };
+    readonly mono: {
+        readonly headline01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.10}";
+                readonly fontSize: "{fontSize.10}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Largest text on the screen, reserved for the page title. Can only appear once";
+        };
+        readonly body04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly fontSize: "{fontSize.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for text within components. Extra small variant";
+        };
+        readonly headline02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.9}";
+                readonly fontSize: "{fontSize.9}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 2, reserved for important copy that is not a title (e.g. section titles)";
+        };
+        readonly headline03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.8}";
+                readonly fontSize: "{fontSize.8}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 3";
+        };
+        readonly headline04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.7}";
+                readonly fontSize: "{fontSize.6}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 4";
+        };
+        readonly headline05: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.6}";
+                readonly fontSize: "{fontSize.5}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Headline variant 5";
+        };
+        readonly title01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Large variant";
+        };
+        readonly title02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Medium variant";
+        };
+        readonly title03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.bold}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, reserved for short, medium emphasis text or text within components. Small variant";
+        };
+        readonly label01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Large variant";
+        };
+        readonly label02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Medium variant";
+        };
+        readonly label03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Smaller than headline, resrved for short to medium, medium emphasis text (less than titles) or text within components. Small variant";
+        };
+        readonly label04: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly fontSize: "{fontSize.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Resrved for short to medium, medium emphasis text (less than titles) or text within components. Extra small variant";
+        };
+        readonly body01: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly fontSize: "{fontSize.4}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Large variant";
+        };
+        readonly body02: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly fontSize: "{fontSize.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Medium variant";
+        };
+        readonly body03: {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.robotoMono}";
+                readonly fontWeight: "{fontWeight.regular}";
+                readonly lineHeight: "{lineHeight.2}";
+                readonly fontSize: "{fontSize.2}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Used for longer text string of regular emphasis or text within components. Small variant";
+        };
+    };
+};
+
+type TypographyKeys = 'fontSize' | 'fontWeight' | 'fontFamily' | 'lineHeight' | 'letterSpacing' | 'textCase' | 'textDecoration';
+type SemanticTypographyKey = DotKeys<typeof typography>;
+type TypographyObject = Record<TypographyKeys, string>;
+type SemanticTypography = {
+    get: (val: SemanticTypographyKey) => TypographyObject;
+};
+
+type TextColorTypes = 'primary' | 'secondary' | 'light';
+type ColorScheme = 'semantic' | 'dark';
+type SemanticTheme = {
+    /** @TODO remove palette when all components are revisited for v5 */
     palette: SemanticPalette;
-    textColor: SemanticTextColor;
+    colors: SemanticColors;
+    disabledState: SemanticDisabledState;
+    icon: SemanticIcon;
+    state: SemanticState;
+    typography: SemanticTypography;
 };
 /** Will add more themes in the future (e.g.: DarkTheme) */
-declare type Tokens = SemanticTheme;
-declare type Theme = {
+type Tokens = SemanticTheme;
+type Theme = {
     globals: {
-        colors: Palette;
+        colors: Colors;
+        oldColors: Palette;
         typography: Typography;
         spacing: Spacing;
         elevation: Elevation;
@@ -757,13 +2058,13 @@ declare const MAX_SHADE = 950;
  * Each color has again the above variations (shades)
  **/
 declare const mainTypes: readonly ["primary", "secondary", "success", "error", "warning", "info", "light", "link"];
-declare type FlatPalette = Record<typeof flatColors[number], GeneratedColorShades>;
-declare type PalePalette = Record<typeof paleColors[number], string>;
-declare type GeneratedColorShades = Record<typeof colorShades[number], string>;
+type FlatPalette = Record<(typeof flatColors)[number], GeneratedColorShades>;
+type PalePalette = Record<(typeof paleColors)[number], string>;
+type GeneratedColorShades = Record<(typeof colorShades)[number], string>;
 /**
  * Palette is end output of what is produced and exported to the client projects
  **/
-declare type Palette = {
+type Palette = {
     flat: FlatPalette;
     neutral: NeutralPaletteConfig;
     gradient: GradientPaletteConfig;
@@ -776,25 +2077,25 @@ declare type Palette = {
     pale: PalePalette;
     white: string;
     black: string;
-} & Record<typeof mainTypes[number], GeneratedColorShades>;
-declare type formFieldStyles = 'filled' | 'outlined' | 'elevated';
-declare type GetColor = {
-    (color: typeof flatColors[number], variant: typeof colorShades[number]): string;
-    (color: typeof flatColors[number], variant: typeof colorShades[number], scope: 'flat'): string;
-    (color: TextColorTypes, variant: typeof colorShades[number], scope: 'text'): string;
-    (color: typeof mainTypes[number], variant: typeof colorShades[number], scope: 'normal'): string;
-    (color: typeof paleColors[number], variant: null, scope: 'pale'): string;
+} & Record<(typeof mainTypes)[number], GeneratedColorShades>;
+type formFieldStyles = 'filled' | 'outlined' | 'elevated';
+type GetColor = {
+    (color: (typeof flatColors)[number], variant: (typeof colorShades)[number]): string;
+    (color: (typeof flatColors)[number], variant: (typeof colorShades)[number], scope: 'flat'): string;
+    (color: TextColorTypes, variant: (typeof colorShades)[number], scope: 'text'): string;
+    (color: (typeof mainTypes)[number], variant: (typeof colorShades)[number], scope: 'normal'): string;
+    (color: (typeof paleColors)[number], variant: null, scope: 'pale'): string;
 };
 declare const getColor: (palette: Palette) => GetColor;
 /**
  * this function picks either white or black color based on the background that is passed
  * swatches are calculated based on accessibility by getAAColor function and splited to those two colors
  **/
-declare type GetAAColorFromSwatches = {
-    (color: typeof flatColors[number], variant: typeof colorShades[number]): string;
+type GetAAColorFromSwatches = {
+    (color: (typeof flatColors)[number], variant: (typeof colorShades)[number]): string;
 };
 declare const getAAColorFromSwatches: (palette: Palette) => GetAAColorFromSwatches;
-declare type GetAAColor = {
+type GetAAColor = {
     (color: string): string;
 };
 declare const getAAColor: (palette: Palette) => GetAAColor;
@@ -844,32 +2145,27 @@ declare namespace palette_d {
   };
 }
 
-declare type AcceptedColorComponentTypes = typeof mainTypes[number];
+type AcceptedColorComponentTypes = (typeof mainTypes)[number];
 /**
  * The type of the calculateActualColorFromComponentProp that will be used for the components
  * translation from string
  * */
-declare type ColorShapeFromComponent = {
-    color: typeof flatColors[number];
-    shade: typeof colorShades[number];
+type ColorShapeFromComponent = {
+    color: (typeof flatColors)[number];
+    shade: (typeof colorShades)[number];
 };
 
-/** A generic type for native events */
-declare type EventProps = {
-    onClick?: () => void;
-    onBlur?: () => void;
-};
-declare type CommonButtonProps = Partial<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'css' | 'onBlur' | 'onClick' | 'type' | 'disabled'>>;
-declare type DivProps = Partial<Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'css'>>;
+type CommonButtonProps = Partial<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'css' | 'onBlur' | 'onClick' | 'type' | 'disabled'>>;
+type DivProps = Partial<Omit<React$1.HTMLProps<HTMLDivElement>, 'size' | 'css'>>;
 
-declare type AvatarColors = 'red' | 'magenta' | 'purple' | 'blue' | 'darkBlue' | 'teal' | 'orange';
-declare type AvatarSizes = 1 | 2 | 3 | 4 | 5 | 6;
-declare type AvatarProps = {
-    /** The size of the avatar
+type AvatarColors = 'blue' | 'teal' | 'purple' | 'red' | 'orange';
+type AvatarSizes = 1 | 2 | 3 | 4 | 5 | 6;
+type AvatarProps = {
+    /** The size of the Avatar
      *  @default 1
      * */
     size?: AvatarSizes;
-    /** the color of the button based on our colors eg. red-500
+    /** The color of the Avatar
      *  @default 'blue'
      * */
     color?: AvatarColors;
@@ -883,9 +2179,9 @@ declare type AvatarProps = {
     dataTestPrefixId?: string;
 } & DivProps;
 
-declare const Avatar: React__default.ForwardRefExoticComponent<Pick<AvatarProps, "children" | "onChange" | "color" | "value" | "type" | "download" | "size" | "name" | "onClick" | "dataTestPrefixId" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "default" | "className" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "content" | "height" | "width" | "start" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "useMap" | "wmode" | "wrap"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const Avatar: React__default.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare type AvatarStackProps = {
+type AvatarStackProps = {
     /** the maximum number of avatars to be displayed **/
     maxAvatars?: number;
     /** The size of the extra avatar, if any **/
@@ -894,78 +2190,116 @@ declare type AvatarStackProps = {
     color?: AvatarColors;
 };
 
-declare const AvatarStack: React__default.ForwardRefExoticComponent<Pick<AvatarStackProps & TestProps$1 & Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "size" | "css">>, "children" | "onChange" | "value" | "type" | "download" | "name" | "onClick" | keyof TestProps$1 | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "default" | "className" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "content" | "height" | "width" | "start" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "useMap" | "wmode" | "wrap" | keyof AvatarStackProps> & React__default.RefAttributes<HTMLDivElement>>;
+declare const AvatarStack: React__default.ForwardRefExoticComponent<Omit<AvatarStackProps & TestProps$1 & Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "size" | "css">>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare type BreadcrumbItemData = {
-    /** Defines the path used for a link breadcrumb item*/
-    to?: string;
-    /** Defines the label used for a link breadcrumb item */
-    label: string;
-};
-
-declare type BreadcrumbProps = {
-    /** Defines the data for constructing the related breadcrumb items */
-    data?: BreadcrumbItemData[];
-};
-declare const Breadcrumb: React.FC<BreadcrumbProps>;
-
-declare type ClickEvent = MouseEvent$1<HTMLButtonElement> | undefined;
-
-declare type DeepPartial<T> = T extends {
+type DeepPartial<T> = T extends {
     [key: string]: unknown;
 } ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
-declare type TestId = string;
-declare type TestProps = {
+type ComponentSizes = 'compact' | 'normal';
+type TestId = string;
+type TestProps = {
     dataTestId?: TestId;
     dataTestPrefixId?: string;
 };
 
-declare const buttonSizes: readonly ["lg", "md", "sm"];
+type BreadcrumbItem = {
+    /** Defines the label used for a link breadcrumb item */
+    label: string;
+} & Pick<LinkProps, 'component' | 'href'>;
+
+declare const Breadcrumb: React$1.ForwardRefExoticComponent<{
+    items?: BreadcrumbItem[];
+    backTo?: BreadcrumbItem;
+} & TestProps & React$1.RefAttributes<HTMLOListElement>>;
+
+type ClickEvent = MouseEvent<HTMLButtonElement> | undefined;
 
-declare type EventButtonProps = {
+type EventButtonProps = {
     onClick?: (event: ClickEvent) => void;
     onBlur?: () => void;
 };
-declare type ButtonBaseProps = {
-    /** Type indicating the type of the button */
-    type?: AcceptedColorComponentTypes;
-    /** the color of the button based on our colors eg. red-500 */
-    color?: string;
-    /** This property define the size of the button. Defaults to 'md' */
-    size?: typeof buttonSizes[number];
+type ButtonBaseProps = {
+    /** The type of the button */
+    type?: ButtonTypes$1;
+    /** The size of button */
+    size?: ComponentSizes;
     /** This property will make the button fit to its parent width. Defaults to false */
     isBlock?: boolean;
-    /** Property indicating if the component is filled with a color based on the type */
-    isFilled?: boolean;
-    /** Property indicating if the component is async and loading */
+    /** Property indicating if the component is loading */
     isLoading?: boolean;
-    /** Property indicating if the component is transparent with a color based on the type */
-    isTransparent?: boolean;
-    /** An optional boolean to show if the button is icon */
-    isIconButton?: boolean;
-    /** An optional icon to put on the right of the button */
-    iconRight?: React__default.Component | JSX.Element | null;
-    /** An optional icon to put on the left of the button */
-    iconLeft?: React__default.Component | JSX.Element | null;
     /** Define if the button is in disabled state */
     isDisabled?: boolean;
+    /** Define if the button is an icon button */
+    isIconButton?: boolean;
+    /** Define the radius type of the icon button */
+    shape?: IconButtonShape$1;
     /** Defines the button type */
-    buttonType?: 'submit' | 'reset' | 'button';
+    htmlType?: 'submit' | 'reset' | 'button';
     /** Sx prop to override specific properties */
     sx?: {
         container?: CSSObject;
     };
 } & TestProps & EventButtonProps & CommonButtonProps;
 
-declare type onClickProp = {
-    onClick: ClickHandler;
+type AcceptedIconNames = 'account' | 'actions' | 'add' | 'alert' | 'analytics' | 'analyticsVideos' | 'ancient' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowToLeft' | 'arrowToRight' | 'artist' | 'asset' | 'assetMatching' | 'auto' | 'broadcast' | 'calendarEmpty' | 'calendarFilled' | 'catalog' | 'channel' | 'catalogOverview' | 'catalogFiles' | 'chatBubble' | 'check' | 'checkedList' | 'checkmark' | 'chevronExtraSmallDown' | 'chevronExtraSmallLeft' | 'chevronExtraSmallRight' | 'chevronExtraSmallUp' | 'chevronLargeDown' | 'chevronLargeLeft' | 'chevronLargeRight' | 'chevronLargeUp' | 'chevronSmallDown' | 'chevronSmallLeft' | 'chevronSmallRight' | 'chevronSmallUp' | 'claimList' | 'clock' | 'close' | 'closeTag' | 'cmsProcess' | 'composition' | 'compositionV2' | 'confirmedMatches' | 'conflicts' | 'copy' | 'concert' | 'dashboard' | 'dataset' | 'delete' | 'delivery' | 'details' | 'digitalUse' | 'distribution' | 'dotsVertical' | 'download' | 'duplicate' | 'duplicate2' | 'earnings' | 'earnings2' | 'edit' | 'entities' | 'error' | 'expenses' | 'externalLink' | 'externalLinkV2' | 'fatArrowDown' | 'fatArrowLeft' | 'fatArrowRight' | 'fatArrowUp' | 'file' | 'financialChart' | 'generatedReports' | 'genericFile' | 'genericOrdering' | 'globalItem' | 'heartFill' | 'heartStroke' | 'help' | 'hourglass' | 'income' | 'infoFilled' | 'info' | 'issues' | 'keyword' | 'legalFiles' | 'licence' | 'licencedVideo' | 'linked' | 'lock' | 'mail' | 'manual' | 'menu' | 'microphone' | 'minus' | 'moreOptionsHorizontal' | 'moreOptionsVertical' | 'musicNote' | 'myEarnings' | 'notifications' | 'notifications2' | 'oneWay' | 'others' | 'ownershipValidation' | 'pageFirst' | 'pageLast' | 'percentage' | 'play' | 'plus' | 'policies' | 'process' | 'processManagement' | 'publicPerformance' | 'publisher' | 'recording' | 'recordLabel' | 'recordLabelV2' | 'referenceFile' | 'relations' | 'restore' | 'result' | 'royaltyShares' | 'search' | 'searchMusic' | 'searchThunder' | 'settings' | 'sight' | 'sortAscending' | 'sortDescending' | 'stamp' | 'statements' | 'success' | 'television' | 'thunder' | 'ticTacToeArrow' | 'timeOut' | 'training' | 'triangleDown' | 'triangleLeft' | 'triangleRight' | 'triangleUp' | 'trophy' | 'TVCinema' | 'TVRadio' | 'update' | 'upload' | 'user' | 'userAvatar' | 'users' | 'users2' | 'videoConfirmation' | 'view' | 'warning' | 'works' | 'writer' | 'youtube' | 'refresh' | 'star' | 'pause' | 'resume' | 'restart' | 'entity' | 'playCount' | 'processedLogs' | 'proposed' | 'unpaired' | 'unpairedV2' | 'clockOutlined' | 'userCheck';
+
+type IconButtonShape = 'circle' | 'square';
+type IconButtonProps = Omit<ButtonBaseProps$1, 'type' | 'isBlock' | 'isLoading' | 'isIconButton'> & {
+    /** This property defines the type of the IconButton */
+    type?: PrimitiveButtonTypes;
+    /** This property defines witch icon to use */
+    name: AcceptedIconNames;
+    /** This property defines the shape of the IconButton */
+    shape?: IconButtonShape;
 };
-declare type ButtonProps = Omit<ButtonBaseProps, 'onClick'> & TestProps$1 & onClickProp & CommonButtonProps$1;
-declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonBaseProps, "onClick"> & TestProps$1 & onClickProp & Partial<Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size" | "onClick" | "css" | "onBlur" | "disabled">> & React__default.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React__default.ForwardRefExoticComponent<Omit<ButtonBaseProps$1, "type" | "isBlock" | "isLoading" | "isIconButton"> & {
+    /** This property defines the type of the IconButton */
+    type?: PrimitiveButtonTypes;
+    /** This property defines witch icon to use */
+    name: AcceptedIconNames;
+    /** This property defines the shape of the IconButton */
+    shape?: IconButtonShape;
+} & React__default.RefAttributes<HTMLButtonElement>>;
+
+/** All button types. Used by Button component */
+type ButtonTypes = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'inverted' | 'invertedAlt';
 
-declare type CardProps = {
+type ButtonProps = ButtonBaseProps & TestProps$1 & CommonButtonProps$1 & {
+    /** An optional icon to put on the right of the button */
+    iconRightName?: AcceptedIconNames$1;
+    /** An optional icon to put on the left of the button */
+    iconLeftName?: AcceptedIconNames$1;
+    /** An optional avatar to put on the left of the button */
+    avatar?: Pick<AvatarProps$1, 'src' | 'color'> & {
+        label?: string;
+    };
+};
+declare const Button: React__default.ForwardRefExoticComponent<{
+    type?: ButtonTypes;
+    size?: utils_types.ComponentSizes; /** An optional icon to put on the left of the button */
+    isBlock?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isIconButton?: boolean;
+    shape?: IconButtonShape;
+    htmlType?: "button" | "submit" | "reset";
+    sx?: {
+        container?: _emotion_serialize.CSSObject;
+    };
+} & TestProps$1 & EventButtonProps & Partial<Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size" | "css" | "onBlur" | "onClick" | "disabled">> & {
+    /** An optional icon to put on the right of the button */
+    iconRightName?: AcceptedIconNames$1;
+    /** An optional icon to put on the left of the button */
+    iconLeftName?: AcceptedIconNames$1;
+    /** An optional avatar to put on the left of the button */
+    avatar?: Pick<AvatarProps$1, 'src' | 'color'> & {
+        label?: string;
+    };
+} & React__default.RefAttributes<HTMLButtonElement>>;
+
+type CardProps = {
     /** Elevation of Card */
     elevated?: keyof Elevation$1;
     /** Transparency of Card: if false the Card's background is white, otherwise it's transparent */
@@ -973,14 +2307,14 @@ declare type CardProps = {
     /** Border radius of Card: if not provided it defaults to 0 */
     radius?: SpacingKey$1;
 };
-declare const Card: React__default.FC<CardProps>;
+declare const Card: React__default.FC<React__default.PropsWithChildren<CardProps>>;
 
-declare type Data$2 = {
+type Data$2 = {
     name: string;
     [prop: string]: number | string | undefined;
 };
 
-declare type LineChartProps = {
+type LineChartProps = {
     /** This property defines the data to be shown in the Line Chart */
     data: Data$2[];
     /** Property indicating the label name to be displayed for X axis */
@@ -994,36 +2328,36 @@ declare type LineChartProps = {
 };
 declare const LineChart: React__default.FC<LineChartProps>;
 
-declare type HoverInfo = {
+type HoverInfo = {
     name: string;
     value?: string | number;
     percentage?: string;
     [prop: string]: number | string | undefined;
 };
-declare type Option = {
+type Option = {
     color?: string;
     coloringOption?: 'all' | 'bar';
     hoverInfo?: HoverInfo[];
 };
-declare type Data$1 = {
+type Data$1 = {
     name: string;
     subcategory?: string;
     value?: number;
     barLabel?: string;
     options?: Option;
 };
-declare type BarChartProps = {
+type BarChartProps = {
     /** This property defines the data to be shown in the Line Chart */
     data: Data$1[];
 };
-declare const BarChart: React__default.FC<BarChartProps>;
+declare const BarChart: React__default.FCC<BarChartProps>;
 
-declare type Data = {
+type Data = {
     name: string;
     value: number;
     color?: string;
 };
-declare type DonutChartProps = {
+type DonutChartProps = {
     /** This property defines the data to be shown in the Donut Chart */
     data: Data[];
     /** This property defines the value to be shown in the Donut Chart label */
@@ -1031,9 +2365,9 @@ declare type DonutChartProps = {
     /** This property defines the units to be shown in the Donut Chart label*/
     units?: string;
 };
-declare const DonutChart: React__default.FC<DonutChartProps>;
+declare const DonutChart: React__default.FCC<DonutChartProps>;
 
-declare type CheckboxProps = {
+type CheckboxProps = {
     /** The label of the checkbox. */
     label?: string;
     /** Boolean defining if the checkbox is checked. */
@@ -1054,12 +2388,12 @@ declare type CheckboxProps = {
     /** Disables auto generated id for snapshots*/
     id?: string;
 };
-declare const CheckBox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLSpanElement>>;
+declare const CheckBox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const READ_ONLY: "read-only";
 declare const INTERACTIVE: "interactive";
 declare const styleType: readonly ["read-only", "interactive"];
-declare type ChipBaseProps = {
+type ChipBaseProps = {
     /**
      * Determines whether the chip should be read-only or interactive.
      * @default read-only
@@ -1085,13 +2419,11 @@ declare type ChipBaseProps = {
     /** Boolean defining if the chip is disabled. Interactive only. */
     isDisabled?: boolean;
 };
-declare type ChipProps = ChipBaseProps & TestProps & CommonButtonProps;
+type ChipProps = ChipBaseProps & TestProps & CommonButtonProps;
 
-declare const Chip: React__default.ForwardRefExoticComponent<ChipBaseProps & TestProps & Partial<Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size" | "onClick" | "css" | "onBlur" | "disabled">> & React__default.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+declare const Chip: React__default.ForwardRefExoticComponent<ChipBaseProps & TestProps & Partial<Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size" | "css" | "onBlur" | "onClick" | "disabled">> & React__default.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
 
-declare type AcceptedIconNames = 'account' | 'actions' | 'add' | 'alert' | 'analytics' | 'analyticsVideos' | 'ancient' | 'arrowDown' | 'arrowLeft' | 'arrowRight' | 'arrowToLeft' | 'arrowToRight' | 'artist' | 'asset' | 'assetMatching' | 'auto' | 'broadcast' | 'calendarEmpty' | 'calendarFilled' | 'catalog' | 'catalogOverview' | 'catalogFiles' | 'chatBubble' | 'check' | 'checkedList' | 'checkmark' | 'chevronExtraSmallDown' | 'chevronExtraSmallLeft' | 'chevronExtraSmallRight' | 'chevronExtraSmallUp' | 'chevronLargeDown' | 'chevronLargeLeft' | 'chevronLargeRight' | 'chevronLargeUp' | 'chevronSmallDown' | 'chevronSmallLeft' | 'chevronSmallRight' | 'chevronSmallUp' | 'claimList' | 'clock' | 'close' | 'closeTag' | 'cmsProcess' | 'composition' | 'compositionV2' | 'confirmedMatches' | 'conflicts' | 'concert' | 'dashboard' | 'dataset' | 'delete' | 'delivery' | 'details' | 'digitalUse' | 'distribution' | 'dotsVertical' | 'download' | 'duplicate' | 'duplicate2' | 'earnings' | 'earnings2' | 'edit' | 'entities' | 'error' | 'expenses' | 'externalLink' | 'externalLinkV2' | 'fatArrowDown' | 'fatArrowLeft' | 'fatArrowRight' | 'fatArrowUp' | 'file' | 'financialChart' | 'generatedReports' | 'genericFile' | 'genericOrdering' | 'globalItem' | 'heartFill' | 'heartStroke' | 'help' | 'hourglass' | 'income' | 'infoFilled' | 'info' | 'issues' | 'keyword' | 'legalFiles' | 'linked' | 'lock' | 'mail' | 'manual' | 'menu' | 'microphone' | 'minus' | 'moreOptionsHorizontal' | 'moreOptionsVertical' | 'musicNote' | 'myEarnings' | 'notifications' | 'notifications2' | 'oneWay' | 'others' | 'ownershipValidation' | 'pageFirst' | 'pageLast' | 'percentage' | 'plus' | 'policies' | 'process' | 'processManagement' | 'publicPerformance' | 'publisher' | 'recording' | 'recordLabel' | 'recordLabelV2' | 'referenceFile' | 'relations' | 'restore' | 'result' | 'royaltyShares' | 'search' | 'searchMusic' | 'searchThunder' | 'settings' | 'sight' | 'sortAscending' | 'sortDescending' | 'stamp' | 'statements' | 'success' | 'television' | 'thunder' | 'ticTacToeArrow' | 'timeOut' | 'training' | 'triangleDown' | 'triangleLeft' | 'triangleRight' | 'triangleUp' | 'trophy' | 'TVCinema' | 'TVRadio' | 'update' | 'upload' | 'user' | 'userAvatar' | 'users' | 'users2' | 'videoConfirmation' | 'view' | 'warning' | 'works' | 'writer' | 'youtube' | 'refresh' | 'star' | 'pause' | 'resume' | 'restart' | 'entity' | 'playCount' | 'processedLogs' | 'proposed' | 'unpaired' | 'unpairedV2' | 'clockOutlined' | 'userCheck';
-
-declare type OwnProps = {
+type OwnProps = {
     /** This property defines witch icon to use */
     name: AcceptedIconNames;
     /** Property indicating the color of the icon. Defaults to primary */
@@ -1099,15 +2431,21 @@ declare type OwnProps = {
     /** Property indicating the size of the icon. Defaults to 16 */
     size?: number;
     /** Callback fired when the `span` is clicked. */
-    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    onClick?: React$1.MouseEventHandler<HTMLSpanElement>;
     /** Property indicating the color's variant of the icon. */
-    variant?: typeof colorShades[number];
+    variant?: (typeof colorShades)[number];
 };
-declare type IconProps = OwnProps & TestProps;
-declare const Icon: React.ForwardRefExoticComponent<OwnProps & TestProps & React.RefAttributes<HTMLSpanElement>>;
+type IconProps = OwnProps & TestProps;
+declare const Icon: React$1.ForwardRefExoticComponent<OwnProps & TestProps & React$1.RefAttributes<HTMLSpanElement>>;
 
-declare type InputProps$1 = Partial<Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'readOnly' | 'disabled'>>;
-declare type TextFieldProps = {
+type InputProps$1 = Partial<Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'disabled' | 'size'>>;
+type MaskProps = {
+    mask?: never;
+} | {
+    mask?: string | (string | RegExp)[];
+    placeholder?: never;
+};
+type TextFieldProps = {
     /** The id of the text field that will be used as for in label too */
     id?: string;
     /** Callback fired when the `input` is blurred. */
@@ -1122,72 +2460,49 @@ declare type TextFieldProps = {
     onInput?: React__default.EventHandler<any>;
     /** Boolean to make the input readonly. Default to false. */
     isReadOnly?: boolean;
-    /** @deprecated This is a compatibility prop that will be removed in the next version, along with the min-width value
-     * of the TextField. It will be replaced by a fullWidth prop. */
-    hasMinWidthCompat?: boolean;
-} & TextInputBaseProps & InputProps$1 & TestProps;
-declare const TextField: React__default.ForwardRefExoticComponent<{
-    /** The id of the text field that will be used as for in label too */
-    id?: string | undefined;
-    /** Callback fired when the `input` is blurred. */
-    onBlur?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    /** Callback fired when the `input` is changed. */
-    onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    /** Callback fired when the `input` is focused. */
-    onFocus?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    /** Callback fired when the `input` has a key down event. */
-    onKeyDown?: React__default.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    /** Callback fired when the `input` value typed is changed */
-    onInput?: ((event: any) => void) | undefined;
-    /** Boolean to make the input readonly. Default to false. */
-    isReadOnly?: boolean | undefined;
-    /** @deprecated This is a compatibility prop that will be removed in the next version, along with the min-width value
-     * of the TextField. It will be replaced by a fullWidth prop. */
-    hasMinWidthCompat?: boolean | undefined;
-} & {
-    label?: string | undefined; /** The id of the text field that will be used as for in label too */
-    placeholder?: string | undefined;
-    leftIcon?: JSX.Element | AcceptedIconNames$1 | null | undefined;
-    rightIcon?: JSX.Element | AcceptedIconNames$1 | null | undefined;
-    isRequired?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    isLocked?: boolean | undefined;
-    isDark?: boolean | undefined;
-    hintMsg?: React__default.ReactNode;
-    value?: string | number | undefined;
-    isLean?: boolean | undefined;
-    styleType?: formFieldStyles | undefined;
-    size?: "md" | "sm" | undefined;
-    status?: "error" | "success" | "normal" | "hint" | undefined;
-    sx?: {
-        wrapper?: _emotion_serialize.CSSObject | undefined;
-        textField?: _emotion_serialize.CSSObject | undefined;
-        input?: _emotion_serialize.CSSObject | undefined;
-    } | undefined;
-    hasMinWidthCompat?: boolean | undefined;
-} & TestProps & Partial<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "readOnly">> & React__default.RefAttributes<HTMLInputElement>>;
-
-declare type SelectOptionValues = {
+    /** [For MultiTextField] If true, the user can add multiple tags as an input */
+    isMulti?: boolean;
+    /** [For MultiTextField] The values of the tags (chips) */
+    tags?: string[];
+    /** [For MultiTextField] A callback for when a Chip value is deleted */
+    onMultiValueDelete?: (value: string) => void;
+    /** [For MultiTextField] A callback for when all values are deleted  */
+    onMultiValueClearAll?: () => void;
+} & TextInputBaseProps$1 & MaskProps & InputProps$1 & TestProps;
+declare const _default$6: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLInputElement>>>;
+
+type SelectOptionValues = {
     value: string | number;
     label: string;
     iconProps?: OwnProps;
 };
-declare type SelectOption = {
+type SelectOptionBase = {
     isDisabled?: boolean;
+    helperText?: string;
     tooltipInfo?: string;
     options?: SelectOption[];
-} & SelectOptionValues;
-declare type InputProps = Partial<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>>;
-declare type SelectProps = {
+    isCreated?: boolean;
+};
+type SelectOption = SelectOptionBase & SelectOptionValues;
+type InputProps = Partial<Omit<InputHTMLAttributes<HTMLInputElement>, 'size' & 'onChange'>>;
+type MultiSelectProps = {
     /** The function that is used to return the selected options */
-    handleSelectedOption?: (selectedOption: SelectOption) => void;
-    /** the default value of the select if needed */
-    /** TODO: defaultValue is duplication of selectedOption*/
-    defaultValue?: SelectOption;
+    onChange?: (selectedOption: SelectOption[]) => void;
+    /** If true the user can select multiple options */
+    isMulti: true;
+    /** The selected options in case of multiSelect */
+    /** @TODO merge selectedOption with selectedOptions in v5 */
+    selectedOption?: SelectOption[];
+};
+type SingleSelectProps = {
+    /** The function that is used to return the selected options */
+    onChange?: (selectedOption?: SelectOption) => void;
+    /** If false the user can select one option */
+    isMulti?: never;
     /** the value of the select if select is controlled */
     selectedOption?: SelectOption;
-    /** if the select has tags */
-    isMulti?: boolean;
+};
+type SelectProps = {
     /** Options for the select dropdown */
     options: SelectOption[];
     /** if the component is used asynchronously */
@@ -1206,75 +2521,24 @@ declare type SelectProps = {
     isLoading?: boolean;
     /** if options list is virtualized */
     isVirtualized?: boolean;
-    /** A callback that's called when the user clicks the 'clear' icon */
-    onClear?: () => void;
-} & TextFieldProps & InputProps & TestProps;
-declare const Select: React__default.ForwardRefExoticComponent<{
-    /** The function that is used to return the selected options */
-    handleSelectedOption?: ((selectedOption: SelectOption) => void) | undefined;
-    /** the default value of the select if needed */
-    /** TODO: defaultValue is duplication of selectedOption*/
-    defaultValue?: SelectOption | undefined;
-    /** the value of the select if select is controlled */
-    selectedOption?: SelectOption | undefined;
-    /** if the select has tags */
-    isMulti?: boolean | undefined;
-    /** Options for the select dropdown */
-    options: SelectOption[];
-    /** if the component is used asynchronously */
-    isAsync?: boolean | undefined;
-    /** the function to fetch new options */
-    asyncSearch?: ((term: string) => void) | undefined;
-    /** after how many characters to start searching (default = 0) */
-    minCharactersToSearch?: number | undefined;
-    /** if searched text should be highlighted in available options */
-    hasHighlightSearch?: boolean | undefined;
-    /** if the options are searchable */
-    isSearchable?: boolean | undefined;
-    /** data-testid suffix */
-    dataTestId?: string | undefined;
-    /** if component is loading */
-    isLoading?: boolean | undefined;
-    /** if options list is virtualized */
-    isVirtualized?: boolean | undefined;
-    /** A callback that's called when the user clicks the 'clear' icon */
-    onClear?: (() => void) | undefined;
-} & {
-    id?: string | undefined;
-    onBlur?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onFocus?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onKeyDown?: React__default.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onInput?: ((event: any) => void) | undefined;
-    isReadOnly?: boolean | undefined;
-    hasMinWidthCompat?: boolean | undefined;
-} & {
-    label?: string | undefined;
-    placeholder?: string | undefined;
-    leftIcon?: JSX.Element | AcceptedIconNames | null | undefined;
-    rightIcon?: JSX.Element | AcceptedIconNames | null | undefined;
-    isRequired?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    isLocked?: boolean | undefined;
-    isDark?: boolean | undefined;
-    hintMsg?: React__default.ReactNode;
-    value?: string | number | undefined;
-    isLean?: boolean | undefined;
-    styleType?: formFieldStyles | undefined;
-    size?: "md" | "sm" | undefined;
-    status?: "error" | "success" | "normal" | "hint" | undefined;
-    sx?: {
-        wrapper?: _emotion_serialize.CSSObject | undefined;
-        textField?: _emotion_serialize.CSSObject | undefined;
-        input?: _emotion_serialize.CSSObject | undefined;
-    } | undefined;
-    hasMinWidthCompat?: boolean | undefined;
-} & TestProps & Partial<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "readOnly">> & Partial<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">> & React__default.RefAttributes<HTMLInputElement>>;
-
-declare type FilterOption = SelectOptionValues;
-declare type StyleType = 'filled' | 'transparent';
-declare type FilterType = 'preset' | 'added';
-declare type FilterProps = {
+    /**
+     * If true, then in the case of a searched option that is not found in the Options list of MultiSelect,
+     * the user can create this option.
+     * */
+    isCreatable?: boolean;
+    /** Whether the MultiSelect should have a Select All option */
+    hasSelectAllOption?: boolean;
+} & (MultiSelectProps | SingleSelectProps) & Omit<TextFieldProps, 'onChange' | 'mask'> & Omit<InputProps, 'onChange' | 'size'> & TestProps;
+
+declare const emptyValue: SelectOption;
+declare const _default$5: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLInputElement>>>;
+
+declare const _default$4: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLInputElement>>>;
+
+type FilterOption = SelectOption;
+type StyleType = 'filled' | 'transparent';
+type FilterType = 'preset' | 'added';
+type FilterProps = {
     /** The type of the button - defaults to "primary" */
     buttonType?: 'primary' | 'secondary';
     /** Items that are being declared as menu options */
@@ -1284,10 +2548,15 @@ declare type FilterProps = {
     defaultValue: FilterOption;
     /** A callback that is being triggered when an items has been clicked */
     onSelect: (option: FilterOption) => void;
-    /** A callback that is being triggered when type is added and you press the X icon */
+    /**
+     * For SingleFilter: callback for the X button of the 'added' type filter
+     * For MultiFilter: callback for the Clear All button
+     */
     onClear?: () => void;
+    /** A callback that's called when the user clicks the 'clear' icon of a specific Chip in MultiFilter */
+    onFilterDelete?: (option: FilterOption) => void;
     /** The text of the button to show */
-    label: React.ReactNode;
+    label: React$1.ReactNode;
     /** Defines the style type of the button */
     styleType: StyleType;
     /** Defines the filter type */
@@ -1306,64 +2575,70 @@ declare type FilterProps = {
     isLoading?: boolean;
     /** Whether the Options List is Virtualized or not */
     isVirtualized?: boolean;
+    /** If true the user can select multiple filters */
+    isMulti?: boolean;
+    /** The selected filters in case of MultiFilter */
+    /** @TODO merge selectedItem with selectedItems in v5 */
+    selectedItems?: FilterOption[];
+    /** Whether the MultiFilter should have a Select All option*/
+    hasSelectAllOption?: boolean;
     /** data-testid suffix */
     dataTestId?: string;
 };
-declare type BaseColorProps = {
+type BaseColorProps = {
     isOpen: boolean;
     theme: Theme;
     calculatedColor: ColorShapeFromComponent;
     hasSelectedValue: boolean;
 };
-declare type BackgroundColorProps = BaseColorProps & {
+type BackgroundColorProps = BaseColorProps & {
     styleType: StyleType;
 };
-declare type ButtonStyleProps = Omit<BaseColorProps, 'theme'> & {
+type ButtonStyleProps = Omit<BaseColorProps, 'theme'> & {
     isDisabled?: boolean;
     styleType: StyleType;
     filterType: FilterType;
 };
-declare type BorderProps = BaseColorProps & {
+type BorderProps = BaseColorProps & {
     styleType: StyleType;
     filterType: FilterType;
     isDivider?: boolean;
     state?: 'normal' | 'hover';
 };
-declare type HoverBorderProps = BaseColorProps & {
+type HoverBorderProps = BaseColorProps & {
     styleType: StyleType;
     filterType: FilterType;
 };
 
-declare type Range = {
-    from?: Dayjs;
-    to?: Dayjs;
-};
-
-declare type DisabledDates = {
+type DisabledDates = {
     daysOfWeek?: number[];
     days?: Date[];
     after?: Date;
     before?: Date;
 };
-declare type DatePickerProps = {
+type DateRange = {
+    from: Date | undefined;
+    to: Date | undefined;
+};
+type DatePickerProps = {
     /** This property is to define if this is a day picker or a day range picker */
     isRangePicker?: boolean;
     /** A callback to return user selection */
-    onChange?: (range: Range) => void;
+    onChange?: (range: DateRange) => void;
     /** Option to disable some dates */
     disableDates?: DisabledDates;
     /** Value to define if needed an initial state or to handle it externally */
-    value?: {
-        from?: Date;
-        to?: Date;
-    };
+    value: DateRange;
+    /** Calendar options for DateRangePicker */
+    options?: ExtraOption[];
     /** Props of the TextField input */
-    inputProps?: TextFieldProps;
+    inputProps?: Omit<TextFieldProps, 'size'>;
     /** The format of the date displayed in the input field */
     dateFormatOverride?: DateFormatType;
     /** if the datepicker can be clear with backspace */
     isClearable?: boolean;
     /** if the datepicker's default date is today instead of placeholder text */
+    /** @deprecated This prop is being deprecated and is not used as you can manipulate date from value, will be removed in the future **/
     isDefaultNow?: boolean;
     /** Style properties for the DatePicker with a filter base */
     filterConfig?: {
@@ -1375,28 +2650,30 @@ declare type DatePickerProps = {
         filterType?: FilterType;
     };
 };
-declare type ExtraOption = {
+type ExtraOption = {
     value: string;
     label: string;
     dates: Dayjs[];
 };
-declare type DateFormatType = 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'MMMM D, YYYY' | 'dddd, MMMM D, YYYY' | 'M/D/YYYY' | 'MMM D, YYYY' | 'ddd, MMM D, YYYY' | 'DD MMM YYYY';
-declare const extraOptions: ExtraOption[];
-declare const DatePicker: React__default.FC<DatePickerProps & TestProps>;
+type DateFormatType = 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'MMMM D, YYYY' | 'dddd, MMMM D, YYYY' | 'M/D/YYYY' | 'MMM D, YYYY' | 'ddd, MMM D, YYYY' | 'DD MMM YYYY';
+
+declare const _default$3: React__default.NamedExoticComponent<DatePickerProps & TestProps>;
 
-declare type DrawerMenuItem = {
+declare const CALENDAR_DEFAULT_OPTIONS: ExtraOption[];
+
+type DrawerMenuItem = {
     name: string;
     url: string;
     state?: Record<string, any> | null;
     isVisible: boolean;
-    iconName: AcceptedIconNames$1;
+    iconName: AcceptedIconNames$2;
     isActive?<Params extends {
         [K in keyof Params]?: string;
     }, S = LocationState>(match: match<Params> | null, location: Location<S>): boolean;
     options: DrawerMenuItem[];
 };
 
-declare type DrawerProps = {
+type DrawerProps = {
     /** Defines if the drawer is expanded */
     isExpanded: boolean;
     /** Changes if the drawer is expanded */
@@ -1408,12 +2685,12 @@ declare type DrawerProps = {
 };
 declare const Drawer: React__default.FC<DrawerProps>;
 
-declare type SharedProps = {
+type SharedProps = {
     /**
      * A function accepting a click handler and a boolean representing the current expansion state. Returns the elements containing the text and the
      * expand/collapse button
      * */
-    textAndControl: (x: React.ReactEventHandler, y: boolean) => React.ReactElement;
+    textAndControl: (x: React$1.ReactEventHandler, y: boolean) => React$1.ReactElement;
     /**
      * The type of the component that wraps the action and content. Must be able to hold a
      * `data-testid` prop
@@ -1437,55 +2714,52 @@ declare type SharedProps = {
      * A function accepting a boolean representing the current expansion state. Returns the
      * collapsible/expandable content. Mutually exclusive with children.
      */
-    content?: (x: boolean) => React.ReactNode;
+    content?: (x: boolean) => React$1.ReactNode;
     /**
      * A function accepting a boolean representing the current expansion state. Returns the
      * collapsible/expandable content. Mutually exclusive with content.
      */
-    children?: (x: boolean) => React.ReactNode;
+    children?: (x: boolean) => React$1.ReactNode;
 } & TestProps;
-declare type ExternalProps = {
+type ExternalProps = {
     /**
      * Defining this prop means that the component is controlled
      *
      * @default false
      */
-    isExpanded: boolean;
+    isExpanded: true;
     /**
      * Change handler for the case when the component is controlled
      */
-    onChange: React.ReactEventHandler;
+    onChange: React$1.ReactEventHandler;
 };
-declare type InternalProps = {
+type InternalProps = {
     /**
      * Defining this prop means that the component is controlled
      *
      * @default false
      */
-    isExpanded: undefined;
+    isExpanded?: never;
     /**
      * Change handler for the case when the component is controlled
      */
-    onChange: undefined;
+    onChange?: never;
 };
-declare type ExpandCollapseProps = SharedProps & (InternalProps | ExternalProps);
+type ExpandCollapseProps = SharedProps & (InternalProps | ExternalProps);
 
 declare const ExpandCollapse: (props: ExpandCollapseProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare type IconButtonProps = Omit<ButtonBaseProps$1, 'isIconButton' | 'iconLeft' | 'iconRight'> & {
-    /** Property indicating the size of the icon. Defaults to 16 */
-    iconSize?: number;
-    /** This property defines witch icon to use */
-    name: AcceptedIconNames;
-} & TestProps & EventProps;
-declare const IconButton: React__default.ForwardRefExoticComponent<Omit<ButtonBaseProps$1, "isIconButton" | "iconRight" | "iconLeft"> & {
-    /** Property indicating the size of the icon. Defaults to 16 */
-    iconSize?: number | undefined;
-    /** This property defines witch icon to use */
-    name: AcceptedIconNames;
-} & TestProps & EventProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Link: React__default.ForwardRefExoticComponent<React__default.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    type?: "inverted" | "primary";
+    placement?: "block" | "inline";
+    size?: 2 | 1 | 3;
+    iconName?: components_Icon.AcceptedIconNames;
+    isDisabled?: boolean;
+    component?: prop_types.ReactComponentLike;
+    dataTestPrefixId?: string;
+} & React__default.RefAttributes<HTMLAnchorElement>>;
 
-declare type LabelProps = {
+type LabelProps = {
     /** If the label has error */
     hasError?: boolean;
     /** The label that is going to be displayed */
@@ -1494,112 +2768,118 @@ declare type LabelProps = {
     isRequired: boolean;
     /** If the label must be moved to the top */
     isAnimated?: boolean;
+    /** HTML <label/>'s for prop */
     htmlFor?: string;
-    size?: string;
+    /** The size of the label */
+    size?: ComponentSizes$1;
 };
-declare const Label: React.FC<LabelProps>;
+declare const Label: React$1.FCC<LabelProps>;
 
-declare type ListItemType = string | number | SelectOption$1 | FilterOption$1 | React__default.ReactNode;
-declare type ListRowSize = 'small' | 'normal';
-declare type SelectHandlerType = ((option: string) => void) | ((option: number) => void) | ((option: SelectOption$1) => void) | ((option: FilterOption$1) => void);
+type ListSelection = Set<Key>;
+type ListSelected = 'all' | Iterable<Key>;
+type ListItemType = SelectOption$1;
+type ListRowSize = ComponentSizes$1;
+type SelectHandlerType = (option: ListItemType) => void;
 
-declare type ListProps = {
-    /** Data for the list */
-    data: ListItemType[];
-    /** Size of the list's row (height of ListItem Component)  */
-    rowSize: ListRowSize;
+type ListProps = {
+    /** The label that describes the List, useful to determine aria and accessibility of the list  */
+    label: string;
     /** Width of the list */
     width?: number;
-    /** Height of the list */
+    /** Height of the list when you use it as virtualized */
     height?: number;
     /** Virtualized list option */
     isVirtualized?: boolean;
-    /** Selected Item */
-    selectedItem?: ListItemType;
-    /** Default option. Renders on top of the list, highlighted - for Filter component */
-    defaultOption?: ListItemType;
-    /** Search Term to be highlighted in list items */
-    searchTerm?: string;
-    /** Option Click handler for SelectOption[] data case */
-    handleOptionClick?: SelectHandlerType;
-    /** Defines if this is searchable list or not **/
-    isSearchable?: boolean;
-} & TestProps$1;
-declare const _default$1: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
-    /** Data for the list */
-    data: ListItemType[];
-    /** Size of the list's row (height of ListItem Component)  */
-    rowSize: ListRowSize;
+    /** Callback when an item gets a change */
+    onSelectionChange?: (keys: ListSelection) => unknown;
+    /** Is the actual `key` of the item e.g `<Item key={'item_1'} />` is the `item_1` */
+    disabledKeys?: ListSelected;
+    /** Is the actual `key` of the item e.g `<Item key={'item_1'} />` is the `item_1` */
+    selectedKeys?: ListSelected;
+} & Omit<AriaListBoxProps<SelectOption>, 'selectionMode' | 'onSelectionChange' | 'children'> & TestProps$1 & Omit<React__default.InputHTMLAttributes<HTMLUListElement>, 'onChange'>;
+/**
+ * This is the List component that uses the Window underneath for every UL.
+ * Because this component uses the React-Aria abstraction for the List it will also contain the Option and ListBoxSection below
+ * as a masked layer to the actual subcomponents
+ * */
+declare const List: React__default.ForwardRefExoticComponent<{
+    /** The label that describes the List, useful to determine aria and accessibility of the list  */
+    label: string;
     /** Width of the list */
-    width?: number | undefined;
-    /** Height of the list */
-    height?: number | undefined;
+    width?: number;
+    /** Height of the list when you use it as virtualized */
+    height?: number;
     /** Virtualized list option */
-    isVirtualized?: boolean | undefined;
-    /** Selected Item */
-    selectedItem?: ListItemType;
-    /** Default option. Renders on top of the list, highlighted - for Filter component */
-    defaultOption?: ListItemType;
-    /** Search Term to be highlighted in list items */
-    searchTerm?: string | undefined;
-    /** Option Click handler for SelectOption[] data case */
-    handleOptionClick?: SelectHandlerType | undefined;
-    /** Defines if this is searchable list or not **/
-    isSearchable?: boolean | undefined;
-} & TestProps$1 & React__default.RefAttributes<HTMLDivElement>>>;
-
-declare const loaderTypes: readonly ["dots", "indeterminate", "spinner"];
-
-declare type LoaderType = typeof loaderTypes[number];
-declare type LoaderProps = {
-    /** Loader type. Defaults to dots **/
-    type?: LoaderType;
-    /** The data test id if needed */
-    dataTestId?: string;
-    /** Color of the loader. Define AA color otherwise it gets Primary be default */
-    color?: string;
-};
-declare const Loader: React__default.FC<LoaderProps>;
-
-declare type MenuPositionAllowed = 'left' | 'right';
-
-declare type MenuProps = {
+    isVirtualized?: boolean;
+    /** Callback when an item gets a change */
+    onSelectionChange?: (keys: ListSelection) => unknown;
+    /** Is the actual `key` of the item e.g `<Item key={'item_1'} />` is the `item_1` */
+    disabledKeys?: ListSelected;
+    /** Is the actual `key` of the item e.g `<Item key={'item_1'} />` is the `item_1` */
+    selectedKeys?: ListSelected;
+} & Omit<AriaListBoxProps<SelectOption>, "children" | "selectionMode" | "onSelectionChange"> & TestProps$1 & Omit<React__default.InputHTMLAttributes<HTMLUListElement>, "onChange"> & React__default.RefAttributes<HTMLUListElement>>;
+
+type ListItemTextProps = {
+    description?: string | JSX.Element;
+};
+declare const ListItemText: FC<React__default.PropsWithChildren<ListItemTextProps>>;
+
+type ListItemActionProps = NonNullable<unknown>;
+declare const ListItemAction: FCC<ListItemActionProps>;
+
+type ListItemProps = {
+    /** A string representation of the item's unique key. */
+    key?: string | number;
+    /** A string representation of the item's contents, used when contents are something more than just text to determine labels etc. */
+    textValue?: string;
+    /** @default normal */
+    rowSize?: ListRowSize;
+};
+declare const ListItem: React__default.FCC<ListItemProps>;
+
+type ListSectionProps = {
+    /** Rendered contents of the section, e.g. a header. */
+    title: ReactNode;
+    /** An accessibility label for the section. */
+    'aria-label'?: string;
+    /** @default normal */
+    rowSize?: ListRowSize;
+} & SectionProps<unknown>;
+declare const ListSection: React__default.FCC<ListSectionProps>;
+
+type MenuPositionAllowed = 'left' | 'right';
+
+type MenuProps = {
     /** the color of the button based on our colors eg. red-500 */
     color?: string;
     /** Items that are being declared as menu options */
     items?: string[];
-    /** This property define the size of the button. Defaults to 'md' */
-    size?: 'lg' | 'md' | 'sm';
-    /** Property indicating if the component is filled with a color based on the type */
-    isFilled?: boolean;
     /** Returns the items selected on the menu */
-    selectedItem?: string | null;
+    selectedItem?: string | number | null;
     /** A callback that is being triggered when an items has been clicked */
-    onSelect: (option: string) => void;
+    onSelect: (option: string | number) => void;
     /** The text of the button to show - defaults to "More" */
-    buttonText: React.ReactNode;
+    buttonText: React$1.ReactNode;
     /** Define if the button is in disabled state */
     isDisabled?: boolean;
     /** Menu position when open */
     menuPosition?: MenuPositionAllowed;
     /** The type of the button - defaults to "primary" */
-    buttonType?: AcceptedColorComponentTypes$1;
+    buttonType?: ButtonTypes$1;
     /** The name of the icon on the right area of menu button */
     rightIconName?: AcceptedIconNames;
     /** The name of the icon on the left area of menu button */
     leftIconName?: AcceptedIconNames;
-    /** The size of the icon on the menu button */
-    iconSize?: number;
     /** You can define the avatar properties here for src or letter if none then the user icon will be displayed if the object is not empty */
     avatar?: {
         src: string;
         letter: string;
         color?: AvatarColors$1;
     };
-} & TestProps & EventProps$1;
-declare const Menu: React.FC<MenuProps>;
+} & TestProps & EventProps;
+declare const Menu: React$1.FC<MenuProps>;
 
-declare type ModalContentProps = {
+type ModalContentProps = {
     /** The label of the modal. */
     label?: string;
     /** The heading of the modal. */
@@ -1618,7 +2898,7 @@ declare type ModalContentProps = {
     dataTestId?: TestId;
 };
 
-declare type ModalProps = {
+type ModalProps = {
     /**  If true, the modal is open. Defaults to false. */
     isOpen: boolean;
     /** Callback fired when the component requests to be closed. */
@@ -1630,107 +2910,92 @@ declare type ModalProps = {
     /** If false, the content won't have any padding */
     isContentPadded?: boolean;
 };
-declare const Modal: React__default.FC<ModalProps>;
+declare const Modal: React__default.FCC<ModalProps>;
 
-declare type NotificationTypes = 'success' | 'error' | 'info' | 'warning';
-declare type NotificationVariants = 'inline' | 'banner';
-declare type NotificationStyleType = 'elevated' | 'outlined';
+type NotificationTypes = 'success' | 'error' | 'info' | 'warning';
+type NotificationVariants = 'inline' | 'banner';
+type NotificationStyleType = 'elevated' | 'outlined';
+type NotificationActions = {
+    /** The primary call-to-action label of the Notification */
+    primaryCTALabel?: string;
+    /** The primary call-to-action of the Notification */
+    primaryCTA?: () => void;
+    /** The secondary call-to-action label of the Notification */
+    secondaryCTALabel?: string;
+    /** The secondary call-to-action of the Notification */
+    secondaryCTA?: () => void;
+};
 
-declare type InlineNotificationProps = {
+type InlineNotificationProps = {
     /** Show notification icon based on the type */
     hasIcon?: boolean;
     /** The informative message of the Notification */
-    message: string | React.ReactNode;
+    message: string | React$1.ReactNode;
     /** The type of the Notification */
     type: NotificationTypes;
     /** The style type of the Notification. Defaults to elevated */
     styleType?: NotificationStyleType;
-    /** The primary call-to-action label of the Notification */
-    primaryCTALabel?: string;
-    /** The primary call-to-action of the Notification */
-    primaryCTA?: () => void;
     /** The closing call-to-action of the Notification */
     closeCTA?: () => void;
     /** The data test id if needed */
     dataTestId?: TestId;
-};
-declare const InlineNotification: React.FC<InlineNotificationProps>;
+} & Pick<NotificationActions, 'primaryCTALabel' | 'primaryCTA'>;
+declare const InlineNotification: React$1.FC<InlineNotificationProps>;
 
-declare type NotificationsContainerPositions = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
-declare type NotificationsContainerProps = {
+type NotificationsContainerPositions = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
+type NotificationsContainerProps = {
     /** Notifications Container position */
     position: NotificationsContainerPositions;
-    children: ReactNode;
     parent?: HTMLElement | null;
 };
-declare const NotificationsContainer: React__default.FC<NotificationsContainerProps>;
+declare const NotificationsContainer: React__default.FCC<NotificationsContainerProps>;
 
-declare type NotificationVisualProps = {
+type NotificationVisualProps = {
     /** The message heading of the Notification */
     title: string | undefined;
-    /** The primary call-to-action label of the Notification */
-    primaryCTALabel: string | undefined;
-    /** The primary call-to-action of the Notification */
-    primaryCTA: (() => void) | undefined;
-    /** The secondary call-to-action label of the Notification */
-    secondaryCTALabel: string | undefined;
-    /** The secondary call-to-action of the Notification */
-    secondaryCTA: (() => void) | undefined;
     /** The description of the Notification (only for toast) */
     description: string | undefined;
     /** The data test id if needed */
     dataTestId?: TestId;
-};
-declare const NotificationVisual: React.FC<NotificationVisualProps>;
+} & NotificationActions;
+declare const NotificationVisual: React$1.FCC<NotificationVisualProps>;
 
-declare type BannerProps = {
+type BannerProps = {
     /** Show notification icon based on the type */
     hasIcon?: boolean;
     /** The title (message heading) of the Notification */
     title: string;
     /** The informative message of the Notification */
-    message: string | React.ReactNode;
+    message: string | React$1.ReactNode;
     /** The type of the Notification */
     type: NotificationTypes;
     /** The style type of the Notification. Defaults to elevated */
     styleType?: NotificationStyleType;
-    /** The primary call-to-action label of the Notification */
-    primaryCTALabel?: string;
-    /** The primary call-to-action of the Notification */
-    primaryCTA?: () => void;
     /** The closing call-to-action of the Notification */
     closeCTA?: () => void;
     /** The data test id if needed */
     dataTestId?: TestId;
-};
-declare const Banner: React.FC<BannerProps>;
+} & Pick<NotificationActions, 'primaryCTALabel' | 'primaryCTA'>;
+declare const Banner: React$1.FCC<BannerProps>;
 
-declare type SnackbarProps = {
+type SnackbarProps = {
     /** The informative message of the Toast */
     message: string;
     /** The type of the Notification */
     type: NotificationTypes;
     /** The style type of the Notification. Defaults to elevated */
     styleType?: NotificationStyleType;
-    /** The primary call-to-action label of the Notification */
-    primaryCTALabel: string | undefined;
-    /** The primary call-to-action of the Notification */
-    primaryCTA: (() => void) | undefined;
-    /** The secondary call-to-action label of the Notification */
-    secondaryCTALabel: string | undefined;
-    /** The secondary call-to-action of the Notification */
-    secondaryCTA: (() => void) | undefined;
     /** The description of the Notification (only for toast) */
     description: string | undefined;
     /** The closing call-to-action of the Toast */
     closeCTA: (() => void) | undefined;
     /** The data test id if needed */
     dataTestId?: TestId;
-};
-declare const Snackbar: React.FC<SnackbarProps>;
+} & NotificationActions;
+declare const Snackbar: React$1.FCC<SnackbarProps>;
 
-declare type AnchorType = 'bottom' | 'left' | 'right' | 'top';
-declare type OverlayProps = {
+type AnchorType = 'bottom' | 'left' | 'right' | 'top';
+type OverlayProps = {
     /**  If true, the overlay is open.*/
     isOpen: boolean;
     /** Callback fired when the component requests to be closed. */
@@ -1742,9 +3007,9 @@ declare type OverlayProps = {
     /** The data test id if needed */
     dataTestId?: TestId$1;
 };
-declare const Overlay: React__default.ForwardRefExoticComponent<Pick<React__default.PropsWithChildren<OverlayProps & Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "size" | "css">>>, "children" | "onChange" | "color" | "value" | "type" | "download" | "name" | "onClick" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "default" | "className" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "content" | "height" | "width" | "start" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "useMap" | "wmode" | "wrap" | keyof OverlayProps> & React__default.RefAttributes<HTMLDivElement>>;
+declare const Overlay: React__default.ForwardRefExoticComponent<Omit<React__default.PropsWithChildren<OverlayProps & Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "size" | "css">>>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-declare type PaginationProps = {
+type PaginationProps = {
     /** The current page you are on if you need to control it, defaults to 1 **/
     page: number;
     /** The total pages **/
@@ -1760,55 +3025,82 @@ declare type PaginationProps = {
 };
 declare const Pagination: ({ page, count, onChange, isEnhancedPaginationVisible, isNextPageDisabled, isPrevPageDisabled, }: PaginationProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare type RadioProps = {
-    /** The value of the radio input. If no value is passed the default value, according to spec, is "on"
-     *  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value
-     *
-     *  @default on
-     * */
-    value?: string | number;
-    /** Whether the radio input is selected or not. Defining this prop means the radio input is controlled */
-    isChecked?: boolean;
-    /** The onChange event handler for the radio input */
-    onChange?: React.ReactEventHandler;
-    /** The name of the radio input, in case you want to manually form a radio group */
-    name?: string;
-    /** Whether the radio input is disabled
-     *
-     *  @default false
-     * */
-    isDisabled?: boolean;
-    /** ID property of the radio input */
-    id?: string;
-    /** Whether the radio input is required to be selected in the context of a form
-     *
-     * @default false
-     * */
-    isRequired?: boolean;
-    /** Whether the radio input is filled or outlined
-     *
-     * @default true
-     * */
-    isFilled?: boolean;
-    dataTestId?: TestId;
+type LabelConfig = {
+    /** Sets the label's placement */
+    placement?: 'left' | 'right';
+    /** Sets the label's size */
+    size?: 'normal' | 'large';
+    /** Helptext rendered under the label */
+    helpText?: string;
+    /** Styles that will apply on the container that holds the radio input and the label */
+    sx?: CSSObject$1;
 };
-declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 
-declare type RadioGroupProps = {
-    /** A list of Radio elements */
-    children: React.ReactNode;
-    /** The onChange event handler for the radio group */
-    onChange?: React.ReactEventHandler;
-    /** The current value of the radio group. Defining this prop means the radio group is controlled */
-    value?: string | number;
-    /** A default value for the radio group. Defining this prop means the radio group is not controlled */
-    defaultValue?: string | number;
-    /** A name value for all the radio inputs of the radio group */
-    name?: string;
-};
-declare function RadioGroup(props: RadioGroupProps): _emotion_react_jsx_runtime.JSX.Element;
+type Props = Partial<RadioAria> & {
+    /** Id property of the radio input */
+    id?: string;
+    /** The value of the radio input */
+    value: string;
+    /** Label configuration; includes placement, size, helpText and sx */
+    labelConfig?: LabelConfig;
+    children?: React$1.ReactNode;
+} & TestProps$1;
+declare const Radio: React$1.ForwardRefExoticComponent<Partial<RadioAria> & {
+    /** Id property of the radio input */
+    id?: string;
+    /** The value of the radio input */
+    value: string;
+    /** Label configuration; includes placement, size, helpText and sx */
+    labelConfig?: LabelConfig;
+    children?: React$1.ReactNode;
+} & TestProps$1 & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const RadioGroup: React$1.ForwardRefExoticComponent<{
+    /** The current selected value */
+    value?: string;
+    /** Callback that is called when the value changes. */
+    onChange?: (value: string) => void;
+    /** Whether the whole RadioGroup is disabled */
+    isDisabled?: boolean;
+    /** Styles that will apply on the RadioGroup container */
+    sx?: CSSObject$1;
+    children?: React$1.ReactNode;
+} & TestProps$1 & React$1.RefAttributes<HTMLDivElement>>;
 
-declare type SliderProps = {
+declare const RadioContext: React__default.Context<RadioGroupState>;
+declare const useRadioGroupContent: () => RadioGroupState;
+
+type SwitchProps = Partial<SwitchAria> & {
+    /** Id property of the radio input */
+    id?: string;
+    /** The value of the radio input */
+    value?: string;
+    /** Callback for when the element's selection state changes. */
+    onChange?: (isSelected: boolean) => void;
+    /** Label configuration; includes placement, size, helpText and sx */
+    labelConfig?: LabelConfig$1;
+    children?: React$1.ReactNode;
+} & TestProps$1;
+declare const Switch: React$1.ForwardRefExoticComponent<Partial<SwitchAria> & {
+    /** Id property of the radio input */
+    id?: string;
+    /** The value of the radio input */
+    value?: string;
+    /** Callback for when the element's selection state changes. */
+    onChange?: (isSelected: boolean) => void;
+    /** Label configuration; includes placement, size, helpText and sx */
+    labelConfig?: LabelConfig$1;
+    children?: React$1.ReactNode;
+} & TestProps$1 & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const ProgressIndicator: React__default.ForwardRefExoticComponent<{
+    type?: "linear" | "circular";
+    value?: number;
+    status?: "error" | "normal";
+    isBlock?: boolean;
+} & TestProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type SliderProps = {
     /** Determines if the Slider is disabled or not */
     isDisabled?: boolean;
     /** Determines if the Slider will show increments along its track */
@@ -1827,65 +3119,25 @@ declare const MIN = 0;
 declare const MAX = 100;
 declare const Slider: React__default.FC<SliderProps & TestProps>;
 
-declare type SwitchProps = {
-    label?: string;
-    labelPlacement?: 'left' | 'right';
-    isChecked: boolean;
-    onChange: (checked?: boolean, event?: React__default.SyntheticEvent<MouseEvent | KeyboardEvent> | MouseEvent) => void;
-    isDisabled?: boolean;
-} & TestProps;
-declare const Switch: React__default.FC<SwitchProps>;
-
-declare type TooltipSize = 'large' | 'medium' | 'small';
-declare type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
-declare type TooltipProps = {
-    /** The plain text to show inside the tooltip */
-    content: React__default.ReactNode;
-    /** The placement where the tooltip will show */
-    /** @default top */
-    placement?: TooltipPlacement;
-    /** Whether the tooltip is transparent or not - for cases
-     * where the content is a custom component
-     */
-    /** @default false */
-    isTransparent?: boolean;
-    /** The unique id in order to link content and tooltip */
-    /** @default uuid */
-    id?: string;
-    /** The size of the tooltip to define different style */
-    /** @default medium */
-    size?: TooltipSize;
-    /** Determines if the tooltip is interactive, i.e. it can be
-     * hovered over or clicked without hiding */
-    /** @default false */
-    isInteractive?: boolean;
-    /** Number in ms to debounce the internal onMouseMove handler
-     * which determines when an isInteractive tooltip should hide. */
-    /** @default 100 */
-    delay?: number;
-    children: React__default.ReactElement;
-};
-declare const Tooltip: React__default.FC<TooltipProps>;
-
-declare type SortingOrder = 'asc' | 'desc';
-declare type ExtendedColumn = {
+type SortingOrder = 'asc' | 'desc';
+type ExtendedColumn = {
     content: {
         label: string;
         sortingKey: string;
     };
     tooltip?: {
         content: string;
-        placement?: TooltipPlacement;
+        placement?: TooltipPlacement$1;
     };
     isSortable?: boolean;
 };
-declare type Sort = {
+type Sort = {
     column: string;
     order: SortingOrder;
 };
 
-declare type ContentComponent<T> = (data: Cell<T>) => React__default.Component | JSX.Element;
-declare type Cell<T> = {
+type ContentComponent<T> = (data: Cell<T>) => React__default.ReactNode;
+type Cell<T> = {
     content: number | string | ContentComponent<T>;
     tooltipContent?: string;
     hasTruncatedTooltip?: boolean;
@@ -1894,19 +3146,19 @@ declare type Cell<T> = {
     align?: 'left' | 'right';
     widthPercentage?: number;
 };
-declare type Row<T> = {
+type Row<T> = {
     id: string | number;
     cells: Cell<T>[];
     expanded?: ({ row, isSelected, isExpanded, }: {
         row: Row<T>;
         isSelected: boolean;
         isExpanded: boolean;
-    }) => React__default.Component | JSX.Element;
+    }) => React__default.ReactNode;
     rowSpan?: number;
 };
-declare type Selection = string | number;
-declare type TableType = 'normal' | 'nested-header';
-declare type TableProps<T> = {
+type Selection = string | number;
+type TableType = 'normal' | 'nested-header';
+type TableProps<T> = {
     /** The data for the table that needs to display. */
     data: Row<T>[];
     /** An array of titles or objects to define columns. */
@@ -1928,9 +3180,9 @@ declare type TableProps<T> = {
     /** If provided sort will only work with this option (asc or desc only). By default supports bidirectional sort*/
     sortDir?: SortingOrder;
     /** Top left text on the table - showing a counter, text etc. */
-    topLeftText?: string | JSX.Element;
+    topLeftText?: string | React__default.ReactElement;
     /** Top right area to define a custom component for buttons or other usage. */
-    topRightArea?: (data: Row<T>[], selectionData?: Selection[]) => React__default.Component | JSX.Element;
+    topRightArea?: (data: Row<T>[], selectionData?: Selection[]) => React__default.ReactNode;
     /** Action cell width for Table with Expandable Rows (in %)*/
     actionWidth?: number;
     /** If true, table's expandable rows will be expanded on initial render. */
@@ -1939,112 +3191,116 @@ declare type TableProps<T> = {
     dataTestIdPrefix?: string;
 };
 declare function Table<T>({ data, columns, type, hasFixedHeader, hasFixedCTA, onCheck, isPadded, onSort, initialSort, sortDir, topLeftText, topRightArea, actionWidth, isInitiallyExpanded, dataTestIdPrefix, }: TableProps<T>): _emotion_react_jsx_runtime.JSX.Element;
-declare const _default: React__default.MemoExoticComponent<typeof Table>;
+declare const _default$2: React__default.MemoExoticComponent<typeof Table>;
 
-declare type SearchFieldProps = {
+type TagColors = 'neutral' | 'blue' | 'red' | 'purple' | 'teal';
+type TagSizes = 'normal' | 'small';
+type TagProps = {
+    /** The color of the Tag
+     *  @default 'neutral'
+     * */
+    color?: TagColors;
+    /** The size of the Tag
+     *  @default 'normal'
+     * */
+    size?: TagSizes;
+    /** The name of the leading icon. Applies only to read-only Tag  */
+    iconName?: AcceptedIconNames$1;
+    /** If provided, the Tag becomes selectable. Callback for when the Tag is clicked */
+    onSelect?: () => void;
+    /** Whether the selectable Tag is selected (active state) */
+    isSelected?: boolean;
+    /** If provided, the Tag becomes clearable. Callback for when the clear icon of the Tag is clicked */
+    onClear?: () => void;
+} & TestProps$1;
+
+declare const Tag: React__default.ForwardRefExoticComponent<Omit<Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "size" | "css">> & {
+    color?: TagColors;
+    size?: TagSizes;
+    iconName?: AcceptedIconNames;
+    onSelect?: () => void;
+    isSelected?: boolean;
+    onClear?: () => void;
+} & TestProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+type SearchFieldProps = {
     /** A callback that's called when the user clicks the 'clear' icon */
     onClear: () => void;
-} & TextFieldProps$1 & TestProps;
-declare const SearchField: React__default.ForwardRefExoticComponent<{
+} & Omit<TextFieldProps$1, 'size'> & TestProps;
+declare const _default$1: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     /** A callback that's called when the user clicks the 'clear' icon */
     onClear: () => void;
-} & {
-    id?: string | undefined;
-    onBlur?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onFocus?: React__default.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onKeyDown?: React__default.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onInput?: ((event: any) => void) | undefined;
-    isReadOnly?: boolean | undefined;
-    hasMinWidthCompat?: boolean | undefined;
-} & {
-    label?: string | undefined;
-    placeholder?: string | undefined;
-    leftIcon?: JSX.Element | AcceptedIconNames | null | undefined;
-    rightIcon?: JSX.Element | AcceptedIconNames | null | undefined;
-    isRequired?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    isLocked?: boolean | undefined;
-    isDark?: boolean | undefined;
-    hintMsg?: React__default.ReactNode;
-    value?: string | number | undefined;
-    isLean?: boolean | undefined;
-    styleType?: formFieldStyles | undefined;
-    size?: "md" | "sm" | undefined;
-    status?: "error" | "success" | "normal" | "hint" | undefined;
-    sx?: {
-        wrapper?: _emotion_serialize.CSSObject | undefined;
-        textField?: _emotion_serialize.CSSObject | undefined;
-        input?: _emotion_serialize.CSSObject | undefined;
-    } | undefined;
-    hasMinWidthCompat?: boolean | undefined;
-} & TestProps & Partial<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "readOnly">> & React__default.RefAttributes<HTMLInputElement>>;
-
-declare type TextAreaProps = {
-    /** The id of the text field that will be used as for in label too */
-    id?: string;
+} & Omit<TextFieldProps$1, "size"> & TestProps & React__default.RefAttributes<HTMLInputElement>>>;
+
+type TextInputBaseProps = {
+    /** The label of the text field that will be used as a placeholder and a label */
+    label: string;
     /** The placeholder of the input that will be used. This is shown if no label exists */
     placeholder?: string;
+    /** The size of input */
+    size?: ComponentSizes$1;
+    /** An optional suffix (element or icon-name) to show to the left */
+    suffix?: AcceptedIconNames$2 | React__default.ReactNode | null;
     /** If the text field value is required */
     isRequired?: boolean;
     /** If the text field is disabled */
     isDisabled?: boolean;
-    /** If the text area can be resized */
-    isResizeEnabled?: boolean;
-    /** Style of input field */
-    styleType?: formFieldStyles;
-    /** Error message */
-    hintMsg?: React.ReactNode | string;
-    /** The status of the button regarding the status which is in - default normal */
-    status?: 'success' | 'normal' | 'hint' | 'error';
-    /** Callback fired when the `input` is blurred. */
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    /** Callback fired when the `input` is changed. */
-    onChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-    /** Callback fired when the `input` is focused. */
-    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    /** Callback fired when the `input` has a key down event. */
-    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-    /** Callback fired when the `input` value typed is changed */
-    onInput?: React.EventHandler<any>;
+    /** The status of the TextInput with an optional hint message */
+    status?: {
+        type: 'normal' | 'error' | 'read-only';
+        hintMessage?: string;
+        id?: string;
+    };
+    /** value of the input */
+    value?: string | number;
+    /** Sx prop to override specific properties */
+    sx?: {
+        wrapper?: CSSObject;
+        textField?: CSSObject;
+        input?: CSSObject;
+    };
+    /** Whether the Textfield should change its styles when hovered/focused etc */
+    isInteractive?: boolean;
+    children?: React__default.ReactNode;
 } & TestProps;
-declare const TextArea: React.ForwardRefExoticComponent<{
+
+type TextAreaProps = {
     /** The id of the text field that will be used as for in label too */
-    id?: string | undefined;
+    id?: string;
+    /** The value of the textarea element */
+    value?: string;
     /** The placeholder of the input that will be used. This is shown if no label exists */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /** If the text field value is required */
-    isRequired?: boolean | undefined;
+    isRequired?: boolean;
+    /** Boolean to make the input readonly. Default to false. */
+    isReadOnly?: boolean;
     /** If the text field is disabled */
-    isDisabled?: boolean | undefined;
+    isDisabled?: boolean;
     /** If the text area can be resized */
-    isResizeEnabled?: boolean | undefined;
-    /** Style of input field */
-    styleType?: formFieldStyles | undefined;
-    /** Error message */
-    hintMsg?: React.ReactNode | string;
-    /** The status of the button regarding the status which is in - default normal */
-    status?: "error" | "success" | "normal" | "hint" | undefined;
+    isResizeEnabled?: boolean;
+    /** Number of maximum characters. Will be shown on the counter on the bottom right of the component */
+    maxCharacters?: number;
     /** Callback fired when the `input` is blurred. */
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     /** Callback fired when the `input` is changed. */
-    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onChange?: React$1.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /** Callback fired when the `input` is focused. */
-    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onFocus?: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     /** Callback fired when the `input` has a key down event. */
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onKeyDown?: React$1.KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     /** Callback fired when the `input` value typed is changed */
-    onInput?: ((event: any) => void) | undefined;
-} & TestProps & React.RefAttributes<HTMLTextAreaElement>>;
+    onInput?: React$1.EventHandler<any>;
+} & Omit<React$1.HTMLProps<HTMLTextAreaElement>, 'size'> & Pick<TextInputBaseProps, 'status' | 'label'> & TestProps;
+declare const _default: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>>;
 
-declare type ThemeProviderProps = {
+type ThemeProviderProps = {
     /** Theme properties to override or pass theming down to library */
     theme?: DeepPartial<ThemeConfig>;
 };
-declare const globalStyles: (theme: Theme$1) => _emotion_react.SerializedStyles;
-declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+declare const ThemeProvider: React$1.FCC<ThemeProviderProps>;
 
-declare type ToastProps = {
+type ToastProps = {
     /** The informative message of the Toast */
     message: string;
     /** The type of the Toast, will determine the color and the icon */
@@ -2055,13 +3311,46 @@ declare type ToastProps = {
     closeCTA: (() => void) | undefined;
     /** Initialize toast as expanded */
     isExpanded?: boolean;
+    /** If true, the Toast has a minimum-height */
+    hasMinimumHeight?: boolean;
     /** The data test id if needed */
     dataTestId?: TestId;
 };
 declare const isNotificationTypes: (type: string) => type is NotificationTypes;
-declare const Toast: React.FC<ToastProps>;
+declare const Toast: React$1.FCC<ToastProps>;
+
+type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+type InteractiveTooltip = {
+    isInteractive: true;
+    content: React.ReactNode;
+};
+type TextTooltip = {
+    isInteractive?: false;
+    content: string;
+};
+type TooltipContent = InteractiveTooltip | TextTooltip;
+type TooltipProps = TooltipContent & {
+    /** Whether the tooltip's style is inverted */
+    /** @default false */
+    isInverted?: boolean;
+    /** The placement where the tooltip will show */
+    /** @default top */
+    placement?: TooltipPlacement;
+    /** The unique id in order to link content and tooltip */
+    /** @default uuid */
+    id?: string;
+    /** Show delay for tooltip */
+    /** @default 500 */
+    delayIn?: number;
+    /** Hide delay for tooltip */
+    /** @default 500 */
+    delayOut?: number;
+    children: React.ReactElement;
+};
+
+declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare type UserMenuProps = {
+type UserMenuProps = {
     items: string[];
     userName: string;
     userAvatar: {
@@ -2069,7 +3358,7 @@ declare type UserMenuProps = {
         letter: string;
         color?: AvatarColors$1;
     };
-    onSelect: (selectedItem: string) => void;
+    onSelect: (selectedItem: string | number) => void;
 } & {
     isDark?: boolean;
 };
@@ -2101,7 +3390,7 @@ declare const TopAppBar: FC<TopAppBarProps>;
 
 declare const Filter: React__default.ForwardRefExoticComponent<FilterProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-declare type TruncatedContentProps = {
+type TruncatedContentProps = {
     /** The content of the tooltip */
     tooltipContent: string | undefined;
     /** Flag for overriding other settings to always show the tooltip */
@@ -2109,10 +3398,10 @@ declare type TruncatedContentProps = {
     /** The placement of the tooltip */
     placement?: 'top' | 'bottom' | 'right' | 'left';
 };
-declare const TruncatedContent: React__default.FC<TruncatedContentProps>;
+declare const TruncatedContent: React__default.FCC<TruncatedContentProps>;
 
 declare const useTheme: () => _emotion_react.Theme;
 
 declare const useEscape: (onEscape: () => void) => void;
 
-export { AcceptedColorComponentTypes, AcceptedIconNames, AnchorType, Avatar, AvatarColors, AvatarProps, AvatarSizes, AvatarStack, BackgroundColorProps, Banner, BannerProps, BarChart, BaseColorProps, BorderProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonStyleProps, Card, CardProps, Cell, CheckBox, CheckboxProps, Chip, ChipBaseProps, ChipProps, ContentComponent, DateFormatType, DatePicker, DatePickerProps, DisabledDates, DonutChart, Drawer, DrawerMenuItem, DrawerProps, Elevation, ExpandCollapse, ExpandCollapseProps, ExtendedColumn, ExternalProps, ExtraOption, Filter, FilterOption, FilterProps, FilterType, HoverBorderProps, INTERACTIVE, Icon, IconButton, IconButtonProps, IconProps, InlineNotification, InlineNotificationProps, InternalProps, Label, LabelProps, LineChart, _default$1 as List, ListItemType, ListProps, ListRowSize, Loader, LoaderProps, LoaderType, MAX, MIN, Menu, MenuProps, Modal, NotificationStyleType, NotificationTypes, NotificationVariants, NotificationVisual, NotificationVisualProps, NotificationsContainer, NotificationsContainerPositions, NotificationsContainerProps, Overlay, OverlayProps, Overrides, OwnProps, Pagination, PaginationProps, Palette, READ_ONLY, Radio, RadioGroup, RadioGroupProps, RadioProps, Row, STEP_WITH_INCREMENTS, SearchField, SearchFieldProps, Select, SelectHandlerType, SelectOption, SelectOptionValues, SelectProps, Selection, SharedProps, Slider, SliderProps, Snackbar, SnackbarProps, Sort, SortingOrder, Spacing, StyleType, Switch, SwitchProps, _default as Table, TableProps, TableType, TextArea, TextAreaProps, TextField, TextFieldProps, Theme, ThemeProvider, ThemeProviderProps, Toast, ToastProps, Tooltip, TooltipPlacement, TooltipProps, TooltipSize, TopAppBarProps, TopAppBar as TopNavBar, TruncatedContent, TruncatedContentProps, Typography, elevation_d as elevation, extraOptions, globalStyles, isNotificationTypes, onClickProp, overrides_d as overrides, palette_d as palette, queriesKeys, queriesSizes, spacing_d as spacing, styleType, defaultTheme as themeConfig, functions_d as themeFunctions, typography_d as typography, useBreakpoints, useEscape, useTheme };
+export { AcceptedColorComponentTypes, AcceptedIconNames, AnchorType, Avatar, AvatarColors, AvatarProps, AvatarSizes, AvatarStack, BackgroundColorProps, Banner, BannerProps, BarChart, BaseColorProps, BorderProps, Breadcrumb, Button, ButtonProps, ButtonStyleProps, CALENDAR_DEFAULT_OPTIONS, Card, CardProps, Cell, CheckBox, CheckboxProps, Chip, ChipBaseProps, ChipProps, ContentComponent, DateFormatType, _default$3 as DatePicker, DatePickerProps, DateRange, DisabledDates, DonutChart, Drawer, DrawerMenuItem, DrawerProps, Elevation, ExpandCollapse, ExpandCollapseProps, ExtendedColumn, ExternalProps, ExtraOption, Filter, FilterOption, FilterProps, FilterType, HoverBorderProps, INTERACTIVE, Icon, IconButton, IconButtonProps, IconButtonShape, IconProps, InlineNotification, InlineNotificationProps, InputProps$1 as InputProps, InteractiveTooltip, InternalProps, Label, LabelProps, LineChart, Link, List, ListItem, ListItemAction, ListItemText, ListItemType, ListProps, ListRowSize, ListSection, ListSelected, ListSelection, MAX, MIN, Menu, MenuProps, Modal, MultiSelectProps, NotificationActions, NotificationStyleType, NotificationTypes, NotificationVariants, NotificationVisual, NotificationVisualProps, NotificationsContainer, NotificationsContainerPositions, NotificationsContainerProps, Overlay, OverlayProps, Overrides, OwnProps, Pagination, PaginationProps, Palette, ProgressIndicator, Props, READ_ONLY, Radio, RadioContext, RadioGroup, Row, STEP_WITH_INCREMENTS, _default$1 as SearchField, SearchFieldProps, _default$5 as Select, SelectHandlerType, SelectOption, SelectOptionBase, SelectOptionValues, SelectProps, Selection, SharedProps, SingleSelectProps, Slider, SliderProps, Snackbar, SnackbarProps, Sort, SortingOrder, Spacing, _default$4 as StatefulSelect, StyleType, Switch, SwitchProps, _default$2 as Table, TableProps, TableType, Tag, TagColors, TagProps, TagSizes, _default as TextArea, TextAreaProps, _default$6 as TextField, TextFieldProps, TextTooltip, Theme, ThemeProvider, ThemeProviderProps, Toast, ToastProps, Tooltip, TooltipContent, TooltipPlacement, TooltipProps, TopAppBarProps, TopAppBar as TopNavBar, TruncatedContent, TruncatedContentProps, Typography, elevation_d as elevation, emptyValue, isNotificationTypes, overrides_d as overrides, palette_d as palette, queriesKeys, queriesSizes, spacing_d as spacing, styleType, defaultTheme as themeConfig, functions_d as themeFunctions, typography_d as typography, useBreakpoints, useEscape, useRadioGroupContent, useTheme };