@jobber/components 7.11.1 → 7.11.3

package/dist/docs/Banner/Banner.md

@@ -391,47 +391,6 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 | `onDismiss` | `() => void` | No | — | Callback to be called when the Banner is dismissed. |
 | `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
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `type` | `BannerType` | Yes | — | Sets the status-based theme of the Banner. |
-| `dismissButton` | `ReactNode` | No | `<Banner.DismissButton/>` | Dismiss button to be used for the Banner. If you want to remove the dismiss button, set to false. |
-| `icon` | `ReactNode` | No | `<Banner.Icon/>` | Icon to be used for the Banner. If you want to remove the icon, set to false. |
-| `onDismiss` | `() => void` | No | — | Callback to be called when the Banner is dismissed. |
-| `UNSAFE_className` | `{ readonly 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` | `{ 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... |
-| `visible` | `boolean` | No | — | When provided, Banner's visibility is controlled by this value. |
-
-#### Banner.Icon
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `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" | "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... |
-
-#### Banner.Content
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `UNSAFE_className` | `{ readonly 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` | `{ 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... |
-
-#### Banner.DismissButton
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `ariaLabel` | `string` | No | — |  |
-| `onClick` | `(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void` | No | — |  |
-| `UNSAFE_className` | `{ readonly 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` | `{ 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... |
-
 #### Banner.Action
 
 | Prop | Type | Required | Default | Description |
@@ -461,3 +420,44 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 | `url` | `string` | No | — | Used to create an 'href' on an anchor tag. |
 | `value` | `string` | No | — |  |
 | `variation` | `ButtonVariation` | No | — |  |
+
+#### Banner.Content
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `UNSAFE_className` | `{ readonly 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` | `{ 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... |
+
+#### Banner.DismissButton
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | — |  |
+| `onClick` | `(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void` | No | — |  |
+| `UNSAFE_className` | `{ readonly 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` | `{ 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... |
+
+#### Banner.Icon
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `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` | `"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` | `{ 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... |
+
+#### Banner.Provider
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `type` | `BannerType` | Yes | — | Sets the status-based theme of the Banner. |
+| `dismissButton` | `ReactNode` | No | `<Banner.DismissButton/>` | Dismiss button to be used for the Banner. If you want to remove the dismiss button, set to false. |
+| `icon` | `ReactNode` | No | `<Banner.Icon/>` | Icon to be used for the Banner. If you want to remove the icon, set to false. |
+| `onDismiss` | `() => void` | No | — | Callback to be called when the Banner is dismissed. |
+| `UNSAFE_className` | `{ readonly 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` | `{ 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... |
+| `visible` | `boolean` | No | — | When provided, Banner's visibility is controlled by this value. |

package/dist/docs/Box/Box.md

@@ -205,19 +205,19 @@ 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` |  |
+| `as` | `"article" | "aside" | "div" | "main" | "section" | "span"` | No | `div` |  |
 | `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` | `"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` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant"` | No | — |  |
+| `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | 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` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant" | BoxSpace` | No | — |  |
+| `margin` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest" | 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` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant" | BoxSpace` | No | — |  |
+| `padding` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest" | 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` | `"circle" | "small" | "large" | "base" | "larger"` | No | — |  |
+| `radius` | `"base" | "circle" | "large" | "larger" | "small"` | 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

@@ -930,29 +930,29 @@ export const styles = StyleSheet.create({
 | `value` | `string` | No | — |  |
 | `variation` | `ButtonVariation` | No | — |  |
 
+#### Button.Icon
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `name` | `IconNames` | Yes | — | The icon to show. |
+| `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... |
+
 #### Button.Label
 
 | 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` | `"span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "b" | "em" | "dd" | "dt" | "strong"` | No | `span` |  |
+| `element` | `"b" | "dd" | "dt" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "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" | "large" | "base" | "smaller" | "larger" | "largest" | "extravagant" | "jumbo"` | No | — |  |
-| `textCase` | `"none" | "capitalize" | "lowercase" | "uppercase"` | No | — |  |
+| `size` | `"base" | "extravagant" | "jumbo" | "large" | "larger" | "largest" | "small" | "smaller"` | No | — |  |
+| `textCase` | `"capitalize" | "lowercase" | "none" | "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... |
 | `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... |
-
-#### Button.Icon
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `name` | `IconNames` | Yes | — | The icon to show. |
-| `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/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` | `"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... |
@@ -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<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `ref` | `Ref<HTMLInputElement>` | 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,9 +369,9 @@ 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<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `ref` | `Ref<HTMLButtonElement | HTMLDivElement>` | 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. |
-| `value` | `string | number` | No | — | Will be passed to onClick, when the user clicks on this Chip. |
+| `value` | `number | string` | No | — | Will be passed to onClick, when the user clicks on this Chip. |
 | `variation` | `ChipVariations` | No | `base` | Button style variation. Does not affect functionality. |

package/dist/docs/Cluster/Cluster.md

@@ -219,16 +219,16 @@ equal spacing and consistent sizing.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `align` | `"stretch" | "center" | "end" | "start"` | No | — | The vertical alignment of the cluster elements. |
+| `align` | `"center" | "end" | "start" | "stretch"` | 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. |
-| `collapseBelow` | `"xs" | "sm" | "md" | "lg" | "xl"` | No | — | The breakpoint below which the cluster will collapse. |
+| `collapseBelow` | `"lg" | "md" | "sm" | "xl" | "xs"` | No | — | The breakpoint below which the cluster will collapse. |
 | `collapsed` | `boolean` | No | — | Force the cluster to collapse. Use this when our breakpoints are not enough control. |
 | `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` | `"space-around" | "space-between" | "center" | "end" | "start"` | No | — | The horizontal justification of the cluster elements. |
+| `justify` | `"center" | "end" | "space-around" | "space-between" | "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

@@ -275,7 +275,7 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `id` | `string | number` | Yes | — | A unique identifier for the option. |
+| `id` | `number | string` | 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, "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. |

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<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), |
+| `ref` | `Ref<ConfirmationModalRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `size` | `"large" | "small"` | 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. |
+| `variation` | `"destructive" | "work"` | 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` | `"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. |
+| `spacing` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | `base` | The amount of vertical spacing between the children |
+| `type` | `"article" | "aside" | "div" | "footer" | "header" | "main" | "section"` | No | `div` | Change the wrapping element to be one of the available semantic tags. |

package/dist/docs/Countdown/Countdown.md

@@ -42,7 +42,7 @@ decision on whether to show or hide the units.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `date` | `string | number | Date` | Yes | — | The date that is being counted down to. Value for date as a `string` should be in ISO 8601 format. |
+| `date` | `Date | number | string` | Yes | — | The date that is being counted down to. Value for date as a `string` should be in ISO 8601 format. |
 | `granularity` | `GranularityOptions` | No | `dhms` | Defines the time format presented (e.g., dhms will show days, hours, minutes, and seconds) |
 | `onComplete` | `() => void` | No | — | Callback when the countdown is done |
 | `showUnits` | `boolean` | No | — | Whether or not to present the unit of time to the user, or just the raw numbers. |

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" | "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... |
+| `loadingState` | `"filtering" | "initial" | "loadingMore" | "none"` | 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. |
@@ -529,23 +529,31 @@ objects that will define the sorting options for the column.
 | `title` | `string` | No | — | The title of the DataList. |
 | `totalCount` | `number` | No | — | Total number of items in the DataList.  This renders an "N results" text with the DataList that helps users know how ... |
 
-#### DataList.EmptyState
+#### DataList.BatchAction
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `message` | `string` | Yes | — | The message that shows when the DataList is empty. |
-| `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 ... |
+| `label` | `string | ((item: DataListObject) => string)` | Yes | — | The label of the action |
+| `actionUrl` | `string` | No | — | The URL to navigate to when the action is clicked. |
+| `alwaysVisible` | `boolean` | No | — | Determine if the action is always visible. It is not recommended to set this to true on more then one action. |
+| `destructive` | `boolean` | No | — | Adjust the styling of an action label and icon to be more destructive. |
+| `icon` | `IconNames` | No | — | The icon beside the label |
+| `onClick` | `() => void` | No | — | The callback function when the action is clicked. |
 
-#### DataList.Search
+#### DataList.BatchActions
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `onSearch` | `(value: string) => void` | Yes | — |  |
-| `initialValue` | `string` | No | — | The initial value of the search input.  Updating this prop after the component has mounted will rerender the componen... |
-| `placeholder` | `string` | No | — | The placeholder text for the search input. This either uses the title prop prepended by "Search" or just falls back t... |
-| `value` | `string` | No | — | The controlled value of the search input.  Supply this field if you want to take control over the search input's valu... |
+| `children` | `Fragment<ReactElement<DataListBulkActionProps, string | JSXElementConstructor<any>>>` | No | — | The actions to render on the top of the DataList to make actions to multiple items. This only accepts the DataList.Ba... |
+
+#### DataList.EmptyState
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `message` | `string` | Yes | — | The message that shows when the DataList is empty. |
+| `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` | `"empty" | "filtered"` | No | — | Determine the type of empty state to show.  By default, it will show the "empty" state when there is no data. If you ... |
 
 #### DataList.ItemActions
 
@@ -557,19 +565,11 @@ objects that will define the sorting options for the column.
 | `to` | `string | ((item: T) => string)` | No | — | If a React Navigation is needed, use this prop to use the `Link` component that comes with React Router. |
 | `url` | `string | ((item: T) => string)` | No | — | If a normal page navigation is needed, use this prop to change the element to an `a` tag with an `href`. |
 
-#### DataList.BatchActions
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `children` | `Fragment<ReactElement<DataListBulkActionProps, string | JSXElementConstructor<any>>>` | No | — | The actions to render on the top of the DataList to make actions to multiple items. This only accepts the DataList.Ba... |
-
-#### DataList.BatchAction
+#### DataList.Search
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `label` | `string | ((item: DataListObject) => string)` | Yes | — | The label of the action |
-| `actionUrl` | `string` | No | — | The URL to navigate to when the action is clicked. |
-| `alwaysVisible` | `boolean` | No | — | Determine if the action is always visible. It is not recommended to set this to true on more then one action. |
-| `destructive` | `boolean` | No | — | Adjust the styling of an action label and icon to be more destructive. |
-| `icon` | `IconNames` | No | — | The icon beside the label |
-| `onClick` | `() => void` | No | — | The callback function when the action is clicked. |
+| `onSearch` | `(value: string) => void` | Yes | — |  |
+| `initialValue` | `string` | No | — | The initial value of the search input.  Updating this prop after the component has mounted will rerender the componen... |
+| `placeholder` | `string` | No | — | The placeholder text for the search input. This either uses the title prop prepended by "Search" or just falls back t... |
+| `value` | `string` | No | — | The controlled value of the search input.  Supply this field if you want to take control over the search input's valu... |

package/dist/docs/DataTable/DataTable.md

@@ -511,11 +511,14 @@ const table = useReactTable({
 | `sorting` | `SortingType` | No | — | Enables sorting, mostly follows: https://tanstack.com/table/v8/docs/api/features/sorting#table-options |
 | `stickyHeader` | `boolean` | No | — | When set to true makes the header sticky while scrolling vertically |
 
-#### DataTable.Table
+#### DataTable.PaginationButton
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `layout` | `"auto" | "fixed"` | No | — | Controls the table layout. - `auto` (default): Columns size to content. - `fixed`: Column widths can be set explicitl... |
+| `ariaLabel` | `(direction: "next" | "previous") => string` | Yes | — | Function that returns the aria-label for the button. Required for accessibility. Should return translated strings bas... |
+| `direction` | `"next" | "previous"` | Yes | — | The direction of the pagination button |
+| `disabled` | `boolean` | No | `false` | Whether the pagination button is disabled |
+| `onClick` | `() => void` | No | — | Callback function when the pagination button is clicked |
 
 #### DataTable.RowActions
 
@@ -531,11 +534,8 @@ const table = useReactTable({
 | `direction` | `SortDirection` | No | — | The current sort direction for this column. When undefined, the header renders as non-interactive. |
 | `onSort` | `() => void` | No | — | Callback function triggered when the sortable header is clicked. When undefined, the header renders as non-interactive. |
 
-#### DataTable.PaginationButton
+#### DataTable.Table
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `ariaLabel` | `(direction: "next" | "previous") => string` | Yes | — | Function that returns the aria-label for the button. Required for accessibility. Should return translated strings bas... |
-| `direction` | `"next" | "previous"` | Yes | — | The direction of the pagination button |
-| `disabled` | `boolean` | No | `false` | Whether the pagination button is disabled |
-| `onClick` | `() => void` | No | — | Callback function when the pagination button is clicked |
+| `layout` | `"auto" | "fixed"` | No | — | Controls the table layout. - `auto` (default): Columns size to content. - `fixed`: Column widths can be set explicitl... |

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` | `"large" | "base" | "larger" | "largest"` | No | `base` | The weight of the divider. |
+| `size` | `"base" | "large" | "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/Flex/Flex.md

@@ -35,4 +35,4 @@ one-directional layout.
 | `template` | `ColumnKeys[]` | Yes | — | Determine how the children gets laid out  **Supported keys** - `"grow"` - Grows to the space available. If all childr... |
 | `align` | `"center" | "end" | "start"` | No | `center` | Adjusts the alignment of the Flex children. |
 | `direction` | `Direction` | No | `row` | The direction of the content. |
-| `gap` | `"small" | "large" | "base" | "minuscule" | "smallest" | "smaller" | "slim" | "larger" | "largest" | "extravagant" | "none"` | No | `base` | The spacing between the children. |
+| `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "none" | "slim" | "small" | "smaller" | "smallest"` | 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<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `ref` | `Ref<FormRef>` | 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

@@ -53,18 +53,18 @@ export function SpecialInput(props) {
 |------|------|----------|---------|-------------|
 | `actionsRef` | `RefObject<FieldActionsRef>` | No | — |  |
 | `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 |
 | `children` | `ReactNode` | No | — | If you need to pass in a children. For example, `<options>` inside `<select>`. |
 | `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 |
 | `max` | `number` | No | — | Specifies the maximum numerical or date value that a user can type |
 | `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... |
@@ -82,12 +82,12 @@ export function SpecialInput(props) {
 | `readonly` | `boolean` | No | — | Prevents users from editing the value. |
 | `rows` | `number` | No | — | Exclusively for textareas. Specifies the visible height of a textarea. |
 | `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. |
 | `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. |
+| `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... |
 | `wrapperRef` | `RefObject<HTMLDivElement>` | No | — |  |

package/dist/docs/FormatDate/FormatDate.md

@@ -43,5 +43,5 @@ If you require a string instead of a component use strFormatDate.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `date` | `string | Date` | Yes | — | Date to be formatted.  A `string` should be an ISO 8601 format date string. |
+| `date` | `Date | string` | Yes | — | Date to be formatted.  A `string` should be an ISO 8601 format date string. |
 | `showYear` | `boolean` | No | `true` | Boolean to show year or not. |

package/dist/docs/FormatFile/FormatFile.md

@@ -31,41 +31,34 @@ image, while expanded is used to display a file alongside its metadata.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `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` | `"large" | "base"` | No | `base` | The base dimensions of the thumbnail |
+| `display` | `"compact" | "expanded"` | No | `expanded` | To display as either a file row or thumbnail |
+| `displaySize` | `"base" | "large"` | 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 |
 
-#### FormatFile.DeleteButtonContainer
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `className` | `string` | No | — |  |
-| `isHidden` | `boolean` | No | — |  |
-
-#### FormatFile.ProgressContainer
+#### FormatFile.Body
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
+| `isComplete` | `boolean` | Yes | — |  |
+| `ariaBusy` | `boolean` | No | — |  |
 | `className` | `string` | No | — |  |
-| `isHidden` | `boolean` | No | — |  |
+| `onClick` | `MouseEventHandler<HTMLButtonElement | HTMLDivElement>` | No | — |  |
+| `tabIndex` | `number` | No | — |  |
+| `type` | `"button" | "reset" | "submit"` | No | — |  |
 
-#### FormatFile.ThumbnailContainer
+#### FormatFile.DeleteButton
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `className` | `string` | No | — |  |
+| `onDelete` | `(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void` | No | — |  |
 
-#### FormatFile.Body
+#### FormatFile.DeleteButtonContainer
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `isComplete` | `boolean` | Yes | — |  |
-| `ariaBusy` | `boolean` | No | — |  |
 | `className` | `string` | No | — |  |
-| `onClick` | `MouseEventHandler<HTMLButtonElement | HTMLDivElement>` | No | — |  |
-| `tabIndex` | `number` | No | — |  |
-| `type` | `"submit" | "button" | "reset"` | No | — |  |
+| `isHidden` | `boolean` | No | — |  |
 
 #### FormatFile.Expanded
 
@@ -75,14 +68,21 @@ image, while expanded is used to display a file alongside its metadata.
 | `fileSize` | `string` | Yes | — |  |
 | `isVisible` | `boolean` | Yes | — |  |
 
-#### FormatFile.Wrapper
+#### FormatFile.ProgressContainer
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `className` | `string` | No | — |  |
+| `isHidden` | `boolean` | No | — |  |
 
-#### FormatFile.DeleteButton
+#### FormatFile.ThumbnailContainer
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `onDelete` | `(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void` | No | — |  |
+| `className` | `string` | No | — |  |
+
+#### FormatFile.Wrapper
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | — |  |

package/dist/docs/FormatRelativeDateTime/FormatRelativeDateTime.md

@@ -27,4 +27,4 @@ format is Month Day, Year.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `date` | `string | Date` | Yes | — | Date to be displayed.  A `string` should be an ISO 8601 format date string. |
+| `date` | `Date | string` | Yes | — | Date to be displayed.  A `string` should be an ISO 8601 format date string. |

package/dist/docs/FormatTime/FormatTime.md

@@ -28,5 +28,5 @@ newDate.setHours(22, 35, 0, 0);
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `time` | `string | Date` | Yes | — | Time (as JS Date) to be displayed.  A `string` should be an ISO 8601 format date string. |
+| `time` | `Date | string` | Yes | — | Time (as JS Date) to be displayed.  A `string` should be an ISO 8601 format date string. |
 | `use24HourClock` | `boolean` | No | — | Optionally specify clock format. If `undefined` system format will be respected. |

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` | `"large" | "base"` | No | `base` | The size of the files and their spacing in the gallery |
+| `size` | `"base" | "large"` | No | `base` | The size of the files and their spacing in the gallery |