@bubo-squared/ui-framework 0.2.20 → 0.2.22

package/dist/index.js

@@ -69,10 +69,10 @@ var buttonVariants = cva(
         ]
       },
       size: {
-        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"]
+        sm: ["px-3", "py-1", "gap-2", "h-9"],
+        md: ["px-4", "py-2", "gap-2", "h-10"],
+        lg: ["px-4", "py-2", "gap-2.5", "h-11"],
+        xl: ["px-4", "py-2", "gap-3", "h-12"]
       }
     },
     defaultVariants: {
@@ -692,13 +692,14 @@ var Badge = React9.forwardRef(
       ...rest
     } = props;
     const Comp = asChild ? Slot5 : "div";
+    const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
     return /* @__PURE__ */ jsx11(
       Comp,
       {
         ref,
         className: cn(badgeVariants({ size, variant }), className),
         ...rest,
-        children: value ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+        children: hasValue ? /* @__PURE__ */ jsxs6(Fragment, { children: [
           /* @__PURE__ */ jsx11("span", { className: "font-normal", children: label }),
           /* @__PURE__ */ jsx11("span", { className: "font-normal", children: ":" }),
           /* @__PURE__ */ jsx11("span", { className: "font-medium", children: value })
@@ -879,7 +880,7 @@ var Divider = (props) => {
       className: _className,
       ...divProps
     } = props;
-    const textLabel = label ? label : "OR";
+    const textLabel = label ?? "OR";
     return /* @__PURE__ */ jsxs8(
       "div",
       {
@@ -1027,13 +1028,15 @@ var Field = (props) => {
     className,
     children
   } = props;
+  const hasLabel = label != null;
+  const hasHint = hint != null;
   const fieldId = React14.useId();
-  const labelId = label ? `${fieldId}-label` : void 0;
-  const hintId = hint ? `${fieldId}-hint` : void 0;
+  const labelId = hasLabel ? `${fieldId}-label` : void 0;
+  const hintId = hasHint ? `${fieldId}-hint` : void 0;
   const hintColorClass = disabled ? "text-primary-disabled" : status === "success" ? "text-(--color-success)" : status === "error" ? "text-(--color-error)" : "text-(--color-secondary)";
   const labelColorClass = disabled ? "text-primary-disabled" : "text-primary";
   return /* @__PURE__ */ jsxs9("div", { className: cn(fieldBase, className), children: [
-    label && /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center justify-between", children: [
+    hasLabel && /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center justify-between", children: [
       /* @__PURE__ */ jsx16("label", { id: labelId, className: cn("paragraph-sm", labelColorClass), children: label }),
       labelRight
     ] }),
@@ -1041,9 +1044,9 @@ var Field = (props) => {
     !hideHint && /* @__PURE__ */ jsx16(
       "p",
       {
-        id: hint ? hintId : void 0,
-        className: cn("caption", hint ? hintColorClass : "invisible"),
-        children: hint || "\xA0"
+        id: hasHint ? hintId : void 0,
+        className: cn("caption", hasHint ? hintColorClass : "invisible"),
+        children: hasHint ? hint : "\xA0"
       }
     )
   ] });
@@ -1063,6 +1066,7 @@ var Progress = React15.forwardRef(
       value,
       label,
       hint,
+      ariaLabel,
       showProgressLabel = true,
       hideHint,
       size = "lg",
@@ -1073,12 +1077,13 @@ var Progress = React15.forwardRef(
     } = props;
     const clamped = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
     const percentageLabel = `${Math.round(clamped)}%`;
+    const resolvedAriaLabel = ariaLabel ?? (typeof label === "string" ? label : void 0);
     const barHeightClasses = sizeToBarClasses[size];
     return /* @__PURE__ */ jsx17(
       Field,
       {
         label,
-        labelRight: showProgressLabel && label ? /* @__PURE__ */ jsx17("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
+        labelRight: showProgressLabel && label != null ? /* @__PURE__ */ jsx17("span", { className: "footnote text-(--color-secondary)", children: percentageLabel }) : void 0,
         hint,
         hideHint,
         status,
@@ -1092,7 +1097,7 @@ var Progress = React15.forwardRef(
             "aria-valuenow": clamped,
             "aria-valuemin": 0,
             "aria-valuemax": 100,
-            "aria-label": label,
+            "aria-label": resolvedAriaLabel,
             ...rest,
             children: /* @__PURE__ */ jsx17(
               "div",
@@ -1199,7 +1204,7 @@ import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var tagVariants = cva11(
-  "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-(--border-secondary) bg-(--background-neutral) hover:border-(--border-secondary-hover) focus:border-(--border-brand) focus-ring-primary ",
+  "inline-flex flex-row items-center justify-center rounded-6 gap-2 px-3 overflow-hidden border-1 border-(--border-secondary) bg-(--background-neutral) focus:border-(--border-brand) focus-ring-primary ",
   {
     variants: {
       size: {
@@ -1225,6 +1230,7 @@ var Tag = React17.forwardRef(
       value,
       ...rest
     } = props;
+    const hasValue = typeof value === "string" ? value.trim() !== "" : value != null;
     const Comp = asChild ? Slot6 : "div";
     const leading = props.leadingIcon && React17.isValidElement(props.leadingIcon) ? React17.cloneElement(props.leadingIcon, { disabled, ...props.leadingIcon.props }) : null;
     const trailing = props.trailingIcon && React17.isValidElement(props.trailingIcon) ? React17.cloneElement(props.trailingIcon, { disabled, ...props.trailingIcon.props }) : null;
@@ -1236,7 +1242,7 @@ var Tag = React17.forwardRef(
         ...rest,
         children: [
           leading && /* @__PURE__ */ jsx19("div", { className: iconClasses, children: leading }),
-          value ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-row gap-1 items-center", children: [
+          hasValue ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-row gap-1 items-center", children: [
             /* @__PURE__ */ jsx19("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: label }),
             /* @__PURE__ */ jsx19("span", { className: "text-primary paragraph-lg mb-0! cursor-default font-normal", children: ":" }),
             /* @__PURE__ */ jsx19("span", { className: "text-primary paragraph-lg-medium mb-0! cursor-default font-medium", children: value })
@@ -1507,16 +1513,17 @@ var MenuSubContent = DropdownMenuSubContent;
 var MenuSubTrigger = DropdownMenuSubTrigger;
 
 // src/components/Inputs/Checkbox.tsx
-import "react";
+import * as React20 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon as CheckIcon2 } from "@bubo-squared/icons";
 import { MinusIcon } from "@bubo-squared/icons";
 import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
-function Checkbox({ label, className, ...props }) {
+var Checkbox = React20.forwardRef(({ label, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxs14("label", { className: "inline-flex items-center gap-(--space-12) cursor-pointer select-none", children: [
     /* @__PURE__ */ jsx22(
       CheckboxPrimitive.Root,
       {
+        ref: forwardedRef,
         className: cn(
           "group flex h-5 w-5 items-center justify-center rounded-2 border border-(--border-secondary) bg-(--background-neutral) text-primary-inverse",
           "data-[state=checked]:bg-(--background-brand) data-[state=checked]:text-button-white data-[state=checked]:border-none",
@@ -1538,7 +1545,8 @@ function Checkbox({ label, className, ...props }) {
     ),
     label && /* @__PURE__ */ jsx22("span", { className: "paragraph-md-medium text-primary", children: label })
   ] });
-}
+});
+Checkbox.displayName = "Checkbox";
 
 // src/components/Inputs/Autocomplete.tsx
 import * as React23 from "react";
@@ -1671,7 +1679,7 @@ var iconWrapperVariants = cva14(
     }
   }
 );
-var Autocomplete = (props) => {
+var Autocomplete = React23.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -1692,6 +1700,7 @@ var Autocomplete = (props) => {
     inputValue,
     defaultInputValue,
     onInputChange,
+    freeSolo = false,
     dropdownClassName,
     listboxClassName,
     placeholder = "Search\u2026",
@@ -1712,6 +1721,18 @@ var Autocomplete = (props) => {
   const [isFocused, setIsFocused] = React23.useState(false);
   const [activeIndex, setActiveIndex] = React23.useState(-1);
   const inputRef = React23.useRef(null);
+  const setInputRef = React23.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const baseId = React23.useId();
   const inputId = id ?? baseId;
   const listboxId = `${inputId}-listbox`;
@@ -1730,6 +1751,12 @@ var Autocomplete = (props) => {
     }
     onInputChange?.(next);
   };
+  const commitTypedValue = (next) => {
+    if (!isValueControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
+  };
   const commitValue = (next) => {
     if (!isValueControlled) {
       setInternalValue(next);
@@ -1746,6 +1773,9 @@ var Autocomplete = (props) => {
     const next = event.target.value;
     setInputText(next);
     setActiveIndex(-1);
+    if (freeSolo) {
+      commitTypedValue(next);
+    }
   };
   const handleFocus = (event) => {
     setIsFocused(true);
@@ -1754,6 +1784,12 @@ var Autocomplete = (props) => {
   const handleBlur = (event) => {
     setIsFocused(false);
     setActiveIndex(-1);
+    if (freeSolo) {
+      const trimmed = currentInput.trim();
+      if (trimmed.length > 0 && currentInput !== currentValue) {
+        commitTypedValue(currentInput);
+      }
+    }
     onBlur?.(event);
   };
   const handleKeyDown = (event) => {
@@ -1787,6 +1823,17 @@ var Autocomplete = (props) => {
           event.preventDefault();
           commitValue(options[activeIndex]);
           setIsFocused(false);
+          break;
+        }
+        if (freeSolo) {
+          const trimmed = currentInput.trim();
+          if (trimmed.length > 0) {
+            event.preventDefault();
+            if (currentInput !== currentValue) {
+              commitTypedValue(currentInput);
+            }
+            setIsFocused(false);
+          }
         }
         break;
       }
@@ -1824,7 +1871,7 @@ var Autocomplete = (props) => {
           /* @__PURE__ */ jsx25(
             Input,
             {
-              ref: inputRef,
+              ref: setInputRef,
               id: inputId,
               type: "text",
               disabled: disabled ?? void 0,
@@ -1899,7 +1946,7 @@ var Autocomplete = (props) => {
       }
     )
   ] }) });
-};
+});
 Autocomplete.displayName = "Autocomplete";
 
 // src/components/Inputs/Select.tsx
@@ -1982,7 +2029,7 @@ var selectButtonVariants = cva15(
     }
   }
 );
-var Select = (props) => {
+var Select = React24.forwardRef((props, forwardedRef) => {
   const {
     label = "Field Label",
     hint = "This is a hint text to help user.",
@@ -2057,6 +2104,7 @@ var Select = (props) => {
             /* @__PURE__ */ jsx26(SelectPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
               "button",
               {
+                ref: forwardedRef,
                 type: "button",
                 "aria-haspopup": "listbox",
                 "aria-expanded": isOpen,
@@ -2131,7 +2179,7 @@ var Select = (props) => {
       )
     }
   );
-};
+});
 Select.displayName = "Select";
 
 // src/components/Inputs/PasswordInput.tsx
@@ -2195,7 +2243,7 @@ var actionButtonVariants = cva16(
     }
   }
 );
-var PasswordInput = (props) => {
+var PasswordInput = React25.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -2219,6 +2267,18 @@ var PasswordInput = (props) => {
   const [isRevealed, setIsRevealed] = React25.useState(false);
   const currentValue = (isControlled ? value : internalValue) ?? "";
   const inputRef = React25.useRef(null);
+  const setInputRef = React25.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const showLeadingIcon = !!leadingIcon;
   const handleContainerClick = () => {
     if (disabled) return;
@@ -2259,7 +2319,7 @@ var PasswordInput = (props) => {
             /* @__PURE__ */ jsx27(
               Input,
               {
-                ref: inputRef,
+                ref: setInputRef,
                 type: isRevealed ? "text" : "password",
                 disabled: disabled ?? void 0,
                 placeholder,
@@ -2294,7 +2354,7 @@ var PasswordInput = (props) => {
       )
     }
   );
-};
+});
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/Inputs/PhoneInput.tsx
@@ -2365,7 +2425,7 @@ import "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/createLucideIcon.js
-import { forwardRef as forwardRef15, createElement as createElement2 } from "react";
+import { forwardRef as forwardRef19, createElement as createElement2 } from "react";
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -2389,7 +2449,7 @@ var hasA11yProp = (props) => {
 };
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/Icon.js
-import { forwardRef as forwardRef14, createElement } from "react";
+import { forwardRef as forwardRef18, createElement } from "react";
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
@@ -2405,7 +2465,7 @@ var defaultAttributes = {
 };
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/Icon.js
-var Icon2 = forwardRef14(
+var Icon2 = forwardRef18(
   ({
     color = "currentColor",
     size = 24,
@@ -2437,7 +2497,7 @@ var Icon2 = forwardRef14(
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef15(
+  const Component = forwardRef19(
     ({ className, ...props }, ref) => createElement2(Icon2, {
       ref,
       iconNode,
@@ -2941,19 +3001,20 @@ var FlagComponent = ({ country, countryName }) => {
 import * as React32 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
-var RadioGroup = ({
-  label,
-  hint,
-  hideHint,
-  options,
-  orientation = "vertical",
-  disabled = false,
-  value,
-  defaultValue,
-  onValueChange,
-  className,
-  ...rootProps
-}) => {
+var RadioGroup = React32.forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    hint,
+    hideHint,
+    options,
+    orientation = "vertical",
+    disabled = false,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    ...rootProps
+  } = props;
   const groupId = React32.useId();
   const hintId = hint ? `${groupId}-hint` : void 0;
   const handleValueChange = (next) => {
@@ -2970,6 +3031,7 @@ var RadioGroup = ({
       children: /* @__PURE__ */ jsx34(
         RadioGroupPrimitive.Root,
         {
+          ref: forwardedRef,
           ...rootProps,
           value,
           defaultValue,
@@ -3050,7 +3112,8 @@ var RadioGroup = ({
       )
     }
   );
-};
+});
+RadioGroup.displayName = "RadioGroup";
 
 // src/components/Inputs/SearchInput.tsx
 import * as React33 from "react";
@@ -3086,7 +3149,7 @@ var iconWrapperVariants3 = cva19("flex items-center justify-center shrink-0 text
     size: "lg"
   }
 });
-var SearchInput = (props) => {
+var SearchInput = React33.forwardRef((props, forwardedRef) => {
   const {
     placeholder = "Search...",
     size = "lg",
@@ -3098,6 +3161,18 @@ var SearchInput = (props) => {
     ...inputProps
   } = props;
   const inputRef = React33.useRef(null);
+  const setInputRef = React33.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -3116,7 +3191,7 @@ var SearchInput = (props) => {
         /* @__PURE__ */ jsx35(
           Input,
           {
-            ref: inputRef,
+            ref: setInputRef,
             type: "search",
             placeholder,
             disabled: disabled ?? void 0,
@@ -3131,7 +3206,7 @@ var SearchInput = (props) => {
       ]
     }
   ) }) });
-};
+});
 SearchInput.displayName = "SearchInput";
 
 // src/components/Inputs/Slider.tsx
@@ -3188,6 +3263,8 @@ var Tooltip = (props) => {
     children,
     delayDuration = 200
   } = props;
+  const hasStrapline = typeof strapline === "string" ? strapline.trim() !== "" : strapline != null;
+  const hasDescription = typeof description === "string" ? description.trim() !== "" : description != null;
   const { side, align } = mapPlacementToSideAndAlign(placement);
   const tooltipClasses = "group bg-(--background-tooltip) max-w-[calc(100vw-2rem)] shadow-card-md border-none rounded-4 py-1.5 px-2.5 [&>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)]";
@@ -3211,9 +3288,9 @@ var Tooltip = (props) => {
             children: [
               showArrow && /* @__PURE__ */ jsx36(TooltipArrow, { className: tooltipArrowClasses }),
               /* @__PURE__ */ jsxs24("div", { className: "grid", children: [
-                (strapline ?? "") !== "" && /* @__PURE__ */ jsx36("span", { className: "caption text-secondary", children: strapline }),
+                hasStrapline && /* @__PURE__ */ jsx36("span", { className: "caption text-secondary", children: strapline }),
                 /* @__PURE__ */ jsx36("h4", { className: "paragraph-md text-primary", children: title }),
-                (description ?? "") !== "" && /* @__PURE__ */ jsx36("p", { className: "paragraph-sm text-primary", children: description })
+                hasDescription && /* @__PURE__ */ jsx36("p", { className: "paragraph-sm text-primary", children: description })
               ] })
             ]
           }
@@ -3234,7 +3311,7 @@ var toArray = (value) => {
   if (value === void 0) return void 0;
   return Array.isArray(value) ? value : [value];
 };
-var Slider = (props) => {
+var Slider = React35.forwardRef((props, forwardedRef) => {
   const {
     name,
     display = "flat",
@@ -3550,6 +3627,7 @@ var Slider = (props) => {
     {
       className: wrapperBase,
       style: { marginInline: `${thumbRadius}px` },
+      ref: forwardedRef,
       children: [
         name && /* @__PURE__ */ jsxs25(Fragment2, { children: [
           /* @__PURE__ */ jsx37(
@@ -3615,14 +3693,14 @@ var Slider = (props) => {
       ]
     }
   );
-};
+});
 Slider.displayName = "Slider";
 
 // src/components/Inputs/TextArea.tsx
 import * as React36 from "react";
 import { MaximizeIcon } from "@bubo-squared/icons";
 import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
-var TextArea = (props) => {
+var TextArea = React36.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -3651,6 +3729,18 @@ var TextArea = (props) => {
   const showCharacterLimit = type === "character-limit" && typeof effectiveMaxLength === "number";
   const textareaRef = React36.useRef(null);
   const containerRef = React36.useRef(null);
+  const setTextareaRef = React36.useCallback(
+    (node) => {
+      textareaRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const [height, setHeight] = React36.useState(void 0);
   const [width, setWidth] = React36.useState(void 0);
   const minHeight = 80;
@@ -3735,7 +3825,7 @@ var TextArea = (props) => {
               {
                 id: textareaId,
                 name,
-                ref: textareaRef,
+                ref: setTextareaRef,
                 disabled: disabled ?? void 0,
                 value: isControlled ? value : currentValue,
                 defaultValue: isControlled ? void 0 : defaultValue,
@@ -3786,7 +3876,7 @@ var TextArea = (props) => {
       )
     }
   );
-};
+});
 TextArea.displayName = "TextArea";
 
 // src/components/Inputs/TextInput.tsx
@@ -3825,7 +3915,7 @@ var iconWrapperVariants4 = cva20(
     }
   }
 );
-var TextInput = (props) => {
+var TextInput = React37.forwardRef((props, forwardedRef) => {
   const {
     label,
     hint,
@@ -3848,6 +3938,18 @@ var TextInput = (props) => {
   );
   const currentValue = (isControlled ? value : internalValue) ?? "";
   const inputRef = React37.useRef(null);
+  const setInputRef = React37.useCallback(
+    (node) => {
+      inputRef.current = node;
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
   const handleContainerClick = () => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -3889,7 +3991,7 @@ var TextInput = (props) => {
             /* @__PURE__ */ jsx39(
               Input,
               {
-                ref: inputRef,
+                ref: setInputRef,
                 type: "text",
                 disabled: disabled ?? void 0,
                 placeholder,
@@ -3918,13 +4020,13 @@ var TextInput = (props) => {
       )
     }
   );
-};
+});
 TextInput.displayName = "TextInput";
 
 // src/components/Inputs/Toggle.tsx
-import "react";
+import * as React38 from "react";
 import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
-var Toggle = (props) => {
+var Toggle = React38.forwardRef((props, forwardedRef) => {
   const { label, className, disabled, ...inputProps } = props;
   return /* @__PURE__ */ jsxs28(
     "label",
@@ -3938,6 +4040,7 @@ var Toggle = (props) => {
           /* @__PURE__ */ jsx40(
             "input",
             {
+              ref: forwardedRef,
               type: "checkbox",
               disabled,
               className: "peer sr-only",
@@ -4009,13 +4112,13 @@ var Toggle = (props) => {
       ]
     }
   );
-};
+});
 Toggle.displayName = "Toggle";
 
 // src/components/Inputs/WebsiteInput.tsx
-import "react";
+import * as React39 from "react";
 import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
-var WebsiteInput = (props) => {
+var WebsiteInput = React39.forwardRef((props, forwardedRef) => {
   const {
     hierarchy = "leading",
     protocolLabel = "http://",
@@ -4062,6 +4165,7 @@ var WebsiteInput = (props) => {
   return /* @__PURE__ */ jsx41(
     TextInput,
     {
+      ref: forwardedRef,
       ...rest,
       size,
       disabled,
@@ -4070,7 +4174,7 @@ var WebsiteInput = (props) => {
       trailingIcon: !isLeading ? trailingAddon : void 0
     }
   );
-};
+});
 WebsiteInput.displayName = "WebsiteInput";
 
 // src/components/Feedback/Popover.tsx
@@ -4093,6 +4197,8 @@ var Popover2 = (props) => {
     offset = 10,
     children
   } = props;
+  const hasStrapline = typeof strapline === "string" ? strapline.trim() !== "" : strapline != null;
+  const hasDescription = typeof description === "string" ? description.trim() !== "" : description != null;
   const [open, setOpen] = React40.useState(false);
   const handleCancel = () => {
     onCancel?.();
@@ -4148,9 +4254,9 @@ var Popover2 = (props) => {
           showArrow && /* @__PURE__ */ jsx42(PopoverArrow, { className: popoverArrowClasses }),
           /* @__PURE__ */ jsxs30("div", { className: "grid gap-4", children: [
             /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx42("span", { className: "caption text-secondary", children: strapline }),
+              hasStrapline && /* @__PURE__ */ jsx42("span", { className: "caption text-secondary", children: strapline }),
               /* @__PURE__ */ jsx42("h4", { className: "subtitle-medium text-primary", children: title }),
-              /* @__PURE__ */ jsx42("p", { className: "paragraph-sm text-primary", children: description })
+              hasDescription && /* @__PURE__ */ jsx42("p", { className: "paragraph-sm text-primary", children: description })
             ] }),
             /* @__PURE__ */ jsxs30("div", { className: "flex justify-start items-center gap-4 flex-wrap", children: [
               /* @__PURE__ */ jsx42(Button, { size: "sm", variant: "secondary", onClick: handleCancel, children: cancelText || "Cancel" }),