@mailstep/design-system 0.8.51 → 0.9.0

package/ui/Modules/Dashboard/components/Widgets/ColorBox/ColorBox.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/ColorBox/ColorBox.tsx
+/**
+* This is only example of widget
+*/
+const ColorBox = ({ config = {}, innerRef }) => {
+	return /* @__PURE__ */ jsx("div", {
+		style: React.useMemo(() => ({
+			backgroundColor: config?.color || "transparent",
+			border: "1px solid #ccc",
+			width: 50,
+			height: 50,
+			borderRadius: "100%"
+		}), [config]),
+		ref: innerRef,
+		children: config?.name
+	});
+};
+//#endregion
+export { ColorBox as default };

package/ui/Modules/Dashboard/components/Widgets/ColorBox/Config.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import { ConfigProps } from '../../../types';
+export declare const Config: ({ onChange, config }: ConfigProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/ColorBox/Config.js

@@ -0,0 +1,23 @@
+import styles_default from "../../../styles.js";
+import { useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/ColorBox/Config.tsx
+const Config = ({ onChange, config }) => {
+	const onChangeInput = useCallback((e) => onChange({
+		...config,
+		[e.target.name]: e.target.value
+	}), [onChange, config]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(styles_default.ConfigRow, { children: [/* @__PURE__ */ jsx(styles_default.ConfigLabel, { children: "Name: " }), /* @__PURE__ */ jsx(styles_default.ConfigInput, { children: /* @__PURE__ */ jsx("input", {
+		name: "name",
+		type: "text",
+		onChange: onChangeInput,
+		value: config?.name || ""
+	}) })] }), /* @__PURE__ */ jsxs(styles_default.ConfigRow, { children: [/* @__PURE__ */ jsx(styles_default.ConfigLabel, { children: "Color: " }), /* @__PURE__ */ jsx(styles_default.ConfigInput, { children: /* @__PURE__ */ jsx("input", {
+		name: "color",
+		type: "color",
+		onChange: onChangeInput,
+		value: config?.color || ""
+	}) })] })] });
+};
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/ColorBox/index.d.ts

@@ -0,0 +1,4 @@
+import ColorBox from './ColorBox';
+export * from './ColorBox';
+export * from './Config';
+export default ColorBox;

package/ui/Modules/Dashboard/components/Widgets/ColorBox/index.js

@@ -0,0 +1,6 @@
+import ColorBox from "./ColorBox.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/ColorBox/index.tsx
+var ColorBox_default = ColorBox;
+//#endregion
+export { Config, ColorBox_default as default };

package/ui/Modules/Dashboard/components/Widgets/EmptyWidget/EmptyWidget.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+/**
+ * Empty widget
+ * This is only for error case, invalid widget definition etc...
+ */
+declare const EmptyWidget: () => JSX.Element;
+export default EmptyWidget;

package/ui/Modules/Dashboard/components/Widgets/EmptyWidget/EmptyWidget.js

@@ -0,0 +1,10 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/EmptyWidget/EmptyWidget.tsx
+/**
+* Empty widget
+* This is only for error case, invalid widget definition etc...
+*/
+const EmptyWidget = () => /* @__PURE__ */ jsx("span", { children: "Error" });
+//#endregion
+export { EmptyWidget as default };

package/ui/Modules/Dashboard/components/Widgets/EmptyWidget/index.d.ts

@@ -0,0 +1,2 @@
+import EmptyWidget from './EmptyWidget';
+export default EmptyWidget;

package/ui/Modules/Dashboard/components/Widgets/EmptyWidget/index.js

@@ -0,0 +1,5 @@
+import EmptyWidget from "./EmptyWidget.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/EmptyWidget/index.ts
+var EmptyWidget_default = EmptyWidget;
+//#endregion
+export { EmptyWidget_default as default };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/Config.d.ts

@@ -0,0 +1 @@
+export declare const Config: ({ onChange, config, sources }: import("../../..").MultiConfigProps) => import("react").JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/Config.js

@@ -0,0 +1,5 @@
+import { MultiConfig } from "../../Config/MultiConfig.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/Config.tsx
+const Config = MultiConfig;
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/HorizontalBar.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { HorizontalBarProps } from './types';
+declare const HorizontalBar: ({ data, title, description, isLoading, error, innerRef }: HorizontalBarProps) => JSX.Element;
+export default HorizontalBar;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/HorizontalBar.js

@@ -0,0 +1,38 @@
+import styles_default from "../../../styles.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import styles_default$1 from "./styles.js";
+import { ProgressLine } from "./components/ProgressLine.js";
+import { LabelsLine } from "./components/LabelsLine.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/HorizontalBar.tsx
+const fallbackFillColor = "#000";
+const fallbackBgColor = "#ebedf2";
+const HorizontalBar = ({ data = [], title, description, isLoading, error, innerRef }) => /* @__PURE__ */ jsx(LoadingBoundary, {
+	isLoading,
+	error,
+	children: /* @__PURE__ */ jsx(styles_default.ItemContent, { children: /* @__PURE__ */ jsxs("div", {
+		ref: innerRef,
+		children: [
+			title && /* @__PURE__ */ jsx(styles_default$1.Title, { children: title }),
+			description && /* @__PURE__ */ jsx(styles_default$1.Description, { children: description }),
+			(!data || data.length === 0) && /* @__PURE__ */ jsx(NoData_default, {}),
+			data.map((row) => {
+				const { id, label, percent, value, color = fallbackFillColor, backgroundColor = fallbackBgColor } = row;
+				const validPercent = percent >= 0 && percent <= 100 ? percent : 0;
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(LabelsLine, {
+					value,
+					label,
+					color
+				}), /* @__PURE__ */ jsx(ProgressLine, {
+					percent: validPercent,
+					color,
+					backgroundColor
+				})] }, id);
+			})
+		]
+	}) })
+});
+//#endregion
+export { HorizontalBar as default };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/LabelsLine.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { JSX } from 'react';
+export interface LabelsLineProps {
+    label: React.ReactNode;
+    value: number | string;
+    color: string;
+}
+export declare const LabelsLine: ({ label, value, color }: LabelsLineProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/LabelsLine.js

@@ -0,0 +1,14 @@
+import styles_default from "../styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/LabelsLine.tsx
+const BoldSpan = styled.span`
+  font-weight: bold;
+`;
+const LabelsLine = ({ label, value, color }) => /* @__PURE__ */ jsxs(styles_default.LabelsContainer, {
+	color,
+	children: [/* @__PURE__ */ jsx(BoldSpan, { children: label }), /* @__PURE__ */ jsx("span", { children: value })]
+});
+//#endregion
+export { LabelsLine };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/ProgressLine.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export interface ProgressLineProps {
+    percent: number;
+    color: string;
+    backgroundColor: string;
+}
+export declare const ProgressLine: ({ percent, color, backgroundColor }: ProgressLineProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/ProgressLine.js

@@ -0,0 +1,14 @@
+import styles_default from "../styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/ProgressLine.tsx
+const ProgressLine = ({ percent, color, backgroundColor }) => /* @__PURE__ */ jsx(styles_default.ProgressContainer, {
+	bgColor: backgroundColor,
+	children: /* @__PURE__ */ jsx(styles_default.Progress, {
+		color,
+		percent,
+		children: /* @__PURE__ */ jsx(styles_default.Circle, { color })
+	})
+});
+//#endregion
+export { ProgressLine };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/index.d.ts

@@ -0,0 +1,4 @@
+import HorizontalBar from './HorizontalBar';
+export * from './HorizontalBar';
+export * from './Config';
+export default HorizontalBar;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/index.js

@@ -0,0 +1,6 @@
+import HorizontalBar from "./HorizontalBar.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/index.tsx
+var HorizontalBar_default = HorizontalBar;
+//#endregion
+export { Config, HorizontalBar_default as default };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/storybook.sample.d.ts

@@ -0,0 +1,2 @@
+import { HorizontalBarProps } from './types';
+export declare const horizontalBarData: HorizontalBarProps['data'];

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/storybook.sample.js

@@ -0,0 +1,33 @@
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/storybook.sample.ts
+const horizontalBarData = [
+	{
+		id: "1",
+		label: "Resolved",
+		percent: 70,
+		value: 69e3,
+		color: "linear-gradient(90deg, rgba(60,186,146,1) 0%, rgba(13,164,98,1) 100%)"
+	},
+	{
+		id: "2",
+		label: "In progress",
+		percent: 30,
+		value: 2500,
+		color: "linear-gradient(90deg, rgba(119,119,255,1) 0%, rgba(92,26,195,1) 100%)"
+	},
+	{
+		id: "3",
+		label: "Pending",
+		percent: 20,
+		value: 8500,
+		color: "linear-gradient(90deg, rgba(226,160,63,1) 0%, rgba(250,108,69,1) 100%)"
+	},
+	{
+		id: "4",
+		label: "Others",
+		percent: 9,
+		value: 500,
+		color: "green"
+	}
+];
+//#endregion
+export { horizontalBarData };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/styles.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    Title: import("styled-components").StyledComponent<"h2", any, {}, never>;
+    Description: import("styled-components").StyledComponent<"h3", any, {}, never>;
+    LabelsContainer: import("styled-components").StyledComponent<"div", any, {
+        color: string;
+    }, never>;
+    ProgressContainer: import("styled-components").StyledComponent<"div", any, {
+        bgColor: string;
+    }, never>;
+    Progress: import("styled-components").StyledComponent<"div", any, {
+        percent: number;
+        color: string;
+    }, never>;
+    Circle: import("styled-components").StyledComponent<"div", any, {
+        color: string;
+    }, never>;
+};
+export default _default;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/styles.js

@@ -0,0 +1,58 @@
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/styles.ts
+var styles_default = {
+	Title: styled.h2`
+    padding: 0;
+    margin: 0;
+  `,
+	Description: styled.h3`
+    padding: 0;
+    margin: 0;
+    opacity: 0.8;
+    margin-bottom: 25px;
+  `,
+	LabelsContainer: styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    > * {
+      color: ${(props) => props.color};
+      background: ${(props) => props.color};
+      // Compatibility for gradient colors
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  `,
+	ProgressContainer: styled.div`
+    height: 17px;
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 15px;
+    border-radius: 10px;
+    background-color: ${(props) => props.bgColor};
+    opacity: 0.9;
+    :hover {
+      opacity: 1;
+    }
+  `,
+	Progress: styled.div`
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 100%;
+    width: ${(props) => `${props.percent}%`};
+    background: ${(props) => `${props.color}`};
+    border-radius: inherit;
+    padding-right: 5px;
+  `,
+	Circle: styled.div`
+    background: ${(props) => `${props.color}`};
+    border: 3px solid #fff;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+  `
+};
+//#endregion
+export { styles_default as default };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/types.d.ts

@@ -0,0 +1,13 @@
+import { WidgetComponentProps } from '../../../types';
+export type HorizontalBarRow = {
+    id: string;
+    label: React.ReactNode;
+    value: number;
+    percent: number;
+    color?: string;
+    backgroundColor?: string;
+};
+export interface HorizontalBarProps extends WidgetComponentProps<HorizontalBarRow[]> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Modules/Dashboard/components/Widgets/NumberBox/Config.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { MultiConfigProps } from '../../Config/MultiConfig';
+export type NumberBoxConfigProps = MultiConfigProps;
+export declare const Config: ({ sources, ...configProps }: NumberBoxConfigProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/NumberBox/Config.js

@@ -0,0 +1,38 @@
+import { useText } from "../../Text/Text.js";
+import { MultiConfig } from "../../Config/MultiConfig.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/NumberBox/Config.tsx
+const unitOptions = [
+	"%",
+	"ks",
+	"$",
+	"h",
+	"m"
+].map((unit) => ({
+	label: unit,
+	value: unit
+}));
+const defaultSources = [];
+const Config = ({ sources = defaultSources, ...configProps }) => {
+	const labelSelectUnit = useText("widgets.selectUnit");
+	return /* @__PURE__ */ jsx(MultiConfig, {
+		sources: useMemo(() => {
+			const unitFilter = {
+				name: "unit",
+				label: labelSelectUnit,
+				options: unitOptions
+			};
+			return sources.map((source) => {
+				const { filters = [], ...rest } = source;
+				return {
+					filters: [unitFilter].concat(filters),
+					...rest
+				};
+			});
+		}, [labelSelectUnit, sources]),
+		...configProps
+	});
+};
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/NumberBox/NumberBox.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+import { WidgetComponentProps, NumberClickCallback } from '../../../types';
+export type Props = WidgetComponentProps<number, NumberClickCallback>;
+declare const NumberBox: ({ data, isLoading, error, onValueClick, config, innerRef }: Props) => JSX.Element;
+export default NumberBox;

package/ui/Modules/Dashboard/components/Widgets/NumberBox/NumberBox.js

@@ -0,0 +1,38 @@
+import styles_default from "../../../styles.js";
+import Text from "../../Text/Text.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import { StyledNumberBox, StyledNumberBoxNumber } from "./styles.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/NumberBox/NumberBox.tsx
+const NumberBox = ({ data, isLoading, error, onValueClick, config = {}, innerRef }) => {
+	const formatedNumber = String(data).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+	const unit = config?.unit || "";
+	const onClick = React.useCallback(() => onValueClick?.(data, config), [
+		onValueClick,
+		data,
+		config
+	]);
+	return /* @__PURE__ */ jsx(LoadingBoundary, {
+		isLoading,
+		error,
+		children: /* @__PURE__ */ jsxs(styles_default.ItemContent, {
+			ref: innerRef,
+			children: [!data && data != 0 && /* @__PURE__ */ jsx(NoData_default, {}), /* @__PURE__ */ jsx(StyledNumberBox, { children: /* @__PURE__ */ jsxs(StyledNumberBoxNumber, {
+				onClick: onValueClick && onClick,
+				children: [/* @__PURE__ */ jsx("svg", {
+					height: "50%",
+					viewBox: `0 0 ${(String(data).length + unit.length) * 12 || "12"} 17`,
+					children: /* @__PURE__ */ jsxs("foreignObject", { children: [data || data === 0 ? formatedNumber : "?", unit] })
+				}), /* @__PURE__ */ jsx("svg", {
+					height: "30%",
+					viewBox: `0 0 ${String(config?.sourceLabel?.length * 12 || "100")} 17`,
+					children: /* @__PURE__ */ jsx("foreignObject", { children: config?.sourceLabel || /* @__PURE__ */ jsx(Text, { code: "widgets.selectSource" }) })
+				})]
+			}) })]
+		})
+	});
+};
+//#endregion
+export { NumberBox as default };

package/ui/Modules/Dashboard/components/Widgets/NumberBox/index.d.ts

@@ -0,0 +1,4 @@
+import NumberBox from './NumberBox';
+export * from './NumberBox';
+export * from './Config';
+export default NumberBox;

package/ui/Modules/Dashboard/components/Widgets/NumberBox/index.js

@@ -0,0 +1,6 @@
+import NumberBox from "./NumberBox.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/NumberBox/index.ts
+var NumberBox_default = NumberBox;
+//#endregion
+export { Config, NumberBox_default as default };

package/ui/Modules/Dashboard/components/Widgets/NumberBox/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledNumberBox: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledNumberBoxNumber: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    onClick?: () => void;
+}, never>;

package/ui/Modules/Dashboard/components/Widgets/NumberBox/styles.js

@@ -0,0 +1,25 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/NumberBox/styles.ts
+const StyledNumberBox = styled$1.div`
+  width: 100%;
+  height: 100%;
+`;
+const StyledNumberBoxNumber = styled$1.div`
+  height: 100%;
+  text-align: center;
+  color: black;
+  cursor: ${(props) => props.onClick ? "pointer" : "auto"};
+  &:hover{
+    opacity: ${(props) => props.onClick ? "0.5" : "1"};
+  }
+  &>svg {
+      width: 100%;
+      & > foreignObject {
+        width: 100%;
+        height: 100%;
+        
+      }
+  }
+`;
+//#endregion
+export { StyledNumberBox, StyledNumberBoxNumber };

package/ui/Modules/Dashboard/components/Widgets/PieChart/Config.d.ts

@@ -0,0 +1 @@
+export declare const Config: ({ onChange, config, sources }: import("../../..").MultiConfigProps) => import("react").JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/PieChart/Config.js

@@ -0,0 +1,5 @@
+import { MultiConfig } from "../../Config/MultiConfig.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/Config.tsx
+const Config = MultiConfig;
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/PieChart/PieChart.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { JSX } from 'react';
+import { DefaultRawDatum } from '@nivo/pie';
+import { WidgetComponentProps } from '../../../types';
+import { Colors } from '../utils/helpers';
+import { CenteredMetricProps } from './components/CenteredMetric';
+interface PieDataRow extends DefaultRawDatum {
+    label: string;
+}
+export type Props = WidgetComponentProps<PieDataRow[]> & {
+    centeredMetric?: (props: CenteredMetricProps) => JSX.Element;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    text?: string;
+    hasLegend?: boolean;
+    legendRowMaxLength?: number;
+    colors?: Colors;
+};
+declare const _default: React.MemoExoticComponent<({ data, isLoading, error, title, subtitle, description, text, hasLegend, legendRowMaxLength, centeredMetric, colors, innerRef, }: Props) => JSX.Element>;
+export default _default;

package/ui/Modules/Dashboard/components/Widgets/PieChart/PieChart.js

@@ -0,0 +1,59 @@
+import styles_default from "../../../styles.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import { createLegendData } from "../utils/legends.js";
+import { createWidgetColors } from "../utils/generic.js";
+import { getColorStringArray } from "../utils/helpers.js";
+import { Description, OtherText, Subtitle, Title, Wrapper, WrapperText, layers, margin } from "./styles.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
+import { ResponsivePie } from "@nivo/pie";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/PieChart.tsx
+const defaultLegendRowMaxLength = 4;
+const Pie = ({ data = [], isLoading, error, title, subtitle, description, text, hasLegend = true, legendRowMaxLength = defaultLegendRowMaxLength, centeredMetric, colors, innerRef }) => {
+	const theme = useTheme();
+	const colorStringArray = React.useMemo(() => colors ? getColorStringArray(colors) : createWidgetColors("pieChartColor", 5), [theme, colors]);
+	const hasText = title || subtitle || description || text;
+	const legends = React.useMemo(() => {
+		if (!hasLegend) return void 0;
+		return createLegendData(data, colorStringArray, legendRowMaxLength);
+	}, [
+		hasLegend,
+		data,
+		colorStringArray
+	]);
+	return /* @__PURE__ */ jsx(LoadingBoundary, {
+		isLoading,
+		error,
+		children: /* @__PURE__ */ jsx(styles_default.ItemContent, {
+			ref: innerRef,
+			children: /* @__PURE__ */ jsxs(Wrapper, { children: [
+				hasText && /* @__PURE__ */ jsxs(WrapperText, { children: [
+					/* @__PURE__ */ jsx(Title, { children: title }),
+					/* @__PURE__ */ jsx(Subtitle, { children: subtitle }),
+					/* @__PURE__ */ jsx(Description, { children: description }),
+					/* @__PURE__ */ jsx(OtherText, { children: text })
+				] }),
+				(!data || data.length === 0) && /* @__PURE__ */ jsx(NoData_default, {}),
+				data && data.length > 0 && /* @__PURE__ */ jsx(ResponsivePie, {
+					data,
+					innerRadius: .55,
+					arcLinkLabelsThickness: 2,
+					activeOuterRadiusOffset: 6,
+					padAngle: 1,
+					sortByValue: true,
+					isInteractive: true,
+					animate: true,
+					margin,
+					colors: colorStringArray,
+					legends,
+					layers: layers(centeredMetric)
+				})
+			] })
+		})
+	});
+};
+var PieChart_default = React.memo(Pie);
+//#endregion
+export { PieChart_default as default };

package/ui/Modules/Dashboard/components/Widgets/PieChart/components/CenteredMetric.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+export interface CenteredMetricProps {
+    dataWithArc: {
+        value: number;
+    }[];
+    centerX: number;
+    centerY: number;
+}
+declare const CenteredMetric: ({ dataWithArc, centerX, centerY }: CenteredMetricProps) => JSX.Element;
+export default CenteredMetric;

package/ui/Modules/Dashboard/components/Widgets/PieChart/components/CenteredMetric.js

@@ -0,0 +1,24 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/components/CenteredMetric.tsx
+const style = {
+	fontSize: "40px",
+	fontWeight: 600,
+	color: "#333"
+};
+const CenteredMetric = ({ dataWithArc, centerX, centerY }) => {
+	let total = 0;
+	dataWithArc.forEach((datum) => {
+		total += datum.value;
+	});
+	return /* @__PURE__ */ jsx("text", {
+		x: centerX,
+		y: centerY,
+		textAnchor: "middle",
+		dominantBaseline: "central",
+		style,
+		children: total
+	});
+};
+//#endregion
+export { CenteredMetric as default };

package/ui/Modules/Dashboard/components/Widgets/PieChart/index.d.ts

@@ -0,0 +1,4 @@
+import PieChart from './PieChart';
+export * from './PieChart';
+export * from './Config';
+export default PieChart;

package/ui/Modules/Dashboard/components/Widgets/PieChart/index.js

@@ -0,0 +1,6 @@
+import PieChart_default$1 from "./PieChart.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/index.tsx
+var PieChart_default = PieChart_default$1;
+//#endregion
+export { Config, PieChart_default as default };