mainbase-ui 1.2.4 → 1.2.5-b

package/dist/index.d.cts

@@ -156,6 +156,10 @@ interface MainbaseComponentDefaults {
         firstDayOfWeek?: 0 | 1;
         clearable?: boolean;
     };
+    Image?: {
+        radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+        fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    };
 }
 interface MainbaseTheme {
     colorScheme: MainbaseColorScheme;
@@ -215,9 +219,11 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare function Badge({ variant, size, leftSection, rightSection, className, children, ...props }: BadgeProps): react.JSX.Element;
 
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "outline" | "ghost";
-    size?: "sm" | "md" | "lg";
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     loading?: boolean;
     leftSection?: ReactNode;
     rightSection?: ReactNode;
@@ -707,6 +713,20 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultV
 }
 declare function DatePicker({ type, value, defaultValue, onChange, size, placeholder, rangeSeparator, locale, firstDayOfWeek, minDate, maxDate, disabled, error, clearable, name, dateFormat, className, ...props }: DatePickerProps): react.JSX.Element;
 
+type ImageFit = "contain" | "cover" | "fill" | "none" | "scale-down";
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    fit?: ImageFit;
+    fallback?: string;
+}
+declare const Image: react.ForwardRefExoticComponent<ImageProps & react.RefAttributes<HTMLImageElement>>;
+
+interface HighlightProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    color?: "primary" | "success" | "warning";
+}
+declare function Highlight({ children, color, className, ...props }: HighlightProps): react.JSX.Element;
+
 type ClickOutsideEvent = "mousedown" | "touchstart" | "pointerdown";
 interface UseClickOutsideOptions {
     enabled?: boolean;
@@ -786,4 +806,4 @@ interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 declare function Title({ order, size, weight, color, leftSection, rightSection, className, children, ...props }: TitleProps): react.JSX.Element;
 
-export { Accordion, type AccordionChevronPosition, type AccordionControlProps, type AccordionItemProps, type AccordionPanelProps, type AccordionProps, type AccordionSize, type AccordionType, type AccordionValue, type AccordionVariant, Alert, type AlertProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, Card, type CardProps, Checkbox, type CheckboxProps, type ClassValue, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerType, type DatePickerValue, type DateRangeValue, Divider, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, type DrawerSize, FileInput, type FileInputProps, type FileInputSize, Group, type GroupProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, type MainbaseColorScheme, type MainbaseColors, type MainbaseComponentDefaults, MainbasePortalContext, MainbaseProvider, type MainbaseProviderProps, type MainbaseRadii, type MainbaseShadows, type MainbaseSpacing, type MainbaseTheme, type MainbaseThemeOverride, type MainbaseTransitions, type MainbaseTypography, type MainbaseZIndex, Menu, type MenuDividerProps, type MenuDropdownProps, type MenuItemProps, type MenuLabelProps, type MenuPosition, type MenuProps, type MenuTargetProps, type MenuWidth, Modal, type ModalProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PasswordInput, type PasswordInputProps, type PasswordInputSize, PinInput, type PinInputProps, type PinInputSize, type PinInputType, Popover, type PopoverDropdownProps, type PopoverPosition, type PopoverProps, type PopoverTargetProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, Title, type TitleProps, type ToastApi, type ToastItem, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastShortcutInput, type ToastVariant, Tooltip, type TooltipPosition, type TooltipProps, type UseClickOutsideOptions, type UseControllableStateOptions, type UseDisclosureHandlers, type UseDisclosureReturn, cx, defaultMainbaseTheme, useClickOutside, useComponentDefaults, useControllableState, useDisclosure, useLockScroll, useMainbaseTheme, useToast };
+export { Accordion, type AccordionChevronPosition, type AccordionControlProps, type AccordionItemProps, type AccordionPanelProps, type AccordionProps, type AccordionSize, type AccordionType, type AccordionValue, type AccordionVariant, Alert, type AlertProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, Card, type CardProps, Checkbox, type CheckboxProps, type ClassValue, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerType, type DatePickerValue, type DateRangeValue, Divider, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, type DrawerSize, FileInput, type FileInputProps, type FileInputSize, Group, type GroupProps, Highlight, type HighlightProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageFit, type ImageProps, Input, type InputProps, type MainbaseColorScheme, type MainbaseColors, type MainbaseComponentDefaults, MainbasePortalContext, MainbaseProvider, type MainbaseProviderProps, type MainbaseRadii, type MainbaseShadows, type MainbaseSpacing, type MainbaseTheme, type MainbaseThemeOverride, type MainbaseTransitions, type MainbaseTypography, type MainbaseZIndex, Menu, type MenuDividerProps, type MenuDropdownProps, type MenuItemProps, type MenuLabelProps, type MenuPosition, type MenuProps, type MenuTargetProps, type MenuWidth, Modal, type ModalProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PasswordInput, type PasswordInputProps, type PasswordInputSize, PinInput, type PinInputProps, type PinInputSize, type PinInputType, Popover, type PopoverDropdownProps, type PopoverPosition, type PopoverProps, type PopoverTargetProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, Title, type TitleProps, type ToastApi, type ToastItem, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastShortcutInput, type ToastVariant, Tooltip, type TooltipPosition, type TooltipProps, type UseClickOutsideOptions, type UseControllableStateOptions, type UseDisclosureHandlers, type UseDisclosureReturn, cx, defaultMainbaseTheme, useClickOutside, useComponentDefaults, useControllableState, useDisclosure, useLockScroll, useMainbaseTheme, useToast };

package/dist/index.d.ts

@@ -156,6 +156,10 @@ interface MainbaseComponentDefaults {
         firstDayOfWeek?: 0 | 1;
         clearable?: boolean;
     };
+    Image?: {
+        radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+        fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    };
 }
 interface MainbaseTheme {
     colorScheme: MainbaseColorScheme;
@@ -215,9 +219,11 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare function Badge({ variant, size, leftSection, rightSection, className, children, ...props }: BadgeProps): react.JSX.Element;
 
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "outline" | "ghost";
-    size?: "sm" | "md" | "lg";
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     loading?: boolean;
     leftSection?: ReactNode;
     rightSection?: ReactNode;
@@ -707,6 +713,20 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultV
 }
 declare function DatePicker({ type, value, defaultValue, onChange, size, placeholder, rangeSeparator, locale, firstDayOfWeek, minDate, maxDate, disabled, error, clearable, name, dateFormat, className, ...props }: DatePickerProps): react.JSX.Element;
 
+type ImageFit = "contain" | "cover" | "fill" | "none" | "scale-down";
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    fit?: ImageFit;
+    fallback?: string;
+}
+declare const Image: react.ForwardRefExoticComponent<ImageProps & react.RefAttributes<HTMLImageElement>>;
+
+interface HighlightProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    color?: "primary" | "success" | "warning";
+}
+declare function Highlight({ children, color, className, ...props }: HighlightProps): react.JSX.Element;
+
 type ClickOutsideEvent = "mousedown" | "touchstart" | "pointerdown";
 interface UseClickOutsideOptions {
     enabled?: boolean;
@@ -786,4 +806,4 @@ interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 declare function Title({ order, size, weight, color, leftSection, rightSection, className, children, ...props }: TitleProps): react.JSX.Element;
 
-export { Accordion, type AccordionChevronPosition, type AccordionControlProps, type AccordionItemProps, type AccordionPanelProps, type AccordionProps, type AccordionSize, type AccordionType, type AccordionValue, type AccordionVariant, Alert, type AlertProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, Card, type CardProps, Checkbox, type CheckboxProps, type ClassValue, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerType, type DatePickerValue, type DateRangeValue, Divider, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, type DrawerSize, FileInput, type FileInputProps, type FileInputSize, Group, type GroupProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, type MainbaseColorScheme, type MainbaseColors, type MainbaseComponentDefaults, MainbasePortalContext, MainbaseProvider, type MainbaseProviderProps, type MainbaseRadii, type MainbaseShadows, type MainbaseSpacing, type MainbaseTheme, type MainbaseThemeOverride, type MainbaseTransitions, type MainbaseTypography, type MainbaseZIndex, Menu, type MenuDividerProps, type MenuDropdownProps, type MenuItemProps, type MenuLabelProps, type MenuPosition, type MenuProps, type MenuTargetProps, type MenuWidth, Modal, type ModalProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PasswordInput, type PasswordInputProps, type PasswordInputSize, PinInput, type PinInputProps, type PinInputSize, type PinInputType, Popover, type PopoverDropdownProps, type PopoverPosition, type PopoverProps, type PopoverTargetProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, Title, type TitleProps, type ToastApi, type ToastItem, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastShortcutInput, type ToastVariant, Tooltip, type TooltipPosition, type TooltipProps, type UseClickOutsideOptions, type UseControllableStateOptions, type UseDisclosureHandlers, type UseDisclosureReturn, cx, defaultMainbaseTheme, useClickOutside, useComponentDefaults, useControllableState, useDisclosure, useLockScroll, useMainbaseTheme, useToast };
+export { Accordion, type AccordionChevronPosition, type AccordionControlProps, type AccordionItemProps, type AccordionPanelProps, type AccordionProps, type AccordionSize, type AccordionType, type AccordionValue, type AccordionVariant, Alert, type AlertProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Button, Card, type CardProps, Checkbox, type CheckboxProps, type ClassValue, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerType, type DatePickerValue, type DateRangeValue, Divider, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, type DrawerSize, FileInput, type FileInputProps, type FileInputSize, Group, type GroupProps, Highlight, type HighlightProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageFit, type ImageProps, Input, type InputProps, type MainbaseColorScheme, type MainbaseColors, type MainbaseComponentDefaults, MainbasePortalContext, MainbaseProvider, type MainbaseProviderProps, type MainbaseRadii, type MainbaseShadows, type MainbaseSpacing, type MainbaseTheme, type MainbaseThemeOverride, type MainbaseTransitions, type MainbaseTypography, type MainbaseZIndex, Menu, type MenuDividerProps, type MenuDropdownProps, type MenuItemProps, type MenuLabelProps, type MenuPosition, type MenuProps, type MenuTargetProps, type MenuWidth, Modal, type ModalProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PasswordInput, type PasswordInputProps, type PasswordInputSize, PinInput, type PinInputProps, type PinInputSize, type PinInputType, Popover, type PopoverDropdownProps, type PopoverPosition, type PopoverProps, type PopoverTargetProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, Title, type TitleProps, type ToastApi, type ToastItem, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastShortcutInput, type ToastVariant, Tooltip, type TooltipPosition, type TooltipProps, type UseClickOutsideOptions, type UseControllableStateOptions, type UseDisclosureHandlers, type UseDisclosureReturn, cx, defaultMainbaseTheme, useClickOutside, useComponentDefaults, useControllableState, useDisclosure, useLockScroll, useMainbaseTheme, useToast };

package/dist/index.js

@@ -166,6 +166,10 @@ var defaultMainbaseTheme = {
       size: "md",
       firstDayOfWeek: 1,
       clearable: true
+    },
+    Image: {
+      radius: "md",
+      fit: "cover"
     }
   }
 };
@@ -362,6 +366,10 @@ function mergeTheme(parentTheme, override) {
       DatePicker: {
         ...parentTheme.components.DatePicker,
         ...override.components?.DatePicker
+      },
+      Image: {
+        ...parentTheme.components.Image,
+        ...override.components?.Image
       }
     }
   };
@@ -567,6 +575,11 @@ import {
   forwardRef
 } from "react";
 
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter((value) => Boolean(value)).join(" ");
+}
+
 // src/components/Spinner/Spinner.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function Spinner({
@@ -612,42 +625,52 @@ var Button = forwardRef(function Button2({
   type = "button",
   ...props
 }, ref) {
-  const defaults = useComponentDefaults("Button");
+  const defaults = useComponentDefaults(
+    "Button"
+  );
   const resolvedVariant = variant ?? defaults.variant ?? "primary";
   const resolvedSize = size ?? defaults.size ?? "md";
-  const classes = [
-    "mb-button",
-    `mb-button--${resolvedVariant}`,
-    `mb-button--${resolvedSize}`,
-    className
-  ].filter(Boolean).join(" ");
-  const iconSize = {
-    sm: 16,
-    md: 18,
-    lg: 20
-  }[resolvedSize];
   return /* @__PURE__ */ jsxs4(
     "button",
     {
       ref,
       type,
-      className: classes,
+      className: cx(
+        "mb-button",
+        `mb-button--${resolvedVariant}`,
+        `mb-button--${resolvedSize}`,
+        loading ? "mb-button--loading" : void 0,
+        className
+      ),
       disabled: disabled || loading,
-      "aria-busy": loading || void 0,
       ...props,
       children: [
         loading ? /* @__PURE__ */ jsx6(
           Spinner,
           {
-            size: 14,
-            thickness: 2,
-            color: "currentColor",
-            trackColor: "transparent",
-            "aria-hidden": "true"
+            size: 16
+          }
+        ) : leftSection && /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "mb-button__icon",
+            children: /* @__PURE__ */ jsx6(Icon, { size: 18, children: leftSection })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "mb-button__label",
+            children
+          }
+        ),
+        rightSection && !loading ? /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "mb-button__icon",
+            children: /* @__PURE__ */ jsx6(Icon, { size: 18, children: rightSection })
           }
-        ) : leftSection != null ? /* @__PURE__ */ jsx6(Icon, { size: iconSize, children: leftSection }) : null,
-        /* @__PURE__ */ jsx6("span", { className: "mb-button__content", children }),
-        !loading && rightSection != null ? /* @__PURE__ */ jsx6(Icon, { size: iconSize, children: rightSection }) : null
+        ) : null
       ]
     }
   );
@@ -882,11 +905,6 @@ function useLockScroll(locked = true) {
   }, [locked]);
 }
 
-// src/utils/cx.ts
-function cx(...classes) {
-  return classes.filter((value) => Boolean(value)).join(" ");
-}
-
 // src/components/Portal/Portal.tsx
 import {
   useContext as useContext3,
@@ -6204,8 +6222,82 @@ function DatePicker({
   );
 }
 
+// src/components/Image/Image.tsx
+import {
+  forwardRef as forwardRef6,
+  useState as useState13
+} from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Image = forwardRef6(function Image2({
+  radius,
+  fit,
+  fallback,
+  className = "",
+  src,
+  onError,
+  ...props
+}, ref) {
+  const defaults = useComponentDefaults(
+    "Image"
+  );
+  const [
+    currentSrc,
+    setCurrentSrc
+  ] = useState13(
+    src
+  );
+  const resolvedRadius = radius ?? defaults.radius ?? "md";
+  const resolvedFit = fit ?? defaults.fit ?? "cover";
+  return /* @__PURE__ */ jsx33(
+    "img",
+    {
+      ref,
+      src: currentSrc,
+      className: cx(
+        "mb-image",
+        `mb-image--${resolvedRadius}`,
+        `mb-image--${resolvedFit}`,
+        className
+      ),
+      onError: (event) => {
+        if (fallback && currentSrc !== fallback) {
+          setCurrentSrc(
+            fallback
+          );
+        }
+        onError?.(
+          event
+        );
+      },
+      ...props
+    }
+  );
+});
+
+// src/components/Highlight/Highlight.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+function Highlight({
+  children,
+  color = "primary",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx34(
+    "span",
+    {
+      className: cx(
+        "mb-highlight",
+        `mb-highlight--${color}`,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
 // src/components/Card/Card.tsx
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function Card({
   padding,
   radius,
@@ -6233,9 +6325,9 @@ function Card({
       className: classes,
       ...props,
       children: [
-        header != null ? /* @__PURE__ */ jsx33("div", { className: "mb-card__header", children: header }) : null,
-        /* @__PURE__ */ jsx33("div", { className: "mb-card__content", children }),
-        footer != null ? /* @__PURE__ */ jsx33("div", { className: "mb-card__footer", children: footer }) : null
+        header != null ? /* @__PURE__ */ jsx35("div", { className: "mb-card__header", children: header }) : null,
+        /* @__PURE__ */ jsx35("div", { className: "mb-card__content", children }),
+        footer != null ? /* @__PURE__ */ jsx35("div", { className: "mb-card__footer", children: footer }) : null
       ]
     }
   );
@@ -6243,10 +6335,10 @@ function Card({
 
 // src/components/IconButton/IconButton.tsx
 import {
-  forwardRef as forwardRef6
+  forwardRef as forwardRef7
 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var IconButton = forwardRef6(function IconButton2({
+import { jsx as jsx36 } from "react/jsx-runtime";
+var IconButton = forwardRef7(function IconButton2({
   icon,
   label,
   variant,
@@ -6271,7 +6363,7 @@ var IconButton = forwardRef6(function IconButton2({
     md: 18,
     lg: 20
   }[resolvedSize];
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     "button",
     {
       ref,
@@ -6281,7 +6373,7 @@ var IconButton = forwardRef6(function IconButton2({
       "aria-label": label,
       "aria-busy": loading || void 0,
       ...props,
-      children: loading ? /* @__PURE__ */ jsx34(
+      children: loading ? /* @__PURE__ */ jsx36(
         Spinner,
         {
           size: 14,
@@ -6290,13 +6382,13 @@ var IconButton = forwardRef6(function IconButton2({
           trackColor: "transparent",
           "aria-hidden": "true"
         }
-      ) : /* @__PURE__ */ jsx34(Icon, { size: iconSize, children: icon })
+      ) : /* @__PURE__ */ jsx36(Icon, { size: iconSize, children: icon })
     }
   );
 });
 
 // src/components/Input/Input.tsx
-import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 function Input({
   leftSection,
   rightSection,
@@ -6314,8 +6406,8 @@ function Input({
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs28("div", { className: classes, children: [
-    leftSection ? /* @__PURE__ */ jsx35("span", { className: "mb-input__section mb-input__section--left", children: /* @__PURE__ */ jsx35(Icon, { size: 18, children: leftSection }) }) : null,
-    /* @__PURE__ */ jsx35(
+    leftSection ? /* @__PURE__ */ jsx37("span", { className: "mb-input__section mb-input__section--left", children: /* @__PURE__ */ jsx37(Icon, { size: 18, children: leftSection }) }) : null,
+    /* @__PURE__ */ jsx37(
       "input",
       {
         className: "mb-input__control",
@@ -6324,17 +6416,17 @@ function Input({
         ...props
       }
     ),
-    rightSection ? /* @__PURE__ */ jsx35("span", { className: "mb-input__section mb-input__section--right", children: /* @__PURE__ */ jsx35(Icon, { size: 18, children: rightSection }) }) : null
+    rightSection ? /* @__PURE__ */ jsx37("span", { className: "mb-input__section mb-input__section--right", children: /* @__PURE__ */ jsx37(Icon, { size: 18, children: rightSection }) }) : null
   ] });
 }
 
 // src/components/Textarea/Textarea.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Textarea({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     "textarea",
     {
       className: `mb-textarea ${className}`,
@@ -6344,7 +6436,7 @@ function Textarea({
 }
 
 // src/components/Text/Text.tsx
-import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function Text({
   as: Component = "p",
   size,
@@ -6379,16 +6471,16 @@ function Text({
       className: classes,
       ...props,
       children: [
-        leftSection != null ? /* @__PURE__ */ jsx37(Icon, { size: iconSize, children: leftSection }) : null,
-        /* @__PURE__ */ jsx37("span", { className: "mb-text__content", children }),
-        rightSection != null ? /* @__PURE__ */ jsx37(Icon, { size: iconSize, children: rightSection }) : null
+        leftSection != null ? /* @__PURE__ */ jsx39(Icon, { size: iconSize, children: leftSection }) : null,
+        /* @__PURE__ */ jsx39("span", { className: "mb-text__content", children }),
+        rightSection != null ? /* @__PURE__ */ jsx39(Icon, { size: iconSize, children: rightSection }) : null
       ]
     }
   );
 }
 
 // src/components/Title/Title.tsx
-import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 function Title({
   order,
   size,
@@ -6432,9 +6524,9 @@ function Title({
       className: classes,
       ...props,
       children: [
-        leftSection != null ? /* @__PURE__ */ jsx38(Icon, { size: iconSize, children: leftSection }) : null,
-        /* @__PURE__ */ jsx38("span", { className: "mb-title__content", children }),
-        rightSection != null ? /* @__PURE__ */ jsx38(Icon, { size: iconSize, children: rightSection }) : null
+        leftSection != null ? /* @__PURE__ */ jsx40(Icon, { size: iconSize, children: leftSection }) : null,
+        /* @__PURE__ */ jsx40("span", { className: "mb-title__content", children }),
+        rightSection != null ? /* @__PURE__ */ jsx40(Icon, { size: iconSize, children: rightSection }) : null
       ]
     }
   );
@@ -6453,8 +6545,10 @@ export {
   Drawer,
   FileInput,
   Group,
+  Highlight,
   Icon,
   IconButton,
+  Image,
   Input,
   MainbasePortalContext,
   MainbaseProvider,