@giddaa-housing/ui 3.5.0 → 3.7.0

package/dist/input.js

@@ -1,28 +1,47 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { useInputComponentSize } from "./input-size-context.js";
+import { responsiveValueClasses } from "./size-context.js";
+import { useInputComponentSizeValue } from "./input-size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-const inputVariants = cva("flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger autofill:border-line autofill:bg-canvas autofill:[-webkit-text-fill-color:var(--color-fg-primary)] autofill:[box-shadow:0_0_0_1000px_var(--color-canvas)_inset]", {
-	variants: { size: {
-		sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
-		md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
-		lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
-		xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
-	} },
+const inputSizeVariants = {
+	sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
+	md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
+	lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
+	xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
+};
+const inputVariants = cva("gdt-input-autofill flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger", {
+	variants: { size: inputSizeVariants },
 	defaultVariants: { size: "md" }
 });
 function Input({ className, size, type, ...props }) {
-	const resolvedSize = useInputComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useInputComponentSizeValue(size), responsiveInputSizes);
 	return /* @__PURE__ */ jsx(Input$1, {
 		type,
 		"data-slot": "input",
-		"data-size": resolvedSize,
-		className: cn(inputVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		"data-size-md": resolvedSize.responsive ? resolvedSize.md : void 0,
+		"data-size-lg": resolvedSize.responsive ? resolvedSize.lg : void 0,
+		className: cn(inputVariants({ size: null }), resolvedSize.className, className),
 		...props
 	});
 }
+const responsiveInputSizes = {
+	base: inputSizeVariants,
+	md: {
+		sm: "md:h-8 md:px-3 md:text-gdt-xs md:file:text-gdt-xs",
+		md: "md:h-10 md:px-3.5 md:text-gdt-sm md:file:text-gdt-sm",
+		lg: "md:h-12 md:px-4 md:text-gdt-md md:file:text-gdt-md",
+		xl: "md:h-14 md:px-4.5 md:text-gdt-lg md:file:text-gdt-lg"
+	},
+	lg: {
+		sm: "lg:h-8 lg:px-3 lg:text-gdt-xs lg:file:text-gdt-xs",
+		md: "lg:h-10 lg:px-3.5 lg:text-gdt-sm lg:file:text-gdt-sm",
+		lg: "lg:h-12 lg:px-4 lg:text-gdt-md lg:file:text-gdt-md",
+		xl: "lg:h-14 lg:px-4.5 lg:text-gdt-lg lg:file:text-gdt-lg"
+	}
+};
 //#endregion
 export { Input, inputVariants };

package/dist/line-chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { Area, AreaChart as AreaChart$1, CartesianGrid, Line, LineChart as LineChart$1, XAxis, YAxis } from "recharts";

package/dist/mask-input.d.ts

@@ -1,4 +1,4 @@
-import { t as Input } from "./input-CfoEJ8A6.js";
+import { Input } from "./input.js";
 import * as React from "react";
 //#region src/mask-input.d.ts
 type MaskToken = {

package/dist/match.d.ts

@@ -1,15 +1,27 @@
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/match.d.ts
 declare const matchVariants: (props?: ({
   variant?: "bar" | "donut" | null | undefined;
+  size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type MatchVariant = NonNullable<VariantProps<typeof matchVariants>["variant"]>;
-type MatchProps = Omit<React.ComponentProps<"button">, "children" | "value"> & VariantProps<typeof matchVariants> & {
+type MatchProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & Omit<VariantProps<typeof matchVariants>, "size"> & {
   value: number;
+  size?: ComponentSizeValue;
   label?: string;
   showChevron?: boolean;
+  /**
+   * Forces the read-only presentation on (`true`) or off (`false`). Left
+   * unset, a `Match` is read-only unless it is given an `onClick` — a score
+   * with nothing behind it should not read as a control.
+   */
+  readOnly?: boolean;
+  disabled?: boolean;
+  type?: "button" | "submit" | "reset";
+  ref?: React.Ref<HTMLElement>;
 };
-declare function Match({ className, value, variant, label, showChevron, type, "aria-label": ariaLabel, ...props }: MatchProps): React.JSX.Element;
+declare function Match({ className, value, variant, size, label, showChevron, readOnly, type, disabled, onClick, ref, "aria-label": ariaLabel, ...props }: MatchProps): React.JSX.Element;
 //#endregion
 export { Match, type MatchProps, type MatchVariant, matchVariants };

package/dist/match.js

@@ -1,67 +1,240 @@
 "use client";
 import { ChevronDown } from "./icons.js";
 import { cn } from "./utils/cn.js";
+import { resolveResponsiveComponentSize, useComponentSizeValue } from "./size-context.js";
 import { CircularProgress } from "./progress.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/match.tsx
-const matchVariants = cva("inline-flex h-8 w-fit shrink-0 items-center rounded-full border border-line-subtle bg-surface text-fg-primary shadow-none transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-60", {
-	variants: { variant: {
-		bar: "gap-2 px-3",
-		donut: "gap-3 pl-2 pr-3"
-	} },
-	defaultVariants: { variant: "bar" }
+const matchVariants = cva("inline-flex w-fit shrink-0 items-center rounded-full border border-line-subtle bg-surface text-fg-primary shadow-none transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-60", {
+	variants: {
+		variant: {
+			bar: "",
+			donut: ""
+		},
+		size: {
+			sm: "h-7 text-gdt-subtext",
+			md: "h-8 text-gdt-xs",
+			lg: "h-10 text-gdt-sm"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "bar",
+			size: "sm",
+			className: "gap-1.5 px-2.5"
+		},
+		{
+			variant: "bar",
+			size: "md",
+			className: "gap-2 px-3"
+		},
+		{
+			variant: "bar",
+			size: "lg",
+			className: "gap-2.5 px-3.5"
+		},
+		{
+			variant: "donut",
+			size: "sm",
+			className: "gap-2 pl-1.5 pr-2.5"
+		},
+		{
+			variant: "donut",
+			size: "md",
+			className: "gap-3 pl-2 pr-3"
+		},
+		{
+			variant: "donut",
+			size: "lg",
+			className: "gap-3.5 pl-2.5 pr-3.5"
+		}
+	],
+	defaultVariants: {
+		variant: "bar",
+		size: "md"
+	}
 });
+const matchDonutSizes = {
+	sm: {
+		pixelSize: 20,
+		strokeWidth: 3
+	},
+	md: {
+		pixelSize: 24,
+		strokeWidth: 4
+	},
+	lg: {
+		pixelSize: 28,
+		strokeWidth: 4
+	}
+};
+const matchBarSizes = {
+	sm: "h-1 w-12",
+	md: "h-1.5 w-15",
+	lg: "h-2 w-18"
+};
+const matchChevronSizes = {
+	sm: "size-2.5",
+	md: "size-3",
+	lg: "size-3.5"
+};
 function normalizeMatchValue(value) {
 	if (!Number.isFinite(value)) return 0;
 	return Math.min(100, Math.max(0, Math.round(value)));
 }
-function Match({ className, value, variant = "bar", label = "Match", showChevron = true, type = "button", "aria-label": ariaLabel, ...props }) {
+function Match({ className, value, variant = "bar", size, label = "Match", showChevron, readOnly, type = "button", disabled, onClick, ref, "aria-label": ariaLabel, ...props }) {
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSizes = resolveResponsiveComponentSize(sizeValue);
+	const responsive = typeof sizeValue !== "string";
+	const resolvedVariant = variant ?? "bar";
 	const progress = normalizeMatchValue(value);
 	const text = `${progress}% ${label}`;
-	return /* @__PURE__ */ jsxs("button", {
-		type,
+	const interactive = readOnly === void 0 ? onClick !== void 0 : !readOnly;
+	const chevron = showChevron ?? interactive;
+	const rootSizeClasses = cn(matchVariants({
+		variant: resolvedVariant,
+		size: resolvedSizes.base
+	}), responsive && matchBreakpointClasses(resolvedVariant, "md", resolvedSizes.md), responsive && matchBreakpointClasses(resolvedVariant, "lg", resolvedSizes.lg));
+	const rootProps = {
 		"aria-label": ariaLabel ?? text,
 		"data-slot": "match",
-		"data-variant": variant,
-		className: cn(matchVariants({ variant }), className),
+		"data-variant": resolvedVariant,
+		"data-size": resolvedSizes.base,
+		"data-size-md": responsive ? resolvedSizes.md : void 0,
+		"data-size-lg": responsive ? resolvedSizes.lg : void 0,
+		className: cn(rootSizeClasses, className)
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		resolvedVariant === "donut" ? /* @__PURE__ */ jsx(MatchDonut, {
+			progress,
+			sizes: resolvedSizes,
+			responsive
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			"data-slot": "match-label",
+			className: "shrink-0 font-bold",
+			children: text
+		}),
+		resolvedVariant === "bar" ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "match-bar-track",
+			className: cn("relative shrink-0 overflow-hidden rounded-full bg-surface-raised", matchBarSizes[resolvedSizes.base], responsive && responsiveClass("md", matchBarSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchBarSizes[resolvedSizes.lg])),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "match-bar-fill",
+				className: "absolute inset-y-0 left-0 rounded-full bg-action-primary",
+				style: { width: `${progress}%` }
+			})
+		}) : null,
+		chevron ? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": "true",
+			"data-slot": "match-chevron",
+			className: cn("shrink-0 text-fg-secondary", matchChevronSizes[resolvedSizes.base], responsive && responsiveClass("md", matchChevronSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchChevronSizes[resolvedSizes.lg]))
+		}) : null
+	] });
+	if (!interactive) return /* @__PURE__ */ jsx("span", {
+		...rootProps,
+		"data-readonly": "true",
+		role: "img",
+		ref,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...rootProps,
+		type,
+		disabled,
+		onClick,
+		ref,
 		...props,
-		children: [
-			variant === "donut" ? /* @__PURE__ */ jsx(CircularProgress, {
-				"aria-hidden": "true",
-				role: "presentation",
-				"data-slot": "match-donut",
-				value: progress,
-				pixelSize: 24,
-				strokeWidth: 4,
-				strokeLinecap: "butt",
-				className: "shrink-0",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "sr-only",
-					children: [progress, "%"]
-				})
-			}) : null,
-			/* @__PURE__ */ jsx("span", {
-				"data-slot": "match-label",
-				className: "shrink-0 text-[10px] font-bold leading-3",
-				children: text
-			}),
-			variant === "bar" ? /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-slot": "match-bar-track",
-				className: "relative h-1.5 w-15 shrink-0 overflow-hidden rounded-full bg-surface-raised",
-				children: /* @__PURE__ */ jsx("span", {
-					"data-slot": "match-bar-fill",
-					className: "absolute inset-y-0 left-0 rounded-full bg-action-primary",
-					style: { width: `${progress}%` }
-				})
-			}) : null,
-			showChevron ? /* @__PURE__ */ jsx(ChevronDown, {
-				"aria-hidden": "true",
-				"data-slot": "match-chevron",
-				className: "size-3 shrink-0 text-fg-secondary"
-			}) : null
-		]
+		children: content
+	});
+}
+const responsiveSizeClasses = {
+	md: {
+		sm: "md:h-7 md:text-gdt-subtext",
+		md: "md:h-8 md:text-gdt-xs",
+		lg: "md:h-10 md:text-gdt-sm"
+	},
+	lg: {
+		sm: "lg:h-7 lg:text-gdt-subtext",
+		md: "lg:h-8 lg:text-gdt-xs",
+		lg: "lg:h-10 lg:text-gdt-sm"
+	}
+};
+const responsiveVariantClasses = {
+	md: {
+		bar: {
+			sm: "md:gap-1.5 md:px-2.5",
+			md: "md:gap-2 md:px-3",
+			lg: "md:gap-2.5 md:px-3.5"
+		},
+		donut: {
+			sm: "md:gap-2 md:pl-1.5 md:pr-2.5",
+			md: "md:gap-3 md:pl-2 md:pr-3",
+			lg: "md:gap-3.5 md:pl-2.5 md:pr-3.5"
+		}
+	},
+	lg: {
+		bar: {
+			sm: "lg:gap-1.5 lg:px-2.5",
+			md: "lg:gap-2 lg:px-3",
+			lg: "lg:gap-2.5 lg:px-3.5"
+		},
+		donut: {
+			sm: "lg:gap-2 lg:pl-1.5 lg:pr-2.5",
+			md: "lg:gap-3 lg:pl-2 lg:pr-3",
+			lg: "lg:gap-3.5 lg:pl-2.5 lg:pr-3.5"
+		}
+	}
+};
+function matchBreakpointClasses(variant, breakpoint, size) {
+	return cn(responsiveSizeClasses[breakpoint][size], responsiveVariantClasses[breakpoint][variant][size]);
+}
+const responsiveTokenClasses = {
+	md: {
+		"h-1 w-12": "md:h-1 md:w-12",
+		"h-1.5 w-15": "md:h-1.5 md:w-15",
+		"h-2 w-18": "md:h-2 md:w-18",
+		"size-2.5": "md:size-2.5",
+		"size-3": "md:size-3",
+		"size-3.5": "md:size-3.5"
+	},
+	lg: {
+		"h-1 w-12": "lg:h-1 lg:w-12",
+		"h-1.5 w-15": "lg:h-1.5 lg:w-15",
+		"h-2 w-18": "lg:h-2 lg:w-18",
+		"size-2.5": "lg:size-2.5",
+		"size-3": "lg:size-3",
+		"size-3.5": "lg:size-3.5"
+	}
+};
+function responsiveClass(breakpoint, className) {
+	return responsiveTokenClasses[breakpoint][className];
+}
+function MatchDonut({ progress, sizes, responsive }) {
+	return (responsive ? [
+		"base",
+		"md",
+		"lg"
+	] : ["base"]).map((breakpoint) => {
+		const size = sizes[breakpoint];
+		const dimensions = matchDonutSizes[size];
+		const visibility = responsive ? breakpoint === "base" ? "md:hidden" : breakpoint === "md" ? "hidden md:grid lg:hidden" : "hidden lg:grid" : "";
+		return /* @__PURE__ */ jsx(CircularProgress, {
+			"aria-hidden": "true",
+			role: "presentation",
+			"data-slot": "match-donut",
+			value: progress,
+			pixelSize: dimensions.pixelSize,
+			strokeWidth: dimensions.strokeWidth,
+			strokeLinecap: "butt",
+			className: cn("shrink-0", visibility),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [progress, "%"]
+			})
+		}, breakpoint);
 	});
 }
 //#endregion

package/dist/media-gallery-hero.js

@@ -9,7 +9,7 @@ import { ReviewBlock } from "./review-block.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/media-gallery-hero.tsx
-const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-[32px] md:h-[380px] md:rounded-[40px] lg:h-[480px]");
+const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-none md:h-[380px] md:rounded-[40px] lg:h-[480px]");
 const mediaGalleryImagesVariants = cva("absolute inset-0 z-0 hidden size-full min-h-0 min-w-0 md:grid", {
 	variants: { imageCount: {
 		1: "",
@@ -53,7 +53,7 @@ function MediaGalleryTile({ className, image, index, isDesktopTile, onMediaClick
 		className: "text-gdt-sm font-medium text-fg-caption-placeholder",
 		children: "Media"
 	}));
-	const tileClassName = cn("relative flex size-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-[32px] bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover", isDesktopTile && "hidden md:flex", className);
+	const tileClassName = cn("relative flex size-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-none bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover", isDesktopTile && "hidden md:flex", className);
 	if (!onMediaClick) return /* @__PURE__ */ jsx("div", {
 		className: tileClassName,
 		"data-slot": "media-gallery-tile",
@@ -71,6 +71,7 @@ function MediaGalleryTile({ className, image, index, isDesktopTile, onMediaClick
 function MobileGalleryCounter({ total }) {
 	const { selectedIndex } = useCarousel();
 	return /* @__PURE__ */ jsx(GalleryIndicator, {
+		className: "h-[35px] lg:h-[45px]",
 		currentPhoto: selectedIndex + 1,
 		size: "sm",
 		totalPhotos: total
@@ -79,17 +80,16 @@ function MobileGalleryCounter({ total }) {
 function MobileMediaCarousel({ currentMedia, images, mediaTotal, onMediaClick, renderMedia, showMobileIndicator }) {
 	const carouselImages = images.length > 0 ? images : [{}];
 	return /* @__PURE__ */ jsxs(Carousel, {
-		className: "absolute inset-0 z-0 block size-full rounded-[32px] md:hidden",
+		className: "absolute inset-0 z-0 block size-full rounded-none md:hidden",
 		imageSize: "full",
 		opts: {
 			align: "start",
-			loop: carouselImages.length > 1,
 			startIndex: Math.max(0, currentMedia - 1)
 		},
 		children: [/* @__PURE__ */ jsx(CarouselContent, { children: carouselImages.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, {
 			className: "h-full",
 			children: /* @__PURE__ */ jsx(MediaGalleryTile, {
-				className: "rounded-[32px]",
+				className: "rounded-none",
 				image,
 				index,
 				onMediaClick,
@@ -148,7 +148,7 @@ function MediaGalleryVideo({ alt = "", autoPlay, className, controls, label = "P
 		children: "Video"
 	}));
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("absolute inset-0 z-0 flex size-full items-center justify-center overflow-hidden rounded-[32px] bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover", className),
+		className: cn("absolute inset-0 z-0 flex size-full items-center justify-center overflow-hidden rounded-none bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover", className),
 		"data-slot": "media-gallery-video",
 		...props,
 		children: [content, controls ? null : /* @__PURE__ */ jsx("button", {
@@ -156,7 +156,7 @@ function MediaGalleryVideo({ alt = "", autoPlay, className, controls, label = "P
 			className: cn(buttonVariants({
 				variant: "glass-overlay",
 				size: "icon-xl"
-			}), "absolute top-1/2 left-1/2 z-10 size-20 -translate-x-1/2 -translate-y-1/2 active:not-aria-[haspopup]:-translate-y-1/2 md:size-24"),
+			}), "absolute top-1/2 left-1/2 z-10 size-[35px] -translate-x-1/2 -translate-y-1/2 active:not-aria-[haspopup]:-translate-y-1/2 lg:size-[45px] [&>svg]:size-4 lg:[&>svg]:size-5"),
 			"data-slot": "media-gallery-video-play",
 			onClick: onPlayClick,
 			type: "button",
@@ -187,6 +187,7 @@ function MediaGalleryIndicator({ "aria-label": ariaLabel, className, label, onCl
 		...props,
 		children: /* @__PURE__ */ jsx(GalleryIndicator, {
 			"aria-hidden": "true",
+			className: "h-[35px] lg:h-[45px]",
 			label: indicatorLabel,
 			size
 		})
@@ -195,6 +196,7 @@ function MediaGalleryIndicator({ "aria-label": ariaLabel, className, label, onCl
 		className: cn("absolute right-4 bottom-4 z-10 hidden md:block", className),
 		"data-slot": "media-gallery-indicator",
 		children: /* @__PURE__ */ jsx(GalleryIndicator, {
+			className: "h-[35px] lg:h-[45px]",
 			label: indicatorLabel,
 			size
 		})

package/dist/media-player.js

@@ -171,7 +171,7 @@ function MediaPlayerRoot({ audio, children, className, onBlurCapture, onFocusCap
 			"data-slot": "media-player",
 			role: "region",
 			tabIndex: 0,
-			className: cn("group/media-player relative isolate block w-full overflow-hidden rounded-2xl bg-fg-primary text-fg-on-brand shadow-2 outline-none", "data-[controls=hidden]:cursor-none", "data-[audio]:bg-[image:var(--gradient-accent-forest-to-brass)]", "data-[fullscreen]:rounded-none data-[fullscreen]:shadow-none", className),
+			className: cn("group/media-player relative isolate block w-full overflow-hidden rounded-2xl bg-fg-primary text-fg-on-brand shadow-2 outline-none [transform:translateZ(0)]", "data-[controls=hidden]:cursor-none", "data-[audio]:bg-[image:var(--gradient-accent-forest-to-brass)]", "data-[fullscreen]:rounded-none data-[fullscreen]:shadow-none", className),
 			...props,
 			onBlurCapture: (event) => {
 				onBlurCapture?.(event);
@@ -264,7 +264,7 @@ function MediaPlayerVideo({ className, ref, ...props }) {
 			setRef(ref, node);
 		}, [ref]),
 		"data-slot": "media-player-video",
-		className: cn("block aspect-video size-full rounded-[inherit] object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
+		className: cn("block aspect-video size-full object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
 		playsInline: true,
 		...props
 	});
@@ -891,7 +891,7 @@ function MediaPlayerError({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "media-player-error",
 		role: "alert",
-		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-[inherit] bg-canvas/85 px-6 text-center text-fg-primary backdrop-blur-sm", className),
+		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 bg-canvas px-6 text-center text-fg-primary", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(TriangleAlert, {

package/dist/mobile-sidebar.js

@@ -27,7 +27,8 @@ function MobileSidebarContent({ className, showCloseButton = false, ...props })
 		side: "right",
 		size: "sm",
 		showCloseButton,
-		className: cn("h-dvh w-[min(100vw,24.375rem)] rounded-none border-y-0 border-r-0 bg-canvas [--sheet-padding-x:1.25rem] [--sheet-padding-top:0.8125rem]", className),
+		popupClassName: "h-dvh w-full max-w-[24.375rem]",
+		className: cn("h-dvh w-full rounded-none border-y-0 border-r-0 bg-canvas [--sheet-padding-x:1.25rem] [--sheet-padding-top:0.8125rem]", className),
 		...props
 	});
 }
@@ -80,7 +81,7 @@ function MobileSidebarNav({ className, ...props }) {
 function MobileSidebarList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "mobile-sidebar-list",
-		className: cn("flex flex-col", className),
+		className: cn("-mx-4 flex flex-col gap-1", className),
 		...props
 	});
 }
@@ -96,7 +97,7 @@ function MobileSidebarLink({ active = false, icon, className, children, render,
 		defaultTagName: "a",
 		props: mergeProps({
 			"aria-current": active ? "page" : void 0,
-			className: cn("group/mobile-sidebar-link grid min-h-11 w-full grid-cols-1 items-center rounded-xl px-2 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand", className),
+			className: cn("group/mobile-sidebar-link grid min-h-11 w-full grid-cols-1 items-center rounded-xl px-4 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand hover:bg-surface-brand-subtle", className),
 			children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("span", {
 				className: cn("grid min-w-0 items-center", icon ? "grid-cols-[1.25rem_minmax(0,1fr)] gap-3" : "grid-cols-1"),
 				children: [icon ? /* @__PURE__ */ jsx("span", {
@@ -126,7 +127,7 @@ function MobileSidebarGroupTrigger({ active = false, icon, className, children,
 	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
 		"data-slot": "mobile-sidebar-group-trigger",
 		"data-active": active || void 0,
-		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-xl px-2 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand", className),
+		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-xl px-4 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand hover:bg-surface-brand-subtle", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: cn("grid min-w-0 items-center", icon ? "grid-cols-[1.25rem_minmax(0,1fr)] gap-3" : "grid-cols-1"),
@@ -153,7 +154,7 @@ function MobileSidebarGroupPanel({ className, ...props }) {
 function MobileSidebarSubList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "mobile-sidebar-sub-list",
-		className: cn("ml-8 flex flex-col pb-1", className),
+		className: cn("ml-8 flex flex-col gap-0.5 pb-2 pt-1", className),
 		...props
 	});
 }
@@ -167,7 +168,7 @@ function MobileSidebarSubheading({ className, ...props }) {
 function MobileSidebarSubLink({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("block rounded-lg px-2 py-1.5 text-gdt-sm font-medium text-fg-secondary outline-none transition-colors hover:bg-surface hover:text-fg-primary focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", className) }, props),
+		props: mergeProps({ className: cn("block rounded-lg px-4 py-1.5 text-gdt-sm font-medium text-fg-secondary outline-none transition-colors hover:bg-surface hover:text-fg-primary focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", className) }, props),
 		render,
 		state: { slot: "mobile-sidebar-sub-link" }
 	});

package/dist/number-input.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { NumberFieldRootProps } from "@base-ui/react/number-field";
 //#region src/number-input.d.ts
@@ -32,7 +32,7 @@ type NumberInputProps = Omit<NumberFieldRootProps, "format"> & {
   format?: Intl.NumberFormatOptions;
   formatPreset?: NumberInputFormatPreset;
   placeholder?: string;
-  size?: ComponentSize;
+  size?: ComponentSizeValue;
   thousandSeparator?: boolean;
 };
 declare function NumberInput({ children, format, formatPreset, placeholder, size, thousandSeparator, ...props }: NumberInputProps): React.JSX.Element;

package/dist/number-input.js

@@ -1,7 +1,7 @@
 "use client";
 import { Minus, Plus } from "./icons.js";
 import { cn } from "./utils/cn.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { SizeProvider, useComponentSize, useComponentSizeValue } from "./size-context.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField } from "@base-ui/react/number-field";
@@ -25,7 +25,7 @@ const numberInputFormatPresets = {
 	plain: { useGrouping: false }
 };
 function NumberInput({ children, format, formatPreset, placeholder, size, thousandSeparator, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = useComponentSizeValue(size);
 	const resolvedFormat = format ?? (formatPreset ? numberInputFormatPresets[formatPreset] : void 0) ?? (thousandSeparator ? numberInputFormatPresets.decimal : void 0);
 	return /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize,

package/dist/pagination.d.ts

@@ -1,4 +1,4 @@
-import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
+import { n as ButtonLink, t as Button } from "./button-BS5KCibF.js";
 import * as React from "react";
 //#region src/pagination.d.ts
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;

package/dist/phone-input.d.ts

@@ -1,21 +1,38 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { CountryCode } from "libphonenumber-js";
 //#region src/phone-input.d.ts
 interface PhoneInputProps {
+  /** Controlled E.164 value, e.g. `"+2348012345678"`. */
   value?: string;
   onChange?: (value: string | undefined) => void;
+  /** Country the field starts on, before anything is typed. */
   defaultCountry?: CountryCode;
-  size?: ComponentSize;
+  size?: ComponentSizeValue;
   disabled?: boolean;
   readOnly?: boolean;
   placeholder?: string;
+  /**
+   * Content pinned to the trailing edge of the field — a validity tick, a
+   * "Verify" button, an extension. It sits outside the number, so it never
+   * shifts as the number is formatted.
+   */
+  rightAddon?: React.ReactNode;
   className?: string;
   id?: string;
   name?: string;
   ref?: React.Ref<HTMLInputElement>;
   "aria-invalid"?: boolean;
 }
-declare function PhoneInput({ value, onChange, defaultCountry, size, disabled, readOnly, placeholder, className, id, name, ref, "aria-invalid": ariaInvalid }: PhoneInputProps): React.JSX.Element;
+/**
+ * A phone field that takes a number written either way round.
+ *
+ * `0801 234 5678` and `+234 801 234 5678` are the same number, and both are
+ * accepted here: typing or pasting a leading `+` switches the field to
+ * international entry and moves the country selector to match, while a plain
+ * national number is read against the selected country, trunk prefix and all.
+ * `onChange` receives E.164 in both cases.
+ */
+declare function PhoneInput({ value, onChange, defaultCountry, size, disabled, readOnly, placeholder, rightAddon, className, id, name, ref, "aria-invalid": ariaInvalid }: PhoneInputProps): React.JSX.Element;
 //#endregion
 export { type CountryCode, PhoneInput, type PhoneInputProps };