@itwin/itwinui-react 5.0.0-alpha.12 → 5.0.0-alpha.14

package/dist/bricks/Checkbox.js

@@ -1,10 +1,8 @@
 import { jsx } from "react/jsx-runtime";
+import { Checkbox as AkCheckbox } from "@ariakit/react/checkbox";
 import cx from "classnames";
-import {
-  Checkbox as AkCheckbox
-} from "@ariakit/react/checkbox";
-import { forwardRef } from "./~utils.js";
 import { useFieldControlType } from "./Field.internal.js";
+import { forwardRef } from "./~utils.js";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
     useFieldControlType("checkable");

package/dist/bricks/Chip.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface ChipProps extends Omit<BaseProps<"div">, "children"> {
     /**
      * The label displayed inside the chip.

package/dist/bricks/Chip.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
 import * as React from "react";
-import { Role } from "@ariakit/react/role";
-import { forwardRef } from "./~utils.js";
-import { IconButton } from "./IconButton.js";
 import { Dismiss } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { forwardRef } from "./~utils.js";
 const Chip = forwardRef((props, forwardedRef) => {
   const { variant = "solid", onDismiss, label, ...rest } = props;
   const baseId = React.useId();

package/dist/bricks/Description.d.ts

@@ -1,4 +1,4 @@
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface DescriptionProps extends BaseProps {
     /**
      * The tone of the description.

package/dist/bricks/Description.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "./~utils.js";
 import cx from "classnames";
 import { Text } from "./Text.js";
+import { forwardRef } from "./~utils.js";
 const Description = forwardRef(
   (props, forwardedRef) => {
     const { tone, ...rest } = props;

package/dist/bricks/Divider.d.ts

@@ -1,5 +1,5 @@
-import { type SeparatorProps } from "@ariakit/react/separator";
-import { type BaseProps } from "./~utils.js";
+import type { SeparatorProps } from "@ariakit/react/separator";
+import type { BaseProps } from "./~utils.js";
 interface DividerProps extends BaseProps<"hr">, Pick<SeparatorProps, "orientation"> {
     /**
      * If true, the divider will be purely presentational and will not have any associated semantics.

package/dist/bricks/Divider.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import cx from "classnames";
 import { Role } from "@ariakit/react/role";
 import { Separator } from "@ariakit/react/separator";
+import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Divider = forwardRef((props, forwardedRef) => {
   const { presentational, ...rest } = props;

package/dist/bricks/DropdownMenu.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { type AnyString, type BaseProps, type FocusableProps } from "./~utils.js";
-import { type MenuItemCheckboxProps, type MenuProviderProps } from "@ariakit/react/menu";
-import { type PredefinedSymbol } from "./Kbd.internal.js";
+import type { MenuItemCheckboxProps, MenuProviderProps } from "@ariakit/react/menu";
+import type { PredefinedSymbol } from "./Kbd.internal.js";
+import type { AnyString, BaseProps, FocusableProps } from "./~utils.js";
 interface DropdownMenuProps extends Pick<MenuProviderProps, "children" | "placement" | "open" | "setOpen" | "defaultOpen"> {
 }
 /**
@@ -59,6 +59,8 @@ declare const DropdownMenuButton: React.ForwardRefExoticComponent<DropdownMenuBu
 interface DropdownMenuItemProps extends Omit<FocusableProps<"button">, "children">, Partial<Pick<DropdownMenuItemShortcutsProps, "shortcuts"> & Pick<DropdownMenuIconProps, "icon">> {
     /** The primary text label for the menu-item. */
     label: React.ReactNode;
+    /** Dot shown on the right end of the menu-item. Value will be used as accessible description. */
+    unstable_dot?: string;
 }
 /**
  * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.

package/dist/bricks/DropdownMenu.js

@@ -1,26 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import cx from "classnames";
-import * as ListItem from "./~utils.ListItem.js";
-import { Button } from "./Button.js";
 import { Button as ButtonAk } from "@ariakit/react/button";
-import { Kbd } from "./Kbd.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
+  MenuItemCheckbox,
+  MenuProvider,
+  useMenuContext
 } from "@ariakit/react/menu";
+import { usePopoverContext } from "@ariakit/react/popover";
 import { useStoreState } from "@ariakit/react/store";
+import cx from "classnames";
+import * as React from "react";
+import { Button } from "./Button.js";
+import { Checkmark, DisclosureArrow, Icon } from "./Icon.js";
 import { predefinedSymbols } from "./Kbd.internal.js";
-import { usePopoverContext } from "@ariakit/react/popover";
+import { Kbd } from "./Kbd.js";
+import { usePopoverApi } from "./~hooks.js";
+import { Dot } from "./~utils.Dot.js";
+import * as ListItem from "./~utils.ListItem.js";
+import { forwardRef } from "./~utils.js";
 function DropdownMenuRoot(props) {
   const {
     children,
@@ -81,7 +80,8 @@ const DropdownMenuButton = forwardRef(
 );
 const DropdownMenuItem = forwardRef(
   (props, forwardedRef) => {
-    const { label, shortcuts, icon, ...rest } = props;
+    const { label, shortcuts, icon, unstable_dot, ...rest } = props;
+    const dotId = React.useId();
     return /* @__PURE__ */ jsxs(
       MenuItem,
       {
@@ -93,6 +93,7 @@ const DropdownMenuItem = forwardRef(
               ButtonAk,
               {
                 accessibleWhenDisabled: true,
+                "aria-describedby": dotId,
                 ...rest,
                 className: cx("\u{1F95D}-dropdown-menu-item", props.className),
                 ref: forwardedRef
@@ -103,7 +104,13 @@ const DropdownMenuItem = forwardRef(
         children: [
           icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
           /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
-          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null
+          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
+          unstable_dot ? /* @__PURE__ */ jsx(
+            ListItem.Decoration,
+            {
+              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-dropdown-menu-item-dot", children: unstable_dot })
+            }
+          ) : null
         ]
       }
     );

package/dist/bricks/ErrorRegion.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import type { BaseProps } from "./~utils.js";
+interface ErrorRegionRootProps extends Omit<BaseProps, "children"> {
+    /**
+     * Label for the error header, usually indicating the number of errors displayed.
+     * By default this is used as a name of the region navigational landmark, however an explicit `aria-label` or `aria-labelledby` is strongly suggested.
+     *
+     * Use `undefined` if you don't want to display errors rather than conditionally rendering the component.
+     */
+    label?: React.ReactNode;
+    /**
+     * A list of error items where each item describes an individual error. Must be a list of `ErrorRegion.Item` components.
+     */
+    items?: React.ReactNode;
+    /**
+     * The controlled expanded state of the error.
+     */
+    expanded?: boolean;
+    /**
+     * Callback fired when the error is expanded.
+     *
+     * Should be used with the `expanded` prop.
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+}
+/**
+ * A collapsible region that displays a list of error messages, which might originate from another
+ * component, such as `Tree`.
+ *
+ * This component is rendered as a [region landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/region.html)
+ * and should be labelled either using `label` or `aria-label`/`aria-labelledby`. Changes to the `label` prop will be
+ * announced communicated using a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions).
+ *
+ * Example:
+ * ```tsx
+ * <ErrorRegion.Root
+ *   label="3 issues found"
+ *   items={
+ *     <>
+ *       <ErrorRegion.Item message="…" />
+ *       <ErrorRegion.Item message="…" />
+ *       <ErrorRegion.Item message="…" />
+ *     </>
+ *   }
+ * />
+ */
+declare const ErrorRegionRoot: React.ForwardRefExoticComponent<ErrorRegionRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface ErrorRegionItemProps extends Omit<BaseProps, "children"> {
+    /**
+     * The error message. Consumers might consider using `Anchor` component to link to the associated element in the UI.
+     */
+    message?: React.ReactNode;
+    /**
+     * The `id` of the message node which can be used to semantically associate the error item with the related UI item i.e. `Tree.Item`.
+     */
+    messageId?: string;
+    /**
+     * The actions available for this item. Must be a list of anchors, each rendered as a button using `<Anchor render={<button />} />`.
+     */
+    actions?: React.ReactNode;
+}
+/**
+ * An individual error item within the `ErrorRegion` component. It displays an error message and optional actions.
+ *
+ * The `messageId` prop can be used to semantically associate the error item with the related UI item, such as a `Tree.Item`.
+ *
+ * Example:
+ * ```tsx
+ * <ErrorRegion.Item
+ *   message={<>Something went wrong with <Anchor href="item-10001">Item 10001</Anchor>.</>}
+ *   messageId="item-10001-error"
+ *   actions={<Button>Retry</Button>}
+ * />
+ *
+ * <Tree.Item
+ *   id="item-10001"
+ *   label="Item 10001"
+ *   error="item-10001-error"
+ * />
+ * ```
+ */
+declare const ErrorRegionItem: React.ForwardRefExoticComponent<ErrorRegionItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { ErrorRegionRoot as Root, ErrorRegionItem as Item };

package/dist/bricks/ErrorRegion.js

@@ -0,0 +1,104 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogDisclosure,
+  DialogProvider
+} from "@ariakit/react/dialog";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
+import * as React from "react";
+import { Button } from "./Button.js";
+import { ChevronDown, StatusWarning } from "./Icon.js";
+import { IconButtonPresentation } from "./IconButton.internal.js";
+import { Text } from "./Text.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { useControlledState } from "./~hooks.js";
+import { forwardRef } from "./~utils.js";
+const ErrorRegionRoot = forwardRef(
+  (props, forwardedRef) => {
+    const { label, items, expanded, onExpandedChange, ...rest } = props;
+    const labelId = React.useId();
+    const sectionLabelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelId);
+    const [open, setOpen] = useControlledState(
+      false,
+      expanded,
+      onExpandedChange
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": true, children: label }),
+      /* @__PURE__ */ jsx(DialogProvider, { open, setOpen, children: /* @__PURE__ */ jsx(
+        Role.section,
+        {
+          ...rest,
+          "aria-labelledby": sectionLabelledBy,
+          className: cx("\u{1F95D}-error-region", props.className),
+          "data-kiwi-visible": !!label,
+          "data-kiwi-expanded": open,
+          ref: forwardedRef,
+          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", children: [
+            /* @__PURE__ */ jsxs(
+              DialogDisclosure,
+              {
+                className: "\u{1F95D}-error-region-header",
+                render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
+                children: [
+                  /* @__PURE__ */ jsx(StatusWarning, { className: "\u{1F95D}-error-region-icon" }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      render: /* @__PURE__ */ jsx("span", {}),
+                      id: labelId,
+                      className: "\u{1F95D}-error-region-label",
+                      variant: "body-sm",
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(IconButtonPresentation, { inert: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Dialog,
+              {
+                className: "\u{1F95D}-error-region-dialog",
+                portal: false,
+                modal: false,
+                autoFocusOnShow: false,
+                "aria-labelledby": labelId,
+                children: /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-items", role: "list", children: items })
+              }
+            )
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+const ErrorRegionItem = forwardRef(
+  (props, forwardedRef) => {
+    const generatedId = React.useId();
+    const {
+      message,
+      messageId = `${generatedId}-message`,
+      actions,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      Role.div,
+      {
+        ...rest,
+        role: "listitem",
+        className: cx("\u{1F95D}-error-region-item", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
+          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
+        ]
+      }
+    );
+  }
+);
+export {
+  ErrorRegionItem as Item,
+  ErrorRegionRoot as Root
+};

package/dist/bricks/Field.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type CollectionItemProps } from "@ariakit/react/collection";
-import { type BaseProps } from "./~utils.js";
+import type { CollectionItemProps } from "@ariakit/react/collection";
+import type { BaseProps } from "./~utils.js";
 interface FieldRootProps extends BaseProps {
     /**
      * Allows overriding the default block layout for text controls.
@@ -50,6 +50,12 @@ interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "ren
 /**
  * The control component for the field.
  *
+ * Use the `render` prop to render the control component.
+ *
+ * ```tsx
+ * <Field.Control render={<TextBox.Input />} />
+ * ```
+ *
  * If the rendered component uses a compositional API, then use a function
  * within `render` to apply the `controlProps` to the correct sub-component:
  *

package/dist/bricks/Field.internal.d.ts

@@ -1,5 +1,6 @@
+import { useCollectionStore } from "@ariakit/react/collection";
 import * as React from "react";
-import { useCollectionStore, type CollectionProps } from "@ariakit/react/collection";
+import type { CollectionProps } from "@ariakit/react/collection";
 /**
  * Ariakit’s unexported `CollectionStoreItem` type inferred.
  * @private

package/dist/bricks/Field.internal.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import {
-  useCollectionStore,
-  Collection
-} from "@ariakit/react/collection";
+import { Collection, useCollectionStore } from "@ariakit/react/collection";
 import { useStoreState } from "@ariakit/react/store";
+import * as React from "react";
 function FieldCollection(props) {
   const fieldElementCollection = useCollectionStore({
     defaultItems: []

package/dist/bricks/Field.js

@@ -1,19 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import cx from "classnames";
-import { Role } from "@ariakit/react/role";
 import {
-  useCollectionContext,
-  CollectionItem
+  CollectionItem,
+  useCollectionContext
 } from "@ariakit/react/collection";
+import { Role } from "@ariakit/react/role";
 import { useStoreState } from "@ariakit/react/store";
-import { forwardRef } from "./~utils.js";
-import {
-  FieldCollection,
-  FieldControlTypeContext
-} from "./Field.internal.js";
-import { Label } from "./Label.js";
+import cx from "classnames";
+import * as React from "react";
 import { Description } from "./Description.js";
+import { FieldCollection, FieldControlTypeContext } from "./Field.internal.js";
+import { Label } from "./Label.js";
+import { forwardRef } from "./~utils.js";
 const FieldRoot = forwardRef((props, forwardedRef) => {
   const { layout, ...rest } = props;
   return /* @__PURE__ */ jsx(
@@ -34,11 +31,12 @@ const FieldRoot = forwardRef((props, forwardedRef) => {
 const FieldLabel = forwardRef(
   (props, forwardedRef) => {
     const store = useCollectionContext();
-    const renderedItems = useStoreState(store, "renderedItems");
+    const renderedItems = useStoreState(
+      store,
+      "renderedItems"
+    );
     const fieldId = React.useMemo(
-      () => renderedItems?.find(
-        (item) => item.elementType === "control"
-      )?.id,
+      () => renderedItems?.find((item) => item.elementType === "control")?.id,
       [renderedItems]
     );
     const getData = React.useCallback(
@@ -84,7 +82,10 @@ const FieldControl = forwardRef(
     const store = useCollectionContext();
     const generatedId = React.useId();
     const { id = store ? generatedId : void 0, ...rest } = props;
-    const renderedItems = useStoreState(store, "renderedItems");
+    const renderedItems = useStoreState(
+      store,
+      "renderedItems"
+    );
     const describedBy = React.useMemo(() => {
       const idRefList = renderedItems?.filter(
         (item) => item.elementType === "description" || item.elementType === "error"

package/dist/bricks/Icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface IconProps extends Omit<BaseProps<"svg">, "children"> {
     /**
      * URL of the symbol sprite.
@@ -74,4 +74,7 @@ export declare const StatusWarning: React.ForwardRefExoticComponent<StatusWarnin
 interface MoreHorizontalProps extends Omit<BaseProps<"svg">, "children"> {
 }
 export declare const MoreHorizontal: React.ForwardRefExoticComponent<MoreHorizontalProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface ChevronDownProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const ChevronDown: React.ForwardRefExoticComponent<ChevronDownProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/bricks/Icon.js

@@ -1,18 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import cx from "classnames";
 import { Role } from "@ariakit/react/role";
-import {
-  forwardRef,
-  getOwnerDocument,
-  parseDOM
-} from "./~utils.js";
+import cx from "classnames";
+import * as React from "react";
 import {
   HtmlSanitizerContext,
   spriteSheetId,
   useRootNode
 } from "./Root.internal.js";
 import { useLatestRef, useSafeContext } from "./~hooks.js";
+import { forwardRef, getOwnerDocument, parseDOM } from "./~utils.js";
 const Icon = forwardRef((props, forwardedRef) => {
   const { href: hrefProp, size, alt, ...rest } = props;
   const isDecorative = !alt;
@@ -245,8 +241,32 @@ const MoreHorizontal = forwardRef(
     );
   }
 );
+const ChevronDown = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: /* @__PURE__ */ jsx("path", { d: "M4.146 6.146a.5.5 0 0 1 .708 0L8 9.293l3.146-3.147a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 0 1 0-.708Z" })
+          }
+        ),
+        className: cx("\u{1F95D}-chevron-down", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   Checkmark,
+  ChevronDown,
   DisclosureArrow,
   Dismiss,
   Icon,

package/dist/bricks/IconButton.internal.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { Button } from "./Button.js";
+import type { BaseProps } from "./~utils.js";
+export declare const IconButtonContext: React.Context<{
+    iconSize: "regular" | "large";
+}>;
+interface IconButtonPresentationProps extends BaseProps<"span">, Pick<React.ComponentProps<typeof Button>, "variant"> {
+}
+export declare const IconButtonPresentation: React.ForwardRefExoticComponent<IconButtonPresentationProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+export {};

package/dist/bricks/IconButton.internal.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
+import * as React from "react";
+import { forwardRef } from "./~utils.js";
+const IconButtonContext = React.createContext({ iconSize: "regular" });
+const IconButtonPresentation = forwardRef((props, forwardedRef) => {
+  const { variant, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Role.span,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-icon-button", "\u{1F95D}-button", props.className),
+      "data-kiwi-variant": variant,
+      ref: forwardedRef
+    }
+  );
+});
+export {
+  IconButtonContext,
+  IconButtonPresentation
+};

package/dist/bricks/IconButton.js

@@ -1,11 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import cx from "classnames";
-import { useToolbarContext, ToolbarItem } from "@ariakit/react/toolbar";
 import { Button } from "./Button.js";
-import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Icon } from "./Icon.js";
+import {
+  IconButtonContext,
+  IconButtonPresentation
+} from "./IconButton.internal.js";
 import { Tooltip } from "./Tooltip.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { Dot } from "./~utils.Dot.js";
 import { forwardRef } from "./~utils.js";
 const IconButton = forwardRef(
   (props, forwardedRef) => {
@@ -13,23 +16,25 @@ const IconButton = forwardRef(
     const baseId = React.useId();
     const labelId = `${baseId}-label`;
     const dotId = `${baseId}-dot`;
-    const toolbar = useToolbarContext();
-    const button = /* @__PURE__ */ jsxs(
-      Button,
+    const { iconSize } = React.useContext(IconButtonContext);
+    const button = /* @__PURE__ */ jsx(
+      IconButtonPresentation,
       {
-        "aria-pressed": isActive,
-        "aria-labelledby": labelId,
-        "aria-describedby": dot ? dotId : void 0,
-        ...rest,
-        "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, { 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
-        ]
+        render: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-pressed": isActive,
+            "aria-labelledby": labelId,
+            "aria-describedby": dot ? dotId : void 0,
+            ...rest,
+            ref: forwardedRef,
+            children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
+              typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon, size: iconSize }) : icon,
+              dot ? /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-icon-button-dot", children: dot }) : null
+            ]
+          }
+        )
       }
     );
     if (labelVariant === "visually-hidden") {

package/dist/bricks/Kbd.d.ts

@@ -1,5 +1,5 @@
-import { type BaseProps } from "./~utils.js";
-import { type PredefinedSymbol } from "./Kbd.internal.js";
+import type { PredefinedSymbol } from "./Kbd.internal.js";
+import type { BaseProps } from "./~utils.js";
 interface KbdProps extends BaseProps<"kbd"> {
     /** @default "solid" */
     variant?: "solid" | "muted" | "ghost";

package/dist/bricks/Kbd.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import cx from "classnames";
 import { Role } from "@ariakit/react/role";
-import { forwardRef } from "./~utils.js";
-import { VisuallyHidden } from "./VisuallyHidden.js";
+import cx from "classnames";
 import { predefinedSymbols } from "./Kbd.internal.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { forwardRef } from "./~utils.js";
 const Kbd = forwardRef((props, forwardedRef) => {
   const { variant = "solid", symbol, children, ...rest } = props;
   let content = children;

package/dist/bricks/Label.d.ts

@@ -1,4 +1,4 @@
-import { type BaseProps } from "./~utils.js";
+import type { BaseProps } from "./~utils.js";
 interface LabelProps extends BaseProps<"label"> {
 }
 /**