@sustaina/shared-ui 1.15.0 → 1.16.0

package/dist/index.d.mts

@@ -609,6 +609,32 @@ declare const SuiTriangleDownIcon: (props: SVGProps<SVGSVGElement>) => react_jsx
 
 declare const SuiWarningIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
+type ImageLoaderProps = {
+    src: string;
+    width: number;
+    quality?: number;
+};
+type ImageLoader = (props: ImageLoaderProps) => string;
+interface ImageProps extends Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height"> {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    fill?: boolean;
+    sizes?: string;
+    quality?: number;
+    priority?: boolean;
+    placeholder?: "empty" | "blur";
+    blurDataURL?: string;
+    loader?: ImageLoader;
+    unoptimized?: boolean;
+    wrapperClassName?: string;
+    objectFit?: React$1.CSSProperties["objectFit"];
+    objectPosition?: React$1.CSSProperties["objectPosition"];
+    onLoadingComplete?: (img: HTMLImageElement) => void;
+}
+declare const Image: React$1.ForwardRefExoticComponent<ImageProps & React$1.RefAttributes<HTMLImageElement>>;
+
 type InputPrimitiveProps = React$1.InputHTMLAttributes<HTMLInputElement>;
 declare const InputPrimitive: React$1.ForwardRefExoticComponent<InputPrimitiveProps & React$1.RefAttributes<HTMLInputElement>>;
 declare const inputVariants: (props?: ({
@@ -1266,4 +1292,4 @@ type UseTruncatedOptions<T> = {
 type UseTruncatedResult = boolean;
 declare const useTruncated: <T extends HTMLElement = any>({ elementRef, onChange, resizeDetectDelay }: UseTruncatedOptions<T>) => UseTruncatedResult;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch, ArrowIcon, type Breakpoints, Button, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CroppedImagePayload, type CroppedImagePayloadWithBlobUrl, CropperModal, CropperModalError, type CropperModalErrorType, type CropperModalProps, DIALOG_ALERT_I18N_NAMESPACE, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSeparatorProps, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, DatePicker, type DatePickerProps, type DebounceOptions, type DebouncedFunction, Dialog, DialogAlert, type DialogAlertI18nResource, type DialogAlertProps, DialogAlertProvider, type DialogAlertTemplates, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, type DialogVariant, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, type FieldSchema, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, Input, type InputProps, Label, List, ListContainer, type ListContainerProps, ListHeader, type ListHeaderProps, type ListProps, ListTable, type ListTableProps, LookupSelect, type LookupSelectOption, type LookupSelectProps, MonthPicker, type MonthPickerProps, _default as Navbar, type NavbarProps, NotFoundIcon, type Params, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, type RowClickType, type RowState, type ScrollInfo, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SorterProps, Spinner, type SpinnerProps, type StatusContentKey, SuiCalendarIcon, SuiCheckIcon, SuiDotsVerticalIcon, SuiEmptyDataIcon, SuiExpandIcon, SuiFilterIcon, SuiSettingIcon, SuiTriangleDownIcon, SuiWarningIcon, Switch, type TemplateKeys, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, index as UI, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UsePreventPageLeaveOptions, type UseScreenSizeResult, type UseTruncatedOptions, type UseTruncatedResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, formatISODate, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, spinnerVariants, stripNullishObject, throttle, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, usePreventPageLeave, usePreventPageLeaveStore, useScreenSize, useSidebar, useTruncated };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch, ArrowIcon, type Breakpoints, Button, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CroppedImagePayload, type CroppedImagePayloadWithBlobUrl, CropperModal, CropperModalError, type CropperModalErrorType, type CropperModalProps, DIALOG_ALERT_I18N_NAMESPACE, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSeparatorProps, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, DatePicker, type DatePickerProps, type DebounceOptions, type DebouncedFunction, Dialog, DialogAlert, type DialogAlertI18nResource, type DialogAlertProps, DialogAlertProvider, type DialogAlertTemplates, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, type DialogVariant, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, type FieldSchema, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, Image, type ImageLoader, type ImageLoaderProps, type ImageProps, Input, type InputProps, Label, List, ListContainer, type ListContainerProps, ListHeader, type ListHeaderProps, type ListProps, ListTable, type ListTableProps, LookupSelect, type LookupSelectOption, type LookupSelectProps, MonthPicker, type MonthPickerProps, _default as Navbar, type NavbarProps, NotFoundIcon, type Params, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, type RowClickType, type RowState, type ScrollInfo, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SorterProps, Spinner, type SpinnerProps, type StatusContentKey, SuiCalendarIcon, SuiCheckIcon, SuiDotsVerticalIcon, SuiEmptyDataIcon, SuiExpandIcon, SuiFilterIcon, SuiSettingIcon, SuiTriangleDownIcon, SuiWarningIcon, Switch, type TemplateKeys, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, index as UI, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UsePreventPageLeaveOptions, type UseScreenSizeResult, type UseTruncatedOptions, type UseTruncatedResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, formatISODate, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, spinnerVariants, stripNullishObject, throttle, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, usePreventPageLeave, usePreventPageLeaveStore, useScreenSize, useSidebar, useTruncated };

package/dist/index.d.ts

@@ -609,6 +609,32 @@ declare const SuiTriangleDownIcon: (props: SVGProps<SVGSVGElement>) => react_jsx
 
 declare const SuiWarningIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
+type ImageLoaderProps = {
+    src: string;
+    width: number;
+    quality?: number;
+};
+type ImageLoader = (props: ImageLoaderProps) => string;
+interface ImageProps extends Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height"> {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    fill?: boolean;
+    sizes?: string;
+    quality?: number;
+    priority?: boolean;
+    placeholder?: "empty" | "blur";
+    blurDataURL?: string;
+    loader?: ImageLoader;
+    unoptimized?: boolean;
+    wrapperClassName?: string;
+    objectFit?: React$1.CSSProperties["objectFit"];
+    objectPosition?: React$1.CSSProperties["objectPosition"];
+    onLoadingComplete?: (img: HTMLImageElement) => void;
+}
+declare const Image: React$1.ForwardRefExoticComponent<ImageProps & React$1.RefAttributes<HTMLImageElement>>;
+
 type InputPrimitiveProps = React$1.InputHTMLAttributes<HTMLInputElement>;
 declare const InputPrimitive: React$1.ForwardRefExoticComponent<InputPrimitiveProps & React$1.RefAttributes<HTMLInputElement>>;
 declare const inputVariants: (props?: ({
@@ -1266,4 +1292,4 @@ type UseTruncatedOptions<T> = {
 type UseTruncatedResult = boolean;
 declare const useTruncated: <T extends HTMLElement = any>({ elementRef, onChange, resizeDetectDelay }: UseTruncatedOptions<T>) => UseTruncatedResult;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch, ArrowIcon, type Breakpoints, Button, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CroppedImagePayload, type CroppedImagePayloadWithBlobUrl, CropperModal, CropperModalError, type CropperModalErrorType, type CropperModalProps, DIALOG_ALERT_I18N_NAMESPACE, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSeparatorProps, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, DatePicker, type DatePickerProps, type DebounceOptions, type DebouncedFunction, Dialog, DialogAlert, type DialogAlertI18nResource, type DialogAlertProps, DialogAlertProvider, type DialogAlertTemplates, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, type DialogVariant, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, type FieldSchema, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, Input, type InputProps, Label, List, ListContainer, type ListContainerProps, ListHeader, type ListHeaderProps, type ListProps, ListTable, type ListTableProps, LookupSelect, type LookupSelectOption, type LookupSelectProps, MonthPicker, type MonthPickerProps, _default as Navbar, type NavbarProps, NotFoundIcon, type Params, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, type RowClickType, type RowState, type ScrollInfo, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SorterProps, Spinner, type SpinnerProps, type StatusContentKey, SuiCalendarIcon, SuiCheckIcon, SuiDotsVerticalIcon, SuiEmptyDataIcon, SuiExpandIcon, SuiFilterIcon, SuiSettingIcon, SuiTriangleDownIcon, SuiWarningIcon, Switch, type TemplateKeys, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, index as UI, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UsePreventPageLeaveOptions, type UseScreenSizeResult, type UseTruncatedOptions, type UseTruncatedResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, formatISODate, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, spinnerVariants, stripNullishObject, throttle, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, usePreventPageLeave, usePreventPageLeaveStore, useScreenSize, useSidebar, useTruncated };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch, ArrowIcon, type Breakpoints, Button, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CroppedImagePayload, type CroppedImagePayloadWithBlobUrl, CropperModal, CropperModalError, type CropperModalErrorType, type CropperModalProps, DIALOG_ALERT_I18N_NAMESPACE, DataTable, type DataTableChildrenKeyHandler, type DataTableColumnFilter, type DataTableColumnFilterProps, type DataTableColumnGrouping, type DataTableColumnOrdering, type DataTableColumnPinning, type DataTableColumnSeparatorProps, type DataTableColumnSorting, type DataTableColumnVisibility, type DataTableComponentProps, type DataTableFilterConfig, type DataTableFilters, type DataTableGlobalFilter, type DataTableHeaderCell, type DataTableProps, type DataTableRenderHeaderHandler, type DataTableRenderHeaderProps, type DataTableRenderRowHandler, type DataTableRenderRowProps, type DataTableRowCell, type DataTableRowClickHandler, type DataTableRowExpansion, type DataTableRowIdKeyHandler, type DataTableRowSelection, type DataTableScrollFetch, type DataTableStatusContent, type DatatableColumnResizing, DatePicker, type DatePickerProps, type DebounceOptions, type DebouncedFunction, Dialog, DialogAlert, type DialogAlertI18nResource, type DialogAlertProps, DialogAlertProvider, type DialogAlertTemplates, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, type DialogVariant, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, type FieldSchema, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GridPayload, GridSettingsModal, type GridSettingsModalProps, HeaderCell, type HeaderCellProps, Image, type ImageLoader, type ImageLoaderProps, type ImageProps, Input, type InputProps, Label, List, ListContainer, type ListContainerProps, ListHeader, type ListHeaderProps, type ListProps, ListTable, type ListTableProps, LookupSelect, type LookupSelectOption, type LookupSelectProps, MonthPicker, type MonthPickerProps, _default as Navbar, type NavbarProps, NotFoundIcon, type Params, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, type RowClickType, type RowState, type ScrollInfo, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SorterProps, Spinner, type SpinnerProps, type StatusContentKey, SuiCalendarIcon, SuiCheckIcon, SuiDotsVerticalIcon, SuiEmptyDataIcon, SuiExpandIcon, SuiFilterIcon, SuiSettingIcon, SuiTriangleDownIcon, SuiWarningIcon, Switch, type TemplateKeys, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, index as UI, type UseHoverResult, type UseMediaQueryOptions, type UseMediaQueryResult, type UsePreventPageLeaveOptions, type UseScreenSizeResult, type UseTruncatedOptions, type UseTruncatedResult, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, formatISODate, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, spinnerVariants, stripNullishObject, throttle, useFormField, useGridSettingsStore, useHover, useIntersectionObserver, useMediaQuery, usePreventPageLeave, usePreventPageLeaveStore, useScreenSize, useSidebar, useTruncated };

package/dist/index.js

@@ -887,7 +887,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "border-input data-[placeholder]:text-gray-00 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[state=open]:border-ring data-[state=open]:[&_svg]:text-foreground",
+        "border-input data-placeholder:text-gray-00 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[state=open]:border-ring data-[state=open]:[&_svg]:text-foreground",
         className
       ),
       ...props,
@@ -909,7 +909,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -922,7 +922,7 @@ function SelectContent({
           {
             className: cn(
               "m-1",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
             ),
             children
           }
@@ -952,7 +952,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "hover:bg-[#EAF5EE] hover:text-[#379A2A] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 ",
+        "hover:bg-[#EAF5EE] hover:text-[#379A2A] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 ",
         className
       ),
       ...props,
@@ -5775,6 +5775,233 @@ var useGridSettingsStore = zustand.create(
   })
 );
 var useGridSettingsStore_default = useGridSettingsStore;
+function LoadingOverlay({
+  className,
+  fullscreen = true,
+  spinnerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "loading-overlay",
+      className: cn(
+        fullscreen ? "fixed z-100" : "absolute z-10",
+        "inset-0 flex items-center justify-center transition-opacity duration-300",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("size-50", spinnerClassName) })
+    }
+  );
+}
+var DEVICE_SIZES = [320, 420, 640, 768, 1024, 1280, 1536, 1920];
+var IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+var defaultLoader = ({ src }) => src;
+function toNumber(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : void 0;
+  }
+  if (typeof value === "string") {
+    const parsed = parseInt(value, 10);
+    return Number.isFinite(parsed) ? parsed : void 0;
+  }
+  return void 0;
+}
+function formatDimension(value) {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+}
+function matchClosestSize(target) {
+  for (const size of IMAGE_SIZES) {
+    if (size >= target) {
+      return size;
+    }
+  }
+  return DEVICE_SIZES[DEVICE_SIZES.length - 1];
+}
+function getCandidateWidths({
+  width,
+  sizes,
+  fill
+}) {
+  if (fill || sizes) {
+    return DEVICE_SIZES;
+  }
+  if (typeof width === "number" && width > 0) {
+    const targets = /* @__PURE__ */ new Set([width, width * 2]);
+    return Array.from(targets).map((target) => matchClosestSize(target)).sort((a, b) => a - b);
+  }
+  return DEVICE_SIZES;
+}
+var Image2 = React4__namespace.forwardRef(function Image3({
+  src,
+  alt,
+  width,
+  height,
+  fill = false,
+  sizes,
+  quality = 75,
+  priority = false,
+  placeholder: placeholder2 = "empty",
+  blurDataURL,
+  loader = defaultLoader,
+  unoptimized = false,
+  wrapperClassName,
+  className,
+  objectFit,
+  objectPosition,
+  onLoadingComplete,
+  style,
+  ...imgProps
+}, ref) {
+  const {
+    loading: loadingProp,
+    fetchPriority: fetchPriorityProp,
+    decoding: decodingProp,
+    onLoad: onLoadProp,
+    ...restImgProps
+  } = imgProps;
+  const widthNumber = toNumber(width);
+  const heightNumber = toNumber(height);
+  React4__namespace.useEffect(() => {
+    if (!fill && (!widthNumber || !heightNumber)) {
+      console.warn(
+        "[Image] When `fill` is false you should provide both `width` and `height` to prevent layout shifts."
+      );
+    }
+  }, [fill, heightNumber, widthNumber]);
+  const candidateWidths = React4__namespace.useMemo(
+    () => getCandidateWidths({ width: widthNumber, sizes, fill }),
+    [fill, sizes, widthNumber]
+  );
+  const largestWidth = candidateWidths[candidateWidths.length - 1] ?? widthNumber ?? DEVICE_SIZES[DEVICE_SIZES.length - 1];
+  const computedSrc = React4__namespace.useMemo(() => {
+    if (unoptimized) {
+      return src;
+    }
+    return loader({ src, width: largestWidth, quality });
+  }, [largestWidth, loader, quality, src, unoptimized]);
+  const computedSrcSet = React4__namespace.useMemo(() => {
+    if (unoptimized) {
+      return void 0;
+    }
+    return candidateWidths.map((currentWidth) => `${loader({ src, width: currentWidth, quality })} ${currentWidth}w`).join(", ");
+  }, [candidateWidths, loader, quality, src, unoptimized]);
+  const sizesValue = sizes ?? (fill ? "100vw" : widthNumber ? `${widthNumber}px` : void 0);
+  const [isLoaded, setIsLoaded] = React4__namespace.useState(false);
+  const internalRef = React4__namespace.useRef(null);
+  const setRefs = React4__namespace.useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (!ref) {
+        return;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  React4__namespace.useEffect(() => {
+    const image = internalRef.current;
+    if (!image) {
+      return;
+    }
+    if (image.complete && image.naturalWidth > 0) {
+      setIsLoaded(true);
+      onLoadingComplete?.(image);
+    } else {
+      setIsLoaded(false);
+    }
+  }, [onLoadingComplete, src]);
+  const handleLoad = React4__namespace.useCallback(
+    (event) => {
+      setIsLoaded(true);
+      onLoadProp?.(event);
+      onLoadingComplete?.(event.currentTarget);
+    },
+    [onLoadProp, onLoadingComplete]
+  );
+  const loading = priority ? "eager" : loadingProp ?? "lazy";
+  const fetchPriority = priority ? "high" : fetchPriorityProp;
+  const decoding = decodingProp ?? "async";
+  const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
+  const wrapperStyle = React4__namespace.useMemo(
+    () => ({
+      position: "relative",
+      display: fill ? "block" : "inline-block",
+      overflow: "hidden",
+      width: fill ? "100%" : formatDimension(width) ?? void 0,
+      height: fill ? "100%" : formatDimension(height) ?? void 0
+    }),
+    [fill, height, width]
+  );
+  const imageStyle = React4__namespace.useMemo(
+    () => ({
+      width: fill ? "100%" : formatDimension(width) ?? void 0,
+      height: fill ? "100%" : formatDimension(height) ?? void 0,
+      position: fill ? "absolute" : void 0,
+      inset: fill ? 0 : void 0,
+      objectFit: resolvedObjectFit,
+      objectPosition,
+      ...style
+    }),
+    [fill, height, objectPosition, resolvedObjectFit, style, width]
+  );
+  const shouldShowLoadingOverlay = placeholder2 === "blur";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-slot": "image",
+      className: cn("relative overflow-hidden", fill ? "block" : "inline-block", wrapperClassName),
+      style: wrapperStyle,
+      children: [
+        shouldShowLoadingOverlay && /* @__PURE__ */ jsxRuntime.jsx(
+          LoadingOverlay,
+          {
+            "aria-hidden": true,
+            fullscreen: false,
+            spinnerClassName: "size-6",
+            className: cn(
+              // "bg-white/75!",
+              isLoaded ? "opacity-0 pointer-events-none" : "opacity-100"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            ref: setRefs,
+            className: cn(
+              "block transition-opacity duration-300",
+              fill && "absolute inset-0 size-full",
+              shouldShowLoadingOverlay && !isLoaded ? "opacity-0" : "opacity-100",
+              className
+            ),
+            src: computedSrc,
+            srcSet: computedSrcSet,
+            sizes: sizesValue,
+            width: fill ? void 0 : widthNumber,
+            height: fill ? void 0 : heightNumber,
+            alt,
+            loading,
+            fetchPriority,
+            decoding,
+            onLoad: handleLoad,
+            style: imageStyle,
+            ...restImgProps
+          }
+        )
+      ]
+    }
+  );
+});
+Image2.displayName = "Image";
 var ListTable = ({ onTableReady, children }) => {
   React4__namespace.useEffect(() => {
     if (onTableReady) {
@@ -8521,6 +8748,7 @@ exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
 exports.GridSettingsModal = GridSettingsModal_default;
 exports.HeaderCell = HeaderCell_default;
+exports.Image = Image2;
 exports.Input = Input;
 exports.Label = Label2;
 exports.List = List_default;