@zextras/carbonio-design-system 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.1](https://github.com/Zextras/carbonio-design-system/compare/v0.5.0...v0.5.1) (2022-11-10)
+
+
+### Features
+
+* convert px to rem ([67e898f](https://github.com/Zextras/carbonio-design-system/commit/67e898f40d4cc40452d75cb33e91a2f3050f3984)), closes [#134](https://github.com/Zextras/carbonio-design-system/issues/134)
+* **icons:** migrate icons to ts and update icon set ([b7660e9](https://github.com/Zextras/carbonio-design-system/commit/b7660e97cd0580487e6b606c6e5ca717ffe0cba5)), closes [#135](https://github.com/Zextras/carbonio-design-system/issues/135) [#139](https://github.com/Zextras/carbonio-design-system/issues/139)
+
+
+### Bug Fixes
+
+* apply right conversion to modal medium size ([83a4a8b](https://github.com/Zextras/carbonio-design-system/commit/83a4a8bb22c7bc167c577bda73e140beb4cc8e4c)), closes [#140](https://github.com/Zextras/carbonio-design-system/issues/140)
+* **ModalContent:** remove default for min-height ([dfd7e37](https://github.com/Zextras/carbonio-design-system/commit/dfd7e376817f44bdf041aca51960aafffde015d7)), closes [#138](https://github.com/Zextras/carbonio-design-system/issues/138)
+
 ## [0.5.0](https://github.com/Zextras/carbonio-design-system/compare/v0.4.1...v0.5.0) (2022-10-14)
 
 

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

@@ -15,6 +15,7 @@ import { ReactDatePickerProps } from 'react-datepicker';
 import { RefAttributes } from 'react';
 import { StyledComponent } from 'styled-components';
 import { SVGAttributes } from 'react';
+import { SVGProps } from 'react';
 import { ThemeContext } from 'styled-components';
 
 export declare const Accordion: React_2.ForwardRefExoticComponent<AccordionProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -35,7 +36,7 @@ export declare type AccordionItemType = {
     label?: string;
     items?: AccordionItemType[];
     onClick?: (event: KeyboardEvent | React_2.SyntheticEvent) => void;
-    icon?: keyof ThemeObj['icons'];
+    icon?: keyof DefaultTheme['icons'];
     CustomComponent?: React_2.ComponentType<{
         item: AccordionItemType;
     }>;
@@ -44,7 +45,7 @@ export declare type AccordionItemType = {
     badgeType?: 'read' | 'unread';
     badgeCounter?: number;
     open?: boolean;
-    background?: keyof ThemeObj['palette'];
+    background?: keyof DefaultTheme['palette'];
     disableHover?: boolean;
     active?: boolean;
     level?: number;
@@ -59,7 +60,7 @@ export declare interface AccordionProps extends ContainerProps {
     /** Depth level, internally used for recursion nesting */
     level?: number;
     /** Accordion background */
-    background?: keyof ThemeObj['palette'];
+    background?: keyof DefaultTheme['palette'];
     /** id of the currently active item (alternative to the active item flag) */
     activeId?: string;
     /** list of ids of the currently open items (alternative to the open item flag) */
@@ -77,7 +78,7 @@ export declare const Avatar: React_2.ForwardRefExoticComponent<AvatarPropTypes &
 
 export declare interface AvatarPropTypes extends HTMLAttributes<HTMLDivElement> {
     /** size of the Avatar circle */
-    size?: keyof ThemeObj['sizes']['avatar'];
+    size?: keyof DefaultTheme['sizes']['avatar'];
     /** url to the profile picture */
     picture?: string;
     /** string to be used as capitals, or for its calculation */
@@ -148,16 +149,16 @@ declare type ButtonColorsByType = ({
     type?: 'default' | 'outlined';
 } & ({
     /** Main color */
-    color?: string | keyof ThemeObj['palette'];
+    color?: string | keyof DefaultTheme['palette'];
 } | {
     /** Background color of the button (only for 'default' and 'outlined' types, to use instead of color for more specificity) */
-    backgroundColor?: string | keyof ThemeObj['palette'];
+    backgroundColor?: string | keyof DefaultTheme['palette'];
     /** Specific color of the content (only for 'default' and 'outlined' types, to use instead of color for more specificity) */
-    labelColor?: string | keyof ThemeObj['palette'];
+    labelColor?: string | keyof DefaultTheme['palette'];
 })) | {
     type: 'ghost';
     /** Main color */
-    color?: string | keyof ThemeObj['palette'];
+    color?: string | keyof DefaultTheme['palette'];
 };
 
 declare type ButtonIconPlacement = 'left' | 'right';
@@ -168,11 +169,11 @@ export declare interface ButtonOldProps {
     /** Type of button */
     type?: ButtonType;
     /** Color of button */
-    color?: string | keyof ThemeObj['palette'];
+    color?: string | keyof DefaultTheme['palette'];
     /** Color of the Button label */
-    labelColor?: string | keyof ThemeObj['palette'];
+    labelColor?: string | keyof DefaultTheme['palette'];
     /** Color of the Button background */
-    backgroundColor?: string | keyof ThemeObj['palette'];
+    backgroundColor?: string | keyof DefaultTheme['palette'];
     /** Button text */
     label: string;
     /** `fit`: assume the size of the content
@@ -181,7 +182,7 @@ export declare interface ButtonOldProps {
      */
     size?: 'fit' | 'fill';
     /** optional icon to display beside the label */
-    icon?: keyof ThemeObj['icons'];
+    icon?: keyof DefaultTheme['icons'];
     /** Icon position */
     iconPlacement?: 'left' | 'right';
     /** whether to show the loading icon */
@@ -283,9 +284,9 @@ export declare interface CheckboxProps extends Omit<ContainerProps, 'onChange' |
     /** Checkbox size
      * @deprecated use size instead
      */
-    iconSize?: keyof ThemeObj['sizes']['icon'];
+    iconSize?: keyof DefaultTheme['sizes']['icon'];
     /** Checkbox color */
-    iconColor?: keyof ThemeObj['palette'] | string;
+    iconColor?: keyof DefaultTheme['palette'] | string;
     /** Checkbox text */
     label?: string;
     /** Checkbox padding */
@@ -306,11 +307,11 @@ export declare const Chip: React_2.ForwardRefExoticComponent<ChipProps & React_2
 
 export declare type ChipAction = {
     /** Chip action icon color */
-    color?: keyof ThemeObj['palette'];
+    color?: keyof DefaultTheme['palette'];
     /** Chip action disabled status */
     disabled?: boolean;
     /** Chip action icon */
-    icon: keyof ThemeObj['icons'];
+    icon: keyof DefaultTheme['icons'];
     /** Chip action id (required for key attribute) */
     id: string;
     /** Chip action label value. It is shown in a tooltip. To not render the tooltip, just don't value the prop.
@@ -322,7 +323,7 @@ export declare type ChipAction = {
     /** Chip action click callback (button type only). NB: onClick event IS propagated. It's up to the dev to eventually stop the propagation */
     onClick: IconButtonProps['onClick'];
     /** Chip action background (button type only) */
-    background?: keyof ThemeObj['palette'];
+    background?: keyof DefaultTheme['palette'];
 } | {
     /** Chip action type */
     type: 'icon';
@@ -375,7 +376,7 @@ export declare interface ChipInputProps extends Omit<ContainerProps, 'defaultVal
      */
     confirmChipOnSpace?: boolean;
     /** ChipInput backgroundColor */
-    background?: keyof ThemeObj['palette'];
+    background?: keyof DefaultTheme['palette'];
     /** Chip generation triggers */
     separators?: string[];
     /** Show the error  */
@@ -386,7 +387,7 @@ export declare interface ChipInputProps extends Omit<ContainerProps, 'defaultVal
      */
     errorLabel?: string | undefined;
     /** Background color for the error status */
-    errorBackgroundColor?: keyof ThemeObj['palette'];
+    errorBackgroundColor?: keyof DefaultTheme['palette'];
     /** Set the limit for chip inputs <br />
      * <strong>Warning</strong>: be aware that this check is performed only on internal changes on items.
      * If you change the value from outside, you are in charge of apply this check on the new value itself.
@@ -400,13 +401,13 @@ export declare interface ChipInputProps extends Omit<ContainerProps, 'defaultVal
      */
     disableOptions?: boolean;
     /** Icon on the right of the input */
-    icon?: keyof ThemeObj['icons'];
+    icon?: keyof DefaultTheme['icons'];
     /** Action on Icon click */
     iconAction?: React_2.ReactEventHandler;
     /** Disable the icon */
     iconDisabled?: boolean;
     /** Icon color */
-    iconColor?: string | keyof ThemeObj['palette'];
+    iconColor?: string | keyof DefaultTheme['palette'];
     /** select single replaceable value from options */
     singleSelection?: boolean;
     /** hide the input's bottom border */
@@ -447,24 +448,24 @@ export declare interface ChipProps extends RowProps {
     /** Chip actions (buttons or icons) */
     actions?: ChipAction[];
     /** Chip Avatar Icon */
-    avatarIcon?: keyof ThemeObj['icons'];
+    avatarIcon?: keyof DefaultTheme['icons'];
     /** Chip Avatar Background Color */
-    avatarBackground?: keyof ThemeObj['palette'];
+    avatarBackground?: keyof DefaultTheme['palette'];
     /** Chip avatar color (icon color or capitals color) */
-    avatarColor?: keyof ThemeObj['palette'];
+    avatarColor?: keyof DefaultTheme['palette'];
     /** Chip avatar label. It allows to override the capitals for the avatar.
      * If the main label is not a string, you have to fill this prop to show capitals in the avatar */
     avatarLabel?: string;
     /** Chip avatar picture */
     avatarPicture?: string;
     /** Chip background color */
-    background?: keyof ThemeObj['palette'];
+    background?: keyof DefaultTheme['palette'];
     /** Chip shape  */
     shape?: 'regular' | 'round';
     /** If an onClose callback is provided, this prop defines if the close action should be active or disabled */
     closable?: boolean;
     /** Chip text color */
-    color?: keyof ThemeObj['palette'];
+    color?: keyof DefaultTheme['palette'];
     /** Chip disabled status. If a string is provided it is shown in a tooltip */
     disabled?: boolean | string;
     /** Chip error. If a string is provided it is shown in a tooltip */
@@ -537,9 +538,9 @@ declare interface ContainerElProps {
     orientation?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     /** Type of the Container's corners */
     borderRadius?: 'regular' | 'round' | 'half' | 'none';
-    borderColor?: string | keyof ThemeObj['palette'];
+    borderColor?: string | keyof DefaultTheme['palette'];
     /** Container background color */
-    background?: string | keyof ThemeObj['palette'];
+    background?: string | keyof DefaultTheme['palette'];
     /** Container height: <br/>
      *  	`fit`: shorthand for fit-content
      *  	`fill`: semantic alternative for `100%`
@@ -633,7 +634,7 @@ export declare const DateTimePicker: React_2.ForwardRefExoticComponent<DateTimeP
 
 export declare interface DateTimePickerProps extends Omit<ReactDatePickerProps, 'onChange'> {
     /** Input's background color */
-    backgroundColor?: keyof ThemeObj['palette'];
+    backgroundColor?: keyof DefaultTheme['palette'];
     /** Close icon to clear the Input */
     isClearable?: boolean;
     /** Label for input */
@@ -681,9 +682,9 @@ export declare const DefaultTabBarItem: React_2.ForwardRefExoticComponent<Defaul
 export declare interface DefaultTabBarItemProps extends ContainerProps {
     item: Item;
     selected: boolean;
-    background: string | keyof ThemeObj['palette'];
+    background: string | keyof DefaultTheme['palette'];
     onClick: React_2.ReactEventHandler;
-    underlineColor: string | keyof ThemeObj['palette'];
+    underlineColor: string | keyof DefaultTheme['palette'];
     forceWidthEquallyDistributed: boolean;
 }
 
@@ -691,7 +692,7 @@ export declare const Divider: React_2.ForwardRefExoticComponent<Partial<DividerP
 
 export declare interface DividerProps extends HTMLAttributes<HTMLDivElement> {
     /** Divider color */
-    color: string | keyof ThemeObj['palette'];
+    color: string | keyof DefaultTheme['palette'];
 }
 
 export declare const Drag: React_2.ForwardRefExoticComponent<DragProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -777,13 +778,13 @@ export declare interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElemen
     /** Whether to preventDefault on Dropdown click */
     preventDefault?: boolean;
     /** Customize selected background color */
-    selectedBackgroundColor?: keyof ThemeObj['palette'];
+    selectedBackgroundColor?: keyof DefaultTheme['palette'];
     /** Item Icon size */
     itemIconSize?: React_2.ComponentPropsWithRef<typeof Icon>['size'];
     /** Item Text size */
     itemTextSize?: React_2.ComponentPropsWithRef<typeof Text_2>['size'];
     /** Item Padding Between */
-    itemPaddingBetween?: keyof ThemeObj['sizes']['padding'];
+    itemPaddingBetween?: keyof DefaultTheme['sizes']['padding'];
     /** Ref assign to the dropdown list popper container */
     dropdownListRef?: React_2.RefObject<HTMLDivElement>;
 }
@@ -874,14 +875,14 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
  * @returns {({theme?: Theme}) => string} a function that, given the theme, returns the wanted color
      */
  export declare function getColor(color: string): (args: {
-     theme: ThemeObj;
+     theme: DefaultTheme;
  }) => string;
 
  /**
   * Retrieve the color of the given name based on the theme palette if the name is a palette key,
   * generating a set with the colorSet utility if the color is not a palette key
   * @param {string} color - It can contain also the variant in the form color[.variant]
-  * @param {ThemeObj} theme - The theme object
+  * @param {DefaultTheme} theme - The theme object
   * @example
   * const theme = useTheme();
   * getColor('gray5', theme);
@@ -892,18 +893,18 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
   * `
   * @returns {string} The wanted color
   */
- export declare function getColor(color: string, theme: ThemeObj): string;
+ export declare function getColor(color: string, theme: DefaultTheme): string;
 
  export declare function getKeyboardPreset(type: ElementType, callback: (e: KeyboardEvent) => void, ref?: React_2.MutableRefObject<HTMLElement | null> | undefined, keys?: string[], modifier?: boolean): KeyboardPreset;
 
  declare function getPadding(padding: PaddingStringComposition | PaddingObj): (args: {
-     theme: ThemeObj;
+     theme: DefaultTheme;
  }) => string;
 
- declare function getPadding(padding: PaddingStringComposition | PaddingObj, theme: ThemeObj): string;
+ declare function getPadding(padding: PaddingStringComposition | PaddingObj, theme: DefaultTheme): string;
 
- declare function getPadding(padding: PaddingStringComposition | PaddingObj, theme?: ThemeObj): string | ((args: {
-     theme: ThemeObj;
+ declare function getPadding(padding: PaddingStringComposition | PaddingObj, theme?: DefaultTheme): string | ((args: {
+     theme: DefaultTheme;
  }) => string);
  export { getPadding }
  export { getPadding as parsePadding }
@@ -918,20 +919,20 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
 
  export declare type IconButtonProps = ButtonProps & {
      /** Color of the icon */
-     iconColor?: string | keyof ThemeObj['palette'];
+     iconColor?: string | keyof DefaultTheme['palette'];
      /** Color of the button */
-     backgroundColor?: string | keyof ThemeObj['palette'];
+     backgroundColor?: string | keyof DefaultTheme['palette'];
      /** whether to disable the IconButton or not */
      disabled?: boolean;
      /** button size */
      size?: ButtonProps['size'];
      /** Custom button size */
      customSize?: {
-         iconSize: string | keyof ThemeObj['sizes']['icon'];
-         paddingSize: 0 | string | keyof ThemeObj['sizes']['padding'];
+         iconSize: string | keyof DefaultTheme['sizes']['icon'];
+         paddingSize: 0 | string | keyof DefaultTheme['sizes']['padding'];
      };
      /** icon name */
-     icon: keyof ThemeObj['icons'];
+     icon: keyof DefaultTheme['icons'];
      /** IconButton border radius */
      borderRadius?: 'regular' | 'round';
      /** Click callback */
@@ -956,24 +957,22 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      /** whether to disable the IconCheckbox or not */
      disabled?: boolean;
      /** IconCheckbox icon */
-     icon: keyof ThemeObj['icons'];
+     icon: keyof DefaultTheme['icons'];
      /** IconCheckbox size */
      size?: 'small' | 'regular' | 'large';
      /** IconCheckbox margin */
-     margin?: keyof ThemeObj['sizes']['padding'];
+     margin?: keyof DefaultTheme['sizes']['padding'];
      /** IconCheckbox value */
      value?: boolean;
      /** change callback */
      onChange: () => void;
  }
 
- declare type IconComponent = React_2.ComponentType<React_2.SVGProps<SVGSVGElement> & {
-     ref: React_2.ForwardedRef<SVGSVGElement>;
- }>;
+ declare type IconComponent = (props: SVGProps<SVGSVGElement>) => JSX.Element;
 
  export 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 ThemeObj['icons'] | IconComponent;
+     icon: keyof DefaultTheme['icons'] | IconComponent;
      /** whether the icon is in a disabled element */
      disabled?: boolean;
      /** action to perform on Icon Click
@@ -984,13 +983,13 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
 
  export declare interface IconProps extends IconComponentProps {
      /** Icon Color */
-     color?: string | keyof ThemeObj['palette'];
+     color?: string | keyof DefaultTheme['palette'];
      /** Custom color, css syntax
       * @deprecated use color instead
       */
      customColor?: string;
      /** Icon size */
-     size?: keyof ThemeObj['sizes']['icon'];
+     size?: keyof DefaultTheme['sizes']['icon'];
  }
 
  declare type IconSkeletonProps = {
@@ -1008,13 +1007,13 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
 
  export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
      /** Input's background color */
-     backgroundColor?: keyof ThemeObj['palette'];
+     backgroundColor?: keyof DefaultTheme['palette'];
      /** whether to disable the Input or not */
      disabled?: boolean;
      /** Input's text color */
-     textColor?: keyof ThemeObj['palette'];
+     textColor?: keyof DefaultTheme['palette'];
      /** Input's bottom border color */
-     borderColor?: keyof ThemeObj['palette'];
+     borderColor?: keyof DefaultTheme['palette'];
      /** Label of the input, will act (graphically) as placeholder when the input is not focused */
      label?: string;
      /** input change callback */
@@ -1049,7 +1048,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      description?: string | undefined;
  }
 
- export declare function isThemeColor(color: string, theme: ThemeObj): color is ThemePaletteColorKey;
+ export declare function isThemeColor(color: string, theme: DefaultTheme): color is ThemePaletteColorKey;
 
  export declare function isThemeSize(size: string, sizeObj: ThemeSizeObj): size is keyof ThemeSizeObj;
 
@@ -1065,9 +1064,9 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      visible: boolean;
      active: boolean;
      selected: boolean;
-     background: keyof ThemeObj['palette'];
-     selectedBackground: keyof ThemeObj['palette'];
-     activeBackground: keyof ThemeObj['palette'];
+     background: keyof DefaultTheme['palette'];
+     selectedBackground: keyof DefaultTheme['palette'];
+     activeBackground: keyof DefaultTheme['palette'];
  }
 
  export declare interface ItemType {
@@ -1088,7 +1087,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      label: string | undefined;
      open: boolean;
      focus: boolean;
-     background: string | keyof ThemeObj['palette'];
+     background: string | keyof DefaultTheme['palette'];
      multiple: boolean;
      disabled: boolean;
      selected: SelectItem[];
@@ -1120,11 +1119,11 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      /** callback to be executed when the bottom element is rendered */
      onListBottom?: () => void;
      /** List background color */
-     background?: keyof ThemeObj['palette'];
+     background?: keyof DefaultTheme['palette'];
      /** Selected list item background color */
-     selectedBackground?: keyof ThemeObj['palette'];
+     selectedBackground?: keyof DefaultTheme['palette'];
      /** Active List item background color */
-     activeBackground?: keyof ThemeObj['palette'];
+     activeBackground?: keyof DefaultTheme['palette'];
      /** Disable keyboard shortcuts */
      keyboardShortcutsIsDisabled?: boolean;
  }
@@ -1196,7 +1195,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      /** Disabled status for main action Button */
      confirmDisabled?: boolean;
      /** BackgroundColor for the Main action Button */
-     confirmColor?: string | keyof ThemeObj['palette'];
+     confirmColor?: string | keyof DefaultTheme['palette'];
      /** Callback for secondary action */
      onSecondaryAction?: (event: React_2.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
      /** Label for the Secondary action Button */
@@ -1238,7 +1237,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
 
  export declare type ModalProps = Omit<ModalFooterProps, 'errorActionLabel' | 'onErrorAction'> & {
      /** Modal background */
-     background?: string | keyof ThemeObj['palette'];
+     background?: string | keyof DefaultTheme['palette'];
      /** Modal title */
      title?: string | React_2.ReactElement;
      /** Modal size */
@@ -1296,9 +1295,9 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      /** whether to disable the Secondary Dropdown or not */
      disabledSecondary?: boolean;
      /** MultiButton icon */
-     icon?: keyof ThemeObj['icons'];
+     icon?: keyof DefaultTheme['icons'];
      /** Main icon */
-     primaryIcon?: keyof ThemeObj['icons'];
+     primaryIcon?: keyof DefaultTheme['icons'];
      /** Color of the Button label */
      color?: string;
      /** Color of the Button background */
@@ -1319,17 +1318,17 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
  export declare const Padding: React_2.ForwardRefExoticComponent<(PaddingProps & Omit<React_2.HTMLAttributes<HTMLDivElement>, "id" | "height" | "width" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "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" | "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" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">) & React_2.RefAttributes<HTMLDivElement>>;
 
  export declare type PaddingObj = {
-     value: string | keyof ThemeObj['sizes']['padding'] | 0;
+     value: string | keyof DefaultTheme['sizes']['padding'] | 0;
  } | {
-     all: string | keyof ThemeObj['sizes']['padding'] | 0;
+     all: string | keyof DefaultTheme['sizes']['padding'] | 0;
  } | RequireAtLeastOne<{
-     vertical: string | keyof ThemeObj['sizes']['padding'] | 0;
-     horizontal: string | keyof ThemeObj['sizes']['padding'] | 0;
+     vertical: string | keyof DefaultTheme['sizes']['padding'] | 0;
+     horizontal: string | keyof DefaultTheme['sizes']['padding'] | 0;
  }> | RequireAtLeastOne<{
-     top: string | keyof ThemeObj['sizes']['padding'] | 0;
-     right: string | keyof ThemeObj['sizes']['padding'] | 0;
-     bottom: string | keyof ThemeObj['sizes']['padding'] | 0;
-     left: string | keyof ThemeObj['sizes']['padding'] | 0;
+     top: string | keyof DefaultTheme['sizes']['padding'] | 0;
+     right: string | keyof DefaultTheme['sizes']['padding'] | 0;
+     bottom: string | keyof DefaultTheme['sizes']['padding'] | 0;
+     left: string | keyof DefaultTheme['sizes']['padding'] | 0;
  }>;
 
  export declare type PaddingProps = {
@@ -1338,7 +1337,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      children?: React_2.ReactNode | React_2.ReactNode[];
  } & PaddingObj & HTMLAttributes<HTMLDivElement>;
 
- declare type PaddingString = `${string | keyof ThemeObj['sizes']['padding']}`;
+ declare type PaddingString = `${string | keyof DefaultTheme['sizes']['padding']}`;
 
  declare type PaddingStringComposition = PaddingString | `${PaddingString} | ${PaddingString}` | `${PaddingString} ${PaddingString} ${PaddingString}` | `${PaddingString} ${PaddingString} ${PaddingString} ${PaddingString}`;
 
@@ -1399,17 +1398,17 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      disablePortal?: boolean;
  }
 
- export declare function pseudoClasses(theme: ThemeObj, color: string | keyof ThemeObj['palette'], cssProperty?: string): FlattenSimpleInterpolation;
+ export declare function pseudoClasses(theme: DefaultTheme, color: string | keyof DefaultTheme['palette'], cssProperty?: string): FlattenSimpleInterpolation;
 
  export declare const Quota: React_2.ForwardRefExoticComponent<QuotaProps & React_2.RefAttributes<HTMLDivElement>>;
 
  export declare interface QuotaProps extends ContainerProps {
      /** Quota background color */
-     background?: keyof ThemeObj['palette'];
+     background?: keyof DefaultTheme['palette'];
      /** Quota percentage */
      fill: number;
      /** Quota fill background color */
-     fillBackground?: keyof ThemeObj['palette'];
+     fillBackground?: keyof DefaultTheme['palette'];
      /** Quota height */
      height?: number | string;
  }
@@ -1449,7 +1448,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      /** available sizes */
      size?: RadioSize;
      /** icon color */
-     iconColor?: keyof ThemeObj['palette'];
+     iconColor?: keyof DefaultTheme['palette'];
  }
 
  declare type RadioSize = 'medium' | 'small';
@@ -1493,7 +1492,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
 
  declare type SelectComponentProps = {
      label?: string;
-     background?: string | keyof ThemeObj['palette'];
+     background?: string | keyof DefaultTheme['palette'];
      disabled?: boolean;
      items?: SelectItem[];
      /** Css display property of select */
@@ -1597,9 +1596,9 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
  };
 
  declare const SIZES: {
-     readonly small: 5;
-     readonly medium: 10;
-     readonly large: 15;
+     readonly small: 0.3125;
+     readonly medium: 0.625;
+     readonly large: 0.9375;
  };
 
  export declare type SkeletonProps = {
@@ -1655,7 +1654,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
  export declare const Spinner: React_2.ForwardRefExoticComponent<SpinnerProps & React_2.RefAttributes<HTMLDivElement>>;
 
  export declare interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
-     color: string | keyof ThemeObj['palette'];
+     color: string | keyof DefaultTheme['palette'];
  }
 
  declare type StyleObj = HTMLAttributes<HTMLDivElement>['style'];
@@ -1688,7 +1687,7 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      /** available sizes */
      size?: SwitchSize;
      /** icon color */
-     iconColor?: keyof ThemeObj['palette'];
+     iconColor?: keyof DefaultTheme['palette'];
  }
 
  declare type SwitchSize = 'medium' | 'small';
@@ -1703,9 +1702,9 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      /** change callback, is called with the new selected id */
      onChange: (ev: React_2.SyntheticEvent, selectedId: string) => void;
      /** background color of the tabBar */
-     background: string | keyof ThemeObj['palette'];
+     background: string | keyof DefaultTheme['palette'];
      /** underline color of the selected tab */
-     underlineColor?: string | keyof ThemeObj['palette'];
+     underlineColor?: string | keyof DefaultTheme['palette'];
      /** Force tabs to have all the same width */
      forceWidthEquallyDistributed?: boolean;
  }
@@ -1740,11 +1739,11 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
 
  export declare interface TextProps extends HTMLAttributes<HTMLDivElement> {
      /** Text color */
-     color?: string | keyof ThemeObj['palette'];
+     color?: string | keyof DefaultTheme['palette'];
      /** Text size */
-     size?: keyof ThemeObj['sizes']['font'];
+     size?: keyof DefaultTheme['sizes']['font'];
      /** Text weight */
-     weight?: keyof ThemeObj['fonts']['weight'];
+     weight?: keyof DefaultTheme['fonts']['weight'];
      /** Overflow handling */
      overflow?: TextOverflow;
      /** Disabled status */
@@ -1829,22 +1828,22 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
      };
      icons: Record<string, IconComponent>;
      loginBackground: string;
-     logo: {
+     logo?: {
          svg: IconComponent;
          size: ThemeSizeObj;
      };
-     palette: Record<'currentColor' | 'transparent' | 'primary' | 'secondary' | 'header' | 'highlight' | 'gray0' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'warning' | 'error' | 'success' | 'info' | 'text', ThemeColorObj>;
+     palette: Record<'currentColor' | 'transparent' | 'primary' | 'secondary' | 'header' | 'highlight' | 'gray0' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'warning' | 'error' | 'success' | 'info' | 'text' | 'shadow' | 'black' | 'white', ThemeColorObj>;
      avatarColors: Record<`avatar_${number}`, string>;
  }
 
  declare type ThemePaletteColorKey = keyof ThemePaletteObj;
 
- declare type ThemePaletteObj = ThemeObj['palette'];
+ declare type ThemePaletteObj = DefaultTheme['palette'];
 
  export declare const ThemeProvider: React_2.FC<ThemeProviderProps>;
 
  export declare interface ThemeProviderProps {
-     extension?: (theme: ThemeObj) => ThemeObj;
+     extension?: (theme: DefaultTheme) => DefaultTheme;
      loadDefaultFont?: boolean;
  }
 
@@ -1963,14 +1962,14 @@ export declare const generateColorSet: ({ regular, hover, active, disabled, focu
 
  export declare function useSplitVisibility<T, R extends HTMLElement = HTMLElement>(items: T[], optionsWithRetroCompatibility?: Options | 'end' | 'start'): [T[], T[], React_2.RefObject<R>];
 
- export declare const useTheme: () => ThemeObj;
+ export declare const useTheme: () => DefaultTheme;
 
  export declare function ZimbraClassicThemeContextProvider({ styleSheetTarget, children, extension, loadDefaultFont }: ZimbraClassicThemeContextProviderProps): JSX.Element;
 
  export declare interface ZimbraClassicThemeContextProviderProps {
      styleSheetTarget?: HTMLElement;
      children: React_2.ReactElement;
-     extension?: (theme: ThemeObj) => ThemeObj;
+     extension?: (theme: DefaultTheme) => DefaultTheme;
      loadDefaultFont?: boolean;
  }