@jobber/components 7.9.0 → 7.10.1-TAYLORmen-7785412.2

package/dist/Card/index.cjs

@@ -21,10 +21,12 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 
 

package/dist/Card/index.mjs

@@ -19,8 +19,10 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';

package/dist/DataDump/index.cjs

@@ -22,10 +22,12 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 require('../Content-cjs.js');
 require('../Emphasis-cjs.js');

package/dist/DataDump/index.mjs

@@ -20,10 +20,12 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';
 import '../Content-es.js';
 import '../Emphasis-es.js';

package/dist/InputTime/InputTime.rebuilt.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { InputTimeRebuiltProps } from "./InputTime.types";
-export declare function InputTimeRebuilt({ value, onChange, readOnly, autoComplete, inputRef, ...props }: InputTimeRebuiltProps): React.JSX.Element;
+export declare function InputTimeRebuilt({ value, onChange, readOnly, autoComplete, inputRef, step, ...props }: InputTimeRebuiltProps): React.JSX.Element;

package/dist/InputTime/InputTime.types.d.ts

@@ -32,6 +32,14 @@ export interface InputTimeRebuiltProps extends Omit<HTMLInputBaseProps, "maxLeng
      * Minimum numerical or date value.
      */
     readonly min?: number;
+    /**
+     * Granularity of the time input, in seconds. Matches the native HTML `step`
+     * attribute. Defaults to `60` so the input displays only hours and minutes;
+     * set to a value less than `60` (e.g. `1`) to display seconds.
+     *
+     * @default 60
+     */
+    readonly step?: number;
     readonly inputRef?: Ref<HTMLInputElement>;
     /**
      * @deprecated Use `onKeyDown` or `onKeyUp` instead.

package/dist/InputTime/index.cjs

@@ -173,32 +173,37 @@ function formatHour(time) {
     return `${time}:00`;
 }
 
-function dateToTimeString(date) {
+function dateToTimeString(date, includeSeconds = false) {
     if (!(date instanceof Date)) {
         return "";
     }
-    // Extract hours and minutes from the Date object
     const hours = date.getHours().toString().padStart(2, "0");
     const minutes = date.getMinutes().toString().padStart(2, "0");
-    // Return the time string in HH:MM format
+    if (includeSeconds) {
+        const seconds = date.getSeconds().toString().padStart(2, "0");
+        return `${hours}:${minutes}:${seconds}`;
+    }
     return `${hours}:${minutes}`;
 }
 function timeStringToDate(timeString, baseDate) {
     try {
-        const [hours, minutes] = timeString.split(":").map(Number);
+        const [hours, minutes, seconds = 0] = timeString.split(":").map(Number);
         if (isNaN(hours) ||
             isNaN(minutes) ||
+            isNaN(seconds) ||
             hours < 0 ||
             hours > 24 ||
             minutes < 0 ||
-            minutes > 60) {
+            minutes > 60 ||
+            seconds < 0 ||
+            seconds > 60) {
             return undefined;
         }
         // Try to preserve the Date part of the Date object as long as it is valid
         const date = baseDate instanceof Date && !isNaN(baseDate.getTime())
             ? new Date(baseDate)
             : new Date();
-        date.setHours(hours, minutes, 0, 0);
+        date.setHours(hours, minutes, seconds, 0);
         return date;
     }
     catch (_a) {
@@ -268,7 +273,7 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
 
 function InputTimeRebuilt(_a) {
     var _b;
-    var { value, onChange, readOnly, autoComplete, inputRef } = _a, props = tslib_es6.__rest(_a, ["value", "onChange", "readOnly", "autoComplete", "inputRef"]);
+    var { value, onChange, readOnly, autoComplete, inputRef, step = 60 } = _a, props = tslib_es6.__rest(_a, ["value", "onChange", "readOnly", "autoComplete", "inputRef", "step"]);
     const { internalRef, mergedRef, wrapperRef } = useInputTimeRefs(inputRef);
     const generatedId = React.useId();
     const id = props.id || generatedId;
@@ -303,8 +308,8 @@ function InputTimeRebuilt(_a) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
-    return (React.createElement(mergeRefs.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: mergeRefs.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
+    return (React.createElement(mergeRefs.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value, step % 60 !== 0), wrapperRef: wrapperRef },
+        React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: mergeRefs.formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, max: props.max, min: props.min, step: step, value: dateToTimeString(value, step % 60 !== 0), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
 }
 function useInputTimeRefs(inputRef) {
     const internalRef = React.useRef(null);

package/dist/InputTime/index.mjs

@@ -171,32 +171,37 @@ function formatHour(time) {
     return `${time}:00`;
 }
 
-function dateToTimeString(date) {
+function dateToTimeString(date, includeSeconds = false) {
     if (!(date instanceof Date)) {
         return "";
     }
-    // Extract hours and minutes from the Date object
     const hours = date.getHours().toString().padStart(2, "0");
     const minutes = date.getMinutes().toString().padStart(2, "0");
-    // Return the time string in HH:MM format
+    if (includeSeconds) {
+        const seconds = date.getSeconds().toString().padStart(2, "0");
+        return `${hours}:${minutes}:${seconds}`;
+    }
     return `${hours}:${minutes}`;
 }
 function timeStringToDate(timeString, baseDate) {
     try {
-        const [hours, minutes] = timeString.split(":").map(Number);
+        const [hours, minutes, seconds = 0] = timeString.split(":").map(Number);
         if (isNaN(hours) ||
             isNaN(minutes) ||
+            isNaN(seconds) ||
             hours < 0 ||
             hours > 24 ||
             minutes < 0 ||
-            minutes > 60) {
+            minutes > 60 ||
+            seconds < 0 ||
+            seconds > 60) {
             return undefined;
         }
         // Try to preserve the Date part of the Date object as long as it is valid
         const date = baseDate instanceof Date && !isNaN(baseDate.getTime())
             ? new Date(baseDate)
             : new Date();
-        date.setHours(hours, minutes, 0, 0);
+        date.setHours(hours, minutes, seconds, 0);
         return date;
     }
     catch (_a) {
@@ -266,7 +271,7 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
 
 function InputTimeRebuilt(_a) {
     var _b;
-    var { value, onChange, readOnly, autoComplete, inputRef } = _a, props = __rest(_a, ["value", "onChange", "readOnly", "autoComplete", "inputRef"]);
+    var { value, onChange, readOnly, autoComplete, inputRef, step = 60 } = _a, props = __rest(_a, ["value", "onChange", "readOnly", "autoComplete", "inputRef", "step"]);
     const { internalRef, mergedRef, wrapperRef } = useInputTimeRefs(inputRef);
     const generatedId = useId();
     const id = props.id || generatedId;
@@ -301,8 +306,8 @@ function InputTimeRebuilt(_a) {
     const descriptionIdentifier = `descriptionUUID--${id}`;
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
-    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
-        React__default.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value, step % 60 !== 0), wrapperRef: wrapperRef },
+        React__default.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: formFieldStyles.input, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, required: props.required, max: props.max, min: props.min, step: step, value: dateToTimeString(value, step % 60 !== 0), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
 }
 function useInputTimeRefs(inputRef) {
     const internalRef = useRef(null);

package/dist/InputTime/utils/input-time-utils.d.ts

@@ -1,2 +1,2 @@
-export declare function dateToTimeString(date?: Date): string;
+export declare function dateToTimeString(date?: Date, includeSeconds?: boolean): string;
 export declare function timeStringToDate(timeString: string, baseDate?: Date): Date | undefined;

package/dist/Menu/index.cjs

@@ -19,10 +19,12 @@ require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 
 

package/dist/Menu/index.mjs

@@ -17,8 +17,10 @@ import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';

package/dist/Menu-cjs.js

@@ -13,8 +13,9 @@ var maxHeight = require('./maxHeight-cjs.js');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var BottomSheet = require('./BottomSheet-cjs.js');
 var OverlaySeparator = require('./OverlaySeparator-cjs.js');
+var BottomSheet = require('./BottomSheet-cjs.js');
+require('./HelperText-cjs.js');
 var MenuSubmenuTrigger$1 = require('./MenuSubmenuTrigger-cjs.js');
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
@@ -367,6 +368,17 @@ function getTextContent(node) {
     }
     return getTextContent(node.props.children);
 }
+function getBottomSheetContentStyle(style) {
+    if (!style) {
+        return undefined;
+    }
+    const safeStyle = Object.assign({}, style);
+    delete safeStyle.height;
+    delete safeStyle.maxHeight;
+    delete safeStyle.minHeight;
+    delete safeStyle.width;
+    return safeStyle;
+}
 // Bottom sheet menu interaction helpers. These adapt Drawer semantics into the
 // menu-style keyboard and focus behavior we want for the mobile shell.
 function getNavigableMenuItems(target) {
@@ -514,11 +526,12 @@ function BottomSheetContent({ children, style, className, UNSAFE_style, UNSAFE_c
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames({
             [styles.menuHidden]: submenuOpen,
         }) },
         React.createElement(BottomSheet.BottomSheet.Content, null,
-            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: bottomSheetStyle }, children))));
 }
 function BottomSheetSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -666,8 +679,9 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames(styles.menu, styles.bottomSheetSubmenuPopup) },
-        React.createElement(BottomSheet.BottomSheet.Content, { style: resolvedBaseProps.style },
+        React.createElement(BottomSheet.BottomSheet.Content, { style: bottomSheetStyle },
             title ? (React.createElement(MenuSubmenuTrigger$1.DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React.createElement("div", { className: styles$1.submenuHeader },
                 React.createElement(MenuSubmenuTrigger$1.DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React.createElement(Button.Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
@@ -721,6 +735,9 @@ function getFloatingLayerStyle(style) {
         return undefined;
     return { zIndex: style.zIndex };
 }
+function getMenuPopupStyle(style) {
+    return Object.assign({ maxHeight: `min(${MENU_MAX_HEIGHT_PERCENTAGE}vh, max(0px, calc(var(--available-height) - var(--space-base))))` }, style);
+}
 function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
     const actionsRef = React.useRef(null);
     return (React.createElement(MenuDropdownContext.Provider, { value: {
@@ -754,9 +771,10 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     });
     const [side = "bottom", align = "start"] = (_a = preferredPlacement === null || preferredPlacement === void 0 ? void 0 : preferredPlacement.split(" ")) !== null && _a !== void 0 ? _a : [];
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
-            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -847,9 +865,10 @@ function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style,
         UNSAFE_style,
     });
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: "start", side: "right", sideOffset: MENU_OFFSET },
-            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);

package/dist/Menu-es.js

@@ -11,8 +11,9 @@ import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { o as offset, f as flip, d as size, b as autoUpdate } from './floating-ui.react-dom-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
-import { B as BottomSheet } from './BottomSheet-es.js';
 import { O as OverlaySeparator } from './OverlaySeparator-es.js';
+import { B as BottomSheet } from './BottomSheet-es.js';
+import './HelperText-es.js';
 import { D as DrawerTrigger, a as DrawerTitle, b as DrawerClose, M as MenuTrigger$1, c as MenuLinkItem, d as MenuItem$1, e as MenuRadioItem$1, f as MenuRadioItemIndicator, g as MenuSubmenuTrigger$1, h as MenuRoot$1, i as MenuPortal$1, j as MenuPositioner, k as MenuPopup, l as MenuRadioGroup$1, m as MenuGroup$1, n as MenuSubmenuRoot, o as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
@@ -365,6 +366,17 @@ function getTextContent(node) {
     }
     return getTextContent(node.props.children);
 }
+function getBottomSheetContentStyle(style) {
+    if (!style) {
+        return undefined;
+    }
+    const safeStyle = Object.assign({}, style);
+    delete safeStyle.height;
+    delete safeStyle.maxHeight;
+    delete safeStyle.minHeight;
+    delete safeStyle.width;
+    return safeStyle;
+}
 // Bottom sheet menu interaction helpers. These adapt Drawer semantics into the
 // menu-style keyboard and focus behavior we want for the mobile shell.
 function getNavigableMenuItems(target) {
@@ -512,11 +524,12 @@ function BottomSheetContent({ children, style, className, UNSAFE_style, UNSAFE_c
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React__default.createElement(BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames({
             [styles.menuHidden]: submenuOpen,
         }) },
         React__default.createElement(BottomSheet.Content, null,
-            React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: bottomSheetStyle }, children))));
 }
 function BottomSheetSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -664,8 +677,9 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React__default.createElement(BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames(styles.menu, styles.bottomSheetSubmenuPopup) },
-        React__default.createElement(BottomSheet.Content, { style: resolvedBaseProps.style },
+        React__default.createElement(BottomSheet.Content, { style: bottomSheetStyle },
             title ? (React__default.createElement(DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React__default.createElement("div", { className: styles$1.submenuHeader },
                 React__default.createElement(DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React__default.createElement(Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
@@ -719,6 +733,9 @@ function getFloatingLayerStyle(style) {
         return undefined;
     return { zIndex: style.zIndex };
 }
+function getMenuPopupStyle(style) {
+    return Object.assign({ maxHeight: `min(${MENU_MAX_HEIGHT_PERCENTAGE}vh, max(0px, calc(var(--available-height) - var(--space-base))))` }, style);
+}
 function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
     const actionsRef = React__default.useRef(null);
     return (React__default.createElement(MenuDropdownContext.Provider, { value: {
@@ -752,9 +769,10 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     });
     const [side = "bottom", align = "start"] = (_a = preferredPlacement === null || preferredPlacement === void 0 ? void 0 : preferredPlacement.split(" ")) !== null && _a !== void 0 ? _a : [];
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
-            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -845,9 +863,10 @@ function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style,
         UNSAFE_style,
     });
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: "start", side: "right", sideOffset: MENU_OFFSET },
-            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);

package/dist/Page/index.cjs

@@ -26,10 +26,11 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 require('../filterDataAttributes-cjs.js');
 

package/dist/Page/index.mjs

@@ -24,9 +24,10 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
 import '../MenuSubmenuTrigger-es.js';
 import '../filterDataAttributes-es.js';

package/dist/docs/AnimatedSwitcher/AnimatedSwitcher.md

@@ -23,7 +23,7 @@ initial icon. See
 | `initialChild` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | Yes | — | The component that shows up when the `switched` prop is `false` |
 | `switched` | `boolean` | Yes | `false` | Determines when to switch the component to the `switchTo` prop. |
 | `switchTo` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | Yes | — | The component that shows up when the `switched` prop is `true` |
-| `type` | `"slideFromBottom" | "fade"` | No | `slideFromBottom` | Change the transition between 2 elements. |
+| `type` | `"fade" | "slideFromBottom"` | No | `slideFromBottom` | Change the transition between 2 elements. |
 
 #### AnimatedSwitcher.Icon
 

package/dist/docs/Banner/Banner.md

@@ -389,7 +389,7 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 | `dismissible` | `boolean` | No | `true` | Set to false to hide the dismiss button |
 | `icon` | `IconNames` | No | — | Use to override the default status Icon |
 | `onDismiss` | `() => void` | No | — | Callback to be called when the Banner is dismissed. |
-| `primaryAction` | `{ external?: never; onClick?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly UNSAFE_className?: { container?: string; buttonLabel?: { ...; }; buttonIcon?: { ...; }; }; ... 18 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | Accepts props for Button. Default action uses a 'subtle' Button |
+| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | Accepts props for Button. Default action uses a 'subtle' Button |
 
 #### Banner.Provider
 
@@ -407,11 +407,11 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `backgroundColor` | `"success" | "warning" | "icon" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | "base-grey--500" | "base-grey--600" | "base-grey--700" | "base-grey--800" | ... 273 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
-| `color` | `"success" | "warning" | "icon" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | "disabled" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "disabled" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
+| `color` | `"task" | "text" | "warning" | "icon" | "disabled" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `name` | `IconNames` | No | — | The icon to show. |
-| `size` | `"small" | "base" | "large"` | No | `base` | Changes the size to small or large. |
+| `size` | `"small" | "large" | "base"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
 | `UNSAFE_className` | `{ readonly container?: string; readonly icon?: { svg?: string; path?: string; }; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
 | `UNSAFE_style` | `{ readonly container?: CSSProperties; readonly icon?: { svg?: CSSProperties; path?: CSSProperties; }; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |

package/dist/docs/Box/Box.md

@@ -206,18 +206,18 @@ defaults to respecting theme/modes.
 | `alignItems` | `AlignItems` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `alignSelf` | `AlignSelf` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `as` | `"div" | "span" | "section" | "article" | "aside" | "main"` | No | `div` |  |
-| `background` | `"base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | "base-grey--500" | "base-grey--600" | "base-grey--700" | "base-grey--800" | "base-grey--900" | ... 275 more ... | "client--onSurface"` | No | — |  |
+| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "disabled" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — |  |
-| `borderColor` | `"base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | "base-grey--500" | "base-grey--600" | "base-grey--700" | "base-grey--800" | "base-grey--900" | ... 275 more ... | "client--onSurface"` | No | — |  |
+| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "disabled" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `direction` | `FlexDirection` | No | — |  |
-| `gap` | `"base" | "minuscule" | "smallest" | "smaller" | "small" | "slim" | "large" | "larger" | "largest" | "extravagant"` | No | — |  |
+| `gap` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant"` | No | — |  |
 | `height` | `BoxDimension` | No | `auto` |  |
 | `justifyContent` | `JustifyContent` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
-| `margin` | `"base" | "minuscule" | "smallest" | "smaller" | "small" | "slim" | "large" | "larger" | "largest" | "extravagant" | BoxSpace` | No | — |  |
+| `margin` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant" | BoxSpace` | No | — |  |
 | `overflow` | `Overflow` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
-| `padding` | `"base" | "minuscule" | "smallest" | "smaller" | "small" | "slim" | "large" | "larger" | "largest" | "extravagant" | BoxSpace` | No | — |  |
+| `padding` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant" | BoxSpace` | No | — |  |
 | `position` | `Position` | No | `relative` | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `preserveWhiteSpace` | `boolean` | No | — |  |
-| `radius` | `"base" | "small" | "large" | "larger" | "circle"` | No | — |  |
+| `radius` | `"circle" | "small" | "large" | "base" | "larger"` | No | — |  |
 | `tabIndex` | `number` | No | — | [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/tabIndex) |
 | `width` | `BoxDimension` | No | `auto` |  |

package/dist/docs/Button/Button.md

@@ -935,13 +935,13 @@ export const styles = StyleSheet.create({
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `align` | `"center" | "end" | "start"` | No | `"start"` | Sets the alignment to start, center, or end. In LTR scripts this equates to left, center, or right. |
-| `element` | `"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "b" | "em" | "dd" | "dt" | "strong" | "span"` | No | `span` |  |
+| `element` | `"span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "b" | "em" | "dd" | "dt" | "strong"` | No | `span` |  |
 | `emphasisType` | `"highlight" | "italic"` | No | — |  |
 | `fontFamily` | `"base" | "display"` | No | `base` |  |
 | `fontWeight` | `"black" | "bold" | "extraBold" | "medium" | "regular" | "semiBold"` | No | `semiBold` | Aside from changing the font weights, this also changes the font family. Source sans for `regular` and `bold`. Poppin... |
 | `id` | `string` | No | — |  |
 | `numberOfLines` | `number` | No | — |  |
-| `size` | `"small" | "base" | "large" | "extravagant" | "jumbo" | "larger" | "largest" | "smaller"` | No | — |  |
+| `size` | `"small" | "large" | "base" | "smaller" | "larger" | "largest" | "extravagant" | "jumbo"` | No | — |  |
 | `textCase` | `"none" | "capitalize" | "lowercase" | "uppercase"` | No | — |  |
 | `underline` | `UnderlineStyle | "solid color-indigo" | "solid color-indigo--light" | "solid color-indigo--lighter" | "solid color-indigo--lightest" | "solid color-indigo--dark" | ... 646 more ... | "dashed color-client--onSurface"` | No | — | The style (and optionally a color) of underline the text is decorated with. All semantic color tokens (other than the... |
 | `UNSAFE_className` | `{ textStyle?: string; }` | No | — | **Use at your own risk:** Custom classNames for specific elements. This should only be used as a **last resort**. Usi... |
@@ -952,7 +952,7 @@ export const styles = StyleSheet.create({
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `size` | `"small" | "base" | "large"` | No | `base` | Changes the size to small or large. |
+| `size` | `"small" | "large" | "base"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
 | `UNSAFE_className` | `{ svg?: string; path?: string; }` | No | — | **Use at your own risk:** Custom classnames for specific elements. This should only be used as a **last resort**. Usi... |
 | `UNSAFE_style` | `{ svg?: CSSProperties; path?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |

package/dist/docs/Card/Card.md

@@ -262,10 +262,10 @@ desired markup and have no need for either UNSAFE.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `accent` | `"blue" | "blueDark" | "blueLight" | "blueLighter" | "blueLightest" | "brown" | "brownDark" | "brownLight" | "brownLighter" | "brownLightest" | "clientColor" | "green" | "greenDark" | ... 72 more ... | "yellowLightest"` | No | — | The `accent`, if provided, will effect the color accent at the top of the card. |
+| `accent` | `"indigo" | "teal" | "blue" | "green" | "lime" | "yellowGreen" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "purple" | "pink" | "orange" | "brown" | "navy" | ... 68 more ... | "yellowLightest"` | No | — | The `accent`, if provided, will effect the color accent at the top of the card. |
 | `elevation` | `elevationProp` | No | — |  |
 | `external` | `boolean` | No | — | Makes the URL open in new tab on click. |
-| `header` | `string | HeaderActionProps | ReactElement<unknown, string | JSXElementConstructor<any>>` | No | — | The header props of the card. |
+| `header` | `string | ReactElement<unknown, string | JSXElementConstructor<any>> | HeaderActionProps` | No | — | The header props of the card. |
 | `onClick` | `(event: MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => void` | No | — | Event handler that gets called when the card is clicked. |
 | `title` | `string` | No | — | @deprecated Use header instead. |
 | `UNSAFE_className` | `{ container?: string; header?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |

package/dist/docs/Checkbox/Checkbox.md

@@ -59,7 +59,7 @@ able to keep track the state of the child Checkboxes. See
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
-| `aria-autocomplete` | `"none" | "inline" | "list" | "both"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
+| `aria-autocomplete` | `"list" | "none" | "inline" | "both"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
 | `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
 | `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
 | `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
@@ -84,5 +84,5 @@ able to keep track the state of the child Checkboxes. See
 | `onMouseUp` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse up event handler. |
 | `onPointerDown` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer down event handler. |
 | `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer up event handler. |
-| `ref` | `Ref<HTMLInputElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
 | `value` | `string` | No | — | Value of the checkbox. |

package/dist/docs/Chip/Chip.md

@@ -369,7 +369,7 @@ those more complex selection flows.
 | `onClick` | `((ev: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void) & MouseEventHandler<ChipElement>` | No | — | Chip click callback using a standard event-first signature. |
 | `onClickValue` | `(value: string | number, ev: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void` | No | — | Value-first click callback retained as an upgrade path for existing consumers. @deprecated Prefer `onClick` with a cl... |
 | `onKeyDown` | `((ev: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) & KeyboardEventHandler<ChipElement>` | No | — | Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed. |
-| `ref` | `Ref<HTMLButtonElement | HTMLDivElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
 | `role` | `string` | No | `button` | The accessible role the Chip is fulfilling. Defaults to 'button' |
 | `tabIndex` | `number` | No | `0` | Used for accessibility purpopses, specifically using the tab key as navigation. |
 | `testID` | `string` | No | — | The testing id for the chip if necessary. |