@povio/ui 2.2.6 → 2.2.8-rc

package/dist/components/overlays/Modal/modal.cva.js

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
-const modalContent = cva([
+//#region src/components/overlays/Modal/modal.cva.ts
+var modalContent = cva([
 	"relative flex flex-col items-center gap-modal-gap-content px-modal-side-mobile py-modal-height-mobile md:px-modal-side-desktop md:py-modal-height-desktop",
 	"w-fit max-w-full [&>*]:max-w-full",
 	"border-elevation-outline-default-1 bg-elevation-fill-default-1 outline-none",
@@ -12,7 +13,7 @@ const modalContent = cva([
 	} },
 	defaultVariants: { aside: "center" }
 });
-const modalOverlay = cva(["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"], {
+var modalOverlay = cva(["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"], {
 	variants: { aside: {
 		left: "p-0",
 		right: "p-0",
@@ -20,7 +21,7 @@ const modalOverlay = cva(["fixed inset-0 z-10 flex h-(--visual-viewport-height)
 	} },
 	defaultVariants: { aside: "center" }
 });
-const modalMain = cva(["pointer-events-none my-auto flex w-full"], {
+var modalMain = cva(["pointer-events-none my-auto flex w-full"], {
 	variants: { aside: {
 		left: "entering:animate-drawer-enter-left exiting:animate-drawer-exit-left justify-start",
 		right: "entering:animate-drawer-enter-right exiting:animate-drawer-exit-right justify-end",
@@ -28,4 +29,5 @@ const modalMain = cva(["pointer-events-none my-auto flex w-full"], {
 	} },
 	defaultVariants: { aside: "center" }
 });
+//#endregion
 export { modalContent, modalMain, modalOverlay };

package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js

@@ -5,7 +5,8 @@ import { popover } from "../../shared/popover.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
-const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
+//#region src/components/overlays/ResponsivePopover/ResponsivePopover.tsx
+var ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
 	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	if (!useBreakpoint("md")) return /* @__PURE__ */ jsx(BottomSheet, {
 		isOpen,
@@ -36,4 +37,5 @@ const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverCla
 		})]
 	});
 };
+//#endregion
 export { ResponsivePopover };

package/dist/components/overlays/Tooltip/Tooltip.js

@@ -8,6 +8,7 @@ import { clsx } from "clsx";
 import { Fragment as Fragment$1, useRef } from "react";
 import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
 import { useFocusable } from "react-aria";
+//#region src/components/overlays/Tooltip/Tooltip.tsx
 var CustomTrigger = ({ children, className, tabIndex }) => {
 	const ref = useRef(null);
 	const { focusableProps } = useFocusable({}, ref);
@@ -19,7 +20,7 @@ var CustomTrigger = ({ children, className, tabIndex }) => {
 		children
 	});
 };
-const Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex, ...tooltipProps }) => {
+var Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex, ...tooltipProps }) => {
 	const tooltipCva$1 = UIStyle.useCva("tooltip.cva", tooltipCva);
 	const tooltipPointerHorizontalCva$1 = UIStyle.useCva("tooltip.pointerHorizontalCva", tooltipPointerHorizontalCva);
 	const tooltipPointerVerticalCva$1 = UIStyle.useCva("tooltip.pointerVerticalCva", tooltipPointerVerticalCva);
@@ -34,8 +35,11 @@ const Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNon
 			tabIndex: triggerTabIndex,
 			children
 		}) : /* @__PURE__ */ jsx(Trigger, { children }), /* @__PURE__ */ jsxs(Tooltip, {
-			className: tooltipCva$1({ color }),
 			...tooltipProps,
+			className: tooltipCva$1({
+				color,
+				className: tooltipProps.className
+			}),
 			offset: 13,
 			children: [/* @__PURE__ */ jsxs(OverlayArrow, { children: [/* @__PURE__ */ jsx(PointerHorizontalIcon, { className: tooltipPointerHorizontalCva$1({ color }) }), /* @__PURE__ */ jsx(PointerVerticalIcon, { className: tooltipPointerVerticalCva$1({ color }) })] }), /* @__PURE__ */ jsx(Typography, {
 				size: "body-4",
@@ -46,4 +50,5 @@ const Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNon
 		})]
 	});
 };
+//#endregion
 export { Tooltip$1 as Tooltip };

package/dist/components/overlays/Tooltip/TooltipEllipsis.js

@@ -1,7 +1,8 @@
 import { Tooltip } from "./Tooltip.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
-const TooltipEllipsis = ({ text, children, isDisabled, isNonInteractiveTrigger }) => {
+//#region src/components/overlays/Tooltip/TooltipEllipsis.tsx
+var TooltipEllipsis = ({ text, children, isDisabled, isNonInteractiveTrigger }) => {
 	const [isEllipsisActive, setIsEllipsisActive] = useState(false);
 	const onContentRef = (ref) => {
 		if (ref) setIsEllipsisActive(ref.offsetWidth < ref.scrollWidth);
@@ -16,4 +17,5 @@ const TooltipEllipsis = ({ text, children, isDisabled, isNonInteractiveTrigger }
 	});
 	return content;
 };
+//#endregion
 export { TooltipEllipsis };

package/dist/components/overlays/Tooltip/tooltip.cva.js

@@ -1,30 +1,32 @@
 import { cva } from "class-variance-authority";
-const tooltipCva = cva(["group max-w-64 rounded-tooltip-rounding-default px-tooltip-side-default py-tooltip-height-default shadow-2"], {
+//#region src/components/overlays/Tooltip/tooltip.cva.ts
+var tooltipCva = cva(["group max-w-64 rounded-tooltip-rounding-default px-tooltip-side-default py-tooltip-height-default shadow-2"], {
 	variants: { color: {
 		default: ["bg-interactive-contained-secondary-idle"],
 		error: ["w-max bg-elevation-fill-error-1"]
 	} },
 	defaultVariants: { color: "default" }
 });
-const tooltipPointerHorizontalCva = cva(["h-2-5 w-5 group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180"], {
+var tooltipPointerHorizontalCva = cva(["h-2-5 w-5 group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180"], {
 	variants: { color: {
 		default: ["text-interactive-contained-secondary-idle"],
 		error: ["text-elevation-fill-error-1"]
 	} },
 	defaultVariants: { color: "default" }
 });
-const tooltipPointerVerticalCva = cva(["h-5 w-2-5 group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180"], {
+var tooltipPointerVerticalCva = cva(["h-5 w-2-5 group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180"], {
 	variants: { color: {
 		default: ["text-interactive-contained-secondary-idle"],
 		error: ["text-elevation-fill-error-1"]
 	} },
 	defaultVariants: { color: "default" }
 });
-const tooltipTextCva = cva([], {
+var tooltipTextCva = cva([], {
 	variants: { color: {
 		default: ["text-interactive-contained-secondary-on-idle"],
 		error: ["text-text-error-inverted-1"]
 	} },
 	defaultVariants: { color: "default" }
 });
+//#endregion
 export { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva };

package/dist/components/segment/Segment.js

@@ -10,6 +10,7 @@ import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
+//#region src/components/segment/Segment.tsx
 var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...rest }) => {
 	const props = {
 		...rest,
@@ -60,7 +61,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...
 		})
 	});
 };
-const Segment = (props) => {
+var Segment = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -78,4 +79,5 @@ const Segment = (props) => {
 	}
 	return /* @__PURE__ */ jsx(SegmentBase, { ...props });
 };
+//#endregion
 export { Segment };

package/dist/components/segment/SegmentItem.js

@@ -3,7 +3,8 @@ import { Typography } from "../text/Typography/Typography.js";
 import { segmentItemCva } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
-const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
+//#region src/components/segment/SegmentItem.tsx
+var SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
@@ -20,4 +21,5 @@ const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
 		})]
 	});
 };
+//#endregion
 export { SegmentItem };

package/dist/components/segment/segment.cva.js

@@ -1,10 +1,11 @@
 import { cva } from "class-variance-authority";
-const segmentCva = cva([
+//#region src/components/segment/segment.cva.ts
+var segmentCva = cva([
 	"group/segment grid w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
 	"bg-elevation-fill-default-3",
 	"rounded-segmented-control-rounding-segmented-control"
 ]);
-const segmentItemCva = cva([
+var segmentItemCva = cva([
 	"flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
 	"border border-support-transparent-outline",
 	"py-segmented-control-height-segment",
@@ -22,4 +23,5 @@ const segmentItemCva = cva([
 	} },
 	defaultVariants: { iconOnly: false }
 });
+//#endregion
 export { segmentCva, segmentItemCva };

package/dist/components/shared/pagination/Pagination.js

@@ -1,11 +1,12 @@
 import { Typography } from "../../text/Typography/Typography.js";
-import { ns } from "../../../config/i18n.js";
+import "../../../config/i18n.js";
 import { NumberInput } from "../../inputs/Input/NumberInput/NumberInput.js";
 import { PaginationList } from "./PaginationList.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
-const Pagination = ({ size = "s", variant = "subtle", color = "secondary", page, totalItems, totalPages, pageSize, hideText = true, hideFirstLast = true, hidePrevNext = false, hideNumbers = false, className, onPageChange, onPageSizeChange }) => {
+//#region src/components/shared/pagination/Pagination.tsx
+var Pagination = ({ size = "s", variant = "subtle", color = "secondary", page, totalItems, totalPages, pageSize, hideText = true, hideFirstLast = true, hidePrevNext = false, hideNumbers = false, className, onPageChange, onPageSizeChange }) => {
 	const { t } = useTranslation("ui");
 	return /* @__PURE__ */ jsxs("nav", {
 		id: "pagination",
@@ -40,4 +41,5 @@ const Pagination = ({ size = "s", variant = "subtle", color = "secondary", page,
 		})]
 	});
 };
+//#endregion
 export { Pagination };

package/dist/components/shared/pagination/PaginationList.js

@@ -3,13 +3,14 @@ import { ChevronRightIcon } from "../../../assets/icons/ChevronRight.js";
 import { ChevronsLeftIcon } from "../../../assets/icons/ChevronsLeft.js";
 import { ChevronsRightIcon } from "../../../assets/icons/ChevronsRight.js";
 import { Button } from "../../buttons/Button/Button.js";
-import { ns } from "../../../config/i18n.js";
+import "../../../config/i18n.js";
 import { minWidth } from "./minWidth.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-const PaginationList = ({ page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange }) => {
+//#region src/components/shared/pagination/PaginationList.tsx
+var PaginationList = ({ page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange }) => {
 	const { t } = useTranslation("ui");
 	const isPrevDisabled = page <= 1;
 	const isNextDisabled = page >= totalPages;
@@ -102,4 +103,5 @@ const PaginationList = ({ page, totalPages, size, color, variant, hideText, hide
 		]
 	});
 };
+//#endregion
 export { PaginationList };

package/dist/components/shared/pagination/minWidth.cva.js

@@ -1,9 +1,11 @@
 import { cva } from "class-variance-authority";
-const minWidth = cva("", { variants: { size: {
+//#region src/components/shared/pagination/minWidth.cva.ts
+var minWidth = cva("", { variants: { size: {
 	xxs: ["min-w-button-width-min-width-xxs"],
 	xs: ["min-w-button-width-min-width-xs"],
 	s: ["min-w-button-width-min-width-s"],
 	m: ["min-w-button-width-min-width-m"],
 	l: ["min-w-button-width-min-width-l"]
 } } });
+//#endregion
 export { minWidth };

package/dist/components/shared/popover.cva.js

@@ -1,3 +1,5 @@
 import { cva } from "class-variance-authority";
-const popover = cva("rounded-list-rounding-dropdown border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5 outline-none");
+//#region src/components/shared/popover.cva.ts
+var popover = cva("rounded-list-rounding-dropdown border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5 outline-none");
+//#endregion
 export { popover };

package/dist/components/status/Alert/Alert.js

@@ -4,7 +4,8 @@ import { Loader } from "../Loader/Loader.js";
 import { alert } from "./alert.cva.js";
 import { statusIcon, statusSeparator } from "../shared/status.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const Alert = ({ variant, color, text, isLoading = false, rightContent, hasSeparator, icon: Icon, className }) => {
+//#region src/components/status/Alert/Alert.tsx
+var Alert = ({ variant, color, text, isLoading = false, rightContent, hasSeparator, icon: Icon, className }) => {
 	const alertCva = UIStyle.useCva("alert.cva", alert);
 	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
 	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
@@ -42,4 +43,5 @@ const Alert = ({ variant, color, text, isLoading = false, rightContent, hasSepar
 		})
 	});
 };
+//#endregion
 export { Alert };

package/dist/components/status/Alert/alert.cva.js

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
-const alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0", {
+//#region src/components/status/Alert/alert.cva.ts
+var alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0", {
 	variants: {
 		variant: {
 			outlined: "border bg-elevation-fill-default-1 text-text-default-1",
@@ -59,4 +60,5 @@ const alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0",
 		color: "neutral"
 	}
 });
+//#endregion
 export { alert };

package/dist/components/status/Loader/Loader.js

@@ -1,6 +1,7 @@
 import { loader, loaderWrapper } from "./loader.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const Loader = ({ size, className, ...props }) => {
+//#region src/components/status/Loader/Loader.tsx
+var Loader = ({ size, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: loaderWrapper({
 			size,
@@ -29,4 +30,5 @@ const Loader = ({ size, className, ...props }) => {
 		})
 	});
 };
+//#endregion
 export { Loader };

package/dist/components/status/Loader/loader.cva.js

@@ -1,16 +1,18 @@
 import { cva } from "class-variance-authority";
-const loaderWrapper = cva("flex items-center justify-center", {
+//#region src/components/status/Loader/loader.cva.ts
+var loaderWrapper = cva("flex items-center justify-center", {
 	variants: { size: {
 		default: "size-6",
 		l: "size-16"
 	} },
 	defaultVariants: { size: "default" }
 });
-const loader = cva("animate-loader-spin", {
+var loader = cva("animate-loader-spin", {
 	variants: { size: {
 		default: "size-3-5",
 		l: "size-8"
 	} },
 	defaultVariants: { size: "default" }
 });
+//#endregion
 export { loader, loaderWrapper };

package/dist/components/status/Toast/Toast.js

@@ -1,18 +1,26 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Loader } from "../Loader/Loader.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { Button } from "../../buttons/Button/Button.js";
 import { statusIcon, statusSeparator } from "../shared/status.cva.js";
 import { buttonColorVariant, toast as toast$1, toastContainer, toastWrapper } from "./toast.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToastContainer } from "react-toastify";
-const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
+//#region src/components/status/Toast/Toast.tsx
+var Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.toast.variant, ...restProps } = props;
 	const toastCva = UIStyle.useCva("toast.cva", toast$1);
 	const buttonColor = UIStyle.useMapper("toast.buttonColor", buttonColorVariant);
 	const iconCva = UIStyle.useCva("status.iconCva", statusIcon);
 	const separatorCva = UIStyle.useCva("status.separatorCva", statusSeparator);
+	const variantProps = {
+		variant,
+		...restProps
+	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: toastCva({ ...props }),
+		className: toastCva(variantProps),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-start gap-toast-gap-icon-to-text px-toast-side-default py-toast-height-content",
 			children: [
@@ -20,17 +28,17 @@ const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props })
 					size: "default",
 					className: "shrink-0"
 				}),
-				!isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({ ...props }) }),
+				!isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva(variantProps) }),
 				/* @__PURE__ */ jsx(Typography, {
 					size: "label-2",
 					children: text
 				})
 			]
-		}), actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: separatorCva({ ...props }) }), /* @__PURE__ */ jsx("div", {
+		}), actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: separatorCva(variantProps) }), /* @__PURE__ */ jsx("div", {
 			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-toast-side-default py-toast-height-actions-mobile md:w-auto md:justify-center md:py-toast-height-actions-desktop",
 			children: actions.map(({ text: buttonText, onPress }) => /* @__PURE__ */ jsx(Button, {
 				onPress,
-				...buttonColor({ ...props }),
+				...buttonColor(variantProps),
 				variant: "text",
 				size: "none",
 				width: "hug",
@@ -39,7 +47,7 @@ const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props })
 		})] })]
 	});
 };
-const ToastContainer$1 = () => {
+var ToastContainer$1 = () => {
 	return /* @__PURE__ */ jsx(ToastContainer, {
 		className: (params) => {
 			return toastContainer({
@@ -54,4 +62,5 @@ const ToastContainer$1 = () => {
 		hideProgressBar: true
 	});
 };
+//#endregion
 export { Toast, ToastContainer$1 as ToastContainer };

package/dist/components/status/Toast/toast.cva.js

@@ -1,7 +1,8 @@
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
-const toastContainer = cva("m-toast-gap-margin-mobile w-auto p-0 md:m-toast-gap-margin-desktop", { variants: { position: {
+//#region src/components/status/Toast/toast.cva.ts
+var toastContainer = cva("m-toast-gap-margin-mobile w-auto gap-toast-gap-margin-mobile p-0 md:m-toast-gap-margin-desktop md:gap-toast-gap-margin-desktop", { variants: { position: {
 	"bottom-right": "right-0 bottom-0",
 	"bottom-left": "bottom-0 left-0",
 	"top-right": "top-0 right-0",
@@ -9,8 +10,8 @@ const toastContainer = cva("m-toast-gap-margin-mobile w-auto p-0 md:m-toast-gap-
 	"bottom-center": "bottom-0",
 	"top-center": "top-0"
 } } });
-const toastWrapper = clsx("m-0! min-h-0 w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
-const toast = cva("inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row", {
+var toastWrapper = clsx("m-0! min-h-0! w-auto! max-w-toast bg-transparent! p-0! shadow-none!");
+var toast = cva("m-0 inline-flex w-auto flex-col items-center overflow-hidden rounded-toast-rounding-default shadow-4 md:flex-row", {
 	variants: {
 		variant: {
 			outlined: "border bg-elevation-fill-default-1 text-text-default-1",
@@ -32,22 +33,6 @@ const toast = cva("inline-flex w-auto flex-col items-center overflow-hidden roun
 		}
 	},
 	compoundVariants: [
-		{
-			position: [
-				"bottom-right",
-				"bottom-left",
-				"bottom-center"
-			],
-			className: "mt-toast-gap-margin-mobile md:mt-toast-gap-margin-desktop"
-		},
-		{
-			position: [
-				"top-right",
-				"top-left",
-				"top-center"
-			],
-			className: "mb-toast-gap-margin-mobile md:mb-toast-gap-margin-desktop"
-		},
 		{
 			variant: "outlined",
 			color: "neutral",
@@ -94,7 +79,7 @@ const toast = cva("inline-flex w-auto flex-col items-center overflow-hidden roun
 		color: "neutral"
 	}
 });
-const buttonColorVariant = compoundMapper({
+var buttonColorVariant = compoundMapper({
 	compoundVariants: [
 		{
 			variant: "outlined",
@@ -155,4 +140,5 @@ const buttonColorVariant = compoundMapper({
 	},
 	default: { color: "secondary" }
 });
+//#endregion
 export { buttonColorVariant, toast, toastContainer, toastWrapper };

package/dist/components/status/Toast/useToast.js

@@ -2,7 +2,8 @@ import { Toast } from "./Toast.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { toast } from "react-toastify";
-const useToast = () => {
+//#region src/components/status/Toast/useToast.tsx
+var useToast = () => {
 	const successToast = useCallback((params, options) => {
 		return toast.success(/* @__PURE__ */ jsx(Toast, {
 			color: "success",
@@ -60,4 +61,5 @@ const useToast = () => {
 		closeToast
 	]);
 };
+//#endregion
 export { useToast };

package/dist/components/status/shared/status.cva.js

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
-const statusIcon = cva("size-6 shrink-0", {
+//#region src/components/status/shared/status.cva.ts
+var statusIcon = cva("size-6 shrink-0", {
 	variants: {
 		variant: {
 			outlined: "",
@@ -39,7 +40,7 @@ const statusIcon = cva("size-6 shrink-0", {
 		color: "neutral"
 	}
 });
-const statusSeparator = cva("h-px shrink-0 self-stretch md:h-auto md:w-px", {
+var statusSeparator = cva("h-px shrink-0 self-stretch md:h-auto md:w-px", {
 	variants: {
 		variant: {
 			outlined: "",
@@ -54,4 +55,5 @@ const statusSeparator = cva("h-px shrink-0 self-stretch md:h-auto md:w-px", {
 	},
 	defaultVariants: { color: "neutral" }
 });
+//#endregion
 export { statusIcon, statusSeparator };

package/dist/components/table/CellText.js

@@ -3,7 +3,8 @@ import { Typography } from "../text/Typography/Typography.js";
 import { UIConfig } from "../../config/uiConfig.context.js";
 import { tableCellText } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";
-const CellText = (props) => {
+//#region src/components/table/CellText.tsx
+var CellText = (props) => {
 	const uiConfig = UIConfig.useConfig();
 	const { variant = uiConfig.tableCellText.variant, size = uiConfig.tableCellText.size, children, style, className } = props;
 	return /* @__PURE__ */ jsx(Typography, {
@@ -16,4 +17,5 @@ const CellText = (props) => {
 		children
 	});
 };
+//#endregion
 export { CellText };

package/dist/components/table/ColumnConfig.js

@@ -1,5 +1,5 @@
 import { Typography } from "../text/Typography/Typography.js";
-import { ns } from "../../config/i18n.js";
+import "../../config/i18n.js";
 import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
 import { Modal } from "../overlays/Modal/Modal.js";
 import { Table } from "./Table.js";
@@ -7,6 +7,7 @@ import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+//#region src/components/table/ColumnConfig.tsx
 var VisibilityCell = ({ original, onToggle }) => /* @__PURE__ */ jsx(Checkbox, {
 	isSelected: original.visible,
 	onChange: () => onToggle(original.id),
@@ -78,4 +79,5 @@ function ColumnConfigModal({ isOpen, onClose, configColumns, visibleColumns, onV
 		})
 	});
 }
+//#endregion
 export { ColumnConfigModal };

package/dist/components/table/HeaderText.js

@@ -3,7 +3,8 @@ import { Typography } from "../text/Typography/Typography.js";
 import { UIConfig } from "../../config/uiConfig.context.js";
 import { tableHeaderText } from "./table.cva.js";
 import { jsx } from "react/jsx-runtime";
-const HeaderText = (props) => {
+//#region src/components/table/HeaderText.tsx
+var HeaderText = (props) => {
 	const uiConfig = UIConfig.useConfig();
 	const { variant = uiConfig.tableHeaderText.variant, size = uiConfig.tableHeaderText.size, children, style, className } = props;
 	return /* @__PURE__ */ jsx(Typography, {
@@ -15,4 +16,5 @@ const HeaderText = (props) => {
 		children
 	});
 };
+//#endregion
 export { HeaderText };

package/dist/components/table/InfiniteTable.js

@@ -3,7 +3,8 @@ import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js"
 import { Table } from "./Table.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-const InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage, ...rest }) => {
+//#region src/components/table/InfiniteTable.tsx
+var InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage, ...rest }) => {
 	const { ref } = useIntersectionObserver({
 		onIntersection: useCallback(() => {
 			if (!isFetchingNextPage && hasNextPage) fetchNextPage();
@@ -23,4 +24,5 @@ const InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage,
 		})]
 	});
 };
+//#endregion
 export { InfiniteTable };

package/dist/components/table/PaginatedTable.js

@@ -1,7 +1,8 @@
 import { Pagination } from "../shared/pagination/Pagination.js";
 import { Table } from "./Table.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const PaginatedTable = ({ pagination, setPagination, items, totalItems, ...rest }) => {
+//#region src/components/table/PaginatedTable.tsx
+var PaginatedTable = ({ pagination, setPagination, items, totalItems, ...rest }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-4",
 		children: [/* @__PURE__ */ jsx(Table, {
@@ -23,4 +24,5 @@ const PaginatedTable = ({ pagination, setPagination, items, totalItems, ...rest
 		})]
 	});
 };
+//#endregion
 export { PaginatedTable };

package/dist/components/table/Table.js

@@ -17,6 +17,7 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/components/table/Table.tsx
 var CustomCellContext = (context) => {
 	return {
 		...context,
@@ -29,7 +30,7 @@ var CellRender = (Comp, props) => {
 	const rendered = typeof Comp === "function" ? Comp(props) : Comp;
 	return typeof rendered === "string" ? /* @__PURE__ */ jsx(CellText, { children: rendered }) : rendered;
 };
-const RowDragHandleCell = ({ rowId }) => {
+var RowDragHandleCell = ({ rowId }) => {
 	const { attributes, listeners } = useSortable({ id: rowId });
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		...attributes,
@@ -72,7 +73,7 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 		})
 	});
 };
-const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
+var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
 	const tableRowCva = UIStyle.useCva("table.rowCva", tableRow);
 	const tableHeadRowCva = UIStyle.useCva("table.headRowCva", tableHeadRow);
 	const tableHeadDataCva = UIStyle.useCva("table.headDataCva", tableHeadData);
@@ -260,4 +261,5 @@ const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, clas
 	});
 	return tableElement;
 };
+//#endregion
 export { Table };