@bubo-squared/ui-framework 0.2.15 → 0.2.17

package/dist/index.cjs

@@ -108,6 +108,9 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
           "btn-secondary",
           "focus-ring-secondary"
         ],
+        ghost: [
+          "btn-ghost"
+        ],
         outline: [
           "btn-outline",
           "focus-ring-outline"
@@ -118,10 +121,10 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         ]
       },
       size: {
-        sm: ["px-1.5", "py-1", "gap-1"],
-        md: ["px-2", "py-1", "gap-1.5"],
-        lg: ["px-2.5", "py-1", "gap-1.5"],
-        xl: ["px-3", "py-0.5", "gap-2"]
+        sm: ["px-2", "py-1", "gap-2", "h-9"],
+        md: ["px-2", "py-1", "gap-2", "h-10"],
+        lg: ["px-2.5", "py-1", "gap-2.5", "h-11"],
+        xl: ["px-3", "py-0.5", "gap-3", "h-12"]
       }
     },
     defaultVariants: {
@@ -134,19 +137,19 @@ var buttonIconVariants = (0, import_class_variance_authority.cva)("relative", {
   variants: {
     size: {
       sm: ["size-5", "*:size-5"],
-      md: ["size-6", "*:size-6"],
+      md: ["size-5", "*:size-5"],
       lg: ["size-6", "*:size-6"],
-      xl: ["size-8", "*:size-8"]
+      xl: ["size-7", "*:size-7"]
     }
   }
 });
 var buttonTextVariants = (0, import_class_variance_authority.cva)("flex text-center justify-center font-normal", {
   variants: {
     size: {
-      sm: ["text-xl", "leading-7"],
-      md: ["text-2xl", "leading-8"],
-      lg: ["text-3xl", "leading-9"],
-      xl: ["text-4xl", "leading-11"]
+      sm: ["paragraph-sm"],
+      md: ["paragraph-md"],
+      lg: ["paragraph-lg"],
+      xl: ["subtitle"]
     }
   }
 });
@@ -220,7 +223,7 @@ var import_react_slot2 = require("@radix-ui/react-slot");
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var iconButtonVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-4 transition-colors disabled:pointer-events-none overflow-hidden p-1.5 cursor-pointer",
+  "inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none overflow-hidden p-2 cursor-pointer",
   {
     variants: {
       variant: {
@@ -232,6 +235,9 @@ var iconButtonVariants = (0, import_class_variance_authority3.cva)(
           "btn-secondary",
           "focus-ring-secondary"
         ],
+        ghost: [
+          "btn-ghost"
+        ],
         outline: [
           "btn-outline",
           "focus-ring-outline"
@@ -262,13 +268,14 @@ var IconButton = React2.forwardRef(
       size,
       asChild = false,
       icon,
+      round = false,
       ...rest
     } = props;
     const Comp = asChild ? import_react_slot2.Slot : "button";
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Comp,
       {
-        className: cn(iconButtonVariants({ variant, size }), className),
+        className: cn(iconButtonVariants({ variant, size }), round ? "rounded-full" : "rounded-4", className),
         ref,
         ...rest,
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "buttonIcon flex items-center justify-center", children: icon })
@@ -1713,6 +1720,8 @@ var Autocomplete = (props) => {
     inputValue,
     defaultInputValue,
     onInputChange,
+    dropdownClassName,
+    listboxClassName,
     placeholder = "Search\u2026",
     onKeyDown,
     onFocus,
@@ -1873,7 +1882,8 @@ var Autocomplete = (props) => {
         className: cn(
           "absolute left-0 right-0 mt-1",
           dropdownSurfaceClass,
-          dropdownScrollClass
+          dropdownScrollClass,
+          dropdownClassName
         ),
         children: loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
@@ -1889,23 +1899,31 @@ var Autocomplete = (props) => {
             "aria-live": "polite",
             children: noOptionsText
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { id: listboxId, role: "listbox", className: "flex flex-col", children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "li",
+        ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "ul",
           {
-            id: `${inputId}-option-${index}`,
-            role: "option",
-            "aria-selected": index === activeIndex,
-            className: cn(
-              optionVariants({ size, active: index === activeIndex }),
-              "px-(--space-8) pr-(--space-16) text-primary cursor-pointer"
-            ),
-            onMouseDown: handleOptionMouseDown,
-            onMouseEnter: () => setActiveIndex(index),
-            onClick: () => handleOptionClick(option),
-            children: option
-          },
-          `${option}-${index}`
-        )) })
+            id: listboxId,
+            role: "listbox",
+            className: cn("flex flex-col", listboxClassName),
+            children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "li",
+              {
+                id: `${inputId}-option-${index}`,
+                role: "option",
+                "aria-selected": index === activeIndex,
+                className: cn(
+                  optionVariants({ size, active: index === activeIndex }),
+                  "px-(--space-8) pr-(--space-16) text-primary cursor-pointer"
+                ),
+                onMouseDown: handleOptionMouseDown,
+                onMouseEnter: () => setActiveIndex(index),
+                onClick: () => handleOptionClick(option),
+                children: option
+              },
+              `${option}-${index}`
+            ))
+          }
+        )
       }
     )
   ] }) });
@@ -3145,8 +3163,95 @@ var SearchInput = (props) => {
 SearchInput.displayName = "SearchInput";
 
 // src/components/Inputs/Slider.tsx
-var React34 = __toESM(require("react"), 1);
+var React35 = __toESM(require("react"), 1);
+
+// src/components/Feedback/Tooltip.tsx
+var React34 = require("react");
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_jsx_runtime36 = require("react/jsx-runtime");
+var TooltipArrow = TooltipPrimitive.Arrow;
+var mapPlacementToSideAndAlign = (placement) => {
+  switch (placement) {
+    case "top":
+      return { side: "top", align: "center" };
+    case "topLeft":
+      return { side: "top", align: "start" };
+    case "topRight":
+      return { side: "top", align: "end" };
+    case "bottom":
+      return { side: "bottom", align: "center" };
+    case "bottomLeft":
+      return { side: "bottom", align: "start" };
+    case "bottomRight":
+      return { side: "bottom", align: "end" };
+    case "left":
+      return { side: "left", align: "center" };
+    case "leftTop":
+      return { side: "left", align: "start" };
+    case "leftBottom":
+      return { side: "left", align: "end" };
+    case "right":
+      return { side: "right", align: "center" };
+    case "rightTop":
+      return { side: "right", align: "start" };
+    case "rightBottom":
+      return { side: "right", align: "end" };
+    default:
+      return { side: "top", align: "center" };
+  }
+};
+var Tooltip = (props) => {
+  const {
+    strapline,
+    title,
+    description,
+    showArrow = true,
+    className,
+    placement = "top",
+    offset = 10,
+    disableHoverableContent,
+    open,
+    defaultOpen,
+    onOpenChange,
+    children
+  } = props;
+  const { side, align } = mapPlacementToSideAndAlign(placement);
+  const tooltipClasses = "group bg-(--background-tooltip) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 p-4 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+  const tooltipArrowClasses = "relative fill-(--background-tooltip) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=bottom]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=right]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)]";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    TooltipPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      disableHoverableContent,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          TooltipPrimitive.Content,
+          {
+            side,
+            align,
+            sideOffset: offset,
+            className: cn(tooltipClasses, className),
+            children: [
+              showArrow && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipArrow, { className: tooltipArrowClasses }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid gap-2", children: [
+                (strapline ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "caption text-secondary", children: strapline }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
+                (description ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "paragraph-sm text-primary", children: description })
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/Inputs/Slider.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var wrapperBase = "flex flex-col gap-2 items-start";
 var isRangeProps = (props) => {
   return Array.isArray(props.value) || Array.isArray(props.defaultValue);
@@ -3173,7 +3278,7 @@ var Slider = (props) => {
   const isRange = isRangeProps(props);
   const isControlled = value !== void 0;
   const expectedLength = isRange ? 2 : 1;
-  const normalizeArray = React34.useCallback(
+  const normalizeArray = React35.useCallback(
     (arr, fallback) => {
       if (!arr || arr.length === 0) return fallback;
       if (arr.length === expectedLength) return arr;
@@ -3185,16 +3290,16 @@ var Slider = (props) => {
     },
     [expectedLength, max]
   );
-  const defaultInternal = React34.useMemo(() => {
+  const defaultInternal = React35.useMemo(() => {
     const defaultValueArray = toArray(defaultValue);
     if (defaultValueArray) return normalizeArray(defaultValueArray, []);
     if (isRange) return [min, Math.min(min + (max - min) / 4, max)];
     return [min + (max - min) / 3];
   }, [defaultValue, min, max, isRange, normalizeArray]);
-  const [internalValue, setInternalValue] = React34.useState(
+  const [internalValue, setInternalValue] = React35.useState(
     () => normalizeArray(isControlled ? toArray(value) : defaultInternal, defaultInternal)
   );
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (isControlled) {
       setInternalValue(
         (current2) => normalizeArray(toArray(value), current2.length ? current2 : defaultInternal)
@@ -3202,15 +3307,16 @@ var Slider = (props) => {
     }
   }, [isControlled, value, normalizeArray, defaultInternal]);
   const current = internalValue;
-  const trackRef = React34.useRef(null);
-  const [draggingThumbIndex, setDraggingThumbIndex] = React34.useState(null);
-  const [hoveredThumbIndex, setHoveredThumbIndex] = React34.useState(null);
-  const clamp = React34.useCallback((val) => {
+  const trackRef = React35.useRef(null);
+  const [draggingThumbIndex, setDraggingThumbIndex] = React35.useState(null);
+  const [hoveredThumbIndex, setHoveredThumbIndex] = React35.useState(null);
+  const [focusedThumbIndex, setFocusedThumbIndex] = React35.useState(null);
+  const clamp = React35.useCallback((val) => {
     if (val < min) return min;
     if (val > max) return max;
     return val;
   }, [min, max]);
-  const enforceMinGap = React34.useCallback((next, prev) => {
+  const enforceMinGap = React35.useCallback((next, prev) => {
     if (!isRange || next.length !== 2 || step <= 0) return next;
     let [low, high] = next;
     const [prevLow, prevHigh] = prev.length === 2 ? prev : next;
@@ -3234,7 +3340,7 @@ var Slider = (props) => {
     }
     return [low, high];
   }, [isRange, step, clamp]);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (!isControlled) {
       setInternalValue((prev) => {
         const clamped = prev.map((v) => clamp(v));
@@ -3368,7 +3474,6 @@ var Slider = (props) => {
   const secondaryPercent = valueToPercent(secondary);
   const showNumeric = display === "numeric";
   const showTooltip = display === "tooltip";
-  const isTooltipAbove = tooltipPlacement === "top";
   const isDecimalDomain = !Number.isInteger(step) || !Number.isInteger(min) || !Number.isInteger(max);
   const formatNumber = (num) => {
     if (!isDecimalDomain) {
@@ -3403,55 +3508,11 @@ var Slider = (props) => {
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderTooltipBubble = (key, percent, labelText, isVisible) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    "div",
-    {
-      className: cn(
-        "absolute -translate-x-1/2 flex flex-col items-center",
-        "transition-[opacity,transform] duration-150",
-        isVisible ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-95 pointer-events-none"
-      ),
-      style: {
-        left: `${percent}%`,
-        bottom: isTooltipAbove ? "100%" : void 0,
-        top: isTooltipAbove ? void 0 : "100%",
-        marginBottom: isTooltipAbove ? 8 : void 0,
-        marginTop: isTooltipAbove ? void 0 : 8
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-        "div",
-        {
-          className: cn("relative rounded-4 shadow-card-md px-(--space-8) py-(--space-4) bg-(--background-tooltip)"),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              "p",
-              {
-                className: cn(
-                  "paragraph-sm",
-                  disabled ? "text-secondary" : "text-primary"
-                ),
-                children: labelText
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              "div",
-              {
-                className: cn(
-                  "absolute left-1/2 -translate-x-1/2 w-2 h-2 rotate-45 bg-(--background-tooltip)",
-                  isTooltipAbove ? "-bottom-1" : "-top-1"
-                )
-              }
-            )
-          ]
-        }
-      )
-    },
-    key
-  );
   const renderHandle = (index, percent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
     const isDragging = draggingThumbIndex === index;
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    const isTooltipVisible = showTooltip && (hoveredThumbIndex === index || draggingThumbIndex === index || focusedThumbIndex === index);
+    const handle = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
         type: "button",
@@ -3472,7 +3533,7 @@ var Slider = (props) => {
         style: {
           left: `${percent}%`,
           top: `calc(50% - ${trackHeight / 2}px)`,
-          "--slider-halo-color": "color-mix(in srgb, var(--color-brand) 10%, transparent)"
+          "--slider-halo-color": "color-mix(in srgb, var(--color-brand) 15%, transparent)"
         },
         onPointerEnter: () => {
           setHoveredThumbIndex(index);
@@ -3480,6 +3541,12 @@ var Slider = (props) => {
         onPointerLeave: () => {
           setHoveredThumbIndex((prev) => prev === index ? null : prev);
         },
+        onFocus: () => {
+          setFocusedThumbIndex(index);
+        },
+        onBlur: () => {
+          setFocusedThumbIndex((prev) => prev === index ? null : prev);
+        },
         onPointerDown: (event) => {
           if (disabled) return;
           if (event.button !== 0) return;
@@ -3490,15 +3557,28 @@ var Slider = (props) => {
       },
       index
     );
+    if (!showTooltip) return handle;
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      Tooltip,
+      {
+        title: ariaValueText,
+        placement: tooltipPlacement === "top" ? "top" : "bottom",
+        offset: 8,
+        open: isTooltipVisible,
+        disableHoverableContent: true,
+        className: "z-50 pointer-events-none py-2",
+        children: handle
+      }
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: wrapperBase,
       style: { marginInline: `${thumbRadius}px` },
       children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "input",
             {
               type: "hidden",
@@ -3507,7 +3587,7 @@ var Slider = (props) => {
               disabled
             }
           ),
-          isRange && secondary !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          isRange && secondary !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "input",
             {
               type: "hidden",
@@ -3517,51 +3597,37 @@ var Slider = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("w-full flex flex-col gap-1", className), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full", children: [
-            showTooltip && primary !== void 0 && renderTooltipBubble(
-              "primary",
-              primaryPercent,
-              formatDisplayValue(primary),
-              hoveredThumbIndex === 0 || draggingThumbIndex === 0
-            ),
-            showTooltip && isRange && secondary !== void 0 && renderTooltipBubble(
-              "secondary",
-              secondaryPercent,
-              formatDisplayValue(secondary),
-              hoveredThumbIndex === 1 || draggingThumbIndex === 1
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-              "div",
-              {
-                className: cn(
-                  "relative w-full flex items-center rounded-4",
-                  disabled ? "bg-(--background-primary-disabled) cursor-default" : "bg-(--background-secondary) cursor-pointer"
-                ),
-                style: { height: `${trackHeight}px` },
-                ref: trackRef,
-                onPointerDown: handleTrackPointerDown,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                    "div",
-                    {
-                      className: cn(
-                        "absolute h-full rounded-4",
-                        disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-secondary)"
-                      ),
-                      style: {
-                        width: `calc(100% + ${thumbWidth}px)`,
-                        left: `-${thumbRadius}px`
-                      }
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("w-full flex flex-col gap-1", className), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            "div",
+            {
+              className: cn(
+                "relative w-full flex items-center rounded-4",
+                disabled ? "bg-(--background-slider-track-disabled) cursor-default" : "bg-(--background-slider-track) cursor-pointer"
+              ),
+              style: { height: `${trackHeight}px` },
+              ref: trackRef,
+              onPointerDown: handleTrackPointerDown,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute h-full rounded-4",
+                      disabled ? "bg-(--background-slider-track-disabled)" : "bg-(--background-slider-track)"
+                    ),
+                    style: {
+                      width: `calc(100% + ${thumbWidth}px)`,
+                      left: `-${thumbRadius}px`
                     }
-                  ),
-                  renderHandle(0, primaryPercent, formatDisplayValue(primary)),
-                  isRange && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
-                ]
-              }
-            )
-          ] }),
-          showNumeric && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  }
+                ),
+                renderHandle(0, primaryPercent, formatDisplayValue(primary)),
+                isRange && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
+              ]
+            }
+          ) }),
+          showNumeric && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "p",
             {
               className: cn(
@@ -3579,9 +3645,9 @@ var Slider = (props) => {
 Slider.displayName = "Slider";
 
 // src/components/Inputs/TextArea.tsx
-var React35 = __toESM(require("react"), 1);
+var React36 = __toESM(require("react"), 1);
 var import_icons13 = require("@bubo-squared/icons");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var TextArea = (props) => {
   const {
     label,
@@ -3601,7 +3667,7 @@ var TextArea = (props) => {
     ...textareaProps
   } = props;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React35.useState(
+  const [internalValue, setInternalValue] = React36.useState(
     defaultValue ?? ""
   );
   const currentValue = (isControlled ? value : internalValue) ?? "";
@@ -3609,10 +3675,10 @@ var TextArea = (props) => {
   const currentLength = currentValue.length;
   const effectiveMaxLength = type === "character-limit" ? maxLength ?? 144 : void 0;
   const showCharacterLimit = type === "character-limit" && typeof effectiveMaxLength === "number";
-  const textareaRef = React35.useRef(null);
-  const containerRef = React35.useRef(null);
-  const [height, setHeight] = React35.useState(void 0);
-  const [width, setWidth] = React35.useState(void 0);
+  const textareaRef = React36.useRef(null);
+  const containerRef = React36.useRef(null);
+  const [height, setHeight] = React36.useState(void 0);
+  const [width, setWidth] = React36.useState(void 0);
   const minHeight = 80;
   const minWidth = 240;
   const handleContainerClick = () => {
@@ -3625,7 +3691,7 @@ var TextArea = (props) => {
     }
     onChange?.(event);
   };
-  const generatedId = React35.useId();
+  const generatedId = React36.useId();
   const textareaId = id ?? generatedId;
   const statusBorderClass = {
     default: "",
@@ -3662,7 +3728,7 @@ var TextArea = (props) => {
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Field,
     {
       className: "w-full",
@@ -3671,7 +3737,7 @@ var TextArea = (props) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "div",
         {
           className: cn(
@@ -3690,7 +3756,7 @@ var TextArea = (props) => {
           onClick: handleContainerClick,
           "aria-disabled": disabled || void 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "textarea",
               {
                 id: textareaId,
@@ -3710,7 +3776,7 @@ var TextArea = (props) => {
                 ...textareaProps
               }
             ),
-            showCharacterLimit && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            showCharacterLimit && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
               "span",
               {
                 className: cn(
@@ -3724,19 +3790,19 @@ var TextArea = (props) => {
                 ]
               }
             ),
-            type === "responsive" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            type === "responsive" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "div",
               {
                 className: "absolute bottom-1 right-1 h-3 w-3 " + (disabled ? "cursor-auto" : "cursor-nwse-resize"),
                 onPointerDown: disabled ? void 0 : handleResizePointerDown,
-                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   "span",
                   {
                     className: cn(
                       "absolute bottom-0 right-0 flex h-4 w-4 items-center justify-center text-(--icon-primary)",
                       disabled && "text-(--icon-primary-disabled)"
                     ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MaximizeIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.MaximizeIcon, {})
                   }
                 )
               }
@@ -3750,9 +3816,9 @@ var TextArea = (props) => {
 TextArea.displayName = "TextArea";
 
 // src/components/Inputs/TextInput.tsx
-var React36 = __toESM(require("react"), 1);
+var React37 = __toESM(require("react"), 1);
 var import_class_variance_authority20 = require("class-variance-authority");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var inputTextVariants3 = (0, import_class_variance_authority20.cva)("truncate", {
   variants: {
     size: {
@@ -3803,11 +3869,11 @@ var TextInput = (props) => {
     ...inputProps
   } = props;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React36.useState(
+  const [internalValue, setInternalValue] = React37.useState(
     defaultValue ?? ""
   );
   const currentValue = (isControlled ? value : internalValue) ?? "";
-  const inputRef = React36.useRef(null);
+  const inputRef = React37.useRef(null);
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -3820,7 +3886,7 @@ var TextInput = (props) => {
   };
   const showLeadingIcon = !!leadingIcon;
   const showTrailingIcon = !!trailingIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Field,
     {
       label,
@@ -3828,7 +3894,7 @@ var TextInput = (props) => {
       hideHint,
       status,
       disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         InputShell,
         {
           size,
@@ -3837,7 +3903,7 @@ var TextInput = (props) => {
           className,
           onClick: handleContainerClick,
           children: [
-            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            showLeadingIcon && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "span",
               {
                 className: cn(
@@ -3846,7 +3912,7 @@ var TextInput = (props) => {
                 children: leadingIcon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Input,
               {
                 ref: inputRef,
@@ -3864,7 +3930,7 @@ var TextInput = (props) => {
                 ...inputProps
               }
             ),
-            showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            showTrailingIcon && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "span",
               {
                 className: cn(
@@ -3882,11 +3948,11 @@ var TextInput = (props) => {
 TextInput.displayName = "TextInput";
 
 // src/components/Inputs/Toggle.tsx
-var React37 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var React38 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Toggle = (props) => {
   const { label, className, disabled, ...inputProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "label",
     {
       className: cn(
@@ -3894,8 +3960,8 @@ var Toggle = (props) => {
         disabled ? "cursor-default" : "cursor-pointer"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "relative inline-flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "relative inline-flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "input",
             {
               type: "checkbox",
@@ -3904,7 +3970,7 @@ var Toggle = (props) => {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "span",
             {
               className: cn(
@@ -3944,7 +4010,7 @@ var Toggle = (props) => {
                 "peer-disabled:[&>.knob]:peer-checked:bg-(--background-primary-hover)",
                 className
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "span",
                 {
                   className: cn(
@@ -3956,7 +4022,7 @@ var Toggle = (props) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "span",
           {
             className: cn(
@@ -3973,8 +4039,8 @@ var Toggle = (props) => {
 Toggle.displayName = "Toggle";
 
 // src/components/Inputs/WebsiteInput.tsx
-var React38 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var React39 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var WebsiteInput = (props) => {
   const {
     hierarchy = "leading",
@@ -4011,15 +4077,15 @@ var WebsiteInput = (props) => {
     size === "xl" ? "[&>svg]:w-6 [&>svg]:h-6" : size === "sm" ? "[&>svg]:w-4 [&>svg]:h-4" : "[&>svg]:w-5 [&>svg]:h-5",
     disabled ? "text-(--icon-primary-disabled)" : "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-within:text-(--icon-primary-focus)"
   );
-  const leadingAddon = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: baseAddonClass, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: addonTextClass, children: protocolLabel }),
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: iconWrapperClass, children: icon })
+  const leadingAddon = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: baseAddonClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: addonTextClass, children: protocolLabel }),
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: iconWrapperClass, children: icon })
   ] });
-  const trailingAddon = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: baseAddonClass, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: iconWrapperClass, children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: addonTextClass, children: protocolLabel })
+  const trailingAddon = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: baseAddonClass, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: iconWrapperClass, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: addonTextClass, children: protocolLabel })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     TextInput,
     {
       ...rest,
@@ -4034,9 +4100,9 @@ var WebsiteInput = (props) => {
 WebsiteInput.displayName = "WebsiteInput";
 
 // src/components/Feedback/Popover.tsx
-var React39 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var PopoverPrimitive2 = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var PopoverArrow = PopoverPrimitive2.Arrow;
 var Popover2 = (props) => {
   const {
@@ -4053,7 +4119,7 @@ var Popover2 = (props) => {
     offset = 10,
     children
   } = props;
-  const [open, setOpen] = React39.useState(false);
+  const [open, setOpen] = React40.useState(false);
   const handleCancel = () => {
     onCancel?.();
     setOpen(false);
@@ -4095,9 +4161,9 @@ var Popover2 = (props) => {
     }
   };
   const { side, align } = mapPlacementToSideAndAlign2(placement);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverTrigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       PopoverContent,
       {
         side,
@@ -4105,16 +4171,16 @@ var Popover2 = (props) => {
         sideOffset: offset,
         className: cn(popoverClasses, className),
         children: [
-          showArrow && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverArrow, { className: popoverArrowClasses }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "grid gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "caption text-secondary", children: strapline }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "paragraph-sm text-primary", children: description })
+          showArrow && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverArrow, { className: popoverArrowClasses }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "caption text-secondary", children: strapline }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "paragraph-sm text-primary", children: description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { size: "sm", variant: "primary", onClick: handleOk, children: okText || "Ok" })
             ] })
           ] })
         ]
@@ -4124,91 +4190,6 @@ var Popover2 = (props) => {
 };
 Popover2.displayName = "Popover";
 
-// src/components/Feedback/Tooltip.tsx
-var React40 = require("react");
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var TooltipArrow = TooltipPrimitive.Arrow;
-var mapPlacementToSideAndAlign = (placement) => {
-  switch (placement) {
-    case "top":
-      return { side: "top", align: "center" };
-    case "topLeft":
-      return { side: "top", align: "start" };
-    case "topRight":
-      return { side: "top", align: "end" };
-    case "bottom":
-      return { side: "bottom", align: "center" };
-    case "bottomLeft":
-      return { side: "bottom", align: "start" };
-    case "bottomRight":
-      return { side: "bottom", align: "end" };
-    case "left":
-      return { side: "left", align: "center" };
-    case "leftTop":
-      return { side: "left", align: "start" };
-    case "leftBottom":
-      return { side: "left", align: "end" };
-    case "right":
-      return { side: "right", align: "center" };
-    case "rightTop":
-      return { side: "right", align: "start" };
-    case "rightBottom":
-      return { side: "right", align: "end" };
-    default:
-      return { side: "top", align: "center" };
-  }
-};
-var Tooltip = (props) => {
-  const {
-    strapline,
-    title,
-    description,
-    showArrow = true,
-    className,
-    placement = "top",
-    offset = 10,
-    disableHoverableContent,
-    open,
-    defaultOpen,
-    onOpenChange,
-    children
-  } = props;
-  const { side, align } = mapPlacementToSideAndAlign(placement);
-  const tooltipClasses = "group bg-(--background-popover) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 p-4 [&>span]:scale-200 data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
-  const tooltipArrowClasses = "relative fill-(--background-popover) transition-[filter,transform] group-data-[side=top]:top-[-2px] group-data-[side=top]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=bottom]:drop-shadow-[0px_1px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=left]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)] group-data-[side=right]:drop-shadow-[0px_2px_1px_color-mix(in_srgb,_var(--color-b-black-10)_66%,_transparent)]";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-    TooltipPrimitive.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange,
-      disableHoverableContent,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-          TooltipPrimitive.Content,
-          {
-            side,
-            align,
-            sideOffset: offset,
-            className: cn(tooltipClasses, className),
-            children: [
-              showArrow && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipArrow, { className: tooltipArrowClasses }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid gap-2", children: [
-                (strapline ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "caption text-secondary", children: strapline }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "subtitle-medium text-primary", children: title }),
-                (description ?? "") !== "" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "paragraph-sm text-primary", children: description })
-              ] })
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-};
-Tooltip.displayName = "Tooltip";
-
 // src/components/Feedback/TooltipProvider.tsx
 var React41 = require("react");
 var TooltipPrimitive2 = __toESM(require("@radix-ui/react-tooltip"), 1);