@jobber/components 7.11.0 → 7.11.2

package/dist/Menu/Menu.d.ts

@@ -32,6 +32,27 @@ export interface MenuComponent {
     ItemPrefix: typeof MenuItemPrefix;
     ItemSuffix: typeof MenuItemSuffix;
 }
+export declare function Menu(props: MenuProps): ReactElement;
+export declare namespace Menu {
+    var Group: typeof MenuGroup;
+    var GroupLabel: typeof MenuGroupLabel;
+    var Section: typeof MenuSection;
+    var Header: typeof MenuHeader;
+    var HeaderLabel: typeof MenuHeaderLabel;
+    var Item: React.ForwardRefExoticComponent<ComposableMenuItemProps & React.RefAttributes<HTMLElement>>;
+    var Trigger: React.ForwardRefExoticComponent<ComposableMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
+    var Content: typeof MenuContent;
+    var Separator: typeof MenuSeparator;
+    var RadioGroup: typeof MenuRadioGroup;
+    var RadioItem: React.ForwardRefExoticComponent<ComposableMenuRadioItemProps & React.RefAttributes<HTMLElement>>;
+    var Submenu: typeof MenuSubmenu;
+    var SubmenuTrigger: React.ForwardRefExoticComponent<ComposableMenuSubmenuTriggerProps & React.RefAttributes<HTMLElement>>;
+    var SubmenuContent: typeof MenuSubmenuContent;
+    var ItemIcon: typeof MenuItemIcon;
+    var ItemLabel: typeof MenuItemLabel;
+    var ItemPrefix: typeof MenuItemPrefix;
+    var ItemSuffix: typeof MenuItemSuffix;
+}
 declare const MenuTrigger: React.ForwardRefExoticComponent<ComposableMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
 declare function MenuContent(props: ComposableMenuContentProps): React.JSX.Element;
 declare function MenuSeparator(props: ComposableMenuSeparatorProps): React.JSX.Element;
@@ -65,5 +86,4 @@ declare function MenuHeader(props: MenuHeaderComposableProps): React.JSX.Element
  * Menu.Header > Menu.HeaderLabel continues to compose onto the new GroupLabel.
  */
 declare function MenuHeaderLabel(props: MenuHeaderLabelComposableProps): React.JSX.Element;
-export declare const Menu: MenuComponent;
 export {};

package/dist/Menu-cjs.js

@@ -367,6 +367,17 @@ function getTextContent(node) {
     }
     return getTextContent(node.props.children);
 }
+function getBottomSheetContentStyle(style) {
+    if (!style) {
+        return undefined;
+    }
+    const safeStyle = Object.assign({}, style);
+    delete safeStyle.height;
+    delete safeStyle.maxHeight;
+    delete safeStyle.minHeight;
+    delete safeStyle.width;
+    return safeStyle;
+}
 // Bottom sheet menu interaction helpers. These adapt Drawer semantics into the
 // menu-style keyboard and focus behavior we want for the mobile shell.
 function getNavigableMenuItems(target) {
@@ -514,11 +525,12 @@ function BottomSheetContent({ children, style, className, UNSAFE_style, UNSAFE_c
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames({
             [styles.menuHidden]: submenuOpen,
         }) },
         React.createElement(BottomSheet.BottomSheet.Content, null,
-            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: bottomSheetStyle }, children))));
 }
 function BottomSheetSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -666,8 +678,9 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames(styles.menu, styles.bottomSheetSubmenuPopup) },
-        React.createElement(BottomSheet.BottomSheet.Content, { style: resolvedBaseProps.style },
+        React.createElement(BottomSheet.BottomSheet.Content, { style: bottomSheetStyle },
             title ? (React.createElement(MenuSubmenuTrigger$1.DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React.createElement("div", { className: styles$1.submenuHeader },
                 React.createElement(MenuSubmenuTrigger$1.DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React.createElement(Button.Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
@@ -721,6 +734,9 @@ function getFloatingLayerStyle(style) {
         return undefined;
     return { zIndex: style.zIndex };
 }
+function getMenuPopupStyle(style) {
+    return Object.assign({ maxHeight: `min(${MENU_MAX_HEIGHT_PERCENTAGE}vh, max(0px, calc(var(--available-height) - var(--space-base))))` }, style);
+}
 function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
     const actionsRef = React.useRef(null);
     return (React.createElement(MenuDropdownContext.Provider, { value: {
@@ -754,9 +770,10 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     });
     const [side = "bottom", align = "start"] = (_a = preferredPlacement === null || preferredPlacement === void 0 ? void 0 : preferredPlacement.split(" ")) !== null && _a !== void 0 ? _a : [];
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
-            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -847,9 +864,10 @@ function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style,
         UNSAFE_style,
     });
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: "start", side: "right", sideOffset: MENU_OFFSET },
-            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);
@@ -896,7 +914,7 @@ function MenuComposableRoot(props) {
     return (React.createElement(MenuContext.Provider, { value: { isMobile } },
         React.createElement(RootComponent, { onOpenChange: props.onOpenChange, open: props.open, defaultOpen: props.defaultOpen }, props.children)));
 }
-function MenuRoot(props) {
+function Menu(props) {
     if (isLegacy(props)) {
         return React.createElement(MenuLegacy, Object.assign({}, props));
     }
@@ -993,25 +1011,23 @@ function MenuHeaderLabel(props) {
 }
 // Menu now routes the legacy items-based API locally and owns the new
 // Base UI-backed composable implementation directly.
-const Menu = Object.assign(MenuRoot, {
-    Group: MenuGroup,
-    GroupLabel: MenuGroupLabel,
-    Section: MenuSection,
-    Header: MenuHeader,
-    HeaderLabel: MenuHeaderLabel,
-    Item: MenuItem,
-    Trigger: MenuTrigger,
-    Content: MenuContent,
-    Separator: MenuSeparator,
-    RadioGroup: MenuRadioGroup,
-    RadioItem: MenuRadioItem,
-    Submenu: MenuSubmenu,
-    SubmenuTrigger: MenuSubmenuTrigger,
-    SubmenuContent: MenuSubmenuContent,
-    ItemIcon: MenuItemIcon,
-    ItemLabel: MenuItemLabel,
-    ItemPrefix: MenuItemPrefix,
-    ItemSuffix: MenuItemSuffix,
-});
+Menu.Group = MenuGroup;
+Menu.GroupLabel = MenuGroupLabel;
+Menu.Section = MenuSection;
+Menu.Header = MenuHeader;
+Menu.HeaderLabel = MenuHeaderLabel;
+Menu.Item = MenuItem;
+Menu.Trigger = MenuTrigger;
+Menu.Content = MenuContent;
+Menu.Separator = MenuSeparator;
+Menu.RadioGroup = MenuRadioGroup;
+Menu.RadioItem = MenuRadioItem;
+Menu.Submenu = MenuSubmenu;
+Menu.SubmenuTrigger = MenuSubmenuTrigger;
+Menu.SubmenuContent = MenuSubmenuContent;
+Menu.ItemIcon = MenuItemIcon;
+Menu.ItemLabel = MenuItemLabel;
+Menu.ItemPrefix = MenuItemPrefix;
+Menu.ItemSuffix = MenuItemSuffix;
 
 exports.Menu = Menu;

package/dist/Menu-es.js

@@ -13,7 +13,7 @@ import { _ as __rest } from './tslib.es6-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
 import { B as BottomSheet } from './BottomSheet-es.js';
 import { O as OverlaySeparator } from './OverlaySeparator-es.js';
-import { D as DrawerTrigger, a as DrawerTitle, b as DrawerClose, M as MenuTrigger$1, c as MenuLinkItem, d as MenuItem$1, e as MenuRadioItem$1, f as MenuRadioItemIndicator, g as MenuSubmenuTrigger$1, h as MenuRoot$1, i as MenuPortal$1, j as MenuPositioner, k as MenuPopup, l as MenuRadioGroup$1, m as MenuGroup$1, n as MenuSubmenuRoot, o as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
+import { D as DrawerTrigger, a as DrawerTitle, b as DrawerClose, M as MenuTrigger$1, c as MenuLinkItem, d as MenuItem$1, e as MenuRadioItem$1, f as MenuRadioItemIndicator, g as MenuSubmenuTrigger$1, h as MenuRoot, i as MenuPortal$1, j as MenuPositioner, k as MenuPopup, l as MenuRadioGroup$1, m as MenuGroup$1, n as MenuSubmenuRoot, o as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
 
@@ -365,6 +365,17 @@ function getTextContent(node) {
     }
     return getTextContent(node.props.children);
 }
+function getBottomSheetContentStyle(style) {
+    if (!style) {
+        return undefined;
+    }
+    const safeStyle = Object.assign({}, style);
+    delete safeStyle.height;
+    delete safeStyle.maxHeight;
+    delete safeStyle.minHeight;
+    delete safeStyle.width;
+    return safeStyle;
+}
 // Bottom sheet menu interaction helpers. These adapt Drawer semantics into the
 // menu-style keyboard and focus behavior we want for the mobile shell.
 function getNavigableMenuItems(target) {
@@ -512,11 +523,12 @@ function BottomSheetContent({ children, style, className, UNSAFE_style, UNSAFE_c
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React__default.createElement(BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames({
             [styles.menuHidden]: submenuOpen,
         }) },
         React__default.createElement(BottomSheet.Content, null,
-            React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: bottomSheetStyle }, children))));
 }
 function BottomSheetSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -664,8 +676,9 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React__default.createElement(BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames(styles.menu, styles.bottomSheetSubmenuPopup) },
-        React__default.createElement(BottomSheet.Content, { style: resolvedBaseProps.style },
+        React__default.createElement(BottomSheet.Content, { style: bottomSheetStyle },
             title ? (React__default.createElement(DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React__default.createElement("div", { className: styles$1.submenuHeader },
                 React__default.createElement(DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React__default.createElement(Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
@@ -719,6 +732,9 @@ function getFloatingLayerStyle(style) {
         return undefined;
     return { zIndex: style.zIndex };
 }
+function getMenuPopupStyle(style) {
+    return Object.assign({ maxHeight: `min(${MENU_MAX_HEIGHT_PERCENTAGE}vh, max(0px, calc(var(--available-height) - var(--space-base))))` }, style);
+}
 function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
     const actionsRef = React__default.useRef(null);
     return (React__default.createElement(MenuDropdownContext.Provider, { value: {
@@ -727,7 +743,7 @@ function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
                 (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
             },
         } },
-        React__default.createElement(MenuRoot$1, { actionsRef: actionsRef, open: open, defaultOpen: defaultOpen, onOpenChange: isOpen => {
+        React__default.createElement(MenuRoot, { actionsRef: actionsRef, open: open, defaultOpen: defaultOpen, onOpenChange: isOpen => {
                 onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
             } }, children)));
 }
@@ -752,9 +768,10 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     });
     const [side = "bottom", align = "start"] = (_a = preferredPlacement === null || preferredPlacement === void 0 ? void 0 : preferredPlacement.split(" ")) !== null && _a !== void 0 ? _a : [];
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
-            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -845,9 +862,10 @@ function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style,
         UNSAFE_style,
     });
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: "start", side: "right", sideOffset: MENU_OFFSET },
-            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);
@@ -894,7 +912,7 @@ function MenuComposableRoot(props) {
     return (React__default.createElement(MenuContext.Provider, { value: { isMobile } },
         React__default.createElement(RootComponent, { onOpenChange: props.onOpenChange, open: props.open, defaultOpen: props.defaultOpen }, props.children)));
 }
-function MenuRoot(props) {
+function Menu(props) {
     if (isLegacy(props)) {
         return React__default.createElement(MenuLegacy, Object.assign({}, props));
     }
@@ -991,25 +1009,23 @@ function MenuHeaderLabel(props) {
 }
 // Menu now routes the legacy items-based API locally and owns the new
 // Base UI-backed composable implementation directly.
-const Menu = Object.assign(MenuRoot, {
-    Group: MenuGroup,
-    GroupLabel: MenuGroupLabel,
-    Section: MenuSection,
-    Header: MenuHeader,
-    HeaderLabel: MenuHeaderLabel,
-    Item: MenuItem,
-    Trigger: MenuTrigger,
-    Content: MenuContent,
-    Separator: MenuSeparator,
-    RadioGroup: MenuRadioGroup,
-    RadioItem: MenuRadioItem,
-    Submenu: MenuSubmenu,
-    SubmenuTrigger: MenuSubmenuTrigger,
-    SubmenuContent: MenuSubmenuContent,
-    ItemIcon: MenuItemIcon,
-    ItemLabel: MenuItemLabel,
-    ItemPrefix: MenuItemPrefix,
-    ItemSuffix: MenuItemSuffix,
-});
+Menu.Group = MenuGroup;
+Menu.GroupLabel = MenuGroupLabel;
+Menu.Section = MenuSection;
+Menu.Header = MenuHeader;
+Menu.HeaderLabel = MenuHeaderLabel;
+Menu.Item = MenuItem;
+Menu.Trigger = MenuTrigger;
+Menu.Content = MenuContent;
+Menu.Separator = MenuSeparator;
+Menu.RadioGroup = MenuRadioGroup;
+Menu.RadioItem = MenuRadioItem;
+Menu.Submenu = MenuSubmenu;
+Menu.SubmenuTrigger = MenuSubmenuTrigger;
+Menu.SubmenuContent = MenuSubmenuContent;
+Menu.ItemIcon = MenuItemIcon;
+Menu.ItemLabel = MenuItemLabel;
+Menu.ItemPrefix = MenuItemPrefix;
+Menu.ItemSuffix = MenuItemSuffix;
 
 export { Menu as M };

package/dist/docs/AnimatedPresence/AnimatedPresence.md

@@ -71,4 +71,4 @@ example.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `initial` | `boolean` | No | — | Whether or not to animate the children on mount. By default it's set to false. |
-| `transition` | `"fromBottom" | "fromTop" | "fromLeft" | "fromRight" | "popIn" | "fromLeftToRight" | "fromRightToLeft" | "fade"` | No | — | The type of transition you can use. |
+| `transition` | `"fade" | "fromBottom" | "fromLeft" | "fromLeftToRight" | "fromRight" | "fromRightToLeft" | "fromTop" | "popIn"` | No | — | The type of transition you can use. |

package/dist/docs/Autocomplete/AutocompleteV1.md

@@ -1323,7 +1323,7 @@ is, focus the extra element and if not it will focus the input.
 | `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
 | `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 | — | 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 |
 | `validations` | `RegisterOptions` | No | — | Validations to run on the input. |
 | `version` | `1` | No | `1` | Version of the component to use. |

package/dist/docs/Autocomplete/AutocompleteV2.md

@@ -811,7 +811,7 @@ This is not yet implemented fully. Avoid using.
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
 | `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
 | `ref` | `Ref<HTMLInputElement | HTMLTextAreaElement>` | No | — |  |
-| `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. |
 | `UNSAFE_className` | `{ menu?: string; option?: string; section?: string; action?: string; input?: string; header?: string; footer?: string; selection?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
 | `UNSAFE_styles` | `{ menu?: CSSProperties; option?: CSSProperties; section?: CSSProperties; action?: CSSProperties; input?: CSSProperties; header?: CSSProperties; footer?: CSSProperties; selection?: 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/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. |