@povio/ui 3.4.0-rc.1 → 3.4.0-rc.10

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

@@ -2,11 +2,11 @@ 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 { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useResizeObserver, useViewportSize } from "@react-aria/utils";
 import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
 //#region src/components/overlays/BottomSheet/BottomSheet.tsx
@@ -175,7 +175,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 				className: "relative flex min-h-0 flex-1 flex-col items-stretch outline-none",
 				ref: dialogRef,
 				"aria-label": label,
-				children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				children: ({ close }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx("div", {
 						style: { minHeight: `${sheetMarginTop}px` },
 						className: clsx("shrink-0", height === "auto" && "grow")

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

@@ -1,10 +1,10 @@
-import { CloseIcon } from "../../../assets/icons/Close.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import "../../../config/i18n.js";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/components/overlays/BottomSheet/BottomSheetHeader.tsx
 var BottomSheetHeader = (t0) => {
@@ -47,7 +47,7 @@ var BottomSheetHeader = (t0) => {
 				onPress: onClose,
 				"aria-label": t(_temp),
 				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" })
+				children: /* @__PURE__ */ jsx(X, { className: "size-6" })
 			})]
 		});
 		$[6] = headerTypography;

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

@@ -1,8 +1,8 @@
 import { modalOverlay } from "../Modal/modal.cva.js";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/Drawer/Drawer.tsx
 var Drawer = (t0) => {
 	const $ = c(25);

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

@@ -1,11 +1,11 @@
-import { CloseIcon } from "../../../assets/icons/Close.js";
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
 import { modalContentDefinition, modalMainDefinition, modalOverlayDefinition } from "./modal.cva.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
 import { clsx } from "clsx";
 import { Dialog, Modal, ModalOverlay } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/components/overlays/Modal/Modal.tsx
 var Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
@@ -42,7 +42,7 @@ var Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClas
 				children: [showCloseIcon && /* @__PURE__ */ jsx(InlineIconButton, {
 					color: "secondary",
 					onPress: onClose,
-					icon: CloseIcon,
+					icon: X,
 					className: clsx("absolute top-0 right-0 p-modal-gap-desktop-modal-close-icon-top-right", closeIconClassName),
 					label: t(($) => $.ui.modal.closeBtn),
 					disableTooltip: true

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

@@ -2,9 +2,9 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { popoverDefinition } from "../../shared/popover.cva.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/ResponsivePopover/ResponsivePopover.tsx
 var ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps, popoverProps }) => {
 	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);

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

@@ -1,13 +1,12 @@
-import { PointerHorizontalIcon } from "../../../assets/icons/PointerHorizontal.js";
-import { PointerVerticalIcon } from "../../../assets/icons/PointerVertical.js";
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition } from "./tooltip.cva.js";
 import { Typography } from "../../text/Typography/Typography.js";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Triangle, TriangleRight } from "lucide-react";
 import { clsx } from "clsx";
-import { Fragment as Fragment$1, useRef } from "react";
+import { Fragment, useRef } from "react";
 import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusable } from "react-aria";
 //#region src/components/overlays/Tooltip/Tooltip.tsx
 var CustomTrigger = (t0) => {
@@ -51,7 +50,7 @@ var Tooltip$1 = (t0) => {
 	const tooltipPointerHorizontalCva = UIOverrides.useCva("tooltip.pointerHorizontalCva", tooltipPointerHorizontalDefinition);
 	const tooltipPointerVerticalCva = UIOverrides.useCva("tooltip.pointerVerticalCva", tooltipPointerVerticalDefinition);
 	const tooltipTextCva = UIOverrides.useCva("tooltip.textCva", tooltipTextDefinition);
-	const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment$1;
+	const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment;
 	const T0 = TooltipTrigger;
 	const t1 = delay ?? 0;
 	const t2 = closeDelay ?? 0;
@@ -83,7 +82,11 @@ var Tooltip$1 = (t0) => {
 	} else t5 = $[8];
 	let t6;
 	if ($[9] !== t5) {
-		t6 = /* @__PURE__ */ jsx(PointerHorizontalIcon, { className: t5 });
+		t6 = /* @__PURE__ */ jsx(Triangle, {
+			className: t5,
+			fill: "currentColor",
+			strokeWidth: 0
+		});
 		$[9] = t5;
 		$[10] = t6;
 	} else t6 = $[10];
@@ -96,7 +99,11 @@ var Tooltip$1 = (t0) => {
 	} else t7 = $[13];
 	let t8;
 	if ($[14] !== t7) {
-		t8 = /* @__PURE__ */ jsx(PointerVerticalIcon, { className: t7 });
+		t8 = /* @__PURE__ */ jsx(TriangleRight, {
+			className: t7,
+			fill: "currentColor",
+			strokeWidth: 0
+		});
 		$[14] = t7;
 		$[15] = t8;
 	} else t8 = $[15];

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

@@ -1,7 +1,7 @@
 import { Tooltip } from "./Tooltip.js";
+import { useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
 //#region src/components/overlays/Tooltip/TooltipEllipsis.tsx
 var TooltipEllipsis = (t0) => {
 	const $ = c(8);

package/dist/components/segment/Segment.js

@@ -3,11 +3,11 @@ import { FieldController } from "../inputs/shared/form.binding.js";
 import { FormField } from "../inputs/FormField/FormField.js";
 import { segmentDefinition } from "./segment.cva.js";
 import { SegmentItem } from "./SegmentItem.js";
-import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Fragment as Fragment$1, useRef } from "react";
+import { Fragment, useRef } from "react";
 import { ToggleButtonGroup } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { useToggleGroupState } from "react-stately";
@@ -128,7 +128,7 @@ var SegmentBase = (t0) => {
 	} else t9 = $[32];
 	let t10;
 	if ($[33] !== items || $[34] !== props.isDisabled || $[35] !== segmentItemClassName || $[36] !== state) {
-		t10 = items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
+		t10 = items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SegmentItem, {
 			...item,
 			className: clsx(item.className, segmentItemClassName),
 			isDisabled: item.isDisabled || props.isDisabled,

package/dist/components/segment/SegmentItem.js

@@ -1,9 +1,9 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { Typography } from "../text/Typography/Typography.js";
 import { segmentItemDefinition } from "./segment.cva.js";
+import { ToggleButton } from "react-aria-components";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ToggleButton } from "react-aria-components";
 //#region src/components/segment/SegmentItem.tsx
 var SegmentItem = (t0) => {
 	const $ = c(23);

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

@@ -2,8 +2,8 @@ import { Typography } from "../../text/Typography/Typography.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 { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#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 }) => {

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

@@ -1,13 +1,10 @@
-import { ChevronLeftIcon } from "../../../assets/icons/ChevronLeft.js";
-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 "../../../config/i18n.js";
 import { minWidth } from "./minWidth.cva.js";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { clsx } from "clsx";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/shared/pagination/PaginationList.tsx
 var PaginationList = (t0) => {
@@ -91,7 +88,7 @@ var PaginationList = (t0) => {
 			color,
 			variant,
 			iconOnly: hideText,
-			icon: ChevronsLeftIcon,
+			icon: ChevronsLeft,
 			children: t(_temp)
 		});
 		$[17] = color;
@@ -113,7 +110,7 @@ var PaginationList = (t0) => {
 			color,
 			variant,
 			iconOnly: hideText,
-			icon: ChevronLeftIcon,
+			icon: ChevronLeft,
 			children: t(_temp2)
 		});
 		$[26] = color;
@@ -136,7 +133,7 @@ var PaginationList = (t0) => {
 			color,
 			variant,
 			iconOnly: hideText,
-			icon: ChevronRightIcon,
+			icon: ChevronRight,
 			children: t(_temp3)
 		});
 		$[35] = color;
@@ -158,7 +155,7 @@ var PaginationList = (t0) => {
 			color,
 			variant,
 			iconOnly: hideText,
-			icon: ChevronsRightIcon,
+			icon: ChevronsRight,
 			children: t(_temp4)
 		});
 		$[44] = color;

package/dist/components/table/ColumnConfig.js

@@ -4,9 +4,9 @@ import { Checkbox } from "../inputs/Checkbox/Checkbox.js";
 import { Modal } from "../overlays/Modal/Modal.js";
 import { Table } from "./Table.js";
 import { useTranslationMemo } from "../../hooks/useTranslationMemo.js";
+import { useEffect, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 //#region src/components/table/ColumnConfig.tsx
 var VisibilityCell = (t0) => {

package/dist/components/table/InfiniteTable.js

@@ -1,8 +1,8 @@
 import { Loader } from "../status/Loader/Loader.js";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
 import { Table } from "./Table.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/table/InfiniteTable.tsx
 var InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage, ...rest }) => {
 	const { ref } = useIntersectionObserver({

package/dist/components/table/Table.js

@@ -1,23 +1,21 @@
 "use no memo";
-import { ChevronDownIcon } from "../../assets/icons/ChevronDown.js";
-import { ChevronUpIcon } from "../../assets/icons/ChevronUp.js";
 import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { InlineIconButton } from "../buttons/InlineIconButton/InlineIconButton.js";
 import { useIntersectionObserver } from "../../hooks/useIntersectionObserver.js";
 import { tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableRowDefinition, theadDefinition } from "./table.cva.js";
 import { CellText } from "./CellText.js";
-import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.js";
 import { useTableNav } from "../../hooks/useTableNav.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
 import { clsx } from "clsx";
 import { useCallback, useMemo, useRef, useState } from "react";
-import i18next from "i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 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";
+import i18next from "i18next";
 //#region src/components/table/Table.tsx
 var CustomCellContext = (context) => {
 	return {
@@ -38,7 +36,7 @@ var RowDragHandleCell = ({ rowId }) => {
 		...listeners,
 		className: "cursor-move p-1",
 		label: "Drag handle",
-		icon: DragIndicatorIcon
+		icon: GripVertical
 	});
 };
 var AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
@@ -199,11 +197,11 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 							className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
 							onClick: header_0.column.getToggleSortingHandler(),
 							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
-								asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
+								asc: /* @__PURE__ */ jsx(ChevronUp, {
 									width: 18,
 									height: 18
 								}),
-								desc: /* @__PURE__ */ jsx(ChevronDownIcon, {
+								desc: /* @__PURE__ */ jsx(ChevronDown, {
 									width: 18,
 									height: 18
 								})

package/dist/components/text/Link/Link.js

@@ -1,9 +1,9 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { LinkContext } from "../../../config/link.context.js";
 import { linkDefinition } from "./link.cva.js";
+import { Link } from "react-aria-components";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { Link } from "react-aria-components";
 //#region src/components/text/Link/Link.tsx
 var Link$1 = (t0) => {
 	const $ = c(4);

package/dist/components/text/Pill/Pill.js

@@ -1,12 +1,12 @@
-import { CloseIcon } from "../../../assets/icons/Close.js";
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../Typography/Typography.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { pillButtonDefinition } from "../../buttons/PillButton/pillButton.cva.js";
 import "../../../config/i18n.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/components/text/Pill/Pill.tsx
 var Pill = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, variant = "subtle", ...props }) => {
@@ -36,7 +36,7 @@ var Pill = ({ className, children, dismissable, isDisabled, onDismiss, contentRe
 		}), dismissable && /* @__PURE__ */ jsx(Button, {
 			...buttonProps,
 			className: "pointer-events-auto shrink-0",
-			children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+			children: /* @__PURE__ */ jsx(X, { className: "size-4" })
 		})]
 	});
 };

package/dist/components/text/Tag/Tag.js

@@ -1,12 +1,12 @@
-import { CloseIcon } from "../../../assets/icons/Close.js";
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../Typography/Typography.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import "../../../config/i18n.js";
 import { tagDefinition } from "./tag.cva.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/components/text/Tag/Tag.tsx
 var Tag = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, ...props }) => {
@@ -35,7 +35,7 @@ var Tag = ({ className, children, dismissable, isDisabled, onDismiss, contentRef
 		}), dismissable && /* @__PURE__ */ jsx(Button, {
 			...buttonProps,
 			className: "pointer-events-auto shrink-0",
-			children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+			children: /* @__PURE__ */ jsx(X, { className: "size-4" })
 		})]
 	});
 };

package/dist/config/confirmation.context.js

@@ -1,7 +1,7 @@
 import "./i18n.js";
 import { ActionModal } from "../components/overlays/ActionModal/ActionModal.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/config/confirmation.context.tsx
 var Confirmation;

package/dist/config/link.context.js

@@ -1,6 +1,6 @@
+import { createContext, use } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use } from "react";
 //#region src/config/link.context.tsx
 var LinkContext;
 (function(_LinkContext) {

package/dist/config/router.context.js

@@ -1,6 +1,6 @@
+import { createContext, use } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use } from "react";
 import { RouterProvider } from "react-aria";
 //#region src/config/router.context.tsx
 var UIRouter;

package/dist/config/theme.context.js

@@ -1,6 +1,6 @@
 import { useLocalStorage } from "../hooks/useLocalStorage.js";
-import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { z } from "zod";
 //#region src/config/theme.context.tsx
 var ThemeContext;

package/dist/config/uiConfig.context.d.ts

@@ -26,9 +26,15 @@ export declare namespace UIConfig {
         };
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
-        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
-        checkbox: Pick<CheckboxProps, "variant">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "multiSelectAutoConfirm">;
+        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel"> & {
+            fireBlurOnChange?: boolean;
+        };
+        checkbox: Pick<CheckboxProps, "variant"> & {
+            fireBlurOnChange?: boolean;
+        };
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "multiSelectAutoConfirm"> & {
+            fireBlurOnChange?: boolean;
+        };
         queryAutocomplete: {
             isInitialQueryDisabled?: boolean;
             resolveSelectedItemsWithIds?: boolean;
@@ -39,7 +45,9 @@ export declare namespace UIConfig {
             resolveSelectedItemsWithIds?: boolean;
             searchDebounceDelay?: number;
         };
-        toggle: Pick<ToggleProps, "variant">;
+        toggle: Pick<ToggleProps, "variant"> & {
+            fireBlurOnChange?: boolean;
+        };
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear"> & {
             calendarIcon?: ReactElement;
@@ -49,6 +57,7 @@ export declare namespace UIConfig {
             timeZone?: string;
             todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
             allowPartialRange?: boolean;
+            fireBlurOnChange?: boolean;
         };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;

package/dist/config/uiConfig.context.js

@@ -1,10 +1,8 @@
-import { CalendarIcon } from "../assets/icons/Calendar.js";
-import { ClockIcon } from "../assets/icons/Clock.js";
-import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
-import { jsx } from "react/jsx-runtime";
+import { Calendar, CalendarClock, Clock } from "lucide-react";
 import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/config/uiConfig.context.tsx
 var UIConfig;
 (function(_UIConfig) {
@@ -28,16 +26,21 @@ var UIConfig;
 		} },
 		radioGroup: {
 			variant: "default",
-			hideLabel: false
+			hideLabel: false,
+			fireBlurOnChange: false
+		},
+		checkbox: {
+			variant: "default",
+			fireBlurOnChange: false
 		},
-		checkbox: { variant: "default" },
 		select: {
 			selectionMode: "single",
 			isSearchable: false,
 			selectedTagsType: "list",
 			collapseAfter: 3,
 			hideSearchIcon: false,
-			multiSelectAutoConfirm: false
+			multiSelectAutoConfirm: false,
+			fireBlurOnChange: false
 		},
 		queryAutocomplete: {
 			isInitialQueryDisabled: false,
@@ -49,7 +52,10 @@ var UIConfig;
 			resolveSelectedItemsWithIds: false,
 			searchDebounceDelay: 500
 		},
-		toggle: { variant: "default" },
+		toggle: {
+			variant: "default",
+			fireBlurOnChange: false
+		},
 		slider: {
 			minValue: 0,
 			maxValue: 100
@@ -62,14 +68,15 @@ var UIConfig;
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
 			autoFixYear: false,
-			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
-			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
-			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
+			calendarIcon: /* @__PURE__ */ jsx(Calendar, { className: "size-4" }),
+			dateTimeIcon: /* @__PURE__ */ jsx(CalendarClock, { className: "size-4" }),
+			timeIcon: /* @__PURE__ */ jsx(Clock, { className: "size-4 text-interactive-text-secondary-idle" }),
 			setDateValueOnDateSelection: false,
 			timeZone: "clientLocal",
 			granularity: "day",
 			shouldUpdateDateOnMonthYearChange: false,
-			allowPartialRange: false
+			allowPartialRange: false,
+			fireBlurOnChange: false
 		},
 		actionModal: {
 			titleTypography: {

package/dist/config/uiOverrides.context.js

@@ -1,9 +1,9 @@
 import { StyleMergeUtils } from "../utils/style-merge.util.js";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { createContext, use } from "react";
+import { c } from "react/compiler-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 //#region src/config/uiOverrides.context.tsx
 var UIOverrides;
 (function(_UIOverrides) {

package/dist/hooks/useFilters.js

@@ -1,7 +1,7 @@
 import { UIRouter } from "../config/router.context.js";
 import { RoutingUtils } from "../utils/routing.utils.js";
-import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
+import { c } from "react/compiler-runtime";
 import { z } from "zod";
 //#region src/hooks/useFilters.ts
 function getFieldType(schema, fieldKey) {

package/dist/hooks/useForm.js

@@ -1,5 +1,5 @@
-import { c } from "react/compiler-runtime";
 import { useEffect, useMemo, useRef } from "react";
+import { c } from "react/compiler-runtime";
 import { useForm, useStore } from "@tanstack/react-form";
 //#region src/hooks/useForm.ts
 function useForm$1({ defaultValues, disabled = false, mode = "onSubmit", onSubmitAsync, zodSchema } = {}) {

package/dist/hooks/useIntersectionObserver.js

@@ -1,5 +1,5 @@
-import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/hooks/useIntersectionObserver.ts
 var useIntersectionObserver = (t0) => {
 	const $ = c(13);

package/dist/hooks/useLocalStorage.js

@@ -1,5 +1,5 @@
-import { c } from "react/compiler-runtime";
 import { useState } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/hooks/useLocalStorage.ts
 var getValue = (key, schema) => {
 	if (!localStorage) return null;

package/dist/hooks/usePagination.js

@@ -1,7 +1,7 @@
 import { UIRouter } from "../config/router.context.js";
 import { RoutingUtils } from "../utils/routing.utils.js";
-import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/hooks/usePagination.ts
 var DEFAULT_STATE = {
 	pageIndex: 1,

package/dist/hooks/useScrollableListBox.js

@@ -1,6 +1,6 @@
 import { useBreakpoint } from "./useBreakpoint.js";
-import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/hooks/useScrollableListBox.ts
 function useScrollableListBox() {
 	const $ = c(4);

package/dist/hooks/useSorting.js

@@ -1,7 +1,7 @@
 import { UIRouter } from "../config/router.context.js";
 import { RoutingUtils } from "../utils/routing.utils.js";
-import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/hooks/useSorting.ts
 function useSorting(defaultSorting, t0) {
 	const $ = c(16);

package/dist/hooks/useStateAndRef.js

@@ -1,6 +1,6 @@
 import { ObjectUtils } from "../utils/object.utils.js";
-import { c } from "react/compiler-runtime";
 import { useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/hooks/useStateAndRef.ts
 var useStateAndRef = (initialState) => {
 	const $ = c(3);

package/dist/hooks/useTableColumnConfig.js

@@ -1,5 +1,5 @@
-import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/hooks/useTableColumnConfig.ts
 function sortByKeyOrder(data, orderedKeys = []) {
 	return [...data].sort((a, b) => {