@parallelworks/ui 0.18.0 → 0.19.1

package/dist/form/Fields/CheckboxGroupField.js

@@ -0,0 +1,72 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import cx from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useField, useFormikContext } from "formik";
+//#region src/form/Fields/CheckboxGroupField.tsx
+function impliedFrom(values, implies = {}) {
+	const result = /* @__PURE__ */ new Set();
+	for (const value of values) for (const target of implies[value] ?? []) result.add(target);
+	return result;
+}
+function union(manual, forced) {
+	return [...manual, ...[...forced].filter((v) => !manual.includes(v))];
+}
+function CheckboxGroupField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty }) {
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const implies = field.implies;
+	const [manual, setManual] = useState(() => {
+		const saved = fieldState.value || [];
+		const impliedBySaved = impliedFrom(saved, implies);
+		return saved.filter((v) => !impliedBySaved.has(v));
+	});
+	const forced = impliedFrom(manual, implies);
+	const handleToggle = (value) => {
+		if (disabled) return;
+		const nextManual = manual.includes(value) ? manual.filter((v) => v !== value) : [...manual, value];
+		const next = union(nextManual, impliedFrom(nextManual, implies));
+		setManual(nextManual);
+		setFieldTouched(field.name, true);
+		setFieldValue(field.name, next);
+		if (onChange) onChange(next);
+		setFormDirty(true);
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: ({ labelId, describedBy }) => /* @__PURE__ */ jsx("fieldset", {
+			"aria-labelledby": labelId,
+			"aria-describedby": describedBy,
+			className: "flex min-w-0 max-w-lg flex-col gap-1",
+			children: field.options?.map((option) => {
+				const locked = forced.has(option.value);
+				const optionDisabled = disabled || locked;
+				return /* @__PURE__ */ jsxs("label", {
+					className: cx("-mx-2 flex items-start gap-2.5 rounded-md px-2 py-1.5 transition-colors", optionDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: manual.includes(option.value) || locked,
+						disabled: optionDisabled,
+						onChange: () => handleToggle(option.value),
+						className: cx("mt-px h-4 w-4 rounded accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium leading-tight theme-text",
+							children: option.label
+						}), option.description && /* @__PURE__ */ jsx("span", {
+							className: "mt-0.5 text-xs leading-snug theme-muted-text",
+							children: option.description
+						})]
+					})]
+				}, field.name + option.value);
+			})
+		})
+	});
+}
+//#endregion
+export { CheckboxGroupField as default };

package/dist/form/Fields/ColorField.js

@@ -0,0 +1,33 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import { jsx } from "react/jsx-runtime";
+import { Field, useField, useFormikContext } from "formik";
+//#region src/form/Fields/ColorField.tsx
+function ColorField(props) {
+	const { field, label, labelPosition, onChange, tooltipComponent, spaceCompact } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (e) => {
+		const val = e.target.value;
+		if (onChange) onChange(val);
+		setFieldTouched(field.name, true);
+		setFieldValue(field.name, val);
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: ({ id }) => /* @__PURE__ */ jsx(Field, {
+			className: "theme-input h-8 w-18 rounded border border-neutral-400 placeholder:text-xs",
+			id,
+			name: field.name,
+			value: fieldState.value || "#fbbf24",
+			type: "color",
+			"aria-required": field.optional ? void 0 : true,
+			onChange: handleChange
+		})
+	});
+}
+//#endregion
+export { ColorField as default };

package/dist/form/Fields/DropdownField.js

@@ -0,0 +1,49 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import FormikCustomDropdown_default from "../SpecialTypes/FormikCustomDropdown.js";
+import { getPlaceholder } from "../utils/getPlaceholder.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/Fields/DropdownField.tsx
+function DropdownField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFieldValue, setFieldTouched, currentValue } = props;
+	let parentValue = field.parentValue;
+	let options = Array.isArray(field.options) && field.options || [];
+	if (field.depends_on) {
+		parentValue = field.depends_on;
+		if (!Array.isArray(field.options)) options = field.options[parentValue] ?? [];
+	}
+	const secondaryField = Array.isArray(field.secondaryField) ? field.secondaryField[0] : field.secondaryField;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		description: field.description,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grow min-w-0",
+			children: /* @__PURE__ */ jsx(FormikCustomDropdown_default, {
+				invalid: missing,
+				className: "w-full",
+				name: field.name,
+				ariaLabel: label,
+				options,
+				setFormDirty: props.setFormDirty,
+				parentValue,
+				onChange,
+				secondaryField,
+				disabled,
+				resetOnChange: field.resetOnChange ? field.name : "",
+				loading: false,
+				autoselect: field.autoselect,
+				allowCustomValue: field.allowCustomValue,
+				customValueLabel: field.customValueLabel,
+				placeholder: getPlaceholder(field.placeholder, typeof field.default === "string" ? field.default : void 0),
+				currentValue,
+				setFieldValue,
+				setFieldTouched
+			}, field.name)
+		})
+	});
+}
+//#endregion
+export { DropdownField as default };

package/dist/form/Fields/DurationField.js

@@ -0,0 +1,130 @@
+import { useStrings } from "../../components/Provider.js";
+import { FieldWrapper } from "../FieldWrapper.js";
+import { setDurationValidity } from "./durationValidity.js";
+import { formatDuration, parseDuration } from "../utils/duration.js";
+import cx from "classnames";
+import { memo, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/Fields/DurationField.tsx
+var DEBOUNCE_MS = 500;
+var isNumericString = (value) => typeof value === "string" && /^\d+$/.test(value.trim());
+var toDisplay = (value) => {
+	if (typeof value === "number") return formatDuration(value);
+	if (isNumericString(value)) return formatDuration(Number(value));
+	return "";
+};
+var DurationField_default = memo(function DurationField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty, currentValue, setFieldValue, setFieldTouched }) {
+	const { form: t } = useStrings();
+	const name = field.name;
+	const min = field.min !== void 0 ? Number(field.min) : Number.NEGATIVE_INFINITY;
+	const max = field.max !== void 0 ? Number(field.max) : Number.POSITIVE_INFINITY;
+	const disableValue = field.disableValue;
+	const hasDisableCheckbox = disableValue !== void 0 && field.disableLabel !== void 0;
+	const isSentinel = hasDisableCheckbox && currentValue !== "" && Number(currentValue) === disableValue;
+	const [text, setText] = useState(() => toDisplay(currentValue));
+	const focusedRef = useRef(false);
+	const debounceRef = useRef(null);
+	useEffect(() => {
+		if (isSentinel) {
+			if (typeof currentValue !== "number") setFieldValue?.(name, disableValue);
+		} else if (isNumericString(currentValue)) setFieldValue?.(name, Number(currentValue));
+		else if ((currentValue === void 0 || currentValue === null || currentValue === "") && typeof field.default === "number") setFieldValue?.(name, field.default);
+	}, []);
+	useEffect(() => {
+		if (!focusedRef.current) setText(toDisplay(currentValue));
+	}, [currentValue]);
+	const trimmed = text.trim();
+	const parsed = trimmed === "" ? null : parseDuration(trimmed);
+	let error = null;
+	if (!isSentinel && trimmed !== "") {
+		if (parsed === null) error = t.invalidDuration;
+		else if (parsed < min || parsed > max) error = Number.isFinite(max) ? t.durationOutOfRange(formatDuration(Math.max(min, 0)), formatDuration(max)) : t.durationBelowMin(formatDuration(Math.max(min, 0)));
+	}
+	useEffect(() => {
+		setDurationValidity(name, error === null);
+	}, [name, error]);
+	useEffect(() => () => {
+		setDurationValidity(name, true);
+		clearTimeout(debounceRef.current ?? void 0);
+	}, [name]);
+	const flushToFormik = (val) => {
+		setFieldValue?.(name, val);
+		onChange?.(val);
+		setFieldTouched?.(name, true);
+	};
+	const handleDisableToggle = (checked) => {
+		clearTimeout(debounceRef.current ?? void 0);
+		setFormDirty(true);
+		if (checked) {
+			setText("");
+			flushToFormik(disableValue);
+		} else flushToFormik(typeof field.default === "number" ? field.default : "");
+	};
+	const handleChange = (e) => {
+		const raw = e.target.value;
+		setText(raw);
+		setFormDirty(true);
+		clearTimeout(debounceRef.current ?? void 0);
+		const rawTrimmed = raw.trim();
+		const value = rawTrimmed === "" ? "" : parseDuration(rawTrimmed);
+		if (value === "" || typeof value === "number" && value >= min && value <= max) debounceRef.current = setTimeout(() => flushToFormik(value), DEBOUNCE_MS);
+	};
+	const handleFocus = () => {
+		focusedRef.current = true;
+	};
+	const handleBlur = () => {
+		focusedRef.current = false;
+		clearTimeout(debounceRef.current ?? void 0);
+		if (trimmed === "") {
+			setText("");
+			flushToFormik("");
+		} else if (parsed !== null && parsed >= min && parsed <= max) {
+			setText(formatDuration(parsed));
+			flushToFormik(parsed);
+		}
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional ?? false,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact: spaceCompact ?? false,
+		...field.description !== void 0 && { description: field.description },
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			!isSentinel && /* @__PURE__ */ jsx("input", {
+				"data-1p-ignore": true,
+				className: cx("w-full", disabled && "disabled", (missing || error !== null) && "invalid"),
+				id,
+				"aria-describedby": describedBy,
+				name,
+				value: text,
+				type: "text",
+				"aria-required": field.optional ? void 0 : true,
+				disabled,
+				placeholder: field.placeholder ?? "DD-HH:MM:SS",
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur
+			}),
+			error && /* @__PURE__ */ jsx("div", {
+				className: "text-xs text-red-500 mt-1",
+				children: error
+			}),
+			hasDisableCheckbox && /* @__PURE__ */ jsxs("label", {
+				className: cx("flex items-center gap-2 mt-1", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: isSentinel,
+					disabled,
+					onChange: (e) => handleDisableToggle(e.target.checked),
+					className: cx("h-4 w-4 accent-(--theme-link)", disabled ? "cursor-not-allowed" : "cursor-pointer")
+				}), /* @__PURE__ */ jsx("span", {
+					className: "theme-text",
+					children: field.disableLabel
+				})]
+			})
+		] })
+	});
+});
+//#endregion
+export { DurationField_default as default };

package/dist/form/Fields/LabelField.js

@@ -0,0 +1,19 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/Fields/LabelField.tsx
+function LabelField(props) {
+	const { field, label } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center w-full",
+		children: /* @__PURE__ */ jsx("h3", {
+			style: field.size ? {
+				fontSize: field.size.toString() + "px",
+				whiteSpace: "pre-wrap"
+			} : { whiteSpace: "pre-wrap" },
+			className: cx("relative", "text-md", field.bold !== false ? "font-bold" : ""),
+			children: field.text && field.text.toString().replace(/(\r)/g, "").replace(/(\\n)/g, "\n") || label
+		})
+	});
+}
+//#endregion
+export { LabelField as default };

package/dist/form/Fields/MultiDropdownField.js

@@ -0,0 +1,40 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import { MultiSelectionDropdown } from "../Form.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "formik";
+//#region src/form/Fields/MultiDropdownField.tsx
+function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, setFormDirty, onChange }) {
+	let parentValue = field.parentValue;
+	let options = field.options;
+	if (field.depends_on) {
+		parentValue = field.depends_on;
+		if (!Array.isArray(field.options)) options = field.options[parentValue] || [];
+	}
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: ({ id }) => disabled ? /* @__PURE__ */ jsx(Field, {
+			className: "theme-input h-7 w-full rounded border placeholder:text-xs",
+			id,
+			type: "search",
+			name: field.name,
+			disabled: true,
+			onChange
+		}, field.name) : /* @__PURE__ */ jsx(MultiSelectionDropdown, {
+			className: "themee-input h-7 w-full rounded border flex items-center px-3 py-2",
+			name: field.name,
+			label: field.label || label,
+			options: Array.isArray(options) ? options : [],
+			setFormDirty,
+			parentValue,
+			onChange,
+			secondaryField: typeof field.secondaryField === "string" ? field.secondaryField : void 0,
+			invalid: missing
+		}, field.name)
+	});
+}
+//#endregion
+export { MultiDropdownField as default };

package/dist/form/Fields/NumberField.js

@@ -0,0 +1,51 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import FormikCustomInput from "../SpecialTypes/FormikCustomInput.js";
+import FormikNumericInput from "../SpecialTypes/FormikNumericInput.js";
+import { getPlaceholder } from "../utils/getPlaceholder.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useField, useFormikContext } from "formik";
+//#region src/form/Fields/NumberField.tsx
+function NumberField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue } = useFormikContext();
+	useEffect(() => {
+		if (field.prefillDefault && field.default !== void 0 && (fieldState.value === void 0 || fieldState.value === null || fieldState.value === "")) setFieldValue(field.name, field.default);
+	}, [
+		field.prefillDefault,
+		field.default,
+		field.name,
+		fieldState.value,
+		setFieldValue
+	]);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: field.thousandsSeparator ? /* @__PURE__ */ jsx(FormikNumericInput, {
+			invalid: missing,
+			name: field.name,
+			placeholder: getPlaceholder(field.placeholder, field.default),
+			disabled,
+			min: field.min,
+			max: field.max,
+			...onChange && { onChange }
+		}, field.name) : /* @__PURE__ */ jsx(FormikCustomInput, {
+			invalid: missing,
+			name: field.name,
+			type: "number",
+			placeholder: getPlaceholder(field.placeholder, field.default),
+			disabled,
+			step: field.step,
+			min: field.min,
+			max: field.max,
+			defaultValue: field.default,
+			...onChange && { onChange }
+		}, field.name)
+	});
+}
+//#endregion
+export { NumberField as default };

package/dist/form/Fields/ObjectField.js

@@ -0,0 +1,54 @@
+import { ControlledCollapsiblePanel } from "../../components/CollapsiblePanel.js";
+import { FieldsFromOptions, GroupHeader, resolveMetaOverrides } from "../Form.js";
+import React, { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+//#region src/form/Fields/ObjectField.tsx
+function ObjectField({ field, label, tooltipComponent, missingFields, setFormDirty, workflowForm, labelPosition, spaceCompact }) {
+	const [open, setOpen] = useState(field.collapsed !== void 0 ? !field.collapsed : true);
+	const { values, setFieldValue, setFieldTouched } = useFormikContext();
+	const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact ?? false);
+	const HeaderElement = field.noCollapse ? React.Fragment : ControlledCollapsiblePanel;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col w-full",
+		children: [field.noCollapse && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center w-full mb-[15px]",
+			children: /* @__PURE__ */ jsxs("h3", {
+				className: "flex items-center gap-1 text-md font-bold",
+				children: [
+					label,
+					" ",
+					tooltipComponent
+				]
+			})
+		}), /* @__PURE__ */ jsx(HeaderElement, {
+			open,
+			setOpen,
+			title: /* @__PURE__ */ jsx(GroupHeader, {
+				open,
+				setOpen,
+				title: field.label || label
+			}),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+					options: field.options,
+					values,
+					setFormDirty,
+					setFieldValue,
+					setFieldTouched,
+					missingFields,
+					workflowForm,
+					labelPosition: meta.labelPosition,
+					spaceCompact: meta.spaceCompact,
+					parentInfo: {
+						parentName: field.name,
+						fieldNamePrefix: `${field.name}.`
+					}
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { ObjectField as default };

package/dist/form/Fields/RadioField.js

@@ -0,0 +1,49 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import cx from "classnames";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, useFormikContext } from "formik";
+//#region src/form/Fields/RadioField.tsx
+function RadioField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const uid = useId();
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (val) => {
+		if (disabled) return;
+		if (onChange) onChange(val);
+		setFieldTouched(field.name, true);
+		setFieldValue(field.name, val);
+		setFormDirty(true);
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: ({ labelId, describedBy }) => /* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			"aria-labelledby": labelId,
+			"aria-describedby": describedBy,
+			"aria-required": field.optional ? void 0 : true,
+			className: cx("flex", field.optionLabelPosition === "top" ? "flex-col" : "flex-row"),
+			children: field.options?.map((option) => /* @__PURE__ */ jsxs("label", {
+				htmlFor: `${uid}-${option}`,
+				className: "capitalize",
+				children: [/* @__PURE__ */ jsx(Field, {
+					id: `${uid}-${option}`,
+					className: cx("theme-input mr-1", disabled && "disabled", missing && "invalid"),
+					name: field.name,
+					type: "radio",
+					value: option,
+					disabled,
+					onChange: (e) => {
+						handleChange(e.target.value);
+					}
+				}), option]
+			}, field.name + option))
+		})
+	});
+}
+//#endregion
+export { RadioField as default };

package/dist/form/Fields/RangeField.js

@@ -0,0 +1,58 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, useField, useFormikContext } from "formik";
+//#region src/form/Fields/RangeField.tsx
+function RangeField(props) {
+	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (e) => {
+		let val = e.target.valueAsNumber;
+		if (!isNaN(val)) {
+			val = Math.max(field.min, Math.min(field.max, val));
+			setFieldValue(field.name, val);
+			if (onChange) onChange(val);
+			setFieldTouched(field.name, true);
+			setFormDirty(true);
+		}
+	};
+	const seedValue = field.default ?? field.min;
+	if ((fieldState.value === void 0 || fieldState.value === null) && seedValue !== void 0) setFieldValue(field.name, seedValue);
+	const currentValue = fieldState.value !== void 0 ? fieldState.value : seedValue;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: ({ id, labelId }) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ jsx(Field, {
+				className: cx("theme-input h-7 w-1/3 mr-5 text-center rounded border", disabled && "disabled"),
+				id,
+				type: "number",
+				value: currentValue,
+				min: field.min,
+				max: field.max,
+				step: field.step || 1,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ jsx(Field, {
+				className: cx("rounded w-full", disabled && "disabled"),
+				name: field.name,
+				value: currentValue,
+				type: "range",
+				"aria-labelledby": labelId,
+				"aria-required": field.optional ? void 0 : true,
+				min: field.min,
+				max: field.max,
+				step: field.step || 1,
+				disabled,
+				onChange: handleChange
+			})]
+		})
+	});
+}
+//#endregion
+export { RangeField as default };

package/dist/form/Fields/ResourceOptionIcon.d.ts

@@ -1,5 +1,5 @@
-import { StatusDot } from '../../components/StatusBadge.js';
 import type { ComponentProps } from 'react';
+import { StatusDot } from '../../components/StatusBadge.js';
 interface ResourceOptionIconProps {
     imageUrl?: string | undefined;
     fallbackIcon: string;

package/dist/form/Fields/ResourceOptionIcon.js

@@ -0,0 +1,21 @@
+import { StatusDot } from "../../components/StatusBadge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/Fields/ResourceOptionIcon.tsx
+function ResourceOptionIcon({ imageUrl, fallbackIcon, alt, variant = "success", dotSize = 6 }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-1.5 shrink-0",
+		children: [/* @__PURE__ */ jsx(StatusDot, {
+			variant,
+			size: dotSize
+		}), /* @__PURE__ */ jsx("img", {
+			src: imageUrl || fallbackIcon,
+			alt,
+			className: "h-4 w-4 object-contain",
+			onError: (e) => {
+				e.currentTarget.src = fallbackIcon;
+			}
+		})]
+	});
+}
+//#endregion
+export { ResourceOptionIcon };

package/dist/form/Fields/StepField.js

@@ -0,0 +1,6 @@
+//#region src/form/Fields/StepField.tsx
+function StepField(_props) {
+	return null;
+}
+//#endregion
+export { StepField as default };

package/dist/form/Fields/StringField.js

@@ -0,0 +1,37 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import FormikCustomInput from "../SpecialTypes/FormikCustomInput.js";
+import { getPlaceholder } from "../utils/getPlaceholder.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/Fields/StringField.tsx
+var StringField_default = memo(function StringField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, currentValue } = props;
+	const value = field.prefillDefault ? currentValue : void 0;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		description: field.description,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx(FormikCustomInput, {
+			invalid: missing,
+			name: field.name,
+			type: field.type,
+			lowercase: field.lowercase,
+			placeholder: field.type === "password" && field.placeholder === void 0 ? "•".repeat((field.default ?? "").toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
+			disabled,
+			step: field.step,
+			min: field.min,
+			max: field.max,
+			minLength: field.minLength,
+			maxLength: field.maxLength,
+			sanitize: field.sanitize,
+			defaultValue: field.default,
+			value,
+			...onChange && { onChange }
+		}, field.name)
+	});
+});
+//#endregion
+export { StringField_default as default };

package/dist/form/Fields/TextAreaField.js

@@ -0,0 +1,31 @@
+import { FieldWrapper } from "../FieldWrapper.js";
+import { getPlaceholder } from "../utils/getPlaceholder.js";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "formik";
+//#region src/form/Fields/TextAreaField.tsx
+function TextAreaField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		description: field.description,
+		labelPosition,
+		spaceCompact,
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(Field, {
+			className: cx("theme-input h-[82px] w-full rounded leading-4 overflow-y-scroll", disabled && "disabled", missing && "border-red-600 focus:border-red-600 focus:ring-red-500"),
+			as: "textarea",
+			id,
+			"aria-describedby": describedBy,
+			"aria-required": field.optional ? void 0 : true,
+			name: field.name,
+			type: "search",
+			placeholder: getPlaceholder(field.placeholder, field.default),
+			disabled,
+			...onChange && { onChange }
+		}, field.name)
+	});
+}
+//#endregion
+export { TextAreaField as default };