design-zystem 1.0.442 → 1.0.444

package/dist/ui/index.d.mts

@@ -2055,35 +2055,42 @@ interface DatePickerProps {
 declare const DatePicker: ({ mode, value, onChange, startDate, endDate, onRangeChange, showPresets, presets, placeholder, disabled, minDate, maxDate, width, align, className, }: DatePickerProps) => react.JSX.Element;
 
 declare const ZONE_POSITIONS: {
-    readonly front: readonly [60, 8];
-    readonly hood: readonly [60, 40];
-    readonly windshield: readonly [60, 72];
-    readonly roof: readonly [60, 120];
-    readonly trunk: readonly [60, 190];
-    readonly rear: readonly [60, 212];
-    readonly frontLeftCorner: readonly [26, 20];
-    readonly frontRightCorner: readonly [94, 20];
-    readonly frontLeftWheel: readonly [14, 50];
-    readonly frontRightWheel: readonly [106, 50];
-    readonly frontLeftSide: readonly [18, 92];
-    readonly frontRightSide: readonly [102, 92];
-    readonly rearLeftSide: readonly [18, 132];
-    readonly rearRightSide: readonly [102, 132];
-    readonly rearLeftWheel: readonly [14, 166];
-    readonly rearRightWheel: readonly [106, 166];
-    readonly rearLeftCorner: readonly [26, 200];
-    readonly rearRightCorner: readonly [94, 200];
+    readonly front: readonly [32, 70];
+    readonly hood: readonly [62, 70];
+    readonly windshield: readonly [86, 70];
+    readonly roof: readonly [128, 70];
+    readonly trunk: readonly [188, 70];
+    readonly rear: readonly [208, 70];
+    readonly frontRightCorner: readonly [44, 36];
+    readonly frontLeftCorner: readonly [44, 104];
+    readonly frontRightWheel: readonly [66, 25];
+    readonly frontLeftWheel: readonly [66, 115];
+    readonly frontRightSide: readonly [104, 31];
+    readonly frontLeftSide: readonly [104, 109];
+    readonly rearRightSide: readonly [146, 31];
+    readonly rearLeftSide: readonly [146, 109];
+    readonly rearRightWheel: readonly [174, 25];
+    readonly rearLeftWheel: readonly [174, 115];
+    readonly rearRightCorner: readonly [196, 36];
+    readonly rearLeftCorner: readonly [196, 104];
 };
 type VehicleDamageZone = keyof typeof ZONE_POSITIONS;
 declare const VEHICLE_DAMAGE_ZONES: VehicleDamageZone[];
 interface VehicleDamageMark {
     zone: VehicleDamageZone;
-    count?: number;
+    content?: string;
     label?: string;
-    tone?: 'danger' | 'warning';
+    tone?: 'danger' | 'warning' | 'neutral';
+}
+interface VehicleDamageMapSideLabels {
+    front: string;
+    rear: string;
+    left: string;
+    right: string;
 }
 interface VehicleDamageMapProps extends HTMLAttributes<HTMLDivElement> {
     marks: VehicleDamageMark[];
+    sideLabels?: VehicleDamageMapSideLabels;
     selectedZone?: VehicleDamageZone | null;
     onZoneClick?: (zone: VehicleDamageZone) => void;
     width?: number;
@@ -2346,4 +2353,4 @@ interface TourTargetProps {
 declare const TourTarget: ({ id, children }: TourTargetProps) => react.JSX.Element;
 declare const Tour: ({ steps, open, step, onStepChange, onClose, labels, targetTimeout, }: TourProps) => null;
 
-export { type ActivityFeedItem, ActivityFeedPanel, type ActivityFeedPanelProps, Attachment, type AttachmentProps, type AttachmentStatus, AudioPlayer, type AudioPlayerProps, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerJustify, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, ColorTokenPicker, type ColorTokenPickerProps, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FAB_EDGE_MARGIN, FAB_SIZE, FilePicker, type FilePickerProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, type FloatingSafeArea, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, type HeaderCheckState, type HexColor, HistoryButton, type HistoryButtonProps, type HistoryChange, HistoryDrawer, type HistoryDrawerProps, type HistoryEntry, type HistoryFilter, HistoryList, type HistoryListProps, Icon, IconBadge, type IconBadgeProps, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, IconTooltip, type IconTooltipProps, type IconVariant, Image, type ImageProps, InfoTooltip, type InfoTooltipProps, type InfoTooltipVariant, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Message, MessageDateSeparator, type MessageDateSeparatorProps, type MessageProps, MessageScroller, type MessageScrollerProps, type MessageSeparatorTone, type MessageVariant, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressMarker, type ProgressSegment, Radio, type RadioOption, type RadioProps, type RowId, type RowSelection, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectBubbleOption, type SelectGroup, type SelectItem, type SelectOption, type SelectProps, Sidebar, SidebarActionCard, type SidebarActionCardProps, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuSearchInput, type SidebarMenuSearchInputProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarSupportInfo, type SidebarSupportInfoProps, SidebarTrigger, type SidebarTriggerProps, SidebarUserMenu, type SidebarUserMenuAction, type SidebarUserMenuLeafAction, type SidebarUserMenuProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, TOUR_TARGET_ATTRIBUTE, type TabItem, Table, type TableAction, TableActionsCell, type TableActionsCellProps, type TableAlertAction, TableAlertRow, type TableAlertRowProps, type TableAlertTone, TableCell, type TableCellProps, type TableCellTheme, TableClientCell, type TableClientCellProps, type TableColumnsAlign, type TableEmptyState, TableExpandedRow, type TableExpandedRowProps, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, TablePersonCell, type TablePersonCellProps, type TableProps, TableRow, type TableRowProps, TableSectionRow, type TableSectionRowProps, TableSelectCell, type TableSelectCellProps, TableSelectHeaderCell, type TableSelectHeaderCellProps, type TableSelection, TableStatusCell, type TableStatusCellProps, TableSubgroupRow, type TableSubgroupRowProps, type TableToolbarProps, type TableToolbarSearch, type TableToolbarStatusFilter, type TableVariant, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagLevelItem, TagLevelPicker, type TagLevelPickerProps, type TagLevelPickerSize, type TagOption, type TagSearchOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, type TextareaVariant, Tile, type TileProps, type TileVariant, Timeline, type TimelineItem, type TimelineProps, type ToastId, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, Tour, type TourCloseReason, type TourLabels, type TourPlacement, type TourProps, type TourStep, TourTarget, type TourTargetProps, type UseRowSelectionOptions, VEHICLE_DAMAGE_ZONES, VehicleDamageMap, type VehicleDamageMapProps, type VehicleDamageMark, type VehicleDamageZone, VideoPlayer, type VideoPlayerProps, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, buttonGroupVariants, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVideoDuration, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, linkVariants, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize, useRowSelection };
+export { type ActivityFeedItem, ActivityFeedPanel, type ActivityFeedPanelProps, Attachment, type AttachmentProps, type AttachmentStatus, AudioPlayer, type AudioPlayerProps, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerJustify, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, ColorTokenPicker, type ColorTokenPickerProps, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FAB_EDGE_MARGIN, FAB_SIZE, FilePicker, type FilePickerProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, type FloatingSafeArea, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, type HeaderCheckState, type HexColor, HistoryButton, type HistoryButtonProps, type HistoryChange, HistoryDrawer, type HistoryDrawerProps, type HistoryEntry, type HistoryFilter, HistoryList, type HistoryListProps, Icon, IconBadge, type IconBadgeProps, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, IconTooltip, type IconTooltipProps, type IconVariant, Image, type ImageProps, InfoTooltip, type InfoTooltipProps, type InfoTooltipVariant, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Message, MessageDateSeparator, type MessageDateSeparatorProps, type MessageProps, MessageScroller, type MessageScrollerProps, type MessageSeparatorTone, type MessageVariant, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressMarker, type ProgressSegment, Radio, type RadioOption, type RadioProps, type RowId, type RowSelection, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectBubbleOption, type SelectGroup, type SelectItem, type SelectOption, type SelectProps, Sidebar, SidebarActionCard, type SidebarActionCardProps, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuSearchInput, type SidebarMenuSearchInputProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarSupportInfo, type SidebarSupportInfoProps, SidebarTrigger, type SidebarTriggerProps, SidebarUserMenu, type SidebarUserMenuAction, type SidebarUserMenuLeafAction, type SidebarUserMenuProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, TOUR_TARGET_ATTRIBUTE, type TabItem, Table, type TableAction, TableActionsCell, type TableActionsCellProps, type TableAlertAction, TableAlertRow, type TableAlertRowProps, type TableAlertTone, TableCell, type TableCellProps, type TableCellTheme, TableClientCell, type TableClientCellProps, type TableColumnsAlign, type TableEmptyState, TableExpandedRow, type TableExpandedRowProps, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, TablePersonCell, type TablePersonCellProps, type TableProps, TableRow, type TableRowProps, TableSectionRow, type TableSectionRowProps, TableSelectCell, type TableSelectCellProps, TableSelectHeaderCell, type TableSelectHeaderCellProps, type TableSelection, TableStatusCell, type TableStatusCellProps, TableSubgroupRow, type TableSubgroupRowProps, type TableToolbarProps, type TableToolbarSearch, type TableToolbarStatusFilter, type TableVariant, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagLevelItem, TagLevelPicker, type TagLevelPickerProps, type TagLevelPickerSize, type TagOption, type TagSearchOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, type TextareaVariant, Tile, type TileProps, type TileVariant, Timeline, type TimelineItem, type TimelineProps, type ToastId, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, Tour, type TourCloseReason, type TourLabels, type TourPlacement, type TourProps, type TourStep, TourTarget, type TourTargetProps, type UseRowSelectionOptions, VEHICLE_DAMAGE_ZONES, VehicleDamageMap, type VehicleDamageMapProps, type VehicleDamageMapSideLabels, type VehicleDamageMark, type VehicleDamageZone, VideoPlayer, type VideoPlayerProps, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, buttonGroupVariants, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVideoDuration, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, linkVariants, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize, useRowSelection };

package/dist/ui/index.d.ts

@@ -2055,35 +2055,42 @@ interface DatePickerProps {
 declare const DatePicker: ({ mode, value, onChange, startDate, endDate, onRangeChange, showPresets, presets, placeholder, disabled, minDate, maxDate, width, align, className, }: DatePickerProps) => react.JSX.Element;
 
 declare const ZONE_POSITIONS: {
-    readonly front: readonly [60, 8];
-    readonly hood: readonly [60, 40];
-    readonly windshield: readonly [60, 72];
-    readonly roof: readonly [60, 120];
-    readonly trunk: readonly [60, 190];
-    readonly rear: readonly [60, 212];
-    readonly frontLeftCorner: readonly [26, 20];
-    readonly frontRightCorner: readonly [94, 20];
-    readonly frontLeftWheel: readonly [14, 50];
-    readonly frontRightWheel: readonly [106, 50];
-    readonly frontLeftSide: readonly [18, 92];
-    readonly frontRightSide: readonly [102, 92];
-    readonly rearLeftSide: readonly [18, 132];
-    readonly rearRightSide: readonly [102, 132];
-    readonly rearLeftWheel: readonly [14, 166];
-    readonly rearRightWheel: readonly [106, 166];
-    readonly rearLeftCorner: readonly [26, 200];
-    readonly rearRightCorner: readonly [94, 200];
+    readonly front: readonly [32, 70];
+    readonly hood: readonly [62, 70];
+    readonly windshield: readonly [86, 70];
+    readonly roof: readonly [128, 70];
+    readonly trunk: readonly [188, 70];
+    readonly rear: readonly [208, 70];
+    readonly frontRightCorner: readonly [44, 36];
+    readonly frontLeftCorner: readonly [44, 104];
+    readonly frontRightWheel: readonly [66, 25];
+    readonly frontLeftWheel: readonly [66, 115];
+    readonly frontRightSide: readonly [104, 31];
+    readonly frontLeftSide: readonly [104, 109];
+    readonly rearRightSide: readonly [146, 31];
+    readonly rearLeftSide: readonly [146, 109];
+    readonly rearRightWheel: readonly [174, 25];
+    readonly rearLeftWheel: readonly [174, 115];
+    readonly rearRightCorner: readonly [196, 36];
+    readonly rearLeftCorner: readonly [196, 104];
 };
 type VehicleDamageZone = keyof typeof ZONE_POSITIONS;
 declare const VEHICLE_DAMAGE_ZONES: VehicleDamageZone[];
 interface VehicleDamageMark {
     zone: VehicleDamageZone;
-    count?: number;
+    content?: string;
     label?: string;
-    tone?: 'danger' | 'warning';
+    tone?: 'danger' | 'warning' | 'neutral';
+}
+interface VehicleDamageMapSideLabels {
+    front: string;
+    rear: string;
+    left: string;
+    right: string;
 }
 interface VehicleDamageMapProps extends HTMLAttributes<HTMLDivElement> {
     marks: VehicleDamageMark[];
+    sideLabels?: VehicleDamageMapSideLabels;
     selectedZone?: VehicleDamageZone | null;
     onZoneClick?: (zone: VehicleDamageZone) => void;
     width?: number;
@@ -2346,4 +2353,4 @@ interface TourTargetProps {
 declare const TourTarget: ({ id, children }: TourTargetProps) => react.JSX.Element;
 declare const Tour: ({ steps, open, step, onStepChange, onClose, labels, targetTimeout, }: TourProps) => null;
 
-export { type ActivityFeedItem, ActivityFeedPanel, type ActivityFeedPanelProps, Attachment, type AttachmentProps, type AttachmentStatus, AudioPlayer, type AudioPlayerProps, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerJustify, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, ColorTokenPicker, type ColorTokenPickerProps, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FAB_EDGE_MARGIN, FAB_SIZE, FilePicker, type FilePickerProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, type FloatingSafeArea, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, type HeaderCheckState, type HexColor, HistoryButton, type HistoryButtonProps, type HistoryChange, HistoryDrawer, type HistoryDrawerProps, type HistoryEntry, type HistoryFilter, HistoryList, type HistoryListProps, Icon, IconBadge, type IconBadgeProps, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, IconTooltip, type IconTooltipProps, type IconVariant, Image, type ImageProps, InfoTooltip, type InfoTooltipProps, type InfoTooltipVariant, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Message, MessageDateSeparator, type MessageDateSeparatorProps, type MessageProps, MessageScroller, type MessageScrollerProps, type MessageSeparatorTone, type MessageVariant, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressMarker, type ProgressSegment, Radio, type RadioOption, type RadioProps, type RowId, type RowSelection, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectBubbleOption, type SelectGroup, type SelectItem, type SelectOption, type SelectProps, Sidebar, SidebarActionCard, type SidebarActionCardProps, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuSearchInput, type SidebarMenuSearchInputProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarSupportInfo, type SidebarSupportInfoProps, SidebarTrigger, type SidebarTriggerProps, SidebarUserMenu, type SidebarUserMenuAction, type SidebarUserMenuLeafAction, type SidebarUserMenuProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, TOUR_TARGET_ATTRIBUTE, type TabItem, Table, type TableAction, TableActionsCell, type TableActionsCellProps, type TableAlertAction, TableAlertRow, type TableAlertRowProps, type TableAlertTone, TableCell, type TableCellProps, type TableCellTheme, TableClientCell, type TableClientCellProps, type TableColumnsAlign, type TableEmptyState, TableExpandedRow, type TableExpandedRowProps, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, TablePersonCell, type TablePersonCellProps, type TableProps, TableRow, type TableRowProps, TableSectionRow, type TableSectionRowProps, TableSelectCell, type TableSelectCellProps, TableSelectHeaderCell, type TableSelectHeaderCellProps, type TableSelection, TableStatusCell, type TableStatusCellProps, TableSubgroupRow, type TableSubgroupRowProps, type TableToolbarProps, type TableToolbarSearch, type TableToolbarStatusFilter, type TableVariant, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagLevelItem, TagLevelPicker, type TagLevelPickerProps, type TagLevelPickerSize, type TagOption, type TagSearchOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, type TextareaVariant, Tile, type TileProps, type TileVariant, Timeline, type TimelineItem, type TimelineProps, type ToastId, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, Tour, type TourCloseReason, type TourLabels, type TourPlacement, type TourProps, type TourStep, TourTarget, type TourTargetProps, type UseRowSelectionOptions, VEHICLE_DAMAGE_ZONES, VehicleDamageMap, type VehicleDamageMapProps, type VehicleDamageMark, type VehicleDamageZone, VideoPlayer, type VideoPlayerProps, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, buttonGroupVariants, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVideoDuration, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, linkVariants, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize, useRowSelection };
+export { type ActivityFeedItem, ActivityFeedPanel, type ActivityFeedPanelProps, Attachment, type AttachmentProps, type AttachmentStatus, AudioPlayer, type AudioPlayerProps, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerJustify, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, ColorTokenPicker, type ColorTokenPickerProps, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FAB_EDGE_MARGIN, FAB_SIZE, FilePicker, type FilePickerProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, type FloatingSafeArea, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, type HeaderCheckState, type HexColor, HistoryButton, type HistoryButtonProps, type HistoryChange, HistoryDrawer, type HistoryDrawerProps, type HistoryEntry, type HistoryFilter, HistoryList, type HistoryListProps, Icon, IconBadge, type IconBadgeProps, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, IconTooltip, type IconTooltipProps, type IconVariant, Image, type ImageProps, InfoTooltip, type InfoTooltipProps, type InfoTooltipVariant, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, Message, MessageDateSeparator, type MessageDateSeparatorProps, type MessageProps, MessageScroller, type MessageScrollerProps, type MessageSeparatorTone, type MessageVariant, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressMarker, type ProgressSegment, Radio, type RadioOption, type RadioProps, type RowId, type RowSelection, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectBubbleOption, type SelectGroup, type SelectItem, type SelectOption, type SelectProps, Sidebar, SidebarActionCard, type SidebarActionCardProps, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuSearchInput, type SidebarMenuSearchInputProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarProps, SidebarSupportInfo, type SidebarSupportInfoProps, SidebarTrigger, type SidebarTriggerProps, SidebarUserMenu, type SidebarUserMenuAction, type SidebarUserMenuLeafAction, type SidebarUserMenuProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, TOUR_TARGET_ATTRIBUTE, type TabItem, Table, type TableAction, TableActionsCell, type TableActionsCellProps, type TableAlertAction, TableAlertRow, type TableAlertRowProps, type TableAlertTone, TableCell, type TableCellProps, type TableCellTheme, TableClientCell, type TableClientCellProps, type TableColumnsAlign, type TableEmptyState, TableExpandedRow, type TableExpandedRowProps, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, TablePersonCell, type TablePersonCellProps, type TableProps, TableRow, type TableRowProps, TableSectionRow, type TableSectionRowProps, TableSelectCell, type TableSelectCellProps, TableSelectHeaderCell, type TableSelectHeaderCellProps, type TableSelection, TableStatusCell, type TableStatusCellProps, TableSubgroupRow, type TableSubgroupRowProps, type TableToolbarProps, type TableToolbarSearch, type TableToolbarStatusFilter, type TableVariant, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagLevelItem, TagLevelPicker, type TagLevelPickerProps, type TagLevelPickerSize, type TagOption, type TagSearchOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, type TextareaVariant, Tile, type TileProps, type TileVariant, Timeline, type TimelineItem, type TimelineProps, type ToastId, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, Tour, type TourCloseReason, type TourLabels, type TourPlacement, type TourProps, type TourStep, TourTarget, type TourTargetProps, type UseRowSelectionOptions, VEHICLE_DAMAGE_ZONES, VehicleDamageMap, type VehicleDamageMapProps, type VehicleDamageMapSideLabels, type VehicleDamageMark, type VehicleDamageZone, VideoPlayer, type VideoPlayerProps, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, buttonGroupVariants, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVideoDuration, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, linkVariants, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize, useRowSelection };

package/dist/ui/index.js

@@ -9776,36 +9776,39 @@ var DatePicker = ({
 // src/ui/components/ui/VehicleDamageMap.tsx
 var import_react65 = require("react");
 var import_jsx_runtime117 = require("react/jsx-runtime");
-var WIDTH = 120;
-var HEIGHT = 220;
+var WIDTH = 240;
+var HEIGHT = 140;
 var ZONE_POSITIONS = {
-  front: [60, 8],
-  hood: [60, 40],
-  windshield: [60, 72],
-  roof: [60, 120],
-  trunk: [60, 190],
-  rear: [60, 212],
-  frontLeftCorner: [26, 20],
-  frontRightCorner: [94, 20],
-  frontLeftWheel: [14, 50],
-  frontRightWheel: [106, 50],
-  frontLeftSide: [18, 92],
-  frontRightSide: [102, 92],
-  rearLeftSide: [18, 132],
-  rearRightSide: [102, 132],
-  rearLeftWheel: [14, 166],
-  rearRightWheel: [106, 166],
-  rearLeftCorner: [26, 200],
-  rearRightCorner: [94, 200]
+  front: [32, 70],
+  hood: [62, 70],
+  windshield: [86, 70],
+  roof: [128, 70],
+  trunk: [188, 70],
+  rear: [208, 70],
+  frontRightCorner: [44, 36],
+  frontLeftCorner: [44, 104],
+  frontRightWheel: [66, 25],
+  frontLeftWheel: [66, 115],
+  frontRightSide: [104, 31],
+  frontLeftSide: [104, 109],
+  rearRightSide: [146, 31],
+  rearLeftSide: [146, 109],
+  rearRightWheel: [174, 25],
+  rearLeftWheel: [174, 115],
+  rearRightCorner: [196, 36],
+  rearLeftCorner: [196, 104]
 };
 var VEHICLE_DAMAGE_ZONES = Object.keys(
   ZONE_POSITIONS
 );
 var TONES = {
   danger: colors.red_500,
-  warning: colors.orange_500
+  warning: colors.orange_500,
+  neutral: colors.grey_500
 };
-var VehicleOutline = () => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+var VehicleOutline = ({
+  sideLabels
+}) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
   "svg",
   {
     viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
@@ -9813,39 +9816,69 @@ var VehicleOutline = () => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
     "aria-hidden": true,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { fill: colors.grey_600, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { x: "10", y: "36", width: "10", height: "28", rx: "3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { x: "100", y: "36", width: "10", height: "28", rx: "3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { x: "10", y: "152", width: "10", height: "28", rx: "3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { x: "100", y: "152", width: "10", height: "28", rx: "3" })
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { x: "54", y: "20", width: "26", height: "10", rx: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { x: "54", y: "110", width: "26", height: "10", rx: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { x: "162", y: "20", width: "26", height: "10", rx: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("rect", { x: "162", y: "110", width: "26", height: "10", rx: "3" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { fill: colors.grey_200, stroke: colors.grey_400, strokeWidth: "1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("ellipse", { cx: "13", cy: "76", rx: "5", ry: "3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("ellipse", { cx: "107", cy: "76", rx: "5", ry: "3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("path", { d: "M38 6 H82 Q100 6 102 30 L104 190 Q102 214 82 214 H38 Q18 214 16 190 L18 30 Q20 6 38 6 Z" })
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("ellipse", { cx: "94", cy: "26", rx: "3", ry: "5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("ellipse", { cx: "94", cy: "114", rx: "3", ry: "5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("path", { d: "M34 48 Q34 28 58 28 H184 Q206 28 206 48 V92 Q206 112 184 112 H58 Q34 112 34 92 Z" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { fill: colors.grey_300, stroke: colors.grey_400, strokeWidth: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("path", { d: "M28 64 Q60 54 92 64 L88 86 Q60 80 32 86 Z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("path", { d: "M32 168 Q60 174 88 168 L92 184 Q60 192 28 184 Z" })
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("path", { d: "M78 40 L98 46 V94 L78 100 Q70 70 78 40 Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("path", { d: "M180 42 L166 47 V93 L180 98 Q186 70 180 42 Z" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
         "rect",
         {
-          x: "32",
-          y: "90",
-          width: "56",
-          height: "74",
-          rx: "8",
+          x: "102",
+          y: "48",
+          width: "60",
+          height: "44",
+          rx: "6",
           fill: colors.grey_100,
           stroke: colors.grey_400,
           strokeWidth: "1"
         }
+      ),
+      sideLabels && /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+        "g",
+        {
+          fill: colors.grey_500,
+          fontSize: "7",
+          fontWeight: "600",
+          textAnchor: "middle",
+          letterSpacing: "0.5",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("text", { x: "120", y: "11", children: sideLabels.right.toUpperCase() }),
+            /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("text", { x: "120", y: "135", children: sideLabels.left.toUpperCase() }),
+            /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("text", { x: "14", y: "70", transform: "rotate(-90 14 70)", children: sideLabels.front.toUpperCase() }),
+            /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("text", { x: "226", y: "70", transform: "rotate(90 226 70)", children: sideLabels.rear.toUpperCase() })
+          ]
+        }
       )
     ]
   }
 );
 var VehicleDamageMap = (0, import_react65.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { marks, selectedZone, onZoneClick, width = 120, className } = _b, rest = __objRest(_b, ["marks", "selectedZone", "onZoneClick", "width", "className"]);
+    var _b = _a, {
+      marks,
+      sideLabels,
+      selectedZone,
+      onZoneClick,
+      width = 200,
+      className
+    } = _b, rest = __objRest(_b, [
+      "marks",
+      "sideLabels",
+      "selectedZone",
+      "onZoneClick",
+      "width",
+      "className"
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
       "div",
       __spreadProps(__spreadValues({
@@ -9854,7 +9887,7 @@ var VehicleDamageMap = (0, import_react65.forwardRef)(
         style: { width, height: width * HEIGHT / WIDTH }
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(VehicleOutline, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(VehicleOutline, { sideLabels }),
           marks.map((mark) => {
             var _a2, _b2, _c;
             const [x, y] = ZONE_POSITIONS[mark.zone];
@@ -9869,7 +9902,6 @@ var VehicleDamageMap = (0, import_react65.forwardRef)(
               backgroundColor: TONES[(_a2 = mark.tone) != null ? _a2 : "danger"],
               boxShadow: selected ? `0 0 0 2px ${colors.blue_950}` : void 0
             };
-            const content = mark.count && mark.count > 1 ? mark.count : null;
             const pin = onZoneClick ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
               "button",
               {
@@ -9879,7 +9911,7 @@ var VehicleDamageMap = (0, import_react65.forwardRef)(
                 onClick: () => onZoneClick(mark.zone),
                 className: pinClassName,
                 style: pinStyle,
-                children: content
+                children: mark.content
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
               "span",
@@ -9888,7 +9920,7 @@ var VehicleDamageMap = (0, import_react65.forwardRef)(
                 "aria-label": (_c = mark.label) != null ? _c : mark.zone,
                 className: pinClassName,
                 style: pinStyle,
-                children: content
+                children: mark.content
               }
             );
             return mark.label ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Tooltip, { content: mark.label, children: pin }, mark.zone) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { children: pin }, mark.zone);

package/dist/ui/index.mjs

@@ -9600,36 +9600,39 @@ var DatePicker = ({
 // src/ui/components/ui/VehicleDamageMap.tsx
 import { forwardRef as forwardRef36 } from "react";
 import { jsx as jsx117, jsxs as jsxs69 } from "react/jsx-runtime";
-var WIDTH = 120;
-var HEIGHT = 220;
+var WIDTH = 240;
+var HEIGHT = 140;
 var ZONE_POSITIONS = {
-  front: [60, 8],
-  hood: [60, 40],
-  windshield: [60, 72],
-  roof: [60, 120],
-  trunk: [60, 190],
-  rear: [60, 212],
-  frontLeftCorner: [26, 20],
-  frontRightCorner: [94, 20],
-  frontLeftWheel: [14, 50],
-  frontRightWheel: [106, 50],
-  frontLeftSide: [18, 92],
-  frontRightSide: [102, 92],
-  rearLeftSide: [18, 132],
-  rearRightSide: [102, 132],
-  rearLeftWheel: [14, 166],
-  rearRightWheel: [106, 166],
-  rearLeftCorner: [26, 200],
-  rearRightCorner: [94, 200]
+  front: [32, 70],
+  hood: [62, 70],
+  windshield: [86, 70],
+  roof: [128, 70],
+  trunk: [188, 70],
+  rear: [208, 70],
+  frontRightCorner: [44, 36],
+  frontLeftCorner: [44, 104],
+  frontRightWheel: [66, 25],
+  frontLeftWheel: [66, 115],
+  frontRightSide: [104, 31],
+  frontLeftSide: [104, 109],
+  rearRightSide: [146, 31],
+  rearLeftSide: [146, 109],
+  rearRightWheel: [174, 25],
+  rearLeftWheel: [174, 115],
+  rearRightCorner: [196, 36],
+  rearLeftCorner: [196, 104]
 };
 var VEHICLE_DAMAGE_ZONES = Object.keys(
   ZONE_POSITIONS
 );
 var TONES = {
   danger: colors.red_500,
-  warning: colors.orange_500
+  warning: colors.orange_500,
+  neutral: colors.grey_500
 };
-var VehicleOutline = () => /* @__PURE__ */ jsxs69(
+var VehicleOutline = ({
+  sideLabels
+}) => /* @__PURE__ */ jsxs69(
   "svg",
   {
     viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
@@ -9637,39 +9640,69 @@ var VehicleOutline = () => /* @__PURE__ */ jsxs69(
     "aria-hidden": true,
     children: [
       /* @__PURE__ */ jsxs69("g", { fill: colors.grey_600, children: [
-        /* @__PURE__ */ jsx117("rect", { x: "10", y: "36", width: "10", height: "28", rx: "3" }),
-        /* @__PURE__ */ jsx117("rect", { x: "100", y: "36", width: "10", height: "28", rx: "3" }),
-        /* @__PURE__ */ jsx117("rect", { x: "10", y: "152", width: "10", height: "28", rx: "3" }),
-        /* @__PURE__ */ jsx117("rect", { x: "100", y: "152", width: "10", height: "28", rx: "3" })
+        /* @__PURE__ */ jsx117("rect", { x: "54", y: "20", width: "26", height: "10", rx: "3" }),
+        /* @__PURE__ */ jsx117("rect", { x: "54", y: "110", width: "26", height: "10", rx: "3" }),
+        /* @__PURE__ */ jsx117("rect", { x: "162", y: "20", width: "26", height: "10", rx: "3" }),
+        /* @__PURE__ */ jsx117("rect", { x: "162", y: "110", width: "26", height: "10", rx: "3" })
       ] }),
       /* @__PURE__ */ jsxs69("g", { fill: colors.grey_200, stroke: colors.grey_400, strokeWidth: "1.5", children: [
-        /* @__PURE__ */ jsx117("ellipse", { cx: "13", cy: "76", rx: "5", ry: "3" }),
-        /* @__PURE__ */ jsx117("ellipse", { cx: "107", cy: "76", rx: "5", ry: "3" }),
-        /* @__PURE__ */ jsx117("path", { d: "M38 6 H82 Q100 6 102 30 L104 190 Q102 214 82 214 H38 Q18 214 16 190 L18 30 Q20 6 38 6 Z" })
+        /* @__PURE__ */ jsx117("ellipse", { cx: "94", cy: "26", rx: "3", ry: "5" }),
+        /* @__PURE__ */ jsx117("ellipse", { cx: "94", cy: "114", rx: "3", ry: "5" }),
+        /* @__PURE__ */ jsx117("path", { d: "M34 48 Q34 28 58 28 H184 Q206 28 206 48 V92 Q206 112 184 112 H58 Q34 112 34 92 Z" })
       ] }),
       /* @__PURE__ */ jsxs69("g", { fill: colors.grey_300, stroke: colors.grey_400, strokeWidth: "1", children: [
-        /* @__PURE__ */ jsx117("path", { d: "M28 64 Q60 54 92 64 L88 86 Q60 80 32 86 Z" }),
-        /* @__PURE__ */ jsx117("path", { d: "M32 168 Q60 174 88 168 L92 184 Q60 192 28 184 Z" })
+        /* @__PURE__ */ jsx117("path", { d: "M78 40 L98 46 V94 L78 100 Q70 70 78 40 Z" }),
+        /* @__PURE__ */ jsx117("path", { d: "M180 42 L166 47 V93 L180 98 Q186 70 180 42 Z" })
       ] }),
       /* @__PURE__ */ jsx117(
         "rect",
         {
-          x: "32",
-          y: "90",
-          width: "56",
-          height: "74",
-          rx: "8",
+          x: "102",
+          y: "48",
+          width: "60",
+          height: "44",
+          rx: "6",
           fill: colors.grey_100,
           stroke: colors.grey_400,
           strokeWidth: "1"
         }
+      ),
+      sideLabels && /* @__PURE__ */ jsxs69(
+        "g",
+        {
+          fill: colors.grey_500,
+          fontSize: "7",
+          fontWeight: "600",
+          textAnchor: "middle",
+          letterSpacing: "0.5",
+          children: [
+            /* @__PURE__ */ jsx117("text", { x: "120", y: "11", children: sideLabels.right.toUpperCase() }),
+            /* @__PURE__ */ jsx117("text", { x: "120", y: "135", children: sideLabels.left.toUpperCase() }),
+            /* @__PURE__ */ jsx117("text", { x: "14", y: "70", transform: "rotate(-90 14 70)", children: sideLabels.front.toUpperCase() }),
+            /* @__PURE__ */ jsx117("text", { x: "226", y: "70", transform: "rotate(90 226 70)", children: sideLabels.rear.toUpperCase() })
+          ]
+        }
       )
     ]
   }
 );
 var VehicleDamageMap = forwardRef36(
   (_a, ref) => {
-    var _b = _a, { marks, selectedZone, onZoneClick, width = 120, className } = _b, rest = __objRest(_b, ["marks", "selectedZone", "onZoneClick", "width", "className"]);
+    var _b = _a, {
+      marks,
+      sideLabels,
+      selectedZone,
+      onZoneClick,
+      width = 200,
+      className
+    } = _b, rest = __objRest(_b, [
+      "marks",
+      "sideLabels",
+      "selectedZone",
+      "onZoneClick",
+      "width",
+      "className"
+    ]);
     return /* @__PURE__ */ jsxs69(
       "div",
       __spreadProps(__spreadValues({
@@ -9678,7 +9711,7 @@ var VehicleDamageMap = forwardRef36(
         style: { width, height: width * HEIGHT / WIDTH }
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx117(VehicleOutline, {}),
+          /* @__PURE__ */ jsx117(VehicleOutline, { sideLabels }),
           marks.map((mark) => {
             var _a2, _b2, _c;
             const [x, y] = ZONE_POSITIONS[mark.zone];
@@ -9693,7 +9726,6 @@ var VehicleDamageMap = forwardRef36(
               backgroundColor: TONES[(_a2 = mark.tone) != null ? _a2 : "danger"],
               boxShadow: selected ? `0 0 0 2px ${colors.blue_950}` : void 0
             };
-            const content = mark.count && mark.count > 1 ? mark.count : null;
             const pin = onZoneClick ? /* @__PURE__ */ jsx117(
               "button",
               {
@@ -9703,7 +9735,7 @@ var VehicleDamageMap = forwardRef36(
                 onClick: () => onZoneClick(mark.zone),
                 className: pinClassName,
                 style: pinStyle,
-                children: content
+                children: mark.content
               }
             ) : /* @__PURE__ */ jsx117(
               "span",
@@ -9712,7 +9744,7 @@ var VehicleDamageMap = forwardRef36(
                 "aria-label": (_c = mark.label) != null ? _c : mark.zone,
                 className: pinClassName,
                 style: pinStyle,
-                children: content
+                children: mark.content
               }
             );
             return mark.label ? /* @__PURE__ */ jsx117(Tooltip, { content: mark.label, children: pin }, mark.zone) : /* @__PURE__ */ jsx117("span", { children: pin }, mark.zone);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.442",
+  "version": "1.0.444",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",