@jobber/components 7.9.0 → 7.10.0

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/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. |

package/dist/docs/Chips/Chips.md

@@ -172,7 +172,7 @@ is a Base Chip.
 | `activator` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | No | — | Use a custom activator to trigger the Chip option selector |
 | `autoSelectOnClickOutside` | `boolean` | No | `false` | If true, automatically selects an option based on the current search value when the input loses focus. The automatic ... |
 | `isLoadingMore` | `boolean` | No | — | Adds a loading indicator |
-| `onClick` | `(event: MouseEvent<HTMLDivElement | HTMLInputElement | HTMLButtonElement, MouseEvent>, clickedChipValue?: string) => void` | No | — | Callback when a specific chip is clicked @param event @param clickedChipValue - The value of the chip that was clicked |
+| `onClick` | `(event: MouseEvent<HTMLInputElement | HTMLButtonElement | HTMLDivElement, MouseEvent>, clickedChipValue?: string) => void` | No | — | Callback when a specific chip is clicked @param event @param clickedChipValue - The value of the chip that was clicked |
 | `onCustomAdd` | `(value: string) => void` | No | — | Callback when the user selects the custom option instead of the available chips.  If not implemented, it won't allow ... |
 | `onLoadMore` | `(searchValue: string) => void` | No | — | Callback when the user scrolls at the end of the chip option list. Use this to load more options from the database. @... |
 | `onlyShowMenuOnSearch` | `boolean` | No | `false` | Control whether the menu only appears once the user types. |

package/dist/docs/Cluster/Cluster.md

@@ -219,7 +219,7 @@ equal spacing and consistent sizing.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `align` | `"start" | "end" | "center" | "stretch"` | No | — | The vertical alignment of the cluster elements. |
+| `align` | `"stretch" | "center" | "end" | "start"` | No | — | The vertical alignment of the cluster elements. |
 | `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
 | `as` | `CommonAllowedElements` | No | `div` | The HTML tag to render the cluster as. |
 | `autoWidth` | `boolean` | No | `false` | Enabling this prevents the cluster from taking 100% of the width of the parent and instead flows with the content. |
@@ -228,7 +228,7 @@ equal spacing and consistent sizing.
 | `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |
 | `gap` | `GapSpacing` | No | — | The amount of space between the cluster elements. Semantic tokens are available. |
 | `id` | `string` | No | — | Standard HTML id attribute. |
-| `justify` | `"start" | "end" | "center" | "space-between" | "space-around"` | No | — | The horizontal justification of the cluster elements. |
+| `justify` | `"space-around" | "space-between" | "center" | "end" | "start"` | No | — | The horizontal justification of the cluster elements. |
 | `role` | `AriaRole` | No | — | Standard HTML role attribute. |
 | `UNSAFE_className` | `{ container?: 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` | `{ container?: 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/Combobox/Combobox.md

@@ -277,6 +277,6 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 |------|------|----------|---------|-------------|
 | `id` | `string | number` | Yes | — | A unique identifier for the option. |
 | `label` | `string` | Yes | — | The value to be visually displayed in the Combobox options list. |
-| `customRender` | `(option: Pick<ComboboxOptionProps, "id" | "label" | "prefix"> & { isSelected: boolean; defaultContent: ReactElement<unknown, string | JSXElementConstructor<any>>; }) => ReactNode` | No | — | Advanced: A custom render prop to completely control how this option is rendered. The function receives the option's ... |
+| `customRender` | `(option: Pick<ComboboxOptionProps, "prefix" | "label" | "id"> & { isSelected: boolean; defaultContent: ReactElement<unknown, string | JSXElementConstructor<any>>; }) => ReactNode` | No | — | Advanced: A custom render prop to completely control how this option is rendered. The function receives the option's ... |
 | `onClick` | `(option: ComboboxOptionProps) => void` | No | — | Callback function invoked when the option is clicked. |
 | `prefix` | `ReactNode` | No | — | An optional component to be displayed before the label. |

package/dist/docs/ConfirmationModal/ConfirmationModal.md

@@ -119,7 +119,7 @@ language should be direct and honest about the impact without being alarming.
 | `onConfirm` | `() => void` | No | — | Callback for when the confirm button is pressed. |
 | `onRequestClose` | `() => void` | No | — | Callback for whenever a user's action should close the modal. |
 | `open` | `boolean` | No | `false` | Controls if the modal is open or not. |
-| `ref` | `Ref<ConfirmationModalRef>` | 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` (... |
 | `size` | `"small" | "large"` | No | — | Size of the modal (small, large), |
 | `title` | `string` | No | — | Title for the modal. |
 | `variation` | `"work" | "destructive"` | No | `work` | Type (Work or destructive) for confirm button. |

package/dist/docs/Content/Content.md

@@ -60,5 +60,5 @@ UNSAFE_style: {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `spacing` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | `base` | The amount of vertical spacing between the children |
-| `type` | `"section" | "aside" | "header" | "footer" | "article" | "main" | "div"` | No | `div` | Change the wrapping element to be one of the available semantic tags. |
+| `spacing` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant"` | No | `base` | The amount of vertical spacing between the children |
+| `type` | `"div" | "section" | "article" | "aside" | "main" | "header" | "footer"` | No | `div` | Change the wrapping element to be one of the available semantic tags. |

package/dist/docs/ContentBlock/ContentBlock.md

@@ -125,8 +125,8 @@ export function ContentBlockWithGuttersExample(
 | `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |
 | `gutters` | `GapSpacing` | No | — | The amount of space between the content and the edges of the container. |
 | `id` | `string` | No | — | Standard HTML id attribute. |
-| `justify` | `"left" | "center" | "right"` | No | `left` | The justification of the content. |
-| `maxWidth` | `number | "xs" | "sm" | "md" | "lg" | "xl" | (string & {})` | No | `Breakpoints.smaller` | The maximum width of the centered content. |
+| `justify` | `"center" | "left" | "right"` | No | `left` | The justification of the content. |
+| `maxWidth` | `number | (string & {}) | "xs" | "sm" | "md" | "lg" | "xl"` | No | `Breakpoints.smaller` | The maximum width of the centered content. |
 | `role` | `AriaRole` | No | — | Standard HTML role attribute. |
 | `UNSAFE_className` | `{ container?: 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` | `{ container?: 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/DataList/DataList.md

@@ -520,7 +520,7 @@ objects that will define the sorting options for the column.
 | `headers` | `DataListHeader<T>` | Yes | — | The header of the DataList. The object keys are determined by the keys in the data. |
 | `filtered` | `boolean` | No | — | Adjusts the DataList to show the UX when it is filtered. |
 | `headerVisibility` | `{ xs?: boolean; sm?: boolean; md?: boolean; lg?: boolean; xl?: boolean; }` | No | `{ xs: true, sm: true, md: true, lg: true, xl: true }` | Determine if the header is visible at a given breakpoint. If one isn't provided, it will use the value from the next ... |
-| `loadingState` | `"initial" | "filtering" | "loadingMore" | "none"` | No | — | Set the loading state of the DataList. There are a few guidelines on when to use what.  - `"initial"` - loading the f... |
+| `loadingState` | `"initial" | "none" | "filtering" | "loadingMore"` | No | — | Set the loading state of the DataList. There are a few guidelines on when to use what.  - `"initial"` - loading the f... |
 | `onLoadMore` | `() => void` | No | — | The callback function when the user scrolls to the bottom of the list. |
 | `onSelect` | `(selected: DataListSelectedType<T["id"]>) => void` | No | — | Callback when an item checkbox is clicked. |
 | `onSelectAll` | `(selected: DataListSelectedType<T["id"]>) => void` | No | — | Callback when the select all checkbox is clicked. |
@@ -534,7 +534,7 @@ objects that will define the sorting options for the column.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `message` | `string` | Yes | — | The message that shows when the DataList is empty. |
-| `action` | `ReactElement<{ external?: never; onClick?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly id?: string; readonly variation?: ButtonVariation; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }, string | JSXElementConstructor<...>>` | No | — | The action that shows when the DataList is empty.  This only accepts a Button component. Adding a non-Button componen... |
+| `action` | `ReactElement<{ 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 ... | { ...; }, string | JSXElementConstructor<...>>` | No | — | The action that shows when the DataList is empty.  This only accepts a Button component. Adding a non-Button componen... |
 | `customRender` | `(emptyState: Omit<DataListEmptyStateProps, "customRender">) => ReactNode` | No | — | Custom render function for the empty state.  If provided, this function will be used to render the empty state instea... |
 | `type` | `"filtered" | "empty"` | No | — | Determine the type of empty state to show.  By default, it will show the "empty" state when there is no data. If you ... |
 

package/dist/docs/Divider/Divider.md

@@ -80,7 +80,7 @@ through inline styles.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `direction` | `"horizontal" | "vertical"` | No | `horizontal` | The direction of the divider |
-| `size` | `"base" | "large" | "larger" | "largest"` | No | `base` | The weight of the divider. |
+| `size` | `"large" | "base" | "larger" | "largest"` | No | `base` | The weight of the divider. |
 | `testID` | `string` | No | — | A reference to the element in the rendered output |
 | `UNSAFE_className` | `{ readonly container?: string; }` | No | — | **Use at your own risk:** Custom classNames for specific elements. This should only be used as a **last resort**. Usi... |
 | `UNSAFE_style` | `{ readonly container?: 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/Emphasis/Emphasis.md

@@ -72,4 +72,4 @@ export function EmphasisHighlightExample() {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `variation` | `"bold" | "italic" | "highlight"` | Yes | — |  |
+| `variation` | `"bold" | "highlight" | "italic"` | Yes | — |  |

package/dist/docs/Flex/Flex.md

@@ -33,6 +33,6 @@ one-directional layout.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `template` | `ColumnKeys[]` | Yes | — | Determine how the children gets laid out  **Supported keys** - `"grow"` - Grows to the space available. If all childr... |
-| `align` | `"start" | "end" | "center"` | No | `center` | Adjusts the alignment of the Flex children. |
+| `align` | `"center" | "end" | "start"` | No | `center` | Adjusts the alignment of the Flex children. |
 | `direction` | `Direction` | No | `row` | The direction of the content. |
-| `gap` | `"none" | "minuscule" | "smallest" | "smaller" | "small" | "slim" | "base" | "large" | "larger" | "largest" | "extravagant"` | No | `base` | The spacing between the children. |
+| `gap` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant" | "none"` | No | `base` | The spacing between the children. |

package/dist/docs/Form/Form.md

@@ -103,4 +103,4 @@ message to screen-readers and set focus to the impacted portion of the Form.
 |------|------|----------|---------|-------------|
 | `onStateChange` | `(formState: { isDirty: boolean; isValid: boolean; }) => void` | No | — |  |
 | `onSubmit` | `() => void` | No | — | Callback for when the form has been sucessfully submitted. |
-| `ref` | `Ref<FormRef>` | 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` (... |

package/dist/docs/FormField/FormField.md

@@ -85,7 +85,7 @@ export function SpecialInput(props) {
 | `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
 | `toolbar` | `ReactNode` | No | — | Toolbar to render content below the input. |
-| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Determines the visibility of the toolbar. |
+| `toolbarVisibility` | `"while-editing" | "always"` | No | — | Determines the visibility of the toolbar. |
 | `type` | `FormFieldTypes` | No | — | Determines what kind of form field should the component give you. |
 | `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
 | `value` | `string | number | Date` | No | — | Set the component to the given value. |

package/dist/docs/FormatFile/FormatFile.md

@@ -32,7 +32,7 @@ image, while expanded is used to display a file alongside its metadata.
 |------|------|----------|---------|-------------|
 | `file` | `FileUpload` | Yes | — | File upload details object. (See FileUpload type.) |
 | `display` | `"expanded" | "compact"` | No | `expanded` | To display as either a file row or thumbnail |
-| `displaySize` | `"base" | "large"` | No | `base` | The base dimensions of the thumbnail |
+| `displaySize` | `"large" | "base"` | No | `base` | The base dimensions of the thumbnail |
 | `onClick` | `(event: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void` | No | — | Function to execute when format file is clicked |
 | `onDelete` | `() => void` | No | — | onDelete callback - this function will be called when the delete action is triggered |
 
@@ -65,7 +65,7 @@ image, while expanded is used to display a file alongside its metadata.
 | `className` | `string` | No | — |  |
 | `onClick` | `MouseEventHandler<HTMLButtonElement | HTMLDivElement>` | No | — |  |
 | `tabIndex` | `number` | No | — |  |
-| `type` | `"button" | "submit" | "reset"` | No | — |  |
+| `type` | `"submit" | "button" | "reset"` | No | — |  |
 
 #### FormatFile.Expanded
 

package/dist/docs/Gallery/Gallery.md

@@ -36,4 +36,4 @@ will also slightly dim a particular thumbnail when the cursor hovers over it.
 | `files` | `GalleryFile[]` | Yes | — | The files for the Gallery to display |
 | `max` | `number` | No | — | The max number of thumbnails before no more thumbnails are displayed unless the user clicks an action to display the ... |
 | `onDelete` | `(file: GalleryFile) => void` | No | — | onDelete callback - this function will be called when the delete action is triggered on a Gallery image |
-| `size` | `"base" | "large"` | No | `base` | The size of the files and their spacing in the gallery |
+| `size` | `"large" | "base"` | No | `base` | The size of the files and their spacing in the gallery |

package/dist/docs/Glimmer/Glimmer.md

@@ -141,7 +141,7 @@ export function GlimmerSemanticBlocksExample() {
 |------|------|----------|---------|-------------|
 | `reverseTheme` | `boolean` | No | `false` | Use on surfaces with dark backgrounds. |
 | `shape` | `"circle" | "rectangle" | "rectangleShort" | "rectangleShorter" | "square"` | No | `rectangle` | Sets the shape of the glimmer.  If you need a specific width, use the `width` prop. |
-| `size` | `"base" | "auto" | "large" | "larger" | "largest" | "small"` | No | `base` | Sets the size of the glimmer.  If you use `"auto"` with a `"rectangle"` shape, it will fill the size of the parents w... |
+| `size` | `"small" | "large" | "base" | "larger" | "largest" | "auto"` | No | `base` | Sets the size of the glimmer.  If you use `"auto"` with a `"rectangle"` shape, it will fill the size of the parents w... |
 | `timing` | `"base" | "fast"` | No | `base` | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
 | `width` | `number` | No | — | Adjust the width of the glimmer in px values. |
 
@@ -149,7 +149,7 @@ export function GlimmerSemanticBlocksExample() {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `level` | `1 | 2 | 3 | 4 | 5` | No | `3` | Adjust the size of the `Glimmer.Header`. |
+| `level` | `1 | 2 | 5 | 3 | 4` | No | `3` | Adjust the size of the `Glimmer.Header`. |
 | `reverseTheme` | `boolean` | No | — | Use on surfaces with dark backgrounds. |
 | `timing` | `"base" | "fast"` | No | — | Control how fast the shine moves from left to right. This is useful when the glimmer is used on smaller spaces. |
 | `width` | `number` | No | — | Adjust the width of the glimmer in px values. |

package/dist/docs/Grid/Grid.md

@@ -67,7 +67,7 @@ instead.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `children` | `ReactNode` | Yes | — | `Grid.Cell` children |
-| `alignItems` | `"center" | "end" | "start" | "stretch"` | No | `start` | Adjust the alignment of columns. We only support a few select properties from `align-items` due to the nature of the ... |
+| `alignItems` | `"stretch" | "center" | "end" | "start"` | No | `start` | Adjust the alignment of columns. We only support a few select properties from `align-items` due to the nature of the ... |
 | `gap` | `boolean | GapSpacing` | No | `true` | Add spacing between elements. Can be a boolean for default spacing, or a semantic token for custom spacing. @deprecat... |
 
 #### Grid.Cell

package/dist/docs/Heading/Heading.md

@@ -122,9 +122,9 @@ Use `UNSAFE_style` to apply inline custom styles to the Heading component.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `element` | `"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"` | No | — | Allows overriding of the element rendered. Defaults to the heading specified with level. |
+| `element` | `"span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"` | No | — | Allows overriding of the element rendered. Defaults to the heading specified with level. |
 | `id` | `string` | No | — | Adds a unique identifier to the heading. Useful when the heading needs to be referenced by another element. Not inten... |
 | `level` | `HeadingLevel` | No | `5` |  |
-| `maxLines` | `"single" | "small" | "base" | "large" | "larger" | "unlimited"` | No | `unlimited` | The maximum amount of lines the text can occupy before being truncated with "...". Uses predefined string values that... |
+| `maxLines` | `"small" | "large" | "base" | "larger" | "single" | "unlimited"` | No | `unlimited` | The maximum amount of lines the text can occupy before being truncated with "...". Uses predefined string values that... |
 | `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... |
 | `UNSAFE_style` | `{ textStyle?: CSSProperties; }` | No | — | **Use at your own risk:** Custom styles for specific elements. This should only be used as a **last resort**. Using t... |

package/dist/docs/Icon/Icon.md

@@ -580,9 +580,9 @@ necessary.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"task" | "text" | "warning" | "icon" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | "navy" | "orange" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `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. |
-| `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/InlineLabel/InlineLabel.md

@@ -141,4 +141,4 @@ export function InlineLabelSizesExample() {
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `color` | `InlineLabelColors` | No | `greyBlue` | The color of the label |
-| `size` | `"small" | "base" | "large" | "larger"` | No | `base` | The size of the label |
+| `size` | `"small" | "large" | "base" | "larger"` | No | `base` | The size of the label |

package/dist/docs/InputDate/InputDate.md

@@ -116,7 +116,7 @@ at the root of the application, populated with the applicable value.
 | `onChange` | `(newValue: Date, event?: ChangeEvent<HTMLInputElement>) => void` | Yes | — | Callback for value changes. @param newValue - The new Date value @param event - Optional change event |
 | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
 | `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
-| `aria-autocomplete` | `"inline" | "none" | "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... |
@@ -132,7 +132,7 @@ at the root of the application, populated with the applicable value.
 | `error` | `string` | No | — | Error message to display. This also highlights the field red. |
 | `id` | `string` | No | — | The unique identifier for the input element. |
 | `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
-| `inputMode` | `"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"` | No | — | Input mode hint for virtual keyboards. |
+| `inputMode` | `"email" | "search" | "text" | "url" | "none" | "tel" | "numeric" | "decimal"` | No | — | Input mode hint for virtual keyboards. |
 | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
 | `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
 | `maxDate` | `Date` | No | — | The maximum selectable date. |
@@ -146,7 +146,7 @@ at the root of the application, populated with the applicable value.
 | `pattern` | `string` | No | — | Validation pattern (regex) for the input. |
 | `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
 | `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
-| `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` (... |
 | `required` | `boolean` | No | — | Whether the input is required before form submission. |
 | `role` | `string` | No | — | Role attribute for accessibility. |
 | `showIcon` | `boolean` | No | `true` | Whether to show the calendar icon |

package/dist/docs/InputFile/InputFile.md

@@ -359,7 +359,7 @@ function CustomUploadContent() {
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `getUploadParams` | `(file: File) => UploadParams | Promise<UploadParams>` | Yes | — | A callback that receives a file object and returns a `UploadParams` needed to upload the file.  More info is availabl... |
-| `allowedTypes` | `"all" | "images" | "basicImages" | string[]` | No | `all` | Allowed File types. @param  "images" - only accepts all types of image @param  "basicImages" - only accepts png, jpg ... |
+| `allowedTypes` | `"all" | string[] | "images" | "basicImages"` | No | `all` | Allowed File types. @param  "images" - only accepts all types of image @param  "basicImages" - only accepts png, jpg ... |
 | `allowMultiple` | `boolean` | No | `false` | Allow for multiple files to be selected for upload. |
 | `buttonLabel` | `string` | No | `Automatic` | Label for the InputFile's button. |
 | `children` | `ReactNode` | No | — | Children will be rendered instead of the default content |
@@ -373,7 +373,7 @@ function CustomUploadContent() {
 | `onUploadStart` | `(file: FileUpload) => void` | No | — | Upload event handler. Triggered on upload start. |
 | `size` | `"small" | "base"` | No | `base` | Size of the InputFile |
 | `validator` | `<T extends File>(file: T) => FileError | FileError[]` | No | — | Pass a custom validator function that will be called when a file is dropped. |
-| `variation` | `"dropzone" | "button"` | No | `dropzone` | Display variation. |
+| `variation` | `"button" | "dropzone"` | No | `dropzone` | Display variation. |
 
 #### InputFile.Button
 
@@ -404,22 +404,22 @@ function CustomUploadContent() {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `align` | `"start" | "center" | "end"` | No | — |  |
+| `align` | `"center" | "end" | "start"` | No | — |  |
 | `element` | `TextElement` | No | `"p"` | The HTML element to render the text as. |
-| `maxLines` | `"small" | "base" | "large" | "single" | "larger" | "unlimited"` | No | — |  |
-| `size` | `"small" | "base" | "large"` | No | `small` |  |
+| `maxLines` | `"small" | "large" | "base" | "larger" | "single" | "unlimited"` | No | — |  |
+| `size` | `"small" | "large" | "base"` | No | `small` |  |
 | `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... |
 | `UNSAFE_style` | `{ textStyle?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
-| `variation` | `"disabled" | "info" | "default" | "subdued" | "success" | "error" | "warn"` | No | `subdued` |  |
+| `variation` | `"info" | "disabled" | "success" | "error" | "default" | "subdued" | "warn"` | No | `subdued` |  |
 
 #### InputFile.HintText
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `align` | `"start" | "center" | "end"` | No | — |  |
+| `align` | `"center" | "end" | "start"` | No | — |  |
 | `element` | `TextElement` | No | `"p"` | The HTML element to render the text as. |
-| `maxLines` | `"small" | "base" | "large" | "single" | "larger" | "unlimited"` | No | — |  |
-| `size` | `"small" | "base" | "large"` | No | `small` |  |
+| `maxLines` | `"small" | "large" | "base" | "larger" | "single" | "unlimited"` | No | — |  |
+| `size` | `"small" | "large" | "base"` | No | `small` |  |
 | `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... |
 | `UNSAFE_style` | `{ textStyle?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
-| `variation` | `"disabled" | "info" | "default" | "subdued" | "success" | "error" | "warn"` | No | — |  |
+| `variation` | `"info" | "disabled" | "success" | "error" | "default" | "subdued" | "warn"` | No | — |  |

package/dist/docs/InputNumber/InputNumber.md

@@ -58,7 +58,7 @@ For more details about `validation` using `Input` components, see the
 | `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
 | `readonly` | `boolean` | No | — | Prevents users from editing the value. |
-| `ref` | `Ref<InputNumberRef>` | 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` (... |
 | `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
 | `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |

package/dist/docs/Menu/Menu.md

@@ -308,4 +308,4 @@ through inline styles.
 | `open` | `boolean` | No | — |  |
 | `style` | `CSSProperties` | No | — |  |
 | `UNSAFE_className` | `string | { menu?: string; header?: string; action?: 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` | `{ menu?: CSSProperties; header?: CSSProperties; action?: CSSProperties; } | CSSProperties` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
+| `UNSAFE_style` | `CSSProperties | { menu?: CSSProperties; header?: CSSProperties; action?: 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/Modal/Modal.md

@@ -290,9 +290,9 @@ screen.getByRole("dialog", { name: /Billing Settings/i });
 | `dismissible` | `boolean` | No | `true` |  |
 | `onRequestClose` | `() => void` | No | — |  |
 | `open` | `boolean` | No | `false` |  |
-| `primaryAction` | `{ external?: never; onClick?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly variation?: ButtonVariation; ... 18 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
-| `secondaryAction` | `{ external?: never; onClick?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly variation?: ButtonVariation; ... 18 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
-| `size` | `"fullScreen" | "large" | "small"` | No | — |  |
-| `tertiaryAction` | `{ external?: never; onClick?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly variation?: ButtonVariation; ... 18 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
+| `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 | — |  |
+| `secondaryAction` | `{ 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 | — |  |
+| `size` | `"small" | "large" | "fullScreen"` | No | — |  |
+| `tertiaryAction` | `{ 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 | — |  |
 | `title` | `string` | No | `false` |  |
 | `version` | `1` | No | — |  |

package/dist/docs/Popover/Popover.md

@@ -261,7 +261,7 @@ If you're using Popover with its composable subcomponents, you'll need to pass
 | `children` | `ReactNode` | Yes | — | Popover content. |
 | `open` | `boolean` | Yes | — | Control Popover visibility. |
 | `onRequestClose` | `() => void` | No | — | Callback executed when the user wants to close/dismiss the Popover |
-| `preferredPlacement` | `"top" | "bottom" | "left" | "right" | "auto"` | No | `auto` | Describes the preferred placement of the Popover. |
+| `preferredPlacement` | `"auto" | "left" | "right" | "top" | "bottom"` | No | `auto` | Describes the preferred placement of the Popover. |
 | `UNSAFE_className` | `{ container?: string; dismissButtonContainer?: string; arrow?: 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` | `{ container?: CSSProperties; dismissButtonContainer?: CSSProperties; arrow?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
 
@@ -271,7 +271,7 @@ If you're using Popover with its composable subcomponents, you'll need to pass
 |------|------|----------|---------|-------------|
 | `attachTo` | `Element | RefObject<Element>` | Yes | — | Element the Popover will attach to and point at. A `useRef` must be attached to an html element and passed as an atta... |
 | `open` | `boolean` | Yes | — | Control Popover visibility. |
-| `preferredPlacement` | `"top" | "bottom" | "left" | "right" | "auto"` | No | `auto` | Describes the preferred placement of the Popover. |
+| `preferredPlacement` | `"auto" | "left" | "right" | "top" | "bottom"` | No | `auto` | Describes the preferred placement of the Popover. |
 | `UNSAFE_className` | `{ container?: 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` | `{ container?: 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/ProgressBar/ProgressBar.md

@@ -30,7 +30,7 @@ An example where you might be better served using a Spinner:
 |------|------|----------|---------|-------------|
 | `currentStep` | `number` | Yes | — | The current step that the progress bar is on. |
 | `totalSteps` | `number` | Yes | — | The total steps to use. For percentages you can set this to 100. |
-| `size` | `"base" | "small" | "smaller"` | No | `base` | Set the size of the progress bar |
+| `size` | `"small" | "base" | "smaller"` | No | `base` | Set the size of the progress bar |
 | `UNSAFE_className` | `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` | `CSSProperties` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
 | `variation` | `"progress" | "stepped"` | No | `progress` | Set the variation of the progress bar |

package/dist/docs/RadioGroup/RadioGroup.md

@@ -26,5 +26,5 @@ do not contain text, an `aria-label` should be provided.
 | `ariaLabel` | `string` | Yes | — | Defines the aria label that describes the radio group. |
 | `onChange` | `(newValue: string | number) => void` | Yes | — | Change handler for the RadioGroup. @param newValue |
 | `value` | `string | number` | Yes | — | Defines the default value that will be pre-selected in the radio group. |
-| `direction` | `"vertical" | "horizontal"` | No | `vertical` | Layout direction for the options. |
+| `direction` | `"horizontal" | "vertical"` | No | `vertical` | Layout direction for the options. |
 | `name` | `string` | No | `useId()` | The name of the radio group, that links the radio options back up to the group. |

package/dist/docs/SegmentedControl/SegmentedControl.md

@@ -175,7 +175,7 @@ browser handles this behaviour automatically.
 | `name` | `string` | No | `useId()` | A unique name for the SegmentedControl, that links the group of options together. Can be a string or, if not set, wil... |
 | `onSelectValue` | `(value: T) => void` | No | — | A callback function that is called whenever the selected option changes. Use this prop with `selectedValue` for a con... |
 | `selectedValue` | `T` | No | — | The currently selected option. Use this prop with `onSelectValue` for a controlled component. |
-| `size` | `"small" | "base" | "large"` | No | `base` | Adjusts the size of the SegmentedControl. The default size is "base". |
+| `size` | `"small" | "large" | "base"` | No | `base` | Adjusts the size of the SegmentedControl. The default size is "base". |
 
 #### SegmentedControl.Option
 

package/dist/docs/Select/Select.md

@@ -198,7 +198,7 @@ dropdown content is stylable; the closed value alignment is not.
 |------|------|----------|---------|-------------|
 | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
 | `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
-| `aria-autocomplete` | `"inline" | "none" | "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... |
@@ -214,7 +214,7 @@ dropdown content is stylable; the closed value alignment is not.
 | `error` | `string` | No | — | Error message to display. This also highlights the field red. |
 | `id` | `string` | No | — | The unique identifier for the input element. |
 | `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
-| `inputMode` | `"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"` | No | — | Input mode hint for virtual keyboards. |
+| `inputMode` | `"email" | "search" | "text" | "url" | "none" | "tel" | "numeric" | "decimal"` | No | — | Input mode hint for virtual keyboards. |
 | `inputRef` | `Ref<HTMLSelectElement>` | No | — |  |
 | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
 | `loading` | `boolean` | No | — | Show a spinner to indicate loading. |

package/dist/docs/Stack/Stack.md

@@ -181,7 +181,7 @@ and screen reader compatibility.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `align` | `"start" | "center" | "end"` | No | — | The alignment of the stack. |
+| `align` | `"center" | "end" | "start"` | No | — | The alignment of the stack. |
 | `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
 | `as` | `CommonAllowedElements` | No | `div` | The HTML tag to render the container as. Defaults to `div`. |
 | `autoWidth` | `boolean` | No | `false` | Whether to allow the stack to take the width of the content. Defaults to 100% |
@@ -190,6 +190,6 @@ and screen reader compatibility.
 | `id` | `string` | No | — | Standard HTML id attribute. |
 | `recursive` | `boolean` | No | — | Whether to recursively apply the stack spacing to all the children, not just the top-level. |
 | `role` | `AriaRole` | No | — | Standard HTML role attribute. |
-| `splitAfter` | `1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15` | No | — | Setting this will push the stack down to the bottom of the parent container, after the number of children provided (1... |
+| `splitAfter` | `1 | 2 | 5 | 3 | 4 | 6 | 11 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15` | No | — | Setting this will push the stack down to the bottom of the parent container, after the number of children provided (1... |
 | `UNSAFE_className` | `{ container?: 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` | `{ container?: 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/StatusLabel/StatusLabel.md

@@ -115,5 +115,5 @@ the label should wrap.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `label` | `string` | Yes | — | Text to display |
-| `alignment` | `"start" | "end"` | No | `start` | Alignment of label |
+| `alignment` | `"end" | "start"` | No | `start` | Alignment of label |
 | `status` | `StatusIndicatorType` | No | `inactive` | Status color of the indicator beside text |

package/dist/docs/Text/Text.md

@@ -349,10 +349,10 @@ under the [Typography](../Typography/Typography.md) documentation.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `align` | `"start" | "center" | "end"` | No | `start` |  |
+| `align` | `"center" | "end" | "start"` | No | `start` |  |
 | `element` | `TextElement` | No | `p` | The HTML element to render the text as. |
-| `maxLines` | `"single" | "small" | "base" | "large" | "larger" | "unlimited"` | No | `unlimited` |  |
-| `size` | `"small" | "base" | "large"` | No | `base` |  |
+| `maxLines` | `"small" | "large" | "base" | "larger" | "single" | "unlimited"` | No | `unlimited` |  |
+| `size` | `"small" | "large" | "base"` | No | `base` |  |
 | `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... |
 | `UNSAFE_style` | `{ textStyle?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
-| `variation` | `"default" | "subdued" | "success" | "error" | "warn" | "info" | "disabled"` | No | `default` |  |
+| `variation` | `"info" | "disabled" | "success" | "error" | "default" | "subdued" | "warn"` | No | `default` |  |

package/dist/docs/Tiles/Tiles.md

@@ -176,7 +176,7 @@ The Tiles component:
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `align` | `"start" | "center" | "end"` | No | `start` | The vertical alignment  of the tiles within the container. |
+| `align` | `"center" | "end" | "start"` | No | `start` | The vertical alignment  of the tiles within the container. |
 | `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
 | `as` | `CommonAllowedElements` | No | `div` | The HTML tag to render the container as. Defaults to `div`. |
 | `autoWidth` | `boolean` | No | `false` | Whether to allow the tiles to take the width of the content. Defaults to 100% |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.9.0",
+  "version": "7.10.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "17a48b8f879afe6571af0e2a4065178ddefd7084"
+  "gitHead": "348d1293520051687a9b2d178cf4c5757136e9bf"
 }