@espressif/dashboard-ui-components 1.1.3 → 1.2.0

package/dist/{chunk-EF2WYOVZ.js → chunk-KF3NDMZW.js}

@@ -1,9 +1,9 @@
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Label, Badge, Popover, PopoverTrigger, PopoverContent, resolveVariantStyles, VariantGradientUnderlay, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, VARIANT_GRADIENT_BACKDROP_BASE, SILVER_GRADIENT_BACKDROP, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, arbitraryGradientBackgroundImage, SilverShineOverlay, SilverMetallicBorderOverlay, buttonGroupVariants, useIsInView } from './chunk-JPMN2UMF.js';
-import { Button, Input, Tooltip2, TooltipProvider, buttonVariants as buttonVariants$1, inputLabelClassName, CopyButton, Link, Tooltip, TooltipTrigger, TooltipContent, HighlightItem, Slot as Slot$1, Highlight, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem } from './chunk-34PXJOCS.js';
+import { Button, inputLabelClassName, Input, Tooltip2, TooltipProvider, buttonVariants as buttonVariants$1, CopyButton, Link, Tooltip, TooltipTrigger, TooltipContent, HighlightItem, Slot as Slot$1, Highlight, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem } from './chunk-34PXJOCS.js';
 import { getStrictContext, buttonVariants, Separator, CollapsibleContent, Collapsible, CollapsibleTrigger, Skeleton, Avatar, AvatarFallback, useControlledState } from './chunk-F5P6S7K2.js';
 import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
 import { __commonJS, __toESM } from './chunk-TRTQSARU.js';
-import { ChevronDown, ChevronUp, Check, Upload, X, LoaderCircle, Triangle, Info, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, FileCheck, CheckCheck, TriangleAlert, CircleX, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, ChevronLeft, Columns2, ChevronsRight, ChevronsLeft, XIcon, MoveLeft, CircleIcon, Bolt, Plus, ArrowRight, Trash2, Clock, XCircle, CheckCircle2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, Upload, X, LoaderCircle, Triangle, Info, MinusIcon, ArrowLeft, ArrowRight, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, FileCheck, CheckCheck, TriangleAlert, CircleX, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, ChevronLeft, Columns2, ChevronsRight, ChevronsLeft, XIcon, MoveLeft, CircleIcon, Bolt, Plus, Trash2, Clock, XCircle, CheckCircle2 } from 'lucide-react';
 import * as React8 from 'react';
 import React8__default, { forwardRef, useMemo, isValidElement, useRef, useState, useCallback, useLayoutEffect, useEffect, useId, Fragment as Fragment$1, Children, cloneElement, createElement } from 'react';
 import { Switch as Switch$1, ToggleGroup as ToggleGroup$1, Dialog as Dialog$1, Accordion as Accordion$1 } from 'radix-ui';
@@ -19,6 +19,9 @@ import { RadioGroup as RadioGroup$1 } from '@base-ui-components/react/radio-grou
 import { Radio as Radio$1 } from '@base-ui-components/react/radio';
 import * as RechartsPrimitive from 'recharts';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, AreaChart as AreaChart$1, Area, LineChart as LineChart$1, Line, ComposedChart as ComposedChart$1, Cell, PieChart, Pie, Treemap } from 'recharts';
+import { REGEXP_ONLY_DIGITS_AND_CHARS, REGEXP_ONLY_DIGITS, OTPInput, OTPInputContext } from 'input-otp';
+import Autoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
 import { Command as Command$1 } from 'cmdk';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import { format, endOfMonth, startOfMonth, sub, endOfDay, startOfDay, endOfYear, startOfYear, endOfWeek, startOfWeek, parse, isValid } from 'date-fns';
@@ -48783,7 +48786,9 @@ function IconAvatar({
   variant = "legacy",
   ring,
   children,
-  className
+  className,
+  discClassName,
+  discStyle
 }) {
   const tinted = resolveTintedBg(color);
   const tintedFill = resolveTintedFill(color);
@@ -48809,9 +48814,13 @@ function IconAvatar({
             {
               className: cn(
                 "absolute inset-0 z-0 overflow-hidden rounded-full",
-                variantSurface?.className ?? tintedFill.className
+                variantSurface?.className ?? tintedFill.className,
+                discClassName
               ),
-              style: variantSurface?.style ?? tintedFill.style,
+              style: {
+                ...variantSurface?.style ?? tintedFill.style,
+                ...discStyle
+              },
               children: variantSurface?.underlay
             }
           ),
@@ -48856,13 +48865,15 @@ function IconAvatar({
             "relative z-10 inline-flex items-center justify-center overflow-hidden rounded-full",
             variantSurface?.className ?? tinted.className,
             showRing && "ring-1 ring-offset-0.5 ring-offset-transparent",
-            ringBorder?.className
+            ringBorder?.className,
+            discClassName
           ),
           style: {
             width: size,
             height: size,
             ...variantSurface?.style ?? tinted.style,
-            ...ringBorder?.style
+            ...ringBorder?.style,
+            ...discStyle
           },
           children: [
             variantSurface?.underlay,
@@ -53368,6 +53379,620 @@ var TreemapChart = React8.forwardRef(
   }
 );
 TreemapChart.displayName = "TreemapChart";
+var LENGTH_MIN = 2;
+var LENGTH_MAX = 12;
+var LENGTH_DEFAULT = 6;
+var slotSizeClasses = {
+  sm: "h-8 w-8 text-xs",
+  default: "h-10 w-10 text-base md:text-sm",
+  lg: "h-12 w-12 text-lg"
+};
+var InputOTPSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "separator",
+    "aria-hidden": "true",
+    className: cn("flex items-center text-muted-foreground", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(MinusIcon, { size: 16 })
+  }
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+var SlotBox = ({
+  index: index2,
+  size,
+  rounded,
+  hasError,
+  cornerClass
+}) => {
+  const context = React8.useContext(OTPInputContext);
+  const slot = context.slots[index2];
+  if (!slot) return null;
+  const { char, hasFakeCaret, isActive } = slot;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-active": isActive || void 0,
+      className: cn(
+        "relative flex items-center justify-center border border-input bg-background font-medium text-foreground shadow-xs",
+        "transition-[box-shadow,border-color] duration-200 ease-in-out",
+        "ring-offset-background",
+        // Focused/active slot gets the same ring treatment `Input` uses on focus.
+        "data-[active=true]:z-10 data-[active=true]:ring-2 data-[active=true]:ring-ring data-[active=true]:ring-offset-2",
+        hasError && "border-destructive data-[active=true]:ring-destructive",
+        rounded ? "rounded-full" : "rounded-md",
+        // The wrapping row overrides the leading/trailing radii on interior
+        // slots so groups read as one connected pill/box.
+        cornerClass,
+        slotSizeClasses[size]
+      ),
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+      ]
+    }
+  );
+};
+function buildGroups(length2, separators) {
+  if (!separators || separators.length === 0) {
+    return [Array.from({ length: length2 }, (_, i) => i)];
+  }
+  const sum2 = separators.reduce((a, b) => a + b, 0);
+  if (sum2 !== length2) {
+    console.warn(
+      `[InputOTP] separators sum (${sum2}) does not equal length (${length2}); ignoring separators.`
+    );
+    return [Array.from({ length: length2 }, (_, i) => i)];
+  }
+  const groups = [];
+  let cursor = 0;
+  for (const size of separators) {
+    groups.push(Array.from({ length: size }, (_, i) => cursor + i));
+    cursor += size;
+  }
+  return groups;
+}
+function clampLength(raw) {
+  if (raw === void 0) return LENGTH_DEFAULT;
+  if (!Number.isFinite(raw)) return LENGTH_DEFAULT;
+  const rounded = Math.floor(raw);
+  if (rounded < LENGTH_MIN) {
+    console.warn(
+      `[InputOTP] length=${raw} is below the minimum ${LENGTH_MIN}; using ${LENGTH_MIN}.`
+    );
+    return LENGTH_MIN;
+  }
+  if (rounded > LENGTH_MAX) {
+    console.warn(
+      `[InputOTP] length=${raw} is above the maximum ${LENGTH_MAX}; using ${LENGTH_MAX}.`
+    );
+    return LENGTH_MAX;
+  }
+  return rounded;
+}
+var InputOTP = React8.forwardRef(
+  ({
+    length: length2,
+    allowAlphaNumeric,
+    regex,
+    separators,
+    value: value2,
+    defaultValue,
+    onChange,
+    onComplete,
+    label,
+    required,
+    size,
+    rounded,
+    disabled,
+    startHelperContent,
+    endHelperContent,
+    hintContent,
+    error,
+    errorContent,
+    id,
+    name: name2,
+    autoFocus,
+    autoComplete,
+    className,
+    containerClassName,
+    ...restProps
+  }, ref) => {
+    const autoId = React8.useId();
+    const inputId = id || autoId;
+    const effectiveLength = React8.useMemo(() => clampLength(length2), [length2]);
+    const effectiveSize = size || "default";
+    const hasError = !!error || !!errorContent;
+    const isControlled = value2 !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = React8.useState(
+      typeof defaultValue === "string" ? defaultValue : ""
+    );
+    const effectiveValue = isControlled ? value2 : uncontrolledValue;
+    const handleChange = React8.useCallback(
+      (next) => {
+        if (!isControlled) setUncontrolledValue(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange]
+    );
+    const pattern = regex && regex.length > 0 ? regex : allowAlphaNumeric ? REGEXP_ONLY_DIGITS_AND_CHARS : REGEXP_ONLY_DIGITS;
+    const groups = React8.useMemo(
+      () => buildGroups(effectiveLength, separators),
+      [effectiveLength, separators]
+    );
+    const helperStartId = `${inputId}-helper-start`;
+    const helperEndId = `${inputId}-helper-end`;
+    const describedBy = [
+      errorContent && `${inputId}-error`,
+      startHelperContent && !errorContent && helperStartId,
+      endHelperContent && !errorContent && helperEndId
+    ].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", "data-disabled": disabled || void 0, children: [
+      label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: inputLabelClassName, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent })
+      ] }),
+      !label && hintContent && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: hintContent }),
+      /* @__PURE__ */ jsx(
+        OTPInput,
+        {
+          ref,
+          id: inputId,
+          name: name2,
+          value: effectiveValue,
+          onChange: handleChange,
+          onComplete,
+          maxLength: effectiveLength,
+          pattern,
+          disabled,
+          required,
+          autoFocus,
+          autoComplete: autoComplete ?? "one-time-code",
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": describedBy,
+          containerClassName: cn(
+            "flex items-center gap-2 has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+            containerClassName
+          ),
+          ...restProps,
+          children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+            groupIndex > 0 && /* @__PURE__ */ jsx(InputOTPSeparator, {}),
+            /* @__PURE__ */ jsx("div", { className: cn("flex items-center", className), children: group.map((slotIndex, positionInGroup) => {
+              const isFirst = positionInGroup === 0;
+              const isLast = positionInGroup === group.length - 1;
+              const cornerClass = cn(
+                !isFirst && "-ms-px rounded-s-none",
+                !isLast && "rounded-e-none"
+              );
+              return /* @__PURE__ */ jsx(
+                SlotBox,
+                {
+                  index: slotIndex,
+                  size: effectiveSize,
+                  rounded: !!rounded,
+                  hasError,
+                  cornerClass
+                },
+                slotIndex
+              );
+            }) })
+          ] }, `g-${groupIndex}`))
+        }
+      ),
+      errorContent && /* @__PURE__ */ jsx("div", { id: `${inputId}-error`, className: "text-sm text-destructive", children: errorContent }),
+      startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", { id: helperStartId, className: "text-sm text-muted-foreground", children: startHelperContent }),
+      endHelperContent && !errorContent && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: helperEndId,
+          className: "text-sm text-end text-muted-foreground",
+          children: endHelperContent
+        }
+      )
+    ] });
+  }
+);
+InputOTP.displayName = "InputOTP";
+var CarouselContext = React8.createContext(null);
+function useCarousel() {
+  const context = React8.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+var Carousel = React8.forwardRef(
+  ({
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y"
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React8.useState(false);
+    const [canScrollNext, setCanScrollNext] = React8.useState(false);
+    const onSelect = React8.useCallback((api2) => {
+      if (!api2) return;
+      setCanScrollPrev(api2.canScrollPrev());
+      setCanScrollNext(api2.canScrollNext());
+    }, []);
+    const scrollPrev = React8.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+    const scrollNext = React8.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = React8.useCallback(
+      (event) => {
+        const isHorizontal = orientation === "horizontal";
+        const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        if (event.key === prevKey) {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === nextKey) {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext, orientation]
+    );
+    React8.useEffect(() => {
+      if (!api || !setApi) return;
+      setApi(api);
+    }, [api, setApi]);
+    React8.useEffect(() => {
+      if (!api) return;
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api?.off("select", onSelect);
+        api?.off("reInit", onSelect);
+      };
+    }, [api, onSelect]);
+    return /* @__PURE__ */ jsx(
+      CarouselContext.Provider,
+      {
+        value: {
+          carouselRef,
+          api,
+          opts,
+          orientation,
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            onKeyDownCapture: handleKeyDown,
+            className: cn("relative", className),
+            role: "region",
+            "aria-roledescription": "carousel",
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = React8.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+  return (
+    // Vertical carousels need an explicit viewport height so overflow clips at
+    // one slide instead of stretching to hold every slide. `h-full` chains up to
+    // whatever height the wrapper is given (e.g. `className="h-64"`).
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: carouselRef,
+        className: cn(
+          "overflow-hidden",
+          orientation === "vertical" && "h-full"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: cn(
+              "flex",
+              orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col h-full",
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    )
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React8.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-roledescription": "slide",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+var CarouselPrevious = React8.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        buttonVariants({ variant: "outline", size: "icon" }),
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal" ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = React8.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        buttonVariants({ variant: "outline", size: "icon" }),
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal" ? "right-2 top-1/2 -translate-y-1/2" : "bottom-2 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+var MAX_DOTS_MIN = 1;
+var MAX_DOTS_MAX = 10;
+var MAX_DOTS_DEFAULT = 5;
+var DELAY_MIN = 1e3;
+var DELAY_MAX = 1e4;
+var DELAY_DEFAULT = 3e3;
+function clamp2(value2, min, max, fallback) {
+  if (!Number.isFinite(value2)) return fallback;
+  return Math.min(max, Math.max(min, Math.floor(value2)));
+}
+function getDotWindow(total, maxDots, selectedIndex) {
+  if (total <= maxDots) {
+    return Array.from({ length: total }, (_, i) => i);
+  }
+  const half = Math.floor(maxDots / 2);
+  let start = selectedIndex - half;
+  if (start < 0) start = 0;
+  if (start > total - maxDots) start = total - maxDots;
+  return Array.from({ length: maxDots }, (_, i) => start + i);
+}
+function DotsRow({
+  total,
+  maxDots,
+  selectedIndex,
+  orientation,
+  onDotClick
+}) {
+  const window2 = getDotWindow(total, maxDots, selectedIndex);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-1.5",
+        orientation === "horizontal" ? "mt-3 flex-row" : "ml-3 flex-col"
+      ),
+      role: "tablist",
+      "aria-label": "Carousel pagination",
+      children: window2.map((index2) => {
+        const isActive = index2 === selectedIndex;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            "aria-label": `Go to slide ${index2 + 1}`,
+            onClick: () => onDotClick(index2),
+            className: cn(
+              "rounded-full transition-all duration-200 ease-out",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              orientation === "horizontal" ? isActive ? "h-2 w-4 bg-foreground" : "h-2 w-2 bg-muted-foreground/40 hover:bg-muted-foreground/60" : isActive ? "h-4 w-2 bg-foreground" : "h-2 w-2 bg-muted-foreground/40 hover:bg-muted-foreground/60"
+            )
+          },
+          index2
+        );
+      })
+    }
+  );
+}
+function Carousel2({
+  data: data2,
+  orientation = "horizontal",
+  navigation = "dots",
+  maxDots = MAX_DOTS_DEFAULT,
+  autoplay = false,
+  delay: delay2 = DELAY_DEFAULT,
+  loop = true,
+  onNext,
+  onPrevious,
+  renderNavigation,
+  className,
+  itemClassName
+}) {
+  const clampedMaxDots = clamp2(
+    maxDots,
+    MAX_DOTS_MIN,
+    MAX_DOTS_MAX,
+    MAX_DOTS_DEFAULT
+  );
+  const clampedDelay = clamp2(delay2, DELAY_MIN, DELAY_MAX, DELAY_DEFAULT);
+  const autoplayPlugin = React8.useRef(
+    autoplay ? Autoplay({ delay: clampedDelay, stopOnInteraction: true }) : null
+  );
+  React8.useEffect(() => {
+    const plugin = autoplayPlugin.current;
+    if (!plugin || !autoplay) return;
+    autoplayPlugin.current = Autoplay({
+      delay: clampedDelay,
+      stopOnInteraction: true
+    });
+  }, [autoplay, clampedDelay]);
+  const plugins = React8.useMemo(
+    () => autoplay && autoplayPlugin.current ? [autoplayPlugin.current] : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [autoplay, clampedDelay]
+  );
+  const [api, setApi] = React8.useState();
+  const [selectedIndex, setSelectedIndex] = React8.useState(0);
+  const [scrollSnaps, setScrollSnaps] = React8.useState([]);
+  const [canScrollPrev, setCanScrollPrev] = React8.useState(false);
+  const [canScrollNext, setCanScrollNext] = React8.useState(false);
+  const prevIndexRef = React8.useRef(0);
+  React8.useEffect(() => {
+    if (!api) return;
+    setScrollSnaps(api.scrollSnapList());
+    setSelectedIndex(api.selectedScrollSnap());
+    prevIndexRef.current = api.selectedScrollSnap();
+    const handleSelect = () => {
+      const next = api.selectedScrollSnap();
+      const prev = prevIndexRef.current;
+      const total = api.scrollSnapList().length;
+      const diff = next - prev;
+      const isForward = diff === 1 || loop && diff === -(total - 1);
+      const isBackward = diff === -1 || loop && diff === total - 1;
+      if (isForward) {
+        onNext?.();
+      } else if (isBackward) {
+        onPrevious?.();
+      }
+      prevIndexRef.current = next;
+      setSelectedIndex(next);
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    const handleReInit = () => {
+      setScrollSnaps(api.scrollSnapList());
+      setSelectedIndex(api.selectedScrollSnap());
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+    api.on("select", handleSelect);
+    api.on("reInit", handleReInit);
+    return () => {
+      api.off("select", handleSelect);
+      api.off("reInit", handleReInit);
+    };
+  }, [api, loop, onNext, onPrevious]);
+  const scrollTo = React8.useCallback(
+    (index2) => api?.scrollTo(index2),
+    [api]
+  );
+  const scrollPrev = React8.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React8.useCallback(() => api?.scrollNext(), [api]);
+  const navigationState = {
+    canScrollPrev,
+    canScrollNext,
+    selectedIndex,
+    scrollSnaps,
+    scrollPrev,
+    scrollNext,
+    scrollTo
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        orientation === "horizontal" ? "flex flex-col" : "flex flex-row",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Carousel,
+          {
+            setApi,
+            orientation,
+            opts: { loop },
+            plugins,
+            className: "min-w-0 flex-1",
+            children: [
+              /* @__PURE__ */ jsx(CarouselContent, { children: data2.map((item) => /* @__PURE__ */ jsx(CarouselItem, { className: itemClassName, children: item.content }, item.id)) }),
+              navigation === "arrows" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CarouselPrevious, {}),
+                /* @__PURE__ */ jsx(CarouselNext, {})
+              ] })
+            ]
+          }
+        ),
+        navigation === "dots" && data2.length > 1 && /* @__PURE__ */ jsx(
+          DotsRow,
+          {
+            total: data2.length,
+            maxDots: clampedMaxDots,
+            selectedIndex,
+            orientation,
+            onDotClick: scrollTo
+          }
+        ),
+        navigation === "custom" && renderNavigation && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              orientation === "horizontal" ? "mt-3" : "ml-3"
+            ),
+            children: renderNavigation(navigationState)
+          }
+        )
+      ]
+    }
+  );
+}
 var labelClasses = "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
 var sizeClasses = {
   sm: "min-h-[60px] px-2 py-1.5 text-xs",
@@ -56791,17 +57416,6 @@ function DialogDescription2({ className, ...props }) {
     }
   );
 }
-var SOLID_ICON_AVATAR_COLOR = {
-  primary: "var(--color-primary-foreground)",
-  secondary: "var(--color-secondary-foreground)",
-  info: "var(--color-info-foreground)",
-  warning: "var(--color-warning-foreground)",
-  error: "var(--color-error-foreground)",
-  success: "var(--color-success-foreground)",
-  disabled: "var(--color-disabled-foreground)",
-  gray: "var(--color-gray-foreground)",
-  mist: "var(--color-mist-foreground)"
-};
 var SIZE_STYLES2 = {
   sm: {
     rowPad: "p-3",
@@ -56851,12 +57465,21 @@ function iconSized4(icon, iconPx) {
     }
   );
 }
-function resolveIconAvatarColor(variant, cardColor) {
-  if (variant !== "solid") return cardColor;
-  if (isPresetColor(cardColor)) {
-    return SOLID_ICON_AVATAR_COLOR[cardColor];
+function resolveIconAvatarDefaults(variant, cardColor) {
+  if (variant !== "solid") {
+    return { color: cardColor, variant: void 0 };
   }
-  return "#ffffff";
+  const foreground = isPresetColor(cardColor) ? `var(--color-${cardColor}-foreground)` : "#ffffff";
+  return {
+    color: cardColor,
+    variant: "solid",
+    discStyle: {
+      backgroundColor: `color-mix(in srgb, ${foreground} 15%, transparent)`,
+      borderColor: `color-mix(in srgb, ${foreground} 30%, transparent)`,
+      borderStyle: "solid",
+      borderWidth: 1
+    }
+  };
 }
 function hasRenderableDescription(description) {
   if (description === void 0 || description === null) return false;
@@ -56925,7 +57548,7 @@ function useSimpleClickableCardSurface(options) {
       "--tw-ring-color": `color-mix(in srgb, ${color} 90%, transparent)`
     };
   }, [color]);
-  const iconAvatarColor = resolveIconAvatarColor(variant, color);
+  const iconAvatarDefaults = resolveIconAvatarDefaults(variant, color);
   return {
     s,
     styles,
@@ -56935,7 +57558,9 @@ function useSimpleClickableCardSurface(options) {
     surfaceContainerClass,
     presetRingClasses,
     ringAccentStyle,
-    iconAvatarColor
+    iconAvatarColor: iconAvatarDefaults.color,
+    iconAvatarVariant: iconAvatarDefaults.variant,
+    iconAvatarDiscStyle: iconAvatarDefaults.discStyle
   };
 }
 function useSimpleClickableCardSurfaceShell(options) {
@@ -57037,6 +57662,7 @@ function renderLeadingIconRow(options) {
     iconAvatarColor,
     iconAvatarRingColor,
     iconAvatarVariant,
+    iconAvatarDiscStyle,
     titleBlock,
     descriptionBlock,
     gradientZStyle
@@ -57048,6 +57674,7 @@ function renderLeadingIconRow(options) {
       color: iconAvatarColor,
       variant: iconAvatarVariant,
       ring: { show: true, color: iconAvatarRingColor },
+      discStyle: iconAvatarDiscStyle,
       children: iconSized4(icon, s.iconPx)
     }
   ) : null;
@@ -57163,6 +57790,7 @@ function trailingLeadAndSlot(options) {
     iconAvatarColor,
     iconAvatarRingColor,
     iconAvatarVariant,
+    iconAvatarDiscStyle,
     titleBlock,
     descriptionBlock,
     variant,
@@ -57174,6 +57802,7 @@ function trailingLeadAndSlot(options) {
     iconAvatarColor,
     iconAvatarRingColor,
     iconAvatarVariant,
+    iconAvatarDiscStyle,
     titleBlock,
     descriptionBlock,
     gradientZStyle: false
@@ -57208,7 +57837,7 @@ var IconTextActionCard = React8.forwardRef(
     actions,
     showActionsOnlyOnHover = false,
     color = "gray",
-    iconAvatarVariant,
+    iconAvatarVariant: iconAvatarVariantProp,
     iconAvatarColor: iconAvatarColorProp,
     size = "default",
     variant = "soft",
@@ -57233,10 +57862,14 @@ var IconTextActionCard = React8.forwardRef(
       surfaceContainerClass,
       presetRingClasses,
       ringAccentStyle,
-      iconAvatarColor: resolvedIconAvatarColor
+      iconAvatarColor: resolvedIconAvatarColor,
+      iconAvatarVariant: resolvedIconAvatarVariant,
+      iconAvatarDiscStyle
     } = useSimpleClickableCardSurface({ variant, color, size });
     const iconAvatarColor = iconAvatarColorProp ?? resolvedIconAvatarColor;
+    const iconAvatarVariant = iconAvatarVariantProp ?? resolvedIconAvatarVariant;
     const iconAvatarRingColor = iconAvatarColorProp ?? color;
+    const resolvedDiscStyle = iconAvatarColorProp == null ? iconAvatarDiscStyle : void 0;
     const fgClass = styles.foreground;
     const fgStyle = styles.foregroundStyle;
     const descClass = styles.description;
@@ -57263,6 +57896,7 @@ var IconTextActionCard = React8.forwardRef(
       iconAvatarColor,
       iconAvatarRingColor,
       iconAvatarVariant,
+      iconAvatarDiscStyle: resolvedDiscStyle,
       titleBlock,
       descriptionBlock,
       gradientZStyle: false
@@ -57287,6 +57921,7 @@ var IconTextActionCard = React8.forwardRef(
       iconAvatarColor,
       iconAvatarRingColor,
       iconAvatarVariant,
+      iconAvatarDiscStyle: resolvedDiscStyle,
       titleBlock,
       descriptionBlock,
       variant,
@@ -58896,7 +59531,7 @@ function KeyValueManagerAddPopover({
       /* @__PURE__ */ jsx(
         Input,
         {
-          label: "Key",
+          label: labels.keyLabel,
           value: draftKey,
           charLimit: meta?.key?.maxLength,
           error: keyError,
@@ -58908,7 +59543,7 @@ function KeyValueManagerAddPopover({
       /* @__PURE__ */ jsx(
         Textarea,
         {
-          label: "Value",
+          label: labels.valueLabel,
           value: draftValue,
           charLimit: meta?.value?.maxLength,
           error: valueError,
@@ -58956,7 +59591,12 @@ function KeyValueManagerTable({
   rows,
   itemsPerPage = 10,
   hasSearchQuery,
-  onDelete
+  onDelete,
+  keyLabel,
+  valueLabel,
+  actionLabel,
+  emptyItems,
+  emptySearch
 }) {
   const [page, setPage] = useState(0);
   const [direction, setDirection] = useState(1);
@@ -58983,16 +59623,16 @@ function KeyValueManagerTable({
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { children: "Key" }),
-        /* @__PURE__ */ jsx(TableHead, { children: "Value" }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-12 text-right", children: "Action" })
+        /* @__PURE__ */ jsx(TableHead, { children: keyLabel }),
+        /* @__PURE__ */ jsx(TableHead, { children: valueLabel }),
+        /* @__PURE__ */ jsx(TableHead, { className: "w-12 text-right", children: actionLabel })
       ] }) }),
       /* @__PURE__ */ jsx(TableBody, { children: noRows ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
         TableCell,
         {
           colSpan: 3,
           className: "py-8 text-center text-muted-foreground",
-          children: hasSearchQuery ? "No matches" : "No items"
+          children: hasSearchQuery ? emptySearch : emptyItems
         }
       ) }) : /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsx(
         motion.tr,
@@ -59063,15 +59703,21 @@ function KeyValueManagerTable({
 }
 
 // src/components/key-value-manager/key-value-manager.props.ts
-var DEFAULT_KEY_VALUE_MANAGER_LABELS = {
-  search: "Search keys or values",
+var STATIC_DEFAULT_LABELS = {
   add: "Add",
   keyErrorMessage: "Invalid key",
   valueErrorMessage: "Invalid value",
-  successMessage: "Added successfully"
+  successMessage: "Added successfully",
+  keyLabel: "Key",
+  valueLabel: "Value",
+  actionLabel: "Action",
+  emptyItems: "No items",
+  emptySearch: "No matches"
 };
 function resolveKeyValueManagerLabels(labels) {
-  return { ...DEFAULT_KEY_VALUE_MANAGER_LABELS, ...labels };
+  const merged = { ...STATIC_DEFAULT_LABELS, ...labels };
+  const search = labels?.search ?? `Search ${merged.keyLabel.toLowerCase()} or ${merged.valueLabel.toLowerCase()}`;
+  return { ...merged, search };
 }
 function KeyValueManager({
   items,
@@ -59120,7 +59766,12 @@ function KeyValueManager({
         rows: filteredRows,
         itemsPerPage,
         hasSearchQuery: searchQuery.trim().length > 0,
-        onDelete: handleDelete
+        onDelete: handleDelete,
+        keyLabel: labels.keyLabel,
+        valueLabel: labels.valueLabel,
+        actionLabel: labels.actionLabel,
+        emptyItems: labels.emptyItems,
+        emptySearch: labels.emptySearch
       }
     )
   ] });
@@ -65538,6 +66189,7 @@ function trailingChevronRow(options) {
     iconAvatarColor,
     iconAvatarRingColor,
     iconAvatarVariant,
+    iconAvatarDiscStyle,
     titleBlock,
     descriptionBlock,
     variant,
@@ -65554,6 +66206,7 @@ function trailingChevronRow(options) {
     iconAvatarColor,
     iconAvatarRingColor,
     iconAvatarVariant,
+    iconAvatarDiscStyle,
     titleBlock,
     descriptionBlock,
     gradientZStyle: false
@@ -65591,7 +66244,7 @@ var SimpleClickableCard = React8.forwardRef(
     truncateDescription = false,
     onClick,
     color = "gray",
-    iconAvatarVariant,
+    iconAvatarVariant: iconAvatarVariantProp,
     iconAvatarColor: iconAvatarColorProp,
     size = "default",
     variant = "soft",
@@ -65616,10 +66269,14 @@ var SimpleClickableCard = React8.forwardRef(
       surfaceContainerClass,
       presetRingClasses,
       ringAccentStyle,
-      iconAvatarColor: resolvedIconAvatarColor
+      iconAvatarColor: resolvedIconAvatarColor,
+      iconAvatarVariant: resolvedIconAvatarVariant,
+      iconAvatarDiscStyle
     } = useSimpleClickableCardSurface({ variant, color, size });
     const iconAvatarColor = iconAvatarColorProp ?? resolvedIconAvatarColor;
+    const iconAvatarVariant = iconAvatarVariantProp ?? resolvedIconAvatarVariant;
     const iconAvatarRingColor = iconAvatarColorProp ?? color;
+    const resolvedDiscStyle = iconAvatarColorProp == null ? iconAvatarDiscStyle : void 0;
     const fgClass = styles.foreground;
     const fgStyle = styles.foregroundStyle;
     const descClass = styles.description;
@@ -65647,6 +66304,7 @@ var SimpleClickableCard = React8.forwardRef(
       iconAvatarColor,
       iconAvatarRingColor,
       iconAvatarVariant,
+      iconAvatarDiscStyle: resolvedDiscStyle,
       titleBlock,
       descriptionBlock,
       variant,
@@ -65741,7 +66399,7 @@ var SimpleInfoCard = React8.forwardRef(
     truncateTitle = false,
     truncateDescription = false,
     color = "gray",
-    iconAvatarVariant,
+    iconAvatarVariant: iconAvatarVariantProp,
     iconAvatarColor: iconAvatarColorProp,
     size = "default",
     variant = "soft",
@@ -65762,10 +66420,14 @@ var SimpleInfoCard = React8.forwardRef(
       presetGradientPair,
       surfaceContainerClass,
       ringAccentStyle,
-      iconAvatarColor: resolvedIconAvatarColor
+      iconAvatarColor: resolvedIconAvatarColor,
+      iconAvatarVariant: resolvedIconAvatarVariant,
+      iconAvatarDiscStyle
     } = useSimpleClickableCardSurfaceShell({ variant, color, size });
     const iconAvatarColor = iconAvatarColorProp ?? resolvedIconAvatarColor;
+    const iconAvatarVariant = iconAvatarVariantProp ?? resolvedIconAvatarVariant;
     const iconAvatarRingColor = iconAvatarColorProp ?? color;
+    const resolvedDiscStyle = iconAvatarColorProp == null ? iconAvatarDiscStyle : void 0;
     const fgClass = styles.foreground;
     const fgStyle = styles.foregroundStyle;
     const descClass = styles.description;
@@ -65792,6 +66454,7 @@ var SimpleInfoCard = React8.forwardRef(
       iconAvatarColor,
       iconAvatarRingColor,
       iconAvatarVariant,
+      iconAvatarDiscStyle: resolvedDiscStyle,
       titleBlock,
       descriptionBlock,
       gradientZStyle: false
@@ -66041,4 +66704,4 @@ lottie-react/build/index.es.js:
   (*! goToAndStop must be relative to the start of the current segment *)
 */
 
-export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };
+export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };