@ultraviolet/ui 3.0.0-beta.26 → 3.0.0-beta.28

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/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, 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.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/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 {};