@ecohouse/ui 0.1.54 → 0.1.55

package/dist/index.d.cts

@@ -511,11 +511,12 @@ declare const BRAND_LOGO_COLORS: {
 declare function BrandLogo({ variant, width, height, accessibilityLabel, }: BrandLogoProps): react.JSX.Element;
 
 /** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
-type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"> & {
+type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor" | "labelStyle"> & {
     /** Stable identity for React keys; falls back to `label`. */
     key?: string;
     onPress: () => void;
 };
+type AvatarVariant = "light" | "dark";
 interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
     /** Logged-in user's display name. */
     name: string;
@@ -529,6 +530,8 @@ interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "sty
     disabled?: boolean;
     /** Trailing chevron, typically used to hint a dropdown/menu. */
     showChevron?: boolean;
+    /** Visual treatment. `light` is the translucent header design; `dark` preserves the original solid design. */
+    variant?: AvatarVariant;
     /**
      * Account-menu options, supplied entirely by the consumer (icon, label,
      * action, and per-item colors). When set, pressing the chip opens a
@@ -1358,9 +1361,10 @@ declare const colors: {
     readonly whiteAlpha40: "#FFFFFF66";
     readonly whiteAlpha20: "#FFFFFF33";
     readonly whiteAlpha1: "#FFFFFF03";
+    readonly whiteAlpha5: "#FFFFFF0D";
     readonly whiteAlpha6: "#FFFFFF0F";
+    readonly whiteAlpha7: "#FFFFFF12";
     readonly whiteAlpha10: "#FFFFFF1A";
-    readonly whiteAlpha5: "#FFFFFF0D";
     readonly dark: "#090909";
     readonly red: "#A63E3E";
     readonly lightGrey: "#B7B7B7";
@@ -1679,4 +1683,4 @@ type ResolvePopoverAlignOptions = {
  */
 declare function resolvePopoverAlign({ triggerRect, panelWidth, viewportWidth, padding, preferred, }: ResolvePopoverAlignOptions): PopoverAlign;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AccountHeader, type AccountHeaderProps, ActiveGuestsIcon, AlertTriangleIcon, Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, type AutocompleteInputProps, type AutocompleteOption, Avatar, type AvatarMenuItem, type AvatarProps, AvatarSimple, type AvatarSimpleProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BlockedGuestsIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarFilledIcon, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CloudUploadIcon, CommentCard, type CommentCardProps, ContactInfoCard, type ContactInfoCardProps, CopyIcon, Counter, type CounterProps, CurrentLocationIcon, CutleryIcon, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerVariant, type DateRange, DeactivateIcon, DollarIcon, DownloadIcon, DragHandleIcon, DramIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, FloatingActionButton, type FloatingActionButtonProps, FullscreenIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, IconStatusBadge, type IconStatusBadgeProps, ImageIcon, InfoCardV2, type InfoCardV2Props, InfoCircleIcon, InfoTile, type InfoTileProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherVariant, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MenuLinesIcon, MinusIcon, Modal, type ModalProps, MoonStarsIcon, MoreHorizontalIcon, NavigateIcon, NoPetsIcon, NoReviewIcon, NoSmokingIcon, PaginationDots, type PaginationDotsProps, PawIcon, PhoneIcon, PlusIcon, type PopoverAlign, QrCodeIcon, QuantityInput, type QuantityInputProps, QuietHoursIcon, RadioButton, type RadioButtonProps, type RadioButtonVariant, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, RefreshIcon, RefundStatusIcon, type ResolvePopoverAlignOptions, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, type SidebarItem, type SidebarProps, type SidebarUser, SmartKeyIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StarOutlineIcon, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, StayHomeIcon, StepList, type StepListProps, StepPager, type StepPagerProps, SunIcon, TableViewIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, ToggleRow, type ToggleRowProps, TooltipArrowIcon, TotalGuestsIcon, TrashIcon, UnlockIcon, UserIcon, UsersAltIcon, VerificationCodeInput, type VerificationCodeInputHandle, type VerificationCodeInputProps, VideoIcon, VideoOffIcon, WasherIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AccountHeader, type AccountHeaderProps, ActiveGuestsIcon, AlertTriangleIcon, Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, type AutocompleteInputProps, type AutocompleteOption, Avatar, type AvatarMenuItem, type AvatarProps, AvatarSimple, type AvatarSimpleProps, type AvatarVariant, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BlockedGuestsIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarFilledIcon, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CloudUploadIcon, CommentCard, type CommentCardProps, ContactInfoCard, type ContactInfoCardProps, CopyIcon, Counter, type CounterProps, CurrentLocationIcon, CutleryIcon, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerVariant, type DateRange, DeactivateIcon, DollarIcon, DownloadIcon, DragHandleIcon, DramIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, FloatingActionButton, type FloatingActionButtonProps, FullscreenIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, IconStatusBadge, type IconStatusBadgeProps, ImageIcon, InfoCardV2, type InfoCardV2Props, InfoCircleIcon, InfoTile, type InfoTileProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherVariant, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MenuLinesIcon, MinusIcon, Modal, type ModalProps, MoonStarsIcon, MoreHorizontalIcon, NavigateIcon, NoPetsIcon, NoReviewIcon, NoSmokingIcon, PaginationDots, type PaginationDotsProps, PawIcon, PhoneIcon, PlusIcon, type PopoverAlign, QrCodeIcon, QuantityInput, type QuantityInputProps, QuietHoursIcon, RadioButton, type RadioButtonProps, type RadioButtonVariant, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, RefreshIcon, RefundStatusIcon, type ResolvePopoverAlignOptions, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, type SidebarItem, type SidebarProps, type SidebarUser, SmartKeyIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StarOutlineIcon, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, StayHomeIcon, StepList, type StepListProps, StepPager, type StepPagerProps, SunIcon, TableViewIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, ToggleRow, type ToggleRowProps, TooltipArrowIcon, TotalGuestsIcon, TrashIcon, UnlockIcon, UserIcon, UsersAltIcon, VerificationCodeInput, type VerificationCodeInputHandle, type VerificationCodeInputProps, VideoIcon, VideoOffIcon, WasherIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.d.ts

@@ -511,11 +511,12 @@ declare const BRAND_LOGO_COLORS: {
 declare function BrandLogo({ variant, width, height, accessibilityLabel, }: BrandLogoProps): react.JSX.Element;
 
 /** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
-type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"> & {
+type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor" | "labelStyle"> & {
     /** Stable identity for React keys; falls back to `label`. */
     key?: string;
     onPress: () => void;
 };
+type AvatarVariant = "light" | "dark";
 interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
     /** Logged-in user's display name. */
     name: string;
@@ -529,6 +530,8 @@ interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "sty
     disabled?: boolean;
     /** Trailing chevron, typically used to hint a dropdown/menu. */
     showChevron?: boolean;
+    /** Visual treatment. `light` is the translucent header design; `dark` preserves the original solid design. */
+    variant?: AvatarVariant;
     /**
      * Account-menu options, supplied entirely by the consumer (icon, label,
      * action, and per-item colors). When set, pressing the chip opens a
@@ -1358,9 +1361,10 @@ declare const colors: {
     readonly whiteAlpha40: "#FFFFFF66";
     readonly whiteAlpha20: "#FFFFFF33";
     readonly whiteAlpha1: "#FFFFFF03";
+    readonly whiteAlpha5: "#FFFFFF0D";
     readonly whiteAlpha6: "#FFFFFF0F";
+    readonly whiteAlpha7: "#FFFFFF12";
     readonly whiteAlpha10: "#FFFFFF1A";
-    readonly whiteAlpha5: "#FFFFFF0D";
     readonly dark: "#090909";
     readonly red: "#A63E3E";
     readonly lightGrey: "#B7B7B7";
@@ -1679,4 +1683,4 @@ type ResolvePopoverAlignOptions = {
  */
 declare function resolvePopoverAlign({ triggerRect, panelWidth, viewportWidth, padding, preferred, }: ResolvePopoverAlignOptions): PopoverAlign;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AccountHeader, type AccountHeaderProps, ActiveGuestsIcon, AlertTriangleIcon, Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, type AutocompleteInputProps, type AutocompleteOption, Avatar, type AvatarMenuItem, type AvatarProps, AvatarSimple, type AvatarSimpleProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BlockedGuestsIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarFilledIcon, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CloudUploadIcon, CommentCard, type CommentCardProps, ContactInfoCard, type ContactInfoCardProps, CopyIcon, Counter, type CounterProps, CurrentLocationIcon, CutleryIcon, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerVariant, type DateRange, DeactivateIcon, DollarIcon, DownloadIcon, DragHandleIcon, DramIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, FloatingActionButton, type FloatingActionButtonProps, FullscreenIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, IconStatusBadge, type IconStatusBadgeProps, ImageIcon, InfoCardV2, type InfoCardV2Props, InfoCircleIcon, InfoTile, type InfoTileProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherVariant, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MenuLinesIcon, MinusIcon, Modal, type ModalProps, MoonStarsIcon, MoreHorizontalIcon, NavigateIcon, NoPetsIcon, NoReviewIcon, NoSmokingIcon, PaginationDots, type PaginationDotsProps, PawIcon, PhoneIcon, PlusIcon, type PopoverAlign, QrCodeIcon, QuantityInput, type QuantityInputProps, QuietHoursIcon, RadioButton, type RadioButtonProps, type RadioButtonVariant, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, RefreshIcon, RefundStatusIcon, type ResolvePopoverAlignOptions, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, type SidebarItem, type SidebarProps, type SidebarUser, SmartKeyIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StarOutlineIcon, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, StayHomeIcon, StepList, type StepListProps, StepPager, type StepPagerProps, SunIcon, TableViewIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, ToggleRow, type ToggleRowProps, TooltipArrowIcon, TotalGuestsIcon, TrashIcon, UnlockIcon, UserIcon, UsersAltIcon, VerificationCodeInput, type VerificationCodeInputHandle, type VerificationCodeInputProps, VideoIcon, VideoOffIcon, WasherIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AccountHeader, type AccountHeaderProps, ActiveGuestsIcon, AlertTriangleIcon, Amenity, AmenityIcon, type AmenityIconProps, type AmenityName, type AmenityProps, type AmenityVariant, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, type AutocompleteInputProps, type AutocompleteOption, Avatar, type AvatarMenuItem, type AvatarProps, AvatarSimple, type AvatarSimpleProps, type AvatarVariant, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BlockedGuestsIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarFilledIcon, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CloudUploadIcon, CommentCard, type CommentCardProps, ContactInfoCard, type ContactInfoCardProps, CopyIcon, Counter, type CounterProps, CurrentLocationIcon, CutleryIcon, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerVariant, type DateRange, DeactivateIcon, DollarIcon, DownloadIcon, DragHandleIcon, DramIcon, Drawer, type DrawerProps, EditIcon, ExternalLinkIcon, EyeIcon, FacebookIcon, FavoritesButton, type FavoritesButtonProps, FiltersIcon, FloatingActionButton, type FloatingActionButtonProps, FullscreenIcon, GlobeIcon, GooglePlayIcon, type GreyStep, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, IconStatusBadge, type IconStatusBadgeProps, ImageIcon, InfoCardV2, type InfoCardV2Props, InfoCircleIcon, InfoTile, type InfoTileProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type LanguageSwitcherVariant, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MenuLinesIcon, MinusIcon, Modal, type ModalProps, MoonStarsIcon, MoreHorizontalIcon, NavigateIcon, NoPetsIcon, NoReviewIcon, NoSmokingIcon, PaginationDots, type PaginationDotsProps, PawIcon, PhoneIcon, PlusIcon, type PopoverAlign, QrCodeIcon, QuantityInput, type QuantityInputProps, QuietHoursIcon, RadioButton, type RadioButtonProps, type RadioButtonVariant, Range, type RangeProps, type RangeValue, RatingInput, type RatingInputProps, RatingStarIcon, RefreshIcon, RefundStatusIcon, type ResolvePopoverAlignOptions, SaveHeartIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, type SidebarItem, type SidebarProps, type SidebarUser, SmartKeyIcon, SortIcon, StarFilledIcon, StarIcon, type StarIconProps, StarOutlineIcon, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, StayHomeIcon, StepList, type StepListProps, StepPager, type StepPagerProps, SunIcon, TableViewIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, ToggleRow, type ToggleRowProps, TooltipArrowIcon, TotalGuestsIcon, TrashIcon, UnlockIcon, UserIcon, UsersAltIcon, VerificationCodeInput, type VerificationCodeInputHandle, type VerificationCodeInputProps, VideoIcon, VideoOffIcon, WasherIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.js

@@ -28535,9 +28535,10 @@ var colors = {
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
   whiteAlpha1: "#FFFFFF03",
+  whiteAlpha5: "#FFFFFF0D",
   whiteAlpha6: "#FFFFFF0F",
+  whiteAlpha7: "#FFFFFF12",
   whiteAlpha10: "#FFFFFF1A",
-  whiteAlpha5: "#FFFFFF0D",
   dark: "#090909",
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
@@ -31295,10 +31296,19 @@ function BrandLogo({
   );
 }
 var IMAGE_SIZE = 48;
+var CONTAINER_HEIGHT = 56;
 var CONTAINER_RADIUS = 71;
 var CHEVRON_SIZE = 20;
 var FALLBACK_ICON_SIZE = 20;
 var MENU_RADIUS = 16;
+var triggerWebBlurStyle = Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
+var menuWebBlurStyle = Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
 var Avatar = forwardRef(function Avatar2({
   name,
   email,
@@ -31306,6 +31316,7 @@ var Avatar = forwardRef(function Avatar2({
   onPress,
   disabled = false,
   showChevron = true,
+  variant = "light",
   menuItems,
   open: openProp,
   defaultOpen = false,
@@ -31327,6 +31338,7 @@ var Avatar = forwardRef(function Avatar2({
   const isOpenControlled = typeof openProp === "boolean";
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const isOpen = hasMenu && (isOpenControlled ? openProp : uncontrolledOpen);
+  const isLightVariant = variant === "light";
   useApplyWebClassName(containerRef, className);
   const setOpen = useCallback(
     (next) => {
@@ -31396,7 +31408,13 @@ var Avatar = forwardRef(function Avatar2({
         accessibilityRole: isInteractive ? "button" : void 0,
         accessibilityLabel: resolvedAccessibilityLabel,
         accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
-        style: [styles6.root, disabled && styles6.disabled, style],
+        style: [
+          styles6.root,
+          isLightVariant ? styles6.rootLight : styles6.rootDark,
+          isLightVariant && triggerWebBlurStyle,
+          disabled && styles6.disabled,
+          style
+        ],
         children: [
           /* @__PURE__ */ jsx(View, { style: styles6.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
             Image,
@@ -31405,30 +31423,71 @@ var Avatar = forwardRef(function Avatar2({
               style: styles6.image,
               onError: () => setImageFailed(true)
             }
-          ) : /* @__PURE__ */ jsx(View, { style: styles6.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
+          ) : /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles6.imageFallback,
+                isLightVariant ? styles6.imageFallbackLight : styles6.imageFallbackDark
+              ],
+              children: /* @__PURE__ */ jsx(
+                UserIcon,
+                {
+                  size: FALLBACK_ICON_SIZE,
+                  color: isLightVariant ? colors.white : colors.primary
+                }
+              )
+            }
+          ) }),
           /* @__PURE__ */ jsxs(View, { style: styles6.textColumn, children: [
             /* @__PURE__ */ jsx(Text, { style: styles6.name, numberOfLines: 1, children: name }),
-            email ? /* @__PURE__ */ jsx(Text, { style: styles6.email, numberOfLines: 1, children: email }) : null
+            email ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [styles6.email, isLightVariant ? styles6.emailLight : styles6.emailDark],
+                numberOfLines: 1,
+                children: email
+              }
+            ) : null
           ] }),
-          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles6.chevronSlot, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
+          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles6.chevronSlot, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              size: CHEVRON_SIZE,
+              color: isLightVariant ? colors.white : isOpen ? colors.primary : colors.grey100
+            }
+          ) }) : null
         ]
       }
     ),
-    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles6.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
-      const itemKey = item.key ?? item.label;
-      return /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          icon: item.icon,
-          label: item.label,
-          disabled: item.disabled,
-          backgroundColor: item.backgroundColor,
-          hoverColor: item.hoverColor,
-          onPress: () => handleItemPress(item)
-        },
-        itemKey
-      );
-    }) }) : null
+    hasMenu && isOpen ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles6.menu,
+          isLightVariant ? styles6.menuLight : styles6.menuDark,
+          isLightVariant && menuWebBlurStyle,
+          menuWidth != null && { right: void 0, width: menuWidth }
+        ],
+        children: resolvedMenuItems.map((item) => {
+          const itemKey = item.key ?? item.label;
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: item.icon,
+              label: item.label,
+              disabled: item.disabled,
+              backgroundColor: item.backgroundColor,
+              hoverColor: item.hoverColor ?? (isLightVariant ? colors.whiteAlpha7 : void 0),
+              labelStyle: item.labelStyle,
+              onPress: () => handleItemPress(item),
+              style: isLightVariant ? item.backgroundColor ? styles6.emphasizedMenuItem : styles6.menuItem : void 0
+            },
+            itemKey
+          );
+        })
+      }
+    ) : null
   ] });
 });
 var styles6 = StyleSheet.create({
@@ -31440,6 +31499,7 @@ var styles6 = StyleSheet.create({
     zIndex: 20
   },
   root: {
+    height: CONTAINER_HEIGHT,
     flexDirection: "row",
     alignItems: "center",
     alignSelf: "flex-start",
@@ -31448,7 +31508,12 @@ var styles6 = StyleSheet.create({
     paddingBottom: 4,
     paddingLeft: 4,
     paddingRight: 12,
-    borderRadius: CONTAINER_RADIUS,
+    borderRadius: CONTAINER_RADIUS
+  },
+  rootLight: {
+    backgroundColor: colors.whiteAlpha5
+  },
+  rootDark: {
     backgroundColor: colors.grey700
   },
   disabled: {
@@ -31469,7 +31534,15 @@ var styles6 = StyleSheet.create({
     width: IMAGE_SIZE,
     height: IMAGE_SIZE,
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "center"
+  },
+  imageFallbackLight: {
+    borderRadius: IMAGE_SIZE / 2,
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10
+  },
+  imageFallbackDark: {
     backgroundColor: colors.grey600
   },
   textColumn: {
@@ -31482,7 +31555,12 @@ var styles6 = StyleSheet.create({
     color: colors.white
   },
   email: {
-    ...avatarTypography.email,
+    ...avatarTypography.email
+  },
+  emailLight: {
+    color: colors.whiteAlpha60
+  },
+  emailDark: {
     color: colors.grey0
   },
   chevronSlot: {
@@ -31504,7 +31582,15 @@ var styles6 = StyleSheet.create({
     zIndex: 10,
     borderRadius: MENU_RADIUS,
     padding: 8,
-    gap: 8,
+    gap: 8
+  },
+  menuLight: {
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: colors.whiteAlpha5,
+    overflow: "hidden"
+  },
+  menuDark: {
     backgroundColor: colors.grey700,
     ...Platform.select({
       web: {
@@ -31514,6 +31600,16 @@ var styles6 = StyleSheet.create({
         elevation: 8
       }
     })
+  },
+  menuItem: {
+    height: 32,
+    minHeight: 32,
+    paddingVertical: 6
+  },
+  emphasizedMenuItem: {
+    height: 46,
+    minHeight: 46,
+    paddingVertical: 11
   }
 });
 var IMAGE_SIZE2 = 32;
@@ -33523,6 +33619,7 @@ var defaultLanguageOptions = [
 ];
 var CONTROL_WIDTH = 96;
 var CONTROL_HEIGHT = 35;
+var MENU_WIDTH = 90;
 var ICON_SIZE9 = 16;
 var ICON_BUTTON_SIZE2 = 32;
 var ICON_MENU_WIDTH = 67;
@@ -33530,6 +33627,10 @@ var ICON_MENU_HEIGHT = 129;
 var ICON_MENU_TOP = 39;
 var ITEM_HEIGHT = 35;
 var ACTIVE_ITEM_BACKGROUND = "#E38E5E12";
+var menuWebBlurStyle2 = Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
 var LanguageSwitcher = forwardRef(
   function LanguageSwitcher2({
     options = defaultLanguageOptions,
@@ -33634,7 +33735,7 @@ var LanguageSwitcher = forwardRef(
               onHoverOut: () => setTriggerHovered(false),
               style: ({ pressed }) => [
                 isIconVariant ? styles22.triggerIcon : styles22.trigger,
-                !isIconVariant && (triggerHovered || pressed || isOpen) && styles22.triggerActive
+                !isIconVariant && (triggerHovered || pressed) && styles22.triggerActive
               ],
               children: [
                 /* @__PURE__ */ jsx(GlobeIcon, { size: ICON_SIZE9, color: colors.white, strokeWidth: isIconVariant ? 1.5 : 2 }),
@@ -33648,7 +33749,11 @@ var LanguageSwitcher = forwardRef(
           isOpen && options.length > 0 ? /* @__PURE__ */ jsx(
             View,
             {
-              style: [styles22.menu, isIconVariant ? styles22.menuIcon : styles22.menuDefault],
+              style: [
+                styles22.menu,
+                !isIconVariant && menuWebBlurStyle2,
+                isIconVariant ? styles22.menuIcon : styles22.menuDefault
+              ],
               accessibilityRole: "menu",
               children: options.map((option) => {
                 const selected = option.value === selectedValue;
@@ -33663,15 +33768,15 @@ var LanguageSwitcher = forwardRef(
                     onHoverOut: () => setHoveredValue(null),
                     style: ({ pressed }) => [
                       styles22.item,
-                      isIconVariant ? styles22.itemIcon : null,
+                      isIconVariant ? styles22.itemIcon : styles22.itemDefault,
                       selected ? isIconVariant ? styles22.itemSelectedIcon : styles22.itemSelected : (hoveredValue === option.value || pressed) && styles22.itemHovered
                     ],
-                    children: /* @__PURE__ */ jsx(
+                    children: ({ pressed }) => /* @__PURE__ */ jsx(
                       Text,
                       {
                         style: [
                           styles22.itemLabel,
-                          selected && (isIconVariant ? styles22.itemLabelSelectedIcon : styles22.itemLabelSelected)
+                          (selected || hoveredValue === option.value || pressed) && styles22.itemLabelActive
                         ],
                         children: option.label
                       }
@@ -33756,10 +33861,14 @@ var styles22 = StyleSheet.create({
   },
   menuDefault: {
     top: CONTROL_HEIGHT + 8,
-    left: 0,
-    width: CONTROL_WIDTH,
-    gap: 8,
-    backgroundColor: colors.whiteAlpha6
+    left: (CONTROL_WIDTH - MENU_WIDTH) / 2,
+    width: MENU_WIDTH,
+    height: 129,
+    gap: 4,
+    backgroundColor: colors.whiteAlpha5,
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    borderRadius: 16
   },
   menuIcon: {
     top: ICON_MENU_TOP,
@@ -33787,11 +33896,15 @@ var styles22 = StyleSheet.create({
     width: 51,
     alignSelf: "stretch"
   },
+  itemDefault: {
+    width: 74,
+    alignSelf: "center"
+  },
   itemHovered: {
-    backgroundColor: colors.whiteAlpha6
+    backgroundColor: colors.whiteAlpha7
   },
   itemSelected: {
-    backgroundColor: colors.whiteAlpha6
+    backgroundColor: colors.whiteAlpha7
   },
   itemSelectedIcon: {
     backgroundColor: ACTIVE_ITEM_BACKGROUND
@@ -33799,13 +33912,10 @@ var styles22 = StyleSheet.create({
   itemLabel: {
     ...languageSwitcherTypography,
     ...Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
-    color: colors.white
-  },
-  itemLabelSelected: {
-    color: colors.primary
+    color: colors.whiteAlpha60
   },
-  itemLabelSelectedIcon: {
-    color: colors.primary
+  itemLabelActive: {
+    color: colors.white
   }
 });
 var ICON_SIZE10 = 25.63181;