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

package/dist/components/GlobalAlert/GlobalAlertLink.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
 import { Link } from '../Link';
-export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<ComponentProps<typeof Link>, "sentiment" | "prominence" | "size">) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<ComponentProps<typeof Link>, "sentiment" | "prominence" | "size">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalAlert/GlobalAlertLink.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
 import { Link } from "../Link/index.js";
 const GlobalAlertLink = ({
@@ -15,10 +15,26 @@ const GlobalAlertLink = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const {
-    theme
-  } = useTheme();
-  return /* @__PURE__ */ jsx(Link, { "aria-label": ariaLabel, className, "data-testid": dataTestId, download, href, onClick, oneLine, prominence: theme === "light" ? "strong" : "stronger", rel, size: "small", style, target, variant: "inline", children });
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      "aria-label": ariaLabel,
+      className,
+      "data-testid": dataTestId,
+      download,
+      href,
+      onClick,
+      oneLine,
+      prominence: theme === "light" ? "strong" : "stronger",
+      rel,
+      size: "small",
+      style,
+      target,
+      variant: "inline",
+      children
+    }
+  );
 };
 export {
   GlobalAlertLink

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

@@ -15,7 +15,7 @@ type GlobalAlertProps = {
  * It has its own internal state and can be closed by clicking on the close button.
  */
 export declare const GlobalAlert: {
-    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, style, }: GlobalAlertProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
-    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<import("react").ComponentProps<typeof import("..").Link>, "sentiment" | "prominence" | "size">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, style, }: GlobalAlertProps): import("react/jsx-runtime").JSX.Element | null;
+    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<import("react").ComponentProps<typeof import("..").Link>, "sentiment" | "prominence" | "size">) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/GlobalAlert/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 { useReducer } from "react";
 import { Button } from "../Button/index.js";
@@ -22,16 +22,56 @@ const GlobalAlert = ({
   if (!opened) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: `${className ? `${className} ` : ""}${container[variant]}`, "data-testid": dataTestId, "data-variant": variant, direction: "row", justifyContent: "center", style, children: [
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 2, justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "white", variant: "bodySmall", children }),
-      onClickButton && buttonText ? /* @__PURE__ */ jsx(Button, { onClick: onClickButton, sentiment: "white", size: "small", variant: "filled", children: buttonText }) : null
-    ] }),
-    closable ? /* @__PURE__ */ jsx(Button, { className: closeButton, onClick: () => {
-      toggleOpened();
-      onClose?.();
-    }, sentiment: "primary", size: "xsmall", variant: "filled", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      alignItems: "center",
+      className: `${className ? `${className} ` : ""}${container[variant]}`,
+      "data-testid": dataTestId,
+      "data-variant": variant,
+      direction: "row",
+      justifyContent: "center",
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: "center",
+            direction: "row",
+            gap: 2,
+            justifyContent: "center",
+            children: [
+              /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "white", variant: "bodySmall", children }),
+              onClickButton && buttonText ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: onClickButton,
+                  sentiment: "white",
+                  size: "small",
+                  variant: "filled",
+                  children: buttonText
+                }
+              ) : null
+            ]
+          }
+        ),
+        closable ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: closeButton,
+            onClick: () => {
+              toggleOpened();
+              onClose?.();
+            },
+            sentiment: "primary",
+            size: "xsmall",
+            variant: "filled",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
 };
 GlobalAlert.Link = GlobalAlertLink;
 export {

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

@@ -35,5 +35,5 @@ type InfiniteScrollProps = {
  * You can add it at the end of a list of items and it will call the `onLoadMore` function when the user scrolls to the bottom of the list.
  * The component will take the first parent that has as the scroll to listen on it. In some rare cases, if you need to change the scroll listener, you can use the `scrollParentRef` prop.
  */
-export declare const InfiniteScroll: ({ className, "data-testid": dataTestId, onLoadMore, scrollParentRef, height, loader, id, as: Component, hasMore, heightThreshold, style, }: InfiniteScrollProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const InfiniteScroll: ({ className, "data-testid": dataTestId, onLoadMore, scrollParentRef, height, loader, id, as: Component, hasMore, heightThreshold, style, }: InfiniteScrollProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfiniteScroll/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { Loader } from "../Loader/index.js";
 const HEIGHT_THRESHOLD = 100;
@@ -29,40 +29,37 @@ const InfiniteScroll = ({
       }, delay);
     };
   }, []);
-  const handleScroll = useCallback((scrollableContainer) => {
-    if (!containerRef.current) {
-      return;
-    }
-    if (!onLoadMore) {
-      return;
-    }
-    const {
-      scrollTop,
-      scrollHeight,
-      clientHeight
-    } = scrollableContainer;
-    if (scrollTop + clientHeight >= scrollHeight - heightThreshold) {
-      setIsLoading(true);
-      const result = onLoadMore();
-      if (result instanceof Promise) {
-        result.then(() => {
-          setIsLoading(false);
-        }).catch((error) => {
-          setIsLoading(false);
-          throw error;
-        });
+  const handleScroll = useCallback(
+    (scrollableContainer) => {
+      if (!containerRef.current) {
+        return;
       }
-    }
-  }, [onLoadMore, heightThreshold]);
+      if (!onLoadMore) {
+        return;
+      }
+      const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+      if (scrollTop + clientHeight >= scrollHeight - heightThreshold) {
+        setIsLoading(true);
+        const result = onLoadMore();
+        if (result instanceof Promise) {
+          result.then(() => {
+            setIsLoading(false);
+          }).catch((error) => {
+            setIsLoading(false);
+            throw error;
+          });
+        }
+      }
+    },
+    [onLoadMore, heightThreshold]
+  );
   useEffect(() => {
     if (!hasMore) {
       return;
     }
     let scrollableContainer = scrollParentRef?.current || containerRef.current?.parentElement;
     while (scrollableContainer && scrollableContainer !== document.body) {
-      const {
-        overflowY
-      } = window.getComputedStyle(scrollableContainer);
+      const { overflowY } = window.getComputedStyle(scrollableContainer);
       if (overflowY === "auto" || overflowY === "scroll") {
         break;
       }
@@ -71,7 +68,10 @@ const InfiniteScroll = ({
     if (!scrollableContainer) {
       return;
     }
-    const debouncedHandleScroll = debounce(() => handleScroll(scrollableContainer), 100);
+    const debouncedHandleScroll = debounce(
+      () => handleScroll(scrollableContainer),
+      100
+    );
     scrollableContainer.addEventListener("scroll", debouncedHandleScroll);
     return () => {
       scrollableContainer.removeEventListener("scroll", debouncedHandleScroll);
@@ -81,10 +81,17 @@ const InfiniteScroll = ({
   if (isLoading) {
     return localLoader;
   }
-  return /* @__PURE__ */ jsx(Component, { className, "data-testid": dataTestId, id, ref: containerRef, role: "feed", style: {
-    height,
-    ...style
-  } });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className,
+      "data-testid": dataTestId,
+      id,
+      ref: containerRef,
+      role: "feed",
+      style: { height, ...style }
+    }
+  );
 };
 export {
   InfiniteScroll

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

@@ -13,5 +13,5 @@ type KeyProps = {
 /**
  * Key is a visual component used to display keyboard shortcuts.
  */
-export declare const Key: ({ children, prominence, disabled, size, sentiment, id, className, "data-testid": dataTestId, style, }: KeyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Key: ({ children, prominence, disabled, size, sentiment, id, className, "data-testid": dataTestId, style, }: KeyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Key/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 { KEYS_MATCH } from "./constants.js";
@@ -15,7 +15,10 @@ const Key = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const specialKey = useMemo(() => Object.keys(KEYS_MATCH).find((key2) => key2 === children.toLowerCase()), [children]);
+  const specialKey = useMemo(
+    () => Object.keys(KEYS_MATCH).find((key2) => key2 === children.toLowerCase()),
+    [children]
+  );
   const textProminence = useMemo(() => {
     if (prominence === "default") {
       return "default";
@@ -25,12 +28,30 @@ const Key = ({
     }
     return "stronger";
   }, [sentiment, prominence]);
-  return /* @__PURE__ */ jsx("kbd", { className: `${className ? `${className} ` : ""}${key({
-    disabled,
-    prominence,
-    sentiment,
-    size
-  })}`, "data-disabled": disabled, "data-prominence": prominence, "data-sentiment": sentiment, "data-size": size, "data-testid": dataTestId, id, style, children: /* @__PURE__ */ jsx(Text, { as: "span", disabled, prominence: textProminence, sentiment, variant: size === "medium" ? "caption" : "captionSmall", children: specialKey ? KEYS_MATCH[specialKey] : children }) });
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: `${className ? `${className} ` : ""}${key({ disabled, prominence, sentiment, size })}`,
+      "data-disabled": disabled,
+      "data-prominence": prominence,
+      "data-sentiment": sentiment,
+      "data-size": size,
+      "data-testid": dataTestId,
+      id,
+      style,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          disabled,
+          prominence: textProminence,
+          sentiment,
+          variant: size === "medium" ? "caption" : "captionSmall",
+          children: specialKey ? KEYS_MATCH[specialKey] : children
+        }
+      )
+    }
+  );
 };
 export {
   Key

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

@@ -18,5 +18,5 @@ type LabelProps = {
 /**
  * Label is used inside all of our input components, but it can be used outside for design purposes
  */
-export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Label/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -26,11 +26,46 @@ const LabelRequiredOrNot = ({
   }, [disabled, htmlFor]);
   if (required) {
     return /* @__PURE__ */ jsxs(Stack, { alignItems: "start", direction: "row", gap: "0.5", style, children: [
-      /* @__PURE__ */ jsx(Text, { as: as === "label" ? "label" : "legend", className: textPointer[textPointerValue], disabled, htmlFor, id, sentiment, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", children }),
-      /* @__PURE__ */ jsx(Text, { "aria-label": "required", as: "span", disabled, sentiment: "danger", variant: size === "large" ? "bodyStrong" : "bodySmallStrong", children: "*" })
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: as === "label" ? "label" : "legend",
+          className: textPointer[textPointerValue],
+          disabled,
+          htmlFor,
+          id,
+          sentiment,
+          variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          "aria-label": "required",
+          as: "span",
+          disabled,
+          sentiment: "danger",
+          variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+          children: "*"
+        }
+      )
     ] });
   }
-  return /* @__PURE__ */ jsx(Text, { as: as === "label" ? "label" : "legend", className: textPointer[textPointerValue], disabled, htmlFor, id, sentiment, style, variant: size === "large" ? "bodyStrong" : "bodySmallStrong", children });
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: as === "label" ? "label" : "legend",
+      className: textPointer[textPointerValue],
+      disabled,
+      htmlFor,
+      id,
+      sentiment,
+      style,
+      variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+      children
+    }
+  );
 };
 const Label = ({
   as = "label",
@@ -44,9 +79,35 @@ const Label = ({
   disabled,
   style
 }) => labelDescription ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
-  /* @__PURE__ */ jsx(LabelRequiredOrNot, { as, disabled, htmlFor, id, required, sentiment, size, style, children }),
+  /* @__PURE__ */ jsx(
+    LabelRequiredOrNot,
+    {
+      as,
+      disabled,
+      htmlFor,
+      id,
+      required,
+      sentiment,
+      size,
+      style,
+      children
+    }
+  ),
   typeof labelDescription === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "bodySmall", children: labelDescription }) : labelDescription
-] }) : /* @__PURE__ */ jsx(LabelRequiredOrNot, { as, disabled, htmlFor, id, required, sentiment, size, style, children });
+] }) : /* @__PURE__ */ jsx(
+  LabelRequiredOrNot,
+  {
+    as,
+    disabled,
+    htmlFor,
+    id,
+    required,
+    sentiment,
+    size,
+    style,
+    children
+  }
+);
 export {
   Label
 };

package/dist/components/LineChart/CustomLegend.d.ts

@@ -9,5 +9,5 @@ type CustomLegendProps = {
     className?: string;
     'data-testid'?: string;
 };
-export declare const CustomLegend: ({ axisTransformer, data, selected, setSelected, className, "data-testid": dataTestId, }: CustomLegendProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CustomLegend: ({ axisTransformer, data, selected, setSelected, className, "data-testid": dataTestId, }: CustomLegendProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LineChart/CustomLegend.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { theme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { getLegendColor } from "../../helpers/legend.js";
@@ -7,10 +7,7 @@ import { Checkbox } from "../Checkbox/index.js";
 import { Text } from "../Text/index.js";
 import { getSelected, getMin, getMax, getAverage, getCurrent } from "./helpers.js";
 import { container, lineChartHead, longContainer, lineChartBody, lineChartRow, cellValueContainer, lineChartLegend, backgroundColorLegend, textLegend } from "./styles.css.js";
-const Cell = ({
-  value,
-  variant
-}) => /* @__PURE__ */ jsx(Text, { as: "span", className: textLegend, sentiment: "neutral", variant, children: value });
+const Cell = ({ value, variant }) => /* @__PURE__ */ jsx(Text, { as: "span", className: textLegend, sentiment: "neutral", variant, children: value });
 const noop = (value) => value.toString();
 const CustomLegend = ({
   axisTransformer = noop,
@@ -19,46 +16,73 @@ const CustomLegend = ({
   setSelected,
   className,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${container}`, "data-testid": dataTestId, children: [
-  /* @__PURE__ */ jsxs("div", { className: lineChartHead, children: [
-    /* @__PURE__ */ jsx("div", { className: longContainer, children: "Legend" }),
-    /* @__PURE__ */ jsx(Cell, { value: "Minimum", variant: "body" }),
-    /* @__PURE__ */ jsx(Cell, { value: "Maximum", variant: "body" }),
-    /* @__PURE__ */ jsx(Cell, { value: "Average", variant: "body" }),
-    /* @__PURE__ */ jsx(Cell, { value: "Current", variant: "body" })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: lineChartBody, children: data?.map((row, index) => {
-    const values = row.data.map((val) => val.y);
-    const labelIndexed = `${row.id}${index}`;
-    const id = row.id.toString();
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: lineChartRow,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: longContainer, children: /* @__PURE__ */ jsx(Checkbox, { checked: selected.includes(labelIndexed), name: id, onChange: () => setSelected([...getSelected(id, index, selected)]), children: /* @__PURE__ */ jsxs("div", { className: cellValueContainer, children: [
-            /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "bodySmall", children: row?.["label"] }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: lineChartLegend,
-                "data-testid": `label-${id}`,
-                style: assignInlineVars({
-                  [backgroundColorLegend]: getLegendColor(theme)[index]
-                })
-              }
-            )
-          ] }) }) }),
-          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMin(values)), variant: "bodySmall" }),
-          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMax(values)), variant: "bodySmall" }),
-          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getAverage(values)), variant: "bodySmall" }),
-          /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getCurrent(values)), variant: "bodySmall" })
-        ]
-      },
-      labelIndexed
-    );
-  }) })
-] });
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${container}`,
+    "data-testid": dataTestId,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: lineChartHead, children: [
+        /* @__PURE__ */ jsx("div", { className: longContainer, children: "Legend" }),
+        /* @__PURE__ */ jsx(Cell, { value: "Minimum", variant: "body" }),
+        /* @__PURE__ */ jsx(Cell, { value: "Maximum", variant: "body" }),
+        /* @__PURE__ */ jsx(Cell, { value: "Average", variant: "body" }),
+        /* @__PURE__ */ jsx(Cell, { value: "Current", variant: "body" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: lineChartBody, children: data?.map((row, index) => {
+        const values = row.data.map((val) => val.y);
+        const labelIndexed = `${row.id}${index}`;
+        const id = row.id.toString();
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: lineChartRow,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: longContainer, children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: selected.includes(labelIndexed),
+                  name: id,
+                  onChange: () => setSelected([...getSelected(id, index, selected)]),
+                  children: /* @__PURE__ */ jsxs("div", { className: cellValueContainer, children: [
+                    /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "bodySmall", children: row?.["label"] }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: lineChartLegend,
+                        "data-testid": `label-${id}`,
+                        style: assignInlineVars({
+                          [backgroundColorLegend]: getLegendColor(theme)[index]
+                        })
+                      }
+                    )
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMin(values)), variant: "bodySmall" }),
+              /* @__PURE__ */ jsx(Cell, { value: axisTransformer(getMax(values)), variant: "bodySmall" }),
+              /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  value: axisTransformer(getAverage(values)),
+                  variant: "bodySmall"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  value: axisTransformer(getCurrent(values)),
+                  variant: "bodySmall"
+                }
+              )
+            ]
+          },
+          labelIndexed
+        );
+      }) })
+    ]
+  }
+);
 export {
   CustomLegend
 };

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

@@ -2,5 +2,5 @@ import type { Point } from '@nivo/line';
 type LineChartTooltipProps = {
     point: Point;
 };
-export declare const LineChartTooltip: ({ point }: LineChartTooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LineChartTooltip: ({ point }: LineChartTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LineChart/Tooltip.js

@@ -1,17 +1,39 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Text } from "../Text/index.js";
 import { lineTooltipContainer, lineColorSquare, colorLine } from "./styles.css.js";
-const LineChartTooltip = ({
-  point
-}) => /* @__PURE__ */ jsxs("div", { className: lineTooltipContainer, children: [
-  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { className: lineColorSquare, style: assignInlineVars({
-    [colorLine]: point.serieColor
-  }) }) }),
+const LineChartTooltip = ({ point }) => /* @__PURE__ */ jsxs("div", { className: lineTooltipContainer, children: [
+  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: lineColorSquare,
+      style: assignInlineVars({
+        [colorLine]: point.serieColor
+      })
+    }
+  ) }),
   /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Text, { as: "div", prominence: "stronger", sentiment: "neutral", variant: "bodyStronger", children: point.data.yFormatted }),
-    /* @__PURE__ */ jsx(Text, { as: "div", prominence: "stronger", sentiment: "neutral", variant: "bodySmall", children: point.data.xFormatted })
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        prominence: "stronger",
+        sentiment: "neutral",
+        variant: "bodyStronger",
+        children: point.data.yFormatted
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        prominence: "stronger",
+        sentiment: "neutral",
+        variant: "bodySmall",
+        children: point.data.xFormatted
+      }
+    )
   ] })
 ] });
 export {

package/dist/components/LineChart/helpers.js

@@ -12,30 +12,31 @@ const parse = (data) => {
 };
 const getMin = (values = []) => values.length > 0 ? Math.min(...values.map((data) => parse(data))) : 0;
 const getMax = (values = []) => values.length > 0 ? Math.max(...values.map((data) => parse(data))) : 0;
-const getAverage = (values = []) => values.length > 0 ? Math.round(values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100) / 100 : 0;
+const getAverage = (values = []) => values.length > 0 ? Math.round(
+  values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100
+) / 100 : 0;
 const getMaxChartValue = (preppedData) => {
   if (!preppedData?.length) {
     return 0;
   }
-  const maximum = Math.max(...preppedData.map(({
-    data
-  }) => getMax(data.map(({
-    y
-  }) => y || 0))));
+  const maximum = Math.max(
+    ...preppedData.map(({ data }) => getMax(data.map(({ y }) => y || 0)))
+  );
   return Math.ceil(maximum + maximum * 0.1);
 };
 const getMinChartValue = (preppedData) => {
   if (!preppedData?.length) {
     return 0;
   }
-  const minimum = Math.min(...preppedData.map(({
-    data
-  }) => getMin(data.map(({
-    y
-  }) => y || 0))));
+  const minimum = Math.min(
+    ...preppedData.map(({ data }) => getMin(data.map(({ y }) => y || 0)))
+  );
   return Math.floor(minimum - minimum * 0.1);
 };
-const getCurrent = (values = []) => values.length > 0 ? values[values.length - 1] : 0;
+const getCurrent = (values = []) => {
+  const val = values.at(-1);
+  return val ? val : 0;
+};
 const getSelected = (label, index, selected = []) => {
   const labelIndexed = label + index.toString();
   const found = selected.indexOf(labelIndexed);