@povio/ui 2.2.5 → 2.2.7

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -1,4 +1,5 @@
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { BottomSheetHeader } from "./BottomSheetHeader.js";
 import { useStateAndRef } from "../../../hooks/useStateAndRef.js";
 import { DomUtils } from "../../../utils/dom.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -6,7 +7,8 @@ import { clsx } from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 import { useResizeObserver, useViewportSize } from "@react-aria/utils";
-import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
+import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
+//#region src/components/overlays/BottomSheet/BottomSheet.tsx
 var MotionModal = motion.create(Modal);
 var MotionModalOverlay = motion.create(ModalOverlay);
 var inertiaTransition = {
@@ -24,10 +26,12 @@ var staticTransition = {
 		1
 	]
 };
-var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = false, isScrollable = true, height = "full", label, portalContainerRef, children, footer, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName }) => {
+var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
 	const uiConfig = UIConfig.useConfig();
 	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
 	const closeVelocityThreshold = closeVelocityThresholdProp ?? uiConfig.bottomSheet.closeVelocityThreshold;
+	const hideThumb = hideThumbProp ?? uiConfig.bottomSheet.hideThumb;
+	const headerTypography = headerTypographyProp ?? uiConfig.bottomSheet.headerTypography;
 	const viewport = useViewportSize();
 	const { sheetHeight, windowHeight } = useMemo(() => {
 		return {
@@ -36,6 +40,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		};
 	}, [viewport.height, sheetMarginTop]);
 	const y = useMotionValue(sheetHeight);
+	const dragControls = useDragControls();
 	const closeVelocityRef = useRef(true);
 	const overlayRef = useRef(null);
 	const containerRef = useRef(null);
@@ -78,12 +83,12 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		ref: overlayRef,
 		shouldCloseOnInteractOutside,
 		children: [/* @__PURE__ */ jsx(motion.div, {
-			className: "pointer-events-none absolute inset-0 bg-support-overlay",
+			className: clsx("pointer-events-none absolute inset-0 bg-support-overlay", overlayClassName),
 			animate: { opacity: 1 },
 			initial: { opacity: 0 },
 			exit: { opacity: 0 }
 		}), /* @__PURE__ */ jsx(MotionModal, {
-			isDismissable: true,
+			isDismissable,
 			className: clsx("pointer-events-none flex h-full w-full flex-col items-stretch justify-end outline-none will-change-transform"),
 			animate: {
 				y: 0,
@@ -109,6 +114,8 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 				minHeight: "100%"
 			},
 			drag: "y",
+			dragListener: false,
+			dragControls,
 			dragElastic: {
 				top: 0,
 				bottom: .5
@@ -157,10 +164,18 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 								ref: focusTrapRef,
 								tabIndex: -1
 							}),
-							/* @__PURE__ */ jsx("div", {
+							/* @__PURE__ */ jsxs("div", {
 								className: "flex max-h-full min-h-0 flex-col items-stretch",
 								ref: containerRef,
-								children: typeof children === "function" ? children(close) : children
+								children: [/* @__PURE__ */ jsx(BottomSheetHeader, {
+									label,
+									dragControls,
+									onClose: close,
+									isDismissable,
+									hideHeader,
+									hideThumb,
+									headerTypography
+								}), typeof children === "function" ? children(close) : children]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "shrink-0",
@@ -182,7 +197,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 		})]
 	}) });
 };
-const BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }) => {
+var BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }) => {
 	const [isSheetOpen, setIsSheetOpen] = useState(!!isOpen);
 	const hasTrigger = !!trigger;
 	useEffect(() => {
@@ -213,4 +228,5 @@ const BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, childr
 		children
 	});
 };
+//#endregion
 export { BottomSheet };

package/dist/components/overlays/BottomSheet/BottomSheetHeader.d.ts

@@ -0,0 +1,13 @@
+import { DragControls } from 'motion/react';
+import { ReactNode } from 'react';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+export interface BottomSheetHeaderProps {
+    label?: ReactNode;
+    isDismissable?: boolean;
+    dragControls?: DragControls;
+    hideHeader?: boolean;
+    hideThumb?: boolean;
+    headerTypography?: TypographyVariantProps;
+    onClose?: () => void;
+}
+export declare const BottomSheetHeader: ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose, }: BottomSheetHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/BottomSheet/BottomSheetHeader.js

@@ -0,0 +1,38 @@
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import "../../../config/i18n.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+//#region src/components/overlays/BottomSheet/BottomSheetHeader.tsx
+var BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("pb-list-height-title-bottom", !isDismissable && "pt-list-height-title-top"),
+		children: [isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2-5",
+			onPointerDown: (e) => {
+				e.preventDefault();
+				dragControls?.start(e);
+			},
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
+		}), !hideHeader && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between px-list-side-title",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "label-2",
+				variant: "prominent-1",
+				...headerTypography,
+				children: label
+			}), onClose && isDismissable && /* @__PURE__ */ jsx(Button, {
+				onPress: onClose,
+				"aria-label": t(($) => $.ui.closeAlt),
+				className: "-m-2 shrink-0 p-2 text-interactive-text-secondary-idle focus-visible:outline-interactive-text-secondary-focus",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6" })
+			})]
+		})]
+	});
+};
+//#endregion
+export { BottomSheetHeader };

package/dist/components/overlays/Drawer/Drawer.js

@@ -2,7 +2,8 @@ import { modalOverlay } from "../Modal/modal.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
-const Drawer = ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
+//#region src/components/overlays/Drawer/Drawer.tsx
+var Drawer = ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
 	if (trigger) return /* @__PURE__ */ jsxs(DialogTrigger, {
 		isOpen,
 		onOpenChange,
@@ -48,4 +49,5 @@ var DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children
 		})
 	});
 };
+//#endregion
 export { Drawer };

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

@@ -1,13 +1,14 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
-import { ns } from "../../../config/i18n.js";
+import "../../../config/i18n.js";
 import { modalContent, modalMain, modalOverlay } from "./modal.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, Modal, ModalOverlay } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
+//#region src/components/overlays/Modal/Modal.tsx
+var Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
 	const { t } = useTranslation("ui");
 	const modalMainCva = UIStyle.useCva("modal.mainCva", modalMain);
 	const modalContentCva = UIStyle.useCva("modal.contentCva", modalContent);
@@ -50,4 +51,5 @@ const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalCl
 		})
 	});
 };
+//#endregion
 export { Modal$1 as Modal };

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

@@ -1,13 +1,12 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
-import { FormFieldHeader } from "../../inputs/FormField/FormFieldHeader.js";
-import { FormFieldHeaderClose } from "../../inputs/FormField/FormFieldHeaderClose.js";
 import { popover } from "../../shared/popover.cva.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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,
@@ -15,14 +14,11 @@ const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverCla
 		trigger,
 		height: "auto",
 		isDismissable: true,
-		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormFieldHeader, {
-			label: sheetLabel,
-			rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
-			className: "px-4 pt-3"
-		}), /* @__PURE__ */ jsx("div", {
+		label: sheetLabel,
+		children: /* @__PURE__ */ jsx("div", {
 			className: "p-4",
 			children
-		})] })
+		})
 	});
 	return /* @__PURE__ */ jsxs(DialogTrigger, {
 		isOpen,
@@ -41,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 };