@parallelworks/ui 0.20.0 → 0.21.1

package/dist/components/Button.js

@@ -1,5 +1,6 @@
 import { useLink } from "./Provider.js";
-import { AngleRightIcon, LoaderIcon } from "../icons.js";
+import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
+import { LoaderIcon } from "./StatusIcons.js";
 import cx from "classnames";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -57,7 +58,7 @@ function MethodButton({ icon, label, description, href, loading, disabled, class
 				children: description
 			})]
 		}),
-		loading ? /* @__PURE__ */ jsx(LoaderIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2" }) : /* @__PURE__ */ jsx(AngleRightIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
+		loading ? /* @__PURE__ */ jsx(LoaderIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2" }) : /* @__PURE__ */ jsx(FaAngleRight, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
 	] });
 	if (href) {
 		if (href.startsWith("/api/") || href.startsWith("http")) return /* @__PURE__ */ jsx("a", {

package/dist/components/Callout.js

@@ -1,10 +1,11 @@
-import { AlertIcon, InfoIcon } from "../icons.js";
+import { FaInfoCircle } from "../icons/fa/FaInfoCircle.js";
+import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
-	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(AlertIcon, { className: "h-6 w-6 mr-4 text-lg" });
-	else return /* @__PURE__ */ jsx(InfoIcon, { className: "h-6 w-6 mr-4 text-lg" });
+	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-6 w-6 mr-4 text-lg" });
+	else return /* @__PURE__ */ jsx(FaInfoCircle, { className: "h-6 w-6 mr-4 text-lg" });
 }
 function Callout({ type, className = "", children }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/components/CollapsiblePanel.d.ts

@@ -6,15 +6,13 @@ interface IControlledCollapsiblePanelProps {
     setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     onClick?: (() => void) | undefined;
     wrapperElement?: React.ElementType | undefined;
-    shown?: boolean;
-    setShown?: (shown: boolean) => void;
     customizedButton?: React.ReactNode;
     /** Rendered right after the title, outside the toggle button. */
     titleAction?: React.ReactNode;
     className?: string | undefined;
 }
 export declare function ControlledCollapsiblePanel({ title, children, open, setOpen, onClick, wrapperElement, customizedButton, titleAction, className, }: IControlledCollapsiblePanelProps): React.JSX.Element;
-export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
+export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, titleAction, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
     initialState?: boolean | undefined;
 }): React.JSX.Element;
 type MaybeCollapsibleProps = {

package/dist/components/CollapsiblePanel.js

@@ -1,17 +1,16 @@
-import { AngleRightIcon } from "../icons.js";
+import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
 import cx from "classnames";
 import React, { useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import AnimateHeight from "react-animate-height";
 //#region src/components/CollapsiblePanel.tsx
-var noop = () => {};
-function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, titleAction, className }) {
+function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick, wrapperElement, customizedButton = null, titleAction, className }) {
 	const toggleOpen = useCallback(() => {
-		if (onClick) onClick();
+		onClick?.();
 		setOpen?.((open) => !open);
 	}, [setOpen, onClick]);
 	const contentId = React.useId();
-	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
+	const Wrapper = wrapperElement ?? React.Fragment;
 	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
 		duration: 300,
 		height: open ? "auto" : 0,
@@ -27,7 +26,7 @@ function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onCli
 					"aria-controls": contentId,
 					className: cx("flex items-center text-left cursor-pointer", !titleAction && "w-full"),
 					onClick: toggleOpen,
-					children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsx(FaAngleRight, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
 						className: "px-2 font-bold select-none",
 						children: title?.toString()
 					})]
@@ -46,7 +45,7 @@ function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onCli
 		})]
 	});
 }
-function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
+function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null, titleAction }) {
 	const [open, setOpen] = React.useState(initialState);
 	const passTitle = typeof title === "function" ? title(open, setOpen) : title;
 	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
@@ -57,6 +56,7 @@ function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement
 		wrapperElement,
 		className,
 		customizedButton,
+		titleAction,
 		children
 	});
 }

package/dist/components/CopyToClipboard.js

@@ -1,5 +1,9 @@
 import { useNotify, useStrings } from "./Provider.js";
-import { CheckIcon, ClipboardIcon, CopyIcon, HiddenFalseIcon, HiddenTrueIcon } from "../icons.js";
+import { FaCheck } from "../icons/fa/FaCheck.js";
+import { FaEye } from "../icons/fa/FaEye.js";
+import { FaEyeSlash } from "../icons/fa/FaEyeSlash.js";
+import { FiCopy } from "../icons/fi/FiCopy.js";
+import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/CopyToClipboard.tsx
@@ -28,7 +32,7 @@ function CopyToClipboard({ as = "div", text, className, children, showIcon = tru
 				}
 			}
 		},
-		children: [showIcon && /* @__PURE__ */ jsx(ClipboardIcon, {}), children]
+		children: [showIcon && /* @__PURE__ */ jsx(HiOutlineClipboardCopy, {}), children]
 	});
 }
 function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
@@ -63,7 +67,7 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
 				"aria-label": isRevealed ? "Hide secret" : "Reveal secret",
 				title: isRevealed ? "Hide secret" : "Reveal secret",
-				children: isRevealed ? /* @__PURE__ */ jsx(HiddenFalseIcon, {}) : /* @__PURE__ */ jsx(HiddenTrueIcon, {})
+				children: isRevealed ? /* @__PURE__ */ jsx(FaEye, {}) : /* @__PURE__ */ jsx(FaEyeSlash, {})
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: (e) => {
@@ -72,7 +76,7 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 				},
 				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
 				"aria-label": copied ? "Copied" : "Copy to clipboard",
-				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
+				children: copied ? /* @__PURE__ */ jsx(FaCheck, { className: "text-green-400" }) : /* @__PURE__ */ jsx(FiCopy, {})
 			})]
 		})]
 	});

package/dist/components/CreateModal.js

@@ -1,5 +1,9 @@
 import { useStrings } from "./Provider.js";
-import { ChevronDownIcon, ChevronRightIcon, FavoriteIcon, FavoriteOutlineIcon, TooltipIcon } from "../icons.js";
+import { FaChevronDown } from "../icons/fa/FaChevronDown.js";
+import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
+import { IoHeart } from "../icons/io5/IoHeart.js";
+import { IoHeartOutline } from "../icons/io5/IoHeartOutline.js";
+import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { TOOLTIP_ID } from "./Tooltip.js";
 import { AddMenu } from "./AddMenu.js";
 import { BareModal, modalPanelClasses } from "./BareModal.js";
@@ -17,7 +21,7 @@ function FieldHelp({ tooltip }) {
 		"data-tooltip-id": TOOLTIP_ID,
 		"data-tooltip-content": tooltip,
 		className: "inline-flex cursor-help text-(--theme-muted-text-color)",
-		children: /* @__PURE__ */ jsx(TooltipIcon, { className: "w-3 h-3" })
+		children: /* @__PURE__ */ jsx(HiQuestionMarkCircle, { className: "w-3 h-3" })
 	});
 }
 /** Anchors the tooltip on a non-focusable span so it opens on hover but not when focus returns to the button after its menu/toggle closes (which would leave it stuck). */
@@ -118,7 +122,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 							children: [
 								typeIcon,
 								typeLabel,
-								/* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 opacity-60" })
+								/* @__PURE__ */ jsx(FaChevronDown, { className: "w-3 h-3 opacity-60" })
 							]
 						}) : /* @__PURE__ */ jsxs("div", {
 							className: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color)",
@@ -183,7 +187,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 						type: "button",
 						onClick: () => setAdvancedOpen((o) => !o),
 						className: "inline-flex items-center gap-1 text-xs font-medium text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
-						children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-3 h-3 transition-transform", advancedOpen && "rotate-90") }), t.advanced]
+						children: [/* @__PURE__ */ jsx(LuChevronRight, { className: cx("w-3 h-3 transition-transform", advancedOpen && "rotate-90") }), t.advanced]
 					}), advancedOpen && /* @__PURE__ */ jsx("div", {
 						className: "mt-2",
 						children: advanced
@@ -202,7 +206,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 				children: /* @__PURE__ */ jsxs(PillTooltip, {
 					content: favorite ? t.favoriteHintOn : t.favoriteHintOff,
 					className: "px-2.5",
-					children: [favorite ? /* @__PURE__ */ jsx(FavoriteIcon, { className: "w-4 h-4 scale-110 transition-transform" }) : /* @__PURE__ */ jsx(FavoriteOutlineIcon, { className: "w-4 h-4 transition-transform" }), favorite ? t.favorited : t.favorite]
+					children: [favorite ? /* @__PURE__ */ jsx(IoHeart, { className: "w-4 h-4 scale-110 transition-transform" }) : /* @__PURE__ */ jsx(IoHeartOutline, { className: "w-4 h-4 transition-transform" }), favorite ? t.favorited : t.favorite]
 				})
 			}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
@@ -318,7 +322,7 @@ function collapseToggleRow(group, count, collapse) {
 		onMouseDown: (e) => e.preventDefault(),
 		onClick: () => collapse.onToggle(group),
 		className: "flex w-full items-center gap-1.5 px-3 py-1.5 text-[13px] text-(--theme-muted-text-color) hover:text-(--theme-app) cursor-pointer",
-		children: [/* @__PURE__ */ jsx(expanded ? ChevronDownIcon : ChevronRightIcon, { className: "w-3 h-3" }), collapse.label(count)]
+		children: [/* @__PURE__ */ jsx(expanded ? FaChevronDown : LuChevronRight, { className: "w-3 h-3" }), collapse.label(count)]
 	}, `toggle-${group}`);
 }
 function collapsibleCountsByGroup(options) {
@@ -445,7 +449,7 @@ function CreateModalSelect({ label, icon, value, options, onChange, disabled = f
 			className: "font-normal text-(--theme-muted-text-color)",
 			children: label
 		}), selectedLabel] }) : label,
-		/* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 opacity-60" })
+		/* @__PURE__ */ jsx(FaChevronDown, { className: "w-3 h-3 opacity-60" })
 	] });
 	if (disabled) return /* @__PURE__ */ jsx("button", {
 		type: "button",

package/dist/components/Dropdown.d.ts

@@ -4,10 +4,6 @@ export interface IProps {
     options: (ICategory | IOptions | string)[];
     onActiveChange?: (option: unknown) => void;
     onChange: React.Dispatch<SetStateAction<unknown>>;
-    onRangeChange?: (range: {
-        min: number;
-        max: number;
-    }) => void;
     value: IOptions | string | Record<string, unknown>;
     id?: string | undefined;
     ariaLabel?: string | undefined;

package/dist/components/Dropdown.js

@@ -1,5 +1,5 @@
 import { useStrings } from "./Provider.js";
-import { CaretDownIcon } from "../icons.js";
+import { FaCaretDown } from "../icons/fa/FaCaretDown.js";
 import { truncationTooltipProps } from "./Tooltip.js";
 import { DropdownCaret, flattenDisplayOptions, isCategory, toggleSetMember } from "./dropdownUtils.js";
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
@@ -23,7 +23,7 @@ function getOptionFromValue(value, options) {
 		label: "",
 		value: ""
 	};
-	const found = options?.find((option) => {
+	const found = options.find((option) => {
 		if (typeof option === "string") return checkEquals(value, option);
 		else if (isCategory(option)) return option.options.find((opt) => checkEquals(value, opt.value));
 		else return checkEquals(value, option.value);
@@ -47,15 +47,14 @@ function getOptionFromValue(value, options) {
 	};
 }
 function Dropdown(props) {
-	const { onChange, value, options = [], ...others } = props;
+	const { onChange, value, options, ...others } = props;
 	const val = useMemo(() => {
 		return getOptionFromValue(value, options);
 	}, [value, options]);
 	const wrapperOnchange = (value) => {
-		if (onChange) onChange(value?.value);
+		onChange(value?.value);
 	};
 	const transformedOptions = useMemo(() => {
-		if (!options || options.length === 0) return [];
 		return options.map((item) => {
 			if (isCategory(item)) return {
 				...item,
@@ -126,7 +125,7 @@ function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps
 				e.stopPropagation();
 				onToggle(category);
 			},
-			children: [/* @__PURE__ */ jsx(CaretDownIcon, { className: cx("w-3 h-3", !expanded && "-rotate-90") }), option.label]
+			children: [/* @__PURE__ */ jsx(FaCaretDown, { className: cx("w-3 h-3", !expanded && "-rotate-90") }), option.label]
 		})
 	});
 }
@@ -253,7 +252,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		allowCustomValue,
 		customValueLabel
 	]);
-	const comboOptions = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+	const comboOptions = /* @__PURE__ */ jsx(ComboboxOptions, {
 		modal: false,
 		ref: setPopperElement,
 		style: styles["popper"],
@@ -282,7 +281,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 				})
 			});
 		}
-	}) });
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("relative rounded-md flex items-center", wrapperClassName),
 		children: /* @__PURE__ */ jsx(Combobox, {

package/dist/components/Filter.js

@@ -1,4 +1,4 @@
-import { FilterIcon } from "../icons.js";
+import { FaFilter } from "../icons/fa/FaFilter.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Filter.tsx
@@ -15,7 +15,7 @@ function Filter({ filter, setFilter, placeholder = "Filter...", pills, activePil
 				className: "shadow-sm focus:ring-1 block w-full pr-3 sm:text-sm theme-border rounded-md py-1.5 pl-8"
 			}), /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-y-0 left-0 flex py-2.5 pl-2",
-				children: /* @__PURE__ */ jsx(FilterIcon, {})
+				children: /* @__PURE__ */ jsx(FaFilter, {})
 			})]
 		}), pills && onPillChange && /* @__PURE__ */ jsx("div", {
 			className: "flex gap-1",

package/dist/components/Indicator.js

@@ -1,35 +1,40 @@
-import { CancelIcon, FailIcon, NotRunningIcon, RunningIcon, SkipIcon, SuccessIcon } from "../icons.js";
+import { FaRegCircle } from "../icons/fa/FaRegCircle.js";
+import { HiMiniCheckCircle } from "../icons/hi2/HiMiniCheckCircle.js";
+import { HiMiniMinusCircle } from "../icons/hi2/HiMiniMinusCircle.js";
+import { HiMiniXCircle } from "../icons/hi2/HiMiniXCircle.js";
+import { ImSpinner5 } from "../icons/im/ImSpinner5.js";
+import { TiCancel } from "../icons/ti/TiCancel.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Indicator.tsx
 function Indicator({ status }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "h-2 flex items-center text-(--theme-panel-bg)",
-		children: status === "started" || status === "running" ? /* @__PURE__ */ jsx(RunningIcon, {
+		children: status === "started" || status === "running" ? /* @__PURE__ */ jsx(ImSpinner5, {
 			className: "rounded-full text-[#FFCF00] animate-spin",
 			"data-testid": "running-indicator"
-		}) : status === "completed" ? /* @__PURE__ */ jsx(SuccessIcon, {
+		}) : status === "completed" ? /* @__PURE__ */ jsx(HiMiniCheckCircle, {
 			className: "text-[#6FBF5A]",
 			style: { transform: "scale(1.25)" },
 			"data-testid": "completed-indicator"
-		}) : status === "failed" || status === "error" ? /* @__PURE__ */ jsx(FailIcon, {
+		}) : status === "failed" || status === "error" ? /* @__PURE__ */ jsx(HiMiniXCircle, {
 			className: "text-red-500",
 			style: { transform: "scale(1.25)" },
 			"data-testid": "failed-indicator"
-		}) : status === "skipped" || status === "skipped-failed" ? /* @__PURE__ */ jsx(SkipIcon, {
+		}) : status === "skipped" || status === "skipped-failed" ? /* @__PURE__ */ jsx(HiMiniMinusCircle, {
 			className: "text-gray-400",
 			style: { transform: "scale(1.25)" },
 			"data-testid": "skipped-indicator"
-		}) : status === "canceled" ? /* @__PURE__ */ jsx(CancelIcon, {
+		}) : status === "canceled" ? /* @__PURE__ */ jsx(TiCancel, {
 			className: "text-[#3B82F6]",
 			style: { transform: "scale(1.5)" },
 			"data-testid": "canceled-indicator"
-		}) : status === "faulted" ? /* @__PURE__ */ jsx(RunningIcon, {
+		}) : status === "faulted" ? /* @__PURE__ */ jsx(ImSpinner5, {
 			className: "rounded-full text-[#EF4444] animate-spin",
 			"data-testid": "faulted-indicator"
-		}) : status === "canceling" ? /* @__PURE__ */ jsx(RunningIcon, {
+		}) : status === "canceling" ? /* @__PURE__ */ jsx(ImSpinner5, {
 			className: "rounded-full text-[#3B82F6] animate-spin",
 			"data-testid": "canceling-indicator"
-		}) : /* @__PURE__ */ jsx(NotRunningIcon, {
+		}) : /* @__PURE__ */ jsx(FaRegCircle, {
 			className: "rounded-full text-[#AAAAAA]",
 			"data-testid": "not-running-indicator"
 		})

package/dist/components/Input.js

@@ -1,4 +1,6 @@
-import { AlertIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { LuEye } from "../icons/lu/LuEye.js";
+import { LuEyeOff } from "../icons/lu/LuEyeOff.js";
+import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
 import { RequiredMark } from "./RequiredMark.js";
 import cx from "classnames";
 import { forwardRef, useId, useState } from "react";
@@ -38,14 +40,14 @@ var Input = forwardRef(({ label, error, className = "", mono, type, required, ..
 					onClick: () => setShowPassword(!showPassword),
 					tabIndex: -1,
 					"aria-label": showPassword ? "Hide password" : "Show password",
-					children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "w-5 h-5" })
+					children: showPassword ? /* @__PURE__ */ jsx(LuEyeOff, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(LuEye, { className: "w-5 h-5" })
 				})]
 			}),
 			error && /* @__PURE__ */ jsxs("span", {
 				id: errorId,
 				role: "alert",
 				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+				children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4" }), error]
 			})
 		]
 	});
@@ -78,7 +80,7 @@ var Textarea = forwardRef(({ label, error, className = "", mono, required, ...pr
 				id: errorId,
 				role: "alert",
 				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+				children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4" }), error]
 			})
 		]
 	});

package/dist/components/Listbox.js

@@ -1,33 +1,29 @@
 import { useStrings } from "./Provider.js";
-import { AngleDownIcon } from "../icons.js";
+import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
 import { keyedByContent } from "./keys.js";
 import { focusOnMount } from "./focus.js";
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
 import cx from "classnames";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Listbox.tsx
 function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false, required = false, id, "aria-describedby": describedBy }) {
 	const { dropdown: strings } = useStrings();
 	const [filter, setFilter] = useState("");
 	const [controlledOpen, setControlledOpen] = useState(false);
 	const optionsToShow = options.filter((option) => !option.selected && option.label && option.label.toLowerCase().includes(filter.toLowerCase()));
-	function useOutsideAlerter(ref) {
-		useEffect(() => {
-			function handleClickOutside(event) {
-				if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
-					setControlledOpen(false);
-					setFilter("");
-				}
-			}
-			document.addEventListener("mousedown", handleClickOutside);
-			return () => {
-				document.removeEventListener("mousedown", handleClickOutside);
-			};
-		}, [ref]);
-	}
 	const wrapperRef = useRef(null);
-	useOutsideAlerter(wrapperRef);
+	useEffect(() => {
+		function handleClickOutside(event) {
+			const wrapper = wrapperRef.current;
+			if (wrapper && event.target instanceof Node && !wrapper.contains(event.target)) {
+				setControlledOpen(false);
+				setFilter("");
+			}
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
 	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
 		modal: false,
 		static: true,
@@ -106,7 +102,7 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 				children: strings.select(type)
 			}), /* @__PURE__ */ jsx("span", {
 				className: "pointer-events-none absolute inset-y-0 right-0 flex items-center justify-items-center",
-				children: /* @__PURE__ */ jsx(AngleDownIcon, {
+				children: /* @__PURE__ */ jsx(FaAngleDown, {
 					className: "h-5 w-8",
 					"aria-hidden": "true"
 				})
@@ -115,8 +111,8 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 			leave: "transition ease-in duration-100",
 			leaveFrom: "opacity-100",
 			leaveTo: "opacity-0",
-			children: optionsElement || null
-		}) : /* @__PURE__ */ jsx(Fragment$1, { children: controlledOpen && optionsElement })]
+			children: optionsElement
+		}) : controlledOpen && optionsElement]
 	});
 }
 //#endregion

package/dist/components/Loader.js

@@ -1,4 +1,4 @@
-import { LoaderIcon } from "../icons.js";
+import { LoaderIcon } from "./StatusIcons.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Loader.tsx

package/dist/components/MultiSelect.js

@@ -4,10 +4,11 @@ import { DropdownCaret, filterOption, flattenOptions, isCategory, isOption } fro
 import { focusOnMount } from "./focus.js";
 import { Combobox, ComboboxButton, ComboboxOption, ComboboxOptions } from "@headlessui/react";
 import cx from "classnames";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { usePopper } from "react-popper";
 //#region src/components/MultiSelect.tsx
+var strictEqual = (a, b) => a === b;
 function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, required, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
 	const strings = useStrings();
 	const [query, setQuery] = useState("");
@@ -21,7 +22,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 		}]
 	});
 	const allOptions = useMemo(() => flattenOptions(options), [options]);
-	const compare = compareBy ?? ((a, b) => a === b);
+	const compare = compareBy ?? strictEqual;
 	const selectedOptions = useMemo(() => {
 		const result = [];
 		for (const val of value) {
@@ -38,7 +39,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 		if (!searchable || query.trim() === "") return allOptions;
 		const result = [];
 		for (const opt of allOptions) if (isCategory(opt)) {
-			const matchedChildren = (Array.isArray(opt.options) ? opt.options : []).filter((o) => filterOption(o, query));
+			const matchedChildren = opt.options.filter((o) => filterOption(o, query));
 			if (matchedChildren.length > 0) result.push(opt, ...matchedChildren);
 		} else if (isOption(opt) && filterOption(opt, query)) result.push(opt);
 		return result;
@@ -54,16 +55,12 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 			overflow: selectedOptions.length - shown.length
 		};
 	}, [selectedOptions, maxTagCount]);
-	const handleChange = useCallback((newValues) => {
-		if (!Array.isArray(newValues)) return;
-		onChange(newValues);
-	}, [onChange]);
 	const isDisabled = disabled || loading;
 	const isEmpty = filteredOptions.length === 0;
 	return /* @__PURE__ */ jsx(Combobox, {
 		multiple: true,
 		value: Array.isArray(value) ? value : [],
-		onChange: handleChange,
+		onChange,
 		disabled: isDisabled,
 		onClose: () => setQuery(""),
 		by: compare,

package/dist/components/PageHeader.js

@@ -1,5 +1,8 @@
 import { useLink, useSlots, useStrings } from "./Provider.js";
-import { AddIcon, ChevronRightIcon, EditIcon, MoreIcon } from "../icons.js";
+import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
+import { FaEdit } from "../icons/fa/FaEdit.js";
+import { FaPlus } from "../icons/fa/FaPlus.js";
+import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { keyedByContent } from "./keys.js";
 import { TOOLTIP_ID } from "./Tooltip.js";
 import { AddMenu } from "./AddMenu.js";
@@ -18,7 +21,7 @@ var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5
 function HeaderAddButton({ to, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
 	const { common } = useStrings();
 	const Link = useLink();
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FaPlus, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
 	if (menu) return /* @__PURE__ */ jsx(AddMenu, {
 		items: menu,
 		label,
@@ -52,7 +55,7 @@ function HeaderActionMenu({ items, label = "Actions" }) {
 		items,
 		label,
 		buttonClassName: headerActionButtonClasses,
-		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "w-3.5 h-3.5" })
 	});
 }
 /** The header "…" trigger for a RowMenuItem menu — same rendering (submenus,
@@ -69,7 +72,7 @@ function HeaderRowMenu({ items, label = "Actions" }) {
 			const r = e.currentTarget.getBoundingClientRect();
 			openMenu(r.left, r.bottom + 4, items);
 		},
-		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "w-3.5 h-3.5" })
 	}), contextMenu] });
 }
 function HeaderEditButton({ to, onClick, label = "Edit", disabled, tooltip }) {
@@ -84,7 +87,7 @@ function HeaderEditButton({ to, onClick, label = "Edit", disabled, tooltip }) {
 		...tooltip ? {} : { title: label },
 		className: headerActionButtonClasses,
 		...tooltipProps,
-		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+		children: /* @__PURE__ */ jsx(FaEdit, { className: "w-3 h-3" })
 	});
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -94,7 +97,7 @@ function HeaderEditButton({ to, onClick, label = "Edit", disabled, tooltip }) {
 		title: tooltip ? void 0 : label,
 		className: cx(headerActionButtonClasses, disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"),
 		...tooltipProps,
-		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+		children: /* @__PURE__ */ jsx(FaEdit, { className: "w-3 h-3" })
 	});
 }
 /** Renders nothing when the modern breadcrumb strip isn't mounted (classic chrome or self-headered pages). */
@@ -162,7 +165,7 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 					}) : /* @__PURE__ */ jsx("span", {
 						className: "text-(--theme-muted-text-color) whitespace-nowrap",
 						children: crumb.label
-					}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, key);
+					}), /* @__PURE__ */ jsx(LuChevronRight, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, key);
 				})
 			}),
 			titleAction,

package/dist/components/Pagination.js

@@ -8,7 +8,7 @@ function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roun
 		className: cx(roundedBottom && "rounded-b-2xl", "theme-muted-panel flex items-center justify-between border-t theme-border  px-4 py-1 sm:px-6"),
 		"aria-label": "Pagination",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cx("hidden", (startingNumber !== void 0 && startingNumber !== null && endingNumber !== void 0 && endingNumber !== null || startingTime && endingTime) && "sm:block"),
+			className: cx("hidden", (startingNumber !== void 0 && endingNumber !== void 0 || startingTime && endingTime) && "sm:block"),
 			children: /* @__PURE__ */ jsx("p", {
 				className: "text-sm whitespace-nowrap",
 				children: useTimeRange && startingTime && endingTime ? t.paginationShowingTimeRange(name ?? "", startingTime, endingTime) : t.paginationShowing(name ?? "", startingNumber ?? "", endingNumber ?? "")

package/dist/components/Provider.d.ts

@@ -476,14 +476,6 @@ export interface UISlots {
 }
 /** An engine, or a loader so the host can keep the engine out of its first-load bundle. */
 export type WorkflowEngineSource = WorkflowEngine | (() => Promise<WorkflowEngine>);
-export interface UIProviderValue {
-    notify: UINotify;
-    strings: UIStrings;
-    navigation: UINavigation;
-    data: UIData;
-    slots: UISlots;
-    engine?: WorkflowEngineSource | undefined;
-}
 export declare function useNotify(): UINotify;
 export declare function useStrings(): UIStrings;
 export declare function useNavigation(): UINavigation;

package/dist/components/Sort.js

@@ -1,13 +1,15 @@
 import { useStrings } from "./Provider.js";
-import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
+import { TiArrowSortedDown } from "../icons/ti/TiArrowSortedDown.js";
+import { TiArrowSortedUp } from "../icons/ti/TiArrowSortedUp.js";
+import { TiArrowUnsorted } from "../icons/ti/TiArrowUnsorted.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Sort.tsx
 var SortIcon = ({ currentlySorted, currentDirection, name }) => {
 	const style = { transform: "translateY(2px)" };
 	if (currentlySorted === name) {
-		if (currentDirection === "ascending") return /* @__PURE__ */ jsx(SortDownIcon, { style });
-		else if (currentDirection === "descending") return /* @__PURE__ */ jsx(SortUpIcon, { style });
-	} else return /* @__PURE__ */ jsx(SortUnsortedIcon, { style });
+		if (currentDirection === "ascending") return /* @__PURE__ */ jsx(TiArrowSortedDown, { style });
+		else if (currentDirection === "descending") return /* @__PURE__ */ jsx(TiArrowSortedUp, { style });
+	} else return /* @__PURE__ */ jsx(TiArrowUnsorted, { style });
 	return null;
 };
 function Sort({ currentlySorted, name, setCurrentDirection, setCurrentlySorted, currentDirection }) {

package/dist/components/StatusIcons.d.ts

@@ -0,0 +1,11 @@
+import type { IconBaseProps } from 'react-icons';
+interface IBaseCheckmarkProps {
+    className?: string;
+    colored?: boolean;
+}
+export declare function SuccessCheckmark({ className, colored }: IBaseCheckmarkProps): import("react").JSX.Element;
+export declare function ErrorCheckmark({ className, colored }: IBaseCheckmarkProps): import("react").JSX.Element;
+export declare function LoaderIcon({ className, ...props }: IconBaseProps & {
+    className?: string;
+}): import("react").JSX.Element;
+export {};