@jobber/components 9.12.3 → 9.13.0

package/dist/Combobox/Combobox.contentSlots.d.ts

@@ -1,5 +1,5 @@
-import { type ComboboxSlotComponent } from "./Combobox.slotFactory";
+import { type SlotComponent } from "../utils/slotSystem";
 export type ComboboxContentSlotName = "empty" | "actions" | "footer" | "loading";
-export type ComboboxContentSlotComponent<Props, Slot extends ComboboxContentSlotName = ComboboxContentSlotName> = ComboboxSlotComponent<Props, "comboboxContentSlot", Slot>;
-export declare const assignComboboxContentSlot: <Props, Slot extends ComboboxContentSlotName>(component: import("react").FC<Props>, slot: Slot) => ComboboxSlotComponent<Props, "comboboxContentSlot", Slot>;
-export declare const isComboboxContentSlotElement: <Props = unknown>(child: React.ReactNode) => child is import("react").ReactElement<Props, ComboboxSlotComponent<Props, "comboboxContentSlot", ComboboxContentSlotName>>;
+export type ComboboxContentSlotComponent<Props, Slot extends ComboboxContentSlotName = ComboboxContentSlotName> = SlotComponent<Props, "comboboxContentSlot", Slot>;
+export declare const assignComboboxContentSlot: <Props, Slot extends ComboboxContentSlotName>(component: import("react").FC<Props>, slot: Slot) => SlotComponent<Props, "comboboxContentSlot", Slot>;
+export declare const isComboboxContentSlotElement: <Props = unknown>(child: React.ReactNode) => child is import("react").ReactElement<Props, SlotComponent<Props, "comboboxContentSlot", ComboboxContentSlotName>>;

package/dist/Combobox/Combobox.d.ts

@@ -39,12 +39,12 @@ declare const Combobox: typeof ComboboxRoot & {
     Content: typeof ComboboxContent;
     List: typeof ComboboxList;
     Item: typeof ComboboxItem;
-    ItemDescription: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxItemDescriptionProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
-    ItemLabel: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxItemLabelProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
-    ItemPrefix: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxItemPrefixProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
-    ItemSuffix: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxItemSuffixProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
-    ActionPrefix: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxActionPrefixProps, "comboboxActionSlot", "label" | "prefix">;
-    ActionLabel: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxActionLabelProps, "comboboxActionSlot", "label" | "prefix">;
+    ItemDescription: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxItemDescriptionProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
+    ItemLabel: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxItemLabelProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
+    ItemPrefix: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxItemPrefixProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
+    ItemSuffix: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxItemSuffixProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
+    ActionPrefix: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxActionPrefixProps, "comboboxActionSlot", "label" | "prefix">;
+    ActionLabel: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxActionLabelProps, "comboboxActionSlot", "label" | "prefix">;
     Row: typeof ComboboxRow;
     Collection: typeof ComboboxCollection;
     Chips: typeof ComboboxChips;
@@ -54,12 +54,12 @@ declare const Combobox: typeof ComboboxRoot & {
     GroupLabel: typeof ComboboxGroupLabel;
     Separator: typeof ComboboxSeparator;
     Status: typeof ComboboxPrimitive.Status;
-    Empty: import("./Combobox.slotFactory").ComboboxSlotComponent<ComboboxEmptyProps, "comboboxContentSlot", "empty">;
-    Loading: import("./Combobox.slotFactory").ComboboxSlotComponent<ComboboxLoadingProps, "comboboxContentSlot", "loading">;
-    Actions: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxActionsProps, "comboboxContentSlot", "actions">;
+    Empty: import("../utils/slotSystem").SlotComponent<ComboboxEmptyProps, "comboboxContentSlot", "empty">;
+    Loading: import("../utils/slotSystem").SlotComponent<ComboboxLoadingProps, "comboboxContentSlot", "loading">;
+    Actions: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxActionsProps, "comboboxContentSlot", "actions">;
     Action: typeof ComboboxAction;
-    Footer: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxFooterProps<unknown>, "comboboxContentSlot", "footer">;
-    SelectionFooter: import("./Combobox.slotFactory").ComboboxSlotComponent<import("./Combobox.types").ComboboxSelectionFooterProps, "comboboxContentSlot", "footer">;
+    Footer: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxFooterProps<unknown>, "comboboxContentSlot", "footer">;
+    SelectionFooter: import("../utils/slotSystem").SlotComponent<import("./Combobox.types").ComboboxSelectionFooterProps, "comboboxContentSlot", "footer">;
     SelectedCount: typeof ComboboxSelectedCount;
     ClearSelection: typeof ComboboxClearSelection;
     SelectAll: typeof ComboboxSelectAll;

package/dist/Combobox/Combobox.footer.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ComboboxClearSelectionProps, ComboboxFooterProps, ComboboxSelectAllProps, ComboboxSelectedCountProps, ComboboxSelectionFooterProps } from "./Combobox.types";
-export declare const ComboboxFooter: import("./Combobox.slotFactory").ComboboxSlotComponent<ComboboxFooterProps<unknown>, "comboboxContentSlot", "footer">;
+export declare const ComboboxFooter: import("../utils/slotSystem").SlotComponent<ComboboxFooterProps<unknown>, "comboboxContentSlot", "footer">;
 export declare function ComboboxSelectedCount({ children, className, }: ComboboxSelectedCountProps): React.JSX.Element;
-export declare const ComboboxSelectionFooter: import("./Combobox.slotFactory").ComboboxSlotComponent<ComboboxSelectionFooterProps, "comboboxContentSlot", "footer">;
+export declare const ComboboxSelectionFooter: import("../utils/slotSystem").SlotComponent<ComboboxSelectionFooterProps, "comboboxContentSlot", "footer">;
 export declare function ComboboxClearSelection({ children, label, tabIndex, ...clearProps }: ComboboxClearSelectionProps): React.JSX.Element;
 export declare function ComboboxSelectAll({ children, label, ...buttonProps }: ComboboxSelectAllProps): React.JSX.Element | null;

package/dist/Combobox/Combobox.items.d.ts

@@ -1,25 +1,25 @@
 import React from "react";
 import type { ComboboxActionLabelProps, ComboboxActionPrefixProps, ComboboxActionProps, ComboboxActionsProps, ComboboxCollectionProps, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxItemDescriptionProps, ComboboxItemLabelProps, ComboboxItemPrefixProps, ComboboxItemProps, ComboboxItemSuffixProps, ComboboxListProps, ComboboxRowProps, ComboboxSeparatorProps } from "./Combobox.types";
-import { type ComboboxSlotComponent } from "./Combobox.slotFactory";
+import { type SlotComponent } from "../utils/slotSystem";
 export declare function ComboboxList({ className, ...listProps }: ComboboxListProps): React.JSX.Element;
 export declare function ComboboxItem({ children, ...itemProps }: ComboboxItemProps): React.JSX.Element;
-declare const ComboboxItemPrefixComponent: ComboboxSlotComponent<ComboboxItemPrefixProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
+declare const ComboboxItemPrefixComponent: SlotComponent<ComboboxItemPrefixProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
 export { ComboboxItemPrefixComponent as ComboboxItemPrefix };
-declare const ComboboxItemLabelComponent: ComboboxSlotComponent<ComboboxItemLabelProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
+declare const ComboboxItemLabelComponent: SlotComponent<ComboboxItemLabelProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
 export { ComboboxItemLabelComponent as ComboboxItemLabel };
-declare const ComboboxItemDescriptionComponent: ComboboxSlotComponent<ComboboxItemDescriptionProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
+declare const ComboboxItemDescriptionComponent: SlotComponent<ComboboxItemDescriptionProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
 export { ComboboxItemDescriptionComponent as ComboboxItemDescription };
-declare const ComboboxItemSuffixComponent: ComboboxSlotComponent<ComboboxItemSuffixProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
+declare const ComboboxItemSuffixComponent: SlotComponent<ComboboxItemSuffixProps, "comboboxItemSlot", "label" | "prefix" | "suffix" | "description">;
 export { ComboboxItemSuffixComponent as ComboboxItemSuffix };
-declare const ComboboxActionPrefixComponent: ComboboxSlotComponent<ComboboxActionPrefixProps, "comboboxActionSlot", "label" | "prefix">;
+declare const ComboboxActionPrefixComponent: SlotComponent<ComboboxActionPrefixProps, "comboboxActionSlot", "label" | "prefix">;
 export { ComboboxActionPrefixComponent as ComboboxActionPrefix };
-declare const ComboboxActionLabelComponent: ComboboxSlotComponent<ComboboxActionLabelProps, "comboboxActionSlot", "label" | "prefix">;
+declare const ComboboxActionLabelComponent: SlotComponent<ComboboxActionLabelProps, "comboboxActionSlot", "label" | "prefix">;
 export { ComboboxActionLabelComponent as ComboboxActionLabel };
 export declare function ComboboxRow(props: ComboboxRowProps): React.JSX.Element;
 export declare function ComboboxCollection(props: ComboboxCollectionProps): React.JSX.Element;
 export declare function ComboboxGroup(props: ComboboxGroupProps): React.JSX.Element;
 export declare function ComboboxGroupLabel(props: ComboboxGroupLabelProps): React.JSX.Element;
 export declare function ComboboxSeparator(props: ComboboxSeparatorProps): React.JSX.Element;
-declare const ComboboxActionsComponent: ComboboxSlotComponent<ComboboxActionsProps, "comboboxContentSlot", "actions">;
+declare const ComboboxActionsComponent: SlotComponent<ComboboxActionsProps, "comboboxContentSlot", "actions">;
 export { ComboboxActionsComponent as ComboboxActions };
 export declare function ComboboxAction({ children, className, onClick, ...buttonProps }: ComboboxActionProps): React.JSX.Element;

package/dist/Combobox/index.cjs

@@ -4,6 +4,7 @@ var Combobox = require('../Combobox-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
+require('../slotSystem-cjs.js');
 require('../useAtlantisI18n-cjs.js');
 require('../AtlantisContext-cjs.js');
 require('../Button-cjs.js');

package/dist/Combobox/index.mjs

@@ -2,6 +2,7 @@ export { C as Combobox } from '../Combobox-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
+import '../slotSystem-es.js';
 import '../useAtlantisI18n-es.js';
 import '../AtlantisContext-es.js';
 import '../Button-es.js';

package/dist/Combobox-cjs.js

@@ -3,6 +3,7 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
+var slotSystem = require('./slotSystem-cjs.js');
 var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var AtlantisContext = require('./AtlantisContext-cjs.js');
 var Button = require('./Button-cjs.js');
@@ -142,27 +143,7 @@ function useComboboxContext() {
     return context;
 }
 
-function createComboboxSlotSystem(markerKey) {
-    function assignSlot(component, slot) {
-        return Object.assign(component, {
-            [markerKey]: slot,
-        });
-    }
-    function createSlot(slot) {
-        function ComboboxSlot(props) {
-            return null;
-        }
-        return assignSlot(ComboboxSlot, slot);
-    }
-    function isSlotElement(child) {
-        return (React.isValidElement(child) &&
-            typeof child.type !== "string" &&
-            markerKey in child.type);
-    }
-    return { assignSlot, createSlot, isSlotElement };
-}
-
-const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot");
+const comboboxContentSlotSystem = slotSystem.createSlotSystem("comboboxContentSlot");
 const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
 const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
@@ -322,8 +303,8 @@ function getFallbackChildren(children) {
         return children[0];
     return children;
 }
-const comboboxItemSlotSystem = createComboboxSlotSystem("comboboxItemSlot");
-const comboboxActionSlotSystem = createComboboxSlotSystem("comboboxActionSlot");
+const comboboxItemSlotSystem = slotSystem.createSlotSystem("comboboxItemSlot");
+const comboboxActionSlotSystem = slotSystem.createSlotSystem("comboboxActionSlot");
 const createComboboxItemSlot = comboboxItemSlotSystem.createSlot;
 const createComboboxActionSlot = comboboxActionSlotSystem.createSlot;
 function isComboboxItemSlotElement(child) {

package/dist/Combobox-es.js

@@ -1,6 +1,7 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useEffect } from 'react';
 import classnames from 'classnames';
+import { c as createSlotSystem } from './slotSystem-es.js';
 import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { u as useAtlantisContext } from './AtlantisContext-es.js';
 import { B as Button } from './Button-es.js';
@@ -11,7 +12,7 @@ import { I as Icon } from './Icon-es.js';
 import { m as mergeClassName } from './mergeClassName-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { H as HelperText } from './HelperText-es.js';
-import { F as FieldRoot, a as FieldLabel, b as FieldDescription, c as FieldError } from './FieldDescription-es.js';
+import { c as FieldRoot, F as FieldLabel, a as FieldDescription, b as FieldError } from './FieldDescription-es.js';
 
 function getWindowDimensions() {
     if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
@@ -140,27 +141,7 @@ function useComboboxContext() {
     return context;
 }
 
-function createComboboxSlotSystem(markerKey) {
-    function assignSlot(component, slot) {
-        return Object.assign(component, {
-            [markerKey]: slot,
-        });
-    }
-    function createSlot(slot) {
-        function ComboboxSlot(props) {
-            return null;
-        }
-        return assignSlot(ComboboxSlot, slot);
-    }
-    function isSlotElement(child) {
-        return (React__default.isValidElement(child) &&
-            typeof child.type !== "string" &&
-            markerKey in child.type);
-    }
-    return { assignSlot, createSlot, isSlotElement };
-}
-
-const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot");
+const comboboxContentSlotSystem = createSlotSystem("comboboxContentSlot");
 const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
 const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
@@ -320,8 +301,8 @@ function getFallbackChildren(children) {
         return children[0];
     return children;
 }
-const comboboxItemSlotSystem = createComboboxSlotSystem("comboboxItemSlot");
-const comboboxActionSlotSystem = createComboboxSlotSystem("comboboxActionSlot");
+const comboboxItemSlotSystem = createSlotSystem("comboboxItemSlot");
+const comboboxActionSlotSystem = createSlotSystem("comboboxActionSlot");
 const createComboboxItemSlot = comboboxItemSlotSystem.createSlot;
 const createComboboxActionSlot = comboboxActionSlotSystem.createSlot;
 function isComboboxItemSlotElement(child) {

package/dist/FieldDescription-es.js

@@ -856,4 +856,4 @@ const FieldDescription = /*#__PURE__*/React.forwardRef(function FieldDescription
 });
 if (process.env.NODE_ENV !== "production") FieldDescription.displayName = "FieldDescription";
 
-export { FieldRoot as F, FieldLabel as a, FieldDescription as b, FieldError as c };
+export { FieldLabel as F, FieldDescription as a, FieldError as b, FieldRoot as c };

package/dist/InputNumber/InputNumber.d.ts

@@ -51,11 +51,7 @@ declare function InputNumberAffixCompound({ variation, label, icon, onClick, ari
 declare namespace InputNumberAffixCompound {
     var displayName: string;
 }
-/**
- * Sugar layer: composes the parts from props. This is the same composition a
- * consumer would write by hand with `<InputNumber.Wrapper>` and the
- * parts — to customize a single piece, copy this tree and swap that part.
- */
+/** Sugar layer: hands the parts its props describe to `Wrapper`, the same path a consumer takes. */
 declare function InputNumber({ ref, ...props }: InputNumberProps & {
     readonly ref?: Ref<InputNumberRef>;
 }): React.JSX.Element;

package/dist/InputNumber/InputNumber.slots.d.ts

@@ -0,0 +1,11 @@
+import { type SlotComponent } from "../utils/slotSystem";
+declare const CONTENT_SLOT_NAMES: readonly ["label", "affix", "stepper", "loading", "description", "error"];
+declare const STRUCTURAL_SLOT_NAMES: readonly ["group", "footer"];
+export type InputNumberContentSlotName = (typeof CONTENT_SLOT_NAMES)[number];
+export type InputNumberStructuralSlotName = (typeof STRUCTURAL_SLOT_NAMES)[number];
+export type InputNumberSlotName = InputNumberContentSlotName | InputNumberStructuralSlotName;
+export type InputNumberSlotComponent<Props, Slot extends InputNumberSlotName = InputNumberSlotName> = SlotComponent<Props, "inputNumberSlot", Slot>;
+export declare const assignInputNumberSlot: <Props, Slot extends InputNumberSlotName>(component: import("react").FC<Props>, slot: Slot) => SlotComponent<Props, "inputNumberSlot", Slot>;
+export declare const isInputNumberSlotElement: <Props = unknown>(child: React.ReactNode) => child is import("react").ReactElement<Props, SlotComponent<Props, "inputNumberSlot", InputNumberSlotName>>;
+export declare function isStructuralSlot(slot: InputNumberSlotName): slot is InputNumberStructuralSlotName;
+export {};

package/dist/InputNumber/index.cjs

@@ -4,6 +4,7 @@ var InputNumber = require('../InputNumber-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
+require('../slotSystem-cjs.js');
 require('../useAtlantisI18n-cjs.js');
 require('../AtlantisContext-cjs.js');
 require('../ActivityIndicator-cjs.js');
@@ -30,10 +31,10 @@ require('../SelectPrimitive-cjs.js');
 require('../mergeClassName-cjs.js');
 require('../SelectGroupLabel-cjs.js');
 require('../useCompositeListItem-cjs.js');
-require('../FieldDescription-cjs.js');
-require('../useLabel-cjs.js');
 require('../NumberFieldInput-cjs.js');
 require('../stringifyLocale-cjs.js');
+require('../FieldDescription-cjs.js');
+require('../useLabel-cjs.js');
 
 
 

package/dist/InputNumber/index.mjs

@@ -2,6 +2,7 @@ export { I as InputNumber } from '../InputNumber-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
+import '../slotSystem-es.js';
 import '../useAtlantisI18n-es.js';
 import '../AtlantisContext-es.js';
 import '../ActivityIndicator-es.js';
@@ -28,7 +29,7 @@ import '../SelectPrimitive-es.js';
 import '../mergeClassName-es.js';
 import '../SelectGroupLabel-es.js';
 import '../useCompositeListItem-es.js';
-import '../FieldDescription-es.js';
-import '../useLabel-es.js';
 import '../NumberFieldInput-es.js';
 import '../stringifyLocale-es.js';
+import '../FieldDescription-es.js';
+import '../useLabel-es.js';

package/dist/InputNumber-cjs.js

@@ -3,6 +3,7 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
+var slotSystem = require('./slotSystem-cjs.js');
 var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 require('./AtlantisContext-cjs.js');
 var ActivityIndicator = require('./ActivityIndicator-cjs.js');
@@ -13,8 +14,16 @@ require('./BottomSheet-cjs.js');
 var HelperText = require('./HelperText-cjs.js');
 require('./SelectPrimitive-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var FieldDescription = require('./FieldDescription-cjs.js');
 var NumberFieldInput = require('./NumberFieldInput-cjs.js');
+var FieldDescription = require('./FieldDescription-cjs.js');
+
+const STRUCTURAL_SLOT_NAMES = ["group", "footer"];
+const inputNumberSlotSystem = slotSystem.createSlotSystem("inputNumberSlot");
+const assignInputNumberSlot = inputNumberSlotSystem.assignSlot;
+const isInputNumberSlotElement = inputNumberSlotSystem.isSlotElement;
+function isStructuralSlot(slot) {
+    return STRUCTURAL_SLOT_NAMES.includes(slot);
+}
 
 var styles = {"container":"-W4QiocGsR4-","inline":"_9-f2CjSVojs-","wrapper":"_4y342TRP-y8-","disabled":"d-YOq6z4ZxM-","small":"YTL0AyJdbC8-","large":"mUfanIovnVg-","center":"_8MM9keFOeD0-","right":"mTeuCQufdj4-","inputWrapper":"IgE0pfetwVM-","input":"MxShJMNKSB4-","stepper":"SE8DXlYN02U-","loadingIndicator":"VmKH2-NlbDI-","label":"f1OiicY3UzU-","hideLabel":"j9oUhNvNwsE-","affixLabel":"oR6I7xtSbL4-","prefix":"s-WnNh4k-kw-","suffix":"Ep7K8jug-Xc-","affixIcon":"E3w3BEJoBFE-","compoundAffix":"znvaejix3iE-","affixLabelText":"m1ZP5T4QOAQ-","stepperButton":"_22AXoGKVAjc-","belowField":"kkywg49kgrg-","description":"buIzMqBEpSQ-","spinning":"p8ebLlGf8JY-"};
 
@@ -49,6 +58,116 @@ const DEFAULT_FORMAT = {
     maximumFractionDigits: 12,
 };
 const InputNumberContext = React.createContext(null);
+function isFragmentElement(child) {
+    return React.isValidElement(child) && child.type === React.Fragment;
+}
+/** Conditional JSX often wraps parts in a fragment; unwrap so the parser sees them. */
+function flattenFragments(children) {
+    const flattened = [];
+    React.Children.forEach(children, child => {
+        if (isFragmentElement(child)) {
+            flattened.push(...flattenFragments(child.props.children));
+        }
+        else {
+            flattened.push(child);
+        }
+    });
+    return flattened;
+}
+/** An `Error` with no message renders nothing, so it must not suppress the description. */
+function hasRenderableChildren(child) {
+    return React.isValidElement(child)
+        ? Boolean(child.props.children)
+        : false;
+}
+/** Placement policy; the shared slot system only tags and detects. */
+function parseInputNumberChildren(children) {
+    const labels = [];
+    const indicators = [];
+    const descriptions = [];
+    const errors = [];
+    const parsed = {
+        prefixAffixes: [],
+        suffixAffixes: [],
+        insideInput: [],
+        footer: [],
+        structural: [],
+        unknown: [],
+    };
+    flattenFragments(children).forEach(child => {
+        if (!isInputNumberSlotElement(child)) {
+            parsed.unknown.push(child);
+            return;
+        }
+        const slot = child.type.inputNumberSlot;
+        if (isStructuralSlot(slot)) {
+            parsed.structural.push(child);
+            return;
+        }
+        switch (slot) {
+            case "label":
+                labels.push(child);
+                break;
+            case "affix":
+                if (child.props.variation === "suffix") {
+                    parsed.suffixAffixes.push(child);
+                }
+                else {
+                    parsed.prefixAffixes.push(child);
+                }
+                break;
+            case "stepper":
+            case "loading":
+                indicators.push(child);
+                break;
+            case "description":
+                descriptions.push(child);
+                break;
+            case "error":
+                errors.push(child);
+                break;
+        }
+    });
+    parsed.insideInput.push(...labels, ...indicators);
+    parsed.footer.push(...(errors.some(hasRenderableChildren) ? [] : descriptions), ...errors);
+    return parsed;
+}
+function hasContentParts(parsed) {
+    return (parsed.prefixAffixes.length > 0 ||
+        parsed.suffixAffixes.length > 0 ||
+        parsed.insideInput.length > 0 ||
+        parsed.footer.length > 0);
+}
+function resolveWrapperContent(children) {
+    const parsed = parseInputNumberChildren(children);
+    const hasContent = hasContentParts(parsed);
+    if (parsed.structural.length > 0) {
+        if (hasContent) {
+            throw new Error("<InputNumber.Wrapper> received both structural parts (Group/Footer) " +
+                "and loose content parts (Label/Affix/Stepper/Loading/Description/Error). " +
+                "Pass content parts alone to have Wrapper build the field, or nest them " +
+                "inside the structural parts to compose the tree yourself.");
+        }
+        return children;
+    }
+    // A consumer component may render `Group` itself; synthesizing would give it a second field.
+    if (!hasContent && parsed.unknown.length > 0)
+        return children;
+    return renderSynthesizedField(parsed);
+}
+function renderSynthesizedField(parsed) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputNumberGroup, null,
+            keyed(parsed.prefixAffixes),
+            React.createElement(InputNumberInput, null, keyed(parsed.insideInput)),
+            keyed(parsed.suffixAffixes)),
+        parsed.footer.length > 0 && (React.createElement(InputNumberFooter, null, keyed(parsed.footer))),
+        keyed(parsed.unknown)));
+}
+/** Flattening fragments drops the keys `React.Children.toArray` would have assigned. */
+function keyed(children) {
+    return React.Children.toArray(children);
+}
 function useInputNumberContext(consumer) {
     const context = React.useContext(InputNumberContext);
     if (context === null) {
@@ -135,7 +254,7 @@ function InputNumberWrapper(_a) {
     ]);
     const rootProps = useRenderElement.mergeProps({ className: classnames(styles.container, inline && styles.inline) }, { className, style });
     return (React.createElement(FieldDescription.FieldRoot, Object.assign({}, rootProps, { disabled: disabled, invalid: invalid || undefined, name: name }),
-        React.createElement(InputNumberContext.Provider, { value: contextValue }, children)));
+        React.createElement(InputNumberContext.Provider, { value: contextValue }, resolveWrapperContent(children))));
 }
 function InputNumberGroup({ children, className, style, }) {
     var _a, _b;
@@ -222,6 +341,11 @@ function InputNumberAffixCompound({ variation, label, icon, onClick, ariaLabel,
         label && React.createElement("span", { className: styles.affixLabelText }, label),
         children));
 }
+/** Carries the sugar's `prefix`/`suffix` through routing, adding no element of its own. */
+function InputNumberPropAffix({ variation, affix }) {
+    const ctx = useInputNumberContext("Affix");
+    return renderDefaultAffix(variation, affix, ctx.size);
+}
 /**
  * Renders the prop-driven `prefix`/`suffix` affixes for the sugar component.
  * Icons sit outside the input area; labels render next to the typed value
@@ -259,31 +383,22 @@ function resolveAutoComplete(autoComplete) {
         return undefined;
     return autoComplete;
 }
-/**
- * Sugar layer: composes the parts from props. This is the same composition a
- * consumer would write by hand with `<InputNumber.Wrapper>` and the
- * parts — to customize a single piece, copy this tree and swap that part.
- */
+/** Sugar layer: hands the parts its props describe to `Wrapper`, the same path a consumer takes. */
 function InputNumber(_a) {
-    var _b;
     var { ref } = _a, props = tslib_es6.__rest(_a, ["ref"]);
     const { t } = useAtlantisI18n.useAtlantisI18n(inputNumberMessages);
     const { label, description, error, prefix, suffix } = props, config = tslib_es6.__rest(props, ["label", "description", "error", "prefix", "suffix"]);
-    const size = (_b = config.size) !== null && _b !== void 0 ? _b : "default";
     return (React.createElement(InputNumberWrapper, Object.assign({}, config, { invalid: config.invalid || Boolean(error), ref: ref }),
-        React.createElement(InputNumberGroup, null,
-            prefix && renderDefaultAffix("prefix", prefix, size),
-            React.createElement(InputNumberInput, null,
-                React.createElement(InputNumberLabel, null, label),
-                config.loading ? (React.createElement(InputNumberLoading, null)) : (React.createElement(InputNumberStepper, { incrementLabel: t("Increase {label}", {
-                        label: label !== null && label !== void 0 ? label : t("value"),
-                    }), decrementLabel: t("Decrease {label}", {
-                        label: label !== null && label !== void 0 ? label : t("value"),
-                    }) }))),
-            suffix && renderDefaultAffix("suffix", suffix, size)),
-        (description || error) && (React.createElement(InputNumberFooter, null,
-            React.createElement(InputNumberDescription, null, description),
-            React.createElement(InputNumberError, null, error)))));
+        prefix ? (React.createElement(InputNumberPropAffix, { affix: prefix, variation: "prefix" })) : null,
+        React.createElement(InputNumberLabel, null, label),
+        config.loading ? (React.createElement(InputNumberLoading, null)) : (React.createElement(InputNumberStepper, { incrementLabel: t("Increase {label}", {
+                label: label !== null && label !== void 0 ? label : t("value"),
+            }), decrementLabel: t("Decrease {label}", {
+                label: label !== null && label !== void 0 ? label : t("value"),
+            }) })),
+        suffix ? (React.createElement(InputNumberPropAffix, { affix: suffix, variation: "suffix" })) : null,
+        description ? (React.createElement(InputNumberDescription, null, description)) : null,
+        error ? React.createElement(InputNumberError, null, error) : null));
 }
 InputNumberWrapper.displayName = "InputNumber.Wrapper";
 InputNumber.displayName = "InputNumber";
@@ -298,6 +413,16 @@ InputNumberStepper.displayName = "InputNumber.Stepper";
 InputNumberIncrement.displayName = "InputNumber.Increment";
 InputNumberDecrement.displayName = "InputNumber.Decrement";
 InputNumberAffixCompound.displayName = "InputNumber.Affix";
+// Tagged here so the parts stay plain declarations, which the docs prop-table generator needs.
+assignInputNumberSlot(InputNumberGroup, "group");
+assignInputNumberSlot(InputNumberFooter, "footer");
+assignInputNumberSlot(InputNumberLabel, "label");
+assignInputNumberSlot(InputNumberDescription, "description");
+assignInputNumberSlot(InputNumberError, "error");
+assignInputNumberSlot(InputNumberLoading, "loading");
+assignInputNumberSlot(InputNumberStepper, "stepper");
+assignInputNumberSlot(InputNumberAffixCompound, "affix");
+assignInputNumberSlot(InputNumberPropAffix, "affix");
 InputNumber.Wrapper = InputNumberWrapper;
 InputNumber.Group = InputNumberGroup;
 InputNumber.Footer = InputNumberFooter;

package/dist/InputNumber-es.js

@@ -1,6 +1,7 @@
 import { _ as __rest } from './tslib.es6-es.js';
-import React__default, { createContext, useId, useRef, useImperativeHandle, useCallback, useMemo, useContext } from 'react';
+import React__default, { createContext, useContext, useId, useRef, useImperativeHandle, useCallback, useMemo } from 'react';
 import classnames from 'classnames';
+import { c as createSlotSystem } from './slotSystem-es.js';
 import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import './AtlantisContext-es.js';
 import { A as ActivityIndicator } from './ActivityIndicator-es.js';
@@ -11,8 +12,16 @@ import './BottomSheet-es.js';
 import { H as HelperText } from './HelperText-es.js';
 import './SelectPrimitive-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
-import { F as FieldRoot, a as FieldLabel, b as FieldDescription, c as FieldError } from './FieldDescription-es.js';
-import { N as NumberFieldRoot, a as NumberFieldGroup, b as NumberFieldInput, c as NumberFieldIncrement, d as NumberFieldDecrement } from './NumberFieldInput-es.js';
+import { N as NumberFieldRoot, a as NumberFieldGroup, b as NumberFieldIncrement, c as NumberFieldDecrement, d as NumberFieldInput } from './NumberFieldInput-es.js';
+import { F as FieldLabel, a as FieldDescription, b as FieldError, c as FieldRoot } from './FieldDescription-es.js';
+
+const STRUCTURAL_SLOT_NAMES = ["group", "footer"];
+const inputNumberSlotSystem = createSlotSystem("inputNumberSlot");
+const assignInputNumberSlot = inputNumberSlotSystem.assignSlot;
+const isInputNumberSlotElement = inputNumberSlotSystem.isSlotElement;
+function isStructuralSlot(slot) {
+    return STRUCTURAL_SLOT_NAMES.includes(slot);
+}
 
 var styles = {"container":"-W4QiocGsR4-","inline":"_9-f2CjSVojs-","wrapper":"_4y342TRP-y8-","disabled":"d-YOq6z4ZxM-","small":"YTL0AyJdbC8-","large":"mUfanIovnVg-","center":"_8MM9keFOeD0-","right":"mTeuCQufdj4-","inputWrapper":"IgE0pfetwVM-","input":"MxShJMNKSB4-","stepper":"SE8DXlYN02U-","loadingIndicator":"VmKH2-NlbDI-","label":"f1OiicY3UzU-","hideLabel":"j9oUhNvNwsE-","affixLabel":"oR6I7xtSbL4-","prefix":"s-WnNh4k-kw-","suffix":"Ep7K8jug-Xc-","affixIcon":"E3w3BEJoBFE-","compoundAffix":"znvaejix3iE-","affixLabelText":"m1ZP5T4QOAQ-","stepperButton":"_22AXoGKVAjc-","belowField":"kkywg49kgrg-","description":"buIzMqBEpSQ-","spinning":"p8ebLlGf8JY-"};
 
@@ -47,6 +56,116 @@ const DEFAULT_FORMAT = {
     maximumFractionDigits: 12,
 };
 const InputNumberContext = createContext(null);
+function isFragmentElement(child) {
+    return React__default.isValidElement(child) && child.type === React__default.Fragment;
+}
+/** Conditional JSX often wraps parts in a fragment; unwrap so the parser sees them. */
+function flattenFragments(children) {
+    const flattened = [];
+    React__default.Children.forEach(children, child => {
+        if (isFragmentElement(child)) {
+            flattened.push(...flattenFragments(child.props.children));
+        }
+        else {
+            flattened.push(child);
+        }
+    });
+    return flattened;
+}
+/** An `Error` with no message renders nothing, so it must not suppress the description. */
+function hasRenderableChildren(child) {
+    return React__default.isValidElement(child)
+        ? Boolean(child.props.children)
+        : false;
+}
+/** Placement policy; the shared slot system only tags and detects. */
+function parseInputNumberChildren(children) {
+    const labels = [];
+    const indicators = [];
+    const descriptions = [];
+    const errors = [];
+    const parsed = {
+        prefixAffixes: [],
+        suffixAffixes: [],
+        insideInput: [],
+        footer: [],
+        structural: [],
+        unknown: [],
+    };
+    flattenFragments(children).forEach(child => {
+        if (!isInputNumberSlotElement(child)) {
+            parsed.unknown.push(child);
+            return;
+        }
+        const slot = child.type.inputNumberSlot;
+        if (isStructuralSlot(slot)) {
+            parsed.structural.push(child);
+            return;
+        }
+        switch (slot) {
+            case "label":
+                labels.push(child);
+                break;
+            case "affix":
+                if (child.props.variation === "suffix") {
+                    parsed.suffixAffixes.push(child);
+                }
+                else {
+                    parsed.prefixAffixes.push(child);
+                }
+                break;
+            case "stepper":
+            case "loading":
+                indicators.push(child);
+                break;
+            case "description":
+                descriptions.push(child);
+                break;
+            case "error":
+                errors.push(child);
+                break;
+        }
+    });
+    parsed.insideInput.push(...labels, ...indicators);
+    parsed.footer.push(...(errors.some(hasRenderableChildren) ? [] : descriptions), ...errors);
+    return parsed;
+}
+function hasContentParts(parsed) {
+    return (parsed.prefixAffixes.length > 0 ||
+        parsed.suffixAffixes.length > 0 ||
+        parsed.insideInput.length > 0 ||
+        parsed.footer.length > 0);
+}
+function resolveWrapperContent(children) {
+    const parsed = parseInputNumberChildren(children);
+    const hasContent = hasContentParts(parsed);
+    if (parsed.structural.length > 0) {
+        if (hasContent) {
+            throw new Error("<InputNumber.Wrapper> received both structural parts (Group/Footer) " +
+                "and loose content parts (Label/Affix/Stepper/Loading/Description/Error). " +
+                "Pass content parts alone to have Wrapper build the field, or nest them " +
+                "inside the structural parts to compose the tree yourself.");
+        }
+        return children;
+    }
+    // A consumer component may render `Group` itself; synthesizing would give it a second field.
+    if (!hasContent && parsed.unknown.length > 0)
+        return children;
+    return renderSynthesizedField(parsed);
+}
+function renderSynthesizedField(parsed) {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(InputNumberGroup, null,
+            keyed(parsed.prefixAffixes),
+            React__default.createElement(InputNumberInput, null, keyed(parsed.insideInput)),
+            keyed(parsed.suffixAffixes)),
+        parsed.footer.length > 0 && (React__default.createElement(InputNumberFooter, null, keyed(parsed.footer))),
+        keyed(parsed.unknown)));
+}
+/** Flattening fragments drops the keys `React.Children.toArray` would have assigned. */
+function keyed(children) {
+    return React__default.Children.toArray(children);
+}
 function useInputNumberContext(consumer) {
     const context = useContext(InputNumberContext);
     if (context === null) {
@@ -133,7 +252,7 @@ function InputNumberWrapper(_a) {
     ]);
     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(InputNumberContext.Provider, { value: contextValue }, children)));
+        React__default.createElement(InputNumberContext.Provider, { value: contextValue }, resolveWrapperContent(children))));
 }
 function InputNumberGroup({ children, className, style, }) {
     var _a, _b;
@@ -220,6 +339,11 @@ function InputNumberAffixCompound({ variation, label, icon, onClick, ariaLabel,
         label && React__default.createElement("span", { className: styles.affixLabelText }, label),
         children));
 }
+/** Carries the sugar's `prefix`/`suffix` through routing, adding no element of its own. */
+function InputNumberPropAffix({ variation, affix }) {
+    const ctx = useInputNumberContext("Affix");
+    return renderDefaultAffix(variation, affix, ctx.size);
+}
 /**
  * Renders the prop-driven `prefix`/`suffix` affixes for the sugar component.
  * Icons sit outside the input area; labels render next to the typed value
@@ -257,31 +381,22 @@ function resolveAutoComplete(autoComplete) {
         return undefined;
     return autoComplete;
 }
-/**
- * Sugar layer: composes the parts from props. This is the same composition a
- * consumer would write by hand with `<InputNumber.Wrapper>` and the
- * parts — to customize a single piece, copy this tree and swap that part.
- */
+/** Sugar layer: hands the parts its props describe to `Wrapper`, the same path a consumer takes. */
 function InputNumber(_a) {
-    var _b;
     var { ref } = _a, props = __rest(_a, ["ref"]);
     const { t } = useAtlantisI18n(inputNumberMessages);
     const { label, description, error, prefix, suffix } = props, config = __rest(props, ["label", "description", "error", "prefix", "suffix"]);
-    const size = (_b = config.size) !== null && _b !== void 0 ? _b : "default";
     return (React__default.createElement(InputNumberWrapper, Object.assign({}, config, { invalid: config.invalid || Boolean(error), ref: ref }),
-        React__default.createElement(InputNumberGroup, null,
-            prefix && renderDefaultAffix("prefix", prefix, size),
-            React__default.createElement(InputNumberInput, null,
-                React__default.createElement(InputNumberLabel, null, label),
-                config.loading ? (React__default.createElement(InputNumberLoading, null)) : (React__default.createElement(InputNumberStepper, { incrementLabel: t("Increase {label}", {
-                        label: label !== null && label !== void 0 ? label : t("value"),
-                    }), decrementLabel: t("Decrease {label}", {
-                        label: label !== null && label !== void 0 ? label : t("value"),
-                    }) }))),
-            suffix && renderDefaultAffix("suffix", suffix, size)),
-        (description || error) && (React__default.createElement(InputNumberFooter, null,
-            React__default.createElement(InputNumberDescription, null, description),
-            React__default.createElement(InputNumberError, null, error)))));
+        prefix ? (React__default.createElement(InputNumberPropAffix, { affix: prefix, variation: "prefix" })) : null,
+        React__default.createElement(InputNumberLabel, null, label),
+        config.loading ? (React__default.createElement(InputNumberLoading, null)) : (React__default.createElement(InputNumberStepper, { incrementLabel: t("Increase {label}", {
+                label: label !== null && label !== void 0 ? label : t("value"),
+            }), decrementLabel: t("Decrease {label}", {
+                label: label !== null && label !== void 0 ? label : t("value"),
+            }) })),
+        suffix ? (React__default.createElement(InputNumberPropAffix, { affix: suffix, variation: "suffix" })) : null,
+        description ? (React__default.createElement(InputNumberDescription, null, description)) : null,
+        error ? React__default.createElement(InputNumberError, null, error) : null));
 }
 InputNumberWrapper.displayName = "InputNumber.Wrapper";
 InputNumber.displayName = "InputNumber";
@@ -296,6 +411,16 @@ InputNumberStepper.displayName = "InputNumber.Stepper";
 InputNumberIncrement.displayName = "InputNumber.Increment";
 InputNumberDecrement.displayName = "InputNumber.Decrement";
 InputNumberAffixCompound.displayName = "InputNumber.Affix";
+// Tagged here so the parts stay plain declarations, which the docs prop-table generator needs.
+assignInputNumberSlot(InputNumberGroup, "group");
+assignInputNumberSlot(InputNumberFooter, "footer");
+assignInputNumberSlot(InputNumberLabel, "label");
+assignInputNumberSlot(InputNumberDescription, "description");
+assignInputNumberSlot(InputNumberError, "error");
+assignInputNumberSlot(InputNumberLoading, "loading");
+assignInputNumberSlot(InputNumberStepper, "stepper");
+assignInputNumberSlot(InputNumberAffixCompound, "affix");
+assignInputNumberSlot(InputNumberPropAffix, "affix");
 InputNumber.Wrapper = InputNumberWrapper;
 InputNumber.Group = InputNumberGroup;
 InputNumber.Footer = InputNumberFooter;

package/dist/NumberFieldInput-es.js

@@ -1485,4 +1485,4 @@ const NumberFieldInput = /*#__PURE__*/React.forwardRef(function NumberFieldInput
 });
 if (process.env.NODE_ENV !== "production") NumberFieldInput.displayName = "NumberFieldInput";
 
-export { NumberFieldRoot as N, NumberFieldGroup as a, NumberFieldInput as b, NumberFieldIncrement as c, NumberFieldDecrement as d, stateAttributesMapping as s, useNumberFieldRootContext as u };
+export { NumberFieldRoot as N, NumberFieldGroup as a, NumberFieldIncrement as b, NumberFieldDecrement as c, NumberFieldInput as d, stateAttributesMapping as s, useNumberFieldRootContext as u };

package/dist/Select-es.js

@@ -5,7 +5,7 @@ import { S as SelectPrimitive } from './SelectPrimitive-es.js';
 import { a as BottomSheet } from './BottomSheet-es.js';
 import { I as Icon } from './Icon-es.js';
 import { H as HelperText } from './HelperText-es.js';
-import { F as FieldRoot, a as FieldLabel, b as FieldDescription, c as FieldError } from './FieldDescription-es.js';
+import { c as FieldRoot, F as FieldLabel, a as FieldDescription, b as FieldError } from './FieldDescription-es.js';
 
 var styles = {"field":"cWI-uFeNWWw-","inline":"ddkBixixBz4-","control":"_-1-lIAkgLuo-","trigger":"_7rwBeCqTgRY-","small":"_5QeBX5VxX6o-","large":"Pp5nj1nxejw-","label":"M1IjAW17-OE-","hasLabel":"_1rx-nSAJT0U-","sheetListbox":"AVkCcDISAio-","sheetOption":"_35H33txs5QU-","sheetOptionLabel":"uL9j4OZn-3c-","sheetOptionIndicator":"_7NHtDHZnkG8-","sheetGroup":"UQ1tsDd1NFs-","sheetGroupLabel":"_0kBfkWoRI5c-","sheetSeparator":"RPsN9vqlzRw-","spinning":"oOACJmrVDf0-"};
 

package/dist/docs/InputNumber/InputNumber.md

@@ -339,17 +339,17 @@ the **Design** tab.
 | `Description`           | Helper text below the field                                          |
 | `Error`                 | Styled error message below the field                                 |
 
-## Composition
-
-The prop-driven component is sugar: it renders exactly the tree you would write
-by hand with `<InputNumber.Wrapper>` and the parts. To customize a single piece,
-compose the tree yourself and swap that one part — the other parts keep their
-defaults. The sugar does not merge consumer-provided parts into its render, so
-there is no per-slot precedence to reason about.
-
 `Wrapper` owns the field state and shares it with the parts through context, so
 every part must be rendered inside a `Wrapper` (a part used outside one throws).
 
+## Customize one part
+
+Pass the content parts you want — `Label`, `Affix`, `Stepper`, `Loading`,
+`Description`, `Error` — straight to `Wrapper`. It builds `Group`, `Input`, and
+`Footer` around them and places each part at the right depth, so you never
+reproduce the skeleton to change one piece. `Wrapper` renders only the parts you
+gave it: leave one out and it is not there.
+
 The example below replaces the default stepper icons with `+` / `−` and leaves
 everything else as the default:
 
@@ -361,25 +361,139 @@ export function InputNumberCompositionExample() {
   const [value, setValue] = useState<number | null>(3);
 
   return (
-    <InputNumber.Wrapper value={value} onValueCommitted={setValue}>
+    <InputNumber.Wrapper onValueCommitted={setValue} value={value}>
+      <InputNumber.Label>Quantity</InputNumber.Label>
+      <InputNumber.Stepper>
+        <InputNumber.Increment ariaLabel="Increase Quantity">
+          +
+        </InputNumber.Increment>
+        <InputNumber.Decrement ariaLabel="Decrease Quantity">
+          −
+        </InputNumber.Decrement>
+      </InputNumber.Stepper>
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+### Omit a part
+
+A field with no stepper is the same composition minus the `Stepper`:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionStepperlessExample() {
+  const [value, setValue] = useState<number | null>(15);
+
+  return (
+    <InputNumber.Wrapper
+      format={{ style: "unit", unit: "percent" }}
+      onValueCommitted={setValue}
+      value={value}
+    >
+      <InputNumber.Label>Tax rate</InputNumber.Label>
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+### Show a part conditionally
+
+Presence is ordinary conditional JSX; there is no `show*` prop to reach for:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionConditionalStepperExample() {
+  const [unitCost, setUnitCost] = useState<number | null>(0);
+  const [markup, setMarkup] = useState<number | null>(20);
+
+  return (
+    <>
+      <InputNumber
+        label="Unit cost"
+        onValueCommitted={setUnitCost}
+        prefix={{ label: "$" }}
+        value={unitCost}
+      />
+      <InputNumber.Wrapper onValueCommitted={setMarkup} value={markup}>
+        <InputNumber.Label>Markup</InputNumber.Label>
+        <InputNumber.Affix label="%" variation="suffix" />
+        {Boolean(unitCost) && <InputNumber.Stepper />}
+      </InputNumber.Wrapper>
+    </>
+  );
+}
+```
+
+### Below-field content
+
+`Description` and `Error` route into the footer row, which exists only while one
+of them is rendered. The two are never shown together: when both are present the
+error replaces the description, since a description hints at what the field
+wants and the error already restates it.
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionFooterExample() {
+  const [value, setValue] = useState<number | null>(50);
+  const error = (value ?? 0) > 99 ? "Enter a value between 1 and 99" : "";
+
+  return (
+    <InputNumber.Wrapper
+      invalid={Boolean(error)}
+      max={99}
+      min={1}
+      onValueChange={setValue}
+      value={value}
+    >
+      <InputNumber.Label>Quantity</InputNumber.Label>
+      <InputNumber.Description>Per visit</InputNumber.Description>
+      {error && <InputNumber.Error>{error}</InputNumber.Error>}
+    </InputNumber.Wrapper>
+  );
+}
+```
+
+## Custom layouts
+
+For an arrangement the standard skeleton does not produce, compose the
+structural parts (`Group`, `Input`, `Footer`) yourself. `Wrapper` then renders
+your tree exactly as written and adds nothing:
+
+```tsx
+import React, { useState } from "react";
+import { InputNumber } from "@jobber/components";
+
+export function InputNumberCompositionCustomLayoutExample() {
+  const [value, setValue] = useState<number | null>(3);
+
+  return (
+    <InputNumber.Wrapper inline onValueCommitted={setValue} value={value}>
       <InputNumber.Group>
+        <InputNumber.Decrement ariaLabel="Decrease quantity" />
         <InputNumber.Input>
           <InputNumber.Label>Quantity</InputNumber.Label>
-          <InputNumber.Stepper>
-            <InputNumber.Increment ariaLabel="Increase Quantity">
-              +
-            </InputNumber.Increment>
-            <InputNumber.Decrement ariaLabel="Decrease Quantity">
-              −
-            </InputNumber.Decrement>
-          </InputNumber.Stepper>
         </InputNumber.Input>
+        <InputNumber.Increment ariaLabel="Increase quantity" />
       </InputNumber.Group>
     </InputNumber.Wrapper>
   );
 }
 ```
 
+Pick one path per `Wrapper`. Mixing structural parts with loose content parts
+throws, rather than guessing where the loose parts belong.
+
+The sugar does not merge consumer-provided parts into its render, so there is no
+per-slot precedence to reason about — children passed to `<InputNumber>` are
+ignored. Compose on `Wrapper` instead.
+
 ## Controlled usage
 
 The field is controlled: pass `value` (a `number`, or `null` for empty) and read

package/dist/index.cjs

@@ -113,6 +113,7 @@ require('color');
 require('./tslib.es6-cjs.js');
 require('react-router-dom');
 require('./getMappedAtlantisSpaceToken-cjs.js');
+require('./slotSystem-cjs.js');
 require('./buttonRenderAdapter-cjs.js');
 require('./useRenderElement-cjs.js');
 require('./ComboboxPrimitive-cjs.js');

package/dist/index.mjs

@@ -111,6 +111,7 @@ import 'color';
 import './tslib.es6-es.js';
 import 'react-router-dom';
 import './getMappedAtlantisSpaceToken-es.js';
+import './slotSystem-es.js';
 import './buttonRenderAdapter-es.js';
 import './useRenderElement-es.js';
 import './ComboboxPrimitive-es.js';

package/dist/slotSystem-cjs.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+
+function createSlotSystem(markerKey) {
+    function assignSlot(component, slot) {
+        return Object.assign(component, {
+            [markerKey]: slot,
+        });
+    }
+    function createSlot(slot) {
+        function SlotMarker(props) {
+            return null;
+        }
+        return assignSlot(SlotMarker, slot);
+    }
+    function isSlotElement(child) {
+        if (!React.isValidElement(child))
+            return false;
+        // `in` throws on a primitive, and an element's type is a string for a host
+        // element ("div") or a symbol for a fragment.
+        const type = child.type;
+        return ((typeof type === "object" || typeof type === "function") &&
+            type !== null &&
+            markerKey in type);
+    }
+    return { assignSlot, createSlot, isSlotElement };
+}
+
+exports.createSlotSystem = createSlotSystem;

package/dist/slotSystem-es.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+
+function createSlotSystem(markerKey) {
+    function assignSlot(component, slot) {
+        return Object.assign(component, {
+            [markerKey]: slot,
+        });
+    }
+    function createSlot(slot) {
+        function SlotMarker(props) {
+            return null;
+        }
+        return assignSlot(SlotMarker, slot);
+    }
+    function isSlotElement(child) {
+        if (!React__default.isValidElement(child))
+            return false;
+        // `in` throws on a primitive, and an element's type is a string for a host
+        // element ("div") or a symbol for a fragment.
+        const type = child.type;
+        return ((typeof type === "object" || typeof type === "function") &&
+            type !== null &&
+            markerKey in type);
+    }
+    return { assignSlot, createSlot, isSlotElement };
+}
+
+export { createSlotSystem as c };

package/dist/styles.css

@@ -14306,20 +14306,29 @@ html.atlantisLightBoxActive {
   );
 }
 
+/* Spacing sits here, not on `.description`, so it applies to whichever part is present. */
 .kkywg49kgrg- {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
       flex-direction: column;
+  gap: 4px;
+  gap: var(--space-smaller);
+  margin-top: 4px;
+  margin-top: var(--space-smaller);
+}
+
+/* A part with an empty message renders nothing, so the row must not hold space. */
+.kkywg49kgrg-:empty {
+  margin-top: 0;
 }
 
 /**
  * `Field.Description` renders a `<p>`, which inherits the user-agent
- * `margin-block` defaults. Reset margins so spacing comes only from our token.
+ * `margin-block` defaults. Reset so spacing comes only from the footer's gap.
  */
 .buIzMqBEpSQ- {
-  margin: 4px 0 0 0;
-  margin: var(--space-smaller) 0 0 0;
+  margin: 0;
   color: hsl(197, 21%, 36%);
   color: var(--color-text--secondary);
   font-size: 12px;

package/dist/unstyledPrimitives/index.mjs

@@ -13,7 +13,7 @@ import { u as useMenuRootContext, o as useMenuPositionerContext, p as useMenuIte
 import * as ReactDOM from 'react-dom';
 import { m as usePreviousValue, n as useSelectRootContext, s as selectors, o as useSelectPositionerContext, j as SelectGroup, k as SelectGroupLabel, g as SelectItem, i as SelectItemIndicator, h as SelectItemText, f as SelectList, e as SelectPopup, a as SelectPortal, d as SelectPositioner, S as SelectRoot, b as SelectTrigger, c as SelectValue } from '../SelectGroupLabel-es.js';
 import { S as Separator } from '../Separator-es.js';
-import { u as useNumberFieldRootContext, s as stateAttributesMapping$4, d as NumberFieldDecrement, a as NumberFieldGroup, c as NumberFieldIncrement, b as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
+import { u as useNumberFieldRootContext, s as stateAttributesMapping$4, c as NumberFieldDecrement, a as NumberFieldGroup, b as NumberFieldIncrement, d as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
 import { u as useLabel } from '../useLabel-es.js';
 import '../stringifyLocale-es.js';
 

package/dist/utils/slotSystem.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+/**
+ * Shared slot mechanism for compound components: tag a part with a slot name,
+ * then detect that name on a child element. Components own their own child
+ * parsing — the mechanism is shared, the placement policy is not.
+ */
+export type SlotComponent<Props, MarkerKey extends string, Slot extends string> = React.FC<Props> & Record<MarkerKey, Slot>;
+export declare function createSlotSystem<MarkerKey extends string, SlotName extends string>(markerKey: MarkerKey): {
+    assignSlot: <Props, Slot extends SlotName>(component: React.FC<Props>, slot: Slot) => SlotComponent<Props, MarkerKey, Slot>;
+    createSlot: <Props, Slot extends SlotName = SlotName>(slot: Slot) => SlotComponent<Props, MarkerKey, Slot>;
+    isSlotElement: <Props = unknown>(child: React.ReactNode) => child is React.ReactElement<Props, SlotComponent<Props, MarkerKey, SlotName>>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.12.3",
+  "version": "9.13.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -547,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "806acbc400062ba092f647367528425ecbcea016"
+  "gitHead": "dd36de6ab42a53be688a1f99ec3342a178c580b6"
 }

package/dist/Combobox/Combobox.slotFactory.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-export type ComboboxSlotComponent<Props, MarkerKey extends string, Slot extends string> = React.FC<Props> & Record<MarkerKey, Slot>;
-export declare function createComboboxSlotSystem<MarkerKey extends string, SlotName extends string>(markerKey: MarkerKey): {
-    assignSlot: <Props, Slot extends SlotName>(component: React.FC<Props>, slot: Slot) => ComboboxSlotComponent<Props, MarkerKey, Slot>;
-    createSlot: <Props, Slot extends SlotName = SlotName>(slot: Slot) => ComboboxSlotComponent<Props, MarkerKey, Slot>;
-    isSlotElement: <Props = unknown>(child: React.ReactNode) => child is React.ReactElement<Props, ComboboxSlotComponent<Props, MarkerKey, SlotName>>;
-};