@zextras/carbonio-design-system 6.0.2-react18.0 → 7.0.0-devel.1

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../docs/**/*.mdx'],
+	addons: [
+        '@storybook/addon-webpack5-compiler-babel',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@storybook/test',
+    ],
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {}
+	},
+	typescript: {
+		reactDocgen: 'react-docgen-typescript'
+	}
+};
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { ThemeProvider } from '../src';
+import { StoryFn, Preview } from '@storybook/react';
+
+export const decorators = [
+	(Story: StoryFn) => (
+		<ThemeProvider>
+			<Story />
+		</ThemeProvider>
+	),
+];
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+	},
+};
+
+export default preview;

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.40.1"
+    }
+  ]
+}

package/dist/zapp-ui.bundle.d.ts

@@ -88,11 +88,11 @@ declare type ActionButton = ButtonProps & {
     backgroundColor?: never;
 };
 
-declare type AnyColor = LiteralUnion<PaletteColor, string>;
+export declare type AnyColor = LiteralUnion<PaletteColor, string>;
 
-export declare const Avatar: React_2.ForwardRefExoticComponent<AvatarPropTypes & React_2.RefAttributes<HTMLDivElement>>;
+export declare const Avatar: React_2.ForwardRefExoticComponent<AvatarComponentProps & Omit<React_2.HTMLAttributes<HTMLDivElement>, keyof AvatarComponentProps> & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare interface AvatarPropTypes extends HTMLAttributes<HTMLDivElement> {
+declare interface AvatarComponentProps {
     /** size of the Avatar circle */
     size?: keyof DefaultTheme['sizes']['avatar'];
     /** url to the profile picture */
@@ -119,6 +119,8 @@ export declare interface AvatarPropTypes extends HTMLAttributes<HTMLDivElement>
     disabled?: boolean;
 }
 
+export declare type AvatarPropTypes = AvatarComponentProps & Omit<HTMLAttributes<HTMLDivElement>, keyof AvatarComponentProps>;
+
 declare type AvatarSkeletonComponentProps = {
     variant?: string;
     radius?: string;
@@ -126,15 +128,17 @@ declare type AvatarSkeletonComponentProps = {
     width?: string;
 };
 
-export declare const Badge: React_2.ForwardRefExoticComponent<BadgeProps & React_2.RefAttributes<HTMLSpanElement>>;
+export declare const Badge: React_2.ForwardRefExoticComponent<BadgeComponentProps & Omit<React_2.HTMLAttributes<HTMLSpanElement>, keyof BadgeComponentProps> & React_2.RefAttributes<HTMLSpanElement>>;
 
-export declare interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+declare interface BadgeComponentProps {
     /** Badge type */
     type?: 'read' | 'unread';
     /** Badge text */
     value: string | number;
 }
 
+export declare type BadgeProps = BadgeComponentProps & Omit<HTMLAttributes<HTMLSpanElement>, keyof BadgeComponentProps>;
+
 declare type BadgeSkeletonProps = {
     variant?: string;
     radius?: string;
@@ -170,7 +174,7 @@ export declare type BannerProps = HTMLAttributes<HTMLDivElement> & {
 
 declare type BareModalProps = {
     /** Modal background */
-    background?: string | keyof DefaultTheme['palette'];
+    background?: AnyColor;
     /** Modal size */
     size?: 'extrasmall' | 'small' | 'medium' | 'large';
     /** Boolean to show the modal */
@@ -215,16 +219,16 @@ declare type ButtonColorsByType = ({
     type?: 'default' | 'outlined';
 } & ({
     /** Main color */
-    color?: string | keyof DefaultTheme['palette'];
+    color?: AnyColor;
 } | {
     /** Background color of the button (only for 'default' and 'outlined' types, to use instead of color for more specificity) */
-    backgroundColor?: string | keyof DefaultTheme['palette'];
+    backgroundColor?: AnyColor;
     /** Specific color of the content (only for 'default' and 'outlined' types, to use instead of color for more specificity) */
-    labelColor?: string | keyof DefaultTheme['palette'];
+    labelColor?: AnyColor;
 })) | {
     type: 'ghost';
     /** Main color */
-    color?: string | keyof DefaultTheme['palette'];
+    color?: AnyColor;
 };
 
 declare type ButtonIconPlacement = 'left' | 'right';
@@ -262,7 +266,7 @@ declare type ButtonPropsInternal = {
 } | {
     /** Size variant of the button */
     size?: ButtonSize;
-    secondaryAction?: undefined;
+    secondaryAction?: never;
 }) & ButtonColorsByType;
 
 export declare interface ButtonSecondaryAction {
@@ -303,7 +307,6 @@ export declare class Catcher extends React_2.Component<CatcherProps, CatcherStat
 export declare interface CatcherProps {
     /** error callback, use this to perform operations when an error is caught */
     onError?: (error: Error, errorInfo: ErrorInfo) => void;
-    children?: React_2.ReactNode;
 }
 
 declare interface CatcherState {
@@ -323,7 +326,7 @@ export declare interface CheckboxProps extends Omit<ContainerProps, 'onChange' |
      */
     iconSize?: keyof DefaultTheme['sizes']['icon'];
     /** Checkbox color */
-    iconColor?: keyof DefaultTheme['palette'] | string;
+    iconColor?: AnyColor;
     /** Checkbox text */
     label?: string;
     /** Checkbox padding */
@@ -524,7 +527,7 @@ export declare interface ChipProps extends RowProps {
     tooltipPlacement?: React_2.ComponentPropsWithoutRef<typeof Tooltip>['placement'];
 }
 
-export declare type CloseModalFn = () => void;
+export declare type CloseModalFn = (id: string) => void;
 
 export declare type CloseSnackbarFn = () => void;
 
@@ -586,42 +589,42 @@ declare interface ContainerElProps {
      *  	number: measure in px
      *  	string: any measure in CSS syntax
      */
-    height?: 'fit' | 'fill' | CSSStyleDeclaration['height'] | number;
+    height?: LiteralUnion<'fit' | 'fill', CSSStyleDeclaration['height']> | number;
     /** Container minHeight: <br/>
      *  	`fit`: shorthand for fit-content
      *  	`fill`: semantic alternative for `100%`
      *  	number: measure in px
      *  	string: any measure in CSS syntax
      */
-    minHeight?: 'fit' | 'fill' | CSSStyleDeclaration['minHeight'] | number;
+    minHeight?: LiteralUnion<'fit' | 'fill', CSSStyleDeclaration['minHeight']> | number;
     /** Container maxHeight: <br/>
      *  	`fit`: shorthand for fit-content
      *  	`fill`: semantic alternative for `100%`
      *  	number: measure in px
      *  	string: any measure in CSS syntax
      */
-    maxHeight?: 'fit' | 'fill' | CSSStyleDeclaration['maxHeight'] | number;
+    maxHeight?: LiteralUnion<'fit' | 'fill', CSSStyleDeclaration['maxHeight']> | number;
     /** Container width: <br/>
      *  	`fit`: shorthand for fit-content
      *  	`fill`: semantic alternative for `100%`
      *  	number: measure in px
      *  	string: any measure in CSS syntax
      */
-    width?: 'fit' | 'fill' | CSSStyleDeclaration['width'] | number;
+    width?: LiteralUnion<'fit' | 'fill', CSSStyleDeclaration['width']> | number;
     /** Container minWidth: <br/>
      *  	`fit`: shorthand for fit-content
      *  	`fill`: semantic alternative for `100%`
      *  	number: measure in px
      *  	string: any measure in CSS syntax
      */
-    minWidth?: 'fit' | 'fill' | CSSStyleDeclaration['minWidth'] | number;
+    minWidth?: LiteralUnion<'fit' | 'fill', CSSStyleDeclaration['minWidth']> | number;
     /** Container maxWidth: <br/>
      *  	`fit`: shorthand for fit-content
      *  	`fill`: semantic alternative for `100%`
      *  	number: measure in px
      *  	string: any measure in CSS syntax
      */
-    maxWidth?: 'fit' | 'fill' | CSSStyleDeclaration['maxWidth'] | number;
+    maxWidth?: LiteralUnion<'fit' | 'fill', CSSStyleDeclaration['maxWidth']> | number;
     /** Container flex alignment along the main axis */
     mainAlignment?: 'stretch' | 'center' | 'baseline' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'unset';
     /** Container flex alignment along the cross axis */
@@ -678,9 +681,13 @@ declare type ControlledTableProps = {
     multiSelect?: true;
 });
 
-export declare type CreateModalArgs = [modalProps: ModalProps, customModal?: false] | [customModalProps: CustomModalProps, customModal: true];
+export declare type CreateModalArgs = [modalProps: ModalProps & {
+    id: string;
+}, customModal?: false] | [customModalProps: CustomModalProps & {
+    id: string;
+}, customModal: true];
 
-export declare type CreateModalFn = (...args: CreateModalArgs) => CloseModalFn;
+export declare type CreateModalFn = (...args: CreateModalArgs) => void;
 
 export declare type CreateSnackbarFn = (props: CreateSnackbarFnArgs) => CloseSnackbarFn;
 
@@ -757,28 +764,30 @@ export declare interface DateTimePickerProps extends Omit<ReactDatePickerProps,
     disabled?: boolean;
 }
 
-export declare const DefaultHeaderFactory: ({ headers, onChange, allSelected, selectionMode, multiSelect, showCheckbox }: THeaderProps) => React_2.JSX.Element;
+export declare const DefaultHeaderFactory: React_2.VFC<THeaderProps>;
 
-export declare const DefaultRowFactory: ({ index, row, onChange, selected, selectionMode, multiSelect, showCheckbox }: TRowProps) => React_2.JSX.Element;
+export declare const DefaultRowFactory: React_2.VFC<TRowProps>;
 
 export declare const DefaultTabBarItem: React_2.ForwardRefExoticComponent<DefaultTabBarItemProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface DefaultTabBarItemProps extends ContainerProps {
     item: Item;
     selected: boolean;
-    background: AnyColor;
-    onClick: (ev: React_2.MouseEvent<HTMLDivElement> | KeyboardEvent) => void;
-    underlineColor: AnyColor;
+    background: string | keyof DefaultTheme['palette'];
+    onClick: React_2.ReactEventHandler;
+    underlineColor: string | keyof DefaultTheme['palette'];
     forceWidthEquallyDistributed: boolean;
 }
 
-export declare const Divider: React_2.ForwardRefExoticComponent<Partial<DividerProps> & React_2.RefAttributes<HTMLDivElement>>;
+export declare const Divider: React_2.ForwardRefExoticComponent<Omit<React_2.HTMLAttributes<HTMLDivElement>, "color"> & Partial<DividerComponentProps> & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+declare interface DividerComponentProps {
     /** Divider color */
-    color: string | keyof DefaultTheme['palette'];
+    color: AnyColor;
 }
 
+export declare type DividerProps = Omit<HTMLAttributes<HTMLDivElement>, keyof DividerComponentProps> & Partial<DividerComponentProps>;
+
 export declare const Drag: React_2.ForwardRefExoticComponent<DragProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare type DragObj = {
@@ -927,6 +936,10 @@ export declare const FormRow: React_2.ForwardRefExoticComponent<FormElementProps
 
 export declare const FormSection: React_2.ForwardRefExoticComponent<FormElementProps & React_2.RefAttributes<HTMLDivElement>>;
 
+declare type FormSectionSkeletonProps = {
+    variant: string;
+};
+
 export declare const FormSubSection: React_2.ForwardRefExoticComponent<FormElementProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare const generateColorSet: ({ regular, hover, active, disabled, focus }: Pick<ThemeColorObj, 'regular'> & Partial<Omit<ThemeColorObj, 'regular'>>, dark?: boolean) => ThemeColorObj;
@@ -990,7 +1003,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  declare type HTMLTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
 
- export declare const Icon: React_2.ForwardRefExoticComponent<IconProps & React_2.RefAttributes<SVGSVGElement>>;
+ export declare const Icon: React_2.ForwardRefExoticComponent<IconComponentProps & StyledIconProps & React_2.RefAttributes<SVGSVGElement>>;
 
  export declare const IconButton: React_2.ForwardRefExoticComponent<IconButtonProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -1047,23 +1060,15 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  declare type IconComponent = (props: SVGProps<SVGSVGElement>) => React_2.JSX.Element;
 
- export declare interface IconComponentProps extends SVGAttributes<SVGSVGElement> {
+ declare interface IconComponentProps extends SVGAttributes<SVGSVGElement> {
      /** Icon to show. It can be a string key for the theme icons or a custom icon component */
      icon: keyof DefaultTheme['icons'] | IconComponent;
-     /** whether the icon is in a disabled element */
-     disabled?: boolean;
  }
 
- export declare interface IconProps extends IconComponentProps {
-     /** Icon Color */
-     color?: AnyColor;
-     /** Icon size */
-     size?: keyof DefaultTheme['sizes']['icon'];
- }
+ export declare type IconProps = IconComponentProps & StyledIconProps;
 
  declare type IconSkeletonProps = {
      variant?: string;
-     backgroundSize?: string;
      size?: keyof typeof SIZES;
      width?: string;
  };
@@ -1114,7 +1119,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      /** on Enter key callback */
      onEnter?: (e: KeyboardEvent) => void;
      /** Description of the input */
-     description?: string | undefined;
+     description?: string;
  }
 
  export declare function isThemeColor(color: string, theme: DefaultTheme): color is ThemePaletteColorKey;
@@ -1151,6 +1156,10 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      haveToPreventDefault?: boolean;
  };
 
+ declare type KeysWithPrefix<TObject, TPrefix extends string, TKeys extends keyof TObject = keyof TObject> = {
+     [K in TKeys as K extends string ? WithPrefix<K, TPrefix> : never]: TObject[K];
+ };
+
  export declare interface LabelFactoryProps<T = string> {
      label: string | undefined;
      open: boolean;
@@ -1176,7 +1185,17 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export declare const ListItem: React_2.ForwardRefExoticComponent<ListItemProps & React_2.RefAttributes<HTMLDivElement>>;
 
- export declare interface ListItemProps extends ListItemWrapperProps {
+ export declare interface ListItemProps {
+     /** Base background color for the item */
+     background?: AnyColor;
+     /** Background color for the selected status */
+     selectedBackground?: AnyColor;
+     /** Background color for the active status */
+     activeBackground?: AnyColor;
+     /** Define if the item is active in order to show the activeBackground */
+     active?: boolean;
+     /** Define if the item is selected in order to show the selectedBackground */
+     selected?: boolean;
      /**
       * Ref of the list used to set the visibility of the item.
       * The ref is set by the list itself.
@@ -1194,13 +1213,16 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      key: NonNullable<React_2.HTMLProps<HTMLDivElement>['key']>;
  }
 
+ /**
+  * @deprecated Use ListItemProps instead
+  */
  export declare interface ListItemWrapperProps {
      /** Base background color for the item */
-     background?: string | keyof DefaultTheme['palette'];
+     background?: AnyColor;
      /** Background color for the selected status */
-     selectedBackground?: string | keyof DefaultTheme['palette'];
+     selectedBackground?: AnyColor;
      /** Background color for the active status */
-     activeBackground?: string | keyof DefaultTheme['palette'];
+     activeBackground?: AnyColor;
      /** Define if the item is active in order to show the activeBackground */
      active?: boolean;
      /** Define if the item is selected in order to show the selectedBackground */
@@ -1259,7 +1281,6 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  declare type LogoSkeletonProps = {
      variant?: string;
-     backgroundSize?: string;
      radius?: string;
      size?: keyof typeof SIZES;
      width?: string;
@@ -1267,7 +1288,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
  };
 
  export declare const Modal: React_2.ForwardRefExoticComponent<{
-     background?: string | undefined;
+     background?: AnyColor | undefined;
      size?: "small" | "extrasmall" | "medium" | "large" | undefined;
      open?: boolean | undefined;
      zIndex?: number | undefined;
@@ -1278,7 +1299,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      onClose?: ((event: KeyboardEvent | React_2.MouseEvent<Element, MouseEvent>) => void) | undefined;
      containerWindow?: Window | undefined;
  } & Omit<React_2.HTMLAttributes<HTMLDivElement>, "title" | keyof {
-     background?: string | undefined;
+     background?: AnyColor | undefined;
      size?: "small" | "extrasmall" | "medium" | "large" | undefined;
      open?: boolean | undefined;
      zIndex?: number | undefined;
@@ -1301,14 +1322,18 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      closeIconTooltip?: string | undefined;
  } & Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> & React_2.RefAttributes<HTMLDivElement>>;
 
- export declare const ModalBody: StyledComponent<"div", DefaultTheme, {
- maxHeight?: string | undefined;
- centered?: boolean | undefined;
- }, never>;
+ export declare const ModalBody: React_2.ForwardRefExoticComponent<ModalBodyProps & React_2.RefAttributes<HTMLDivElement>>;
+
+ export declare interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+     /** Max height of the body container */
+     maxHeight?: string;
+     /** Align text to the center */
+     centered?: boolean;
+ }
 
  export declare const ModalFooter: ({ customFooter, ...modalFooterContentProps }: ModalFooterProps) => React_2.JSX.Element;
 
- export declare const ModalFooterContent: ({ type, centered, onConfirm, confirmLabel, confirmDisabled, confirmTooltip, confirmColor, onSecondaryAction, secondaryActionLabel, secondaryActionDisabled, onClose, dismissLabel, errorActionLabel, optionalFooter, onErrorAction, secondaryActionTooltip }: ModalFooterContentProps) => React_2.JSX.Element;
+ export declare const ModalFooterContent: React_2.VFC<ModalFooterContentProps>;
 
  export declare type ModalFooterContentProps = Omit<ModalFooterProps, 'customFooter'>;
 
@@ -1352,17 +1377,20 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
  export declare const ModalHeader: ({ centered, onClose, showCloseIcon, title, type, closeIconTooltip }: ModalHeaderProps) => React_2.JSX.Element;
 
  export declare interface ModalHeaderProps {
-     centered?: boolean | undefined;
-     type?: 'default' | 'error' | undefined;
-     title?: string | React_2.ReactElement | undefined;
-     showCloseIcon?: boolean | undefined;
-     onClose?: ((event: React_2.MouseEvent | KeyboardEvent) => void) | undefined;
+     centered?: boolean;
+     type?: 'default' | 'error';
+     title?: string | React_2.ReactElement;
+     showCloseIcon?: boolean;
+     onClose?: (event: React_2.MouseEvent | KeyboardEvent) => void;
      closeIconTooltip?: string;
  }
 
  export declare function ModalManager({ children }: ModalManagerProps): React_2.JSX.Element;
 
- export declare const ModalManagerContext: React_2.Context<CreateModalFn | undefined>;
+ export declare const ModalManagerContext: React_2.Context<{
+     createModal: CreateModalFn;
+     closeModal: CloseModalFn;
+ } | undefined>;
 
  export declare type ModalManagerProps = React_2.PropsWithChildren<Record<string, unknown>>;
 
@@ -1434,7 +1462,13 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      maxVisible?: number;
  };
 
- export declare const Padding: React_2.ForwardRefExoticComponent<(PaddingProps & Omit<React_2.HTMLAttributes<HTMLDivElement>, "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "color" | "height" | "id" | "lang" | "width" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "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-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "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" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is">) & React_2.RefAttributes<HTMLDivElement>>;
+ export declare const Padding: React_2.ForwardRefExoticComponent<PaddingProps & React_2.RefAttributes<HTMLDivElement>>;
+
+ declare type PaddingComponentProps = {
+     width?: string;
+     height?: string;
+     children?: React_2.ReactNode | React_2.ReactNode[];
+ } & PaddingObj;
 
  export declare type PaddingObj = {
      value: string | keyof DefaultTheme['sizes']['padding'] | 0;
@@ -1450,17 +1484,13 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      left: string | keyof DefaultTheme['sizes']['padding'] | 0;
  }>;
 
- export declare type PaddingProps = {
-     width?: string;
-     height?: string;
-     children?: React_2.ReactNode | React_2.ReactNode[];
- } & PaddingObj & HTMLAttributes<HTMLDivElement>;
+ export declare type PaddingProps = PaddingComponentProps & Omit<HTMLAttributes<HTMLDivElement>, keyof PaddingComponentProps>;
 
  declare type PaddingString = `${string | keyof DefaultTheme['sizes']['padding']}`;
 
  declare type PaddingStringComposition = PaddingString | `${PaddingString} | ${PaddingString}` | `${PaddingString} ${PaddingString} ${PaddingString}` | `${PaddingString} ${PaddingString} ${PaddingString} ${PaddingString}`;
 
- declare type PaletteColor = keyof DefaultTheme['palette'];
+ export declare type PaletteColor = keyof DefaultTheme['palette'];
 
  export declare const Paragraph: React_2.ForwardRefExoticComponent<TextProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -1615,9 +1645,6 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export declare interface RowProps extends ContainerProps {
      display?: string;
-     flexBasis?: string;
-     flexGrow?: 'unset' | number;
-     flexShrink?: 'unset' | number;
      order?: 'unset' | number;
      takeAvailableSpace?: boolean;
  }
@@ -1669,8 +1696,8 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  declare type ShapeType = 'round' | 'square';
 
- export declare type Shimmer = React_2.FunctionComponent<SkeletonProps> & {
-     [K in keyof typeof ShimmerObject]: React_2.FunctionComponent<Parameters<(typeof ShimmerObject)[K]>[number]>;
+ export declare type Shimmer = React_2.VFC<SkeletonProps> & {
+     [K in keyof typeof ShimmerObject]: React_2.VFC<Parameters<(typeof ShimmerObject)[K]>[number]>;
  };
 
  export declare const Shimmer: Shimmer;
@@ -1682,25 +1709,19 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
          iconEnd: boolean;
          badge: boolean;
      }) => React_2.JSX.Element;
-     Avatar: ({ size, ...rest }: AvatarSkeletonComponentProps) => React_2.JSX.Element;
-     Badge: ({ size, ...rest }: BadgeSkeletonProps) => React_2.JSX.Element;
-     Button: ({ size, ...rest }: ButtonSkeletonProps) => React_2.JSX.Element;
-     Checkbox: ({ size, ...rest }: IconSkeletonProps) => React_2.JSX.Element;
+     Avatar: ({ size, width, variant, radius, ...rest }: AvatarSkeletonComponentProps) => React_2.JSX.Element;
+     Badge: ({ size, variant, radius, width, height, ...rest }: BadgeSkeletonProps) => React_2.JSX.Element;
+     Button: ({ size, width, variant, radius, height, ...rest }: ButtonSkeletonProps) => React_2.JSX.Element;
+     Checkbox: ({ size, variant, width, ...rest }: IconSkeletonProps) => React_2.JSX.Element;
      EmailChip: ({ width, iconStart, iconEnd, iconEndAdditional }: {
          width?: string;
          iconStart?: boolean;
          iconEnd?: boolean;
          iconEndAdditional?: boolean;
      }) => React_2.JSX.Element;
-     FormSection: StyledComponent<React_2.ForwardRefExoticComponent<FormElementProps & React_2.RefAttributes<HTMLDivElement>>, DefaultTheme, {
-     variant: string;
-     backgroundSize: string;
-     }, never>;
-     FormSubSection: StyledComponent<React_2.ForwardRefExoticComponent<FormElementProps & React_2.RefAttributes<HTMLDivElement>>, DefaultTheme, {
-     variant: string;
-     backgroundSize: string;
-     }, never>;
-     Icon: ({ size, ...rest }: IconSkeletonProps) => React_2.JSX.Element;
+     FormSection: ({ variant }: FormSectionSkeletonProps) => React_2.JSX.Element;
+     FormSubSection: ({ variant }: FormSectionSkeletonProps) => React_2.JSX.Element;
+     Icon: ({ size, variant, width, ...rest }: IconSkeletonProps) => React_2.JSX.Element;
      Input: ({ width, checkbox }: {
          width?: string;
          checkbox?: boolean;
@@ -1709,16 +1730,16 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
          width?: string;
          type?: number;
      }) => React_2.JSX.Element;
-     Logo: ({ size, ...rest }: LogoSkeletonProps) => React_2.JSX.Element;
-     Text: StyledComponent<"div", DefaultTheme, SkeletonProps, never>;
-     Quota: (props: SkeletonProps) => React_2.JSX.Element;
-     Searchbar: (props: SkeletonProps) => React_2.JSX.Element;
+     Logo: ({ size, variant, radius, height, width, ...rest }: LogoSkeletonProps) => React_2.JSX.Element;
+     Text: StyledComponent<"div", DefaultTheme, With$Prefix<SkeletonProps>, never>;
+     Quota: ({ radius, height, width, variant, orientation, mainAlignment }: SkeletonProps) => React_2.JSX.Element;
+     Searchbar: ({ radius, height, variant, orientation, mainAlignment, width }: SkeletonProps) => React_2.JSX.Element;
      Snackbar: ({ width, elementStart, elementEnd }: {
          width?: string;
          elementStart?: boolean;
          elementEnd?: boolean;
      }) => React_2.JSX.Element;
-     Stepper: ({ size, steppersNumber, ...rest }: AvatarSkeletonComponentProps & {
+     Stepper: ({ size, steppersNumber, variant, radius, width }: AvatarSkeletonComponentProps & {
          steppersNumber: number;
      }) => React_2.JSX.Element;
      TableListItem: ({ width, type }: {
@@ -1739,7 +1760,6 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export declare type SkeletonProps = {
      variant?: string;
-     backgroundSize?: string;
      radius?: string;
      orientation?: string;
      mainAlignment?: string;
@@ -1815,7 +1835,16 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
  export declare const Spinner: React_2.ForwardRefExoticComponent<SpinnerProps & React_2.RefAttributes<HTMLDivElement>>;
 
  export declare interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
-     color: string | keyof DefaultTheme['palette'];
+     color: AnyColor;
+ }
+
+ declare interface StyledIconProps {
+     /** Icon Color */
+     color?: AnyColor;
+     /** Icon size */
+     size?: keyof DefaultTheme['sizes']['icon'];
+     /** whether the icon is in a disabled element */
+     disabled?: boolean;
  }
 
  declare type StyleObj = HTMLAttributes<HTMLDivElement>['style'];
@@ -1861,11 +1890,11 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      /** id of the selected item */
      selected: string;
      /** change callback, is called with the new selected id */
-     onChange: (ev: React_2.MouseEvent<HTMLDivElement> | KeyboardEvent, selectedId: string) => void;
+     onChange: (ev: React_2.SyntheticEvent, selectedId: string) => void;
      /** background color of the tabBar */
-     background: AnyColor;
+     background: string | keyof DefaultTheme['palette'];
      /** underline color of the selected tab */
-     underlineColor?: AnyColor;
+     underlineColor?: string | keyof DefaultTheme['palette'];
      /** Force tabs to have all the same width */
      forceWidthEquallyDistributed?: boolean;
  }
@@ -2031,7 +2060,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  declare type ThemePaletteObj = DefaultTheme['palette'];
 
- export declare const ThemeProvider: ({ children, extension, loadDefaultFont }: React_2.PropsWithChildren<ThemeProviderProps>) => React_2.JSX.Element;
+ export declare const ThemeProvider: React_2.FC<ThemeProviderProps>;
 
  export declare interface ThemeProviderProps {
      extension?: (theme: DefaultTheme) => DefaultTheme;
@@ -2184,7 +2213,10 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
   */
  export declare function useKeyboard(ref: React_2.RefObject<HTMLElement>, presets: KeyboardPresetObj[]): void;
 
- export declare function useModal(): CreateModalFn;
+ export declare function useModal(): {
+     createModal: CreateModalFn;
+     closeModal: CloseModalFn;
+ };
 
  export declare function useScreenMode(target?: Window): ScreenMode;
 
@@ -2194,6 +2226,10 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export declare const useTheme: () => DefaultTheme;
 
+ declare type With$Prefix<TProps> = KeysWithPrefix<TProps, '$'>;
+
+ declare type WithPrefix<TString extends string, TPrefix extends string> = `${TPrefix}${TString}`;
+
  export declare function ZimbraClassicThemeContextProvider({ styleSheetTarget, children, extension, loadDefaultFont }: ZimbraClassicThemeContextProviderProps): React_2.JSX.Element;
 
  export declare interface ZimbraClassicThemeContextProviderProps {