@jobber/components 7.11.0 → 7.11.2

package/dist/docs/InputText/InputText.md

@@ -287,17 +287,17 @@ they will not do anything.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
-| `autocomplete` | `boolean | AutocompleteTypes` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
+| `autocomplete` | `AutocompleteTypes | boolean` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
 | `autofocus` | `boolean` | No | — | Determines if the input should be auto-focused, using the HTML attribute |
 | `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
-| `defaultValue` | `string | Date` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
+| `defaultValue` | `Date | string` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
 | `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
 | `disabled` | `boolean` | No | — | Disable the input |
 | `id` | `string` | No | — | A unique identifier for the input. |
 | `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
 | `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
 | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
-| `keyboard` | `"numeric" | "decimal"` | No | — | Determines what kind of keyboard appears on mobile web. |
+| `keyboard` | `"decimal" | "numeric"` | No | — | Determines what kind of keyboard appears on mobile web. |
 | `loading` | `boolean` | No | — | Show a spinner to indicate loading |
 | `maxLength` | `number` | No | — | Maximum character length for an input. This also changes the width to roughly the same size as the max length. This i... |
 | `multiline` | `boolean` | No | — | Use this when you're expecting a long answer. |
@@ -311,12 +311,12 @@ they will not do anything.
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
 | `readonly` | `boolean` | No | — | Prevents users from editing the value. |
 | `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
-| `rows` | `number | RowRange` | No | — | Specifies the visible height of a long answer form field. Can be in the form of a single number to set a static heigh... |
+| `rows` | `RowRange | number` | No | — | Specifies the visible height of a long answer form field. Can be in the form of a single number to set a static heigh... |
 | `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. |
+| `size` | `"large" | "small"` | 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` | `"while-editing" | "always"` | No | — | Determines the visibility of the toolbar. |
+| `toolbarVisibility` | `"always" | "while-editing"` | No | — | Determines the visibility of the toolbar. |
 | `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. |
+| `value` | `Date | number | string` | No | — | Set the component to the given value. |
 | `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |

package/dist/docs/InputTime/InputTime.md

@@ -41,7 +41,7 @@ to type `10`, `11`, or `12`.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
-| `autocomplete` | `boolean | AutocompleteTypes` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
+| `autocomplete` | `AutocompleteTypes | boolean` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
 | `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
 | `defaultValue` | `Date` | No | — | Intial value of the input. Only use this when you need to prepopulate the field with a data that is not controlled by... |
 | `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
@@ -62,6 +62,6 @@ to type `10`, `11`, or `12`.
 | `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
 | `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 | — | Prevents users from editing the value. |
-| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
+| `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
 | `value` | `Date` | No | — | Set the component to the given value. |

package/dist/docs/LightBox/LightBox.md

@@ -182,28 +182,18 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 | `boxSizing` | `BoxSizing` | No | `"content-box"` | Sets the box-sizing for the thumbnails in the lightbox. This is a solution for a problem where tailwind was setting t... |
 | `imageIndex` | `number` | No | — | Use this to specify which image in `images` to initialize the lightbox with. This is useful when you have a collectio... |
 
-#### LightBox.Provider
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `images` | `PresentedImage[]` | Yes | — | Images is an array of objects defining a LightBox image. This object consists of `title`, `caption`, `alt` and `url`.... |
-| `boxSizing` | `BoxSizing` | No | `content-box` | Sets the box-sizing for the thumbnails in the lightbox. This is a solution for a problem where tailwind was setting t... |
-| `imageIndex` | `number` | No | `0` | Use this to specify which image in `images` to initialize the lightbox with. This is useful when you have a collectio... |
-| `onImageChange` | `(index: number) => void` | No | — | Callback function that is invoked whenever the current image index changes. This includes when the user navigates to ... |
-| `onRequestClose` | `(options: RequestCloseOptions) => void` | No | — | This function must set open to false in order to close the lightbox. Note there is a 300ms easing animation on lightb... |
-| `open` | `boolean` | No | `true` | Specify if the Lightbox is open or closed. |
-
 #### LightBox.Background
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `className` | `string` | No | — |  |
 
-#### LightBox.Overlay
+#### LightBox.Navigation
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `className` | `string` | No | — |  |
+| `nextButtonClassName` | `string` | No | — | The class name to apply to the next button wrapper. |
+| `prevButtonClassName` | `string` | No | — | The class name to apply to the previous button wrapper. |
 
 #### LightBox.OpenInNewTabAction
 
@@ -211,15 +201,25 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 |------|------|----------|---------|-------------|
 | `ariaLabel` | `string` | No | `Open image in new tab` | Accessible label for the action, also used as the tooltip message. |
 
-#### LightBox.Slides
+#### LightBox.Overlay
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `className` | `string` | No | — |  |
 
-#### LightBox.Navigation
+#### LightBox.Provider
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `nextButtonClassName` | `string` | No | — | The class name to apply to the next button wrapper. |
-| `prevButtonClassName` | `string` | No | — | The class name to apply to the previous button wrapper. |
+| `images` | `PresentedImage[]` | Yes | — | Images is an array of objects defining a LightBox image. This object consists of `title`, `caption`, `alt` and `url`.... |
+| `boxSizing` | `BoxSizing` | No | `content-box` | Sets the box-sizing for the thumbnails in the lightbox. This is a solution for a problem where tailwind was setting t... |
+| `imageIndex` | `number` | No | `0` | Use this to specify which image in `images` to initialize the lightbox with. This is useful when you have a collectio... |
+| `onImageChange` | `(index: number) => void` | No | — | Callback function that is invoked whenever the current image index changes. This includes when the user navigates to ... |
+| `onRequestClose` | `(options: RequestCloseOptions) => void` | No | — | This function must set open to false in order to close the lightbox. Note there is a 300ms easing animation on lightb... |
+| `open` | `boolean` | No | `true` | Specify if the Lightbox is open or closed. |
+
+#### LightBox.Slides
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |

package/dist/docs/Menu/Menu.md

@@ -458,6 +458,8 @@ through inline styles.
 
 ### Web
 
+#### Menu
+
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `items` | `SectionProps[]` | Yes | — | Collection of action items. |
@@ -469,3 +471,123 @@ through inline styles.
 | `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` | `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... |
+
+#### Menu.Content
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `preferredPlacement` | `Placement` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.Group
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | — |  |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.GroupLabel
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.Header
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.ItemIcon
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `name` | `IconNames` | Yes | — | The icon to show. |
+| `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` | `"base" | "large" | "small"` | 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... |
+
+#### Menu.ItemPrefix
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.ItemSuffix
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.RadioGroup
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `defaultValue` | `string` | No | — |  |
+| `onValueChange` | `(value: string) => void` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `value` | `string` | No | — |  |
+
+#### Menu.Section
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | — |  |
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.Separator
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.Submenu
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `defaultOpen` | `boolean` | No | — |  |
+| `onOpenChange` | `(isOpen: boolean) => void` | No | — |  |
+| `open` | `boolean` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |
+
+#### Menu.SubmenuContent
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | @deprecated Use `className` instead. This is kept for backward compatibility on the composable Menu pieces. |
+| `UNSAFE_style` | `CSSProperties` | No | — | @deprecated Use `style` instead. This is kept for backward compatibility on the composable Menu pieces. |

package/dist/docs/Modal/Modal.md

@@ -292,7 +292,7 @@ screen.getByRole("dialog", { name: /Billing Settings/i });
 | `open` | `boolean` | No | `false` |  |
 | `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 | — |  |
+| `size` | `"fullScreen" | "large" | "small"` | 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/MultiSelect/MultiSelect.md

@@ -50,4 +50,4 @@ Features and behavior are announced to the user when using a screen reader.
 | `defaultLabel` | `string` | Yes | — | The label to be displayed by default when no options are selected |
 | `onOptionsChange` | `Dispatch<SetStateAction<Options>>` | Yes | — | Change handler |
 | `options` | `Options` | Yes | — | List of options to be checked |
-| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
+| `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |

package/dist/docs/Page/Page.md

@@ -313,7 +313,13 @@ composable actions, this is the simplest way to use Page:
 | `secondaryAction` | `ButtonActionProps` | No | — | Page title secondary action button settings. |
 | `subtitle` | `string` | No | — | Subtitle of the page. |
 | `titleMetaData` | `ReactNode` | No | — | TitleMetaData component to be displayed next to the title. Only compatible with string titles. |
-| `width` | `"fill" | "standard" | "narrow"` | No | `standard` | Determines the width of the page.  Fill makes the width grow to 100%.  Standard caps out at 1280px.  Narrow caps out ... |
+| `width` | `"fill" | "narrow" | "standard"` | No | `standard` | Determines the width of the page.  Fill makes the width grow to 100%.  Standard caps out at 1280px.  Narrow caps out ... |
+
+#### Page.ActionMenu
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ref` | `RefObject<HTMLDivElement>` | No | — |  |
 
 #### Page.ActionPrimary
 
@@ -327,11 +333,11 @@ composable actions, this is the simplest way to use Page:
 |------|------|----------|---------|-------------|
 | `ref` | `RefObject<HTMLDivElement>` | No | — |  |
 
-#### Page.ActionMenu
+#### Page.Menu
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `ref` | `RefObject<HTMLDivElement>` | No | — |  |
+| `triggerLabel` | `string` | No | `More Actions` |  |
 
 #### Page.PrimaryButton
 
@@ -356,9 +362,3 @@ composable actions, this is the simplest way to use Page:
 | `loading` | `boolean` | No | — |  |
 | `onClick` | `() => void` | No | — |  |
 | `ref` | `RefObject<HTMLDivElement>` | No | — |  |
-
-#### Page.Menu
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `triggerLabel` | `string` | No | `More Actions` |  |

package/dist/docs/Popover/Popover.md

@@ -261,20 +261,10 @@ 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` | `"auto" | "left" | "right" | "top" | "bottom"` | No | `auto` | Describes the preferred placement of the Popover. |
+| `preferredPlacement` | `"auto" | "bottom" | "left" | "right" | "top"` | 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... |
 
-#### Popover.Provider
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `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` | `"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... |
-
 #### Popover.Arrow
 
 | Prop | Type | Required | Default | Description |
@@ -290,3 +280,13 @@ If you're using Popover with its composable subcomponents, you'll need to pass
 | `onClick` | `(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void` | No | — |  |
 | `UNSAFE_className` | `{ dismissButtonContainer?: 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` | `{ dismissButtonContainer?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |
+
+#### Popover.Provider
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `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` | `"auto" | "bottom" | "left" | "right" | "top"` | 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` | `"small" | "base" | "smaller"` | No | `base` | Set the size of the progress bar |
+| `size` | `"base" | "small" | "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

@@ -25,6 +25,6 @@ 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. |
+| `value` | `number | string` | Yes | — | Defines the default value that will be pre-selected in the radio group. |
 | `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,11 +175,11 @@ 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" | "large" | "base"` | No | `base` | Adjusts the size of the SegmentedControl. The default size is "base". |
+| `size` | `"base" | "large" | "small"` | No | `base` | Adjusts the size of the SegmentedControl. The default size is "base". |
 
 #### SegmentedControl.Option
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `value` | `string | number` | Yes | — | The unique value associated with this option. This value is used to determine which option is selected and is passed ... |
+| `value` | `number | string` | Yes | — | The unique value associated with this option. This value is used to determine which option is selected and is passed ... |
 | `ariaLabel` | `string` | No | — | An aria-label that describes the 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` | `"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-autocomplete` | `"both" | "inline" | "list" | "none"` | 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` | `"email" | "search" | "text" | "url" | "none" | "tel" | "numeric" | "decimal"` | No | — | Input mode hint for virtual keyboards. |
+| `inputMode` | `"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"` | 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. |
@@ -228,11 +228,11 @@ dropdown content is stylable; the closed value alignment is not.
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
 | `required` | `boolean` | No | — | Whether the input is required before form submission. |
 | `role` | `string` | No | — | Role attribute for accessibility. |
-| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
+| `size` | `"large" | "small"` | 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 |
 | `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
 | `UNSAFE_experimentalStyles` | `boolean` | No | — | Opt-in to the customizable select UI (Chromium 123+). When true, the component will apply the custom select styles De... |
-| `value` | `string | number` | No | — |  |
+| `value` | `number | string` | No | — |  |
 
 #### Select.Option
 

package/dist/docs/SideKick/SideKick.md

@@ -116,7 +116,7 @@ export function SideKickCustomWidthsExample() {
 | `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 sidekick to take the width of the content. Defaults to 100% |
-| `collapseBelow` | `"xs" | "sm" | "md" | "lg" | "xl"` | No | — | The breakpoint to collapse the sidekick at. |
+| `collapseBelow` | `"lg" | "md" | "sm" | "xl" | "xs"` | No | — | The breakpoint to collapse the sidekick at. |
 | `collapsed` | `boolean` | No | — | Force the sidekick to collapse. Use this when our breakpoints are not enough control. |
 | `contentMinWidth` | `string` | No | `50%` | The minimum width of the content. |
 | `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |

package/dist/docs/Spinner/Spinner.md

@@ -42,4 +42,4 @@ To indicate loading content in mobile applications, refer to
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `inline` | `boolean` | No | — | Spinner becomes an inline element when true, otherwise it is a block element |
-| `size` | `"small" | "base"` | No | `base` | Specifies the size of the spinner |
+| `size` | `"base" | "small"` | No | `base` | Specifies the size of the spinner |

package/dist/docs/Text/Text.md

@@ -351,8 +351,8 @@ under the [Typography](../Typography/Typography.md) documentation.
 |------|------|----------|---------|-------------|
 | `align` | `"center" | "end" | "start"` | No | `start` |  |
 | `element` | `TextElement` | No | `p` | The HTML element to render the text as. |
-| `maxLines` | `"small" | "large" | "base" | "larger" | "single" | "unlimited"` | No | `unlimited` |  |
-| `size` | `"small" | "large" | "base"` | No | `base` |  |
+| `maxLines` | `"base" | "large" | "larger" | "single" | "small" | "unlimited"` | No | `unlimited` |  |
+| `size` | `"base" | "large" | "small"` | 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` | `"info" | "disabled" | "success" | "error" | "default" | "subdued" | "warn"` | No | `default` |  |
+| `variation` | `"default" | "disabled" | "error" | "info" | "subdued" | "success" | "warn"` | No | `default` |  |

package/dist/docs/Toast/Toast.md

@@ -71,4 +71,4 @@ overloading too much detail for the user to parse at a quick glance.
 | `message` | `string` | Yes | — |  |
 | `action` | `() => void` | No | — | **Deprecated**: action will be removed in the next major version @deprecated |
 | `actionLabel` | `string` | No | — | **Deprecated**: actionLabel will be removed in the next major version @deprecated |
-| `variation` | `"info" | "success" | "error"` | No | `success` |  |
+| `variation` | `"error" | "info" | "success"` | No | `success` |  |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.11.0",
+  "version": "7.11.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "14ecce46591dca3705c736c86431ac5f9561e19f"
+  "gitHead": "af4bf90a9ac5663ff26d0cfad49e3761457e4646"
 }