@bubo-squared/ui-framework 0.2.21 → 0.2.22

package/dist/index.d.cts

@@ -137,8 +137,8 @@ type BadgeVariant = "primary" | "secondary" | "informal" | "success" | "warning"
 type BadgeSize = "sm" | "md" | "lg" | "xl";
 interface BadgeProps extends VariantProps<typeof badgeVariants> {
     asChild?: boolean;
-    label: string;
-    value?: string;
+    label: React$1.ReactNode;
+    value?: React$1.ReactNode;
     className?: string;
     size?: BadgeSize;
     variant?: BadgeVariant;
@@ -168,7 +168,7 @@ interface BadgeDotProps extends VariantProps<typeof badgeDotVariants> {
 declare const BadgeDot: React$1.FC<BadgeDotProps>;
 
 interface BadgeStatusProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    label: string;
+    label: React$1.ReactNode;
     active?: boolean;
     dotClassName?: string;
 }
@@ -184,7 +184,7 @@ interface BaseDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** Size variant for the divider (affects line thickness + center element sizing). */
     size?: DividerSize;
     /** Label shown for text variant (e.g. "OR"). */
-    label?: string;
+    label?: React$1.ReactNode;
 }
 type ButtonVariant = ButtonProps$1["variant"];
 type IconButtonVariant = ButtonProps["variant"];
@@ -211,7 +211,7 @@ interface ButtonLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement>
     /** Size variant for the divider (affects line thickness + button size). */
     size?: DividerSize;
     /** Text inside the button between the lines. */
-    buttonLabel: string;
+    buttonLabel: React$1.ReactNode;
     /** onClick handler for the button between the lines. */
     onButtonClick: React$1.MouseEventHandler<HTMLButtonElement>;
     /** Variant for the button between the lines. */
@@ -235,9 +235,11 @@ interface ProgressProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "ch
     /** Current value, from 0 to 100. */
     value: number;
     /** Optional label shown above the bar. */
-    label?: string;
+    label?: React$1.ReactNode;
     /** Optional hint text shown below the bar. */
-    hint?: string;
+    hint?: React$1.ReactNode;
+    /** Optional accessible label for the progressbar (string-only). */
+    ariaLabel?: string;
     /** Controls whether the progress percentage label is rendered. */
     showProgressLabel?: boolean;
     /** If true, the hint will not be rendered even if provided. */
@@ -263,8 +265,8 @@ declare const tagVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TagProps extends VariantProps<typeof tagVariants> {
     asChild?: boolean;
-    label: string;
-    value?: string;
+    label: React$1.ReactNode;
+    value?: React$1.ReactNode;
     className?: string;
     leadingIcon?: React$1.ReactElement<{
         disabled?: boolean;
@@ -327,15 +329,15 @@ declare const MenuSubTrigger: typeof DropdownMenuSubTrigger;
 interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
     /** Only needed when the component is a part of a native form. */
     name?: string;
-    label?: string;
+    label?: React$1.ReactNode;
 }
 declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 type TextInputSize = "sm" | "md" | "lg" | "xl";
 type TextInputStatus = "default" | "success" | "error";
 interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -355,8 +357,8 @@ interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 declare const TextInput: React$1.ForwardRefExoticComponent<TextInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface AutocompleteProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "value" | "defaultValue" | "onChange"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /** If true, the hint will not be rendered even if provided. */
     hideHint?: boolean;
     status?: TextInputStatus;
@@ -377,6 +379,11 @@ interface AutocompleteProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEl
     inputValue?: string;
     defaultInputValue?: string;
     onInputChange?: (value: string) => void;
+    /**
+     * If true, free-typed input is also treated as the committed value.
+     * Selecting an option from the dropdown still overrides the value.
+     */
+    freeSolo?: boolean;
     /** Optional className for the dropdown (options container). */
     dropdownClassName?: string;
     /** Optional className for the listbox (<ul>). */
@@ -386,7 +393,7 @@ declare const Autocomplete: React$1.ForwardRefExoticComponent<AutocompleteProps
 
 type SelectStatus = "default" | "success" | "error";
 interface SelectOption {
-    label: string;
+    label: React$1.ReactNode;
     value: string;
 }
 declare const selectTriggerVariants: (props?: ({
@@ -394,8 +401,8 @@ declare const selectTriggerVariants: (props?: ({
     status?: "error" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SelectProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof selectTriggerVariants> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -419,9 +426,9 @@ declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.Re
 
 type FieldStatus = "default" | "success" | "error";
 interface FieldProps {
-    label?: string;
+    label?: React$1.ReactNode;
     labelRight?: React$1.ReactNode;
-    hint?: string;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -437,8 +444,8 @@ type PasswordInputSize = "sm" | "md" | "lg" | "xl";
 type PasswordInputStatus = "default" | "success" | "error";
 type PasswordInputVariant = "icon" | "text";
 interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "disabled"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -461,8 +468,8 @@ type PhoneInputProps = Omit<React$1.ComponentProps<"input">, "onChange" | "value
     onChange?: (value: RPNInput.Value) => void;
 } & {
     className?: string;
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -482,12 +489,12 @@ declare const PhoneInput: React$1.ForwardRefExoticComponent<PhoneInputProps>;
 type RadioGroupOrientation = "vertical" | "horizontal";
 interface RadioGroupOption {
     value: string;
-    label: string;
+    label: React$1.ReactNode;
     disabled?: boolean;
 }
 interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, "children" | "orientation" | "onValueChange"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /** Only needed when the component is a part of a native form. */
     name?: string;
     /** Only needed when the component is a part of a native form. */
@@ -564,8 +571,8 @@ declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.Re
 
 type TextAreaType = "responsive" | "character-limit" | "plain";
 interface TextAreaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -601,7 +608,7 @@ interface ToggleProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>
      * Provide this to include the checked value in native form submission / FormData.
      */
     name?: string;
-    label?: string;
+    label?: React$1.ReactNode;
 }
 declare const Toggle: React$1.ForwardRefExoticComponent<ToggleProps & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -627,9 +634,9 @@ declare const WebsiteInput: React$1.ForwardRefExoticComponent<WebsiteInputProps
 type PopoverPlacement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
 interface PopoverProps {
     children: React$1.ReactNode;
-    strapline?: string;
-    title: string;
-    description?: string;
+    strapline?: React$1.ReactNode;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
     onOk?: () => void;
     okText?: string;
     onCancel?: () => void;
@@ -653,9 +660,9 @@ declare const Popover: React$1.FC<PopoverProps>;
 type TooltipPlacement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
 interface TooltipProps {
     children: React$1.ReactNode;
-    strapline?: string;
-    title: string;
-    description?: string;
+    strapline?: React$1.ReactNode;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
     showArrow?: boolean;
     className?: string;
     placement?: TooltipPlacement;

package/dist/index.d.ts

@@ -137,8 +137,8 @@ type BadgeVariant = "primary" | "secondary" | "informal" | "success" | "warning"
 type BadgeSize = "sm" | "md" | "lg" | "xl";
 interface BadgeProps extends VariantProps<typeof badgeVariants> {
     asChild?: boolean;
-    label: string;
-    value?: string;
+    label: React$1.ReactNode;
+    value?: React$1.ReactNode;
     className?: string;
     size?: BadgeSize;
     variant?: BadgeVariant;
@@ -168,7 +168,7 @@ interface BadgeDotProps extends VariantProps<typeof badgeDotVariants> {
 declare const BadgeDot: React$1.FC<BadgeDotProps>;
 
 interface BadgeStatusProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    label: string;
+    label: React$1.ReactNode;
     active?: boolean;
     dotClassName?: string;
 }
@@ -184,7 +184,7 @@ interface BaseDividerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** Size variant for the divider (affects line thickness + center element sizing). */
     size?: DividerSize;
     /** Label shown for text variant (e.g. "OR"). */
-    label?: string;
+    label?: React$1.ReactNode;
 }
 type ButtonVariant = ButtonProps$1["variant"];
 type IconButtonVariant = ButtonProps["variant"];
@@ -211,7 +211,7 @@ interface ButtonLinesDividerProps extends React$1.HTMLAttributes<HTMLDivElement>
     /** Size variant for the divider (affects line thickness + button size). */
     size?: DividerSize;
     /** Text inside the button between the lines. */
-    buttonLabel: string;
+    buttonLabel: React$1.ReactNode;
     /** onClick handler for the button between the lines. */
     onButtonClick: React$1.MouseEventHandler<HTMLButtonElement>;
     /** Variant for the button between the lines. */
@@ -235,9 +235,11 @@ interface ProgressProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "ch
     /** Current value, from 0 to 100. */
     value: number;
     /** Optional label shown above the bar. */
-    label?: string;
+    label?: React$1.ReactNode;
     /** Optional hint text shown below the bar. */
-    hint?: string;
+    hint?: React$1.ReactNode;
+    /** Optional accessible label for the progressbar (string-only). */
+    ariaLabel?: string;
     /** Controls whether the progress percentage label is rendered. */
     showProgressLabel?: boolean;
     /** If true, the hint will not be rendered even if provided. */
@@ -263,8 +265,8 @@ declare const tagVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TagProps extends VariantProps<typeof tagVariants> {
     asChild?: boolean;
-    label: string;
-    value?: string;
+    label: React$1.ReactNode;
+    value?: React$1.ReactNode;
     className?: string;
     leadingIcon?: React$1.ReactElement<{
         disabled?: boolean;
@@ -327,15 +329,15 @@ declare const MenuSubTrigger: typeof DropdownMenuSubTrigger;
 interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
     /** Only needed when the component is a part of a native form. */
     name?: string;
-    label?: string;
+    label?: React$1.ReactNode;
 }
 declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 type TextInputSize = "sm" | "md" | "lg" | "xl";
 type TextInputStatus = "default" | "success" | "error";
 interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -355,8 +357,8 @@ interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
 declare const TextInput: React$1.ForwardRefExoticComponent<TextInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface AutocompleteProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled" | "value" | "defaultValue" | "onChange"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /** If true, the hint will not be rendered even if provided. */
     hideHint?: boolean;
     status?: TextInputStatus;
@@ -377,6 +379,11 @@ interface AutocompleteProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEl
     inputValue?: string;
     defaultInputValue?: string;
     onInputChange?: (value: string) => void;
+    /**
+     * If true, free-typed input is also treated as the committed value.
+     * Selecting an option from the dropdown still overrides the value.
+     */
+    freeSolo?: boolean;
     /** Optional className for the dropdown (options container). */
     dropdownClassName?: string;
     /** Optional className for the listbox (<ul>). */
@@ -386,7 +393,7 @@ declare const Autocomplete: React$1.ForwardRefExoticComponent<AutocompleteProps
 
 type SelectStatus = "default" | "success" | "error";
 interface SelectOption {
-    label: string;
+    label: React$1.ReactNode;
     value: string;
 }
 declare const selectTriggerVariants: (props?: ({
@@ -394,8 +401,8 @@ declare const selectTriggerVariants: (props?: ({
     status?: "error" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SelectProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof selectTriggerVariants> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -419,9 +426,9 @@ declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.Re
 
 type FieldStatus = "default" | "success" | "error";
 interface FieldProps {
-    label?: string;
+    label?: React$1.ReactNode;
     labelRight?: React$1.ReactNode;
-    hint?: string;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -437,8 +444,8 @@ type PasswordInputSize = "sm" | "md" | "lg" | "xl";
 type PasswordInputStatus = "default" | "success" | "error";
 type PasswordInputVariant = "icon" | "text";
 interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "disabled"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -461,8 +468,8 @@ type PhoneInputProps = Omit<React$1.ComponentProps<"input">, "onChange" | "value
     onChange?: (value: RPNInput.Value) => void;
 } & {
     className?: string;
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -482,12 +489,12 @@ declare const PhoneInput: React$1.ForwardRefExoticComponent<PhoneInputProps>;
 type RadioGroupOrientation = "vertical" | "horizontal";
 interface RadioGroupOption {
     value: string;
-    label: string;
+    label: React$1.ReactNode;
     disabled?: boolean;
 }
 interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, "children" | "orientation" | "onValueChange"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /** Only needed when the component is a part of a native form. */
     name?: string;
     /** Only needed when the component is a part of a native form. */
@@ -564,8 +571,8 @@ declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.Re
 
 type TextAreaType = "responsive" | "character-limit" | "plain";
 interface TextAreaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled"> {
-    label?: string;
-    hint?: string;
+    label?: React$1.ReactNode;
+    hint?: React$1.ReactNode;
     /**
      * If true, the hint will not be rendered even if provided.
      */
@@ -601,7 +608,7 @@ interface ToggleProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>
      * Provide this to include the checked value in native form submission / FormData.
      */
     name?: string;
-    label?: string;
+    label?: React$1.ReactNode;
 }
 declare const Toggle: React$1.ForwardRefExoticComponent<ToggleProps & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -627,9 +634,9 @@ declare const WebsiteInput: React$1.ForwardRefExoticComponent<WebsiteInputProps
 type PopoverPlacement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
 interface PopoverProps {
     children: React$1.ReactNode;
-    strapline?: string;
-    title: string;
-    description?: string;
+    strapline?: React$1.ReactNode;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
     onOk?: () => void;
     okText?: string;
     onCancel?: () => void;
@@ -653,9 +660,9 @@ declare const Popover: React$1.FC<PopoverProps>;
 type TooltipPlacement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
 interface TooltipProps {
     children: React$1.ReactNode;
-    strapline?: string;
-    title: string;
-    description?: string;
+    strapline?: React$1.ReactNode;
+    title: React$1.ReactNode;
+    description?: React$1.ReactNode;
     showArrow?: boolean;
     className?: string;
     placement?: TooltipPlacement;

package/dist/index.js

@@ -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 })
@@ -1694,6 +1700,7 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     inputValue,
     defaultInputValue,
     onInputChange,
+    freeSolo = false,
     dropdownClassName,
     listboxClassName,
     placeholder = "Search\u2026",
@@ -1744,6 +1751,12 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     }
     onInputChange?.(next);
   };
+  const commitTypedValue = (next) => {
+    if (!isValueControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
+  };
   const commitValue = (next) => {
     if (!isValueControlled) {
       setInternalValue(next);
@@ -1760,6 +1773,9 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
     const next = event.target.value;
     setInputText(next);
     setActiveIndex(-1);
+    if (freeSolo) {
+      commitTypedValue(next);
+    }
   };
   const handleFocus = (event) => {
     setIsFocused(true);
@@ -1768,6 +1784,12 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
   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) => {
@@ -1801,6 +1823,17 @@ var Autocomplete = React23.forwardRef((props, forwardedRef) => {
           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;
       }
@@ -3230,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)]";
@@ -3253,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 })
               ] })
             ]
           }
@@ -4162,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?.();
@@ -4217,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" }),