@dashforge/tw 1.4.0 → 1.5.1

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useMemo, forwardRef, useContext, useState, useEffect, useRef, useId, useCallback, Fragment, createContext, Children, isValidElement, memo, cloneElement, useLayoutEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo, forwardRef, useContext, useState, useEffect, useRef, useId, useCallback, Fragment as Fragment$1, createContext, Children, isValidElement, memo, cloneElement, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
 import { useComponentDefaults } from '@dashforge/tw-theme';
@@ -9,6 +9,7 @@ import { useRbacOptional, resolveAccessState } from '@dashforge/rbac';
 import { tv } from 'tailwind-variants';
 export { tv } from 'tailwind-variants';
 import { useDashFieldMeta } from '@dashforge/forms';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
@@ -17,7 +18,6 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as RadixSlider from '@radix-ui/react-slider';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 
 function _extends() {
@@ -630,6 +630,184 @@ Spinner.displayName = 'Spinner';
     }));
 });
 
+const tooltipVariants = tv({
+    slots: {
+        content: [
+            'z-50 max-w-xs rounded-md px-3 py-1.5 text-xs font-medium',
+            // Auto-invert via the dashforgePreset() CSS-var swap:
+            //  - Light mode: `bg-neutral-900` = #171717 (dark surface) +
+            //    `text-neutral-50` = #fafafa (light text) — DARK tooltip
+            //    on the light page (high contrast).
+            //  - Dark mode: `bg-neutral-900` flips to #f5f5f5 (light) +
+            //    `text-neutral-50` flips to #0a0a0a (dark text) — LIGHT
+            //    tooltip on the dark page (high contrast against page).
+            // Adding `dark:bg-neutral-50 dark:text-neutral-900` (the old
+            // pattern) would force the dark-mode tooltip back to a dark
+            // surface — invisible against the dark page.
+            'bg-neutral-900 text-neutral-50',
+            'shadow-md',
+            'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+        ],
+        // Arrow tracks the content bg — auto-inverts the same way.
+        arrow: 'fill-neutral-900'
+    }
+});
+
+/**
+ * Dashforge TW `<Tooltip>` — hoverable / focusable tooltip.
+ *
+ * Built on `@radix-ui/react-tooltip`:
+ *  - APG tooltip pattern: `role="tooltip"`, `aria-describedby` wired
+ *    to the trigger automatically (Radix manages the id linkage).
+ *  - Shows on hover OR keyboard focus.
+ *  - Dismissed on Escape or pointer leave.
+ *
+ * Wrap any single React node — it becomes the trigger via Radix's
+ * `asChild` slot. The trigger inherits `aria-describedby` so screen
+ * readers announce the tooltip content along with the trigger.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Delete this item">
+ *   <Button variant="ghost">
+ *     <TrashIcon />
+ *   </Button>
+ * </Tooltip>
+ * ```
+ *
+ * Each consumer can also wrap the entire app once in
+ * `<RadixTooltip.Provider>` to share delay/skip configuration; we
+ * include a per-component provider here for ease-of-use.
+ */ function Tooltip(props) {
+    var _themeSlotProps_content, _slotProps_content, _themeSlotProps_arrow, _slotProps_arrow;
+    const themeDefaults = useComponentDefaults('Tooltip');
+    const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
+    const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    const { children, content, side = 'top', align = 'center', hideArrow = false, delayDuration = 200, open, onOpenChange, sideOffset = 4, sx, slotProps } = merged;
+    const v = tooltipVariants();
+    return jsx(RadixTooltip.Provider, {
+        delayDuration: delayDuration,
+        children: jsxs(RadixTooltip.Root, {
+            open: open,
+            onOpenChange: onOpenChange,
+            children: [
+                jsx(RadixTooltip.Trigger, {
+                    asChild: true,
+                    children: children
+                }),
+                jsx(RadixTooltip.Portal, {
+                    children: jsxs(RadixTooltip.Content, {
+                        side: side,
+                        align: align,
+                        sideOffset: sideOffset,
+                        className: cn(v.content(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_content = themeSlotProps.content) == null ? void 0 : _themeSlotProps_content.className, slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                        children: [
+                            content,
+                            !hideArrow && jsx(RadixTooltip.Arrow, {
+                                className: cn(v.arrow(), themeSlotProps == null ? void 0 : (_themeSlotProps_arrow = themeSlotProps.arrow) == null ? void 0 : _themeSlotProps_arrow.className, slotProps == null ? void 0 : (_slotProps_arrow = slotProps.arrow) == null ? void 0 : _slotProps_arrow.className)
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+
+/** Normalise `string | config` to a config (or null when absent). */ function normalizeFieldTooltip(tooltip) {
+    if (tooltip == null) return null;
+    return typeof tooltip === 'string' ? {
+        content: tooltip
+    } : tooltip;
+}
+/**
+ * Resolve the effective tooltip config (Option C): deep-merge the
+ * per-instance `tooltip` over the theme default. The instance wins per
+ * key, so the theme can set `icon` / `position` / `side` while the
+ * instance supplies just `content` (via the string shorthand).
+ */ function resolveFieldTooltip(instance, themeDefault) {
+    const inst = normalizeFieldTooltip(instance);
+    const base = normalizeFieldTooltip(themeDefault);
+    if (!inst && !base) return null;
+    if (!inst) return base;
+    if (!base) return inst;
+    return _extends({}, base, inst);
+}
+/** Built-in default trigger icon — inline SVG, no external dependency. */ function InfoCircleIcon() {
+    return jsxs("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.7",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+            jsx("circle", {
+                cx: "12",
+                cy: "12",
+                r: "9"
+            }),
+            jsx("path", {
+                d: "M12 16v-4"
+            }),
+            jsx("path", {
+                d: "M12 8h.01"
+            })
+        ]
+    });
+}
+/** The focusable ⓘ trigger + the Radix-based `<Tooltip>` popup. */ function LabelTooltipTrigger({ config }) {
+    const { content, icon, position = 'after', side = 'top' } = config;
+    return jsx(Tooltip, {
+        content: content,
+        side: side,
+        children: jsx("button", {
+            type: "button",
+            "aria-label": "More information",
+            className: cn('inline-flex items-center justify-center align-middle leading-none text-neutral-500 hover:text-neutral-700 cursor-help', position === 'before' ? 'mr-1' : 'ml-1'),
+            children: icon != null ? icon : jsx(InfoCircleIcon, {})
+        })
+    });
+}
+/**
+ * Compose the primary label block — `label` plus its optional `required`
+ * mark — with the help-tooltip trigger. The required asterisk stays part
+ * of the primary block; the `ⓘ` is secondary and sits before/after that
+ * whole block. Returns the plain primary block when there is no tooltip.
+ *
+ * @param label - the label node.
+ * @param config - resolved tooltip config (from {@link resolveFieldTooltip}) or `null`.
+ * @param requiredMark - the required-asterisk node (or falsy), rendered as
+ *   part of the primary block, immediately after the label.
+ */ function renderLabelWithTooltip(label, config, requiredMark) {
+    const primary = requiredMark ? jsxs(Fragment, {
+        children: [
+            label,
+            requiredMark
+        ]
+    }) : label;
+    if (!config) return primary;
+    const trigger = jsx(LabelTooltipTrigger, {
+        config: config
+    });
+    return config.position === 'before' ? jsxs(Fragment, {
+        children: [
+            trigger,
+            primary
+        ]
+    }) : jsxs(Fragment, {
+        children: [
+            primary,
+            trigger
+        ]
+    });
+}
+
 /**
  * `useStandaloneFieldWarning` — dev-only guard for `@dashforge/tw` form
  * widgets rendered outside a `DashFormProvider` and without a controlled
@@ -849,10 +1027,12 @@ Spinner.displayName = 'Spinner';
  *   - `aria-describedby` links the input to the helper/error text node.
  *   - Required fields get the native `required` attribute + a visual `*`.
  */ function TextField(props) {
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_inputWrapper, _slotProps_inputWrapper, _slotProps_prefix, _themeSlotProps_input, _slotProps_input, _slotProps_suffix, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_inputWrapper, _slotProps_inputWrapper, _slotProps_prefix, _themeSlotProps_input, _slotProps_input, _slotProps_suffix, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('TextField');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, visibleWhen, layout = 'stacked', size, label, helperText, required, error, disabled, fullWidth, access, sx, slotProps, placeholder, type, onChange: userOnChange, onBlur: userOnBlur, value: userValue, defaultValue } = merged, rest = _object_without_properties_loose(merged, [
         "name",
         "rules",
@@ -971,17 +1151,14 @@ Spinner.displayName = 'Spinner';
     return jsxs("div", {
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 htmlFor: inputId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsxs("div", {
                 className: cn(v.inputWrapper(), themeSlotProps == null ? void 0 : (_themeSlotProps_inputWrapper = themeSlotProps.inputWrapper) == null ? void 0 : _themeSlotProps_inputWrapper.className, slotProps == null ? void 0 : (_slotProps_inputWrapper = slotProps.inputWrapper) == null ? void 0 : _slotProps_inputWrapper.className),
@@ -1169,10 +1346,12 @@ Spinner.displayName = 'Spinner';
  *    rather than MUI slot components.
  */ function Checkbox(props) {
     var _ref;
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_control, _slotProps_control, _themeSlotProps_indicator, _slotProps_indicator, _themeSlotProps_label, _slotProps_label, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_control, _slotProps_control, _themeSlotProps_indicator, _slotProps_indicator, _themeSlotProps_label, _slotProps_label, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('Checkbox');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, visibleWhen, label, helperText, error, access, size, disabled, checked, defaultChecked, onCheckedChange, sx, slotProps } = merged;
     // ───── Hooks (always called, unconditional) ─────
     const bridge = useContext(DashFormContext);
@@ -1310,7 +1489,7 @@ Spinner.displayName = 'Spinner';
                     label && jsx("label", {
                         htmlFor: controlId,
                         className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                        children: label
+                        children: renderLabelWithTooltip(label, tooltipConfig)
                     }),
                     resolvedHelperText && jsx("p", {
                         className: cn(resolvedError ? v.errorText() : v.helperText(), resolvedError ? [
@@ -1407,10 +1586,12 @@ Spinner.displayName = 'Spinner';
  *    translate-x distance so the knob lands flush at each end.
  */ function Switch(props) {
     var _ref;
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_control, _slotProps_control, _themeSlotProps_thumb, _slotProps_thumb, _themeSlotProps_label, _slotProps_label, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_control, _slotProps_control, _themeSlotProps_thumb, _slotProps_thumb, _themeSlotProps_label, _slotProps_label, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('Switch');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, visibleWhen, label, helperText, error, access, size, disabled, checked, defaultChecked, onCheckedChange, sx, slotProps } = merged;
     const bridge = useContext(DashFormContext);
     const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
@@ -1522,7 +1703,7 @@ Spinner.displayName = 'Spinner';
                     label && jsx("label", {
                         htmlFor: controlId,
                         className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                        children: label
+                        children: renderLabelWithTooltip(label, tooltipConfig)
                     }),
                     resolvedHelperText && jsx("p", {
                         className: cn(resolvedError ? v.errorText() : v.helperText(), resolvedError ? [
@@ -1660,10 +1841,12 @@ Spinner.displayName = 'Spinner';
  *     keyboard-accessible by default (arrow keys move selection).
  */ function RadioGroup(props) {
     var _ref;
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_optionList, _slotProps_optionList, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_optionList, _slotProps_optionList, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('RadioGroup');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, options, label, rules, helperText, required, error, disabled, size, layout, access, visibleWhen, sx, slotProps, value: explicitValue, defaultValue, onValueChange } = merged;
     // ───── Hooks (unconditional) ─────
     const bridge = useContext(DashFormContext);
@@ -1779,17 +1962,14 @@ Spinner.displayName = 'Spinner';
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         "aria-describedby": resolvedHelperText ? helperId : undefined,
         children: [
-            label && jsxs("div", {
+            label && jsx("div", {
                 id: labelId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsx(RadixRadioGroup.Root, _extends({
                 name: name
@@ -1950,10 +2130,12 @@ Spinner.displayName = 'Spinner';
  * `aria-describedby` links to the helper/error text node, required
  * fields get the native `required` attribute + a visual `*`.
  */ function Textarea(props) {
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_inputWrapper, _slotProps_inputWrapper, _themeSlotProps_input, _slotProps_input, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_inputWrapper, _slotProps_inputWrapper, _themeSlotProps_input, _slotProps_input, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('Textarea');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, visibleWhen, layout = 'stacked', size, resize, label, helperText, required, error, disabled, fullWidth, access, sx, slotProps, placeholder, rows = 3, onChange: userOnChange, onBlur: userOnBlur, value: userValue, defaultValue } = merged, rest = _object_without_properties_loose(merged, [
         "name",
         "rules",
@@ -2061,17 +2243,14 @@ Spinner.displayName = 'Spinner';
     return jsxs("div", {
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 htmlFor: inputId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsx("div", {
                 className: cn(v.inputWrapper(), themeSlotProps == null ? void 0 : (_themeSlotProps_inputWrapper = themeSlotProps.inputWrapper) == null ? void 0 : _themeSlotProps_inputWrapper.className, slotProps == null ? void 0 : (_slotProps_inputWrapper = slotProps.inputWrapper) == null ? void 0 : _slotProps_inputWrapper.className),
@@ -2251,10 +2430,12 @@ Spinner.displayName = 'Spinner';
  *    `aria-valuemin` / `aria-valuemax` automatically)
  */ function NumberField(props) {
     var _parseFromInput, _parseFromInput1;
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_inputWrapper, _slotProps_inputWrapper, _themeSlotProps_input, _slotProps_input, _themeSlotProps_stepper, _slotProps_stepper, _themeSlotProps_stepperButton, _slotProps_stepperButton, _themeSlotProps_stepperButton1, _slotProps_stepperButton1, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_inputWrapper, _slotProps_inputWrapper, _themeSlotProps_input, _slotProps_input, _themeSlotProps_stepper, _slotProps_stepper, _themeSlotProps_stepperButton, _slotProps_stepperButton, _themeSlotProps_stepperButton1, _slotProps_stepperButton1, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('NumberField');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, visibleWhen, layout = 'stacked', size, label, helperText, required, error, disabled, fullWidth, access, sx, slotProps, placeholder, min, max, step = 1, showStepper = false, onChange: userOnChange, onBlur: userOnBlur, value: userValue, defaultValue } = merged, rest = _object_without_properties_loose(merged, [
         "name",
         "rules",
@@ -2405,17 +2586,14 @@ Spinner.displayName = 'Spinner';
     return jsxs("div", {
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 htmlFor: inputId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsxs("div", {
                 className: cn(v.inputWrapper(), themeSlotProps == null ? void 0 : (_themeSlotProps_inputWrapper = themeSlotProps.inputWrapper) == null ? void 0 : _themeSlotProps_inputWrapper.className, slotProps == null ? void 0 : (_slotProps_inputWrapper = slotProps.inputWrapper) == null ? void 0 : _slotProps_inputWrapper.className),
@@ -2582,10 +2760,12 @@ Spinner.displayName = 'Spinner';
  * `inputMode="numeric" | "text"` per mode + `autoComplete="one-time-code"`
  * so iOS Safari + Android Chrome trigger SMS autofill correctly.
  */ function OTPField(props) {
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_slotsRow, _slotProps_slotsRow, _themeSlotProps_hiddenInput, _slotProps_hiddenInput, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_slotsRow, _slotProps_slotsRow, _themeSlotProps_hiddenInput, _slotProps_hiddenInput, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('OTPField');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, visibleWhen, size, label, helperText, required, error, disabled, access, sx, slotProps, length = 6, mode = 'numeric', value: userValue, defaultValue, onChange: userOnChange, onComplete } = merged;
     // ───── Hooks (unconditional) ─────
     const bridge = useContext(DashFormContext);
@@ -2688,18 +2868,15 @@ Spinner.displayName = 'Spinner';
     return jsxs("div", {
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 id: labelId,
                 htmlFor: inputId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsxs("div", {
                 className: cn(v.slotsRow(), themeSlotProps == null ? void 0 : (_themeSlotProps_slotsRow = themeSlotProps.slotsRow) == null ? void 0 : _themeSlotProps_slotsRow.className, slotProps == null ? void 0 : (_slotProps_slotsRow = slotProps.slotsRow) == null ? void 0 : _slotProps_slotsRow.className),
@@ -3009,10 +3186,12 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
  * shapes, and async runtime options (`optionsFromFieldData`) are
  * deferred to F5-A-bis.
  */ function Autocomplete(props) {
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_inputWrapper, _slotProps_inputWrapper, _themeSlotProps_chipsList, _slotProps_chipsList, _themeSlotProps_input, _slotProps_input, _themeSlotProps_clearButton, _slotProps_clearButton, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_popover, _slotProps_popover, _themeSlotProps_listBox, _slotProps_listBox, _themeSlotProps_emptyState, _slotProps_emptyState, _themeSlotProps_emptyState1, _slotProps_emptyState1, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_inputWrapper, _slotProps_inputWrapper, _themeSlotProps_chipsList, _slotProps_chipsList, _themeSlotProps_input, _slotProps_input, _themeSlotProps_clearButton, _slotProps_clearButton, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_popover, _slotProps_popover, _themeSlotProps_listBox, _slotProps_listBox, _themeSlotProps_emptyState, _slotProps_emptyState, _themeSlotProps_emptyState1, _slotProps_emptyState1, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('Autocomplete');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, options, visibleWhen, layout = 'stacked', size, label, helperText, required, error, disabled, fullWidth, access, sx, slotProps, placeholder, value: explicitValue, defaultValue, onValueChange, emptyMessage = 'No matching options', getOptionValue = defaultGetOptionValue, getOptionLabel = defaultGetOptionLabel, getOptionDisabled = defaultGetOptionDisabled, getOptionKey, multiple, freeSolo, loadOptions, loadDebounceMs = 250, loadingMessage = 'Loading…' } = merged;
     const isMulti = Boolean(multiple);
     // Default the React-key accessor to `getOptionValue` (typical case:
@@ -3600,18 +3779,15 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
         ref: rootRef,
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 id: labelId,
                 htmlFor: `${baseId}-input`,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsxs("div", {
                 className: cn(v.inputWrapper(), // Multi mode: let chips wrap and replace the fixed `h-*`
@@ -4202,10 +4378,12 @@ function CalendarIcon$2() {
  * Storage contract: an ISO `YYYY-MM-DD` string, or `null` — shared with the
  * MUI `@dashforge/ui` `DatePicker`.
  */ function DatePicker(_props) {
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('DatePicker');
     const props = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, _props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(_props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, fullWidth, sx, slotProps, testId } = props;
     // ───── Hooks (unconditional, before any early return) ─────
     const bridge = useContext(DashFormContext);
@@ -4331,17 +4509,14 @@ function CalendarIcon$2() {
         "data-testid": testId,
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 htmlFor: fieldId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsx(Popover, {
                 open: isOpen,
@@ -4479,10 +4654,12 @@ function ClockIcon() {
  * shared with the MUI `@dashforge/ui` `TimePicker`. `hour12` is display-only.
  */ function TimePicker(_props) {
     var _timeStringToMinutes, _timeStringToMinutes1;
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('TimePicker');
     const props = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, _props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(_props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minTime, maxTime, stepMinutes, hour12 = false, fullWidth, sx, slotProps, testId } = props;
     const bridge = useContext(DashFormContext);
     const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
@@ -4616,17 +4793,14 @@ function ClockIcon() {
         "data-testid": testId,
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 htmlFor: fieldId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsx(Popover, {
                 open: isOpen,
@@ -4817,10 +4991,12 @@ const DATETIME_PATTERN = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2})/;
  * Storage contract: a naive ISO datetime `"YYYY-MM-DDTHH:mm"` — no seconds,
  * no timezone. Shared with the MUI `@dashforge/ui` `DateTimePicker`.
  */ function DateTimePicker(_props) {
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('DateTimePicker');
     const props = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, _props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(_props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, stepMinutes, hour12 = false, fullWidth, sx, slotProps, testId } = props;
     const bridge = useContext(DashFormContext);
     const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
@@ -4946,17 +5122,14 @@ const DATETIME_PATTERN = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2})/;
         "data-testid": testId,
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 htmlFor: fieldId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsx(Popover, {
                 open: isOpen,
@@ -5382,10 +5555,12 @@ function formatRange(range, locale) {
  * Storage contract: a `{ start, end }` pair of ISO `YYYY-MM-DD` dates —
  * shared with the MUI `@dashforge/ui` `DateRangePicker`.
  */ function DateRangePicker(_props) {
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_helperText, _slotProps_helperText;
     const themeDefaults = useComponentDefaults('DateRangePicker');
     const props = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, _props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(_props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, fullWidth, sx, slotProps, testId } = props;
     const bridge = useContext(DashFormContext);
     const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
@@ -5504,17 +5679,14 @@ function formatRange(range, locale) {
         "data-testid": testId,
         className: cn(v.root(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_root = themeSlotProps.root) == null ? void 0 : _themeSlotProps_root.className, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            label && jsxs("label", {
+            label && jsx("label", {
                 htmlFor: fieldId,
                 className: cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
-                children: [
-                    label,
-                    required && jsx("span", {
-                        "aria-hidden": "true",
-                        className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    "aria-hidden": "true",
+                    className: cn(v.requiredMark(), themeSlotProps == null ? void 0 : (_themeSlotProps_requiredMark = themeSlotProps.requiredMark) == null ? void 0 : _themeSlotProps_requiredMark.className, slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                    children: "*"
+                }))
             }),
             jsx(Popover, {
                 open: isOpen,
@@ -5731,7 +5903,7 @@ function formatRange(range, locale) {
                             href: item.href,
                             onClick: item.onClick,
                             className: cn(v.link(), themeSlotProps == null ? void 0 : (_themeSlotProps_link = themeSlotProps.link) == null ? void 0 : _themeSlotProps_link.className, slotProps == null ? void 0 : (_slotProps_link = slotProps.link) == null ? void 0 : _slotProps_link.className),
-                            children: item.icon ? jsxs(Fragment, {
+                            children: item.icon ? jsxs(Fragment$1, {
                                 children: [
                                     jsx("span", {
                                         "aria-hidden": "true",
@@ -5750,7 +5922,7 @@ function formatRange(range, locale) {
                                 themeSlotProps == null ? void 0 : (_themeSlotProps_link1 = themeSlotProps.link) == null ? void 0 : _themeSlotProps_link1.className,
                                 slotProps == null ? void 0 : (_slotProps_link1 = slotProps.link) == null ? void 0 : _slotProps_link1.className
                             ]),
-                            children: item.icon ? jsxs(Fragment, {
+                            children: item.icon ? jsxs(Fragment$1, {
                                 children: [
                                     jsx("span", {
                                         "aria-hidden": "true",
@@ -5899,7 +6071,7 @@ function formatRange(range, locale) {
     const Link = linkComponent;
     const linkClasses = cn(v.itemLink(), isActive && v.itemActive(), themeSlotProps == null ? void 0 : (_themeSlotProps_itemLink = themeSlotProps.itemLink) == null ? void 0 : _themeSlotProps_itemLink.className, slotProps == null ? void 0 : (_slotProps_itemLink = slotProps.itemLink) == null ? void 0 : _slotProps_itemLink.className, isActive && (themeSlotProps == null ? void 0 : (_themeSlotProps_itemActive = themeSlotProps.itemActive) == null ? void 0 : _themeSlotProps_itemActive.className), slotProps == null ? void 0 : (_slotProps_itemActive = slotProps.itemActive) == null ? void 0 : _slotProps_itemActive.className);
     // Visual content — same in `<a>` / `<button>` branches below.
-    const content = jsxs(Fragment$1, {
+    const content = jsxs(Fragment, {
         children: [
             item.icon && jsx("span", {
                 "aria-hidden": "true",
@@ -6446,7 +6618,7 @@ function formatRange(range, locale) {
             jsxs("div", {
                 className: v.body(),
                 children: [
-                    nav && jsxs(Fragment$1, {
+                    nav && jsxs(Fragment, {
                         children: [
                             jsx("aside", {
                                 className: cn(v.nav(), themeSlotProps == null ? void 0 : (_themeSlotProps_nav = themeSlotProps.nav) == null ? void 0 : _themeSlotProps_nav.className, slotProps == null ? void 0 : (_slotProps_nav = slotProps.nav) == null ? void 0 : _slotProps_nav.className),
@@ -6712,7 +6884,7 @@ const ConfirmContext = /*#__PURE__*/ createContext(null);
                 "aria-labelledby": (opts == null ? void 0 : opts.title) != null ? titleId : undefined,
                 onClick: handleDialogClick,
                 className: cn(v.backdrop(), v.dialog(), (_mergedSlotProps_backdrop = mergedSlotProps.backdrop) == null ? void 0 : _mergedSlotProps_backdrop.className, (_mergedSlotProps_dialog = mergedSlotProps.dialog) == null ? void 0 : _mergedSlotProps_dialog.className),
-                children: opts != null && jsxs(Fragment$1, {
+                children: opts != null && jsxs(Fragment, {
                     children: [
                         opts.title != null && jsx("h2", {
                             id: titleId,
@@ -8746,7 +8918,7 @@ if (process.env.NODE_ENV !== 'production') {
  */ function flattenChildren(children) {
     const flat = [];
     Children.forEach(children, (child)=>{
-        if (/*#__PURE__*/ isValidElement(child) && child.type === Fragment) {
+        if (/*#__PURE__*/ isValidElement(child) && child.type === Fragment$1) {
             const nested = child.props.children;
             flat.push(...flattenChildren(nested));
             return;
@@ -8799,7 +8971,7 @@ if (process.env.NODE_ENV !== 'production') {
                 sawStrayDom = true;
                 return;
             }
-            pass.push(jsx(Fragment, {
+            pass.push(jsx(Fragment$1, {
                 children: child
             }, `stepper-passthrough-${i}`));
         });
@@ -9089,7 +9261,7 @@ if (process.env.NODE_ENV !== 'production') {
                         const labelClass = cn(v.label(), themeSlotProps == null ? void 0 : (_themeSlotProps_label = themeSlotProps.label) == null ? void 0 : _themeSlotProps_label.className, slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className);
                         const helperClass = cn(v.helperText(), themeSlotProps == null ? void 0 : (_themeSlotProps_helperText = themeSlotProps.helperText) == null ? void 0 : _themeSlotProps_helperText.className, slotProps == null ? void 0 : (_slotProps_helperText = slotProps.helperText) == null ? void 0 : _slotProps_helperText.className);
                         const optionalClass = cn(v.optionalTag(), themeSlotProps == null ? void 0 : (_themeSlotProps_optionalTag = themeSlotProps.optionalTag) == null ? void 0 : _themeSlotProps_optionalTag.className, slotProps == null ? void 0 : (_slotProps_optionalTag = slotProps.optionalTag) == null ? void 0 : _slotProps_optionalTag.className);
-                        return jsxs(Fragment, {
+                        return jsxs(Fragment$1, {
                             children: [
                                 jsxs("div", {
                                     role: "listitem",
@@ -9205,10 +9377,10 @@ Stepper.displayName = 'Stepper';
             ]
         });
     }
-    if (icon) return jsx(Fragment$1, {
+    if (icon) return jsx(Fragment, {
         children: icon
     });
-    return jsx(Fragment$1, {
+    return jsx(Fragment, {
         children: index + 1
     });
 }
@@ -10060,10 +10232,12 @@ Slider.displayName = 'Slider';
  * array so `onChange` gets the precise literal type.
  */ function SelectInner(props, ref) {
     var _ref;
-    var _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_triggerText, _slotProps_triggerText, _themeSlotProps_triggerPlaceholder, _slotProps_triggerPlaceholder, _themeSlotProps_chevron, _slotProps_chevron, _themeSlotProps_popover, _slotProps_popover, _themeSlotProps_listBox, _slotProps_listBox, _themeSlotProps_emptyState, _slotProps_emptyState, _themeSlotProps_helperText, _slotProps_helperText, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_chipsList, _slotProps_chipsList, _themeSlotProps_chip, _slotProps_chip, _themeSlotProps_chipRemove, _slotProps_chipRemove, _triggerRef_current;
+    var _themeDefaults_defaults, _themeSlotProps_root, _slotProps_root, _themeSlotProps_label, _slotProps_label, _themeSlotProps_requiredMark, _slotProps_requiredMark, _themeSlotProps_trigger, _slotProps_trigger, _themeSlotProps_triggerText, _slotProps_triggerText, _themeSlotProps_triggerPlaceholder, _slotProps_triggerPlaceholder, _themeSlotProps_chevron, _slotProps_chevron, _themeSlotProps_popover, _slotProps_popover, _themeSlotProps_listBox, _slotProps_listBox, _themeSlotProps_emptyState, _slotProps_emptyState, _themeSlotProps_helperText, _slotProps_helperText, _themeSlotProps_errorText, _slotProps_errorText, _themeSlotProps_chipsList, _slotProps_chipsList, _themeSlotProps_chip, _slotProps_chip, _themeSlotProps_chipRemove, _slotProps_chipRemove, _triggerRef_current;
     const themeDefaults = useComponentDefaults('Select');
     const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
     const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
+    // Option C deep-merge: instance `tooltip` over `theme…defaults.tooltip`.
+    const tooltipConfig = resolveFieldTooltip(props.tooltip, themeDefaults == null ? void 0 : (_themeDefaults_defaults = themeDefaults.defaults) == null ? void 0 : _themeDefaults_defaults.tooltip);
     const { name, rules, label, helperText, error, required, disabled, fullWidth, layout, size, visibleWhen, access, options, placeholder = 'Select…', emptyState = 'No options', value: userValue, defaultValue, onChange, onBlur, multiple = false, sx, slotProps, testId } = merged;
     // ───── Hooks (unconditional, above the early returns) ─────
     const bridge = useContext(DashFormContext);
@@ -10420,16 +10594,13 @@ Slider.displayName = 'Slider';
         className: rootClasses,
         "data-testid": testId,
         children: [
-            label != null && jsxs("label", {
+            label != null && jsx("label", {
                 htmlFor: controlId,
                 className: labelClasses,
-                children: [
-                    label,
-                    required && jsx("span", {
-                        className: requiredMarkClasses,
-                        children: "*"
-                    })
-                ]
+                children: renderLabelWithTooltip(label, tooltipConfig, required && jsx("span", {
+                    className: requiredMarkClasses,
+                    children: "*"
+                }))
             }),
             jsxs(RadixPopover.Root, {
                 open: isOpen,
@@ -13626,7 +13797,7 @@ CardActionArea.displayName = 'CardActionArea';
     // `inline-flex items-center` provides vertical alignment with
     // any leading / trailing slots.
     const leading = avatar != null ? avatar : icon;
-    const innerContent = jsxs(Fragment$1, {
+    const innerContent = jsxs(Fragment, {
         children: [
             leading != null && jsx("span", {
                 className: "-ml-0.5 inline-flex items-center shrink-0",
@@ -14039,7 +14210,7 @@ Typography.displayName = 'Typography';
                     key
                 }));
             } else {
-                result.push(jsx(Fragment, {
+                result.push(jsx(Fragment$1, {
                     children: divider
                 }, key));
             }
@@ -15335,92 +15506,6 @@ function useTabs(options) {
     });
 }
 
-const tooltipVariants = tv({
-    slots: {
-        content: [
-            'z-50 max-w-xs rounded-md px-3 py-1.5 text-xs font-medium',
-            // Auto-invert via the dashforgePreset() CSS-var swap:
-            //  - Light mode: `bg-neutral-900` = #171717 (dark surface) +
-            //    `text-neutral-50` = #fafafa (light text) — DARK tooltip
-            //    on the light page (high contrast).
-            //  - Dark mode: `bg-neutral-900` flips to #f5f5f5 (light) +
-            //    `text-neutral-50` flips to #0a0a0a (dark text) — LIGHT
-            //    tooltip on the dark page (high contrast against page).
-            // Adding `dark:bg-neutral-50 dark:text-neutral-900` (the old
-            // pattern) would force the dark-mode tooltip back to a dark
-            // surface — invisible against the dark page.
-            'bg-neutral-900 text-neutral-50',
-            'shadow-md',
-            'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',
-            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-            'motion-reduce:transition-none motion-reduce:duration-0'
-        ],
-        // Arrow tracks the content bg — auto-inverts the same way.
-        arrow: 'fill-neutral-900'
-    }
-});
-
-/**
- * Dashforge TW `<Tooltip>` — hoverable / focusable tooltip.
- *
- * Built on `@radix-ui/react-tooltip`:
- *  - APG tooltip pattern: `role="tooltip"`, `aria-describedby` wired
- *    to the trigger automatically (Radix manages the id linkage).
- *  - Shows on hover OR keyboard focus.
- *  - Dismissed on Escape or pointer leave.
- *
- * Wrap any single React node — it becomes the trigger via Radix's
- * `asChild` slot. The trigger inherits `aria-describedby` so screen
- * readers announce the tooltip content along with the trigger.
- *
- * @example
- * ```tsx
- * <Tooltip content="Delete this item">
- *   <Button variant="ghost">
- *     <TrashIcon />
- *   </Button>
- * </Tooltip>
- * ```
- *
- * Each consumer can also wrap the entire app once in
- * `<RadixTooltip.Provider>` to share delay/skip configuration; we
- * include a per-component provider here for ease-of-use.
- */ function Tooltip(props) {
-    var _themeSlotProps_content, _slotProps_content, _themeSlotProps_arrow, _slotProps_arrow;
-    const themeDefaults = useComponentDefaults('Tooltip');
-    const merged = _extends({}, themeDefaults == null ? void 0 : themeDefaults.defaults, props);
-    const themeSlotProps = themeDefaults == null ? void 0 : themeDefaults.slotProps;
-    const { children, content, side = 'top', align = 'center', hideArrow = false, delayDuration = 200, open, onOpenChange, sideOffset = 4, sx, slotProps } = merged;
-    const v = tooltipVariants();
-    return jsx(RadixTooltip.Provider, {
-        delayDuration: delayDuration,
-        children: jsxs(RadixTooltip.Root, {
-            open: open,
-            onOpenChange: onOpenChange,
-            children: [
-                jsx(RadixTooltip.Trigger, {
-                    asChild: true,
-                    children: children
-                }),
-                jsx(RadixTooltip.Portal, {
-                    children: jsxs(RadixTooltip.Content, {
-                        side: side,
-                        align: align,
-                        sideOffset: sideOffset,
-                        className: cn(v.content(), sx, themeSlotProps == null ? void 0 : (_themeSlotProps_content = themeSlotProps.content) == null ? void 0 : _themeSlotProps_content.className, slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
-                        children: [
-                            content,
-                            !hideArrow && jsx(RadixTooltip.Arrow, {
-                                className: cn(v.arrow(), themeSlotProps == null ? void 0 : (_themeSlotProps_arrow = themeSlotProps.arrow) == null ? void 0 : _themeSlotProps_arrow.className, slotProps == null ? void 0 : (_slotProps_arrow = slotProps.arrow) == null ? void 0 : _slotProps_arrow.className)
-                            })
-                        ]
-                    })
-                })
-            ]
-        })
-    });
-}
-
 const accordionVariants = tv({
     slots: {
         root: 'w-full',
@@ -17074,7 +17159,7 @@ function HeaderCell$1(props) {
 // ───── Data row ─────
 function Row(props) {
     const { row, rowId, rowIndex, isSelected, isExpanded, visibleCols, columnTypes, rowSelection, showSelectionColumn, showExpandColumn, showRowActionsColumn, expandable, rowActions, labels, toggleRow, toggleExpand, isInteractive, rowClass, cellClass, selectionCellClass, expandToggleCellClass, rowActionsCellClass, expandedRowClass, totalColumnCount } = props;
-    return jsxs(Fragment$1, {
+    return jsxs(Fragment, {
         children: [
             jsxs("tr", {
                 "data-selected": isSelected ? 'true' : 'false',
@@ -17249,7 +17334,7 @@ function SortIcon$1(props) {
             d: "M8 4l4 6H4z"
         }) : props.direction === 'desc' ? jsx("path", {
             d: "M8 12L4 6h8z"
-        }) : jsxs(Fragment$1, {
+        }) : jsxs(Fragment, {
             children: [
                 jsx("path", {
                     d: "M8 3l3 4H5z",
@@ -19096,7 +19181,7 @@ function HeaderCell(props) {
 // ───── Virtualized body ─────
 function renderVirtualizedBody(args) {
     const { vWindow, renderedRows, visibleCols, columnTypes, columnWidths, selection, rowSelection, showSelectionColumn, showRowActionsColumn, rowActions, getRowId, isInteractive, labels, classes } = args;
-    return jsxs(Fragment$1, {
+    return jsxs(Fragment, {
         children: [
             vWindow.paddingTop > 0 && jsx("tr", {
                 "aria-hidden": "true",
@@ -19255,7 +19340,7 @@ function SortIcon(props) {
             d: "M8 4l4 6H4z"
         }) : props.direction === 'desc' ? jsx("path", {
             d: "M8 12L4 6h8z"
-        }) : jsxs(Fragment$1, {
+        }) : jsxs(Fragment, {
             children: [
                 jsx("path", {
                     d: "M8 3l3 4H5z",
@@ -19321,6 +19406,6 @@ function SearchIcon(props) {
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '1.4.0';
+ */ const VERSION = '1.5.1';
 
 export { AVATAR_SOFT_FALLBACK, AVATAR_TONE_FALLBACK, Accordion, Alert, AlertTitle, AppShell, AspectRatio, Autocomplete, Avatar, AvatarGroup, Badge, Box, Breadcrumbs, Button, Calendar, Card, CardActionArea, CardContent, Checkbox, Chip, ConfirmDialogProvider, Container, DRAWER_SIZE_PRESETS, DataGrid, DatePicker, DateRangePicker, DateTimePicker, Dialog, Divider, Drawer, Grid, ICON_BUTTON_BASE, ICON_BUTTON_SIZE_OVERRIDES, IconButton, Image, LeftNav, Link, Menu, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuSkeleton, MenuTrigger, NumberField, OTPField, Pagination, Popover, Progress, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, SPINNER_COLORS, SPINNER_STROKE_WIDTH, SPINNER_TRACK_OPACITY, Select, Skeleton, Slider, SnackbarProvider, Spinner, Stack, Step, Stepper, Switch, Table, Tabs, TextField, Textarea, TimePicker, Tooltip, TopBar, Typography, VERSION, Video, VisuallyHidden, accordionVariants, alertVariants, appShellVariants, autocompleteVariants, avatarVariants, badgeVariants, boxVariants, breadcrumbsVariants, buttonVariants, calendarDayVariants, calendarVariants, checkboxVariants, chipVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, datePickerVariants, dateRangeDayVariants, dateRangePickerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, drawerVariants, getNestedValue, gridVariants, imageVariants, leftNavVariants, linkVariants, menuVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, progressVariants, radioGroupVariants, selectVariants, skeletonVariants, sliderVariants, snackbarVariants, spinnerVariants, stackVariants, stepperVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, timePickerVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar, useStep, videoVariants };