@ultraviolet/ui 3.9.0 → 3.10.0

package/dist/components/PasswordCheck/index.js

@@ -1,28 +1,41 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
-import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
-import { cn } from "@ultraviolet/utils";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { passwordCheckContainer } from "./styles.css.js";
-const PasswordCheck = ({
-  rules,
-  className,
-  "data-testid": dataTestId,
-  style
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(className, passwordCheckContainer),
-    "data-testid": dataTestId,
-    style,
-    children: rules.map((rule) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-      rule.valid ? /* @__PURE__ */ jsx(CheckCircleIcon, { prominence: "weak", sentiment: "success", size: "small" }) : /* @__PURE__ */ jsx(CloseIcon, { prominence: "weak", sentiment: "neutral", size: "small" }),
-      /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", children: rule.text })
-    ] }, rule.name))
-  }
-);
-export {
-  PasswordCheck
-};
+import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+
+//#region src/components/PasswordCheck/index.tsx
+/**
+* PasswordCheck is a component that display a list of password rules with a check or a cross depending on the validity
+* of the rule.
+*/
+const PasswordCheck = ({ rules, className, "data-testid": dataTestId, style }) => /* @__PURE__ */ jsx("div", {
+	className: cn(className, passwordCheckContainer),
+	"data-testid": dataTestId,
+	style,
+	children: rules.map((rule) => /* @__PURE__ */ jsxs(Stack, {
+		alignItems: "center",
+		direction: "row",
+		gap: 1,
+		children: [rule.valid ? /* @__PURE__ */ jsx(CheckCircleIcon, {
+			prominence: "weak",
+			sentiment: "success",
+			size: "small"
+		}) : /* @__PURE__ */ jsx(CloseIcon, {
+			prominence: "weak",
+			sentiment: "neutral",
+			size: "small"
+		}), /* @__PURE__ */ jsx(Text, {
+			as: "p",
+			variant: "caption",
+			children: rule.text
+		})]
+	}, rule.name))
+});
+
+//#endregion
+export { PasswordCheck };

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

@@ -1,5 +1,7 @@
-/* empty css                          */
+/* empty css                      */
+
+//#region src/components/PasswordCheck/styles.css.ts
 var passwordCheckContainer = "uv_4g08in0";
-export {
-  passwordCheckContainer
-};
+
+//#endregion
+export { passwordCheckContainer };

package/dist/components/PieChart/Legends.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Legends.d.ts","sourceRoot":"","sources":["../../../src/components/PieChart/Legends.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,IAAI,EAAE,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,2CAKrB,YAAY,4CAqDd,CAAA"}
+{"version":3,"file":"Legends.d.ts","sourceRoot":"","sources":["../../../src/components/PieChart/Legends.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,IAAI,EAAE,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,OAAO,sGA0DnB,CAAA"}

package/dist/components/PieChart/Legends.js

@@ -1,69 +1,57 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Tooltip } from "../Tooltip/index.js";
-import { listPie, listItemPie, toggleBoxPie, bulletPie, colorBullet, labelPie, textPie, linePie, progressiveLinePie, valuePie } from "./styles.css.js";
+import { bulletPie, colorBullet, labelPie, linePie, listItemPie, listPie, progressiveLinePie, textPie, toggleBoxPie, valuePie } from "./styles.css.js";
 import { Tooltip as Tooltip$1 } from "./Tooltip.js";
-const Legends = ({
-  focused,
-  data,
-  onFocusChange,
-  colors
-}) => /* @__PURE__ */ jsx("ul", { className: listPie, children: data?.map((item, index) => {
-  const isSegmentFocused = focused !== void 0 && item.id === focused;
-  const id = `chart-legend-${item.id}`;
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      id,
-      text: /* @__PURE__ */ jsx(Tooltip$1, { data: item }),
-      visible: isSegmentFocused,
-      children: /* @__PURE__ */ jsxs("li", { className: listItemPie({ isFocused: isSegmentFocused }), children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: toggleBoxPie,
-            "data-testid": id,
-            onBlur: () => onFocusChange(),
-            onFocus: () => onFocusChange(item.id),
-            onMouseOut: () => onFocusChange(),
-            onMouseOver: () => onFocusChange(item.id)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: bulletPie({ isFocused: isSegmentFocused }),
-            color: colors[index],
-            id: `chart-legend-${item.id}`,
-            style: assignInlineVars({
-              [colorBullet]: colors[index]
-            })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: labelPie, children: [
-          /* @__PURE__ */ jsx("span", { className: textPie({ isFocused: isSegmentFocused }), children: item.name }),
-          /* @__PURE__ */ jsx("span", { className: linePie, children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: progressiveLinePie({
-                isFocused: isSegmentFocused
-              })
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: valuePie[isSegmentFocused ? "isFocused" : "default"],
-            children: item.value
-          }
-        )
-      ] })
-    },
-    item.id
-  );
-}) });
-export {
-  Legends
-};
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/PieChart/Legends.tsx
+const Legends = ({ focused, data, onFocusChange, colors }) => /* @__PURE__ */ jsx("ul", {
+	className: listPie,
+	children: data === null || data === void 0 ? void 0 : data.map((item, index) => {
+		const isSegmentFocused = focused !== void 0 && item.id === focused;
+		const id = `chart-legend-${item.id}`;
+		return /* @__PURE__ */ jsx(Tooltip, {
+			id,
+			text: /* @__PURE__ */ jsx(Tooltip$1, { data: item }),
+			visible: isSegmentFocused,
+			children: /* @__PURE__ */ jsxs("li", {
+				className: listItemPie({ isFocused: isSegmentFocused }),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: toggleBoxPie,
+						"data-testid": id,
+						onBlur: () => onFocusChange(),
+						onFocus: () => onFocusChange(item.id),
+						onMouseOut: () => onFocusChange(),
+						onMouseOver: () => onFocusChange(item.id)
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: bulletPie({ isFocused: isSegmentFocused }),
+						color: colors[index],
+						id: `chart-legend-${item.id}`,
+						style: assignInlineVars({ [colorBullet]: colors[index] })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: labelPie,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: textPie({ isFocused: isSegmentFocused }),
+							children: item.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: linePie,
+							children: /* @__PURE__ */ jsx("span", { className: progressiveLinePie({ isFocused: isSegmentFocused }) })
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: valuePie[isSegmentFocused ? "isFocused" : "default"],
+						children: item.value
+					})
+				]
+			})
+		}, item.id);
+	})
+});
+
+//#endregion
+export { Legends };

package/dist/components/PieChart/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/PieChart/Tooltip.tsx"],"names":[],"mappings":"AAKA,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACrB,OAAO,CAAC,EACJ;YACE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;YACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;SACtB,EAAE,GACH,IAAI,CAAA;KACT,CAAA;CACF,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,UAAU,YAAY,4CAuB7C,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/PieChart/Tooltip.tsx"],"names":[],"mappings":"AAKA,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACrB,OAAO,CAAC,EACJ;YACE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;YACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;SACtB,EAAE,GACH,IAAI,CAAA;KACT,CAAA;CACF,CAAA;AAED,eAAO,MAAM,OAAO,qEAuBnB,CAAA"}

package/dist/components/PieChart/Tooltip.js

@@ -1,17 +1,47 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Text } from "../Text/index.js";
-import { listTooltipPie, itemTooltipPie } from "./styles.css.js";
-const Tooltip = ({ data }) => /* @__PURE__ */ jsx("div", { role: "tooltip", tabIndex: -1, children: /* @__PURE__ */ jsxs("ul", { className: listTooltipPie, children: [
-  /* @__PURE__ */ jsxs("li", { className: itemTooltipPie, children: [
-    /* @__PURE__ */ jsx(Text, { as: "p", prominence: "stronger", variant: "body", children: data.name }),
-    /* @__PURE__ */ jsx(Text, { as: "p", prominence: "stronger", variant: "body", children: data.value })
-  ] }),
-  data.details?.map((detail) => /* @__PURE__ */ jsxs("li", { className: itemTooltipPie, children: [
-    /* @__PURE__ */ jsx(Text, { as: "p", prominence: "stronger", variant: "bodySmall", children: detail.name }),
-    /* @__PURE__ */ jsx(Text, { as: "p", prominence: "stronger", variant: "bodySmall", children: detail.value })
-  ] }, detail.name))
-] }) });
-export {
-  Tooltip
+import { itemTooltipPie, listTooltipPie } from "./styles.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/PieChart/Tooltip.tsx
+const Tooltip = ({ data }) => {
+	var _data$details;
+	return /* @__PURE__ */ jsx("div", {
+		role: "tooltip",
+		tabIndex: -1,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: listTooltipPie,
+			children: [/* @__PURE__ */ jsxs("li", {
+				className: itemTooltipPie,
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "p",
+					prominence: "stronger",
+					variant: "body",
+					children: data.name
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					prominence: "stronger",
+					variant: "body",
+					children: data.value
+				})]
+			}), (_data$details = data.details) === null || _data$details === void 0 ? void 0 : _data$details.map((detail) => /* @__PURE__ */ jsxs("li", {
+				className: itemTooltipPie,
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "p",
+					prominence: "stronger",
+					variant: "bodySmall",
+					children: detail.name
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					prominence: "stronger",
+					variant: "bodySmall",
+					children: detail.value
+				})]
+			}, detail.name))]
+		})
+	});
 };
+
+//#endregion
+export { Tooltip };

package/dist/components/PieChart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PieChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,YAAY,CAAA;AAKrC,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAYrD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,KAAK,aAAa,GAAG;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAKD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,uFAUtB,aAAa,4CAgGf,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PieChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,YAAY,CAAA;AAKrC,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAYrD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,KAAK,aAAa,GAAG;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAKD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,mJA0GpB,CAAA"}

package/dist/components/PieChart/index.js

@@ -1,111 +1,103 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Pie } from "@nivo/pie";
-import { useTheme } from "@ultraviolet/themes";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useState, useCallback } from "react";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { Text } from "../Text/index.js";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";
-import { Text } from "../Text/index.js";
+import { containerPie, contentPie, emptyLegendPie, heightContainerPie } from "./styles.css.js";
 import { Legends } from "./Legends.js";
-import { emptyLegendPie, containerPie, contentPie, heightContainerPie } from "./styles.css.js";
+import { useCallback, useState } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+import { Pie } from "@nivo/pie";
+
+//#region src/components/PieChart/index.tsx
 const DEFAULT_CHARTPROPS = {};
-const DEFAULT_MARGIN = { bottom: 10, left: 10, right: 10, top: 10 };
-const PieChart = ({
-  height = 206,
-  width = 206,
-  data = void 0,
-  emptyLegend,
-  content,
-  withLegend = false,
-  margin = DEFAULT_MARGIN,
-  chartProps = DEFAULT_CHARTPROPS,
-  style
-}) => {
-  const theme = useTheme();
-  const [currentFocusIndex, setCurrentFocusIndex] = useState();
-  const emptyTooltip = useCallback(() => /* @__PURE__ */ jsx("span", {}), []);
-  const isEmpty = !data || data.length === 0;
-  const EmptyLegendDisplayed = useCallback(
-    () => emptyLegend ? /* @__PURE__ */ jsx("div", { className: emptyLegendPie, children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", children: emptyLegend }) }) : null,
-    [emptyLegend]
-  );
-  const localColors = getLegendColor(theme);
-  const LegendDisplayer = useCallback(
-    () => isEmpty ? /* @__PURE__ */ jsx(EmptyLegendDisplayed, {}) : /* @__PURE__ */ jsx(
-      Legends,
-      {
-        colors: localColors,
-        data,
-        focused: currentFocusIndex,
-        onFocusChange: setCurrentFocusIndex
-      }
-    ),
-    [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: containerPie,
-      style: {
-        ...assignInlineVars({
-          [heightContainerPie]: height ? `${height}px` : ""
-        }),
-        ...style
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx(
-            Pie,
-            {
-              activeOuterRadiusOffset: isEmpty ? 0 : 4,
-              colors: localColors,
-              cornerRadius: 0,
-              data: isEmpty ? [
-                {
-                  id: "empty",
-                  percent: 100
-                }
-              ] : data,
-              defs: [
-                {
-                  background: "inherit",
-                  color: theme.colors.neutral.textStrong,
-                  id: "lines",
-                  lineWidth: 2,
-                  rotation: 0,
-                  spacing: 5,
-                  type: "patternLines"
-                }
-              ],
-              enableArcLabels: false,
-              enableArcLinkLabels: false,
-              height,
-              innerRadius: 0.8,
-              margin,
-              onMouseEnter: (datum, event) => {
-                if (!isEmpty) {
-                  const pie = event.currentTarget;
-                  pie.style.cursor = "pointer";
-                  setCurrentFocusIndex(datum.id.toString());
-                }
-              },
-              onMouseLeave: () => setCurrentFocusIndex(void 0),
-              padAngle: 1,
-              theme: getNivoTheme(theme),
-              tooltip: emptyTooltip,
-              value: "percent",
-              width,
-              ...chartProps
-            }
-          ),
-          content ? /* @__PURE__ */ jsx("div", { className: contentPie, children: content }) : null
-        ] }),
-        withLegend ? /* @__PURE__ */ jsx(LegendDisplayer, {}) : null
-      ]
-    }
-  );
+const DEFAULT_MARGIN = {
+	bottom: 10,
+	left: 10,
+	right: 10,
+	top: 10
 };
-export {
-  PieChart
+/**
+* PieChart component is a wrapper around the Nivo Pie component to display a pie chart.
+* See https://nivo.rocks/pie/ for more information.
+* @experimental This component is experimental and may be subject to breaking changes in the future.
+*/
+const PieChart = ({ height = 206, width = 206, data = void 0, emptyLegend, content, withLegend = false, margin = DEFAULT_MARGIN, chartProps = DEFAULT_CHARTPROPS, style }) => {
+	const theme = useTheme();
+	const [currentFocusIndex, setCurrentFocusIndex] = useState();
+	const emptyTooltip = useCallback(() => /* @__PURE__ */ jsx("span", {}), []);
+	const isEmpty = !data || data.length === 0;
+	const EmptyLegendDisplayed = useCallback(() => emptyLegend ? /* @__PURE__ */ jsx("div", {
+		className: emptyLegendPie,
+		children: /* @__PURE__ */ jsx(Text, {
+			as: "p",
+			variant: "body",
+			children: emptyLegend
+		})
+	}) : null, [emptyLegend]);
+	const localColors = getLegendColor(theme);
+	const LegendDisplayer = useCallback(() => isEmpty ? /* @__PURE__ */ jsx(EmptyLegendDisplayed, {}) : /* @__PURE__ */ jsx(Legends, {
+		colors: localColors,
+		data,
+		focused: currentFocusIndex,
+		onFocusChange: setCurrentFocusIndex
+	}), [
+		isEmpty,
+		currentFocusIndex,
+		data,
+		EmptyLegendDisplayed,
+		localColors
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerPie,
+		style: _objectSpread2(_objectSpread2({}, assignInlineVars({ [heightContainerPie]: height ? `${height}px` : "" })), style),
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: { position: "relative" },
+			children: [/* @__PURE__ */ jsx(Pie, _objectSpread2({
+				activeOuterRadiusOffset: isEmpty ? 0 : 4,
+				colors: localColors,
+				cornerRadius: 0,
+				data: isEmpty ? [{
+					id: "empty",
+					percent: 100
+				}] : data,
+				defs: [{
+					background: "inherit",
+					color: theme.colors.neutral.textStrong,
+					id: "lines",
+					lineWidth: 2,
+					rotation: 0,
+					spacing: 5,
+					type: "patternLines"
+				}],
+				enableArcLabels: false,
+				enableArcLinkLabels: false,
+				height,
+				innerRadius: .8,
+				margin,
+				onMouseEnter: (datum, event) => {
+					if (!isEmpty) {
+						const pie = event.currentTarget;
+						pie.style.cursor = "pointer";
+						setCurrentFocusIndex(datum.id.toString());
+					}
+				},
+				onMouseLeave: () => setCurrentFocusIndex(void 0),
+				padAngle: 1,
+				theme: getNivoTheme(theme),
+				tooltip: emptyTooltip,
+				value: "percent",
+				width
+			}, chartProps)), content ? /* @__PURE__ */ jsx("div", {
+				className: contentPie,
+				children: content
+			}) : null]
+		}), withLegend ? /* @__PURE__ */ jsx(LegendDisplayer, {}) : null]
+	});
 };
+
+//#endregion
+export { PieChart };

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

@@ -1,36 +1,55 @@
-/* empty css                          */
+/* empty css                      */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/PieChart/styles.css.ts
 var heightContainerPie = "var(--uv_6tpqrj0)";
 var colorBullet = "var(--uv_6tpqrj1)";
 var containerPie = "uv_6tpqrj3";
 var emptyLegendPie = "uv_6tpqrj4";
 var contentPie = "uv_6tpqrj5";
 var listPie = "uv_6tpqrj6";
-var listItemPie = createRuntimeFn({ defaultClassName: "uv_6tpqrj7", variantClassNames: { isFocused: { false: "uv_6tpqrj8", true: "uv_6tpqrj9" } }, defaultVariants: {}, compoundVariants: [] });
-var bulletPie = createRuntimeFn({ defaultClassName: "uv_6tpqrja", variantClassNames: { isFocused: { true: "uv_6tpqrjb" } }, defaultVariants: {}, compoundVariants: [] });
+var listItemPie = createRuntimeFn({
+	defaultClassName: "uv_6tpqrj7",
+	variantClassNames: { isFocused: {
+		false: "uv_6tpqrj8",
+		true: "uv_6tpqrj9"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var bulletPie = createRuntimeFn({
+	defaultClassName: "uv_6tpqrja",
+	variantClassNames: { isFocused: { true: "uv_6tpqrjb" } },
+	defaultVariants: {},
+	compoundVariants: []
+});
 var labelPie = "uv_6tpqrjc";
-var valuePie = { "default": "uv_6tpqrjd", isFocused: "uv_6tpqrje" };
-var textPie = createRuntimeFn({ defaultClassName: "uv_6tpqrjf", variantClassNames: { isFocused: { false: "uv_6tpqrjg", true: "uv_6tpqrjh" } }, defaultVariants: {}, compoundVariants: [] });
+var valuePie = {
+	"default": "uv_6tpqrjd",
+	isFocused: "uv_6tpqrje"
+};
+var textPie = createRuntimeFn({
+	defaultClassName: "uv_6tpqrjf",
+	variantClassNames: { isFocused: {
+		false: "uv_6tpqrjg",
+		true: "uv_6tpqrjh"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
 var toggleBoxPie = "uv_6tpqrji";
 var linePie = "uv_6tpqrjj";
-var progressiveLinePie = createRuntimeFn({ defaultClassName: "uv_6tpqrjk", variantClassNames: { isFocused: { false: "uv_6tpqrjl", true: "uv_6tpqrjm" } }, defaultVariants: {}, compoundVariants: [] });
+var progressiveLinePie = createRuntimeFn({
+	defaultClassName: "uv_6tpqrjk",
+	variantClassNames: { isFocused: {
+		false: "uv_6tpqrjl",
+		true: "uv_6tpqrjm"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
 var listTooltipPie = "uv_6tpqrjn";
 var itemTooltipPie = "uv_6tpqrjo";
-export {
-  bulletPie,
-  colorBullet,
-  containerPie,
-  contentPie,
-  emptyLegendPie,
-  heightContainerPie,
-  itemTooltipPie,
-  labelPie,
-  linePie,
-  listItemPie,
-  listPie,
-  listTooltipPie,
-  progressiveLinePie,
-  textPie,
-  toggleBoxPie,
-  valuePie
-};
+
+//#endregion
+export { bulletPie, colorBullet, containerPie, contentPie, emptyLegendPie, heightContainerPie, itemTooltipPie, labelPie, linePie, listItemPie, listPie, listTooltipPie, progressiveLinePie, textPie, toggleBoxPie, valuePie };