@jobber/components 9.12.3 → 9.13.1

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/LightBox-cjs.js

@@ -16,7 +16,7 @@ var Tooltip = require('./Tooltip-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 var Menu = require('./Menu-cjs.js');
 
-var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftActions":"OunDmtPpa9g-","downloadOptionContent":"TPSJq-8p0vo-","downloadOptionLabel":"vZU6ZSl8QLI-","downloadOptionDetail":"vubHTSF4aYA-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
+var styles = {"lightboxWrapper":"_5p2iAj4JfoE-","thumbnailBar":"_3TfQLQEE3GQ-","backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftActions":"OunDmtPpa9g-","downloadOptionContent":"TPSJq-8p0vo-","downloadOptionLabel":"vZU6ZSl8QLI-","downloadOptionDetail":"vubHTSF4aYA-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
@@ -69,7 +69,6 @@ function LightBoxProvider({ open = true, images, imageIndex = 0, onRequestClose
     const debouncedHandleNext = jobberHooks.useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
     const debouncedHandlePrevious = jobberHooks.useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
     const mounted = jobberHooks.useIsMounted();
-    const prevOpen = React.useRef(open);
     jobberHooks.useRefocusOnActivator(open);
     const handleMouseMovement = jobberHooks.useDebounce(() => {
         setMouseIsStationary(true);
@@ -85,10 +84,6 @@ function LightBoxProvider({ open = true, images, imageIndex = 0, onRequestClose
         setCurrentImageIndex(imageIndex);
         onImageChange(imageIndex);
     }, [imageIndex, open]);
-    if (prevOpen.current !== open) {
-        prevOpen.current = open;
-        togglePrintStyles(open);
-    }
     React.useEffect(() => {
         var _a;
         (_a = selectedThumbnailRef === null || selectedThumbnailRef === void 0 ? void 0 : selectedThumbnailRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
@@ -158,19 +153,6 @@ function LightBoxProvider({ open = true, images, imageIndex = 0, onRequestClose
 function useLightBoxContext() {
     return React.useContext(LightBoxContext);
 }
-function togglePrintStyles(open) {
-    try {
-        if (open) {
-            document.documentElement.classList.add("atlantisLightBoxActive");
-        }
-        else {
-            document.documentElement.classList.remove("atlantisLightBoxActive");
-        }
-    }
-    catch (error) {
-        console.error(error);
-    }
-}
 
 const lightBoxMessages = useAtlantisI18n.defineMessages({
     close: {
@@ -202,7 +184,6 @@ const lightBoxMessages = useAtlantisI18n.defineMessages({
 function LightBoxContent() {
     const { open, lightboxRef, handleMouseMove } = useLightBoxContext();
     const { t } = useAtlantisI18n.useAtlantisI18n(lightBoxMessages);
-    const mounted = jobberHooks.useIsMounted();
     const template = (React.createElement(React.Fragment, null, open && (React.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": t("lightbox"), key: "Lightbox", ref: lightboxRef, onMouseMove: handleMouseMove },
         React.createElement(LightBoxBackground, null),
         React.createElement(LightBoxOverlay, null),
@@ -211,7 +192,7 @@ function LightBoxContent() {
         React.createElement(LightBoxNavigation, null),
         React.createElement(LightBoxCaption, null),
         React.createElement(LightBoxThumbnails, null)))));
-    return mounted.current
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
         ? ReactDOM.createPortal(template, document.body)
         : template;
 }

package/dist/LightBox-es.js

@@ -14,7 +14,7 @@ import { T as Tooltip } from './Tooltip-es.js';
 import { A as AtlantisThemeContextProvider } from './AtlantisThemeContext-es.js';
 import { M as Menu } from './Menu-es.js';
 
-var styles = {"backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","lightboxWrapper":"_5p2iAj4JfoE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftActions":"OunDmtPpa9g-","downloadOptionContent":"TPSJq-8p0vo-","downloadOptionLabel":"vZU6ZSl8QLI-","downloadOptionDetail":"vubHTSF4aYA-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailBar":"_3TfQLQEE3GQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
+var styles = {"lightboxWrapper":"_5p2iAj4JfoE-","thumbnailBar":"_3TfQLQEE3GQ-","backgroundImage":"i9Tw1T65W-k-","next":"Q8amcRaTGf0-","prev":"W9FVb24yJrk-","buttonHidden":"nsN0TPWsBXI-","buttonVisible":"dkLYp7AD2jE-","toolbar":"rMK4cKdOxFw-","closeButton":"_0m6vb11DgiA-","slideNumber":"kCc68gGuTgg-","leftActions":"OunDmtPpa9g-","downloadOptionContent":"TPSJq-8p0vo-","downloadOptionLabel":"vZU6ZSl8QLI-","downloadOptionDetail":"vubHTSF4aYA-","image":"yYFVVScosfQ-","imageArea":"UskuwLHR6fg-","captionWrapper":"OGjhge-r-U4-","title":"tZU2g-NYdIs-","blurOverlay":"GKIdLTmvcvQ-","thumbnailImage":"eBMzUOlcfQ4-","thumbnail":"eapm2zruLn8-","selected":"PeLn2u-QB0k-","spinning":"_8tDoqjgfLcw-"};
 
 // A little bit more than the transition's duration
 // We're doing this to prevent a bug from framer-motion
@@ -67,7 +67,6 @@ function LightBoxProvider({ open = true, images, imageIndex = 0, onRequestClose
     const debouncedHandleNext = useDebounce(handleMoveNext, BUTTON_DEBOUNCE_DELAY);
     const debouncedHandlePrevious = useDebounce(handleMovePrevious, BUTTON_DEBOUNCE_DELAY);
     const mounted = useIsMounted();
-    const prevOpen = useRef(open);
     useRefocusOnActivator(open);
     const handleMouseMovement = useDebounce(() => {
         setMouseIsStationary(true);
@@ -83,10 +82,6 @@ function LightBoxProvider({ open = true, images, imageIndex = 0, onRequestClose
         setCurrentImageIndex(imageIndex);
         onImageChange(imageIndex);
     }, [imageIndex, open]);
-    if (prevOpen.current !== open) {
-        prevOpen.current = open;
-        togglePrintStyles(open);
-    }
     useEffect(() => {
         var _a;
         (_a = selectedThumbnailRef === null || selectedThumbnailRef === void 0 ? void 0 : selectedThumbnailRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
@@ -156,19 +151,6 @@ function LightBoxProvider({ open = true, images, imageIndex = 0, onRequestClose
 function useLightBoxContext() {
     return useContext(LightBoxContext);
 }
-function togglePrintStyles(open) {
-    try {
-        if (open) {
-            document.documentElement.classList.add("atlantisLightBoxActive");
-        }
-        else {
-            document.documentElement.classList.remove("atlantisLightBoxActive");
-        }
-    }
-    catch (error) {
-        console.error(error);
-    }
-}
 
 const lightBoxMessages = defineMessages({
     close: {
@@ -200,7 +182,6 @@ const lightBoxMessages = defineMessages({
 function LightBoxContent() {
     const { open, lightboxRef, handleMouseMove } = useLightBoxContext();
     const { t } = useAtlantisI18n(lightBoxMessages);
-    const mounted = useIsMounted();
     const template = (React__default.createElement(React__default.Fragment, null, open && (React__default.createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": t("lightbox"), key: "Lightbox", ref: lightboxRef, onMouseMove: handleMouseMove },
         React__default.createElement(LightBoxBackground, null),
         React__default.createElement(LightBoxOverlay, null),
@@ -209,7 +190,7 @@ function LightBoxContent() {
         React__default.createElement(LightBoxNavigation, null),
         React__default.createElement(LightBoxCaption, null),
         React__default.createElement(LightBoxThumbnails, null)))));
-    return mounted.current
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
         ? ReactDOM__default.createPortal(template, document.body)
         : template;
 }

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 };