@tutti-os/ui-system 0.0.293 → 0.0.295

package/dist/{chunk-Q3PM56DM.js → chunk-V2BIMM2U.js}

@@ -1985,6 +1985,96 @@ function DropdownMenuSubContent({
   ) });
 }
 
+// src/components/image-with-fallback/image-with-fallback.tsx
+import {
+  useEffect as useEffect4,
+  useRef as useRef3,
+  useState as useState5
+} from "react";
+import { Fragment as Fragment3, jsx as jsx17 } from "react/jsx-runtime";
+import { createElement } from "react";
+var DEFAULT_RETRY_COUNT = 1;
+var DEFAULT_RETRY_DELAY_MS = 150;
+var MAX_RETRY_COUNT = 3;
+function normalizeRetryCount(value) {
+  if (!Number.isFinite(value)) {
+    return DEFAULT_RETRY_COUNT;
+  }
+  return Math.min(MAX_RETRY_COUNT, Math.max(0, Math.floor(value)));
+}
+function normalizeRetryDelay(value) {
+  if (!Number.isFinite(value)) {
+    return DEFAULT_RETRY_DELAY_MS;
+  }
+  return Math.max(0, Math.floor(value));
+}
+function ImageWithFallback({
+  fallback = null,
+  onError,
+  retryCount = DEFAULT_RETRY_COUNT,
+  retryDelayMs = DEFAULT_RETRY_DELAY_MS,
+  src,
+  ...imageProps
+}) {
+  const normalizedSrc = src?.trim() ?? "";
+  const maxRetries = normalizeRetryCount(retryCount);
+  const delayMs = normalizeRetryDelay(retryDelayMs);
+  const retryTimerRef = useRef3(null);
+  const [deliveryState, setDeliveryState] = useState5({
+    attempt: 0,
+    phase: "ready",
+    src: normalizedSrc
+  });
+  useEffect4(() => {
+    if (deliveryState.src !== normalizedSrc) {
+      setDeliveryState({ attempt: 0, phase: "ready", src: normalizedSrc });
+    }
+    if (retryTimerRef.current !== null) {
+      clearTimeout(retryTimerRef.current);
+      retryTimerRef.current = null;
+    }
+  }, [deliveryState.src, normalizedSrc]);
+  useEffect4(
+    () => () => {
+      if (retryTimerRef.current !== null) {
+        clearTimeout(retryTimerRef.current);
+      }
+    },
+    []
+  );
+  const currentState = deliveryState.src === normalizedSrc ? deliveryState : { attempt: 0, phase: "ready", src: normalizedSrc };
+  if (normalizedSrc.length === 0 || currentState.phase === "failed" || currentState.phase === "retrying") {
+    return /* @__PURE__ */ jsx17(Fragment3, { children: fallback });
+  }
+  return /* @__PURE__ */ createElement(
+    "img",
+    {
+      ...imageProps,
+      key: `${normalizedSrc}:${currentState.attempt}`,
+      src: normalizedSrc,
+      onError: (event) => {
+        onError?.(event);
+        if (currentState.attempt >= maxRetries) {
+          setDeliveryState(
+            (previous) => previous.src === normalizedSrc ? { ...previous, phase: "failed" } : previous
+          );
+          return;
+        }
+        const nextAttempt = currentState.attempt + 1;
+        setDeliveryState(
+          (previous) => previous.src === normalizedSrc ? { attempt: nextAttempt, phase: "retrying", src: normalizedSrc } : previous
+        );
+        retryTimerRef.current = setTimeout(() => {
+          retryTimerRef.current = null;
+          setDeliveryState(
+            (previous) => previous.src === normalizedSrc && previous.attempt === nextAttempt && previous.phase === "retrying" ? { ...previous, phase: "ready" } : previous
+          );
+        }, delayMs);
+      }
+    }
+  );
+}
+
 // src/components/mention-pill/mention-pill.tsx
 import * as React8 from "react";
 
@@ -1993,12 +2083,12 @@ import * as React7 from "react";
 
 // src/components/tooltip/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -2010,17 +2100,17 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+  return /* @__PURE__ */ jsx18(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx18(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
+  return /* @__PURE__ */ jsx18(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
 }
 function TooltipContent({
   className,
@@ -2029,7 +2119,7 @@ function TooltipContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(TooltipPortal, { children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(TooltipPortal, { children: /* @__PURE__ */ jsx18(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -2046,7 +2136,7 @@ function TooltipContent({
 }
 
 // src/components/mention-pill/truncating-pill-label.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function useTextOverflow(watch, descendantSelector) {
   const ref = React7.useRef(null);
   const [overflowing, setOverflowing] = React7.useState(false);
@@ -2083,7 +2173,7 @@ function TruncatingPillLabel({
   withTooltipProvider = true
 }) {
   const { ref: labelRef, overflowing } = useTextOverflow(tooltip);
-  const label = /* @__PURE__ */ jsx18(
+  const label = /* @__PURE__ */ jsx19(
     "span",
     {
       ref: labelRef,
@@ -2098,14 +2188,14 @@ function TruncatingPillLabel({
     return label;
   }
   const tooltipElement = /* @__PURE__ */ jsxs10(Tooltip, { children: [
-    /* @__PURE__ */ jsx18(TooltipTrigger, { asChild: true, children: label }),
-    overflowing ? /* @__PURE__ */ jsx18(TooltipContent, { className: "max-w-[min(420px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]", children: tooltip }) : null
+    /* @__PURE__ */ jsx19(TooltipTrigger, { asChild: true, children: label }),
+    overflowing ? /* @__PURE__ */ jsx19(TooltipContent, { className: "max-w-[min(420px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]", children: tooltip }) : null
   ] });
-  return withTooltipProvider ? /* @__PURE__ */ jsx18(TooltipProvider, { delayDuration: 200, children: tooltipElement }) : tooltipElement;
+  return withTooltipProvider ? /* @__PURE__ */ jsx19(TooltipProvider, { delayDuration: 200, children: tooltipElement }) : tooltipElement;
 }
 
 // src/components/mention-pill/mention-pill.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var mentionPillTokenByKind = {
   app: "var(--rich-text-folder)",
   issue: "var(--rich-text-mention-issue)",
@@ -2173,7 +2263,7 @@ function MentionPill({
               iconContainerProps?.className
             ),
             children: [
-              normalizedIconUrl && failedIconUrl !== normalizedIconUrl ? /* @__PURE__ */ jsx19(
+              normalizedIconUrl && failedIconUrl !== normalizedIconUrl ? /* @__PURE__ */ jsx20(
                 "img",
                 {
                   src: normalizedIconUrl,
@@ -2189,7 +2279,7 @@ function MentionPill({
                     setFailedIconUrl(normalizedIconUrl);
                   }
                 }
-              ) : /* @__PURE__ */ jsx19(
+              ) : /* @__PURE__ */ jsx20(
                 Icon,
                 {
                   ...fallbackIconProps,
@@ -2202,7 +2292,7 @@ function MentionPill({
                   "data-mention-pill-fallback-icon": "true"
                 }
               ),
-              removable ? /* @__PURE__ */ jsx19(
+              removable ? /* @__PURE__ */ jsx20(
                 "button",
                 {
                   "aria-label": removeButtonProps?.["aria-label"],
@@ -2212,7 +2302,7 @@ function MentionPill({
                     "absolute top-1/2 left-1/2 inline-flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--text-secondary)] opacity-0 transition-opacity group-hover:opacity-100 hover:text-[var(--text-primary)] focus-visible:opacity-100",
                     removeButtonProps?.className
                   ),
-                  children: /* @__PURE__ */ jsx19(CloseIcon, { className: "size-3.5" })
+                  children: /* @__PURE__ */ jsx20(CloseIcon, { className: "size-3.5" })
                 }
               ) : null
             ]
@@ -2224,7 +2314,7 @@ function MentionPill({
             tooltip: tooltipEnabled ? tooltipText : "",
             withTooltipProvider,
             children: [
-              /* @__PURE__ */ jsx19("span", { children: label }),
+              /* @__PURE__ */ jsx20("span", { children: label }),
               summary ? /* @__PURE__ */ jsxs11("span", { className: "text-current", children: [
                 " ",
                 summary
@@ -2238,14 +2328,14 @@ function MentionPill({
 }
 
 // src/components/radio-indicator/radio-indicator.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function RadioIndicator({
   checked = false,
   disabled = false,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "span",
     {
       ...props,
@@ -2258,7 +2348,7 @@ function RadioIndicator({
         "inline-flex size-4 shrink-0 items-center justify-center rounded-full border-2 border-[var(--border-1)] bg-transparent transition-[border-color,background-color,box-shadow] data-[state=checked]:border-[var(--tutti-purple)] data-[state=unchecked]:hover:border-[color-mix(in_srgb,var(--text-primary)_40%,transparent)] data-disabled:cursor-not-allowed data-disabled:opacity-60",
         className
       ),
-      children: checked ? /* @__PURE__ */ jsx20(
+      children: checked ? /* @__PURE__ */ jsx21(
         "span",
         {
           "aria-hidden": "true",
@@ -2271,13 +2361,13 @@ function RadioIndicator({
 
 // src/components/resizable/resizable.tsx
 import * as ResizablePrimitive from "react-resizable-panels";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function ResizablePanelGroup({
   className,
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ResizablePrimitive.Group,
     {
       "data-orientation": orientation,
@@ -2292,14 +2382,14 @@ function ResizablePanelGroup({
   );
 }
 function ResizablePanel(props) {
-  return /* @__PURE__ */ jsx21(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+  return /* @__PURE__ */ jsx22(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({
   className,
   withHandle,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ResizablePrimitive.Separator,
     {
       "data-slot": "resizable-handle",
@@ -2308,14 +2398,14 @@ function ResizableHandle({
         className
       ),
       ...props,
-      children: withHandle ? /* @__PURE__ */ jsx21("div", { className: "z-10 flex items-center justify-center rounded-full bg-border/85 opacity-0 transition-[background-color,opacity] group-hover:bg-border group-hover:opacity-100 group-focus-visible:bg-border group-focus-visible:opacity-100 group-aria-[orientation=horizontal]:h-[3px] group-aria-[orientation=horizontal]:w-10 group-aria-[orientation=vertical]:h-10 group-aria-[orientation=vertical]:w-[3px]" }) : null
+      children: withHandle ? /* @__PURE__ */ jsx22("div", { className: "z-10 flex items-center justify-center rounded-full bg-border/85 opacity-0 transition-[background-color,opacity] group-hover:bg-border group-hover:opacity-100 group-focus-visible:bg-border group-focus-visible:opacity-100 group-aria-[orientation=horizontal]:h-[3px] group-aria-[orientation=horizontal]:w-10 group-aria-[orientation=vertical]:h-10 group-aria-[orientation=vertical]:w-[3px]" }) : null
     }
   );
 }
 
 // src/components/scroll-area/scroll-area.tsx
 import * as React9 from "react";
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var MIN_THUMB_SIZE_PX = 24;
 function ScrollArea({
   className,
@@ -2352,9 +2442,9 @@ function ScrollArea({
     ...props
   };
   if (scrollbarMode === "native") {
-    return /* @__PURE__ */ jsx22(NativeScrollArea, { ...implementationProps, children });
+    return /* @__PURE__ */ jsx23(NativeScrollArea, { ...implementationProps, children });
   }
-  return /* @__PURE__ */ jsx22(CustomScrollArea, { ...implementationProps, children });
+  return /* @__PURE__ */ jsx23(CustomScrollArea, { ...implementationProps, children });
 }
 function NativeScrollArea({
   className,
@@ -2374,7 +2464,7 @@ function NativeScrollArea({
   ...props
 }) {
   const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     ScrollAreaFrame,
     {
       ...props,
@@ -2455,7 +2545,7 @@ function CustomScrollArea({
       viewportTestId,
       children: [
         children,
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           ScrollAreaScrollbar,
           {
             active: active || alwaysVisible,
@@ -2480,7 +2570,7 @@ function ScrollAreaFrame({
   viewportTestId,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       "data-slot": "scroll-area",
@@ -2490,7 +2580,7 @@ function ScrollAreaFrame({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         "div",
         {
           ...viewportProps,
@@ -2501,7 +2591,7 @@ function ScrollAreaFrame({
             "size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
             viewportClassName
           ),
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx23(
             "div",
             {
               ref: contentRef,
@@ -2716,7 +2806,7 @@ function ScrollAreaScrollbar({
   React9.useEffect(() => {
     scheduleSync();
   });
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       ref: trackRef,
@@ -2734,7 +2824,7 @@ function ScrollAreaScrollbar({
       onPointerEnter: () => setTrackActive(true),
       onPointerLeave: () => setTrackActive(false),
       onPointerDown: handleTrackPointerDown,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         "div",
         {
           ref: thumbRef,
@@ -2753,7 +2843,7 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       "data-slot": "scroll-area-scrollbar",
@@ -2761,7 +2851,7 @@ function ScrollBar({
       className: cn(scrollbarClassName(orientation), className),
       style: scrollbarStyle({ active: false, orientation, scrollable: true }),
       ...props,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         "div",
         {
           "data-slot": "scroll-area-thumb",
@@ -2882,17 +2972,17 @@ function clamp(value, min, max) {
 
 // src/components/select/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx24(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     SelectPrimitive.Group,
     {
       "data-slot": "select-group",
@@ -2904,7 +2994,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx24(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -2927,7 +3017,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx24(
           ChevronDownIcon,
           {
             className: cn("pointer-events-none size-4", "text-current")
@@ -2945,7 +3035,7 @@ function SelectContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx24(
     SelectPrimitive.Content,
     {
       asChild: true,
@@ -2965,8 +3055,8 @@ function SelectContent({
           ),
           style: { zIndex: "var(--z-popover)", ...style },
           children: [
-            /* @__PURE__ */ jsx23(SelectScrollUpButton, {}),
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx24(
               SelectPrimitive.Viewport,
               {
                 "data-position": position,
@@ -2976,7 +3066,7 @@ function SelectContent({
                 children
               }
             ),
-            /* @__PURE__ */ jsx23(SelectScrollDownButton, {})
+            /* @__PURE__ */ jsx24(SelectScrollDownButton, {})
           ]
         }
       )
@@ -2987,7 +3077,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     SelectPrimitive.Label,
     {
       "data-slot": "select-label",
@@ -3003,7 +3093,7 @@ function SelectSplitLayout({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       "data-slot": "select-split-layout",
@@ -3019,7 +3109,7 @@ function SelectSplitColumn({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       "data-slot": "select-split-column",
@@ -3032,7 +3122,7 @@ function SelectSplitColumnLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       "data-slot": "select-split-column-label",
@@ -3048,7 +3138,7 @@ function SelectSplitColumnItems({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       "data-slot": "select-split-column-items",
@@ -3064,7 +3154,7 @@ function SelectSplitDivider({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       "aria-hidden": "true",
@@ -3090,14 +3180,14 @@ function SelectItem({
       className: cn("w-full", menuItemWithIndicatorClassName, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx23("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx24(
           CheckIcon,
           {
             className: "pointer-events-none text-[var(--tutti-purple)]",
             "data-slot": "select-item-forced-indicator"
           }
-        ) : /* @__PURE__ */ jsx23(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23(CheckIcon, { className: "pointer-events-none text-[var(--tutti-purple)]" }) }) }),
-        /* @__PURE__ */ jsx23(SelectPrimitive.ItemText, { children })
+        ) : /* @__PURE__ */ jsx24(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx24(CheckIcon, { className: "pointer-events-none text-[var(--tutti-purple)]" }) }) }),
+        /* @__PURE__ */ jsx24(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -3106,7 +3196,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     SelectPrimitive.Separator,
     {
       "data-slot": "select-separator",
@@ -3122,7 +3212,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -3131,7 +3221,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx23(ChevronUpIcon, {})
+      children: /* @__PURE__ */ jsx24(ChevronUpIcon, {})
     }
   );
 }
@@ -3139,7 +3229,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -3148,21 +3238,21 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx23(ChevronDownIcon, {})
+      children: /* @__PURE__ */ jsx24(ChevronDownIcon, {})
     }
   );
 }
 
 // src/components/separator/separator.tsx
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -3178,7 +3268,7 @@ function Separator2({
 }
 
 // src/components/section-tabs/section-tabs.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function SectionTabs({
   tabs,
   value,
@@ -3187,7 +3277,7 @@ function SectionTabs({
   className,
   testId
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       "aria-label": ariaLabel,
@@ -3212,8 +3302,8 @@ function SectionTabs({
             type: "button",
             onClick: () => onValueChange(tab.value),
             children: [
-              /* @__PURE__ */ jsx25("span", { className: "min-w-0 truncate", children: tab.label }),
-              tab.count !== void 0 ? /* @__PURE__ */ jsx25("span", { className: "text-[15px] font-semibold leading-5 text-[inherit]", children: tab.count }) : null
+              /* @__PURE__ */ jsx26("span", { className: "min-w-0 truncate", children: tab.label }),
+              tab.count !== void 0 ? /* @__PURE__ */ jsx26("span", { className: "text-[15px] font-semibold leading-5 text-[inherit]", children: tab.count }) : null
             ]
           },
           tab.value
@@ -3224,8 +3314,8 @@ function SectionTabs({
 }
 
 // src/components/segment-bar/segment-bar.tsx
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState8 } from "react";
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState9 } from "react";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function SegmentBar({
   segments,
   value,
@@ -3234,9 +3324,9 @@ function SegmentBar({
   className,
   testId
 }) {
-  const containerRef = useRef5(null);
-  const buttonRefs = useRef5({});
-  const [indicator, setIndicator] = useState8({
+  const containerRef = useRef6(null);
+  const buttonRefs = useRef6({});
+  const [indicator, setIndicator] = useState9({
     left: 0,
     width: 0,
     ready: false
@@ -3258,7 +3348,7 @@ function SegmentBar({
       (current) => current.left === next.left && current.width === next.width && current.ready === next.ready ? current : next
     );
   }, [segments, value]);
-  useEffect6(() => {
+  useEffect7(() => {
     const container = containerRef.current;
     if (!container || typeof ResizeObserver === "undefined") {
       return;
@@ -3299,7 +3389,7 @@ function SegmentBar({
       ref: containerRef,
       role: "tablist",
       children: [
-        indicator.ready ? /* @__PURE__ */ jsx26(
+        indicator.ready ? /* @__PURE__ */ jsx27(
           "span",
           {
             "aria-hidden": "true",
@@ -3310,7 +3400,7 @@ function SegmentBar({
         ) : null,
         segments.map((segment) => {
           const isActive = value === segment.value;
-          return /* @__PURE__ */ jsx26(
+          return /* @__PURE__ */ jsx27(
             "button",
             {
               "aria-selected": isActive,
@@ -3340,9 +3430,9 @@ function SegmentBar({
 }
 
 // src/components/shortcut-badge/shortcut-badge.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function ShortcutBadge({ className, ...props }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "kbd",
     {
       "data-slot": "shortcut-badge",
@@ -3358,7 +3448,7 @@ function ShortcutBadge({ className, ...props }) {
 // src/components/slider/slider.tsx
 import * as React10 from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function Slider({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -3388,12 +3478,12 @@ function Slider({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           SliderPrimitive.Track,
           {
             "data-slot": "slider-track",
             className: "relative grow overflow-hidden rounded-full bg-[var(--transparency-block)] data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
-            children: /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsx29(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -3402,7 +3492,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ jsx28(
+        Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ jsx29(
           SliderPrimitive.Thumb,
           {
             "aria-disabled": props.disabled || void 0,
@@ -3423,9 +3513,9 @@ import {
   Toaster as SonnerToaster,
   toast
 } from "sonner";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Toaster({ toastOptions, style, ...props }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     SonnerToaster,
     {
       closeButton: true,
@@ -3434,11 +3524,11 @@ function Toaster({ toastOptions, style, ...props }) {
       position: "top-right",
       visibleToasts: 4,
       icons: {
-        error: /* @__PURE__ */ jsx29(FailedFilledIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx29(WarningLinedIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx29(LoadingIcon, { className: "size-4 animate-spin" }),
-        success: /* @__PURE__ */ jsx29(SuccessFilledIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx29(WarningFilledIcon, { className: "size-4" })
+        error: /* @__PURE__ */ jsx30(FailedFilledIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx30(WarningLinedIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx30(LoadingIcon, { className: "size-4 animate-spin" }),
+        success: /* @__PURE__ */ jsx30(SuccessFilledIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx30(WarningFilledIcon, { className: "size-4" })
       },
       style: {
         "--normal-bg": "var(--background-fronted)",
@@ -3467,7 +3557,7 @@ function Toaster({ toastOptions, style, ...props }) {
 }
 
 // src/components/spinner/spinner.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Spinner({
   className,
   size = 16,
@@ -3476,7 +3566,7 @@ function Spinner({
   testId,
   trackColor
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     LoadingIcon,
     {
       "data-slot": "spinner",
@@ -3564,7 +3654,7 @@ function useComposedRefs(...refs) {
 }
 
 // src/components/sortable/sortable.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var orientationConfig = {
   vertical: {
     modifiers: [restrictToVerticalAxis, restrictToParentElement],
@@ -3702,11 +3792,11 @@ function Sortable(props) {
       flatCursor
     ]
   );
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     SortableRootContext.Provider,
     {
       value: contextValue,
-      children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsx32(
         DndContext,
         {
           collisionDetection: collisionDetection ?? config.collisionDetection,
@@ -3735,12 +3825,12 @@ function SortableContent(props) {
   } = props;
   const context = useSortableContext(CONTENT_NAME);
   const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
-  return /* @__PURE__ */ jsx31(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx32(
     SortableContext,
     {
       items: context.items,
       strategy: strategyProp ?? context.strategy,
-      children: withoutSlot ? children : /* @__PURE__ */ jsx31(
+      children: withoutSlot ? children : /* @__PURE__ */ jsx32(
         ContentPrimitive,
         {
           "data-slot": "sortable-content",
@@ -3817,7 +3907,7 @@ function SortableItem(props) {
     [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]
   );
   const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
-  return /* @__PURE__ */ jsx31(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx32(
     ItemPrimitive,
     {
       id,
@@ -3854,7 +3944,7 @@ function SortableItemHandle(props) {
     itemContext.setActivatorNodeRef(node);
   });
   const HandlePrimitive = asChild ? SlotPrimitive.Slot : "button";
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     HandlePrimitive,
     {
       type: "button",
@@ -3913,14 +4003,14 @@ function SortableOverlay(props) {
   const container = containerProp ?? (mounted ? globalThis.document?.body : null);
   if (!container) return null;
   return ReactDOM.createPortal(
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(
       DragOverlay,
       {
         modifiers: context.modifiers,
         className: cn(!context.flatCursor && "cursor-grabbing"),
         ...overlayProps,
         dropAnimation: prefersReducedMotion ? null : callerDropAnimation === void 0 ? defaultDropAnimation : callerDropAnimation,
-        children: /* @__PURE__ */ jsx31(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
+        children: /* @__PURE__ */ jsx32(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
       }
     ),
     container
@@ -3929,7 +4019,7 @@ function SortableOverlay(props) {
 
 // src/components/status-dot/status-dot.tsx
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var statusDotVariants = cva4("inline-flex shrink-0 rounded-full", {
   variants: {
     tone: {
@@ -3963,7 +4053,7 @@ function StatusDot({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "span",
     {
       "aria-hidden": ariaLabel ? void 0 : true,
@@ -3981,7 +4071,7 @@ function StatusDot({
 
 // src/components/switch/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Switch({
   className,
   disabled,
@@ -3989,7 +4079,7 @@ function Switch({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -4002,12 +4092,12 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
           className: "pointer-events-none inline-flex items-center justify-center rounded-full bg-[var(--white-stationary)] ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[10px] group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0",
-          children: loading ? /* @__PURE__ */ jsx33(
+          children: loading ? /* @__PURE__ */ jsx34(
             LoadingIcon,
             {
               "aria-hidden": "true",
@@ -4021,9 +4111,9 @@ function Switch({
 }
 
 // src/components/textarea/textarea.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "textarea",
     {
       "data-slot": "textarea",
@@ -4040,13 +4130,13 @@ function Textarea({ className, ...props }) {
 import * as React13 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
 var toastDefaultDurationMs = 3e3;
 function ToastProvider({
   duration = toastDefaultDurationMs,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(ToastPrimitive.Provider, { duration, ...props });
+  return /* @__PURE__ */ jsx36(ToastPrimitive.Provider, { duration, ...props });
 }
 var ToastVisualContext = React13.createContext(null);
 var toastStatusIconByVariant = {
@@ -4104,7 +4194,7 @@ function ToastRoot({
   ...props
 }) {
   const isDestructive = variant === "destructive";
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     ToastPrimitive.Root,
     {
       "aria-busy": busy,
@@ -4121,7 +4211,7 @@ function ToastRoot({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsx35(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx35("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
+      children: /* @__PURE__ */ jsx36(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx36("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
     }
   );
 }
@@ -4142,7 +4232,7 @@ function ToastTitle({
       ),
       ...props,
       children: [
-        toastVisual?.busy ? /* @__PURE__ */ jsx35(
+        toastVisual?.busy ? /* @__PURE__ */ jsx36(
           Spinner,
           {
             className: "shrink-0 text-current",
@@ -4150,8 +4240,8 @@ function ToastTitle({
             strokeWidth: 2,
             trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
           }
-        ) : StatusIcon ? /* @__PURE__ */ jsx35(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
-        /* @__PURE__ */ jsx35("span", { className: "min-w-0 break-words", children: formatToastText(children) })
+        ) : StatusIcon ? /* @__PURE__ */ jsx36(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
+        /* @__PURE__ */ jsx36("span", { className: "min-w-0 break-words", children: formatToastText(children) })
       ]
     }
   );
@@ -4160,7 +4250,7 @@ function ToastDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     ToastPrimitive.Description,
     {
       "data-slot": "toast-description",
@@ -4176,7 +4266,7 @@ function ToastClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
@@ -4185,7 +4275,7 @@ function ToastClose({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx35(CloseIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx36(CloseIcon, { className: "size-4" })
     }
   );
 }
@@ -4194,7 +4284,7 @@ function ToastViewport({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     ToastPrimitive.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -4209,8 +4299,8 @@ function ToastViewport({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState10 } from "react";
-import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, useRef as useRef7, useState as useState11 } from "react";
+import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
   value,
@@ -4225,11 +4315,11 @@ function UnderlineTabs({
   scrollRightTestId,
   preventMouseDownDefault = false
 }) {
-  const viewportRef = useRef6(null);
-  const rowRef = useRef6(null);
-  const buttonRefs = useRef6({});
-  const [indicatorStyle, setIndicatorStyle] = useState10({ left: 0, width: 0 });
-  const [overflow, setOverflow] = useState10({
+  const viewportRef = useRef7(null);
+  const rowRef = useRef7(null);
+  const buttonRefs = useRef7({});
+  const [indicatorStyle, setIndicatorStyle] = useState11({ left: 0, width: 0 });
+  const [overflow, setOverflow] = useState11({
     canScrollLeft: false,
     canScrollRight: false
   });
@@ -4250,7 +4340,7 @@ function UnderlineTabs({
       (current) => current.left === nextStyle.left && current.width === nextStyle.width ? current : nextStyle
     );
   }, [tabs, value]);
-  useEffect8(() => {
+  useEffect9(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -4305,7 +4395,7 @@ function UnderlineTabs({
       "data-testid": testId,
       role: "tablist",
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "div",
           {
             ref: viewportRef,
@@ -4350,14 +4440,14 @@ function UnderlineTabs({
                         onClick: () => onValueChange(tab.value),
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
-                          /* @__PURE__ */ jsx36("span", { children: tab.label }),
-                          tab.count !== void 0 ? /* @__PURE__ */ jsx36("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
+                          /* @__PURE__ */ jsx37("span", { children: tab.label }),
+                          tab.count !== void 0 ? /* @__PURE__ */ jsx37("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
                         ]
                       },
                       tab.value
                     );
                   }),
-                  /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsx37(
                     "div",
                     {
                       "aria-hidden": true,
@@ -4374,7 +4464,7 @@ function UnderlineTabs({
             )
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "button",
           {
             "aria-label": scrollLeftLabel,
@@ -4385,10 +4475,10 @@ function UnderlineTabs({
             disabled: !overflow.canScrollLeft,
             type: "button",
             onClick: () => scrollTabs("left"),
-            children: /* @__PURE__ */ jsx36(ArrowLeftIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx37(ArrowLeftIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "button",
           {
             "aria-label": scrollRightLabel,
@@ -4399,7 +4489,7 @@ function UnderlineTabs({
             disabled: !overflow.canScrollRight,
             type: "button",
             onClick: () => scrollTabs("right"),
-            children: /* @__PURE__ */ jsx36(ArrowRightIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx37(ArrowRightIcon, { size: 16 })
           }
         )
       ]
@@ -4410,7 +4500,7 @@ function UnderlineTabs({
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
 import * as React14 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
 var MENU_BOUNDARY_PADDING = 8;
 function clampMenuCoordinate(origin, size, viewportExtent, padding) {
@@ -4680,7 +4770,7 @@ var ViewportMenuSurface = React14.forwardRef(function ViewportMenuSurface2({
   }
   const portalTarget = resolvedPlacement.portalTarget ?? document.body;
   return createPortal3(
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       MenuSurface,
       {
         ...rest,
@@ -4786,6 +4876,7 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  ImageWithFallback,
   TooltipProvider,
   Tooltip,
   TooltipTrigger,
@@ -4842,4 +4933,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-Q3PM56DM.js.map
+//# sourceMappingURL=chunk-V2BIMM2U.js.map