@povio/ui 3.3.0 → 3.4.0-rc.10

package/dist/components/navigation/Accordion/AccordionItem.js

@@ -1,9 +1,9 @@
-import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { accordionChevronDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition } from "./accordion.cva.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
 import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/Accordion/AccordionItem.tsx
 var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
 	const itemCva = UIOverrides.useCva("accordion.itemCva", accordionItemDefinition);
@@ -49,7 +49,7 @@ var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon,
 						})
 					]
 				})
-			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: chevronCva({ isExpanded }) })]
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: chevronCva({ isExpanded }) })]
 		}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
 			className: panelCva({ isExpanded }),
 			children: /* @__PURE__ */ jsx("div", {

package/dist/components/navigation/Stepper/Stepper.js

@@ -2,8 +2,8 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { stepperDefinition } from "./stepper.cva.js";
 import { StepperItem } from "./StepperItem.js";
 import { StepperSeparator } from "./StepperSeparator.js";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
 //#region src/components/navigation/Stepper/Stepper.tsx
 var Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientation = "horizontal", iconsOnly, titlesOnly, onStepClick, className }) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -15,7 +15,7 @@ var Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientat
 		"aria-label": "Progress",
 		children: steps.map((step, index) => {
 			const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
-			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepperItem, {
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StepperItem, {
 				step,
 				stepNumber: index + 1,
 				status,

package/dist/components/navigation/Stepper/StepperItem.js

@@ -1,11 +1,11 @@
-import { CheckIcon } from "../../../assets/icons/Check.js";
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSubtextDefinition, stepperTitleDefinition } from "./stepper.cva.js";
-import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/Stepper/StepperItem.tsx
 var StepperItem = (t0) => {
 	const $ = c(31);
@@ -26,7 +26,7 @@ var StepperItem = (t0) => {
 	} else t1 = $[2];
 	let t2;
 	if ($[3] !== status || $[4] !== stepNumber || $[5] !== stepperNumberCva) {
-		t2 = status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-5 text-interactive-contained-primary-on-idle" }) : /* @__PURE__ */ jsx(Typography, {
+		t2 = status === "completed" ? /* @__PURE__ */ jsx(Check, { className: "size-5 text-interactive-contained-primary-on-idle" }) : /* @__PURE__ */ jsx(Typography, {
 			className: stepperNumberCva({ status }),
 			variant: "prominent-1",
 			size: "label-3",

package/dist/components/overlays/ActionModal/ActionModal.js

@@ -2,8 +2,8 @@ import { Typography } from "../../text/Typography/Typography.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { Button } from "../../buttons/Button/Button.js";
 import { Modal } from "../Modal/Modal.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/ActionModal/ActionModal.tsx
 var textAlignClassMap = {
 	left: "text-left",

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.d.ts

@@ -1,4 +1,4 @@
 import { Key } from 'react-aria-components';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../inputs/shared/form.binding';
 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 { 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 { 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$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,
@@ -181,32 +181,32 @@ var SegmentBase = (t0) => {
 };
 var Segment = (props) => {
 	const $ = c(15);
-	if ("formControl" in props && props.formControl) {
-		let formControl;
+	if ("field" in props && props.field) {
+		let field;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({formControl, ref, ...innerProps} = props);
+			({field, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = formControl;
+			$[1] = field;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			formControl = $[1];
+			field = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field, fieldState: t2 } = t1;
+				const { field: field_0, fieldState: t2 } = t1;
 				const { error } = t2;
 				return /* @__PURE__ */ jsx(SegmentBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
-					isDisabled: field.disabled || props.isDisabled,
+					ref: mergeRefs(ref, field_0.ref),
+					value: field_0.value,
+					onChange: field_0.onChange,
+					isDisabled: field_0.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -217,14 +217,14 @@ var Segment = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
+		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(FieldController, {
+				control: field.form,
+				name: field.name,
 				render: t0
 			});
-			$[9] = formControl.control;
-			$[10] = formControl.name;
+			$[9] = field.form;
+			$[10] = field.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 'react-hook-form';
+import { FieldValues } from '../inputs/shared/form.binding';
 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 { 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" | "fireBlurOnChange">;
-        checkbox: Pick<CheckboxProps, "variant" | "fireBlurOnChange">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange" | "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,9 +45,11 @@ export declare namespace UIConfig {
             resolveSelectedItemsWithIds?: boolean;
             searchDebounceDelay?: number;
         };
-        toggle: Pick<ToggleProps, "variant" | "fireBlurOnChange">;
+        toggle: Pick<ToggleProps, "variant"> & {
+            fireBlurOnChange?: boolean;
+        };
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear" | "fireBlurOnChange"> & {
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear"> & {
             calendarIcon?: ReactElement;
             dateTimeIcon?: ReactElement;
             timeIcon?: 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">;