braid-design-system 33.2.2 → 33.3.0

package/dist/lib/components/Button/Button.cjs

@@ -264,6 +264,7 @@ const ButtonText = ({
       position: "relative",
       display: "flex",
       justifyContent: "center",
+      flexGrow: 1,
       flexWrap: "wrap",
       overflow: "hidden",
       pointerEvents: "none",

package/dist/lib/components/Button/Button.mjs

@@ -261,6 +261,7 @@ const ButtonText = ({
       position: "relative",
       display: "flex",
       justifyContent: "center",
+      flexGrow: 1,
       flexWrap: "wrap",
       overflow: "hidden",
       pointerEvents: "none",

package/dist/lib/components/Columns/Columns.cjs

@@ -48,6 +48,7 @@ const Columns = ({
     {
       component,
       ...collapsibleAlignmentProps,
+      height: "full",
       className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", {
         mobile: collapseMobile ? "none" : mobileSpace,
         tablet: collapseTablet ? "none" : tabletSpace,

package/dist/lib/components/Columns/Columns.mjs

@@ -45,6 +45,7 @@ const Columns = ({
     {
       component,
       ...collapsibleAlignmentProps,
+      height: "full",
       className: negativeMargin("left", {
         mobile: collapseMobile ? "none" : mobileSpace,
         tablet: collapseTablet ? "none" : tabletSpace,

package/dist/lib/components/MenuItem/MenuItem.cjs

@@ -17,7 +17,7 @@ const MenuItem = ({
     data,
     id
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { ...menuItemProps, component: "button", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(MenuItemChildren, { tone, icon, badge, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { ...menuItemProps, component: "button", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(MenuItemChildren, { tone, leftSlot: icon, badge, children }) });
 };
 MenuItem.__isMenuItem__ = true;
 exports.MenuItem = MenuItem;

package/dist/lib/components/MenuItem/MenuItem.mjs

@@ -16,7 +16,7 @@ const MenuItem = ({
     data,
     id
   });
-  return /* @__PURE__ */ jsx(Box, { ...menuItemProps, component: "button", type: "button", children: /* @__PURE__ */ jsx(MenuItemChildren, { tone, icon, badge, children }) });
+  return /* @__PURE__ */ jsx(Box, { ...menuItemProps, component: "button", type: "button", children: /* @__PURE__ */ jsx(MenuItemChildren, { tone, leftSlot: icon, badge, children }) });
 };
 MenuItem.__isMenuItem__ = true;
 export {

package/dist/lib/components/MenuItem/MenuItemLink.cjs

@@ -30,7 +30,7 @@ const MenuItemLink = ({
       href,
       target,
       rel,
-      children: /* @__PURE__ */ jsxRuntime.jsx(MenuItemChildren, { tone, icon, badge, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(MenuItemChildren, { tone, leftSlot: icon, badge, children })
     }
   );
 };

package/dist/lib/components/MenuItem/MenuItemLink.mjs

@@ -29,7 +29,7 @@ const MenuItemLink = ({
       href,
       target,
       rel,
-      children: /* @__PURE__ */ jsx(MenuItemChildren, { tone, icon, badge, children })
+      children: /* @__PURE__ */ jsx(MenuItemChildren, { tone, leftSlot: icon, badge, children })
     }
   );
 };

package/dist/lib/components/MenuItem/useMenuItem.cjs

@@ -4,7 +4,6 @@ const assert = require("assert");
 const React = require("react");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
-const lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
 const lib_components_private_normalizeKey_cjs = require("../private/normalizeKey.cjs");
 const lib_components_MenuRenderer_MenuRendererItemContext_cjs = require("../MenuRenderer/MenuRendererItemContext.cjs");
 const lib_components_MenuRenderer_MenuRenderer_actions_cjs = require("../MenuRenderer/MenuRenderer.actions.cjs");
@@ -16,6 +15,7 @@ const lib_components_MenuRenderer_MenuRendererContext_cjs = require("../MenuRend
 const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
 const lib_components_private_iconSlotSpace_cjs = require("../private/iconSlotSpace.cjs");
 const lib_components_private_badgeSlotSpace_cjs = require("../private/badgeSlotSpace.cjs");
+const lib_components_private_touchable_virtualTouchable_css_cjs = require("../private/touchable/virtualTouchable.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const {
@@ -28,7 +28,6 @@ const {
   MENU_ITEM_CLICK,
   MENU_ITEM_HOVER
 } = lib_components_MenuRenderer_MenuRenderer_actions_cjs.actionTypes;
-const menuItemChildrenSize = "standard";
 function useMenuItem({
   displayName = "MenuItem",
   formElement = false,
@@ -38,14 +37,16 @@ function useMenuItem({
   id,
   ...restProps
 }) {
+  const menuRendererContext = React.useContext(lib_components_MenuRenderer_MenuRendererContext_cjs.MenuRendererContext);
   const menuRendererItemContext = React.useContext(lib_components_MenuRenderer_MenuRendererItemContext_cjs.MenuRendererItemContext);
   assert__default.default(
-    menuRendererItemContext !== null,
+    menuRendererContext !== null && menuRendererItemContext !== null,
     `${displayName} must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
   );
   if (menuRendererItemContext === null) {
     throw new Error(`${displayName} element rendered outside menu context`);
   }
+  const { size } = menuRendererContext;
   const { isHighlighted, index, dispatch, focusTrigger } = menuRendererItemContext;
   const menuItemRef = React.useRef(null);
   React.useEffect(() => {
@@ -107,11 +108,14 @@ function useMenuItem({
       background: isHighlighted ? hoverBackground : void 0,
       className: [
         lib_components_MenuItem_useMenuItem_css_cjs.menuItem,
-        lib_css_typography_css_cjs.touchableText[menuItemChildrenSize],
+        size === "small" ? lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable : void 0,
         lib_css_atoms_atoms_cjs.atoms({
-          display: "block",
+          display: "flex",
+          alignItems: "center",
           width: "full",
           paddingX: "small",
+          paddingY: size === "standard" ? void 0 : "xsmall",
+          height: size === "standard" ? "touchable" : void 0,
           cursor: "pointer",
           textAlign: "left",
           outline: "none"
@@ -122,16 +126,15 @@ function useMenuItem({
   };
 }
 function MenuItemChildren({
-  icon,
+  leftSlot,
   tone,
   children,
   badge,
-  formElement = false
+  isCheckbox = false
 }) {
   const menuRendererContext = React.useContext(lib_components_MenuRenderer_MenuRendererContext_cjs.MenuRendererContext);
-  const legacy = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme().legacy;
-  const iconSpace = legacy ? "small" : lib_components_private_iconSlotSpace_cjs.iconSlotSpace;
-  const badgeSpace = legacy ? "small" : lib_components_private_badgeSlotSpace_cjs.badgeSlotSpace;
+  const badgeSpace = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme().legacy ? "small" : lib_components_private_badgeSlotSpace_cjs.badgeSlotSpace;
+  const iconSpace = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme().legacy ? "small" : lib_components_private_iconSlotSpace_cjs.iconSlotSpace;
   assert__default.default(
     menuRendererContext !== null,
     `MenuItem must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
@@ -141,53 +144,47 @@ function MenuItemChildren({
     !badge || badge.type.__isBadge__,
     `MenuItem badge prop can only be an instance of Badge. e.g. <MenuItem badge={<Badge>New</Badge>}>`
   );
-  let leftSlot = null;
-  if (!formElement) {
-    if (icon) {
-      leftSlot = /* @__PURE__ */ jsxRuntime.jsx(
-        lib_components_Text_Text_cjs.Text,
-        {
-          size: menuItemChildrenSize,
-          baseline: false,
-          tone: tone === "critical" ? tone : void 0,
-          children: icon
-        }
-      );
-    } else if (menuRendererContext.reserveIconSpace) {
-      leftSlot = /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", display: "block", className: lib_hooks_useIcon_index_cjs.iconSize() });
-    }
-  }
+  const { size, reserveIconSpace } = menuRendererContext;
   return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { component: "span", display: "flex", alignItems: "center", minWidth: 0, children: [
-    leftSlot ? /* @__PURE__ */ jsxRuntime.jsx(
+    leftSlot || reserveIconSpace ? /* @__PURE__ */ jsxRuntime.jsxs(
       lib_components_Box_Box_cjs.Box,
       {
         component: "span",
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
         paddingRight: iconSpace,
-        flexShrink: 0,
-        minWidth: 0,
-        children: leftSlot
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "span",
+              display: "block",
+              className: [lib_hooks_useIcon_index_cjs.iconSize({ size }), lib_components_MenuItem_useMenuItem_css_cjs.menuItemLeftSlot],
+              children: " "
+            }
+          ),
+          leftSlot ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", position: "absolute", children: isCheckbox ? leftSlot : /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Text_Text_cjs.Text,
+            {
+              size,
+              tone: tone && tone === "critical" ? tone : void 0,
+              children: leftSlot
+            }
+          ) }) : null
+        ]
       }
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", minWidth: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
       lib_components_Text_Text_cjs.Text,
       {
-        size: menuItemChildrenSize,
-        baseline: false,
+        size,
         tone: tone === "critical" ? tone : void 0,
         maxLines: 1,
         children
       }
     ) }),
-    badge ? /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_Box_Box_cjs.Box,
-      {
-        component: "span",
-        paddingLeft: badgeSpace,
-        flexShrink: 0,
-        minWidth: 0,
-        children: badge
-      }
-    ) : null
+    badge ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", paddingLeft: badgeSpace, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { size, children: badge }) }) : null
   ] });
 }
 exports.useMenuItem = useMenuItem;

package/dist/lib/components/MenuItem/useMenuItem.css.cjs

@@ -9,5 +9,10 @@ const menuItem = css.style({
     }
   }
 }, "menuItem");
+const menuItemLeftSlot = css.style({
+  height: "0px"
+  // Prevents the slot from affecting the height of the MenuItem
+}, "menuItemLeftSlot");
 fileScope.endFileScope();
 exports.menuItem = menuItem;
+exports.menuItemLeftSlot = menuItemLeftSlot;

package/dist/lib/components/MenuItem/useMenuItem.css.mjs

@@ -8,7 +8,12 @@ const menuItem = style({
     }
   }
 }, "menuItem");
+const menuItemLeftSlot = style({
+  height: "0px"
+  // Prevents the slot from affecting the height of the MenuItem
+}, "menuItemLeftSlot");
 endFileScope();
 export {
-  menuItem
+  menuItem,
+  menuItemLeftSlot
 };

package/dist/lib/components/MenuItem/useMenuItem.mjs

@@ -1,20 +1,20 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import assert from "assert";
 import { useContext, useRef, useEffect } from "react";
 import { Box } from "../Box/Box.mjs";
 import { Text } from "../Text/Text.mjs";
-import { touchableText } from "../../css/typography.css.mjs";
 import { normalizeKey } from "../private/normalizeKey.mjs";
 import { MenuRendererItemContext } from "../MenuRenderer/MenuRendererItemContext.mjs";
 import { actionTypes } from "../MenuRenderer/MenuRenderer.actions.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { atoms } from "../../css/atoms/atoms.mjs";
 import { iconSize } from "../../hooks/useIcon/index.mjs";
-import { menuItem } from "./useMenuItem.css.mjs";
+import { menuItem, menuItemLeftSlot } from "./useMenuItem.css.mjs";
 import { MenuRendererContext } from "../MenuRenderer/MenuRendererContext.mjs";
 import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
 import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
 import { badgeSlotSpace } from "../private/badgeSlotSpace.mjs";
+import { virtualTouchable } from "../private/touchable/virtualTouchable.css.mjs";
 const {
   MENU_ITEM_UP,
   MENU_ITEM_DOWN,
@@ -25,7 +25,6 @@ const {
   MENU_ITEM_CLICK,
   MENU_ITEM_HOVER
 } = actionTypes;
-const menuItemChildrenSize = "standard";
 function useMenuItem({
   displayName = "MenuItem",
   formElement = false,
@@ -35,14 +34,16 @@ function useMenuItem({
   id,
   ...restProps
 }) {
+  const menuRendererContext = useContext(MenuRendererContext);
   const menuRendererItemContext = useContext(MenuRendererItemContext);
   assert(
-    menuRendererItemContext !== null,
+    menuRendererContext !== null && menuRendererItemContext !== null,
     `${displayName} must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
   );
   if (menuRendererItemContext === null) {
     throw new Error(`${displayName} element rendered outside menu context`);
   }
+  const { size } = menuRendererContext;
   const { isHighlighted, index, dispatch, focusTrigger } = menuRendererItemContext;
   const menuItemRef = useRef(null);
   useEffect(() => {
@@ -104,11 +105,14 @@ function useMenuItem({
       background: isHighlighted ? hoverBackground : void 0,
       className: [
         menuItem,
-        touchableText[menuItemChildrenSize],
+        size === "small" ? virtualTouchable : void 0,
         atoms({
-          display: "block",
+          display: "flex",
+          alignItems: "center",
           width: "full",
           paddingX: "small",
+          paddingY: size === "standard" ? void 0 : "xsmall",
+          height: size === "standard" ? "touchable" : void 0,
           cursor: "pointer",
           textAlign: "left",
           outline: "none"
@@ -119,16 +123,15 @@ function useMenuItem({
   };
 }
 function MenuItemChildren({
-  icon,
+  leftSlot,
   tone,
   children,
   badge,
-  formElement = false
+  isCheckbox = false
 }) {
   const menuRendererContext = useContext(MenuRendererContext);
-  const legacy = useBraidTheme().legacy;
-  const iconSpace = legacy ? "small" : iconSlotSpace;
-  const badgeSpace = legacy ? "small" : badgeSlotSpace;
+  const badgeSpace = useBraidTheme().legacy ? "small" : badgeSlotSpace;
+  const iconSpace = useBraidTheme().legacy ? "small" : iconSlotSpace;
   assert(
     menuRendererContext !== null,
     `MenuItem must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
@@ -138,53 +141,47 @@ function MenuItemChildren({
     !badge || badge.type.__isBadge__,
     `MenuItem badge prop can only be an instance of Badge. e.g. <MenuItem badge={<Badge>New</Badge>}>`
   );
-  let leftSlot = null;
-  if (!formElement) {
-    if (icon) {
-      leftSlot = /* @__PURE__ */ jsx(
-        Text,
-        {
-          size: menuItemChildrenSize,
-          baseline: false,
-          tone: tone === "critical" ? tone : void 0,
-          children: icon
-        }
-      );
-    } else if (menuRendererContext.reserveIconSpace) {
-      leftSlot = /* @__PURE__ */ jsx(Box, { component: "span", display: "block", className: iconSize() });
-    }
-  }
+  const { size, reserveIconSpace } = menuRendererContext;
   return /* @__PURE__ */ jsxs(Box, { component: "span", display: "flex", alignItems: "center", minWidth: 0, children: [
-    leftSlot ? /* @__PURE__ */ jsx(
+    leftSlot || reserveIconSpace ? /* @__PURE__ */ jsxs(
       Box,
       {
         component: "span",
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
         paddingRight: iconSpace,
-        flexShrink: 0,
-        minWidth: 0,
-        children: leftSlot
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              display: "block",
+              className: [iconSize({ size }), menuItemLeftSlot],
+              children: " "
+            }
+          ),
+          leftSlot ? /* @__PURE__ */ jsx(Box, { component: "span", position: "absolute", children: isCheckbox ? leftSlot : /* @__PURE__ */ jsx(
+            Text,
+            {
+              size,
+              tone: tone && tone === "critical" ? tone : void 0,
+              children: leftSlot
+            }
+          ) }) : null
+        ]
       }
     ) : null,
     /* @__PURE__ */ jsx(Box, { component: "span", minWidth: 0, children: /* @__PURE__ */ jsx(
       Text,
       {
-        size: menuItemChildrenSize,
-        baseline: false,
+        size,
         tone: tone === "critical" ? tone : void 0,
         maxLines: 1,
         children
       }
     ) }),
-    badge ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "span",
-        paddingLeft: badgeSpace,
-        flexShrink: 0,
-        minWidth: 0,
-        children: badge
-      }
-    ) : null
+    badge ? /* @__PURE__ */ jsx(Box, { component: "span", paddingLeft: badgeSpace, children: /* @__PURE__ */ jsx(Text, { size, children: badge }) }) : null
   ] });
 }
 export {

package/dist/lib/components/MenuItemCheckbox/MenuItemCheckbox.cjs

@@ -3,8 +3,6 @@ const jsxRuntime = require("react/jsx-runtime");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_icons_IconTick_IconTick_cjs = require("../icons/IconTick/IconTick.cjs");
 const lib_components_MenuItem_useMenuItem_cjs = require("../MenuItem/useMenuItem.cjs");
-const lib_components_private_iconSlotSpace_cjs = require("../private/iconSlotSpace.cjs");
-const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
 const lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs = require("./MenuItemCheckbox.css.cjs");
 const MenuItemCheckbox = ({
   children,
@@ -20,9 +18,7 @@ const MenuItemCheckbox = ({
     data,
     id
   });
-  const legacy = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme().legacy;
-  const iconSpace = legacy ? "xsmall" : lib_components_private_iconSlotSpace_cjs.iconSlotSpace;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     lib_components_Box_Box_cjs.Box,
     {
       ...menuItemProps,
@@ -32,44 +28,41 @@ const MenuItemCheckbox = ({
       type: "button",
       display: "flex",
       alignItems: "center",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          lib_components_Box_Box_cjs.Box,
-          {
-            component: "span",
-            borderRadius: "standard",
-            boxShadow: "borderField",
-            position: "relative",
-            background: { lightMode: "surface" },
-            marginRight: iconSpace,
-            flexShrink: 0,
-            className: lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs.checkboxSize,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              lib_components_Box_Box_cjs.Box,
-              {
-                component: "span",
-                position: "absolute",
-                inset: 0,
-                background: "formAccent",
-                borderRadius: "standard",
-                transition: "fast",
-                opacity: checked ? void 0 : 0,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconTick_IconTick_cjs.IconTick, { size: "fill" })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MenuItemChildren,
-          {
-            tone: void 0,
-            icon: void 0,
-            badge,
-            formElement: true,
-            children
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        MenuItemChildren,
+        {
+          tone: void 0,
+          leftSlot: /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "span",
+              display: "block",
+              borderRadius: "standard",
+              boxShadow: "borderField",
+              position: "relative",
+              background: { lightMode: "surface" },
+              flexShrink: 0,
+              className: lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs.checkboxSize,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                lib_components_Box_Box_cjs.Box,
+                {
+                  component: "span",
+                  position: "absolute",
+                  inset: 0,
+                  background: "formAccent",
+                  borderRadius: "standard",
+                  transition: "fast",
+                  opacity: checked ? void 0 : 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconTick_IconTick_cjs.IconTick, { size: "fill" })
+                }
+              )
+            }
+          ),
+          badge,
+          isCheckbox: true,
+          children
+        }
+      )
     }
   );
 };

package/dist/lib/components/MenuItemCheckbox/MenuItemCheckbox.mjs

@@ -1,9 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Box } from "../Box/Box.mjs";
 import { IconTick } from "../icons/IconTick/IconTick.mjs";
 import { useMenuItem } from "../MenuItem/useMenuItem.mjs";
-import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
-import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
 import { checkboxSize } from "./MenuItemCheckbox.css.mjs";
 const MenuItemCheckbox = ({
   children,
@@ -19,9 +17,7 @@ const MenuItemCheckbox = ({
     data,
     id
   });
-  const legacy = useBraidTheme().legacy;
-  const iconSpace = legacy ? "xsmall" : iconSlotSpace;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Box,
     {
       ...menuItemProps,
@@ -31,44 +27,41 @@ const MenuItemCheckbox = ({
       type: "button",
       display: "flex",
       alignItems: "center",
-      children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            component: "span",
-            borderRadius: "standard",
-            boxShadow: "borderField",
-            position: "relative",
-            background: { lightMode: "surface" },
-            marginRight: iconSpace,
-            flexShrink: 0,
-            className: checkboxSize,
-            children: /* @__PURE__ */ jsx(
-              Box,
-              {
-                component: "span",
-                position: "absolute",
-                inset: 0,
-                background: "formAccent",
-                borderRadius: "standard",
-                transition: "fast",
-                opacity: checked ? void 0 : 0,
-                children: /* @__PURE__ */ jsx(IconTick, { size: "fill" })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MenuItemChildren,
-          {
-            tone: void 0,
-            icon: void 0,
-            badge,
-            formElement: true,
-            children
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx(
+        MenuItemChildren,
+        {
+          tone: void 0,
+          leftSlot: /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              display: "block",
+              borderRadius: "standard",
+              boxShadow: "borderField",
+              position: "relative",
+              background: { lightMode: "surface" },
+              flexShrink: 0,
+              className: checkboxSize,
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  position: "absolute",
+                  inset: 0,
+                  background: "formAccent",
+                  borderRadius: "standard",
+                  transition: "fast",
+                  opacity: checked ? void 0 : 0,
+                  children: /* @__PURE__ */ jsx(IconTick, { size: "fill" })
+                }
+              )
+            }
+          ),
+          badge,
+          isCheckbox: true,
+          children
+        }
+      )
     }
   );
 };