@jobber/components 8.18.1 → 8.20.0

package/dist/InputNumberExperimental-es.js

@@ -1,12 +1,13 @@
+import { _ as __rest } from './tslib.es6-es.js';
 import * as React from 'react';
 import React__default, { createContext, forwardRef, useId, useRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
 import classnames from 'classnames';
 import { A as ActivityIndicator } from './ActivityIndicator-es.js';
 import { B as Button } from './Button-es.js';
 import { I as Icon } from './Icon-es.js';
-import { u as useBaseUiId, a as useStableCallback, b as useTimeout, t as transitionStatusMapping, c as useTransitionStatus, d as useIsoLayoutEffect, e as useOpenChangeComplete } from './clamp-es.js';
-import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext, N as NumberFieldRoot, c as NumberFieldGroup, d as NumberFieldInput, e as NumberFieldIncrement, h as NumberFieldDecrement } from './NumberFieldInput-es.js';
 import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
+import { u as useBaseUiId, a as useStableCallback, b as useTimeout, S as SafeReact, e as error, t as transitionStatusMapping, c as useTransitionStatus, d as useIsoLayoutEffect, f as useOpenChangeComplete } from './clamp-es.js';
+import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext, c as useLabel, N as NumberFieldRoot, d as NumberFieldGroup, e as NumberFieldInput, h as NumberFieldIncrement, i as NumberFieldDecrement } from './NumberFieldInput-es.js';
 import { jsx } from 'react/jsx-runtime';
 
 const FieldsetRootContext = /*#__PURE__*/React.createContext({
@@ -446,6 +447,59 @@ const FieldRoot = /*#__PURE__*/React.forwardRef(function FieldRoot(componentProp
 });
 if (process.env.NODE_ENV !== "production") FieldRoot.displayName = "FieldRoot";
 
+/**
+ * An accessible label that is automatically associated with the field control.
+ * Renders a `<label>` element.
+ *
+ * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
+ */
+const FieldLabel = /*#__PURE__*/React.forwardRef(function FieldLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    nativeLabel = true,
+    ...elementProps
+  } = componentProps;
+  const fieldRootContext = useFieldRootContext(false);
+  const {
+    labelId
+  } = useLabelableContext();
+  const labelRef = React.useRef(null);
+  const labelProps = useLabel({
+    id: labelId ?? idProp,
+    native: nativeLabel
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (!labelRef.current) {
+        return;
+      }
+      const isLabelTag = labelRef.current.tagName === 'LABEL';
+      if (nativeLabel) {
+        if (!isLabelTag) {
+          const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+          const message = '<Field.Label> expected a <label> element because the `nativeLabel` prop is true. ' + 'Rendering a non-<label> disables native label association, so `htmlFor` will not ' + 'work. Use a real <label> in the `render` prop, or set `nativeLabel` to `false`.';
+          error(`${message}${ownerStackMessage}`);
+        }
+      } else if (isLabelTag) {
+        const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+        const message = '<Field.Label> expected a non-<label> element because the `nativeLabel` prop is false. ' + 'Rendering a <label> assumes native label behavior while Base UI treats it as ' + 'non-native, which can cause unexpected pointer behavior. Use a non-<label> in the ' + '`render` prop, or set `nativeLabel` to `true`.';
+        error(`${message}${ownerStackMessage}`);
+      }
+    }, [nativeLabel]);
+  }
+  const element = useRenderElement('label', componentProps, {
+    ref: [forwardedRef, labelRef],
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: fieldValidityMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") FieldLabel.displayName = "FieldLabel";
+
 const stateAttributesMapping = {
   ...fieldValidityMapping,
   ...transitionStatusMapping
@@ -604,13 +658,12 @@ const InputNumberExperimentalContext = createContext(null);
 function useInputNumberExperimentalContext(consumer) {
     const context = useContext(InputNumberExperimentalContext);
     if (context === null) {
-        throw new Error(`<InputNumberExperimental.${consumer}> must be used inside <InputNumberExperimental>.`);
+        throw new Error(`<InputNumberExperimental.${consumer}> must be used inside <InputNumberExperimental.Wrapper>.`);
     }
     return context;
 }
-// eslint-disable-next-line max-statements
-function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", step = 1, suffix, value, } = props;
+function InputNumberExperimentalWrapperInternal(props, ref) {
+    const { align, autoComplete, children, className, disabled, format, id: idProp, inline, inputMode, invalid, loading, max, maxLength, min, name, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, onValueCommitted, readOnly, showMiniLabel = true, size = "default", step = 1, style, value, } = props;
     const generatedId = useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = useRef(null);
@@ -618,12 +671,8 @@ function InputNumberExperimentalInternal(props, ref) {
         focus: () => { var _a; return (_a = innerInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
         blur: () => { var _a; return (_a = innerInputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
     }), []);
-    const handleValueCommitted = useCallback((newValue) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
-    }, [onChange]);
-    const handleValueChange = useCallback((newValue) => {
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
-    }, [onValueChange]);
+    const handleValueCommitted = useCallback((newValue) => onValueCommitted === null || onValueCommitted === void 0 ? void 0 : onValueCommitted(newValue), [onValueCommitted]);
+    const handleValueChange = useCallback((newValue) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue), [onValueChange]);
     const handleKeyDown = useCallback((event) => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (event.key === "Enter" &&
@@ -631,90 +680,131 @@ function InputNumberExperimentalInternal(props, ref) {
             !event.ctrlKey &&
             !event.metaKey) {
             onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
-            // V1/V2 parity: commit on Enter. Base UI treats Enter as a
-            // navigation no-op, so round-trip focus to fire onValueCommitted
-            // via Base UI's onBlur and restore focus immediately after.
+            // Commit on Enter. Base UI commits on blur, not Enter, so round-trip
+            // focus to fire onValueCommitted via blur and restore focus immediately.
             const target = event.currentTarget;
             target.blur();
             target.focus();
         }
     }, [onKeyDown, onEnter]);
-    const isUsingCompoundPattern = useMemo(() => React__default.Children.toArray(children).some(child => React__default.isValidElement(child) &&
-        (child.type === InputNumberExperimentalInputCompound ||
-            child.type === InputNumberExperimentalAffixCompound ||
-            child.type === InputNumberExperimentalStepperCompound)), [children]);
-    const showStepper = !disabled && !readonly;
-    // `handleKeyDown` is a `useCallback` whose own deps include `onKeyDown` and
-    // `onEnter`, so listing it here transitively tracks both. Don't add `onEnter`
-    // or `onKeyDown` separately — they'd be redundant and an exhaustive-deps lint
-    // would flag the duplication.
+    // `handleKeyDown` transitively tracks `onKeyDown`/`onEnter` via its own deps,
+    // so they are intentionally not listed separately here.
     const contextValue = useMemo(() => ({
-        autocomplete,
-        compoundLayout: isUsingCompoundPattern,
+        align,
+        autoComplete,
         disabled,
+        format,
         id,
         innerInputRef,
-        keyboard,
+        inputMode,
         loading,
+        max,
         maxLength,
+        min,
         onBlur,
         onFocus,
         onKeyDown: handleKeyDown,
         onKeyUp,
-        placeholder,
-        readonly,
+        onValueChange: handleValueChange,
+        onValueCommitted: handleValueCommitted,
+        readOnly,
         showMiniLabel,
-        showStepper,
+        showStepper: !disabled && !readOnly,
         size,
+        step,
+        value,
     }), [
-        autocomplete,
-        isUsingCompoundPattern,
+        align,
+        autoComplete,
         disabled,
+        format,
         id,
-        keyboard,
+        inputMode,
         loading,
+        max,
         maxLength,
+        min,
         onBlur,
         onFocus,
         handleKeyDown,
         onKeyUp,
-        placeholder,
-        readonly,
+        handleValueChange,
+        handleValueCommitted,
+        readOnly,
         showMiniLabel,
-        showStepper,
         size,
+        step,
+        value,
     ]);
-    const fieldInvalid = invalid || Boolean(error);
-    return (React__default.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
-        React__default.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
-            React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, step: step, value: value !== null && value !== void 0 ? value : null },
-                React__default.createElement(NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
-                    ? children
-                    : renderDefaultComposition({ prefix, suffix, size })))),
-        (description || error) && (React__default.createElement("div", { className: styles.belowField },
-            description && (React__default.createElement(FieldDescription, { className: styles.description }, description)),
-            error && (React__default.createElement(FieldError, { className: styles.fieldError, match: true, role: "alert" }, error))))));
+    const rootProps = mergeProps({ className: classnames(styles.container, inline && styles.inline) }, { className, style });
+    return (React__default.createElement(FieldRoot, Object.assign({}, rootProps, { disabled: disabled, invalid: invalid || undefined, name: name }),
+        React__default.createElement(InputNumberExperimentalContext.Provider, { value: contextValue }, children)));
 }
-function renderDefaultComposition({ prefix, suffix, size, }) {
-    return (React__default.createElement(React__default.Fragment, null,
-        (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React__default.createElement(AffixIconSlot, { variation: "prefix", icon: prefix.icon, size: size })),
-        (prefix === null || prefix === void 0 ? void 0 : prefix.label) && (React__default.createElement(AffixLabelSlot, { variation: "prefix", label: prefix.label })),
-        React__default.createElement(InputNumberExperimentalInputCompound, null),
-        (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React__default.createElement(AffixLabelSlot, { variation: "suffix", label: suffix.label })),
-        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React__default.createElement(AffixIconSlot, { variation: "suffix", icon: suffix.icon, size: size, ariaLabel: suffix.ariaLabel, onClick: suffix.onClick }))));
+function InputNumberExperimentalGroup({ children, className, style, }) {
+    var _a, _b;
+    const ctx = useInputNumberExperimentalContext("Group");
+    const groupProps = mergeProps({
+        className: classnames(styles.wrapper, ctx.align && styles[ctx.align], ctx.disabled && styles.disabled, ctx.size !== "default" && styles[ctx.size]),
+    }, { className, style });
+    return (React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: (_a = ctx.format) !== null && _a !== void 0 ? _a : DEFAULT_FORMAT, id: ctx.id, max: ctx.max, min: ctx.min, onValueChange: ctx.onValueChange, onValueCommitted: ctx.onValueCommitted, readOnly: ctx.readOnly, step: ctx.step, value: (_b = ctx.value) !== null && _b !== void 0 ? _b : null },
+        React__default.createElement(NumberFieldGroup, Object.assign({}, groupProps), children)));
 }
-function InputNumberExperimentalInputCompound(props = {}) {
-    var _a;
+function InputNumberExperimentalFooter({ children, className, style, }) {
+    useInputNumberExperimentalContext("Footer");
+    const rootProps = mergeProps({ className: styles.belowField }, { className, style });
+    return React__default.createElement("div", Object.assign({}, rootProps), children);
+}
+function InputNumberExperimentalInput({ children, className, style, }) {
     const ctx = useInputNumberExperimentalContext("Input");
-    const labelText = (_a = props.placeholder) !== null && _a !== void 0 ? _a : ctx.placeholder;
     const rootProps = mergeProps({
         className: classnames(styles.inputWrapper, !ctx.showMiniLabel && styles.hideLabel, ctx.size !== "default" && styles[ctx.size], ctx.disabled && styles.disabled),
-    }, { className: props.className, style: props.style });
+    }, { className, style });
     return (React__default.createElement("div", Object.assign({}, rootProps),
-        React__default.createElement(NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutocomplete(ctx.autocomplete), className: styles.input, inputMode: ctx.keyboard, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
-        labelText && (React__default.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
-        ctx.loading ? (React__default.createElement("div", { className: styles.loadingIndicator },
-            React__default.createElement(ActivityIndicator, { size: "small" }))) : (!ctx.compoundLayout && React__default.createElement(InputNumberExperimentalStepperCompound, null))));
+        React__default.createElement(NumberFieldInput, { "aria-busy": ctx.loading || undefined, autoComplete: resolveAutoComplete(ctx.autoComplete), className: styles.input, inputMode: ctx.inputMode, maxLength: ctx.maxLength, onBlur: ctx.onBlur, onFocus: ctx.onFocus, onKeyDown: ctx.onKeyDown, onKeyUp: ctx.onKeyUp, placeholder: " ", ref: ctx.innerInputRef }),
+        children));
+}
+function InputNumberExperimentalLabel({ children, className, style, }) {
+    const ctx = useInputNumberExperimentalContext("Label");
+    if (!children)
+        return null;
+    return (React__default.createElement(FieldLabel, { className: classnames(styles.label, className), htmlFor: ctx.id, style: style }, children));
+}
+function InputNumberExperimentalDescription({ children, className, style, }) {
+    useInputNumberExperimentalContext("Description");
+    if (!children)
+        return null;
+    return (React__default.createElement(FieldDescription, { className: classnames(styles.description, className), style: style }, children));
+}
+function InputNumberExperimentalError({ children, className, style, }) {
+    useInputNumberExperimentalContext("Error");
+    if (!children)
+        return null;
+    return (React__default.createElement(FieldError, { className: classnames(styles.fieldError, className), match: true, role: "alert", style: style }, children));
+}
+function InputNumberExperimentalLoading({ children, className, style, }) {
+    useInputNumberExperimentalContext("Loading");
+    const rootProps = mergeProps({ className: styles.loadingIndicator }, { className, style });
+    return (React__default.createElement("div", Object.assign({}, rootProps), children !== null && children !== void 0 ? children : React__default.createElement(ActivityIndicator, { size: "small" })));
+}
+function InputNumberExperimentalStepper({ children, incrementLabel, decrementLabel, className, style, }) {
+    const ctx = useInputNumberExperimentalContext("Stepper");
+    if (ctx.loading || !ctx.showStepper) {
+        return null;
+    }
+    const rootProps = mergeProps({ className: styles.stepper }, { className, style });
+    return (React__default.createElement("div", Object.assign({}, rootProps), children !== null && children !== void 0 ? children : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(InputNumberExperimentalIncrement, { ariaLabel: incrementLabel }),
+        React__default.createElement(InputNumberExperimentalDecrement, { ariaLabel: decrementLabel })))));
+}
+function InputNumberExperimentalIncrement({ children, ariaLabel, className, style, }) {
+    useInputNumberExperimentalContext("Increment");
+    const rootProps = mergeProps({ className: styles.stepperButton }, { className, style });
+    return (React__default.createElement(NumberFieldIncrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Increase value" }, rootProps), children !== null && children !== void 0 ? children : (React__default.createElement(Icon, { name: "arrowUp", size: "small", customColor: "currentColor" }))));
+}
+function InputNumberExperimentalDecrement({ children, ariaLabel, className, style, }) {
+    useInputNumberExperimentalContext("Decrement");
+    const rootProps = mergeProps({ className: styles.stepperButton }, { className, style });
+    return (React__default.createElement(NumberFieldDecrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Decrease value" }, rootProps), children !== null && children !== void 0 ? children : (React__default.createElement(Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
 }
 function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, children, className, style, }) {
     const ctx = useInputNumberExperimentalContext("Affix");
@@ -729,23 +819,20 @@ function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick,
         label && React__default.createElement("span", { className: styles.affixLabelText }, label),
         children));
 }
-function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel, className, style, } = {}) {
-    var _a;
-    const ctx = useInputNumberExperimentalContext("Stepper");
-    // Hidden while loading; the loading indicator renders in the input wrapper
-    // instead, independent of where this stepper is composed.
-    if (ctx.loading || !ctx.showStepper) {
-        return null;
-    }
-    const labelTarget = (_a = ctx.placeholder) !== null && _a !== void 0 ? _a : "value";
-    const resolvedIncrementLabel = incrementLabel !== null && incrementLabel !== void 0 ? incrementLabel : `Increase ${labelTarget}`;
-    const resolvedDecrementLabel = decrementLabel !== null && decrementLabel !== void 0 ? decrementLabel : `Decrease ${labelTarget}`;
-    const rootProps = mergeProps({ className: styles.stepper }, { className, style });
-    return (React__default.createElement("div", Object.assign({}, rootProps),
-        React__default.createElement(NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton },
-            React__default.createElement(Icon, { name: "arrowUp", size: "small", customColor: "currentColor" })),
-        React__default.createElement(NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton },
-            React__default.createElement(Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
+/**
+ * Renders the prop-driven `prefix`/`suffix` affixes for the sugar component.
+ * Icons sit outside the input area; labels render next to the typed value
+ * (suffix mirrors the order). The composable `.Affix` part is the alternative
+ * when composing the field directly.
+ */
+function renderDefaultAffix(variation, affix, size) {
+    const icon = affix.icon && (React__default.createElement(AffixIconSlot, { variation: variation, icon: affix.icon, size: size, ariaLabel: "ariaLabel" in affix ? affix.ariaLabel : undefined, onClick: "onClick" in affix ? affix.onClick : undefined }));
+    const affixLabel = affix.label && (React__default.createElement(AffixLabelSlot, { variation: variation, label: affix.label }));
+    return variation === "prefix" ? (React__default.createElement(React__default.Fragment, null,
+        icon,
+        affixLabel)) : (React__default.createElement(React__default.Fragment, null,
+        affixLabel,
+        icon));
 }
 function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
     return (React__default.createElement("div", { className: classnames(styles.affixIcon, variation === "suffix" && styles.suffix) },
@@ -761,25 +848,65 @@ function AffixIconContent({ icon, size, onClick, ariaLabel, }) {
 function AffixLabelSlot({ variation, label }) {
     return (React__default.createElement("div", { className: classnames(styles.affixLabel, variation === "prefix" && styles.prefix, variation === "suffix" && styles.suffix) }, label));
 }
-function resolveAutocomplete(autocomplete) {
-    if (autocomplete === false)
+function resolveAutoComplete(autoComplete) {
+    if (autoComplete === false)
         return "off";
-    if (autocomplete === true || autocomplete === undefined)
+    if (autoComplete === true || autoComplete === undefined)
         return undefined;
-    return autocomplete;
+    return autoComplete;
+}
+/**
+ * Sugar layer: composes the parts from props. This is the same composition a
+ * consumer would write by hand with `<InputNumberExperimental.Wrapper>` and the
+ * parts — to customize a single piece, copy this tree and swap that part.
+ */
+function InputNumberExperimentalInternal(props, ref) {
+    var _a;
+    const { label, description, error, prefix, suffix } = props, config = __rest(props, ["label", "description", "error", "prefix", "suffix"]);
+    const size = (_a = config.size) !== null && _a !== void 0 ? _a : "default";
+    return (React__default.createElement(InputNumberExperimentalWrapper, Object.assign({}, config, { invalid: config.invalid || Boolean(error), ref: ref }),
+        React__default.createElement(InputNumberExperimentalGroup, null,
+            prefix && renderDefaultAffix("prefix", prefix, size),
+            React__default.createElement(InputNumberExperimentalInput, null,
+                React__default.createElement(InputNumberExperimentalLabel, null, label),
+                config.loading ? (React__default.createElement(InputNumberExperimentalLoading, null)) : (React__default.createElement(InputNumberExperimentalStepper, { incrementLabel: `Increase ${label !== null && label !== void 0 ? label : "value"}`, decrementLabel: `Decrease ${label !== null && label !== void 0 ? label : "value"}` }))),
+            suffix && renderDefaultAffix("suffix", suffix, size)),
+        (description || error) && (React__default.createElement(InputNumberExperimentalFooter, null,
+            React__default.createElement(InputNumberExperimentalDescription, null, description),
+            React__default.createElement(InputNumberExperimentalError, null, error)))));
 }
+const InputNumberExperimentalWrapper = forwardRef(InputNumberExperimentalWrapperInternal);
+InputNumberExperimentalWrapper.displayName = "InputNumberExperimental.Wrapper";
 const InputNumberExperimentalBase = forwardRef(InputNumberExperimentalInternal);
 InputNumberExperimentalBase.displayName = "InputNumberExperimental";
-InputNumberExperimentalInputCompound.displayName =
-    "InputNumberExperimental.Input";
+InputNumberExperimentalGroup.displayName = "InputNumberExperimental.Group";
+InputNumberExperimentalFooter.displayName = "InputNumberExperimental.Footer";
+InputNumberExperimentalInput.displayName = "InputNumberExperimental.Input";
+InputNumberExperimentalLabel.displayName = "InputNumberExperimental.Label";
+InputNumberExperimentalDescription.displayName =
+    "InputNumberExperimental.Description";
+InputNumberExperimentalError.displayName = "InputNumberExperimental.Error";
+InputNumberExperimentalLoading.displayName = "InputNumberExperimental.Loading";
+InputNumberExperimentalStepper.displayName = "InputNumberExperimental.Stepper";
+InputNumberExperimentalIncrement.displayName =
+    "InputNumberExperimental.Increment";
+InputNumberExperimentalDecrement.displayName =
+    "InputNumberExperimental.Decrement";
 InputNumberExperimentalAffixCompound.displayName =
     "InputNumberExperimental.Affix";
-InputNumberExperimentalStepperCompound.displayName =
-    "InputNumberExperimental.Stepper";
 const InputNumberExperimental = Object.assign(InputNumberExperimentalBase, {
-    Input: InputNumberExperimentalInputCompound,
+    Wrapper: InputNumberExperimentalWrapper,
+    Group: InputNumberExperimentalGroup,
+    Footer: InputNumberExperimentalFooter,
+    Input: InputNumberExperimentalInput,
+    Label: InputNumberExperimentalLabel,
+    Description: InputNumberExperimentalDescription,
+    Error: InputNumberExperimentalError,
+    Loading: InputNumberExperimentalLoading,
+    Stepper: InputNumberExperimentalStepper,
+    Increment: InputNumberExperimentalIncrement,
+    Decrement: InputNumberExperimentalDecrement,
     Affix: InputNumberExperimentalAffixCompound,
-    Stepper: InputNumberExperimentalStepperCompound,
 });
 
 export { InputNumberExperimental as I };