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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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.
+- (soft breaking) Removed `children` from `<Tree.Item>` prop types.
+- Updated `DropdownMenu` padding.
+
 ## 5.0.0-alpha.7
 
 - Added new `<Avatar>` component.

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/README.md

@@ -1,10 +1,10 @@
 # @itwin/itwinui-react
 
-A React component library for the Kiwi design system.
+A React component library for the next evolution of the iTwinUI design system.
 
 ## Usage
 
-To use components from the Kiwi design system in your app, you’ll need to wrap your app’s UI with Kiwi’s `<Root>` component, and specify the required `colorScheme` and `density` props:
+To use components from the iTwinUI design system in your app, you’ll need to wrap your app’s UI with iTwinUI's `<Root>` component, and specify the required `colorScheme` and `density` props:
 
 ```jsx
 import { Root } from "@itwin/itwinui-react/bricks";
@@ -12,18 +12,18 @@ import { Root } from "@itwin/itwinui-react/bricks";
 export function App() {
 	return (
 		<Root colorScheme="dark" density="dense">
-			{/* Use Kiwi design system components here */}
+			{/* Use design system components here */}
 		</Root>
 	);
 }
 ```
 
-This will ensure Kiwi’s styles are loaded to either the document or the encompassing shadow root.
+This will ensure iTwinUI's styles are loaded to either the document or the encompassing shadow root.
 
 Once that’s in place you can import and use components from `@itwin/itwinui-react/bricks`.
 
 ## Contributing
 
-Are you interested in helping kiwi grow and expand? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/kiwi/issues).
+Are you interested in helping iTwinUI grow and expand? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/design-system/issues).
 
-If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/kiwi/blob/main/CONTRIBUTING.md) for more information.
+If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/design-system/blob/main/CONTRIBUTING.md) for more information.

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,12 +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, supportsPopover } 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,
@@ -15,21 +26,9 @@ function DropdownMenu(props) {
     setOpen: setOpenProp,
     defaultOpen: defaultOpenProp
   } = props;
-  const store = Ariakit.useMenuStore();
-  const open = Ariakit.useStoreState(store, (state) => state.open);
-  const popover = Ariakit.useStoreState(store, (state) => state.popoverElement);
-  React.useEffect(
-    function syncPopoverWithOpenState() {
-      if (popover?.isConnected) {
-        popover?.togglePopover?.(open);
-      }
-    },
-    [open, popover]
-  );
   return /* @__PURE__ */ jsx(
-    Ariakit.MenuProvider,
+    MenuProvider,
     {
-      store,
       placement,
       defaultOpen: defaultOpenProp,
       open: openProp,
@@ -41,15 +40,16 @@ function DropdownMenu(props) {
 DEV: DropdownMenu.displayName = "DropdownMenu.Root";
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
+    const popover = usePopoverApi(useMenuContext());
     return /* @__PURE__ */ jsx(
-      Ariakit.Menu,
+      Menu,
       {
-        portal: !supportsPopover,
+        portal: popover.portal,
         unmountOnHide: true,
         ...props,
         gutter: 4,
-        style: { zIndex: supportsPopover ? void 0 : 9999, ...props.style },
-        wrapperProps: { popover: "manual" },
+        style: { ...popover.style, ...props.style },
+        wrapperProps: popover.wrapperProps,
         className: cx("\u{1F95D}-dropdown-menu", props.className),
         ref: forwardedRef
       }
@@ -61,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: [
@@ -78,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,
@@ -92,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),