@homebound/beam 4.16.1 → 4.18.0

package/dist/index.d.cts

@@ -5367,12 +5367,12 @@ declare function ProposedValue$1(props: ProposedValueProps): React$1.JSX.Element
 
 type TagXss = Margin | "backgroundColor" | "color";
 type TagType = "info" | "update" | "warning" | "error" | "success" | "neutral" | "ai" | "strikethrough";
-type TagVariant = "primary" | "secondary";
+type TagVariant = "primary" | "secondary" | "bold";
 type TagPropsBase<X> = {
     /** Required even if using `iconOnly + preventTooltip`. In those cases an accessibility friendly message is expected */
     text: ReactNode;
     type?: TagType;
-    /** Defaults to "primary". Secondary is intended for use in TagGroup. */
+    /** Defaults to "primary". Secondary is intended for use in TagGroup. Bold is a darker fill with white text. */
     variant?: TagVariant;
     xss?: X;
     /** A tooltip will automatically be displayed if the text is truncated. Set to true to prevent this behavior.
@@ -5393,10 +5393,11 @@ declare function Tag<X extends Only<Xss<TagXss>, X>>(props: TagProps<X>): React$
 type CardSlotBase<K extends string> = {
     kind: K;
 };
-/** Tag props for badge slots — mirrors Tag (type, icon, iconOnly) with string-only text. */
+/** Tag props for badge slots — mirrors Tag (type, variant, icon, iconOnly) with string-only text. */
 type CardBadgeTag = {
     text: string;
     type?: TagType;
+    variant?: TagVariant;
 } & ({
     iconOnly?: false;
     icon?: IconKey;
@@ -6414,6 +6415,8 @@ interface BeamTextFieldProps<X> extends BeamFocusableProps, PresentationFieldPro
     helperText?: string | ReactNode;
     /** Input label */
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     /** Marks the field as required or optional, the default is assumed ambiguous/unknown. */
     required?: boolean;
     value: string | undefined;
@@ -7518,6 +7521,7 @@ type ImageFitType = "contain" | "cover";
 type CardTag = {
     text: string;
     type?: TagType;
+    variant?: TagVariant;
 };
 type CardProps = {
     title: string;
@@ -8349,6 +8353,7 @@ type InlineFeedbackBannerAction = ActionButtonProps | ({
 type InlineFeedbackBannerProps = {
     type: InlineFeedbackBannerType;
     tagText?: TagProps<any>["text"];
+    tagVariant?: TagVariant;
     description: ReactNode;
     /** Rendered in order, always as text buttons (menu triggers included). */
     actions?: InlineFeedbackBannerAction[];
@@ -8424,6 +8429,8 @@ type CheckboxGroupItemOption = {
 };
 type CheckboxGroupProps = {
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     required?: boolean;
     /** Called when a checkbox is selected or deselected */
     onChange: (values: string[]) => void;
@@ -8480,7 +8487,6 @@ type TextFieldBaseProps<X> = {
     startAdornment?: ReactNode;
     clearable?: boolean;
     textAreaMinHeight?: number;
-    tooltip?: ReactNode;
     hideErrorMessage?: boolean;
     alwaysShowHelperText?: boolean;
     unfocusedPlaceholder?: ReactNode;
@@ -8494,9 +8500,9 @@ type TextFieldBaseProps<X> = {
     onUserBlur?: VoidFunction;
     /** Allow focusing without selecting, i.e. to let the user keep typing after we've pre-filled text + called focus, like the Add New component. */
     selectOnFocus?: boolean;
-} & Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "borderOnHover" | "visuallyDisabled" | "fullWidth" | "xss" | "inputStylePalette"> & Partial<Pick<BeamTextFieldProps<X>, "onChange">>;
+} & Pick<BeamTextFieldProps<X>, "label" | "tooltip" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "borderOnHover" | "visuallyDisabled" | "fullWidth" | "xss" | "inputStylePalette"> & Partial<Pick<BeamTextFieldProps<X>, "onChange">>;
 
-type DateFieldCommonProps = Pick<TextFieldBaseProps<Properties>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact" | "fullWidth"> & {
+type DateFieldCommonProps = Pick<TextFieldBaseProps<Properties>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact" | "fullWidth" | "tooltip"> & {
     label: string;
     /** Called when the component loses focus */
     onBlur?: () => void;
@@ -8596,6 +8602,8 @@ type ComboBoxBaseProps<O, V extends Value> = {
     fieldDecoration?: (opt: O) => ReactNode;
     /** Sets the form field label. */
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     readOnly?: boolean | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
@@ -8710,6 +8718,8 @@ type SelectCardListGroupItemOption<V extends Value> = SelectCardGroupItemOptionB
 type SelectCardGroupItemOption<V extends Value> = SelectCardGridGroupItemOption<V> | SelectCardListGroupItemOption<V>;
 type SelectCardGroupFieldPropsBase = {
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     errorMsg?: string;
     helperText?: string | ReactNode;
     disabled?: boolean;
@@ -8787,6 +8797,8 @@ declare function BoundMultiSelectField<O extends HasIdAndName<V>, V extends Valu
 type NumberFieldType = "cents" | "dollars" | "percent" | "basisPoints" | "days" | "mills";
 interface NumberFieldProps extends Pick<PresentationFieldProps, "labelStyle" | "fullWidth"> {
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     /** If set, the label will be defined as 'aria-label` on the input element */
     type?: NumberFieldType;
     value: number | undefined;
@@ -8847,6 +8859,8 @@ type RadioGroupFieldLayout = "vertical" | "horizontal";
 type RadioGroupFieldProps<K extends string> = {
     /** The label for the choice itself, i.e. "Favorite Cheese". */
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     /** The currently selected option value (i.e. an id). */
     value: K | undefined;
     /** Called when an option is selected. We don't support unselecting. */
@@ -8892,6 +8906,8 @@ type RichTextFieldProps = {
      */
     mergeTags?: string[];
     label?: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     autoFocus?: boolean;
     placeholder?: string;
     /** Called when the component loses focus */
@@ -9095,6 +9111,8 @@ type ToggleChipItemProps = {
 };
 interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     options: ToggleChipItemProps[];
     values: string[];
     readonly?: boolean;
@@ -9156,6 +9174,8 @@ type TreeSelectFieldProps<O, V extends Value> = {
     fieldDecoration?: (opt: O) => ReactNode;
     /** Sets the form field label. */
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     readOnly?: boolean | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;

package/dist/index.d.ts

@@ -5367,12 +5367,12 @@ declare function ProposedValue$1(props: ProposedValueProps): React$1.JSX.Element
 
 type TagXss = Margin | "backgroundColor" | "color";
 type TagType = "info" | "update" | "warning" | "error" | "success" | "neutral" | "ai" | "strikethrough";
-type TagVariant = "primary" | "secondary";
+type TagVariant = "primary" | "secondary" | "bold";
 type TagPropsBase<X> = {
     /** Required even if using `iconOnly + preventTooltip`. In those cases an accessibility friendly message is expected */
     text: ReactNode;
     type?: TagType;
-    /** Defaults to "primary". Secondary is intended for use in TagGroup. */
+    /** Defaults to "primary". Secondary is intended for use in TagGroup. Bold is a darker fill with white text. */
     variant?: TagVariant;
     xss?: X;
     /** A tooltip will automatically be displayed if the text is truncated. Set to true to prevent this behavior.
@@ -5393,10 +5393,11 @@ declare function Tag<X extends Only<Xss<TagXss>, X>>(props: TagProps<X>): React$
 type CardSlotBase<K extends string> = {
     kind: K;
 };
-/** Tag props for badge slots — mirrors Tag (type, icon, iconOnly) with string-only text. */
+/** Tag props for badge slots — mirrors Tag (type, variant, icon, iconOnly) with string-only text. */
 type CardBadgeTag = {
     text: string;
     type?: TagType;
+    variant?: TagVariant;
 } & ({
     iconOnly?: false;
     icon?: IconKey;
@@ -6414,6 +6415,8 @@ interface BeamTextFieldProps<X> extends BeamFocusableProps, PresentationFieldPro
     helperText?: string | ReactNode;
     /** Input label */
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     /** Marks the field as required or optional, the default is assumed ambiguous/unknown. */
     required?: boolean;
     value: string | undefined;
@@ -7518,6 +7521,7 @@ type ImageFitType = "contain" | "cover";
 type CardTag = {
     text: string;
     type?: TagType;
+    variant?: TagVariant;
 };
 type CardProps = {
     title: string;
@@ -8349,6 +8353,7 @@ type InlineFeedbackBannerAction = ActionButtonProps | ({
 type InlineFeedbackBannerProps = {
     type: InlineFeedbackBannerType;
     tagText?: TagProps<any>["text"];
+    tagVariant?: TagVariant;
     description: ReactNode;
     /** Rendered in order, always as text buttons (menu triggers included). */
     actions?: InlineFeedbackBannerAction[];
@@ -8424,6 +8429,8 @@ type CheckboxGroupItemOption = {
 };
 type CheckboxGroupProps = {
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     required?: boolean;
     /** Called when a checkbox is selected or deselected */
     onChange: (values: string[]) => void;
@@ -8480,7 +8487,6 @@ type TextFieldBaseProps<X> = {
     startAdornment?: ReactNode;
     clearable?: boolean;
     textAreaMinHeight?: number;
-    tooltip?: ReactNode;
     hideErrorMessage?: boolean;
     alwaysShowHelperText?: boolean;
     unfocusedPlaceholder?: ReactNode;
@@ -8494,9 +8500,9 @@ type TextFieldBaseProps<X> = {
     onUserBlur?: VoidFunction;
     /** Allow focusing without selecting, i.e. to let the user keep typing after we've pre-filled text + called focus, like the Add New component. */
     selectOnFocus?: boolean;
-} & Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "borderOnHover" | "visuallyDisabled" | "fullWidth" | "xss" | "inputStylePalette"> & Partial<Pick<BeamTextFieldProps<X>, "onChange">>;
+} & Pick<BeamTextFieldProps<X>, "label" | "tooltip" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "borderOnHover" | "visuallyDisabled" | "fullWidth" | "xss" | "inputStylePalette"> & Partial<Pick<BeamTextFieldProps<X>, "onChange">>;
 
-type DateFieldCommonProps = Pick<TextFieldBaseProps<Properties>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact" | "fullWidth"> & {
+type DateFieldCommonProps = Pick<TextFieldBaseProps<Properties>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact" | "fullWidth" | "tooltip"> & {
     label: string;
     /** Called when the component loses focus */
     onBlur?: () => void;
@@ -8596,6 +8602,8 @@ type ComboBoxBaseProps<O, V extends Value> = {
     fieldDecoration?: (opt: O) => ReactNode;
     /** Sets the form field label. */
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     readOnly?: boolean | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
@@ -8710,6 +8718,8 @@ type SelectCardListGroupItemOption<V extends Value> = SelectCardGroupItemOptionB
 type SelectCardGroupItemOption<V extends Value> = SelectCardGridGroupItemOption<V> | SelectCardListGroupItemOption<V>;
 type SelectCardGroupFieldPropsBase = {
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     errorMsg?: string;
     helperText?: string | ReactNode;
     disabled?: boolean;
@@ -8787,6 +8797,8 @@ declare function BoundMultiSelectField<O extends HasIdAndName<V>, V extends Valu
 type NumberFieldType = "cents" | "dollars" | "percent" | "basisPoints" | "days" | "mills";
 interface NumberFieldProps extends Pick<PresentationFieldProps, "labelStyle" | "fullWidth"> {
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     /** If set, the label will be defined as 'aria-label` on the input element */
     type?: NumberFieldType;
     value: number | undefined;
@@ -8847,6 +8859,8 @@ type RadioGroupFieldLayout = "vertical" | "horizontal";
 type RadioGroupFieldProps<K extends string> = {
     /** The label for the choice itself, i.e. "Favorite Cheese". */
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     /** The currently selected option value (i.e. an id). */
     value: K | undefined;
     /** Called when an option is selected. We don't support unselecting. */
@@ -8892,6 +8906,8 @@ type RichTextFieldProps = {
      */
     mergeTags?: string[];
     label?: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     autoFocus?: boolean;
     placeholder?: string;
     /** Called when the component loses focus */
@@ -9095,6 +9111,8 @@ type ToggleChipItemProps = {
 };
 interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     options: ToggleChipItemProps[];
     values: string[];
     readonly?: boolean;
@@ -9156,6 +9174,8 @@ type TreeSelectFieldProps<O, V extends Value> = {
     fieldDecoration?: (opt: O) => ReactNode;
     /** Sets the form field label. */
     label: string;
+    /** Adds tooltip for the field, shown via an info icon beside the label. */
+    tooltip?: ReactNode;
     readOnly?: boolean | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;

package/dist/index.js

@@ -11250,6 +11250,7 @@ function TextFieldBase(props) {
   } = fieldProps ?? {};
   const {
     label,
+    tooltip,
     required,
     labelProps,
     inputProps,
@@ -11271,7 +11272,6 @@ function TextFieldBase(props) {
     borderOnHover = fieldProps?.borderOnHover ?? false,
     textAreaMinHeight = 96,
     clearable = false,
-    tooltip,
     visuallyDisabled = fieldProps?.visuallyDisabled ?? true,
     errorInTooltip = fieldProps?.errorInTooltip ?? false,
     hideErrorMessage = false,
@@ -11292,6 +11292,9 @@ function TextFieldBase(props) {
     forceFocus = false,
     forceHover = false
   } = internalProps;
+  const hasVisibleLabel = !!label && labelStyle !== "inline" && labelStyle !== "hidden" && !compound;
+  const isInteractive = !inputProps.disabled && !inputProps.readOnly;
+  const tooltipLocation = hasVisibleLabel ? "label" : !isInteractive ? "field" : void 0;
   const errorMessageId = `${inputProps.id}-error`;
   const labelSuffix = useLabelSuffix(required, inputProps.readOnly);
   const tid = useTestIds(props, defaultTestId(label));
@@ -11583,9 +11586,9 @@ function TextFieldBase(props) {
   };
   return /* @__PURE__ */ jsxs20(Fragment13, { children: [
     /* @__PURE__ */ jsxs20("div", { ...trussProps24(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
-      label && labelStyle !== "inline" && /* @__PURE__ */ jsx37(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, ...tid.label }),
+      label && labelStyle !== "inline" && /* @__PURE__ */ jsx37(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, tooltip: tooltipLocation === "label" ? tooltip : void 0, ...tid.label }),
       maybeTooltip({
-        title: tooltip,
+        title: tooltipLocation === "field" ? tooltip : void 0,
         placement: "top",
         children: inputProps.readOnly ? /* @__PURE__ */ jsxs20("div", { ...trussProps24({
           // Use input wrapper to get common styles, but then we need to override some
@@ -13048,6 +13051,27 @@ function getVariantStyles(variant, type) {
       }
     };
   }
+  if (variant === "bold") {
+    return {
+      background: {
+        ...getBoldBackground(type),
+        ...{
+          color: "white"
+        }
+      },
+      iconColor: "rgba(255, 255, 255, 1)" /* White */,
+      typography: {
+        fontWeight: "fw6",
+        fontSize: "fz_10px",
+        lineHeight: "lh_14px",
+        textTransform: "ttu"
+      },
+      padding: {
+        paddingLeft: "pl_6px",
+        paddingRight: "pr_6px"
+      }
+    };
+  }
   return {
     ...getPrimaryStyles(type),
     typography: {
@@ -13062,6 +13086,38 @@ function getVariantStyles(variant, type) {
     }
   };
 }
+function getBoldBackground(type) {
+  switch (type) {
+    case "info":
+      return {
+        backgroundColor: "bgBlue600"
+      };
+    case "update":
+      return {
+        backgroundColor: "bgYellow600"
+      };
+    case "warning":
+      return {
+        backgroundColor: "bgOrange600"
+      };
+    case "error":
+      return {
+        backgroundColor: "bgRed600"
+      };
+    case "success":
+      return {
+        backgroundColor: "bgGreen600"
+      };
+    case "ai":
+      return {
+        backgroundColor: "bgPurple600"
+      };
+    default:
+      return {
+        backgroundColor: "bgGray600"
+      };
+  }
+}
 function getPrimaryStyles(type) {
   switch (type) {
     case "info":
@@ -16042,9 +16098,9 @@ function Card(props) {
       icon: "verticalDots",
       color: isList ? "--b-on-surface-muted" /* OnSurfaceMuted */ : "--b-on-primary" /* OnPrimary */
     }, items: buttonMenuItems }) }),
-    tag && !isList && /* @__PURE__ */ jsx79("div", { className: "absolute l_1 tp_4px", children: /* @__PURE__ */ jsx79(Tag, { type: tag.type, text: tag.text, ...tid.tag }) }),
+    tag && !isList && /* @__PURE__ */ jsx79("div", { className: "absolute l_1 tp_4px", children: /* @__PURE__ */ jsx79(Tag, { type: tag.type, variant: tag.variant, text: tag.text, ...tid.tag }) }),
     /* @__PURE__ */ jsxs51("div", { className: "df fdc aifs g_1", children: [
-      tag && isList && /* @__PURE__ */ jsx79(Tag, { type: tag.type, text: tag.text, ...tid.tag }),
+      tag && isList && /* @__PURE__ */ jsx79(Tag, { type: tag.type, variant: tag.variant, text: tag.text, ...tid.tag }),
       /* @__PURE__ */ jsxs51("div", { children: [
         /* @__PURE__ */ jsx79("div", { ...trussProps52({
           fontWeight: "fw6",
@@ -18824,7 +18880,7 @@ function TreeSelectFieldBase(props) {
       maxWidth: "maxw100"
     } : {}
   }), ref: comboBoxRef, children: [
-    /* @__PURE__ */ jsx105(ComboBoxInput, { ...otherProps, fullWidth, labelStyle, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue, getOptionLabel, borderless, tooltip: resolveTooltip(disabled, void 0, readOnly), resetField, nothingSelectedText, isTree: true }),
+    /* @__PURE__ */ jsx105(ComboBoxInput, { ...otherProps, fullWidth, labelStyle, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue, getOptionLabel, borderless, tooltip: resolveTooltip(disabled, props.tooltip, readOnly), resetField, nothingSelectedText, isTree: true }),
     state.isOpen && /* @__PURE__ */ jsx105(
       Popover,
       {
@@ -19073,6 +19129,7 @@ function ComboBoxBase(props) {
     onAddNew,
     autoSort = true,
     hideChips = false,
+    tooltip,
     ...otherProps
   } = props;
   const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
@@ -19305,7 +19362,7 @@ function ComboBoxBase(props) {
       maxWidth: "maxw100"
     } : {}
   }), ref: comboBoxRef, children: [
-    /* @__PURE__ */ jsx107(ComboBoxInput, { ...otherProps, inputStylePalette, fullWidth, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions, getOptionValue, getOptionLabel, nothingSelectedText, borderless, tooltip: resolveTooltip(disabled, void 0, readOnly), resetField, hideChips, ...proposalProps }),
+    /* @__PURE__ */ jsx107(ComboBoxInput, { ...otherProps, inputStylePalette, fullWidth, buttonProps, buttonRef: triggerRef, inputProps, inputRef, inputWrapRef, listBoxRef, state, labelProps, selectedOptions, getOptionValue, getOptionLabel, nothingSelectedText, borderless, tooltip: resolveTooltip(disabled, tooltip, readOnly), resetField, hideChips, ...proposalProps }),
     state.isOpen && /* @__PURE__ */ jsx107(
       Popover,
       {
@@ -19691,6 +19748,7 @@ function InlineFeedbackBanner(props) {
   const {
     type,
     tagText,
+    tagVariant,
     description,
     actions = []
   } = props;
@@ -19703,10 +19761,12 @@ function InlineFeedbackBanner(props) {
   const tid = useTestIds(props, "inlineFeedbackBanner");
   const tagProps = tagText ? {
     type: tagType,
+    variant: tagVariant,
     icon,
     text: tagText
   } : {
     type: tagType,
+    variant: tagVariant,
     icon,
     text: fallbackTagText,
     iconOnly: true
@@ -19979,6 +20039,7 @@ import { jsx as jsx116, jsxs as jsxs71 } from "react/jsx-runtime";
 function LabeledGroupField(props) {
   const {
     label,
+    tooltip,
     labelStyle,
     labelProps,
     groupProps,
@@ -19992,7 +20053,7 @@ function LabeledGroupField(props) {
   } = props;
   const isHiddenLabel = labelStyle === "hidden";
   const isLeftLabel = labelStyle === "left";
-  const labelElement = /* @__PURE__ */ jsx116(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: isHiddenLabel, inline: isLeftLabel });
+  const labelElement = /* @__PURE__ */ jsx116(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, tooltip, hidden: isHiddenLabel, inline: isLeftLabel });
   return /* @__PURE__ */ jsxs71("div", { ...groupProps, ...trussProps77({
     width: "w100",
     ...isLeftLabel ? {
@@ -20020,6 +20081,7 @@ function CheckboxGroup(props) {
   const {
     options,
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     values,
     errorMsg,
@@ -20039,7 +20101,7 @@ function CheckboxGroup(props) {
   } = useCheckboxGroup(props, state);
   const tid = useTestIds(props, defaultTestId(label));
   const labelSuffix = useLabelSuffix(required, false);
-  return /* @__PURE__ */ jsx117(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ jsx117("div", { ...trussProps78({
+  return /* @__PURE__ */ jsx117(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps, errorMsg, helperText, labelSuffix, onBlur, onFocus, tid, children: /* @__PURE__ */ jsx117("div", { ...trussProps78({
     display: "dg",
     gridTemplateColumns: ["gtc_var", {
       "--gridTemplateColumns": maybeCssVar36(`repeat(${columns}, auto)`)
@@ -20270,6 +20332,7 @@ import { Fragment as Fragment29, jsx as jsx121, jsxs as jsxs72 } from "react/jsx
 function DateFieldBase(props) {
   const {
     label,
+    tooltip,
     disabled,
     required,
     value,
@@ -20462,7 +20525,7 @@ function DateFieldBase(props) {
         },
         endAdornment: !iconLeft && EndFieldButtons,
         startAdornment: !hideCalendarIcon && iconLeft && calendarButton,
-        tooltip: resolveTooltip(disabled, void 0, readOnly),
+        tooltip: resolveTooltip(disabled, tooltip, readOnly),
         ...others
       }
     ),
@@ -20677,6 +20740,7 @@ function MultiLineSelectField(props) {
     getOptionValue = (opt) => opt.id,
     getOptionLabel = (opt) => opt.name,
     labelStyle,
+    tooltip,
     ...otherProps
   } = props;
   const tid = useTestIds(props, "");
@@ -20692,7 +20756,7 @@ function MultiLineSelectField(props) {
       ...labelStyle === "left" ? {
         width: "w50"
       } : {}
-    }), children: /* @__PURE__ */ jsx128(Label, { ...tid.label, label: props.label }) }),
+    }), children: /* @__PURE__ */ jsx128(Label, { ...tid.label, label: props.label, tooltip }) }),
     /* @__PURE__ */ jsxs74("div", { ...trussProps81({
       ...labelStyle === "left" ? {
         width: "w50"
@@ -21268,6 +21332,7 @@ function MultiSelectCardGroup(props) {
   } = usePresentationContext();
   const {
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     values,
     options,
@@ -21302,7 +21367,7 @@ function MultiSelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ jsx135(LabeledGroupField, { label, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ jsx135("div", { ...trussProps86(getSelectCardOptionsCss({
+  return /* @__PURE__ */ jsx135(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ jsx135("div", { ...trussProps86(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -21516,6 +21581,7 @@ function NumberField(props) {
     readOnly,
     type,
     label,
+    tooltip,
     onBlur,
     onFocus,
     errorMsg,
@@ -21675,7 +21741,7 @@ function NumberField(props) {
       onFocus,
       errorMsg,
       helperText,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       ...proposalProps,
       ...otherProps
     }
@@ -21758,6 +21824,7 @@ function RadioGroupField(props) {
     errorMsg,
     helperText,
     layout = "vertical",
+    tooltip,
     ...otherProps
   } = props;
   const name = useMemo34(() => `radio-group-${++nextNameId}`, []);
@@ -21791,7 +21858,7 @@ function RadioGroupField(props) {
         justifyContent: "jcsb"
       } : {}
     }), ...tid, children: [
-      /* @__PURE__ */ jsx143(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, hidden: labelStyle === "hidden" }),
+      /* @__PURE__ */ jsx143(Label, { label, ...labelProps, ...tid.label, suffix: labelSuffix, tooltip, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ jsxs79("div", { ...radioGroupProps, children: [
         /* @__PURE__ */ jsx143("div", { ...trussProps88({
           display: "df",
@@ -22093,7 +22160,7 @@ function RichTextFieldImpl(props) {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ jsx146(Label, { labelProps: {}, label }),
+      label && /* @__PURE__ */ jsx146(Label, { labelProps: {}, label, tooltip: props.tooltip }),
       /* @__PURE__ */ jsxs80("div", { className: "beam-trix-editor", children: [
         /* @__PURE__ */ jsx146("input", { type: "hidden", id: `input-${id}`, value }),
         createElement4("trix-editor", {
@@ -22116,7 +22183,7 @@ function RichTextFieldImpl(props) {
         maxWidth: "maxw_550px"
       } : {}
     }), children: [
-      label && /* @__PURE__ */ jsx146(Label, { label }),
+      label && /* @__PURE__ */ jsx146(Label, { label, tooltip: props.tooltip }),
       /* @__PURE__ */ jsx146("div", { ...trussProps89({
         minHeight: "mh_120px",
         backgroundColor: ["bgColor_var", {
@@ -22261,6 +22328,7 @@ function SelectCardGroup(props) {
   } = usePresentationContext();
   const {
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     value,
     options,
@@ -22289,7 +22357,7 @@ function SelectCardGroup(props) {
     label,
     isDisabled
   }, state);
-  return /* @__PURE__ */ jsx149(LabeledGroupField, { label, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ jsx149("div", { ...trussProps90(getSelectCardOptionsCss({
+  return /* @__PURE__ */ jsx149(LabeledGroupField, { label, tooltip, labelStyle, labelProps, groupProps: radioGroupProps, errorMsg, helperText, tid, children: /* @__PURE__ */ jsx149("div", { ...trussProps90(getSelectCardOptionsCss({
     view,
     hasDescription,
     layout,
@@ -22624,6 +22692,7 @@ function TextAreaField(props) {
     preventNewLines,
     onEnter,
     maxLines,
+    tooltip,
     ...otherProps
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
@@ -22663,7 +22732,7 @@ function TextAreaField(props) {
       inputRef,
       inputWrapRef,
       textAreaMinHeight: preventNewLines ? 0 : void 0,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       ...proposalProps
     }
   );
@@ -22731,6 +22800,7 @@ function TextField(props) {
     onEnter,
     onEscapeBubble,
     hideErrorMessage,
+    tooltip,
     ...otherProps
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
@@ -22773,7 +22843,7 @@ function TextField(props) {
       labelProps,
       inputProps,
       inputRef,
-      tooltip: resolveTooltip(disabled, void 0, readOnly),
+      tooltip: resolveTooltip(disabled, tooltip, readOnly),
       hideErrorMessage,
       ...proposalProps
     }
@@ -22843,6 +22913,7 @@ function ToggleChipGroup(props) {
   const {
     values,
     label,
+    tooltip,
     labelStyle = fieldProps?.labelStyle ?? "above",
     options,
     required,
@@ -22871,7 +22942,7 @@ function ToggleChipGroup(props) {
       justifyContent: "jcsb"
     } : {}
   }), children: [
-    /* @__PURE__ */ jsx158(Label, { label, ...labelProps, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix }),
+    /* @__PURE__ */ jsx158(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden", inline: labelStyle !== "above", suffix: labelSuffix, tooltip }),
     /* @__PURE__ */ jsx158("div", { ...trussProps92({
       display: "df",
       gap: "g_1",