@veracity/vui-poc 0.1.0

package/dist/index.mjs

@@ -0,0 +1,653 @@
+import { clsx } from "clsx";
+import { createContext, isValidElement, useContext, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button as Button$1, FieldError, Input as Input$1, Label, Link, Text, TextField as TextField$1 } from "react-aria-components";
+//#region src/components/Notification/context.ts
+const NotificationContext = createContext(null);
+/**
+* @param partName Short name of the sub-part (e.g. "Icon", "Dismiss"). Used in
+*   the error message when no parent context is found. The message intentionally
+*   mentions both `<Notification>` and `<BannerNotification>` since the same
+*   parts are re-exported by both components.
+*/
+function useNotificationContext(partName) {
+	const ctx = useContext(NotificationContext);
+	if (!ctx) throw new Error(`<${partName}> must be rendered inside a <Notification> or <BannerNotification>.`);
+	return ctx;
+}
+//#endregion
+//#region src/icons/index.tsx
+function Icon({ children, viewBox = "0 0 20 20", width = "1em", height = "1em", fill = "none", ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width,
+		height,
+		viewBox,
+		fill,
+		"aria-hidden": "true",
+		focusable: "false",
+		...props,
+		children
+	});
+}
+function CheckCircleIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "10",
+			cy: "10",
+			r: "8.25",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M6.5 10.25L9 12.75L13.75 7.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+function WarningTriangleIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M10 2.5L18.5 17.25H1.5L10 2.5Z",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M10 8V11.5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "10",
+				cy: "14.25",
+				r: "0.85",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+function InfoCircleIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "10",
+				cy: "10",
+				r: "8.25",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M10 9V14",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "10",
+				cy: "6.25",
+				r: "0.85",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+function TimesIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		viewBox: "0 0 16 16",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M12 4L4 12M4 4l8 8",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})
+	});
+}
+function ArrowLeftIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		viewBox: "0 0 16 16",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M10 12L6 8l4-4",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function ArrowRightIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		viewBox: "0 0 16 16",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M6 4l4 4-4 4",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/**
+* Indeterminate spinner. Animation is applied via the `vui-spin` class
+* (defined in `styles.css`) rather than inline keyframes so callers can
+* opt out of motion with `prefers-reduced-motion` or scope-level CSS.
+*/
+function SpinnerIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		viewBox: "0 0 20 20",
+		className: ["vui-spin", props.className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "10",
+			cy: "10",
+			r: "7.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			opacity: "0.25"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M17.5 10A7.5 7.5 0 0 0 10 2.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	});
+}
+//#endregion
+//#region src/components/Notification/helpers.tsx
+const alertIntents = new Set(["danger", "warning"]);
+function getNotificationRole(intent) {
+	return alertIntents.has(intent) ? "alert" : "status";
+}
+/** Default icon for a given notification intent. */
+function defaultIconForIntent(intent) {
+	switch (intent) {
+		case "success": return /* @__PURE__ */ jsx(CheckCircleIcon, {
+			width: "24",
+			height: "24"
+		});
+		case "warning":
+		case "danger": return /* @__PURE__ */ jsx(WarningTriangleIcon, {
+			width: "24",
+			height: "24"
+		});
+		default: return /* @__PURE__ */ jsx(InfoCircleIcon, {
+			width: "24",
+			height: "24"
+		});
+	}
+}
+//#endregion
+//#region src/utils/mergeClassNames.ts
+function mergeClassNames(base, user) {
+	return (values) => {
+		const resolved = typeof user === "function" ? user(values) : user;
+		return clsx(values.defaultClassName, base, resolved);
+	};
+}
+//#endregion
+//#region src/components/shared/buttonStyles.ts
+const intentVariantClasses = {
+	brand: {
+		primary: "border-action-brand-solid bg-action-brand-solid text-action-brand-solid-inverse enabled:hover:border-action-brand-solid-hover enabled:hover:bg-action-brand-solid-hover active:border-action-brand-solid-pressed active:bg-action-brand-solid-pressed data-[pressed]:border-action-brand-solid-pressed data-[pressed]:bg-action-brand-solid-pressed data-[active]:border-action-brand-solid-pressed data-[active]:bg-action-brand-solid-pressed",
+		secondary: "border-action-brand-solid bg-transparent text-action-brand-solid enabled:hover:bg-action-brand-subtle-hover active:bg-action-brand-subtle-pressed data-[pressed]:bg-action-brand-subtle-pressed data-[active]:bg-action-brand-subtle-pressed",
+		tertiary: "border-transparent bg-transparent text-action-brand-solid enabled:hover:bg-action-brand-subtle-hover active:bg-action-brand-subtle-pressed data-[pressed]:bg-action-brand-subtle-pressed data-[active]:bg-action-brand-subtle-pressed"
+	},
+	contrast: {
+		primary: "border-action-contrast-solid bg-action-contrast-solid text-action-contrast-solid-inverse enabled:hover:border-action-contrast-solid-hover enabled:hover:bg-action-contrast-solid-hover active:border-action-contrast-solid-pressed active:bg-action-contrast-solid-pressed data-[pressed]:border-action-contrast-solid-pressed data-[pressed]:bg-action-contrast-solid-pressed data-[active]:border-action-contrast-solid-pressed data-[active]:bg-action-contrast-solid-pressed",
+		secondary: "border-action-contrast-solid bg-transparent text-action-contrast-solid enabled:hover:bg-action-contrast-subtle-hover active:bg-action-contrast-subtle-pressed data-[pressed]:bg-action-contrast-subtle-pressed data-[active]:bg-action-contrast-subtle-pressed",
+		tertiary: "border-transparent bg-transparent text-action-contrast-solid enabled:hover:bg-action-contrast-subtle-hover active:bg-action-contrast-subtle-pressed data-[pressed]:bg-action-contrast-subtle-pressed data-[active]:bg-action-contrast-subtle-pressed"
+	},
+	success: {
+		primary: "border-action-success-solid bg-action-success-solid text-action-success-solid-inverse enabled:hover:border-action-success-solid-hover enabled:hover:bg-action-success-solid-hover active:border-action-success-solid-pressed active:bg-action-success-solid-pressed data-[pressed]:border-action-success-solid-pressed data-[pressed]:bg-action-success-solid-pressed data-[active]:border-action-success-solid-pressed data-[active]:bg-action-success-solid-pressed",
+		secondary: "border-action-success-solid bg-transparent text-action-success-solid enabled:hover:bg-action-success-subtle-hover active:bg-action-success-subtle-pressed data-[pressed]:bg-action-success-subtle-pressed data-[active]:bg-action-success-subtle-pressed",
+		tertiary: "border-transparent bg-transparent text-action-success-solid enabled:hover:bg-action-success-subtle-hover active:bg-action-success-subtle-pressed data-[pressed]:bg-action-success-subtle-pressed data-[active]:bg-action-success-subtle-pressed"
+	},
+	danger: {
+		primary: "border-action-danger-solid bg-action-danger-solid text-action-danger-solid-inverse enabled:hover:border-action-danger-solid-hover enabled:hover:bg-action-danger-solid-hover active:border-action-danger-solid-pressed active:bg-action-danger-solid-pressed data-[pressed]:border-action-danger-solid-pressed data-[pressed]:bg-action-danger-solid-pressed data-[active]:border-action-danger-solid-pressed data-[active]:bg-action-danger-solid-pressed",
+		secondary: "border-action-danger-solid bg-transparent text-action-danger-solid enabled:hover:bg-action-danger-subtle-hover active:bg-action-danger-subtle-pressed data-[pressed]:bg-action-danger-subtle-pressed data-[active]:bg-action-danger-subtle-pressed",
+		tertiary: "border-transparent bg-transparent text-action-danger-solid enabled:hover:bg-action-danger-subtle-hover active:bg-action-danger-subtle-pressed data-[pressed]:bg-action-danger-subtle-pressed data-[active]:bg-action-danger-subtle-pressed"
+	}
+};
+const disabledVariantClasses = {
+	primary: "disabled:border-action-disabled-background disabled:bg-action-disabled-background disabled:text-action-disabled-foreground data-[disabled]:border-action-disabled-background data-[disabled]:bg-action-disabled-background data-[disabled]:text-action-disabled-foreground",
+	secondary: "disabled:border-action-disabled-background disabled:bg-transparent disabled:text-action-disabled-foreground data-[disabled]:border-action-disabled-background data-[disabled]:bg-transparent data-[disabled]:text-action-disabled-foreground",
+	tertiary: "disabled:border-transparent disabled:bg-transparent disabled:text-action-disabled-foreground data-[disabled]:border-transparent data-[disabled]:bg-transparent data-[disabled]:text-action-disabled-foreground"
+};
+//#endregion
+//#region src/components/Button/Button.tsx
+const sizeClasses$2 = {
+	sm: "h-6 px-3 py-1 text-xs leading-[1.2]",
+	md: "h-8 px-4 py-[7px] text-sm leading-[1.2]",
+	lg: "h-10 px-4 py-[9px] text-base leading-[1.2]",
+	xl: "h-12 px-4 py-3 text-lg leading-[1.2]"
+};
+function Button(props) {
+	const { intent = "brand", isActive, variant = "primary", size = "lg", className, startIcon, endIcon, children, ...rest } = props;
+	const classes = [
+		"vui-button inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-none border border-solid font-sans font-medium no-underline transition-colors duration-150 ease-in-out",
+		"cursor-pointer select-none outline-none outline-offset-0",
+		"disabled:cursor-not-allowed data-[disabled]:cursor-not-allowed data-[pending]:cursor-progress",
+		sizeClasses$2[size],
+		intentVariantClasses[intent][variant],
+		disabledVariantClasses[variant]
+	].join(" ");
+	const renderContent = (resolvedChildren) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		startIcon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "vui-button__icon inline-flex shrink-0",
+			children: startIcon
+		}) : null,
+		resolvedChildren,
+		endIcon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "vui-button__icon inline-flex shrink-0",
+			children: endIcon
+		}) : null
+	] });
+	const commonProps = {
+		"data-active": isActive || void 0,
+		"data-intent": intent,
+		"data-variant": variant,
+		className: mergeClassNames(classes, className)
+	};
+	function wrapChildren(c) {
+		return typeof c === "function" ? (values) => renderContent(c(values)) : renderContent(c);
+	}
+	if (props.href != null) return /* @__PURE__ */ jsx(Link, {
+		...rest,
+		...commonProps,
+		children: wrapChildren(children)
+	});
+	return /* @__PURE__ */ jsx(Button$1, {
+		...rest,
+		...commonProps,
+		children: wrapChildren(children)
+	});
+}
+//#endregion
+//#region src/utils/warnDev.ts
+const warnedMessages = /* @__PURE__ */ new Set();
+function isDevelopment() {
+	const meta = import.meta;
+	if (typeof meta.env?.DEV === "boolean") return meta.env.DEV;
+	if (typeof process !== "undefined") return process.env?.NODE_ENV !== "production";
+	return false;
+}
+function warnDev(condition, message) {
+	if (!condition || !isDevelopment() || warnedMessages.has(message)) return;
+	warnedMessages.add(message);
+	console.warn(message);
+}
+//#endregion
+//#region src/components/IconButton/IconButton.tsx
+const sizeClasses$1 = {
+	sm: "size-6",
+	md: "size-8",
+	lg: "size-10",
+	xl: "size-12"
+};
+function IconButton(props) {
+	const { intent = "brand", isActive, isElevated, isRound, variant = "primary", size = "lg", className, icon, ...rest } = props;
+	warnDev(!props["aria-label"] && !props["aria-labelledby"], "[vui] IconButton requires an accessible name. Provide `aria-label` or `aria-labelledby`.");
+	const classes = [
+		"vui-icon-button inline-flex items-center justify-center border border-solid font-sans no-underline transition-colors duration-150 ease-in-out",
+		isActive ? "cursor-default" : "cursor-pointer",
+		"select-none outline-none outline-offset-0",
+		"disabled:cursor-not-allowed data-[disabled]:cursor-not-allowed data-[pending]:cursor-progress",
+		isRound ? "rounded-full" : "rounded-none",
+		isElevated ? "shadow-md" : "",
+		sizeClasses$1[size],
+		intentVariantClasses[intent][variant],
+		disabledVariantClasses[variant]
+	].join(" ");
+	const iconContent = /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "vui-icon-button__icon inline-flex",
+		children: icon
+	});
+	if (props.href != null) return /* @__PURE__ */ jsx(Link, {
+		...rest,
+		"data-active": isActive || void 0,
+		"data-intent": intent,
+		className: mergeClassNames(classes, className),
+		children: iconContent
+	});
+	return /* @__PURE__ */ jsx(Button$1, {
+		...rest,
+		"data-active": isActive || void 0,
+		"data-intent": intent,
+		className: mergeClassNames(classes, className),
+		children: iconContent
+	});
+}
+//#endregion
+//#region src/components/IconButton/presets.tsx
+/**
+* Build a preset `IconButton` with a fixed icon and default `aria-label`.
+* Both `variant` and the label remain overridable per call site; only
+* `icon` is locked to the preset's glyph. Used internally to define the
+* `BackButton` / `DismissButton` presets without duplicating prop
+* forwarding and the discriminated-union cast.
+*/
+function createIconPreset(icon, defaultAriaLabel) {
+	return function IconPreset({ variant = "tertiary", "aria-label": ariaLabel = defaultAriaLabel, ...props }) {
+		return /* @__PURE__ */ jsx(IconButton, {
+			variant,
+			"aria-label": ariaLabel,
+			...props,
+			icon
+		});
+	};
+}
+const BackButton = createIconPreset(/* @__PURE__ */ jsx(ArrowLeftIcon, {}), "Go back");
+const DismissButton = createIconPreset(/* @__PURE__ */ jsx(TimesIcon, {}), "Dismiss");
+//#endregion
+//#region src/components/Notification/parts.tsx
+function NotificationIcon({ children, className }) {
+	const { intent, isLoading } = useNotificationContext("Icon");
+	const content = isLoading ? /* @__PURE__ */ jsx(SpinnerIcon, {
+		width: "24",
+		height: "24"
+	}) : children ?? defaultIconForIntent(intent);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: clsx("vui-notification-icon shrink-0", className),
+		children: content
+	});
+}
+function NotificationTitle({ children, className, as: Component = "p" }) {
+	const { size } = useNotificationContext("Title");
+	return /* @__PURE__ */ jsx(Component, {
+		className: clsx("vui-notification-title font-semibold leading-tight", size === "sm" ? "mb-0.5" : "mb-1", className),
+		children
+	});
+}
+function NotificationBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("vui-notification-body leading-normal", className),
+		children
+	});
+}
+function NotificationContent({ children, className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx("vui-notification-content flex min-w-0 flex-1 flex-col", className),
+		children
+	});
+}
+function NotificationAction({ variant = "primary", size: sizeProp, style, className, ...rest }) {
+	const { size: ctxSize } = useNotificationContext("Action");
+	const accentStyle = {
+		backgroundColor: "var(--vui-notification-accent)",
+		borderColor: "var(--vui-notification-accent)",
+		color: "var(--vui-notification-bg)",
+		...style
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		variant,
+		size: sizeProp ?? ctxSize,
+		className: clsx("vui-notification-action", className),
+		style: accentStyle
+	});
+}
+function NotificationActions({ children, className, ...rest }) {
+	const { size } = useNotificationContext("Actions");
+	const marginClass = size === "sm" ? "mt-2" : "mt-3";
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: clsx("vui-notification-actions", marginClass, className),
+		children
+	});
+}
+function NotificationDismiss({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) {
+	const { onClose, align } = useNotificationContext("Dismiss");
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("vui-notification-dismiss-wrap flex items-center", align === "top" ? "-mt-2 -mr-2" : "-mr-2", className),
+		children: /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? "Close",
+			"aria-labelledby": ariaLabelledBy,
+			variant: "tertiary",
+			size: "md",
+			onPress: onClose,
+			className: "vui-notification-dismiss",
+			icon: /* @__PURE__ */ jsx(TimesIcon, {
+				width: "16",
+				height: "16"
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/Notification/Notification.tsx
+/** Discriminates the object-shape `action` from an arbitrary ReactNode. */
+function isActionObject(a) {
+	return typeof a === "object" && a !== null && !isValidElement(a) && "label" in a && "onClick" in a && typeof a.onClick === "function";
+}
+const variantClasses = {
+	inline: "flex w-fit max-w-full gap-4 border p-4",
+	banner: "vui-banner-notification relative flex w-full items-start gap-4 p-4 shadow-[0_10px_20px_rgba(0,0,0,0.15),0_0_1px_rgba(0,0,0,0.05)]"
+};
+/**
+* Size only affects text and action button sizing inside the content slot.
+* Container padding/gap, icon, and dismiss button are intentionally *not*
+* size-aware so all notifications share a consistent shell footprint.
+*/
+const sizeClasses = {
+	md: "",
+	sm: "text-sm"
+};
+function NotificationRoot({ intent = "info", align = "top", size = "md", variant = "inline", isLoading = false, role: roleProp, onClose, className, children, title, body, text, action, icon, showDismissButton = true, ...rest }) {
+	const derivedRole = getNotificationRole(intent);
+	const resolvedRole = roleProp === "none" ? void 0 : roleProp ?? derivedRole;
+	const [internallyDismissed, setInternallyDismissed] = useState(false);
+	if (internallyDismissed) return null;
+	const handleClose = () => {
+		if (onClose) onClose();
+		else setInternallyDismissed(true);
+	};
+	const resolvedBody = body ?? text;
+	const renderedAction = isActionObject(action) ? /* @__PURE__ */ jsx(NotificationAction, {
+		onPress: action.onClick,
+		children: action.label
+	}) : action;
+	return /* @__PURE__ */ jsx(NotificationContext.Provider, {
+		value: {
+			intent,
+			align,
+			size,
+			onClose: handleClose,
+			isLoading
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			role: resolvedRole,
+			"aria-atomic": "true",
+			"data-intent": intent,
+			"data-align": align,
+			"data-size": size,
+			"data-loading": isLoading || void 0,
+			className: clsx("vui-notification", variantClasses[variant], sizeClasses[size], align === "center" ? "items-center" : "items-start", className),
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+				icon === false ? null : /* @__PURE__ */ jsx(NotificationIcon, { children: icon }),
+				(title || resolvedBody) && /* @__PURE__ */ jsxs(NotificationContent, { children: [
+					title ? /* @__PURE__ */ jsx(NotificationTitle, { children: title }) : null,
+					resolvedBody ? /* @__PURE__ */ jsx(NotificationBody, { children: resolvedBody }) : null,
+					renderedAction ? /* @__PURE__ */ jsx(NotificationActions, { children: renderedAction }) : null
+				] }),
+				!title && !resolvedBody && renderedAction ? /* @__PURE__ */ jsx(NotificationActions, { children: renderedAction }) : null,
+				showDismissButton ? /* @__PURE__ */ jsx(NotificationDismiss, {}) : null
+			] })
+		})
+	});
+}
+/**
+* Compound API. Each sub-component reads from `NotificationContext` and is
+* meaningless outside a `<Notification>` (or `<BannerNotification>`) parent.
+*/
+const Notification = Object.assign(NotificationRoot, {
+	Icon: NotificationIcon,
+	Title: NotificationTitle,
+	Body: NotificationBody,
+	Content: NotificationContent,
+	Action: NotificationAction,
+	Actions: NotificationActions,
+	Dismiss: NotificationDismiss
+});
+//#endregion
+//#region src/components/BannerNotification/BannerNotification.tsx
+function BannerNotificationRoot(props) {
+	return /* @__PURE__ */ jsx(Notification, {
+		...props,
+		variant: "banner"
+	});
+}
+const BannerNotification = Object.assign(BannerNotificationRoot, {
+	Icon: Notification.Icon,
+	Title: Notification.Title,
+	Body: Notification.Body,
+	Content: Notification.Content,
+	Actions: Notification.Actions,
+	Dismiss: Notification.Dismiss
+});
+//#endregion
+//#region src/components/Input/context.ts
+const TextFieldContext = createContext(null);
+//#endregion
+//#region src/components/Input/parts.tsx
+function TextFieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label, {
+		...props,
+		className: clsx("vui-text-field-label mb-1 inline-block font-bold", className)
+	});
+}
+function TextFieldInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input$1, {
+		...props,
+		className: mergeClassNames("vui-text-field-input block w-full rounded-none border border-solid bg-control-background-default px-1 outline-none", className)
+	});
+}
+function TextFieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		slot: "description",
+		className: clsx("vui-text-field-description block", className)
+	});
+}
+function TextFieldError({ className, ...props }) {
+	return /* @__PURE__ */ jsx(FieldError, {
+		...props,
+		className: mergeClassNames("vui-text-field-error block", className)
+	});
+}
+function TextFieldCounter({ className }) {
+	const context = useContext(TextFieldContext);
+	if (!context?.showCount) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: clsx("vui-text-field-counter tabular-nums", typeof context.maxLength === "number" && context.count > context.maxLength && "vui-text-field-counter--danger", className),
+		children: [context.count, typeof context.maxLength === "number" ? ` / ${context.maxLength}` : null]
+	});
+}
+/**
+* Decorative icon for an input. Render *inside* `TextField.InputGroup`,
+* either before or after `TextField.Input`.
+*/
+function TextFieldIcon({ position = "start", children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-position": position,
+		className: clsx("vui-text-field-icon pointer-events-none inline-flex shrink-0 items-center justify-center", position === "start" ? "vui-text-field-icon--start" : "vui-text-field-icon--end", className),
+		children
+	});
+}
+/**
+* Wrapper around `TextField.Input` that lays out adjacent
+* `TextField.Icon` siblings in a single row.
+*/
+function TextFieldInputGroup({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("vui-text-field-input-group relative flex w-full items-stretch gap-2", className),
+		children
+	});
+}
+//#endregion
+//#region src/components/Input/TextField.tsx
+function getValueLength(value) {
+	return value == null ? 0 : JSON.stringify(value).length;
+}
+function TextFieldRoot({ className, defaultValue, intent = "brand", maxLength, onChange, showCount = false, size = "lg", value, ...props }) {
+	const isControlled = value !== void 0;
+	const [uncontrolledCount, setUncontrolledCount] = useState(() => getValueLength(defaultValue ?? value));
+	const count = isControlled ? getValueLength(value) : uncontrolledCount;
+	const context = useMemo(() => ({
+		count,
+		intent,
+		maxLength,
+		showCount,
+		size
+	}), [
+		count,
+		intent,
+		maxLength,
+		showCount,
+		size
+	]);
+	return /* @__PURE__ */ jsx(TextFieldContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(TextField$1, {
+			...props,
+			"data-intent": intent,
+			"data-size": size,
+			defaultValue,
+			maxLength,
+			onChange: (nextValue) => {
+				if (!isControlled) setUncontrolledCount(getValueLength(nextValue));
+				onChange?.(nextValue);
+			},
+			value,
+			className: mergeClassNames("vui-text-field grid w-full gap-1 font-sans", className)
+		})
+	});
+}
+const TextField = Object.assign(TextFieldRoot, {
+	Counter: TextFieldCounter,
+	Description: TextFieldDescription,
+	Error: TextFieldError,
+	Icon: TextFieldIcon,
+	Input: TextFieldInput,
+	InputGroup: TextFieldInputGroup,
+	Label: TextFieldLabel
+});
+//#endregion
+//#region src/components/Input/Input.tsx
+function Input({ description, errorMessage, isInvalid, label, placeholder, showCount, ...props }) {
+	warnDev(!Boolean(label || props["aria-label"] || props["aria-labelledby"]), "Input requires an accessible name. Provide label, aria-label, or aria-labelledby.");
+	return /* @__PURE__ */ jsxs(TextField, {
+		...props,
+		isInvalid: isInvalid ?? Boolean(errorMessage),
+		showCount,
+		children: [
+			label ? /* @__PURE__ */ jsx(TextField.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(TextField.Input, { placeholder }),
+			description || errorMessage || showCount ? /* @__PURE__ */ jsxs("div", {
+				className: "vui-text-field-footer",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "vui-text-field-message",
+					children: errorMessage ? /* @__PURE__ */ jsx(TextField.Error, { children: errorMessage }) : description ? /* @__PURE__ */ jsx(TextField.Description, { children: description }) : null
+				}), /* @__PURE__ */ jsx(TextField.Counter, {})]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { ArrowLeftIcon, ArrowRightIcon, BackButton, BannerNotification, Button, CheckCircleIcon, DismissButton, IconButton, InfoCircleIcon, Input, Notification, SpinnerIcon, TextField, TimesIcon, WarningTriangleIcon };