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

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);

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

@@ -22,5 +22,5 @@ type LineChartProps = {
  * See https://nivo.rocks/line/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, style, "data-testid": dataTestId, }: LineChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, style, "data-testid": dataTestId, }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LineChart/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ResponsiveLine } from "@nivo/line";
 import { useTheme } from "@ultraviolet/themes";
 import { useState, useEffect } from "react";
@@ -8,12 +8,7 @@ import { getNivoTheme } from "../../helpers/nivoTheme.js";
 import { CustomLegend } from "./CustomLegend.js";
 import { getMinChartValue, getMaxChartValue } from "./helpers.js";
 import { LineChartTooltip } from "./Tooltip.js";
-const DEFAULT_MARGIN = {
-  bottom: 50,
-  left: 60,
-  right: 25,
-  top: 50
-};
+const DEFAULT_MARGIN = { bottom: 50, left: 60, right: 25, top: 50 };
 const DEFAULT_XSCALE = {
   format: "%Y-%m-%dT%H:%M:%S%Z",
   // 2021-08-30T02:56:07Z
@@ -21,9 +16,7 @@ const DEFAULT_XSCALE = {
   type: "time",
   useUTC: false
 };
-const DEFAULT_YSCALE = {
-  type: "linear"
-};
+const DEFAULT_YSCALE = { type: "linear" };
 const DEFAULT_CHARTPROPS = {};
 const LineChart = ({
   height = "537px",
@@ -48,43 +41,66 @@ const LineChart = ({
       label: d?.["label"]
     }))
   };
-  const [selected, setSelected] = useState(dataset.datasets?.map(({
-    id
-  }, index) => `${id}${index}`));
-  const finalData = dataset.datasets?.filter(({
-    id
-  }, index) => selected ? selected.includes(`${id}${index}`) : false);
+  const [selected, setSelected] = useState(
+    dataset.datasets?.map(({ id }, index) => `${id}${index}`)
+  );
+  const finalData = dataset.datasets?.filter(
+    ({ id }, index) => selected ? selected.includes(`${id}${index}`) : false
+  );
   useEffect(() => {
     if (selected !== void 0) {
       return;
     }
-    setSelected(dataset.datasets?.map(({
-      id
-    }, index) => `${id}${index}`));
+    setSelected(dataset.datasets?.map(({ id }, index) => `${id}${index}`));
   }, [dataset.datasets, selected]);
   const localColors = getLegendColor(theme);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { style: {
-      height,
-      ...style
-    }, children: /* @__PURE__ */ jsx(ResponsiveLine, { 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: localColors, curve: "monotoneX", data: finalData ?? [], "data-testid": dataTestId, margin, pointSize: 10, theme: getNivoTheme(theme), tooltip: LineChartTooltip, useMesh: true, xFormat: pointFormatters?.x, xScale, yFormat: pointFormatters?.y, yScale: {
-      max: getMaxChartValue(finalData),
-      min: getMinChartValue(finalData),
-      ...yScale
-    }, ...chartProps }) }),
-    withLegend && /* @__PURE__ */ jsx(CustomLegend, { axisTransformer: axisFormatters?.left, data: dataset.datasets, selected: selected ?? [], setSelected })
+    /* @__PURE__ */ jsx("div", { style: { height, ...style }, children: /* @__PURE__ */ jsx(
+      ResponsiveLine,
+      {
+        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: localColors,
+        curve: "monotoneX",
+        data: finalData ?? [],
+        "data-testid": dataTestId,
+        margin,
+        pointSize: 10,
+        theme: getNivoTheme(theme),
+        tooltip: LineChartTooltip,
+        useMesh: true,
+        xFormat: pointFormatters?.x,
+        xScale,
+        yFormat: pointFormatters?.y,
+        yScale: {
+          max: getMaxChartValue(finalData),
+          min: getMinChartValue(finalData),
+          ...yScale
+        },
+        ...chartProps
+      }
+    ) }),
+    withLegend && /* @__PURE__ */ jsx(
+      CustomLegend,
+      {
+        axisTransformer: axisFormatters?.left,
+        data: dataset.datasets,
+        selected: selected ?? [],
+        setSelected
+      }
+    )
   ] });
 };
 export {

package/dist/components/Link/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, OpenInNewIcon, ArrowRightIcon } from "@ultraviolet/icons";
 import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
 import recursivelyGetChildrenString from "../../helpers/recursivelyGetChildrenString.js";
@@ -7,63 +7,80 @@ import { Tooltip } from "../Tooltip/index.js";
 import { link, defaultLink, iconLeftLink, containerIconLink, iconRightLink } from "./styles.css.js";
 const ICON_SIZE = "small";
 const BLANK_TARGET_ICON_SIZE = "small";
-const Link = forwardRef(({
-  children,
-  href,
-  target,
-  download,
-  sentiment = "info",
-  prominence,
-  size = "large",
-  iconPosition,
-  rel,
-  className,
-  onClick,
-  "aria-label": ariaLabel,
-  "aria-current": ariaCurrent,
-  "aria-keyshortcuts": ariaKeyshortcuts,
-  oneLine = false,
-  "data-testid": dataTestId,
-  variant = "standalone",
-  style
-}, ref) => {
-  const isBlank = target === "_blank";
-  const computedRel = rel || (isBlank ? "noopener noreferrer" : void 0);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const elementRef = useRef(null);
-  const usedRef = ref ?? elementRef;
-  const finalStringChildren = recursivelyGetChildrenString(children);
-  const textVariant = useMemo(() => {
-    if (size === "xsmall") {
-      return "captionStrong";
-    }
-    if (size === "small") {
-      return "bodySmallStrong";
-    }
-    return "bodyStrong";
-  }, [size]);
-  useEffect(() => {
-    if (oneLine && usedRef?.current) {
-      const {
-        offsetWidth,
-        scrollWidth
-      } = usedRef.current;
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-  }, [oneLine, ref, usedRef]);
-  return /* @__PURE__ */ jsx(Tooltip, { text: oneLine && isTruncated ? finalStringChildren : "", children: /* @__PURE__ */ jsxs("a", { "aria-current": ariaCurrent, "aria-keyshortcuts": ariaKeyshortcuts, "aria-label": ariaLabel, className: `${className ? `${className} ` : ""}${link({
-    oneLine,
-    prominence,
-    sentiment,
-    type: variant,
-    variant: textVariant
-  })} ${defaultLink}`, "data-testid": dataTestId, "data-variant": variant, download, href, onClick, ref: usedRef, rel: computedRel, style, target, children: [
-    !isBlank && iconPosition === "left" ? /* @__PURE__ */ jsx(ArrowLeftIcon, { className: iconLeftLink, size: ICON_SIZE }) : null,
+const Link = forwardRef(
+  ({
     children,
-    isBlank ? /* @__PURE__ */ jsx("span", { className: containerIconLink, children: /* @__PURE__ */ jsx(OpenInNewIcon, { className: iconRightLink, size: BLANK_TARGET_ICON_SIZE }) }) : null,
-    !isBlank && iconPosition === "right" ? /* @__PURE__ */ jsx(ArrowRightIcon, { className: iconRightLink, size: ICON_SIZE }) : null
-  ] }) });
-});
+    href,
+    target,
+    download,
+    sentiment = "info",
+    prominence,
+    size = "large",
+    iconPosition,
+    rel,
+    className,
+    onClick,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    "aria-keyshortcuts": ariaKeyshortcuts,
+    oneLine = false,
+    "data-testid": dataTestId,
+    variant = "standalone",
+    style
+  }, ref) => {
+    const isBlank = target === "_blank";
+    const computedRel = rel || (isBlank ? "noopener noreferrer" : void 0);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const elementRef = useRef(null);
+    const usedRef = ref ?? elementRef;
+    const finalStringChildren = recursivelyGetChildrenString(children);
+    const textVariant = useMemo(() => {
+      if (size === "xsmall") {
+        return "captionStrong";
+      }
+      if (size === "small") {
+        return "bodySmallStrong";
+      }
+      return "bodyStrong";
+    }, [size]);
+    useEffect(() => {
+      if (oneLine && usedRef?.current) {
+        const { offsetWidth, scrollWidth } = usedRef.current;
+        setIsTruncated(offsetWidth < scrollWidth);
+      }
+    }, [oneLine, ref, usedRef]);
+    return /* @__PURE__ */ jsx(Tooltip, { text: oneLine && isTruncated ? finalStringChildren : "", children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        "aria-current": ariaCurrent,
+        "aria-keyshortcuts": ariaKeyshortcuts,
+        "aria-label": ariaLabel,
+        className: `${className ? `${className} ` : ""}${link({ oneLine, prominence, sentiment, type: variant, variant: textVariant })} ${defaultLink}`,
+        "data-testid": dataTestId,
+        "data-variant": variant,
+        download,
+        href,
+        onClick,
+        ref: usedRef,
+        rel: computedRel,
+        style,
+        target,
+        children: [
+          !isBlank && iconPosition === "left" ? /* @__PURE__ */ jsx(ArrowLeftIcon, { className: iconLeftLink, size: ICON_SIZE }) : null,
+          children,
+          isBlank ? /* @__PURE__ */ jsx("span", { className: containerIconLink, children: /* @__PURE__ */ jsx(
+            OpenInNewIcon,
+            {
+              className: iconRightLink,
+              size: BLANK_TARGET_ICON_SIZE
+            }
+          ) }) : null,
+          !isBlank && iconPosition === "right" ? /* @__PURE__ */ jsx(ArrowRightIcon, { className: iconRightLink, size: ICON_SIZE }) : null
+        ]
+      }
+    ) });
+  }
+);
 export {
   Link
 };