@giddaa-housing/ui 3.4.0 → 3.6.0

package/dist/media-gallery-hero.js

@@ -1,14 +1,15 @@
 "use client";
 import { Play } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { buttonVariants } from "./button.js";
 import { Carousel, CarouselContent, CarouselItem, useCarousel } from "./carousel.js";
 import { GalleryIndicator } from "./gallery-indicator.js";
+import { Image } from "./image.js";
 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: "",
@@ -42,7 +43,8 @@ function getMediaKey(image) {
 	return image.id ?? image.src ?? image.alt ?? "placeholder";
 }
 function MediaGalleryTile({ className, image, index, isDesktopTile, onMediaClick, renderMedia }) {
-	const content = renderMedia?.(image, index) ?? (image.src ? /* @__PURE__ */ jsx("img", {
+	const content = renderMedia?.(image, index) ?? (image.src ? /* @__PURE__ */ jsx(Image, {
+		slot: "media-gallery-hero-image",
 		alt: image.alt ?? "",
 		className: "size-full object-cover",
 		draggable: false,
@@ -51,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",
@@ -69,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
@@ -77,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,
@@ -135,7 +137,8 @@ function MediaGalleryVideo({ alt = "", autoPlay, className, controls, label = "P
 		playsInline,
 		poster,
 		src
-	}) : poster ? /* @__PURE__ */ jsx("img", {
+	}) : poster ? /* @__PURE__ */ jsx(Image, {
+		slot: "media-gallery-hero-poster",
 		alt,
 		className: "size-full object-cover",
 		draggable: false,
@@ -145,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", {
@@ -153,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",
@@ -184,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
 		})
@@ -192,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

@@ -1,7 +1,8 @@
 "use client";
 import { Captions, CaptionsOff, Maximize, Minimize, Pause, PictureInPicture2, Play, RefreshCcw, Repeat2, RotateCcw, RotateCw, Settings, TriangleAlert, Volume1, Volume2, VolumeX } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { formatDuration } from "./utils/format.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
@@ -35,15 +36,6 @@ function setRef(ref, value) {
 	}
 	if (ref) ref.current = value;
 }
-function formatTime(value) {
-	if (!Number.isFinite(value)) return "0:00";
-	const safeValue = Math.max(0, Math.floor(value ?? 0));
-	const hours = Math.floor(safeValue / 3600);
-	const minutes = Math.floor(safeValue % 3600 / 60);
-	const seconds = safeValue % 60;
-	if (hours > 0) return `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
-	return `${minutes}:${String(seconds).padStart(2, "0")}`;
-}
 function formatRate(value) {
 	if (!value || value === 1) return "1x";
 	return `${Number.parseFloat(value.toFixed(2))}x`;
@@ -590,7 +582,7 @@ function MediaPlayerTime({ className, showDuration = true, ...props }) {
 		"data-slot": "media-player-time",
 		className: cn("inline-flex shrink-0 items-center px-1 text-gdt-sm font-medium tabular-nums text-fg-on-brand/80", className),
 		...props,
-		children: showDuration ? `${formatTime(currentTime)} / ${formatTime(duration)}` : formatTime(currentTime)
+		children: showDuration ? `${formatDuration(currentTime)} / ${formatDuration(duration)}` : formatDuration(currentTime)
 	});
 }
 function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ariaLabel, step = 5, withTime = true, ...props }) {
@@ -734,7 +726,7 @@ function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ari
 				}) : null,
 				/* @__PURE__ */ jsx("span", {
 					className: cn("px-2.5 py-1 text-gdt-xs font-bold tabular-nums", (previewImage || previewChapter?.text) && "pt-0.5 pb-1.5"),
-					children: formatTime(previewValue)
+					children: formatDuration(previewValue)
 				})
 			]
 		}), portalContainer ?? document.body), /* @__PURE__ */ jsxs(Slider.Control, {
@@ -782,7 +774,7 @@ function MediaPlayerSeek({ className, disabled, onValueChange, "aria-label": ari
 				]
 			}), /* @__PURE__ */ jsx(Slider.Thumb, {
 				getAriaLabel: () => ariaLabel ?? "Media timeline",
-				getAriaValueText: (_formatted, value) => `${formatTime(value)} of ${formatTime(max)}`,
+				getAriaValueText: (_formatted, value) => `${formatDuration(value)} of ${formatDuration(max)}`,
 				className: cn("group/seek-thumb size-[14px] rounded-full outline-none", "transition-[inset-inline-start] duration-200 ease-linear data-[dragging]:transition-none"),
 				children: /* @__PURE__ */ jsx("span", { className: cn("block size-full rounded-full border-2 border-surface-brand bg-surface-overlay shadow-2", "transition-[scale] duration-[var(--duration-motion-press)] ease-gdt-out group-data-[dragging]/seek-thumb:scale-125 motion-reduce:group-data-[dragging]/seek-thumb:scale-100", "group-has-[:focus-visible]/seek-thumb:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]") })
 			})]

package/dist/message.js

@@ -1,6 +1,7 @@
 "use client";
 import { CheckCheck } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
+import { formatTimestamp, toDateTimeAttribute } from "./utils/format.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -13,17 +14,6 @@ function useMessageContext() {
 	if (!context) throw new Error("Message parts must be rendered inside <Message>.");
 	return context;
 }
-function toDateTimeAttribute(value) {
-	return value instanceof Date ? value.toISOString() : value;
-}
-function formatTimestamp(value) {
-	if (typeof value === "string") return value;
-	return value.toLocaleTimeString([], {
-		hour: "2-digit",
-		minute: "2-digit",
-		hour12: false
-	});
-}
 /** Styles the bubble itself — the surface inside `Message`, not `Message`'s root. */
 const messageVariants = cva("relative flex w-fit min-w-0 flex-col shadow-1 *:data-[slot=message-media]:max-w-full", {
 	variants: {

package/dist/mobile-sidebar.js

@@ -1,6 +1,6 @@
 "use client";
 import { ChevronDown, Menu, X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
 import { Sheet, SheetBody, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./sheet.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -27,6 +27,7 @@ function MobileSidebarContent({ className, showCloseButton = false, ...props })
 		side: "right",
 		size: "sm",
 		showCloseButton,
+		popupClassName: "h-dvh w-[min(100vw,24.375rem)]",
 		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),
 		...props
 	});

package/dist/multi-step-form.js

@@ -1,8 +1,8 @@
 "use client";
 import { Check } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { cn } from "./utils/cn.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { useUncontrolled } from "./utils/use-uncontrolled.js";
 import { Progress, ProgressIndicator, ProgressTrack } from "./progress.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";

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 { t as cn } from "./cn-BI_4DMBf.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.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/page-header.js

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/page-header.tsx
 function DashboardHeader({ hideBorder = false, className, ...props }) {

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/pagination.js

@@ -1,5 +1,5 @@
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button, ButtonLink } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/password-input.js

@@ -1,6 +1,6 @@
 "use client";
 import { Eye, EyeOff } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";

package/dist/phone-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 { CountryCode } from "libphonenumber-js";
 //#region src/phone-input.d.ts
@@ -6,7 +6,7 @@ interface PhoneInputProps {
   value?: string;
   onChange?: (value: string | undefined) => void;
   defaultCountry?: CountryCode;
-  size?: ComponentSize;
+  size?: ComponentSizeValue;
   disabled?: boolean;
   readOnly?: boolean;
   placeholder?: string;

package/dist/phone-input.js

@@ -1,21 +1,17 @@
 "use client";
 import { Check, ChevronDown, Search } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.js";
+import { resolveResponsiveComponentSize, useComponentSizeValue } from "./size-context.js";
 import { Separator } from "./separator.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { getPhoneCountries } from "./utils/phone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { AsYouType, getCountries, getCountryCallingCode, parsePhoneNumber } from "libphonenumber-js";
+import { AsYouType, getCountryCallingCode, parsePhoneNumberFromString } from "libphonenumber-js";
 import flags from "react-phone-number-input/flags";
 //#region src/phone-input.tsx
-const regionNames = typeof Intl !== "undefined" && "DisplayNames" in Intl ? new Intl.DisplayNames(["en"], { type: "region" }) : void 0;
-const COUNTRIES = getCountries().map((code) => ({
-	code,
-	name: regionNames?.of(code) ?? code,
-	calling: getCountryCallingCode(code)
-})).sort((a, b) => a.name.localeCompare(b.name));
+const COUNTRIES = getPhoneCountries();
 function getNationalDigits(value) {
 	return value.replace(/\D/g, "");
 }
@@ -29,13 +25,11 @@ function toE164(digits, country) {
 }
 function parseValue(value) {
 	if (!value) return { digits: "" };
-	try {
-		const parsed = parsePhoneNumber(value);
-		if (parsed?.nationalNumber) return {
-			country: parsed.country,
-			digits: parsed.nationalNumber
-		};
-	} catch {}
+	const parsed = parsePhoneNumberFromString(value);
+	if (parsed?.nationalNumber) return {
+		country: parsed.country,
+		digits: parsed.nationalNumber
+	};
 	return { digits: "" };
 }
 const flagSizeVariants = {
@@ -107,7 +101,7 @@ function CountryList({ items, country, onSelect }) {
 						}),
 						/* @__PURE__ */ jsxs("span", {
 							className: "shrink-0 text-fg-secondary",
-							children: ["+", entry.calling]
+							children: ["+", entry.callingCode]
 						}),
 						selected && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-fg-brand" })
 					]
@@ -124,7 +118,7 @@ function CountrySelect({ country, size, disabled, onSelect, finalFocusRef }) {
 		const q = query.trim().toLowerCase();
 		if (!q) return COUNTRIES;
 		const normalized = q.replace(/^\+/, "");
-		return COUNTRIES.filter((entry) => entry.name.toLowerCase().includes(q) || entry.calling.includes(normalized) || entry.code.toLowerCase().includes(q));
+		return COUNTRIES.filter((entry) => entry.name.toLowerCase().includes(q) || entry.callingCode.includes(normalized) || entry.code.toLowerCase().includes(q));
 	}, [query]);
 	function handleOpenChange(next) {
 		setOpen(next);
@@ -174,7 +168,8 @@ function CountrySelect({ country, size, disabled, onSelect, finalFocusRef }) {
 	});
 }
 function PhoneInput({ value, onChange, defaultCountry = "NG", size, disabled = false, readOnly = false, placeholder = "(0000) 000-0000", className, id, name, ref, "aria-invalid": ariaInvalid }) {
-	const resolvedSize = useComponentSize(size);
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSize = resolveResponsiveComponentSize(sizeValue);
 	const inputRef = React.useRef(null);
 	const setInputRef = React.useCallback((node) => {
 		inputRef.current = node;
@@ -207,14 +202,14 @@ function PhoneInput({ value, onChange, defaultCountry = "NG", size, disabled = f
 	}
 	const dividerStateClasses = cn("group-hover/input-group:bg-line-strong", "group-focus-within/input-group:bg-line-focus", "group-has-[[aria-invalid=true]]/input-group:bg-line-danger", "group-has-disabled/input-group:bg-line-subtle");
 	return /* @__PURE__ */ jsxs(InputGroup, {
-		size: resolvedSize,
+		size: sizeValue,
 		className,
 		children: [/* @__PURE__ */ jsxs(InputGroupAddon, {
 			align: "inline-start",
 			className: "gap-2 self-stretch py-0",
 			children: [/* @__PURE__ */ jsx(CountrySelect, {
 				country,
-				size: resolvedSize,
+				size: resolvedSize.base,
 				disabled,
 				onSelect: handleCountrySelect,
 				finalFocusRef: inputRef

package/dist/photo-gallery.js

@@ -1,8 +1,9 @@
 "use client";
 import { ChevronLeft, ChevronRight, Fullscreen, X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
 import { Carousel, CarouselContent, CarouselItem } from "./carousel.js";
+import { Image } from "./image.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Dialog } from "@base-ui/react/dialog";
@@ -60,7 +61,8 @@ function GalleryFrame({ image, fit = "cover", className }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "photo-gallery-frame",
 		className: cn("relative flex size-full items-center justify-center overflow-hidden", className),
-		children: image?.src ? /* @__PURE__ */ jsx("img", {
+		children: image?.src ? /* @__PURE__ */ jsx(Image, {
+			slot: "photo-gallery-image",
 			src: image.src,
 			alt: image.alt ?? "Property image",
 			className: cn(fit === "contain" ? "max-h-full max-w-full rounded-lg object-contain" : "size-full object-cover"),
@@ -168,7 +170,8 @@ function GalleryThumbnails({ images, selectedIndex, onSelect, colsClassName, cla
 				onClick: () => onSelect(index),
 				style: { width: "calc((100% - (var(--gallery-cols) - 1) * var(--gallery-gap)) / var(--gallery-cols))" },
 				className: cn("relative aspect-4/3 shrink-0 overflow-hidden rounded-lg border-2 bg-surface-raised transition-[border-color,opacity] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", isActive ? "border-line-focus" : "border-transparent opacity-80 hover:opacity-100"),
-				children: image.src ? /* @__PURE__ */ jsx("img", {
+				children: image.src ? /* @__PURE__ */ jsx(Image, {
+					slot: "photo-gallery-thumbnail-image",
 					src: image.src,
 					alt: image.alt ?? `Property image ${index + 1}`,
 					className: "size-full object-cover",

package/dist/picker-BTXBrsl4.js

@@ -0,0 +1,62 @@
+import { cn } from "./utils/cn.js";
+import { responsiveValueClasses } from "./size-context.js";
+import { Button } from "./button.js";
+import { useInputComponentSizeValue } from "./input-size-context.js";
+import { PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/lib/picker.tsx
+const pickerTriggerSizeVariants = {
+	sm: "h-8 px-3 text-gdt-xs [&_svg]:size-3.5",
+	md: "h-10 px-3.5 text-gdt-sm [&_svg]:size-4",
+	lg: "h-12 px-4 text-gdt-md [&_svg]:size-4.5",
+	xl: "h-14 px-4.5 text-gdt-lg [&_svg]:size-5"
+};
+const pickerTriggerVariants = cva("flex w-full items-center justify-between rounded-full border transition-[border-color,box-shadow] outline-none", {
+	variants: { size: pickerTriggerSizeVariants },
+	defaultVariants: { size: "md" }
+});
+function PickerTrigger({ icon: Icon, displayValue, placeholder, disabled, open, size, className }) {
+	const resolvedSize = responsiveValueClasses(useInputComponentSizeValue(size), responsivePickerTriggerSizes);
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		disabled,
+		"data-size": resolvedSize.base,
+		className: cn(pickerTriggerVariants({ size: null }), resolvedSize.className, disabled ? "cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder" : open ? "border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus" : "border-line bg-canvas text-fg-primary hover:border-line-strong", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate", !displayValue && "text-fg-caption-placeholder"),
+			children: displayValue || placeholder
+		}), /* @__PURE__ */ jsx(Icon, { className: cn("ml-2 shrink-0", disabled ? "text-fg-caption-placeholder" : "text-fg-secondary") })]
+	});
+}
+const responsivePickerTriggerSizes = {
+	base: pickerTriggerSizeVariants,
+	md: {
+		sm: "md:h-8 md:px-3 md:text-gdt-xs md:[&_svg]:size-3.5",
+		md: "md:h-10 md:px-3.5 md:text-gdt-sm md:[&_svg]:size-4",
+		lg: "md:h-12 md:px-4 md:text-gdt-md md:[&_svg]:size-4.5",
+		xl: "md:h-14 md:px-4.5 md:text-gdt-lg md:[&_svg]:size-5"
+	},
+	lg: {
+		sm: "lg:h-8 lg:px-3 lg:text-gdt-xs lg:[&_svg]:size-3.5",
+		md: "lg:h-10 lg:px-3.5 lg:text-gdt-sm lg:[&_svg]:size-4",
+		lg: "lg:h-12 lg:px-4 lg:text-gdt-md lg:[&_svg]:size-4.5",
+		xl: "lg:h-14 lg:px-4.5 lg:text-gdt-lg lg:[&_svg]:size-5"
+	}
+};
+function PickerFooter({ secondaryLabel, onSecondary, onApply }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between border-t border-line-subtle px-4 py-3",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "tertiary-outline",
+			size: "sm",
+			onClick: onSecondary,
+			children: secondaryLabel
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			onClick: onApply,
+			children: "Apply"
+		})]
+	});
+}
+//#endregion
+export { PickerTrigger as n, PickerFooter as t };

package/dist/picker-j3txxA5t.d.ts

@@ -0,0 +1,14 @@
+import "./input-size-context-BMhves-J.js";
+import { r as PopoverContent } from "./popover-CNymD33m.js";
+import "./icons-C9JXR5Xv.js";
+import * as React from "react";
+//#region src/lib/picker.d.ts
+/**
+ * Where a picker's panel goes. Every one of these is a preference the
+ * positioner is free to overrule when the panel would otherwise overflow —
+ * which is the point, a calendar being tall enough that the room below a
+ * trigger often isn't the room it needs.
+ */
+type PickerPlacementProps = Pick<React.ComponentProps<typeof PopoverContent>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionAvoidance">;
+//#endregion
+export { PickerPlacementProps as t };

package/dist/pie-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 { Pie, PieChart as PieChart$1 } from "recharts";

package/dist/pie-chart.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { ChartContainer } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/popover-CNymD33m.d.ts

@@ -0,0 +1,20 @@
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
+import * as React from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/popover.d.ts
+declare function Popover$1({ ...props }: Popover.Root.Props): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: Popover.Trigger.Props): React.JSX.Element;
+type PopoverContentProps = Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "side" | "sideOffset"> & {
+  showArrow?: boolean;
+  size?: ComponentSize;
+};
+declare function PopoverContent({ className, align, alignOffset, collisionAvoidance, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
+  border?: boolean;
+}): React.JSX.Element;
+declare function PopoverBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: Popover.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: Popover.Description.Props): React.JSX.Element;
+//#endregion
+export { PopoverFooter as a, PopoverTrigger as c, PopoverDescription as i, PopoverBody as n, PopoverHeader as o, PopoverContent as r, PopoverTitle as s, Popover$1 as t };

package/dist/popover.d.ts

@@ -1,20 +1,2 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
-import * as React from "react";
-import { Popover as Popover$1 } from "@base-ui/react/popover";
-//#region src/popover.d.ts
-declare function Popover({ ...props }: Popover$1.Root.Props): React.JSX.Element;
-declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): React.JSX.Element;
-type PopoverContentProps = Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "side" | "sideOffset"> & {
-  showArrow?: boolean;
-  size?: ComponentSize;
-};
-declare function PopoverContent({ className, align, alignOffset, collisionAvoidance, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
-declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
-  border?: boolean;
-}): React.JSX.Element;
-declare function PopoverBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function PopoverFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function PopoverTitle({ className, ...props }: Popover$1.Title.Props): React.JSX.Element;
-declare function PopoverDescription({ className, ...props }: Popover$1.Description.Props): React.JSX.Element;
-//#endregion
+import { a as PopoverFooter, c as PopoverTrigger, i as PopoverDescription, n as PopoverBody, o as PopoverHeader, r as PopoverContent, s as PopoverTitle, t as Popover } from "./popover-CNymD33m.js";
 export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/popover.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";

package/dist/price-tag.d.ts

@@ -85,7 +85,7 @@ type PriceTagProps<TOption extends PriceTagCurrencyOption = PriceTagCurrencyOpti
   monthlyPaymentLabel?: string;
 };
 /**
- * Pill-shaped price display, optionally a trigger for a currency dropdown.
+ * Rounded-box price display, optionally a trigger for a currency dropdown.
  *
  * Display only: it prints `value` and `description` as given and never
  * composes a sentence, picks a format, or decides that a line is too small to