@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -1,12 +1,13 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { BadgeVariants } from './styles.css';
 type BadgeProps = {
     className?: string;
     children: ReactNode;
     'data-testid'?: string;
+    style?: CSSProperties;
 } & BadgeVariants;
 /**
  * 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, }: 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";
@@ -11,15 +11,27 @@ const Badge = ({
   disabled = false,
   className,
   children,
-  "data-testid": dataTestId
+  "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", 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

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { Button } from '../Button';
 import type { BannerVariants } from './styles.css';
 type BannerProps = {
@@ -18,9 +18,10 @@ type BannerProps = {
     closable?: boolean;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 } & BannerVariants;
 /**
  * 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, }: 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,8 +1,8 @@
 "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";
-import "../../theme/index.js";
 import { Button } from "../Button/index.js";
 import { Link } from "../Link/index.js";
 import { Stack } from "../Stack/index.js";
@@ -10,7 +10,6 @@ import { Text } from "../Text/index.js";
 import defaultIllustration from "./assets/default-image.svg.js";
 import defaultIllustrationSmall from "./assets/default-image-small.svg.js";
 import { banner, imageStackBanner, closeButtonBanner } from "./styles.css.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
 const Banner = ({
   variant = "intro",
   size = "medium",
@@ -25,11 +24,10 @@ const Banner = ({
   image,
   className,
   closable = true,
-  "data-testid": dataTestId
+  "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", 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/Banner/styles.css.d.ts

@@ -13,6 +13,6 @@ export declare const banner: import("@vanilla-extract/recipes").RuntimeFn<{
         promotional: {};
     };
 }>;
-export declare const imageStackBanner: Record<"small" | "medium", string>;
+export declare const imageStackBanner: Record<"medium" | "small", string>;
 export declare const closeButtonBanner: string;
 export type BannerVariants = NonNullable<RecipeVariants<typeof banner>>;

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

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

package/dist/components/BarChart/Tooltip.js

@@ -1,52 +1,36 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Text } from "../Text/index.js";
-const BarToolTipContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1ilr3nn1"
-} : {
-  target: "e1ilr3nn1",
-  label: "BarToolTipContainer"
-})("display:flex;background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakElevated, ";border-radius:", ({
-  theme
-}) => theme.radii.small, ";box-shadow:", ({
-  theme
-}) => theme.shadows.tooltip, ";padding:", ({
-  theme
-}) => theme.space["1"], " ", ({
-  theme
-}) => theme.space["2"], ";align-items:center;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0JhckNoYXJ0L1Rvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtzQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9CYXJDaGFydC9Ub29sdGlwLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi9UZXh0J1xuXG5jb25zdCBCYXJUb29sVGlwQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kV2Vha0VsZXZhdGVkfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5zbWFsbH07XG4gIGJveC1zaGFkb3c6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2hhZG93cy50b29sdGlwfTtcbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMSddfSAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycyJ119O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYFxuXG5jb25zdCBCYXJDb2xvclNxdWFyZSA9IHN0eWxlZCgnc3BhbicsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsnY29sb3InXS5pbmNsdWRlcyhwcm9wKSxcbn0pPHsgY29sb3I6IHN0cmluZyB9PmBcbiAgZGlzcGxheTogYmxvY2s7XG4gIHdpZHRoOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1snMTUwJ119O1xuICBoZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6aW5nWycxNTAnXX07XG4gIGJhY2tncm91bmQ6ICR7KHsgY29sb3IgfSkgPT4gY29sb3J9O1xuICBtYXJnaW4tcmlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEuNSddfTtcbmBcblxudHlwZSBCYXJDaGFydFRvb2xUaXBQcm9wcyA9IHtcbiAgY29sb3I6IHN0cmluZ1xuICBpbmRleFZhbHVlOiBzdHJpbmdcbiAgZm9ybWF0dGVkVmFsdWU6IHN0cmluZ1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xufVxuXG5jb25zdCBCYXJDaGFydFRvb2xUaXAgPSAoe1xuICBmb3JtYXR0ZWRWYWx1ZSxcbiAgaW5kZXhWYWx1ZSxcbiAgY29sb3IsXG4gIGNsYXNzTmFtZSxcbiAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbn06IEJhckNoYXJ0VG9vbFRpcFByb3BzKSA9PiAoXG4gIDxCYXJUb29sVGlwQ29udGFpbmVyIGNsYXNzTmFtZT17Y2xhc3NOYW1lfSBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH0+XG4gICAgPGRpdj5cbiAgICAgIDxCYXJDb2xvclNxdWFyZSBjb2xvcj17Y29sb3J9IC8+XG4gICAgPC9kaXY+XG4gICAgPGRpdj5cbiAgICAgIDxUZXh0IGFzPVwicFwiIHNlbnRpbWVudD1cInByaW1hcnlcIiB2YXJpYW50PVwiYm9keVN0cm9uZ2VyXCI+XG4gICAgICAgIHtmb3JtYXR0ZWRWYWx1ZX1cbiAgICAgIDwvVGV4dD5cbiAgICAgIDxUZXh0IGFzPVwicFwiIHZhcmlhbnQ9XCJib2R5U21hbGxcIj5cbiAgICAgICAge2luZGV4VmFsdWV9XG4gICAgICA8L1RleHQ+XG4gICAgPC9kaXY+XG4gIDwvQmFyVG9vbFRpcENvbnRhaW5lcj5cbilcblxuZXhwb3J0IGRlZmF1bHQgQmFyQ2hhcnRUb29sVGlwXG4iXX0= */"));
-const BarColorSquare = /* @__PURE__ */ _styled("span", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["color"].includes(prop),
-  target: "e1ilr3nn0"
-} : {
-  shouldForwardProp: (prop) => !["color"].includes(prop),
-  target: "e1ilr3nn0",
-  label: "BarColorSquare"
-})("display:block;width:", ({
-  theme
-}) => theme.sizing["150"], ";height:", ({
-  theme
-}) => theme.sizing["150"], ";background:", ({
-  color
-}) => color, ";margin-right:", ({
-  theme
-}) => theme.space["1.5"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0JhckNoYXJ0L1Rvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCcUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvQmFyQ2hhcnQvVG9vbHRpcC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVGV4dCdcblxuY29uc3QgQmFyVG9vbFRpcENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZFdlYWtFbGV2YXRlZH07XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuc21hbGx9O1xuICBib3gtc2hhZG93OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNoYWRvd3MudG9vbHRpcH07XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX0gJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbmBcblxuY29uc3QgQmFyQ29sb3JTcXVhcmUgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFbJ2NvbG9yJ10uaW5jbHVkZXMocHJvcCksXG59KTx7IGNvbG9yOiBzdHJpbmcgfT5gXG4gIGRpc3BsYXk6IGJsb2NrO1xuICB3aWR0aDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbJzE1MCddfTtcbiAgaGVpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1snMTUwJ119O1xuICBiYWNrZ3JvdW5kOiAkeyh7IGNvbG9yIH0pID0+IGNvbG9yfTtcbiAgbWFyZ2luLXJpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxLjUnXX07XG5gXG5cbnR5cGUgQmFyQ2hhcnRUb29sVGlwUHJvcHMgPSB7XG4gIGNvbG9yOiBzdHJpbmdcbiAgaW5kZXhWYWx1ZTogc3RyaW5nXG4gIGZvcm1hdHRlZFZhbHVlOiBzdHJpbmdcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbn1cblxuY29uc3QgQmFyQ2hhcnRUb29sVGlwID0gKHtcbiAgZm9ybWF0dGVkVmFsdWUsXG4gIGluZGV4VmFsdWUsXG4gIGNvbG9yLFxuICBjbGFzc05hbWUsXG4gICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG59OiBCYXJDaGFydFRvb2xUaXBQcm9wcykgPT4gKFxuICA8QmFyVG9vbFRpcENvbnRhaW5lciBjbGFzc05hbWU9e2NsYXNzTmFtZX0gZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9PlxuICAgIDxkaXY+XG4gICAgICA8QmFyQ29sb3JTcXVhcmUgY29sb3I9e2NvbG9yfSAvPlxuICAgIDwvZGl2PlxuICAgIDxkaXY+XG4gICAgICA8VGV4dCBhcz1cInBcIiBzZW50aW1lbnQ9XCJwcmltYXJ5XCIgdmFyaWFudD1cImJvZHlTdHJvbmdlclwiPlxuICAgICAgICB7Zm9ybWF0dGVkVmFsdWV9XG4gICAgICA8L1RleHQ+XG4gICAgICA8VGV4dCBhcz1cInBcIiB2YXJpYW50PVwiYm9keVNtYWxsXCI+XG4gICAgICAgIHtpbmRleFZhbHVlfVxuICAgICAgPC9UZXh0PlxuICAgIDwvZGl2PlxuICA8L0JhclRvb2xUaXBDb250YWluZXI+XG4pXG5cbmV4cG9ydCBkZWZhdWx0IEJhckNoYXJ0VG9vbFRpcFxuIl19 */"));
-const BarChartToolTip = ({
+import { barTooltipContainer, barColorSquare, colorBar } from "./styles.css.js";
+const BarChartTooltip = ({
   formattedValue,
   indexValue,
   color,
   className,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs(BarToolTipContainer, { className, "data-testid": dataTestId, children: [
-  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(BarColorSquare, { color }) }),
-  /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: formattedValue }),
-    /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: indexValue })
-  ] })
-] });
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${barTooltipContainer}`,
+    "data-testid": dataTestId,
+    children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: barColorSquare,
+          style: assignInlineVars({
+            [colorBar]: color
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: formattedValue }),
+        /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: indexValue })
+      ] })
+    ]
+  }
+);
 export {
-  BarChartToolTip as default
+  BarChartTooltip
 };

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

@@ -1,8 +1,8 @@
 import type { BarDatum, BarSvgProps, BarTooltipProps } from '@nivo/bar';
 import { ResponsiveBar } from '@nivo/bar';
 import type { Box, DatumValue, ValueFormat } from '@nivo/core';
-import type { ComponentProps } from 'react';
-import BarChartTooltip from './Tooltip';
+import type { ComponentProps, CSSProperties } from 'react';
+import { BarChartTooltip } from './Tooltip';
 type Formatter = ValueFormat<DatumValue>;
 type TickSpec = NonNullable<ComponentProps<typeof ResponsiveBar>['axisBottom']>['tickValues'];
 type BarChartProps = {
@@ -17,11 +17,12 @@ type BarChartProps = {
     tooltipFunction?: (props: BarTooltipProps<BarDatum>) => ComponentProps<typeof BarChartTooltip>;
     chartProps?: Partial<BarSvgProps<BarDatum>>;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * BarChart component is used to display data in a bar chart format. It uses the Nivo library under the hood.
  * See https://nivo.rocks/bar/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: BarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, style, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarChart/index.js

@@ -1,17 +1,12 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
+import { jsx } from "react/jsx-runtime";
 import { ResponsiveBar } from "@nivo/bar";
+import { useTheme } from "@ultraviolet/themes";
 import { useCallback } from "react";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";
-import BarChartToolTip from "./Tooltip.js";
-const DEFAULT_MARGIN = {
-  bottom: 50,
-  left: 60,
-  right: 25,
-  top: 50
-};
+import { BarChartTooltip } from "./Tooltip.js";
+const DEFAULT_MARGIN = { bottom: 50, left: 60, right: 25, top: 50 };
 const DEFAULT_DATA = [];
 const DEFAULT_AXISFORMATTER = {};
 const DEFAULT_KEYS = ["value"];
@@ -26,32 +21,59 @@ const BarChart = ({
   tooltipFunction,
   chartProps,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const theme = useTheme();
-  const tooltip = useCallback((props) => {
-    const {
-      indexValue,
-      formattedValue,
-      color
-    } = tooltipFunction ? tooltipFunction(props) : props;
-    return /* @__PURE__ */ jsx(BarChartToolTip, { color, formattedValue, indexValue: indexValue.toString() });
-  }, [tooltipFunction]);
-  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
-    height
-  }, children: /* @__PURE__ */ jsx(ResponsiveBar, { axisBottom: {
-    format: axisFormatters?.bottom,
-    tickPadding: 5,
-    tickRotation: 0,
-    tickSize: 5,
-    tickValues: tickValues?.bottom
-  }, axisLeft: {
-    format: axisFormatters?.left,
-    tickPadding: 5,
-    tickRotation: 0,
-    tickSize: 5,
-    tickValues: tickValues?.left
-  }, colors: getLegendColor(theme), data, enableLabel: false, keys, margin, theme: getNivoTheme(theme), tooltip, ...chartProps }) });
+  const tooltip = useCallback(
+    (props) => {
+      const { indexValue, formattedValue, color } = tooltipFunction ? tooltipFunction(props) : props;
+      return /* @__PURE__ */ jsx(
+        BarChartTooltip,
+        {
+          color,
+          formattedValue,
+          indexValue: indexValue.toString()
+        }
+      );
+    },
+    [tooltipFunction]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-testid": dataTestId,
+      style: { height, ...style },
+      children: /* @__PURE__ */ jsx(
+        ResponsiveBar,
+        {
+          axisBottom: {
+            format: axisFormatters?.bottom,
+            tickPadding: 5,
+            tickRotation: 0,
+            tickSize: 5,
+            tickValues: tickValues?.bottom
+          },
+          axisLeft: {
+            format: axisFormatters?.left,
+            tickPadding: 5,
+            tickRotation: 0,
+            tickSize: 5,
+            tickValues: tickValues?.left
+          },
+          colors: getLegendColor(theme),
+          data,
+          enableLabel: false,
+          keys,
+          margin,
+          theme: getNivoTheme(theme),
+          tooltip,
+          ...chartProps
+        }
+      )
+    }
+  );
 };
 export {
   BarChart

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

@@ -0,0 +1,3 @@
+export declare const colorBar: `var(--${string})`;
+export declare const barTooltipContainer: string;
+export declare const barColorSquare: string;

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

@@ -0,0 +1,9 @@
+/* empty css                          */
+var colorBar = "var(--uv_1eez2qb0)";
+var barTooltipContainer = "uv_1eez2qb1";
+var barColorSquare = "uv_1eez2qb2";
+export {
+  barColorSquare,
+  barTooltipContainer,
+  colorBar
+};

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

@@ -1,4 +1,4 @@
-import type { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 type BarProps = {
     /**
      * Unique id of the bar
@@ -29,9 +29,10 @@ type BarStackProps = {
     total?: number;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * BarStack is a graphic component that is used to show data in one dimension.
  */
-export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, }: BarStackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, }: BarStackProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarStack/index.js

@@ -1,48 +1,79 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useMemo } from "react";
-import "../../theme/index.js";
 import { Tooltip } from "../Tooltip/index.js";
-import { containerBarStack, wrapperBarStack, barStack } from "./styles.css.js";
-import { neutralStrongerB3, primaryStrong12, secondaryStrongBF, secondaryStrong40, neutralWeak40, neutralWeak33, primaryStrong4D, primaryStrongD9, neutralStrong33, neutralWeak1A, wrapperWidth } from "./variables.css.js";
-import { useTheme } from "../../theme/ThemeProvider.js";
+import { containerBarStack, wrapperBarStack, barStack, wrapperWidth } from "./styles.css.js";
 const BarStack = ({
   data,
   total,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
-  const computedTotal = useMemo(() => total ?? data.reduce((acc, {
-    value
-  }) => acc + value, 0), [total, data]);
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${containerBarStack}`, "data-testid": dataTestId, children: data.map(({
-    id,
-    value,
-    text,
-    onClick,
-    onDoubleClick,
-    onKeyDown,
-    onMouseEnter,
-    onMouseLeave,
-    onMouseDown,
-    onMouseUp,
-    tooltip
-  }) => /* @__PURE__ */ jsx("div", { className: wrapperBarStack, style: assignInlineVars({
-    [wrapperWidth]: `${value / computedTotal * 100}%`,
-    [neutralWeak1A]: `${theme.colors.neutral.backgroundWeak}1A`,
-    [neutralStrong33]: `${theme.colors.neutral.backgroundStrong}33`,
-    [primaryStrongD9]: `${theme.colors.primary.backgroundStrong}D9`,
-    [primaryStrong4D]: `${theme.colors.primary.backgroundStrong}4D`,
-    [neutralWeak33]: `${theme.colors.neutral.backgroundWeak}33`,
-    [neutralWeak40]: `${theme.colors.neutral.backgroundWeak}40`,
-    [secondaryStrong40]: `${theme.colors.secondary.borderStrong}40`,
-    [secondaryStrongBF]: `${theme.colors.secondary.borderStrong}BF`,
-    [primaryStrong12]: `${theme.colors.primary.backgroundStrong}12`
-  }), children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip, children: /* @__PURE__ */ jsx("div", { className: barStack, onClick, onDoubleClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, style: assignInlineVars({
-    [neutralStrongerB3]: `${theme.colors.neutral.backgroundStronger}B3`
-  }), children: text }) }) : /* @__PURE__ */ jsx("div", { className: barStack, onClick, onDoubleClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, children: text }) }, id)) });
+  const computedTotal = useMemo(
+    () => total ?? data.reduce((acc, { value }) => acc + value, 0),
+    [total, data]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${containerBarStack}`,
+      "data-testid": dataTestId,
+      style,
+      children: data.map(
+        ({
+          id,
+          value,
+          text,
+          onClick,
+          onDoubleClick,
+          onKeyDown,
+          onMouseEnter,
+          onMouseLeave,
+          onMouseDown,
+          onMouseUp,
+          tooltip
+        }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: wrapperBarStack,
+            style: assignInlineVars({
+              [wrapperWidth]: `${value / computedTotal * 100}%`
+            }),
+            children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: barStack,
+                onClick,
+                onDoubleClick,
+                onKeyDown,
+                onMouseDown,
+                onMouseEnter,
+                onMouseLeave,
+                onMouseUp,
+                children: text
+              }
+            ) }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: barStack,
+                onClick,
+                onDoubleClick,
+                onKeyDown,
+                onMouseDown,
+                onMouseEnter,
+                onMouseLeave,
+                onMouseUp,
+                children: text
+              }
+            )
+          },
+          id
+        )
+      )
+    }
+  );
 };
 export {
   BarStack

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

@@ -1,3 +1,4 @@
+export declare const wrapperWidth: `var(--${string})`;
 export declare const wrapperBarStack: string;
 export declare const barStack: string;
 export declare const containerBarStack: string;

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

@@ -1,9 +1,11 @@
 /* empty css                          */
-var wrapperBarStack = "uv_1s3oplf0";
-var barStack = "uv_1s3oplf1";
-var containerBarStack = "uv_1s3oplf2";
+var wrapperWidth = "var(--uv_1s3oplf0)";
+var wrapperBarStack = "uv_1s3oplf1";
+var barStack = "uv_1s3oplf2";
+var containerBarStack = "uv_1s3oplf3";
 export {
   barStack,
   containerBarStack,
-  wrapperBarStack
+  wrapperBarStack,
+  wrapperWidth
 };