@itwin/itwinui-react 5.0.0-alpha.8 → 5.0.0-alpha.9

package/CHANGELOG.md

@@ -1,9 +1,19 @@
 # Changelog
 
+## 5.0.0-alpha.9
+
+- Added `dot` prop to `<IconButton>` for showing a small "dot" next to the icon.
+- Added `unstable_decorations` prop to `<Tree.Item>` for showing multiple decorations (e.g. icons).
+- **breaking**: Replaced `<DropdownMenu.Item>` children with new `label` prop (see [#423](https://github.com/iTwin/design-system/pull/423)).
+- Added `icon` prop to `<DropdownMenu.Item>` and `<DropdownMenu.CheckboxItem>`.
+- Updated the `shortcuts` prop of `<DropdownMenu.Item>` to recognize predefined "symbols" (e.g. modifier keys).
+- Updated `<Anchor>` and `<Badge>` visuals to match the latest design.
+- Fixed forced-colors mode styling for `DropdownMenu`.
+
 ## 5.0.0-alpha.8
 
 - Added `description` prop to `<Tree.Item>` component for showing "sublabels".
-- **breaking**: Updated `<Text>`  component to require `variant` prop.
+- **breaking**: Updated `<Text>` component to require `variant` prop.
 - (soft breaking) Removed `children` from `<Tree.Item>` prop types.
 - Updated `DropdownMenu` padding.
 

package/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2024 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2025 Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/DEV/bricks/Anchor.js

@@ -1,22 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Focusable } from "@ariakit/react/focusable";
 import { forwardRef } from "./~utils.js";
 const Anchor = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.a,
+    Role.a,
     {
       ...rest,
       "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-anchor", props.className),
-      render: /* @__PURE__ */ jsx(
-        Ariakit.Focusable,
-        {
-          accessibleWhenDisabled: true,
-          render: props.render || /* @__PURE__ */ jsx("a", {})
-        }
-      ),
+      render: /* @__PURE__ */ jsx(Focusable, { accessibleWhenDisabled: true, render: props.render || /* @__PURE__ */ jsx("a", {}) }),
       ref: forwardedRef
     }
   );

package/dist/DEV/bricks/Avatar.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 const Avatar = forwardRef((props, forwardedRef) => {
   const { size = "medium", initials, alt, image, children, ...rest } = props;
   const isDecorative = !alt;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
+    Role.span,
     {
       role: isDecorative ? void 0 : "img",
       "aria-label": isDecorative ? void 0 : alt,

package/dist/DEV/bricks/Badge.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 const Badge = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", variant = "solid", label, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
+    Role.span,
     {
       ...rest,
       "data-kiwi-tone": tone,

package/dist/DEV/bricks/Button.js

@@ -1,18 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Button as AkButton } from "@ariakit/react/button";
 import { forwardRef } from "./~utils.js";
+import { useGhostAlignment } from "./~utils.GhostAligner.js";
 const Button = forwardRef(
   (props, forwardedRef) => {
     const { variant = "solid", tone = "neutral", ...rest } = props;
+    const ghostAlignment = useGhostAlignment();
     return /* @__PURE__ */ jsx(
-      Ariakit.Button,
+      AkButton,
       {
         accessibleWhenDisabled: true,
         ...rest,
         "data-kiwi-variant": variant,
         "data-kiwi-tone": tone,
-        className: cx("\u{1F95D}-button", props.className),
+        "data-kiwi-ghost-align": variant === "ghost" ? ghostAlignment : void 0,
+        className: cx(
+          "\u{1F95D}-button",
+          { "\u{1F95D}-ghost-aligner": variant === "ghost" },
+          props.className
+        ),
         ref: forwardedRef
       }
     );

package/dist/DEV/bricks/Checkbox.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import {
+  Checkbox as AkCheckbox
+} from "@ariakit/react/checkbox";
 import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Checkbox = forwardRef(
@@ -12,7 +14,7 @@ const Checkbox = forwardRef(
         type: "checkable",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Checkbox,
+          AkCheckbox,
           {
             accessibleWhenDisabled: true,
             ...rest,

package/dist/DEV/bricks/Chip.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 import { IconButton } from "./IconButton.js";
 import { Dismiss } from "./Icon.js";
@@ -11,7 +11,7 @@ const Chip = forwardRef((props, forwardedRef) => {
   const labelId = `${baseId}-label`;
   const dismissIconId = `${baseId}-dismiss`;
   return /* @__PURE__ */ jsxs(
-    Ariakit.Role.div,
+    Role.div,
     {
       "data-kiwi-variant": variant,
       ...rest,

package/dist/DEV/bricks/Divider.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Separator } from "@ariakit/react/separator";
 import { forwardRef } from "./~utils.js";
 const Divider = forwardRef((props, forwardedRef) => {
   const { presentational, ...rest } = props;
-  const Comp = presentational ? Ariakit.Role : Ariakit.Separator;
+  const Comp = presentational ? Role : Separator;
   return /* @__PURE__ */ jsx(
     Comp,
     {

package/dist/DEV/bricks/DropdownMenu.js

@@ -1,13 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import * as ListItem from "./ListItem.js";
+import * as ListItem from "./~utils.ListItem.js";
 import { Button } from "./Button.js";
 import { Kbd } from "./Kbd.js";
-import { Checkmark, DisclosureArrow } from "./Icon.js";
-import { forwardRef } from "./~utils.js";
+import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
+import {
+  forwardRef
+} from "./~utils.js";
 import { usePopoverApi } from "./~hooks.js";
+import {
+  MenuProvider,
+  useMenuContext,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItemCheckbox
+} from "@ariakit/react/menu";
+import { predefinedSymbols } from "./Kbd.internal.js";
 function DropdownMenu(props) {
   const {
     children,
@@ -17,7 +27,7 @@ function DropdownMenu(props) {
     defaultOpen: defaultOpenProp
   } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.MenuProvider,
+    MenuProvider,
     {
       placement,
       defaultOpen: defaultOpenProp,
@@ -30,9 +40,9 @@ function DropdownMenu(props) {
 DEV: DropdownMenu.displayName = "DropdownMenu.Root";
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
-    const popover = usePopoverApi(Ariakit.useMenuContext());
+    const popover = usePopoverApi(useMenuContext());
     return /* @__PURE__ */ jsx(
-      Ariakit.Menu,
+      Menu,
       {
         portal: popover.portal,
         unmountOnHide: true,
@@ -51,7 +61,7 @@ const DropdownMenuButton = forwardRef(
   (props, forwardedRef) => {
     const { accessibleWhenDisabled = true, children, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Ariakit.MenuButton,
+      MenuButton,
       {
         accessibleWhenDisabled: true,
         render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
@@ -68,13 +78,9 @@ const DropdownMenuButton = forwardRef(
 DEV: DropdownMenuButton.displayName = "DropdownMenu.Button";
 const DropdownMenuItem = forwardRef(
   (props, forwardedRef) => {
-    const { shortcuts, ...rest } = props;
-    const shortcutKeys = React.useMemo(() => {
-      return typeof shortcuts === "string" ? shortcuts.split("+").map((key) => key.trim()) : [];
-    }, [shortcuts]);
-    const hasShortcuts = shortcutKeys.length > 0;
+    const { label, shortcuts, icon, ...rest } = props;
     return /* @__PURE__ */ jsxs(
-      Ariakit.MenuItem,
+      MenuItem,
       {
         accessibleWhenDisabled: true,
         ...rest,
@@ -82,26 +88,80 @@ const DropdownMenuItem = forwardRef(
         className: cx("\u{1F95D}-dropdown-menu-item", props.className),
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
-          hasShortcuts && /* @__PURE__ */ jsx(ListItem.Decoration, { className: "\u{1F95D}-dropdown-menu-item-shortcuts", children: shortcutKeys.map((key, index) => /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`)) })
+          icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+          /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
+          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
         ]
       }
     );
   }
 );
 DEV: DropdownMenuItem.displayName = "DropdownMenu.Item";
+const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
+  const { shortcuts, ...rest } = props;
+  const shortcutKeys = React.useMemo(() => {
+    return shortcuts.split("+").map((key) => ({
+      key: key.trim(),
+      isSymbol: key in predefinedSymbols
+    }));
+  }, [shortcuts]);
+  return /* @__PURE__ */ jsx(
+    ListItem.Decoration,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
+      ref: forwardedRef,
+      children: shortcutKeys.map(({ key, isSymbol }, index) => {
+        if (isSymbol) {
+          return /* @__PURE__ */ jsx(
+            Kbd,
+            {
+              variant: "ghost",
+              symbol: key
+            },
+            `${key + index}`
+          );
+        }
+        return /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`);
+      })
+    }
+  );
+});
+DEV: DropdownMenuItemShortcuts.displayName = "DropdownMenuItemShortcuts";
+const DropdownMenuIcon = forwardRef(
+  (props, forwardedRef) => {
+    const { icon, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      ListItem.Decoration,
+      {
+        render: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            href: typeof icon === "string" ? icon : void 0,
+            render: React.isValidElement(icon) ? icon : void 0
+          }
+        ),
+        ...rest,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DropdownMenuIcon.displayName = "DropdownMenuIcon";
 const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
+  const { label, icon, ...rest } = props;
   return /* @__PURE__ */ jsxs(
-    Ariakit.MenuItemCheckbox,
+    MenuItemCheckbox,
     {
       accessibleWhenDisabled: true,
       value: props.defaultChecked ? "on" : void 0,
-      ...props,
+      ...rest,
       render: /* @__PURE__ */ jsx(ListItem.Root, { render: props.render }),
       className: cx("\u{1F95D}-dropdown-menu-item", props.className),
       ref: forwardedRef,
       children: [
-        /* @__PURE__ */ jsx(ListItem.Content, { children: props.children }),
+        icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+        /* @__PURE__ */ jsx(ListItem.Content, { children: label }),
         /* @__PURE__ */ jsx(
           ListItem.Decoration,
           {

package/dist/DEV/bricks/Field.js

@@ -1,7 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
+import { Role } from "@ariakit/react/role";
+import {
+  useCollectionStore,
+  Collection,
+  useCollectionContext,
+  CollectionItem
+} from "@ariakit/react/collection";
+import { useStoreState } from "@ariakit/react/store";
 import { forwardRef } from "./~utils.js";
 const Field = forwardRef((props, forwardedRef) => {
   const { layout, ...rest } = props;
@@ -9,7 +16,7 @@ const Field = forwardRef((props, forwardedRef) => {
     FieldCollection,
     {
       render: /* @__PURE__ */ jsx(
-        Ariakit.Role.div,
+        Role.div,
         {
           ...rest,
           className: cx("\u{1F95D}-field", props.className),
@@ -22,13 +29,10 @@ const Field = forwardRef((props, forwardedRef) => {
 });
 DEV: Field.displayName = "Field";
 function FieldCollection(props) {
-  const fieldElementCollection = Ariakit.useCollectionStore({
+  const fieldElementCollection = useCollectionStore({
     defaultItems: []
   });
-  const renderedItems = Ariakit.useStoreState(
-    fieldElementCollection,
-    "renderedItems"
-  );
+  const renderedItems = useStoreState(fieldElementCollection, "renderedItems");
   const [controlType, controlIndex] = React.useMemo(() => {
     const controlIndex2 = renderedItems.findIndex(
       (item) => item.elementType === "control"
@@ -43,7 +47,7 @@ function FieldCollection(props) {
     return labelIndex < controlIndex ? "before" : "after";
   }, [renderedItems, controlIndex]);
   return /* @__PURE__ */ jsx(
-    Ariakit.Collection,
+    Collection,
     {
       ...props,
       store: fieldElementCollection,
@@ -53,10 +57,10 @@ function FieldCollection(props) {
   );
 }
 function FieldControl(props) {
-  const store = Ariakit.useCollectionContext();
+  const store = useCollectionContext();
   const generatedId = React.useId();
   const { id = store ? generatedId : void 0, type, ...rest } = props;
-  const renderedItems = Ariakit.useStoreState(store, "renderedItems");
+  const renderedItems = useStoreState(store, "renderedItems");
   const describedBy = React.useMemo(() => {
     const idRefList = renderedItems?.filter(
       (item) => item.elementType === "description"
@@ -72,17 +76,17 @@ function FieldControl(props) {
     [type]
   );
   return /* @__PURE__ */ jsx(
-    Ariakit.CollectionItem,
+    CollectionItem,
     {
       id,
       getItem: getData,
-      render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest, "aria-describedby": describedBy })
+      render: /* @__PURE__ */ jsx(Role, { ...rest, "aria-describedby": describedBy })
     }
   );
 }
 function FieldLabel(props) {
-  const store = Ariakit.useCollectionContext();
-  const renderedItems = Ariakit.useStoreState(store, "renderedItems");
+  const store = useCollectionContext();
+  const renderedItems = useStoreState(store, "renderedItems");
   const fieldId = React.useMemo(
     () => renderedItems?.find(
       (item) => item.elementType === "control"
@@ -97,10 +101,10 @@ function FieldLabel(props) {
     []
   );
   return /* @__PURE__ */ jsx(
-    Ariakit.CollectionItem,
+    CollectionItem,
     {
       getItem: getData,
-      render: /* @__PURE__ */ jsx(Ariakit.Role.label, { ...props, htmlFor: fieldId })
+      render: /* @__PURE__ */ jsx(Role.label, { ...props, htmlFor: fieldId })
     }
   );
 }
@@ -114,7 +118,7 @@ function FieldDescription(props) {
     }),
     []
   );
-  return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
+  return /* @__PURE__ */ jsx(CollectionItem, { ...rest, id, getItem: getData });
 }
 export {
   Field,

package/dist/DEV/bricks/Icon.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 const Icon = forwardRef((props, forwardedRef) => {
   const { href, size, alt, ...rest } = props;
   const iconId = toIconId(size);
   const isDecorative = !alt;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.svg,
+    Role.svg,
     {
       "aria-hidden": isDecorative ? "true" : void 0,
       role: isDecorative ? void 0 : "img",
@@ -42,7 +42,7 @@ const DisclosureArrow = forwardRef(
       {
         ...rest,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
+          Role.svg,
           {
             width: "16",
             height: "16",
@@ -66,7 +66,7 @@ const Checkmark = forwardRef(
       {
         ...props,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
+          Role.svg,
           {
             width: "16",
             height: "16",
@@ -96,7 +96,7 @@ const Dismiss = forwardRef(
       {
         ...props,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
+          Role.svg,
           {
             width: "16",
             height: "16",

package/dist/DEV/bricks/IconButton.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { useToolbarContext, ToolbarItem } from "@ariakit/react/toolbar";
 import { Button } from "./Button.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Icon } from "./Icon.js";
@@ -8,19 +9,26 @@ import { Tooltip } from "./Tooltip.js";
 import { forwardRef } from "./~utils.js";
 const IconButton = forwardRef(
   (props, forwardedRef) => {
-    const { label, icon, isActive, labelVariant, ...rest } = props;
-    const toolbar = Ariakit.useToolbarContext();
+    const { label, icon, isActive, labelVariant, dot, ...rest } = props;
+    const baseId = React.useId();
+    const labelId = `${baseId}-label`;
+    const dotId = `${baseId}-dot`;
+    const toolbar = useToolbarContext();
     const button = /* @__PURE__ */ jsxs(
       Button,
       {
         "aria-pressed": isActive,
+        "aria-labelledby": labelId,
+        "aria-describedby": dot ? dotId : void 0,
         ...rest,
-        render: toolbar ? /* @__PURE__ */ jsx(Ariakit.ToolbarItem, { render: props.render }) : props.render,
+        "data-kiwi-dot": dot ? "true" : void 0,
+        render: toolbar ? /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }) : props.render,
         className: cx("\u{1F95D}-icon-button", props.className),
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { children: label }),
-          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon
+          /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
+          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+          dot ? /* @__PURE__ */ jsx(VisuallyHidden, { id: dotId, "aria-hidden": "true", children: dot }) : null
         ]
       }
     );

package/dist/DEV/bricks/Kbd.internal.js

@@ -0,0 +1,19 @@
+const predefinedSymbols = {
+  Backspace: "\u232B",
+  Command: "\u2318",
+  Control: "Ctrl",
+  Down: "\u2193",
+  Eject: "\u23CF",
+  Enter: "\u21B5",
+  Escape: "Esc",
+  Left: "\u2190",
+  Option: "\u2325",
+  Right: "\u2192",
+  Shift: "\u21E7",
+  Space: "\u2423",
+  Tab: "Tab",
+  Up: "\u2191"
+};
+export {
+  predefinedSymbols
+};

package/dist/DEV/bricks/Kbd.js

@@ -1,24 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
-const predefinedSymbols = {
-  Backspace: "\u232B",
-  Command: "\u2318",
-  Control: "Ctrl",
-  Down: "\u2193",
-  Eject: "\u23CF",
-  Enter: "\u21B5",
-  Escape: "Esc",
-  Left: "\u2190",
-  Option: "\u2325",
-  Right: "\u2192",
-  Shift: "\u21E7",
-  Space: "\u2423",
-  Tab: "Tab",
-  Up: "\u2191"
-};
+import { predefinedSymbols } from "./Kbd.internal.js";
 const Kbd = forwardRef((props, forwardedRef) => {
   const { variant = "solid", symbol, children, ...rest } = props;
   DEV: {
@@ -36,7 +21,7 @@ const Kbd = forwardRef((props, forwardedRef) => {
     ] });
   }
   return /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...rest,
       "data-kiwi-variant": variant,

package/dist/DEV/bricks/Label.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 import { FieldLabel } from "./Field.js";
 const Label = forwardRef((props, forwardedRef) => {
@@ -8,7 +8,7 @@ const Label = forwardRef((props, forwardedRef) => {
     FieldLabel,
     {
       render: /* @__PURE__ */ jsx(
-        Ariakit.Role.label,
+        Role.label,
         {
           ...props,
           className: cx("\u{1F95D}-label", props.className),

package/dist/DEV/bricks/Radio.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import {
+  Radio as AkRadio
+} from "@ariakit/react/radio";
 import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
@@ -11,7 +13,7 @@ const Radio = forwardRef((props, forwardedRef) => {
       type: "checkable",
       id,
       render: /* @__PURE__ */ jsx(
-        Ariakit.Radio,
+        AkRadio,
         {
           accessibleWhenDisabled: true,
           ...rest,