@moser-inc/moser-labs-react 6.8.1 → 7.0.0

package/dist/index.js

@@ -0,0 +1,1104 @@
+import { Suspense, createContext, forwardRef, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Keycloak from "keycloak-js";
+import { registerCustomElements } from "@moser-inc/moser-labs-custom-elements";
+import { UnheadProvider, createHead } from "@unhead/react/client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { PrimeReactProvider } from "primereact/api";
+import mixpanelPlugin from "@analytics/mixpanel";
+import analytics from "analytics";
+import { useMediaQuery } from "@react-hookz/web";
+import { useHead, useSeoMeta } from "@unhead/react";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { Button } from "primereact/button";
+import { Calendar } from "primereact/calendar";
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import { Checkbox } from "primereact/checkbox";
+import { AnimatePresence, motion } from "motion/react";
+import { useIdleTimer } from "react-idle-timer";
+import { Menu } from "primereact/menu";
+import { SpeedDial } from "primereact/speeddial";
+import { MultiSelect } from "primereact/multiselect";
+import { Dropdown } from "primereact/dropdown";
+import { CascadeSelect } from "primereact/cascadeselect";
+import { InputText } from "primereact/inputtext";
+import { InputTextarea } from "primereact/inputtextarea";
+import { Panel } from "primereact/panel";
+//#endregion
+//#region src/constants/app.ts
+const VERSION = "7.0.0";
+//#endregion
+//#region src/lib/head/headContext.tsx
+const head = createHead();
+const LabsHeadProvider = ({ children }) => {
+	return /* @__PURE__ */ jsx(UnheadProvider, {
+		head,
+		children
+	});
+};
+//#endregion
+//#region src/lib/prime/primeContext.tsx
+const options = {
+	unstyled: false,
+	ripple: true,
+	pt: {
+		column: { headerContent: { className: "inline-flex! ws-nowrap" } },
+		dialog: { mask: { className: "labs-mask" } },
+		tabmenu: { icon: { className: "pi-fw" } },
+		tabpanel: { headerAction: { className: "flex gap-2" } },
+		tooltip: { root: { className: "display-unset" } },
+		speeddial: { mask: { className: "labs-mask fixed inset-0 z-2 pointer-events-none" } }
+	},
+	ptOptions: {
+		classNameMergeFunction: clsx,
+		mergeSections: true,
+		mergeProps: true
+	}
+};
+const LabsPrimeProvider = ({ children }) => {
+	return /* @__PURE__ */ jsx(PrimeReactProvider, {
+		value: options,
+		children
+	});
+};
+//#endregion
+//#region src/lib/labs/labsContext.tsx
+const LabsContext = createContext(null);
+const LabsProvider = ({ children, ...rest }) => {
+	return /* @__PURE__ */ jsx(LabsContext, {
+		value: rest,
+		children: /* @__PURE__ */ jsx(LabsPrimeProvider, { children: /* @__PURE__ */ jsx(LabsHeadProvider, { children }) })
+	});
+};
+//#endregion
+//#region src/hooks/useLabs.ts
+const useLabs = () => {
+	const context = use(LabsContext);
+	if (context === null) throw new Error("useLabs must be used within a LabsProvider");
+	return context;
+};
+//#endregion
+//#region src/lib/analytics/createAnalytics.ts
+const OPTIONS_DEFAULT = { debug: false };
+const createAnalytics = ({ appName, options: optionsInit = {} }) => {
+	const plugins = [];
+	const options = {
+		...OPTIONS_DEFAULT,
+		...optionsInit
+	};
+	if (options?.tokenMixpanel) plugins.push(mixpanelPlugin({
+		token: options?.tokenMixpanel,
+		options: { debug: options?.debug ?? false }
+	}));
+	return analytics({
+		app: appName,
+		debug: options?.debug ?? false,
+		plugins
+	});
+};
+//#endregion
+//#region src/lib/analytics/analyticsContext.tsx
+const LabsAnalyticsContext = createContext(null);
+const LabsAnalyticsProvider = ({ appName, children, options }) => {
+	return /* @__PURE__ */ jsx(LabsAnalyticsContext, {
+		value: useMemo(() => {
+			return createAnalytics({
+				appName,
+				options
+			});
+		}, [appName, options]),
+		children
+	});
+};
+//#endregion
+//#region src/lib/auth/authContext.tsx
+const LabsAuthContext = createContext(null);
+const LabsAuthProvider = ({ labsApiUri, rolesClientId, children }) => {
+	const labs = useLabs();
+	const initializedRef = useRef(false);
+	const [user, setUser] = useState(null);
+	const analytics = use(LabsAnalyticsContext);
+	useEffect(() => {
+		if (initializedRef.current) return;
+		const init = async () => {
+			initializedRef.current = true;
+			try {
+				await auth.init({ onLoad: "login-required" });
+				registerCustomElements({
+					preset: labs.preset,
+					keycloak: auth,
+					analytics,
+					apiUri: labsApiUri
+				});
+				setUser(getParsedUserInfo(rolesClientId));
+			} catch (error) {
+				console.error("Error Authenticating", error);
+			}
+		};
+		init();
+	}, [
+		analytics,
+		labs.preset,
+		labsApiUri,
+		rolesClientId
+	]);
+	const isAuthenticated = useMemo(() => !!user, [user]);
+	const hasAllRoles = useCallback((roles) => {
+		if (!roles?.length) return true;
+		return (Array.isArray(roles) ? roles : [roles]).every((role) => {
+			return user?.roles?.includes(role) ?? false;
+		});
+	}, [user]);
+	const hasRole = useCallback((roles) => {
+		if (!roles?.length) return true;
+		return (Array.isArray(roles) ? roles : [roles]).some((role) => {
+			return user?.roles?.includes(role) ?? false;
+		});
+	}, [user]);
+	return /* @__PURE__ */ jsx(LabsAuthContext, {
+		value: useMemo(() => ({
+			hasAllRoles,
+			hasRole,
+			isAuthenticated,
+			isLoading: !isAuthenticated,
+			keycloak: auth,
+			logout: auth.logout,
+			refreshToken,
+			user
+		}), [
+			hasAllRoles,
+			hasRole,
+			isAuthenticated,
+			user
+		]),
+		children
+	});
+};
+//#endregion
+//#region src/lib/auth/authUtils.ts
+const getParsedUserInfo = (rolesClientId) => {
+	const { tokenParsed, clientId } = auth;
+	if (!tokenParsed || !clientId) return null;
+	const { sub: id, user_id: userId, name, given_name: firstName, family_name: lastName, email, job_title: jobTitle } = tokenParsed;
+	if (!id) return null;
+	const _clientId = rolesClientId ?? clientId;
+	return {
+		id,
+		userId,
+		name,
+		firstName,
+		lastName,
+		email,
+		jobTitle,
+		roles: tokenParsed.resource_access?.[_clientId]?.roles ?? []
+	};
+};
+const refreshToken = async () => {
+	return auth.updateToken(60);
+};
+const withAuthHeader = (headers) => {
+	const { token } = auth;
+	if (!token) return headers;
+	return {
+		...headers,
+		authorization: `Bearer ${token}`
+	};
+};
+//#endregion
+//#region src/lib/auth/index.ts
+const auth = new Keycloak("/keycloak.json");
+//#endregion
+//#region src/hooks/useAuth.ts
+const useAuth = () => {
+	const context = use(LabsAuthContext);
+	if (context === null) throw new Error("useAuth must be used within an LabsAuthProvider");
+	return context;
+};
+//#endregion
+//#region src/layouts/Base.layout.tsx
+const LayoutBase = ({ className, children, ...rest }) => {
+	const isDark = useMediaQuery("(prefers-color-scheme: dark)");
+	const { appName, favicons } = useLabs();
+	useHead({ link: [{
+		key: "icon",
+		rel: "icon",
+		href: useMemo(() => {
+			return isDark ? favicons.dark : favicons.light;
+		}, [favicons, isDark]),
+		sizes: "any",
+		type: "image/svg+xml"
+	}].filter((entry) => entry !== void 0) });
+	useSeoMeta({ titleTemplate: (title) => title ? `${title} - ${appName}` : appName });
+	return /* @__PURE__ */ jsx("div", {
+		id: "app",
+		className: clsx(className, "min-h-viewport"),
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/layouts/Centered.layout.tsx
+const LayoutCentered = ({ children, className, ...rest }) => {
+	return /* @__PURE__ */ jsx(LayoutBase, {
+		...rest,
+		className: clsx(className, "labs-layout items-center justify-center"),
+		children
+	});
+};
+//#endregion
+//#region src/components/LabsLoader.tsx
+const sizeMap = {
+	sm: "40px",
+	md: "80px",
+	lg: "120px"
+};
+const LabsLoader = ({ label, size = "md", className, ...rest }) => {
+	const sizePx = sizeMap[size];
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(className, "flex flex-col items-center"),
+		children: [/* @__PURE__ */ jsx(ProgressSpinner, {
+			style: {
+				width: sizePx,
+				height: sizePx
+			},
+			...rest
+		}), label && /* @__PURE__ */ jsx("div", {
+			className: "mt-3",
+			children: /* @__PURE__ */ jsx("p", { children: label })
+		})]
+	});
+};
+//#endregion
+//#region src/components/LabsAuthGate.tsx
+const LabsAuthGate = ({ children, messageLoading = "Loading..." }) => {
+	const { isLoading } = useAuth();
+	if (isLoading) return /* @__PURE__ */ jsx(LayoutCentered, { children: /* @__PURE__ */ jsx(LabsLoader, { label: messageLoading }) });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
+//#endregion
+//#region src/components/LabsButton.tsx
+const LabsButton = (props) => {
+	const { severity, icon, iconClassName, text = false, outlined = false, rounded = false, iconOnly = false, size, type = "button", label, disabled, className, children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Button, {
+		icon: useMemo(() => icon ? /* @__PURE__ */ jsx("i", { className: clsx(icon, iconClassName) }) : null, [icon, iconClassName]),
+		className: clsx(className, "inline-flex gap-2", {
+			[`p-button-${severity}`]: severity,
+			"p-button-text": text,
+			"p-button-outlined": outlined,
+			"p-button-rounded": rounded,
+			"p-button-icon-only": iconOnly,
+			"p-button-sm": size === "small",
+			"p-button-lg": size === "large",
+			"p-disabled p-button-disabled": disabled
+		}),
+		type,
+		label,
+		disabled,
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/lib/dayjs.ts
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(advancedFormat);
+var dayjs_default = dayjs;
+//#endregion
+//#region src/utils/forwardRefInferGenerics.ts
+const forwardRefInferGenerics = forwardRef;
+//#endregion
+//#region src/components/LabsCalendar.tsx
+const LabsCalendarBase = (props, ref) => {
+	const { value } = props;
+	const isDateSelected = useCallback((date) => {
+		const selectedDate = Array.isArray(value) ? value.map((date) => dayjs_default(date)) : typeof value === "string" || typeof value === "number" || value instanceof Date ? dayjs_default(value) : null;
+		if (!selectedDate) return false;
+		if (!Array.isArray(selectedDate)) return selectedDate.isSame(date, "day");
+		return selectedDate.some((day) => day.isSame(date, "day"));
+	}, [value]);
+	return /* @__PURE__ */ jsx(Calendar, {
+		ref,
+		dateFormat: "mm/dd/yy",
+		dateTemplate: useCallback((event) => {
+			const { day, month, year, today } = event;
+			const date = dayjs_default(new Date(year, month, day));
+			const isSelected = isDateSelected(date);
+			const ariaLabel = [
+				date.format("dddd, MMMM Do, YYYY"),
+				isSelected ? "selected" : "not selected",
+				today ? "current date" : ""
+			].filter(Boolean).join(", ");
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				children: day
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: ["Choose ", ariaLabel]
+			})] });
+		}, [isDateSelected]),
+		...props
+	});
+};
+LabsCalendarBase.displayName = "LabsCalendar";
+const LabsCalendar = forwardRefInferGenerics(LabsCalendarBase);
+//#endregion
+//#region src/utils/fieldHelpers.ts
+const toFieldInputProps = (fieldProps) => fieldProps;
+const toFieldSharedProps = (fieldProps) => {
+	return { className: clsx("w-full", { "p-invalid": !!fieldProps.message }) };
+};
+//#endregion
+//#region src/components/FieldContainer/FieldContainerHint.tsx
+const FieldContainerHint = ({ id, hintId = `${id}-hint`, hint, solo = false, children = hint, className, ...rest }) => {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx(motion.span, {
+		id: hintId,
+		className: clsx(className, "labs-field-hint", { "sr-only": solo }),
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/components/FieldContainer/FieldContainerLabel.tsx
+const FieldContainerLabel = ({ id, labelId = `${id}-label`, label, solo = false, children = label, className, ...rest }) => {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx(motion.label, {
+		id: labelId,
+		htmlFor: id,
+		className: clsx(className, "labs-field-label", { "sr-only": solo }),
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/utils/animations.ts
+const DEFAULT_TRANSITION_MS = 150;
+const DEFAULT_TRANSITION_SECONDS = 150 / 1e3;
+const transition = { duration: DEFAULT_TRANSITION_SECONDS };
+const fadeAnimation = {
+	transition,
+	variants: {
+		enter: { opacity: 1 },
+		exit: { opacity: 0 }
+	},
+	initial: "exit",
+	animate: "enter",
+	exit: "exit"
+};
+const slideYFadeAnimation = {
+	transition,
+	variants: {
+		enter: {
+			y: "0rem",
+			opacity: 1
+		},
+		exit: {
+			y: "-0.25rem",
+			opacity: 0
+		}
+	},
+	initial: "exit",
+	animate: "enter",
+	exit: "exit"
+};
+const slideYFadeReverseAnimation = {
+	transition,
+	variants: {
+		enter: {
+			y: "0rem",
+			opacity: 1
+		},
+		exit: {
+			y: "0.25rem",
+			opacity: 0
+		}
+	},
+	initial: "exit",
+	animate: "enter",
+	exit: "exit"
+};
+const scaleFadeAnimation = {
+	transition,
+	variants: {
+		enter: {
+			scale: 1,
+			opacity: 1
+		},
+		exit: {
+			scale: 0,
+			opacity: 0
+		}
+	},
+	initial: "exit",
+	animate: "enter",
+	exit: "exit"
+};
+const scaleFadeSubtleAnimation = {
+	transition,
+	variants: {
+		enter: {
+			scale: 1,
+			opacity: 1
+		},
+		exit: {
+			scale: .98,
+			opacity: 0
+		}
+	},
+	initial: "exit",
+	animate: "enter",
+	exit: "exit"
+};
+//#endregion
+//#region src/components/FieldContainer/FieldContainerMessage.tsx
+const FieldContainerMessage = ({ id, messageId = `${id}-message`, message, solo = false, children = message, className, ...rest }) => {
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "wait",
+		children: children ? /* @__PURE__ */ jsx(motion.span, {
+			id: messageId,
+			role: "alert",
+			"aria-live": "polite",
+			className: clsx(className, "labs-field-message", { "sr-only": solo }),
+			...slideYFadeAnimation,
+			...rest,
+			children
+		}) : null
+	});
+};
+//#endregion
+//#region src/components/FieldContainer/FieldContainer.tsx
+const FieldContainer = ({ id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, animation, children, ...rest }) => {
+	return /* @__PURE__ */ jsxs(motion.div, {
+		id: containerId,
+		...animation,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(FieldContainerLabel, {
+				id,
+				labelId,
+				label,
+				className: "text-xs block"
+			}),
+			children,
+			/* @__PURE__ */ jsx(FieldContainerMessage, {
+				id,
+				messageId,
+				message,
+				className: "text-xs block"
+			}),
+			!message && /* @__PURE__ */ jsx(FieldContainerHint, {
+				id,
+				hintId,
+				hint,
+				className: "text-xs block"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/LabsCheckbox.tsx
+const LabsCheckbox = (props) => {
+	const { id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, animation, className, checked = false, ...rest } = props;
+	return /* @__PURE__ */ jsxs(FieldContainer, {
+		id,
+		containerId,
+		labelId,
+		messageId,
+		hintId,
+		message,
+		hint,
+		animation,
+		className: clsx(className, "flex gap-4 items-center"),
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			...toFieldInputProps(rest),
+			...toFieldSharedProps(props),
+			checked,
+			inputId: id,
+			"aria-describedby": messageId,
+			className: "shrink"
+		}), /* @__PURE__ */ jsx(FieldContainerLabel, {
+			id,
+			labelId,
+			label,
+			className: "font-semibold cursor-pointer"
+		})]
+	});
+};
+LabsCheckbox.displayName = "LabsCheckbox";
+//#endregion
+//#region src/utils/pluralize.ts
+const pluralize = (count, singular, plural, inclusive = false) => {
+	const parsedCount = !isNaN(Number(count)) ? Number(count) : 0;
+	if (!inclusive) return parsedCount === 1 ? singular : plural;
+	return `${parsedCount} ${parsedCount === 1 ? singular : plural}`;
+};
+//#endregion
+//#region src/components/LabsCount.tsx
+const LabsCount = ({ count, plural, singular, showCount = true }) => {
+	return /* @__PURE__ */ jsx("span", { children: pluralize(count, singular, plural, showCount) });
+};
+//#endregion
+//#region src/components/FieldContainer/FieldContainerInput.tsx
+const FieldContainerInput = ({ id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, solo = false, floatLabel = false, prependIcon, appendIcon, className, children, ...rest }) => {
+	return /* @__PURE__ */ jsxs(FieldContainer, {
+		id,
+		containerId,
+		labelId,
+		messageId,
+		hintId,
+		className: clsx(className, "flex flex-col gap-1"),
+		...rest,
+		children: [
+			!floatLabel && /* @__PURE__ */ jsx(FieldContainerLabel, {
+				id,
+				labelId,
+				label,
+				solo,
+				className: "text-xs"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex w-full", {
+					"p-float-label": floatLabel,
+					"p-icon-field": !!prependIcon || !!appendIcon,
+					"p-icon-field-left": !!prependIcon,
+					"p-icon-field-right": !!appendIcon
+				}),
+				children: [
+					prependIcon && /* @__PURE__ */ jsx("i", { className: `${prependIcon} p-input-icon` }),
+					appendIcon && /* @__PURE__ */ jsx("i", { className: `${appendIcon} p-input-icon` }),
+					children,
+					floatLabel && /* @__PURE__ */ jsx(FieldContainerLabel, {
+						id,
+						labelId,
+						label
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(FieldContainerMessage, {
+				id,
+				messageId,
+				message,
+				solo,
+				className: "text-xs"
+			}),
+			!message && /* @__PURE__ */ jsx(FieldContainerHint, {
+				id,
+				hintId,
+				hint,
+				solo,
+				className: "text-xs"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/LabsDate.tsx
+const LabsDate = (props) => {
+	const { id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, animation, solo, floatLabel, prependIcon, appendIcon, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(FieldContainerInput, {
+		id,
+		containerId,
+		labelId,
+		messageId,
+		hintId,
+		label,
+		message,
+		hint,
+		animation,
+		solo,
+		floatLabel,
+		prependIcon,
+		appendIcon,
+		className,
+		children: /* @__PURE__ */ jsx(LabsCalendar, {
+			placeholder: solo ? label || rest.placeholder : rest.placeholder,
+			...toFieldInputProps(rest),
+			...toFieldSharedProps(props),
+			inputId: id,
+			"aria-describedby": messageId
+		})
+	});
+};
+//#endregion
+//#region src/components/LabsEmpty.tsx
+const LabsEmpty = ({ text, className, icon, children, ...rest }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(className, "m-block-6 flex flex-col gap-6 items-center"),
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex max-w-44 w-full items-center justify-center",
+			children: children ?? /* @__PURE__ */ jsx("i", { className: `${icon} text-32 text-primary` })
+		}), text && /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-primary-gradient font-semibold",
+			children: text
+		})]
+	});
+};
+//#endregion
+//#region src/components/LabsLogoutTimer.tsx
+const DELAY_LOGOUT_MILLISECONDS = 1440 * 60 * 1e3;
+const LabsLogoutTimer = ({ children, options, onLogout }) => {
+	const delay = options?.delay || DELAY_LOGOUT_MILLISECONDS;
+	useIdleTimer({
+		onIdle: useCallback(() => {
+			onLogout();
+		}, [onLogout]),
+		timeout: delay
+	});
+	return children;
+};
+//#endregion
+//#region src/components/LabsMain.tsx
+const LabsMain = ({ item, className, children, ...rest }) => {
+	useSeoMeta({ title: item?.TITLE });
+	return /* @__PURE__ */ jsx("main", {
+		className: clsx(className, "labs-main"),
+		...rest,
+		children
+	});
+};
+//#endregion
+//#region src/components/LabsMenuNav.tsx
+const LabsMenuNav = ({ items, renderItem, model, role = "navigation", ...rest }) => {
+	const modelItems = useMemo(() => items.map(renderItem), [items, renderItem]);
+	return /* @__PURE__ */ jsx(Menu, {
+		role,
+		...rest,
+		model: model ?? modelItems
+	});
+};
+//#endregion
+//#region src/components/LabsMainDesktopNav.tsx
+const LabsMainDesktopNav = ({ items, renderItem, className, pt, ...rest }) => {
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const handleRender = useCallback((item) => renderItem(item, { isMenuOpen }), [renderItem, isMenuOpen]);
+	const toggleMenu = useCallback(() => {
+		setIsMenuOpen(!isMenuOpen);
+	}, [isMenuOpen]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(className, "labs-layout-nav", {
+			"labs-layout-nav-closed": !isMenuOpen,
+			"labs-layout-nav-open": isMenuOpen
+		}),
+		children: [/* @__PURE__ */ jsx(LabsButton, {
+			label: "Toggle Main Navigation",
+			icon: "pi-bars",
+			iconOnly: true,
+			text: true,
+			rounded: true,
+			className: "labs-layout-nav-button [&>i]:labs-layout-nav-icon",
+			onClick: toggleMenu
+		}), /* @__PURE__ */ jsx(LabsMenuNav, {
+			"aria-label": "Main",
+			items,
+			className: "labs-layout-nav-menu",
+			pt: {
+				...pt,
+				menu: { className: "labs-layout-nav-menu-list" }
+			},
+			renderItem: handleRender,
+			...rest
+		})]
+	});
+};
+//#endregion
+//#region src/components/LabsSpeedDialNav.tsx
+const LabsSpeedDialNav = ({ items, renderItem, model, role = "navigation", ...rest }) => {
+	const modelItems = useMemo(() => items.map(renderItem), [items, renderItem]);
+	return /* @__PURE__ */ jsx(SpeedDial, {
+		role,
+		...rest,
+		model: model ?? modelItems
+	});
+};
+//#endregion
+//#region src/components/LabsMainMobileNav.tsx
+const LabsMainMobileNav = ({ items, renderItem, visible, onVisibleChange, className, pt, ...rest }) => {
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const handleRender = useCallback((item) => renderItem(item, { isMenuOpen }), [renderItem, isMenuOpen]);
+	const isVisible = visible ?? isMenuOpen;
+	const handleVisibleChange = useCallback((visible) => {
+		setIsMenuOpen(visible);
+		onVisibleChange?.(visible);
+	}, [setIsMenuOpen, onVisibleChange]);
+	return /* @__PURE__ */ jsx(LabsSpeedDialNav, {
+		"aria-label": "Toggle Main Navigation",
+		items,
+		radius: 120,
+		className: clsx(className, "labs-layout-nav-mobile"),
+		showIcon: `labs-layout-nav-icon pi-bars`,
+		hideIcon: `labs-layout-nav-icon pi-times`,
+		mask: true,
+		pt: {
+			...pt,
+			menu: { className: "absolute bottom-16" },
+			root: { className: "z-3" }
+		},
+		renderItem: handleRender,
+		...rest,
+		visible: isVisible,
+		onVisibleChange: handleVisibleChange
+	});
+};
+//#endregion
+//#region src/components/LabsMainHeaderActions.tsx
+const LabsMainHeaderActions = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("labs-app-switcher", {}), /* @__PURE__ */ jsx("labs-account", {})] });
+};
+//#endregion
+//#region src/components/LabsMultiSelect.tsx
+const LabsMultiSelect = (props) => {
+	const { id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, animation, solo, floatLabel, prependIcon, appendIcon, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(FieldContainerInput, {
+		id,
+		containerId,
+		labelId,
+		messageId,
+		hintId,
+		label,
+		message,
+		hint,
+		animation,
+		solo,
+		floatLabel,
+		prependIcon,
+		appendIcon,
+		className,
+		children: /* @__PURE__ */ jsx(MultiSelect, {
+			placeholder: solo ? label || rest.placeholder : rest.placeholder,
+			...toFieldInputProps(rest),
+			...toFieldSharedProps(props),
+			inputId: id,
+			"aria-describedby": messageId
+		})
+	});
+};
+//#endregion
+//#region src/components/LabsSelect.tsx
+const LabsSelect = (props) => {
+	const { id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, animation, solo, floatLabel, prependIcon, appendIcon, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(FieldContainerInput, {
+		id,
+		containerId,
+		labelId,
+		messageId,
+		hintId,
+		label,
+		message,
+		hint,
+		animation,
+		solo,
+		floatLabel,
+		prependIcon,
+		appendIcon,
+		className,
+		children: /* @__PURE__ */ jsx(Dropdown, {
+			placeholder: solo ? label || rest.placeholder : rest.placeholder,
+			...toFieldInputProps(rest),
+			...toFieldSharedProps(props),
+			inputId: id,
+			"aria-describedby": messageId
+		})
+	});
+};
+//#endregion
+//#region src/components/LabsSelectCascade.tsx
+const LabsSelectCascade = (props) => {
+	const { id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, animation, solo, floatLabel, prependIcon, appendIcon, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(FieldContainerInput, {
+		id,
+		containerId,
+		labelId,
+		messageId,
+		hintId,
+		label,
+		message,
+		hint,
+		animation,
+		solo,
+		floatLabel,
+		prependIcon,
+		appendIcon,
+		className,
+		children: /* @__PURE__ */ jsx(CascadeSelect, {
+			placeholder: solo ? label || rest.placeholder : rest.placeholder,
+			...toFieldInputProps(rest),
+			...toFieldSharedProps(props),
+			inputId: id,
+			"aria-describedby": messageId
+		})
+	});
+};
+//#endregion
+//#region src/components/LabsText.tsx
+const LabsText = forwardRef((props, ref) => {
+	const { id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, animation, solo, floatLabel, prependIcon, appendIcon, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(FieldContainerInput, {
+		id,
+		containerId,
+		labelId,
+		messageId,
+		hintId,
+		label,
+		message,
+		hint,
+		animation,
+		solo,
+		floatLabel,
+		prependIcon,
+		appendIcon,
+		className,
+		children: /* @__PURE__ */ jsx(InputText, {
+			placeholder: solo ? label || rest.placeholder : rest.placeholder,
+			...toFieldInputProps(rest),
+			...toFieldSharedProps(props),
+			ref,
+			id,
+			"aria-describedby": messageId
+		})
+	});
+});
+LabsText.displayName = "LabsText";
+//#endregion
+//#region src/components/LabsTextCurrency.tsx
+const LabsTextCurrency = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(LabsText, {
+		ref,
+		type: "number",
+		step: "0.01",
+		prependIcon: "pi-dollar",
+		...props
+	});
+});
+LabsTextCurrency.displayName = "LabsTextCurrency";
+//#endregion
+//#region src/components/LabsTextSearch.tsx
+const LabsTextSearch = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(LabsText, {
+		ref,
+		type: "search",
+		prependIcon: "pi-search",
+		...props
+	});
+});
+LabsTextSearch.displayName = "LabsTextSearch";
+//#endregion
+//#region src/components/LabsTextarea.tsx
+const LabsTextarea = forwardRef((props, ref) => {
+	const { id, containerId = `${id}-container`, labelId = `${id}-label`, messageId = `${id}-message`, hintId = `${id}-hint`, label, message, hint, animation, solo, floatLabel, prependIcon, appendIcon, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(FieldContainerInput, {
+		id,
+		containerId,
+		labelId,
+		messageId,
+		hintId,
+		label,
+		message,
+		hint,
+		animation,
+		solo,
+		floatLabel,
+		prependIcon,
+		appendIcon,
+		className,
+		children: /* @__PURE__ */ jsx(InputTextarea, {
+			placeholder: solo ? label || rest.placeholder : rest.placeholder,
+			...toFieldInputProps(rest),
+			...toFieldSharedProps(props),
+			id,
+			ref,
+			"aria-describedby": messageId
+		})
+	});
+});
+LabsTextarea.displayName = "LabsTextarea";
+//#endregion
+//#region src/components/LabsToggle.tsx
+const LabsToggle = ({ title, children, ...rest }) => {
+	const [isCollapsed, setIsCollapsed] = useState(true);
+	const handleToggle = useCallback(() => setIsCollapsed(!isCollapsed), [isCollapsed]);
+	const template = (options) => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: clsx(options.className, "gap-4 cursor-pointer items-center"),
+			onClick: options.onTogglerClick,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: clsx(options.titleClassName, "lh-6"),
+				children: options.titleElement
+			}), /* @__PURE__ */ jsx(LabsButton, {
+				label: `Toggle Item`,
+				icon: options.collapsed ? "pi-chevron-down" : "pi-chevron-up",
+				iconOnly: true,
+				className: clsx(options.togglerClassName, "min-w-8"),
+				onClick: options.onTogglerClick
+			})]
+		});
+	};
+	return /* @__PURE__ */ jsx(Panel, {
+		header: title,
+		headerTemplate: template,
+		toggleable: true,
+		collapsed: isCollapsed,
+		onToggle: handleToggle,
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "labs-prose max-w-full",
+			children
+		})
+	});
+};
+//#endregion
+//#region src/hooks/useAnalytics.ts
+const useAnalytics = () => {
+	const context = use(LabsAnalyticsContext);
+	if (!context) throw new Error("useAnalytics must be used within an AnalyticsProvider");
+	return {
+		analytics: context,
+		identifyUser: useCallback((user) => {
+			const currentUserId = user.id;
+			if (currentUserId === context.user().userId) return;
+			context.identify(currentUserId);
+		}, [context]),
+		trackEntity: useCallback((eventName, entityName, entityId, payload) => {
+			const normalizedEventName = [eventName, entityName?.toLocaleLowerCase()].filter(Boolean).join(" ");
+			context.track(normalizedEventName, {
+				Entity: entityName,
+				["Entity ID"]: entityId,
+				...payload
+			});
+		}, [context]),
+		trackPageView: useCallback(() => {
+			context.page();
+		}, [context])
+	};
+};
+//#endregion
+//#region src/hooks/useBreakpoints.ts
+const useBreakpoints = () => {
+	return {
+		isDesktop: useMediaQuery("(min-width: 640px)"),
+		isMobile: useMediaQuery("(max-width: 639px)")
+	};
+};
+//#endregion
+//#region src/layouts/Main.layout.tsx
+const DefaultLoader = () => /* @__PURE__ */ jsx(LabsLoader, { label: "Working..." });
+const LayoutMain = ({ actions, children, loader = /* @__PURE__ */ jsx(DefaultLoader, {}), name, subtitle, navigation, navigationMobile = navigation, renderNavigation, renderNavigationMobile = renderNavigation, desktopNavProps, mobileNavProps }) => {
+	const { isDesktop, isMobile } = useBreakpoints();
+	const { appName } = useLabs();
+	return /* @__PURE__ */ jsxs(LayoutBase, {
+		className: "labs-layout",
+		children: [
+			isDesktop && /* @__PURE__ */ jsx(LabsMainDesktopNav, {
+				...desktopNavProps,
+				items: navigation,
+				renderItem: renderNavigation
+			}),
+			isMobile && /* @__PURE__ */ jsx(LabsMainMobileNav, {
+				...mobileNavProps,
+				items: navigationMobile,
+				renderItem: renderNavigationMobile
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "labs-layout-main",
+				children: [/* @__PURE__ */ jsxs("header", {
+					className: "labs-layout-header",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "labs-layout-header-content",
+						children: [/* @__PURE__ */ jsx("h1", {
+							className: "labs-layout-header-title",
+							children: typeof name === "function" ? name(appName) : name
+						}), /* @__PURE__ */ jsx("h2", {
+							className: "labs-layout-header-subtitle",
+							children: typeof subtitle === "function" ? subtitle(appName) : subtitle
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "labs-layout-header-actions",
+						children: typeof actions === "function" ? actions() : actions
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "labs-layout-main-content",
+					children: /* @__PURE__ */ jsx(Suspense, {
+						fallback: /* @__PURE__ */ jsx("div", {
+							className: "labs-main-center",
+							children: loader
+						}),
+						children
+					})
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/utils/number.ts
+const round = (value, precision) => {
+	const factor = Math.pow(10, precision);
+	return Math.round(value * factor) / factor;
+};
+const toCurrency = (number) => {
+	const parsedNumber = parseFloat(String(number));
+	if (isNaN(parsedNumber)) return number;
+	return round(isFinite(parsedNumber) ? parsedNumber : 0, 2).toFixed(2);
+};
+const toPrecision = (number = 0, precision = 2) => {
+	const parsedNumber = parseFloat(String(number));
+	return round(isFinite(parsedNumber) ? parsedNumber : 0, precision).toFixed(precision);
+};
+//#endregion
+//#region src/utils/reactHookFormHelpers.ts
+const toFieldContainerProps = (fieldState) => ({ message: fieldState.error?.message });
+const toLabsCheckboxProps = ({ field: { ref, value, ...field }, fieldState }) => ({
+	...field,
+	...toFieldContainerProps(fieldState),
+	inputRef: ref,
+	checked: value,
+	onChange: (event) => field.onChange(event.checked ?? false)
+});
+const toLabsDateProps = ({ field: { ref, value, ...field }, fieldState }) => ({
+	...field,
+	...toFieldContainerProps(fieldState),
+	inputRef: ref,
+	value,
+	onChange: (event) => field.onChange(event.value)
+});
+const toLabsMultiSelectProps = ({ field: { ref, value, ...field }, fieldState }) => ({
+	...field,
+	...toFieldContainerProps(fieldState),
+	inputRef: ref,
+	value,
+	onChange: (event) => field.onChange(event.value)
+});
+const toLabsSelectProps = ({ field: { ref, value, ...field }, fieldState }) => ({
+	...field,
+	...toFieldContainerProps(fieldState),
+	inputRef: ref,
+	value,
+	onChange: (event) => field.onChange(event.value)
+});
+const toLabsSelectCascadeProps = ({ field: { ref, value, ...field }, fieldState }) => ({
+	...field,
+	...toFieldContainerProps(fieldState),
+	inputRef: ref,
+	value,
+	onChange: (event) => field.onChange(event.value)
+});
+const toLabsTextProps = ({ field: { ref, value, ...field }, fieldState }) => ({
+	...field,
+	...toFieldContainerProps(fieldState),
+	ref,
+	value
+});
+const toLabsTextCurrencyProps = toLabsTextProps;
+const toLabsTextSearchProps = toLabsTextProps;
+const toLabsTextareaProps = ({ field: { ref, value, ...field }, fieldState }) => ({
+	...field,
+	...toFieldContainerProps(fieldState),
+	ref,
+	value
+});
+//#endregion
+export { DEFAULT_TRANSITION_MS, DEFAULT_TRANSITION_SECONDS, LabsAnalyticsContext, LabsAnalyticsProvider, LabsAuthContext, LabsAuthGate, LabsAuthProvider, LabsButton, LabsCalendar, LabsCalendarBase, LabsCheckbox, LabsContext, LabsCount, LabsDate, LabsEmpty, LabsHeadProvider, LabsLoader, LabsLogoutTimer, LabsMain, LabsMainDesktopNav, LabsMainHeaderActions, LabsMainMobileNav, LabsMenuNav, LabsMultiSelect, LabsPrimeProvider, LabsProvider, LabsSelect, LabsSelectCascade, LabsSpeedDialNav, LabsText, LabsTextCurrency, LabsTextSearch, LabsTextarea, LabsToggle, LayoutBase, LayoutCentered, LayoutMain, VERSION, auth, fadeAnimation, getParsedUserInfo, pluralize, refreshToken, scaleFadeAnimation, scaleFadeSubtleAnimation, slideYFadeAnimation, slideYFadeReverseAnimation, toCurrency, toFieldContainerProps, toLabsCheckboxProps, toLabsDateProps, toLabsMultiSelectProps, toLabsSelectCascadeProps, toLabsSelectProps, toLabsTextCurrencyProps, toLabsTextProps, toLabsTextSearchProps, toLabsTextareaProps, toPrecision, useAnalytics, useAuth, useBreakpoints, useLabs, withAuthHeader };