@parallelworks/ui 0.18.0 → 0.19.1

package/dist/components/FilterPill.js

@@ -0,0 +1,13 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/FilterPill.tsx
+function FilterPill({ active, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: cx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
+		children
+	});
+}
+//#endregion
+export { FilterPill };

package/dist/components/IconButton.js

@@ -0,0 +1,34 @@
+import { TOOLTIP_ID } from "./Tooltip.js";
+import cx from "classnames";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/IconButton.tsx
+var IconButton = forwardRef(({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, disabled, ...props }, ref) => {
+	const sizeClasses = {
+		sm: "w-7 h-7 [&_svg]:w-3.5 [&_svg]:h-3.5",
+		md: "w-9 h-9 [&_svg]:w-4 [&_svg]:h-4",
+		lg: "w-11 h-11 [&_svg]:w-5 [&_svg]:h-5"
+	};
+	const variantClasses = {
+		default: cx("bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-border)] hover:text-[var(--theme-app)]", active && "bg-[var(--theme-element)]/10 text-[var(--theme-element)]"),
+		ghost: cx("bg-transparent text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-muted-panel-bg)] hover:text-[var(--theme-app)]", active && "text-[var(--theme-element)]"),
+		primary: cx("bg-[var(--theme-element)] text-white", "hover:bg-[var(--theme-element)]/90", active && "ring-2 ring-[var(--theme-element)]/50"),
+		success: cx("bg-[#22c55e] text-white", "hover:bg-[#22c55e]/90", active && "ring-2 ring-[#22c55e]/50")
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"aria-label": label,
+		disabled,
+		...showTooltip ? { "data-tooltip-id": TOOLTIP_ID } : {},
+		"data-tooltip-content": label,
+		"data-tooltip-delay-show": 300,
+		"data-tooltip-class-name": "!bg-[var(--theme-app)] !text-[var(--theme-app-bg)] !text-xs !py-1 !px-2 !rounded-md",
+		className: cx("inline-flex items-center justify-center rounded-lg", "transition-all duration-200 cursor-pointer", "disabled:opacity-50 disabled:cursor-not-allowed", sizeClasses[size], variantClasses[variant], className),
+		...props,
+		children: icon
+	});
+});
+IconButton.displayName = "IconButton";
+//#endregion
+export { IconButton };

package/dist/components/Indicator.d.ts

@@ -1,4 +1,4 @@
-import type { TStatus } from '@parallelworks/workflow-parser';
+import type { RunStatus } from '../engine.js';
 export declare function Indicator({ status }: {
-    status: TStatus;
+    status: RunStatus;
 }): import("react").JSX.Element;

package/dist/{chunks/Indicator-hBSIxOPK.js → components/Indicator.js}

@@ -36,4 +36,4 @@ function Indicator({ status }) {
 	});
 }
 //#endregion
-export { Indicator as t };
+export { Indicator };

package/dist/components/Input.d.ts

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
+import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: ReactNode;
     error?: string | undefined;

package/dist/components/Input.js

@@ -0,0 +1,88 @@
+import { AlertIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { RequiredMark } from "./RequiredMark.js";
+import cx from "classnames";
+import { forwardRef, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Input.tsx
+var Input = forwardRef(({ label, error, className = "", mono, type, required, ...props }, ref) => {
+	const [showPassword, setShowPassword] = useState(false);
+	const isPassword = type === "password";
+	const inputType = isPassword && showPassword ? "text" : type;
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const errorId = `${id}-error`;
+	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const inputClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", isPassword && "pr-11", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: isPassword ? "relative w-full" : "",
+				children: [/* @__PURE__ */ jsx("input", {
+					ref,
+					type: inputType,
+					className: inputClasses,
+					...props,
+					id,
+					required,
+					"aria-invalid": error ? true : props["aria-invalid"],
+					"aria-describedby": describedBy
+				}), isPassword && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
+					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" })
+				})]
+			}),
+			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]
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+var Textarea = forwardRef(({ label, error, className = "", mono, required, ...props }, ref) => {
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const errorId = `${id}-error`;
+	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const textareaClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border min-h-[140px] resize-y", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref,
+				className: textareaClasses,
+				...props,
+				id,
+				required,
+				"aria-invalid": error ? true : props["aria-invalid"],
+				"aria-describedby": describedBy
+			}),
+			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]
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Input, Textarea };

package/dist/components/LetterBadge.d.ts

@@ -1,6 +1,6 @@
 /** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
  * an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
-export declare function LetterBadge({ text, className, }: {
+export declare function LetterBadge({ text, className }: {
     text: string;
     className?: string;
 }): import("react").JSX.Element;

package/dist/components/LetterBadge.js

@@ -0,0 +1,13 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/LetterBadge.tsx
+/** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
+* an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
+function LetterBadge({ text, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
+		children: text
+	});
+}
+//#endregion
+export { LetterBadge };

package/dist/components/Listbox.js

@@ -0,0 +1,123 @@
+import { useStrings } from "./Provider.js";
+import { AngleDownIcon } from "../icons.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";
+//#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);
+	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
+		modal: false,
+		static: true,
+		className: "absolute w-full py-1 z-50 theme-input rounded-md",
+		children: [allowSearch && /* @__PURE__ */ jsx("div", {
+			className: "pl-2 pr-4 mb-1",
+			children: /* @__PURE__ */ jsx("input", {
+				autoComplete: "off",
+				type: "search",
+				ref: focusOnMount,
+				onChange: (e) => setFilter(e.target.value),
+				value: filter,
+				className: "w-full p-1 theme-input",
+				onKeyDown: (e) => {
+					if (![
+						"ArrowUp",
+						"ArrowDown",
+						"Enter",
+						"Home",
+						"End",
+						"Escape"
+					].includes(e.key)) e.stopPropagation();
+				}
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-auto max-h-60 theme-panel",
+			children: optionsToShow.length > 0 ? keyedByContent(optionsToShow, (o) => String(o.value)).map(({ key, item: option }) => /* @__PURE__ */ jsx(ListboxOption, {
+				className: "relative hover:theme-hover select-none pl-2 pr-4",
+				value: option.value,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full flex flex-row",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "w-3/4 py-2 flex items-center",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "w-4 h-6 btn btn-info text-xl line-height-0 mr-2",
+								children: "+"
+							}),
+							option.icon && /* @__PURE__ */ jsx("span", {
+								className: "mr-2 flex items-center",
+								children: option.icon
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: option.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "italic",
+								children: option.secondaryLabel
+							})
+						]
+					})
+				})
+			}, key)) : /* @__PURE__ */ jsx("div", {
+				className: "w-full flex flex-row",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-3/4 py-2 pl-2 capitalize flex items-center",
+					children: filter === "" ? `All ${type} Added` : `No ${type} Found`
+				})
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Listbox, {
+		as: "div",
+		className: cx("relative mt-1 theme-input border theme-border rounded-md", className),
+		ref: wrapperRef,
+		onChange: handleOptionSelected,
+		children: [/* @__PURE__ */ jsxs(ListboxButton, {
+			id,
+			"aria-describedby": describedBy,
+			"aria-required": required || void 0,
+			onClick: () => setControlledOpen((prev) => !prev),
+			className: cx("relative w-full py-2 pl-3 text-left", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "block truncate",
+				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, {
+					className: "h-5 w-8",
+					"aria-hidden": "true"
+				})
+			})]
+		}), closeOnSelect ? /* @__PURE__ */ jsx(Transition, {
+			leave: "transition ease-in duration-100",
+			leaveFrom: "opacity-100",
+			leaveTo: "opacity-0",
+			children: optionsElement || null
+		}) : /* @__PURE__ */ jsx(Fragment$1, { children: controlledOpen && optionsElement })]
+	});
+}
+//#endregion
+export { CustomListbox as default };

package/dist/{chunks/Loader-BXoXTZGc.js → components/Loader.js}

@@ -44,4 +44,4 @@ function Loader({ size = 48, text, textSize = 12, full = true, color = "", loade
 	});
 }
 //#endregion
-export { Loader as t };
+export { Loader as default };

package/dist/components/Markdown.js

@@ -0,0 +1,15 @@
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Markdown.tsx
+var MarkdownImpl = lazy(() => import("./MarkdownImpl.js"));
+function Markdown(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("div", {
+			className: "markdown whitespace-pre-wrap text-start w-full",
+			children: props.children
+		}),
+		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
+	});
+}
+//#endregion
+export { Markdown as default };

package/dist/components/MarkdownImpl.d.ts

@@ -1,2 +1,2 @@
 import type { MarkdownProps } from './Markdown.js';
-export default function Markdown({ children, isStreaming, controls, }: MarkdownProps): import("react").JSX.Element;
+export default function Markdown({ children, isStreaming, controls }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MultiSelect.js

@@ -0,0 +1,171 @@
+import { useStrings } from "./Provider.js";
+import { keyedByContent } from "./keys.js";
+import { DropdownCaret, filterOption, flattenOptions, isCategory, isOption } from "./dropdownUtils.js";
+import { focusOnMount } from "./focus.js";
+import { Combobox, ComboboxButton, ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import cx from "classnames";
+import { useCallback, 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
+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("");
+	const [referenceEl, setReferenceEl] = useState(null);
+	const [popperEl, setPopperEl] = useState(null);
+	const { styles, attributes } = usePopper(referenceEl, popperEl, {
+		placement: "bottom-start",
+		modifiers: [{
+			name: "offset",
+			options: { offset: [0, 4] }
+		}]
+	});
+	const allOptions = useMemo(() => flattenOptions(options), [options]);
+	const compare = compareBy ?? ((a, b) => a === b);
+	const selectedOptions = useMemo(() => {
+		const result = [];
+		for (const val of value) {
+			const found = allOptions.find((opt) => isOption(opt) && compare(opt.value, val));
+			if (found) result.push(found);
+		}
+		return result;
+	}, [
+		value,
+		allOptions,
+		compare
+	]);
+	const filteredOptions = useMemo(() => {
+		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));
+			if (matchedChildren.length > 0) result.push(opt, ...matchedChildren);
+		} else if (isOption(opt) && filterOption(opt, query)) result.push(opt);
+		return result;
+	}, [
+		allOptions,
+		query,
+		searchable
+	]);
+	const display = useMemo(() => {
+		const shown = selectedOptions.slice(0, maxTagCount);
+		return {
+			label: shown.map((o) => o.label).join(", "),
+			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,
+		disabled: isDisabled,
+		onClose: () => setQuery(""),
+		by: compare,
+		children: ({ open }) => /* @__PURE__ */ jsxs("div", {
+			ref: setReferenceEl,
+			className: cx("relative", wrapperClassName),
+			children: [
+				/* @__PURE__ */ jsx(ComboboxButton, {
+					as: "div",
+					id,
+					"aria-labelledby": labelledBy,
+					"aria-describedby": describedBy,
+					"aria-required": required || void 0,
+					className: cx("theme-input flex items-center cursor-pointer rounded border text-[14px] w-full px-2 pr-8 py-1 min-h-[30px] overflow-hidden", isDisabled && "opacity-50 cursor-not-allowed", textBoxClassName, className),
+					children: loading ? /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text",
+						children: strings.loading
+					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: display.label
+					}), display.overflow > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "ml-1 shrink-0 theme-muted-text",
+						children: ["+", display.overflow]
+					})] }) : /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text truncate",
+						children: placeholder
+					})
+				}),
+				/* @__PURE__ */ jsx(DropdownCaret, {}),
+				open && /* @__PURE__ */ jsxs(ComboboxOptions, {
+					modal: false,
+					ref: setPopperEl,
+					static: true,
+					"data-testid": "msd-list",
+					style: styles["popper"],
+					...attributes["popper"],
+					className: "theme-panel z-10 max-h-60 w-full overflow-auto rounded-md shadow-lg focus:outline-none",
+					children: [searchable && /* @__PURE__ */ jsx("div", {
+						className: "sticky top-0 theme-panel p-2 border-b z-10",
+						children: /* @__PURE__ */ jsx("input", {
+							placeholder,
+							"data-1p-ignore": true,
+							autoComplete: "off",
+							type: "text",
+							className: "theme-input w-full",
+							value: query,
+							onChange: (e) => setQuery(e.target.value),
+							onKeyDown: (e) => e.stopPropagation(),
+							ref: focusOnMount
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "py-1",
+						children: isEmpty ? /* @__PURE__ */ jsx("div", {
+							className: "px-4 py-2 text-sm theme-muted-text",
+							children: strings.dropdown.noOptionsFound
+						}) : keyedByContent(filteredOptions, (o) => isCategory(o) ? `category-${o.category ?? "uncat"}` : `option-${String(o.value)}`).map(({ key, item: opt }) => {
+							if (isCategory(opt)) return /* @__PURE__ */ jsx("li", {
+								role: "presentation",
+								className: "px-4 py-2 text-sm font-bold theme-muted-text",
+								children: opt.category
+							}, key);
+							const option = opt;
+							return /* @__PURE__ */ jsx(ComboboxOption, {
+								value: option.value,
+								disabled: option.disabled ?? false,
+								"data-testid": `msd-option-${String(option.value)}`,
+								className: ({ focus }) => cx("relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm", focus && "theme-hover", option.disabled && "cursor-not-allowed opacity-50"),
+								children: ({ selected }) => /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "absolute inset-y-0 left-0 flex items-center pl-3",
+											children: /* @__PURE__ */ jsx("input", {
+												autoComplete: "off",
+												type: "checkbox",
+												checked: selected,
+												readOnly: true,
+												tabIndex: -1,
+												className: "h-4 w-4 cursor-pointer",
+												"aria-hidden": "true"
+											})
+										}),
+										option.icon && /* @__PURE__ */ jsx("span", {
+											className: "mr-2 flex items-center",
+											children: option.icon
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: "flex flex-col",
+											children: /* @__PURE__ */ jsx("span", {
+												className: "block truncate",
+												children: option.label
+											})
+										})
+									]
+								})
+							}, key);
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { MultiSelectDropdown as default };

package/dist/components/Overview.js

@@ -0,0 +1,39 @@
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Skeleton from "react-loading-skeleton";
+//#region src/components/Overview.tsx
+function Overview({ Icon, name, type, children, right, className, loading, iconSize = 75 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex items-center w-full", className),
+		children: [
+			loading ? /* @__PURE__ */ jsx(Skeleton, {
+				width: iconSize,
+				height: iconSize,
+				circle: true
+			}) : Icon,
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col min-w-0 flex-1",
+				children: loading ? /* @__PURE__ */ jsx(Skeleton, {
+					count: 2,
+					height: 12
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "font-semibold text-xl tracking-tight",
+						children: name
+					}),
+					type && /* @__PURE__ */ jsx("p", { children: type }),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-row gap-x-2",
+						children
+					})
+				] })
+			}),
+			right && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 self-center",
+				children: right
+			})
+		]
+	});
+}
+//#endregion
+export { Overview };