@jobber/components 8.18.1 → 8.20.0

package/dist/InputNumberExperimental-cjs.js

@@ -1,13 +1,14 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var ActivityIndicator = require('./ActivityIndicator-cjs.js');
 var Button = require('./Button-cjs.js');
 var Icon = require('./Icon-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
 var clamp = require('./clamp-cjs.js');
 var NumberFieldInput = require('./NumberFieldInput-cjs.js');
-var useRenderElement = require('./useRenderElement-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {
@@ -466,6 +467,59 @@ const FieldRoot = /*#__PURE__*/React__namespace.forwardRef(function FieldRoot(co
 });
 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__namespace.forwardRef(function FieldLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    id: idProp,
+    nativeLabel = true,
+    ...elementProps
+  } = componentProps;
+  const fieldRootContext = NumberFieldInput.useFieldRootContext(false);
+  const {
+    labelId
+  } = NumberFieldInput.useLabelableContext();
+  const labelRef = React__namespace.useRef(null);
+  const labelProps = NumberFieldInput.useLabel({
+    id: labelId ?? idProp,
+    native: nativeLabel
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React__namespace.useEffect(() => {
+      if (!labelRef.current) {
+        return;
+      }
+      const isLabelTag = labelRef.current.tagName === 'LABEL';
+      if (nativeLabel) {
+        if (!isLabelTag) {
+          const ownerStackMessage = clamp.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`.';
+          clamp.error(`${message}${ownerStackMessage}`);
+        }
+      } else if (isLabelTag) {
+        const ownerStackMessage = clamp.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`.';
+        clamp.error(`${message}${ownerStackMessage}`);
+      }
+    }, [nativeLabel]);
+  }
+  const element = useRenderElement.useRenderElement('label', componentProps, {
+    ref: [forwardedRef, labelRef],
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: NumberFieldInput.fieldValidityMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") FieldLabel.displayName = "FieldLabel";
+
 const stateAttributesMapping = {
   ...NumberFieldInput.fieldValidityMapping,
   ...clamp.transitionStatusMapping
@@ -624,13 +678,12 @@ const InputNumberExperimentalContext = React.createContext(null);
 function useInputNumberExperimentalContext(consumer) {
     const context = React.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 = React.useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = React.useRef(null);
@@ -638,12 +691,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 = React.useCallback((newValue) => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
-    }, [onChange]);
-    const handleValueChange = React.useCallback((newValue) => {
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue !== null && newValue !== void 0 ? newValue : undefined);
-    }, [onValueChange]);
+    const handleValueCommitted = React.useCallback((newValue) => onValueCommitted === null || onValueCommitted === void 0 ? void 0 : onValueCommitted(newValue), [onValueCommitted]);
+    const handleValueChange = React.useCallback((newValue) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue), [onValueChange]);
     const handleKeyDown = React.useCallback((event) => {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (event.key === "Enter" &&
@@ -651,90 +700,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 = React.useMemo(() => React.Children.toArray(children).some(child => React.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 = React.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.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
-        React.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
-            React.createElement(NumberFieldInput.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.createElement(NumberFieldInput.NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
-                    ? children
-                    : renderDefaultComposition({ prefix, suffix, size })))),
-        (description || error) && (React.createElement("div", { className: styles.belowField },
-            description && (React.createElement(FieldDescription, { className: styles.description }, description)),
-            error && (React.createElement(FieldError, { className: styles.fieldError, match: true, role: "alert" }, error))))));
+    const rootProps = useRenderElement.mergeProps({ className: classnames(styles.container, inline && styles.inline) }, { className, style });
+    return (React.createElement(FieldRoot, Object.assign({}, rootProps, { disabled: disabled, invalid: invalid || undefined, name: name }),
+        React.createElement(InputNumberExperimentalContext.Provider, { value: contextValue }, children)));
 }
-function renderDefaultComposition({ prefix, suffix, size, }) {
-    return (React.createElement(React.Fragment, null,
-        (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(AffixIconSlot, { variation: "prefix", icon: prefix.icon, size: size })),
-        (prefix === null || prefix === void 0 ? void 0 : prefix.label) && (React.createElement(AffixLabelSlot, { variation: "prefix", label: prefix.label })),
-        React.createElement(InputNumberExperimentalInputCompound, null),
-        (suffix === null || suffix === void 0 ? void 0 : suffix.label) && (React.createElement(AffixLabelSlot, { variation: "suffix", label: suffix.label })),
-        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.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 = useRenderElement.mergeProps({
+        className: classnames(styles.wrapper, ctx.align && styles[ctx.align], ctx.disabled && styles.disabled, ctx.size !== "default" && styles[ctx.size]),
+    }, { className, style });
+    return (React.createElement(NumberFieldInput.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.createElement(NumberFieldInput.NumberFieldGroup, Object.assign({}, groupProps), children)));
 }
-function InputNumberExperimentalInputCompound(props = {}) {
-    var _a;
+function InputNumberExperimentalFooter({ children, className, style, }) {
+    useInputNumberExperimentalContext("Footer");
+    const rootProps = useRenderElement.mergeProps({ className: styles.belowField }, { className, style });
+    return React.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 = useRenderElement.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.createElement("div", Object.assign({}, rootProps),
-        React.createElement(NumberFieldInput.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.createElement("label", { className: styles.label, htmlFor: ctx.id }, labelText)),
-        ctx.loading ? (React.createElement("div", { className: styles.loadingIndicator },
-            React.createElement(ActivityIndicator.ActivityIndicator, { size: "small" }))) : (!ctx.compoundLayout && React.createElement(InputNumberExperimentalStepperCompound, null))));
+        React.createElement(NumberFieldInput.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.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.createElement(FieldDescription, { className: classnames(styles.description, className), style: style }, children));
+}
+function InputNumberExperimentalError({ children, className, style, }) {
+    useInputNumberExperimentalContext("Error");
+    if (!children)
+        return null;
+    return (React.createElement(FieldError, { className: classnames(styles.fieldError, className), match: true, role: "alert", style: style }, children));
+}
+function InputNumberExperimentalLoading({ children, className, style, }) {
+    useInputNumberExperimentalContext("Loading");
+    const rootProps = useRenderElement.mergeProps({ className: styles.loadingIndicator }, { className, style });
+    return (React.createElement("div", Object.assign({}, rootProps), children !== null && children !== void 0 ? children : React.createElement(ActivityIndicator.ActivityIndicator, { size: "small" })));
+}
+function InputNumberExperimentalStepper({ children, incrementLabel, decrementLabel, className, style, }) {
+    const ctx = useInputNumberExperimentalContext("Stepper");
+    if (ctx.loading || !ctx.showStepper) {
+        return null;
+    }
+    const rootProps = useRenderElement.mergeProps({ className: styles.stepper }, { className, style });
+    return (React.createElement("div", Object.assign({}, rootProps), children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+        React.createElement(InputNumberExperimentalIncrement, { ariaLabel: incrementLabel }),
+        React.createElement(InputNumberExperimentalDecrement, { ariaLabel: decrementLabel })))));
+}
+function InputNumberExperimentalIncrement({ children, ariaLabel, className, style, }) {
+    useInputNumberExperimentalContext("Increment");
+    const rootProps = useRenderElement.mergeProps({ className: styles.stepperButton }, { className, style });
+    return (React.createElement(NumberFieldInput.NumberFieldIncrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Increase value" }, rootProps), children !== null && children !== void 0 ? children : (React.createElement(Icon.Icon, { name: "arrowUp", size: "small", customColor: "currentColor" }))));
+}
+function InputNumberExperimentalDecrement({ children, ariaLabel, className, style, }) {
+    useInputNumberExperimentalContext("Decrement");
+    const rootProps = useRenderElement.mergeProps({ className: styles.stepperButton }, { className, style });
+    return (React.createElement(NumberFieldInput.NumberFieldDecrement, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Decrease value" }, rootProps), children !== null && children !== void 0 ? children : (React.createElement(Icon.Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
 }
 function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick, ariaLabel, children, className, style, }) {
     const ctx = useInputNumberExperimentalContext("Affix");
@@ -749,23 +839,20 @@ function InputNumberExperimentalAffixCompound({ variation, label, icon, onClick,
         label && React.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 = useRenderElement.mergeProps({ className: styles.stepper }, { className, style });
-    return (React.createElement("div", Object.assign({}, rootProps),
-        React.createElement(NumberFieldInput.NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton },
-            React.createElement(Icon.Icon, { name: "arrowUp", size: "small", customColor: "currentColor" })),
-        React.createElement(NumberFieldInput.NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton },
-            React.createElement(Icon.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.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.createElement(AffixLabelSlot, { variation: variation, label: affix.label }));
+    return variation === "prefix" ? (React.createElement(React.Fragment, null,
+        icon,
+        affixLabel)) : (React.createElement(React.Fragment, null,
+        affixLabel,
+        icon));
 }
 function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
     return (React.createElement("div", { className: classnames(styles.affixIcon, variation === "suffix" && styles.suffix) },
@@ -781,25 +868,65 @@ function AffixIconContent({ icon, size, onClick, ariaLabel, }) {
 function AffixLabelSlot({ variation, label }) {
     return (React.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 = tslib_es6.__rest(props, ["label", "description", "error", "prefix", "suffix"]);
+    const size = (_a = config.size) !== null && _a !== void 0 ? _a : "default";
+    return (React.createElement(InputNumberExperimentalWrapper, Object.assign({}, config, { invalid: config.invalid || Boolean(error), ref: ref }),
+        React.createElement(InputNumberExperimentalGroup, null,
+            prefix && renderDefaultAffix("prefix", prefix, size),
+            React.createElement(InputNumberExperimentalInput, null,
+                React.createElement(InputNumberExperimentalLabel, null, label),
+                config.loading ? (React.createElement(InputNumberExperimentalLoading, null)) : (React.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.createElement(InputNumberExperimentalFooter, null,
+            React.createElement(InputNumberExperimentalDescription, null, description),
+            React.createElement(InputNumberExperimentalError, null, error)))));
 }
+const InputNumberExperimentalWrapper = React.forwardRef(InputNumberExperimentalWrapperInternal);
+InputNumberExperimentalWrapper.displayName = "InputNumberExperimental.Wrapper";
 const InputNumberExperimentalBase = React.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,
 });
 
 exports.InputNumberExperimental = InputNumberExperimental;