@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/README.md

@@ -7,7 +7,7 @@ Ultraviolet UI is a set of React components and utilities to build fast applicat
 ## Get Started
 
 ```sh
-$ pnpm add @ultraviolet/ui @ultraviolet/themes @emotion/react @emotion/styled
+$ pnpm add @ultraviolet/ui @ultraviolet/themes
 ```
 
 You will also need to import fonts in your project by adding:
@@ -27,24 +27,31 @@ You will also need to import fonts in your project by adding:
 />
 ```
 
+Or if you prefer to install the package for it you can add:
+```sh
+$ pnpm add @ultraviolet/fonts
+```
+
+and import it in your project:
+
+```ts
+import '@ultraviolet/fonts'
+```
+
 ### Usage
 
+For the library to work properly, you need to wrap your application with the `ThemeProvider` component. `ThemeProvider` will provide the theme to all components in your application and allow you to do `const theme = useTheme()` to have access to the theme object in your TSX files.
+
+You will also need to import styles of components for them to have the correct styles.
+
 ```tsx
-import { Global, ThemeProvider, css } from '@emotion/react'
-import { ThemeProvider as ThemeProviderUV } from '@ultraviolet/ui'
-import { Button, normalize, theme } from '@ultraviolet/ui'
+import { ThemeProvider } from '@ultraviolet/ui'
+import { Button, theme } from '@ultraviolet/ui'
 import '@ultraviolet/ui/styles'
 
 const App = () => (
   <ThemeProvider theme={theme}>
-    <ThemeProviderUV>
-      <Global
-        styles={css`
-          ${normalize()}
-        `}
-      />
-      <Button onClick={() => console.log('clicked')}>Click Me</Button>
-    </ThemeProviderUV>
+    <Button onClick={() => console.log('clicked')}>Click Me</Button>
   </ThemeProvider>
 )
 ```
@@ -52,32 +59,61 @@ const App = () => (
 > **Note**:
 > To generate your own theme easily you can check the [theme generator](https://storybook.ultraviolet.scaleway.com/?path=/docs/tools-theme-generator--docs).
 
-### Typescript
-To allow typescript theme typings with `@emotion/styled` components,
-you'll have to define the `@emotion/react` module `Theme` interface in your project.
+## Migration from V2 to V3
+With the migration from `@ultraviolet/ui 2.0.0` to `@ultraviolet/ui 3.0.0`, several core changes have been introduced. These changes are due to the shift in styling from `Emotion` to `vanilla-extract`.
 
-For example, in a `emotion.d.ts` file:
+### Theme provider
+To ensure the library works correctly, you must wrap your application with the `ThemeProvider` component. Import it from `@ultraviolet/themes` or `@ultraviolet/ui` (replacing the previous `Emotion`-based provider). 
 
-- Declaration to use the default Ultraviolet Themes
+If your app still uses `Emotion`, you can combine both theme providers: 
 
-```ts
-import '@emotion/react'
-import type { UltravioletUITheme } from '@ultraviolet/ui'
+```js
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
+import {
+  consoleLightTheme,
+  ThemeProvider as UVThemeProvider,
+} from '@ultraviolet/ui'
 
-declare module '@emotion/react' {
-  export interface Theme extends UltravioletUITheme {}
-}
+const App = () => (
+  <UVThemeProvider theme={consoleLightTheme}>
+    <EmotionThemeProvider theme={consoleLightTheme}>
+        {children}
+    </EmotionThemeProvider>
+  </UVThemeProvider>
+)
 ```
 
-- Declaration to use your custom theme
+### Style
+To ensure styles are applied, import the component styles at the root of your application:
 
-```ts
-import '@emotion/react'
-import type { MyTheme } from './src/theme'
+```js
+import '@ultraviolet/ui/styles'
+```
+To replace `normalize()` (which was used with Emotion), you can now import a global style with the same effect:
 
-declare module '@emotion/react' {
-  export interface Theme extends MyTheme {}
-}
+Before:
+```js
+import { Global } from '@emotion/react'
+import { normalize } from '@ultraviolet/ui'
+import { ThemeProvider } from '@emotion/react'
+
+const App = () => (
+  <ThemeProvider theme={theme}>
+      <Global styles={css`${normalize()}`}>
+      <MyApp />
+  </ThemeProvider>
+)
+```
+After: 
+```js
+import { ThemeProvider } from "@ultraviolet/themes"
+import "@ultraviolet/themes/global"
+
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <MyApp />
+  </ThemeProvider>
+)
 ```
 
 ## Documentation

package/dist/components/ActionBar/index.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type ActionBarProps = {
     children: ReactNode;
     /**
@@ -8,6 +8,7 @@ type ActionBarProps = {
     role?: string;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * The ActionBar is a floating bar that appears at the bottom of a page.
@@ -16,5 +17,5 @@ type ActionBarProps = {
  * **Note:** ActionBar is added into a portal at the end of the body element. This means that it will always be on top of other elements without `z-index`,
  * and will not be affected by the layout of the page it is on.
  */
-export declare const ActionBar: ({ children, role, rank, className, "data-testid": dataTestId, }: ActionBarProps) => import("react").ReactPortal;
+export declare const ActionBar: ({ children, role, rank, className, style, "data-testid": dataTestId, }: ActionBarProps) => import("react").ReactPortal;
 export {};

package/dist/components/ActionBar/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { createPortal } from "react-dom";
 import { Stack } from "../Stack/index.js";
@@ -9,10 +9,26 @@ const ActionBar = ({
   role = "dialog",
   rank = 0,
   className,
+  style,
   "data-testid": dataTestId
-}) => createPortal(/* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${actionBar}`, "data-testid": dataTestId, role, style: assignInlineVars({
-  [rankActionBar]: `${rank}`
-}), children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: stackActionBar, children }) }), document.body);
+}) => createPortal(
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${actionBar}`,
+      "data-testid": dataTestId,
+      role,
+      style: {
+        ...assignInlineVars({
+          [rankActionBar]: `${rank}`
+        }),
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: stackActionBar, children })
+    }
+  ),
+  document.body
+);
 export {
   ActionBar
 };

package/dist/components/ActionBar/styles.css.js

@@ -1,4 +1,3 @@
-/* empty css                                                  */
 /* empty css                                                     */
 /* empty css                          */
 var rankActionBar = "var(--uv_1p607tg0)";

package/dist/components/Alert/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { Button } from '../Button';
 import type { AlertSentiment } from './type';
 type AlertProps = {
@@ -18,9 +18,11 @@ type AlertProps = {
      * Disabled the alert button.
      */
     disabled?: boolean;
+    style?: CSSProperties;
+    size?: 'medium' | 'small';
 };
 /**
  * Alert component is used to display a short, important message in a way that attracts the user's attention without interrupting the user's task.
  */
-export declare const Alert: ({ children, title, sentiment, buttonText, onClickButton, closable, onClose, className, disabled, "data-testid": dataTestId, }: AlertProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const Alert: ({ children, title, sentiment, buttonText, onClickButton, closable, onClose, className, disabled, "data-testid": dataTestId, size, style, }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Alert/index.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { AlertCircleIcon, CheckCircleOutlineIcon, LightBulbIcon, InformationOutlineIcon, CloseIcon } from "@ultraviolet/icons";
 import { useState } from "react";
 import { Button } from "../Button/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
-import { alert, wrapAlert, textAlert, buttonAlert, buttonCloseAlert } from "./styles.css.js";
+import { alert, wrapAlert, smallIcon, textAlert, buttonAlert, buttonCloseAlert } from "./styles.css.js";
 const sentimentIcons = {
   danger: AlertCircleIcon,
   info: InformationOutlineIcon,
@@ -23,31 +23,110 @@ const Alert = ({
   onClose,
   className,
   disabled,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  size = "medium",
+  style
 }) => {
   const [opened, setOpened] = useState(true);
   const Icon = sentimentIcons[sentiment];
   if (!opened) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${alert({
-    sentiment
-  })}`, "data-testid": dataTestId, direction: "row", gap: 1, children: [
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: wrapAlert, direction: "row", gap: 2, justifyContent: "space-between", wrap: true, children: [
-      /* @__PURE__ */ jsxs(Stack, { alignItems: "start", direction: "row", flex: "1 1 auto", gap: 2, children: [
-        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", prominence: sentiment === "neutral" ? "strong" : void 0, sentiment, size: "large" }),
-        /* @__PURE__ */ jsxs(Stack, { className: textAlert, direction: "row", flex: "1 1 auto", gap: 1.5, wrap: true, children: [
-          title ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment, variant: "bodyStronger", children: title }) : null,
-          typeof children === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", children }) : children
-        ] })
-      ] }),
-      buttonText ? /* @__PURE__ */ jsx(Button, { className: buttonAlert, disabled, onClick: onClickButton, sentiment, size: "small", children: buttonText }) : null
-    ] }),
-    closable || onClose ? /* @__PURE__ */ jsx(Button, { "aria-label": "close", className: buttonCloseAlert, onClick: () => {
-      setOpened(false);
-      onClose?.();
-    }, sentiment: "neutral", size: "small", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: `${className ? `${className} ` : ""}${alert({ sentiment, size })}`,
+      "data-testid": dataTestId,
+      direction: "row",
+      gap: 1,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: "center",
+            className: wrapAlert,
+            direction: "row",
+            gap: 2,
+            justifyContent: "space-between",
+            wrap: true,
+            children: [
+              /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  alignItems: "start",
+                  direction: "row",
+                  flex: "1 1 auto",
+                  gap: size === "small" ? 1 : 2,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        "aria-hidden": "true",
+                        className: size === "small" ? smallIcon : "",
+                        prominence: sentiment === "neutral" ? "strong" : void 0,
+                        sentiment,
+                        size: size === "small" ? "small" : "large"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Stack,
+                      {
+                        alignItems: "center",
+                        className: textAlert,
+                        direction: "row",
+                        flex: "1 1 auto",
+                        gap: 1.5,
+                        wrap: true,
+                        children: [
+                          title ? /* @__PURE__ */ jsx(
+                            Text,
+                            {
+                              as: "span",
+                              sentiment,
+                              variant: size === "small" ? "bodySmallStronger" : "bodyStronger",
+                              children: title
+                            }
+                          ) : null,
+                          typeof children === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", variant: size === "small" ? "bodySmall" : "body", children }) : children
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              buttonText ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: buttonAlert[size],
+                  disabled,
+                  onClick: onClickButton,
+                  sentiment,
+                  size: "small",
+                  children: buttonText
+                }
+              ) : null
+            ]
+          }
+        ),
+        closable || onClose ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "close",
+            className: buttonCloseAlert,
+            onClick: () => {
+              setOpened(false);
+              onClose?.();
+            },
+            sentiment: "neutral",
+            size: "small",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
   Alert

package/dist/components/Alert/styles.css.d.ts

@@ -27,9 +27,18 @@ export declare const alert: import("@vanilla-extract/recipes").RuntimeFn<{
             borderLeft: `4px solid var(--${string})`;
         };
     };
+    size: {
+        medium: {
+            padding: `var(--${string})`;
+        };
+        small: {
+            padding: `var(--${string})`;
+        };
+    };
 }>;
 export declare const wrapAlert: string;
 export declare const textAlert: string;
-export declare const buttonAlert: string;
+export declare const buttonAlert: Record<"medium" | "small", string>;
 export declare const buttonCloseAlert: string;
 export type AlertVariants = NonNullable<RecipeVariants<typeof alert>>;
+export declare const smallIcon: string;

package/dist/components/Alert/styles.css.js

@@ -1,14 +1,17 @@
+/* empty css                                                  */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var alert = createRuntimeFn({ defaultClassName: "uv_1b838gx0", variantClassNames: { sentiment: { danger: "uv_1b838gx1", info: "uv_1b838gx2", success: "uv_1b838gx3", warning: "uv_1b838gx4", neutral: "uv_1b838gx5" } }, defaultVariants: { sentiment: "danger" }, compoundVariants: [] });
-var wrapAlert = "uv_1b838gx6";
-var textAlert = "uv_1b838gx7";
-var buttonAlert = "uv_1b838gx8";
-var buttonCloseAlert = "uv_1b838gx9";
+var alert = createRuntimeFn({ defaultClassName: "uv_1b838gx0", variantClassNames: { sentiment: { danger: "uv_1b838gx1", info: "uv_1b838gx2", success: "uv_1b838gx3", warning: "uv_1b838gx4", neutral: "uv_1b838gx5" }, size: { medium: "uv_1b838gx6", small: "uv_1b838gx7" } }, defaultVariants: { sentiment: "danger", size: "medium" }, compoundVariants: [] });
+var wrapAlert = "uv_1b838gx8";
+var textAlert = "uv_1b838gx9";
+var buttonAlert = { medium: "uv_1b838gxa", small: "uv_1b838gxb" };
+var buttonCloseAlert = "uv_1b838gxc";
+var smallIcon = "uv_1b838gxd";
 export {
   alert,
   buttonAlert,
   buttonCloseAlert,
+  smallIcon,
   textAlert,
   wrapAlert
 };

package/dist/components/Avatar/constants.d.ts

@@ -1,15 +1,15 @@
-import type { Theme } from '@emotion/react';
+import type { theme as UVTheme } from '@ultraviolet/themes';
 export declare const TEXT_VARIANT_BY_SIZE: {
     readonly large: "headingLarge";
     readonly medium: "headingSmall";
     readonly small: "bodySmall";
     readonly xsmall: "captionSmall";
 };
-export declare const sizes: (theme: Theme) => {
+export declare const sizes: (theme: typeof UVTheme) => {
     readonly large: "7rem";
-    readonly medium: string;
-    readonly small: string;
-    readonly xsmall: string;
+    readonly medium: `var(--${string})`;
+    readonly small: `var(--${string})`;
+    readonly xsmall: `var(--${string})`;
 };
 export declare const RADIUS_SIZES: {
     readonly large: "xxlarge";

package/dist/components/Avatar/constants.js

@@ -6,7 +6,7 @@ const TEXT_VARIANT_BY_SIZE = {
 };
 const sizes = (theme) => ({
   large: "7rem",
-  // TODO: add this value to tokens
+  // Note: add this value to tokens
   medium: theme.sizing["800"],
   small: theme.sizing["400"],
   xsmall: theme.sizing["250"]

package/dist/components/Avatar/index.d.ts

@@ -2,4 +2,4 @@ import type { AvatarProps } from './types';
 /**
  * The Avatar component is used to represent a user, product, or entity. It can be used to display an image, an icon, a text or a set of colors.
  */
-export declare const Avatar: ({ shape, variant, image, text, size, sentiment, colors, upload, onClick, className, children, "data-testid": dataTestId, }: AvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ shape, variant, image, text, size, sentiment, colors, upload, onClick, className, children, "data-testid": dataTestId, style, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { UploadIcon } from "@ultraviolet/icons";
 import { UserProductIcon } from "@ultraviolet/icons/product";
 import { theme } from "@ultraviolet/themes";
@@ -20,44 +20,56 @@ const Avatar = ({
   onClick,
   className,
   children,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const isHalved = colors.length > 1;
-  const finalColors = colors?.map((bgColor) => theme.colors[bgColor]?.backgroundStrong ?? bgColor);
+  const finalColors = colors?.map(
+    (bgColor) => theme.colors[bgColor]?.backgroundStrong ?? bgColor
+  );
   const finalSize = sizes(theme)[size];
-  return /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${containerAvatar({
-    sentiment,
-    shape,
-    size
-  })}`, "data-has-background": !["user", "image"].includes(variant), "data-testid": dataTestId, onClick, onKeyDown: (event) => event.key === " " || event.key === "Enter" ? onClick?.() : null, role: onClick ? "button" : void 0, style: {
-    backgroundImage: image ? `url(${image})` : void 0,
-    backgroundSize: image ? "cover" : void 0
-  }, children: [
-    upload ? /* @__PURE__ */ jsx("div", { className: uploadContainer({
-      shape,
-      size
-    }), children: /* @__PURE__ */ jsx(UploadIcon, { prominence: "stronger", sentiment: "neutral", size: "large" }) }) : null,
-    variant === "user" ? /* @__PURE__ */ jsx("div", { className: productIconContainer({
-      shape,
-      size
-    }), children: /* @__PURE__ */ jsx(UserProductIcon, { className: svgAvatar({
-      shape
-    }) }) }) : null,
-    variant === "icon" ? /* @__PURE__ */ jsx("div", { className: elementContainer({
-      shape
-    }), children }) : null,
-    variant === "text" ? /* @__PURE__ */ jsx("div", { className: elementContainer({
-      shape
-    }), children: /* @__PURE__ */ jsx(Text, { as: "span", prominence: sentiment === "primary" ? "stronger" : "strong", sentiment: "neutral", variant: TEXT_VARIANT_BY_SIZE[size], children: text }) }) : null,
-    variant === "colors" ? /* @__PURE__ */ jsx("span", { className: colorsAvatar({
-      shape,
-      size
-    }), style: assignInlineVars({
-      [finalSizeAvatar]: finalSize,
-      [finalColorAvatar]: finalColors[0],
-      [halvedColorAvatar]: isHalved ? finalColors[1] : finalColors[0]
-    }) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${containerAvatar({ sentiment, shape, size })}`,
+      "data-has-background": !["user", "image"].includes(variant),
+      "data-testid": dataTestId,
+      onClick,
+      onKeyDown: (event) => event.key === " " || event.key === "Enter" ? onClick?.() : null,
+      role: onClick ? "button" : void 0,
+      style: {
+        backgroundImage: image ? `url(${image})` : void 0,
+        backgroundSize: image ? "cover" : void 0,
+        ...style
+      },
+      children: [
+        upload ? /* @__PURE__ */ jsx("div", { className: uploadContainer({ shape, size }), children: /* @__PURE__ */ jsx(UploadIcon, { prominence: "stronger", sentiment: "neutral", size: "large" }) }) : null,
+        variant === "user" ? /* @__PURE__ */ jsx("div", { className: productIconContainer({ shape, size }), children: /* @__PURE__ */ jsx(UserProductIcon, { className: svgAvatar({ shape }) }) }) : null,
+        variant === "icon" ? /* @__PURE__ */ jsx("div", { className: elementContainer({ shape }), children }) : null,
+        variant === "text" ? /* @__PURE__ */ jsx("div", { className: elementContainer({ shape }), children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            prominence: sentiment === "primary" ? "stronger" : "strong",
+            sentiment: "neutral",
+            variant: TEXT_VARIANT_BY_SIZE[size],
+            children: text
+          }
+        ) }) : null,
+        variant === "colors" ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: colorsAvatar({ shape, size }),
+            style: assignInlineVars({
+              [finalSizeAvatar]: finalSize,
+              [finalColorAvatar]: finalColors[0],
+              [halvedColorAvatar]: isHalved ? finalColors[1] : finalColors[0]
+            })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
   Avatar

package/dist/components/Avatar/styles.css.d.ts

@@ -7,20 +7,20 @@ export declare const containerAvatar: import("@vanilla-extract/recipes").Runtime
     };
     size: {
         large: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         medium: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         small: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         xsmall: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
     };
     sentiment: {
@@ -65,20 +65,20 @@ export declare const productIconContainer: import("@vanilla-extract/recipes").Ru
     };
     size: {
         large: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         medium: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         small: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         xsmall: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
     };
 }>;
@@ -95,20 +95,20 @@ export declare const elementContainer: import("@vanilla-extract/recipes").Runtim
 export declare const colorsAvatar: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         large: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         medium: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         small: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
         xsmall: {
-            width: string;
-            height: string;
+            width: `var(--${string})` | "7rem";
+            height: `var(--${string})` | "7rem";
         };
     };
     shape: {

package/dist/components/Avatar/types.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import type { SENTIMENTS, sizes } from './constants';
 export type Colors = [] | [string] | [string, string] | readonly [string, string] | readonly [string] | readonly [];
 export type SentimentColors = 'primary' | 'neutral' | 'success' | 'danger' | 'warning' | 'info';
@@ -10,6 +10,7 @@ type CommonProps = {
     onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 type VariantUser = {
     variant: 'user';