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

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$1, { children: [
+				children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { 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 { 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 { clsx } from "clsx";
+import { Button } from "react-aria-components";
 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(X, { className: "size-6" })
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6" })
 			})]
 		});
 		$[6] = headerTypography;

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

@@ -1,8 +1,8 @@
 import { modalOverlay } from "../Modal/modal.cva.js";
-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";
+import { clsx } from "clsx";
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 //#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 { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 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: X,
+					icon: CloseIcon,
 					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,12 +1,13 @@
+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 { Triangle, TriangleRight } from "lucide-react";
-import { clsx } from "clsx";
-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 { 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 = (t0) => {
@@ -50,7 +51,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;
+	const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment$1;
 	const T0 = TooltipTrigger;
 	const t1 = delay ?? 0;
 	const t2 = closeDelay ?? 0;
@@ -82,11 +83,7 @@ var Tooltip$1 = (t0) => {
 	} else t5 = $[8];
 	let t6;
 	if ($[9] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Triangle, {
-			className: t5,
-			fill: "currentColor",
-			strokeWidth: 0
-		});
+		t6 = /* @__PURE__ */ jsx(PointerHorizontalIcon, { className: t5 });
 		$[9] = t5;
 		$[10] = t6;
 	} else t6 = $[10];
@@ -99,11 +96,7 @@ var Tooltip$1 = (t0) => {
 	} else t7 = $[13];
 	let t8;
 	if ($[14] !== t7) {
-		t8 = /* @__PURE__ */ jsx(TriangleRight, {
-			className: t7,
-			fill: "currentColor",
-			strokeWidth: 0
-		});
+		t8 = /* @__PURE__ */ jsx(PointerVerticalIcon, { className: t7 });
 		$[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.d.ts

@@ -1,4 +1,4 @@
 import { Key } from 'react-aria-components';
-import { FieldValues } from '../inputs/shared/form.binding';
+import { FieldValues } from 'react-hook-form';
 import { ControlledSegmentProps } from './segment.types';
 export declare const Segment: <TFieldValues extends FieldValues, TKey extends Key = Key>(props: ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/Segment.js

@@ -1,15 +1,15 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
-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 { clsx } from "clsx";
-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 { clsx } from "clsx";
+import { Fragment as Fragment$1, useRef } from "react";
+import { ToggleButtonGroup } from "react-aria-components";
 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 = (t0) => {
@@ -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, { children: [/* @__PURE__ */ jsx(SegmentItem, {
+		t10 = items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
 			...item,
 			className: clsx(item.className, segmentItemClassName),
 			isDisabled: item.isDisabled || props.isDisabled,
@@ -181,32 +181,32 @@ var SegmentBase = (t0) => {
 };
 var Segment = (props) => {
 	const $ = c(15);
-	if ("field" in props && props.field) {
-		let field;
+	if ("formControl" in props && props.formControl) {
+		let formControl;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({field, ref, ...innerProps} = props);
+			({formControl, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = field;
+			$[1] = formControl;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			field = $[1];
+			formControl = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field: field_0, fieldState: t2 } = t1;
+				const { field, fieldState: t2 } = t1;
 				const { error } = t2;
 				return /* @__PURE__ */ jsx(SegmentBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field_0.ref),
-					value: field_0.value,
-					onChange: field_0.onChange,
-					isDisabled: field_0.disabled || props.isDisabled,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					isDisabled: field.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -217,14 +217,14 @@ var Segment = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(FieldController, {
-				control: field.form,
-				name: field.name,
+		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
 				render: t0
 			});
-			$[9] = field.form;
-			$[10] = field.name;
+			$[9] = formControl.control;
+			$[10] = formControl.name;
 			$[11] = t0;
 			$[12] = t1;
 		} else t1 = $[12];

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/segment/segment.types.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactElement, Ref, SVGProps } from 'react';
 import { Key, ToggleButtonGroupProps, ToggleButtonProps } from 'react-aria-components';
-import { FieldValues } from '../inputs/shared/form.binding';
+import { FieldValues } from 'react-hook-form';
 import { ControlProps } from '../inputs/shared/form.types';
 import { SegmentItemVariantProps, SegmentVariantProps } from './segment.cva';
 export interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps, SegmentItemVariantProps {

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 { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 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,10 +1,13 @@
+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) => {
@@ -88,7 +91,7 @@ var PaginationList = (t0) => {
 			color,
 			variant,
 			iconOnly: hideText,
-			icon: ChevronsLeft,
+			icon: ChevronsLeftIcon,
 			children: t(_temp)
 		});
 		$[17] = color;
@@ -110,7 +113,7 @@ var PaginationList = (t0) => {
 			color,
 			variant,
 			iconOnly: hideText,
-			icon: ChevronLeft,
+			icon: ChevronLeftIcon,
 			children: t(_temp2)
 		});
 		$[26] = color;
@@ -133,7 +136,7 @@ var PaginationList = (t0) => {
 			color,
 			variant,
 			iconOnly: hideText,
-			icon: ChevronRight,
+			icon: ChevronRightIcon,
 			children: t(_temp3)
 		});
 		$[35] = color;
@@ -155,7 +158,7 @@ var PaginationList = (t0) => {
 			color,
 			variant,
 			iconOnly: hideText,
-			icon: ChevronsRight,
+			icon: ChevronsRightIcon,
 			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 { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
 //#region src/components/table/InfiniteTable.tsx
 var InfiniteTable = ({ hasNextPage, isFetchingNextPage = false, fetchNextPage, ...rest }) => {
 	const { ref } = useIntersectionObserver({

package/dist/components/table/Table.js

@@ -1,21 +1,23 @@
 "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 { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import i18next from "i18next";
 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 {
@@ -36,7 +38,7 @@ var RowDragHandleCell = ({ rowId }) => {
 		...listeners,
 		className: "cursor-move p-1",
 		label: "Drag handle",
-		icon: GripVertical
+		icon: DragIndicatorIcon
 	});
 };
 var AutoDragHandleCell = ({ row }) => /* @__PURE__ */ jsx(RowDragHandleCell, { rowId: row.id });
@@ -197,11 +199,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(ChevronUp, {
+								asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
 									width: 18,
 									height: 18
 								}),
-								desc: /* @__PURE__ */ jsx(ChevronDown, {
+								desc: /* @__PURE__ */ jsx(ChevronDownIcon, {
 									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 { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 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(X, { className: "size-4" })
+			children: /* @__PURE__ */ jsx(CloseIcon, { 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 { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 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(X, { className: "size-4" })
+			children: /* @__PURE__ */ jsx(CloseIcon, { 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 { createContext, use, useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useCallback, useMemo, useState } from "react";
 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 { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 //#region src/config/theme.context.tsx
 var ThemeContext;

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

@@ -26,15 +26,9 @@ export declare namespace UIConfig {
         };
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
-        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel"> & {
-            fireBlurOnChange?: boolean;
-        };
-        checkbox: Pick<CheckboxProps, "variant"> & {
-            fireBlurOnChange?: boolean;
-        };
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "multiSelectAutoConfirm"> & {
-            fireBlurOnChange?: boolean;
-        };
+        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel" | "fireBlurOnChange">;
+        checkbox: Pick<CheckboxProps, "variant" | "fireBlurOnChange">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange" | "multiSelectAutoConfirm">;
         queryAutocomplete: {
             isInitialQueryDisabled?: boolean;
             resolveSelectedItemsWithIds?: boolean;
@@ -45,11 +39,9 @@ export declare namespace UIConfig {
             resolveSelectedItemsWithIds?: boolean;
             searchDebounceDelay?: number;
         };
-        toggle: Pick<ToggleProps, "variant"> & {
-            fireBlurOnChange?: boolean;
-        };
+        toggle: Pick<ToggleProps, "variant" | "fireBlurOnChange">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear"> & {
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear" | "fireBlurOnChange"> & {
             calendarIcon?: ReactElement;
             dateTimeIcon?: ReactElement;
             timeIcon?: ReactElement;
@@ -57,7 +49,6 @@ 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,8 +1,10 @@
+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 { Calendar, CalendarClock, Clock } from "lucide-react";
-import { createContext, use } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
 //#region src/config/uiConfig.context.tsx
 var UIConfig;
 (function(_UIConfig) {
@@ -39,8 +41,8 @@ var UIConfig;
 			selectedTagsType: "list",
 			collapseAfter: 3,
 			hideSearchIcon: false,
-			multiSelectAutoConfirm: false,
-			fireBlurOnChange: false
+			fireBlurOnChange: false,
+			multiSelectAutoConfirm: false
 		},
 		queryAutocomplete: {
 			isInitialQueryDisabled: false,
@@ -68,15 +70,15 @@ var UIConfig;
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
 			autoFixYear: false,
-			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" }),
+			fireBlurOnChange: 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" }),
 			setDateValueOnDateSelection: false,
 			timeZone: "clientLocal",
 			granularity: "day",
 			shouldUpdateDateOnMonthYearChange: false,
-			allowPartialRange: false,
-			fireBlurOnChange: false
+			allowPartialRange: 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/helpers/dynamicColumns.d.ts

@@ -1,6 +1,6 @@
 import { CellContext, ColumnDef, ColumnMeta } from '@tanstack/react-table';
 import { ReactNode } from 'react';
-import { FieldPath } from '../components/inputs/shared/form.binding';
+import { FieldPath } from 'react-hook-form';
 import { z } from 'zod';
 type NestedTypeFromKey<T, K extends string> = K extends keyof T ? T[K] : K extends `${infer First}.${infer Rest}` ? First extends keyof T ? NestedTypeFromKey<T[First], Rest> : never : never;
 type SchemaType<TSchema extends z.ZodObject<any>> = z.infer<TSchema>;