@jobber/components 7.11.1 → 7.11.3

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/dist/floating-ui.react-es.js

@@ -3233,4 +3233,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useListNavigation as g, useRole as h, FloatingFocusManager as i, FloatingOverlay as j, useClick as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };
+export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useRole as g, FloatingFocusManager as h, FloatingOverlay as i, useListNavigation as j, useClick as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };

package/dist/styles.css

@@ -3501,7 +3501,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   outline: none;
 }
 
-.QInUBKqkrl0- {
+.atokGnmWVls- {
   display: grid;
   max-height: inherit;
   grid-template-columns: auto 1fr auto;
@@ -3521,7 +3521,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   padding-bottom: var(--menu-space);
 }
 
-.bWR8m7-LKg4- {
+.zSMkwrZodBk- {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1 / -1;
@@ -3532,8 +3532,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--menu-item-gap);
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="icon"],
-.bWR8m7-LKg4- > [data-menu-slot="prefix"] {
+.zSMkwrZodBk- > [data-menu-slot="icon"],
+.zSMkwrZodBk- > [data-menu-slot="prefix"] {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -3543,18 +3543,18 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   grid-row-start: 1;
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="label"] {
+.zSMkwrZodBk- > [data-menu-slot="label"] {
   grid-column-start: 2;
   width: 100%;
   min-width: 0;
   justify-self: start;
 }
 
-.fzLvI88EH3s- > [data-menu-slot="label"] {
+.qbDWOwkPouM- > [data-menu-slot="label"] {
   grid-column: 1 / 3;
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="suffix"] {
+.zSMkwrZodBk- > [data-menu-slot="suffix"] {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -3568,11 +3568,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   min-width: calc(var(--base-unit) * 1.5);
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="suffix"][data-unchecked] {
+.zSMkwrZodBk- > [data-menu-slot="suffix"][data-unchecked] {
   visibility: hidden;
 }
 
-.PH5vvtLgvXI-,
+._353OIWGazfE-,
 .Q0ssxff-Qo4- {
   display: grid;
   grid-template-columns: subgrid;
@@ -3580,25 +3580,25 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   grid-column-start: 1;
 }
 
-._2hYsKO-OHAI- {
+._2VyPM45lQBE- {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1 / -1;
   grid-column-start: 1;
 }
 
-.QInUBKqkrl0- .PH5vvtLgvXI-:not(:first-child),
-.QInUBKqkrl0- .Q0ssxff-Qo4-:not(:first-child) {
+.atokGnmWVls- ._353OIWGazfE-:not(:first-child),
+.atokGnmWVls- .Q0ssxff-Qo4-:not(:first-child) {
   margin-top: 8px;
   margin-top: var(--space-small);
 }
 
-.QInUBKqkrl0- .jnggqK3YTIU- + .PH5vvtLgvXI-,
-.QInUBKqkrl0- .jnggqK3YTIU- + .Q0ssxff-Qo4- {
+.atokGnmWVls- .jnggqK3YTIU- + ._353OIWGazfE-,
+.atokGnmWVls- .jnggqK3YTIU- + .Q0ssxff-Qo4- {
   margin-top: 0;
 }
 
-.iJjIifpa9bk-,
+.efA-ozx9w0w-,
 .BklkzNPbJ5Q- {
   grid-column: 1 / -1;
   grid-column-start: 1;
@@ -3668,7 +3668,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   -webkit-tap-highlight-color: transparent;
 }
 
-.fzLvI88EH3s- {
+.qbDWOwkPouM- {
   --menu-item-padding-right: var(--space-smaller);
 }
 

package/dist/utils/mergeUnsafeProps.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from "react";
+export interface UnsafeProps {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly UNSAFE_className?: string;
+    readonly UNSAFE_style?: CSSProperties;
+}
+export declare function mergeUnsafeProps(props: UnsafeProps): Pick<UnsafeProps, "className" | "style">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.11.1",
+  "version": "7.11.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "fc0926142d58292477038a22f8ca9608997461e5"
+  "gitHead": "1adc75fc6e71cd2166f7c5b497dad8d0c095f35b"
 }