@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/README.md

@@ -59,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:
+
+Before:
+```js
+import { Global } from '@emotion/react'
+import { normalize } from '@ultraviolet/ui'
+import { ThemeProvider } from '@emotion/react'
 
-declare module '@emotion/react' {
-  export interface Theme extends MyTheme {}
-}
+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.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";
@@ -11,12 +11,24 @@ const ActionBar = ({
   className,
   style,
   "data-testid": dataTestId
-}) => 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);
+}) => 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/Alert/index.d.ts

@@ -19,9 +19,10 @@ type AlertProps = {
      */
     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, style, }: 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,
@@ -24,6 +24,7 @@ const Alert = ({
   className,
   disabled,
   "data-testid": dataTestId,
+  size = "medium",
   style
 }) => {
   const [opened, setOpened] = useState(true);
@@ -31,24 +32,101 @@ const Alert = ({
   if (!opened) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${alert({
-    sentiment
-  })}`, "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: 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,16 @@
 /* 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/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, style, }: 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";
@@ -24,42 +24,52 @@ const Avatar = ({
   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,
-    ...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
-  ] });
+  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.js

@@ -1,4 +1,3 @@
-/* empty css                             */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var containerAvatar = createRuntimeFn({ defaultClassName: "uv_19x8y1k0", variantClassNames: { shape: { circle: "uv_19x8y1k1", square: "uv_19x8y1k2" }, size: { large: "uv_19x8y1k3", medium: "uv_19x8y1k4", small: "uv_19x8y1k5", xsmall: "uv_19x8y1k6" }, sentiment: { primary: "uv_19x8y1k7", neutral: "uv_19x8y1k8" } }, defaultVariants: {}, compoundVariants: [[{ size: "large", shape: "square" }, "uv_19x8y1k9"], [{ size: "medium", shape: "square" }, "uv_19x8y1ka"], [{ size: "small", shape: "square" }, "uv_19x8y1kb"], [{ size: "xsmall", shape: "square" }, "uv_19x8y1kc"]] });

package/dist/components/Avatar/variables.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 var finalSizeAvatar = "var(--uv_18799yd0)";
 var finalColorAvatar = "var(--uv_18799yd1)";
 var halvedColorAvatar = "var(--uv_18799yd2)";

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

@@ -9,5 +9,5 @@ type BadgeProps = {
 /**
  * Badge component is used to display a status or a label in a small container.
  */
-export declare const Badge: ({ sentiment, size, prominence, disabled, className, children, "data-testid": dataTestId, style, }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ sentiment, size, prominence, disabled, className, children, "data-testid": dataTestId, style, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Badge/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Text } from "../Text/index.js";
 import { TEXT_VARIANT } from "./constant.js";
@@ -14,13 +14,24 @@ const Badge = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const ariaLabel = useMemo(() => ["neutral", "primary"].some((baseSentiment) => baseSentiment === sentiment) ? void 0 : sentiment, [sentiment]);
-  return /* @__PURE__ */ jsx(Text, { "aria-label": ariaLabel, as: "span", className: `${className ? `${className} ` : ""}${badge({
-    disabled,
-    prominence,
-    sentiment,
-    size
-  })}`, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", style, variant: TEXT_VARIANT[size], whiteSpace: "nowrap", children });
+  const ariaLabel = useMemo(
+    () => ["neutral", "primary"].some((baseSentiment) => baseSentiment === sentiment) ? void 0 : sentiment,
+    [sentiment]
+  );
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      "aria-label": ariaLabel,
+      as: "span",
+      className: `${className ? `${className} ` : ""}${badge({ disabled, prominence, sentiment, size })}`,
+      "data-testid": dataTestId,
+      prominence: disabled ? "weak" : "default",
+      style,
+      variant: TEXT_VARIANT[size],
+      whiteSpace: "nowrap",
+      children
+    }
+  );
 };
 export {
   Badge

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

@@ -23,5 +23,5 @@ type BannerProps = {
 /**
  * Banner component is used to display an informative message to the user with style.
  */
-export declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, closable, "data-testid": dataTestId, style, }: BannerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, closable, "data-testid": dataTestId, style, }: BannerProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Banner/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
 import { useTheme } from "@ultraviolet/themes";
 import { useMemo, useState } from "react";
@@ -27,9 +27,7 @@ const Banner = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const {
-    theme
-  } = useTheme();
+  const { theme } = useTheme();
   const defaultImage = size === "small" ? defaultIllustrationSmall : defaultIllustration;
   const prominence = useMemo(() => {
     if (variant === "promotional") {
@@ -44,30 +42,91 @@ const Banner = ({
   if (!opened) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${banner({
-    size,
-    variant
-  })}`, "data-testid": dataTestId, direction: "row", gap: 2, justifyContent: "space-between", style, children: [
-    image ? /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: typeof image === "string" ? /* @__PURE__ */ jsx("img", { alt: "", src: image }) : image }) : /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: /* @__PURE__ */ jsx("img", { alt: "", src: defaultImage }) }),
-    /* @__PURE__ */ jsxs(Stack, { alignItems: direction === "column" ? "start" : "center", direction, gap: 2, justifyContent: "space-between", style: {
-      flex: 1
-    }, children: [
-      /* @__PURE__ */ jsxs(Stack, { gap: 0.5, justifyContent: "center", style: {
-        flex: 1
-      }, children: [
-        /* @__PURE__ */ jsx(Text, { as: "p", prominence: variant === "intro" ? "default" : "strong", sentiment: variant === "promotional" ? "white" : "primary", variant: size === "medium" ? "headingSmall" : "bodyStronger", children: title }),
-        /* @__PURE__ */ jsx(Text, { as: "p", sentiment: variant === "promotional" || theme !== "light" ? "white" : "neutral", variant: "body", children })
-      ] }),
-      buttonText || linkText ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 2, children: [
-        buttonText ? /* @__PURE__ */ jsx(Button, { onClick: onClickButton, sentiment: variant === "intro" ? "primary" : "white", size: "medium", variant: "filled", children: buttonText }) : null,
-        linkText ? /* @__PURE__ */ jsx(Link, { href: linkHref ?? "", prominence, sentiment: "primary", size: "small", target: "_blank", children: linkText }) : null
-      ] }) : null
-    ] }),
-    closable ? /* @__PURE__ */ jsx(Button, { className: closeButtonBanner, name: "close", onClick: () => {
-      setOpened(false);
-      onClose?.();
-    }, sentiment: variant === "intro" || variant === "promotional" && theme !== "light" ? "neutral" : "primary", size: "small", variant: variant === "intro" ? "ghost" : "filled", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: `${className ? `${className} ` : ""}${banner({ size, variant })}`,
+      "data-testid": dataTestId,
+      direction: "row",
+      gap: 2,
+      justifyContent: "space-between",
+      style,
+      children: [
+        image ? /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: typeof image === "string" ? /* @__PURE__ */ jsx("img", { alt: "", src: image }) : image }) : /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: /* @__PURE__ */ jsx("img", { alt: "", src: defaultImage }) }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: direction === "column" ? "start" : "center",
+            direction,
+            gap: 2,
+            justifyContent: "space-between",
+            style: { flex: 1 },
+            children: [
+              /* @__PURE__ */ jsxs(Stack, { gap: 0.5, justifyContent: "center", style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "p",
+                    prominence: variant === "intro" ? "default" : "strong",
+                    sentiment: variant === "promotional" ? "white" : "primary",
+                    variant: size === "medium" ? "headingSmall" : "bodyStronger",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "p",
+                    sentiment: variant === "promotional" || theme !== "light" ? "white" : "neutral",
+                    variant: "body",
+                    children
+                  }
+                )
+              ] }),
+              buttonText || linkText ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 2, children: [
+                buttonText ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: onClickButton,
+                    sentiment: variant === "intro" ? "primary" : "white",
+                    size: "medium",
+                    variant: "filled",
+                    children: buttonText
+                  }
+                ) : null,
+                linkText ? /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: linkHref ?? "",
+                    prominence,
+                    sentiment: "primary",
+                    size: "small",
+                    target: "_blank",
+                    children: linkText
+                  }
+                ) : null
+              ] }) : null
+            ]
+          }
+        ),
+        closable ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: closeButtonBanner,
+            name: "close",
+            onClick: () => {
+              setOpened(false);
+              onClose?.();
+            },
+            sentiment: variant === "intro" || variant === "promotional" && theme !== "light" ? "neutral" : "primary",
+            size: "small",
+            variant: variant === "intro" ? "ghost" : "filled",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
   Banner

package/dist/components/BarChart/Tooltip.d.ts

@@ -5,5 +5,5 @@ type BarChartTooltipProps = {
     className?: string;
     'data-testid'?: string;
 };
-export declare const BarChartTooltip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartTooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarChartTooltip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};