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

package/dist/bricks/Field.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import { useCollectionStore, type CollectionItemProps } from "@ariakit/react/collection";
 import { type BaseProps } from "./~utils.js";
 interface FieldProps extends BaseProps {
     /**
@@ -28,14 +28,14 @@ interface FieldProps extends BaseProps {
  * - `Switch`
  */
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof Ariakit.useCollectionStore>["item"]>>;
+type CollectionStoreItem = NonNullable<ReturnType<ReturnType<typeof useCollectionStore>["item"]>>;
 interface FieldCollectionStoreItem extends CollectionStoreItem {
     /** The type of field element being tracked */
     elementType: "label" | "control" | "description";
     /** If a control, the type of control. */
     controlType?: "textlike" | "checkable";
 }
-interface FieldCollectionItemControlProps extends Pick<Ariakit.CollectionItemProps, "render" | "id"> {
+interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "render" | "id"> {
     type: FieldCollectionStoreItem["controlType"];
 }
 /**
@@ -45,9 +45,9 @@ export declare function FieldControl(props: FieldCollectionItemControlProps): im
 /**
  * An element tracked as a label in the `Field`’s collection.
  */
-export declare function FieldLabel(props: Pick<Ariakit.CollectionItemProps, "render">): import("react/jsx-runtime").JSX.Element;
+export declare function FieldLabel(props: Pick<CollectionItemProps, "render">): import("react/jsx-runtime").JSX.Element;
 /**
  * An element tracked as a description in the `Field`’s collection.
  */
-export declare function FieldDescription(props: Pick<Ariakit.CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
+export declare function FieldDescription(props: Pick<CollectionItemProps, "render" | "id">): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/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),
@@ -21,13 +28,10 @@ const Field = forwardRef((props, forwardedRef) => {
   );
 });
 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"
@@ -42,7 +46,7 @@ function FieldCollection(props) {
     return labelIndex < controlIndex ? "before" : "after";
   }, [renderedItems, controlIndex]);
   return /* @__PURE__ */ jsx(
-    Ariakit.Collection,
+    Collection,
     {
       ...props,
       store: fieldElementCollection,
@@ -52,10 +56,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"
@@ -71,17 +75,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"
@@ -96,10 +100,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 })
     }
   );
 }
@@ -113,7 +117,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/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",
@@ -41,7 +41,7 @@ const DisclosureArrow = forwardRef(
       {
         ...rest,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
+          Role.svg,
           {
             width: "16",
             height: "16",
@@ -64,7 +64,7 @@ const Checkmark = forwardRef(
       {
         ...props,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
+          Role.svg,
           {
             width: "16",
             height: "16",
@@ -93,7 +93,7 @@ const Dismiss = forwardRef(
       {
         ...props,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.svg,
+          Role.svg,
           {
             width: "16",
             height: "16",

package/dist/bricks/IconButton.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { Button } from "./Button.js";
 interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>, "children" | "tone"> {
     /**
@@ -10,7 +11,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
     /**
      * Icon to be displayed inside the button.
      *
-     * Can be a URL of an SVG from the `kiwi-icons` package,
+     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package,
      * or a custom JSX icon.
      */
     icon: string | React.JSX.Element;
@@ -23,11 +24,26 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
      * @default "tooltip"
      */
     labelVariant?: "tooltip" | "visually-hidden";
+    /**
+     * A small dot displayed in the corner of the icon.
+     *
+     * The value of this prop gets used as the button's "accessible description".
+     *
+     * Example:
+     * ```tsx
+     * <IconButton
+     *   label="Messages"
+     *   dot="You have unread messages"
+     *   icon={…}
+     * />
+     * ```
+     */
+    dot?: string;
 }
 /**
  * An icon-only button, with a required accessible name.
  *
- * The icon can be a URL from the `kiwi-icons` package:
+ * The icon can be a URL from the `@itwin/itwinui-icons` package:
  * ```tsx
  * <IconButton
  *   label="Reveal full content"
@@ -56,7 +72,7 @@ interface IconButtonBaseProps extends Omit<React.ComponentProps<typeof Button>,
  * />
  * ```
  */
-export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
+export declare const IconButton: React.ForwardRefExoticComponent<(Omit<IconButtonBaseProps & {
     variant: "ghost";
     /**
      * Whether the button is in a toggled state and currently "active" (toggled on).
@@ -75,5 +91,5 @@ export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit
 }, "ref"> | Omit<IconButtonBaseProps & {
     variant?: Omit<React.ComponentProps<typeof Button>["variant"], "ghost">;
     isActive?: never;
-}, "ref">) & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+}, "ref">) & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
 export {};

package/dist/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/bricks/Kbd.d.ts

@@ -1,20 +1,5 @@
 import { type BaseProps } from "./~utils.js";
-declare const predefinedSymbols: {
-    readonly Backspace: "⌫";
-    readonly Command: "⌘";
-    readonly Control: "Ctrl";
-    readonly Down: "↓";
-    readonly Eject: "⏏";
-    readonly Enter: "↵";
-    readonly Escape: "Esc";
-    readonly Left: "←";
-    readonly Option: "⌥";
-    readonly Right: "→";
-    readonly Shift: "⇧";
-    readonly Space: "␣";
-    readonly Tab: "Tab";
-    readonly Up: "↑";
-};
+import { type PredefinedSymbol } from "./Kbd.internal.js";
 interface KbdProps extends BaseProps<"kbd"> {
     /** @default "solid" */
     variant?: "solid" | "muted" | "ghost";
@@ -27,7 +12,7 @@ interface KbdProps extends BaseProps<"kbd"> {
      * <Kbd symbol="Control" />
      * ```
      */
-    symbol?: keyof typeof predefinedSymbols;
+    symbol?: PredefinedSymbol;
 }
 /**
  * A styled wrapper over the HTML `<kbd>` element. This is typically

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

@@ -0,0 +1,17 @@
+export type PredefinedSymbol = keyof typeof predefinedSymbols;
+export declare const predefinedSymbols: {
+    readonly Backspace: "⌫";
+    readonly Command: "⌘";
+    readonly Control: "Ctrl";
+    readonly Down: "↓";
+    readonly Eject: "⏏";
+    readonly Enter: "↵";
+    readonly Escape: "Esc";
+    readonly Left: "←";
+    readonly Option: "⌥";
+    readonly Right: "→";
+    readonly Shift: "⇧";
+    readonly Space: "␣";
+    readonly Tab: "Tab";
+    readonly Up: "↑";
+};

package/dist/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/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;
   let content = children;
@@ -29,7 +14,7 @@ const Kbd = forwardRef((props, forwardedRef) => {
     ] });
   }
   return /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...rest,
       "data-kiwi-variant": variant,

package/dist/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/bricks/Radio.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type RadioProps as AkRadioProps } from "@ariakit/react/radio";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
-type RadioOwnProps = Pick<Ariakit.RadioProps, "value" | "checked" | "onChange">;
+type RadioOwnProps = Pick<AkRadioProps, "value" | "checked" | "onChange">;
 interface RadioProps extends InputBaseProps, RadioOwnProps {
 }
 /**

package/dist/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,

package/dist/bricks/Root.js

@@ -1,19 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as ReactDOM from "react-dom";
+import { Role } from "@ariakit/react/role";
+import { PortalContext } from "@ariakit/react/portal";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
 import { forwardRef, isBrowser } from "./~utils.js";
-import { useMergedRefs } from "./~hooks.js";
+import { useIsClient, useMergedRefs } from "./~hooks.js";
 const css = foundationsCss + bricksCss;
 const Root = forwardRef((props, forwardedRef) => {
   const { children, synchronizeColorScheme = false, ...rest } = props;
+  const [portalContainer, setPortalContainer] = React.useState(null);
   return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(Styles, {}),
     /* @__PURE__ */ jsx(Fonts, {}),
     synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
-    children
+    /* @__PURE__ */ jsx(
+      PortalContainer,
+      {
+        colorScheme: props.colorScheme,
+        density: props.density,
+        ref: setPortalContainer
+      }
+    ),
+    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children })
   ] });
 });
 const RootNodeContext = React.createContext(null);
@@ -31,7 +42,7 @@ const RootInternal = forwardRef(
       setRootNode(rootNode2);
     }, []);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         className: cx("\u{1F95D}-root", props.className),
@@ -59,6 +70,26 @@ function SynchronizeColorScheme({
   }, [rootNode, colorScheme]);
   return null;
 }
+const PortalContainer = forwardRef((props, forwardedRef) => {
+  const isClient = useIsClient();
+  const rootNode = useRootNode();
+  if (!isClient) return null;
+  const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode;
+  if (!destination) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "\u{1F95D}-root",
+        "data-kiwi-theme": props.colorScheme,
+        "data-kiwi-density": props.density,
+        style: { display: "contents" },
+        ref: forwardedRef
+      }
+    ),
+    destination
+  );
+});
 function Styles() {
   const rootNode = useRootNode();
   useLayoutEffect(() => {

package/dist/bricks/Select.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
 import { type FocusableProps } from "./~utils.js";
 /**
  * Compound component for a select element, which allows the user to select a value from a list of options.
@@ -20,7 +19,7 @@ import { type FocusableProps } from "./~utils.js";
  * </Field>
  * ```
  */
-declare const SelectRoot: React.ForwardRefExoticComponent<Pick<Ariakit.RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+declare const SelectRoot: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 type HtmlSelectBaseProps = Omit<FocusableProps<"select">, "multiple" | "size">;
 interface HtmlSelectProps extends HtmlSelectBaseProps {
     /**

package/dist/bricks/Select.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } 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,
   isBrowser
@@ -14,7 +14,7 @@ const HtmlSelectContext = React.createContext(() => {
 const SelectRoot = forwardRef((props, forwardedRef) => {
   const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
   return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...props,
       className: cx("\u{1F95D}-select-root", props.className),
@@ -40,7 +40,7 @@ const HtmlSelect = forwardRef(
           type: "textlike",
           id,
           render: /* @__PURE__ */ jsx(
-            Ariakit.Role.select,
+            Role.select,
             {
               ...rest,
               className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),

package/dist/bricks/Spinner.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { forwardRef } from "./~utils.js";
@@ -12,7 +12,7 @@ const Spinner = forwardRef(
       ...rest
     } = props;
     return /* @__PURE__ */ jsxs(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         "data-kiwi-size": size,

package/dist/bricks/Switch.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
-type CheckboxOwnProps = Pick<Ariakit.CheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
+type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
 interface SwitchProps extends InputBaseProps, CheckboxOwnProps {
     /** The default checked state of the toggle switch. */
     defaultChecked?: boolean;

package/dist/bricks/Switch.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 Switch = forwardRef(
@@ -12,7 +14,7 @@ const Switch = forwardRef(
         type: "checkable",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Checkbox,
+          AkCheckbox,
           {
             accessibleWhenDisabled: true,
             ...rest,

package/dist/bricks/Table.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import * as React from "react";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
@@ -12,7 +12,7 @@ const Table = forwardRef((props, forwardedRef) => {
   const [captionId, setCaptionId] = React.useState();
   const tableContext = React.useMemo(() => ({ setCaptionId }), []);
   return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...props,
       className: cx("\u{1F95D}-table", props.className),
@@ -27,7 +27,7 @@ const TableHeaderContext = React.createContext(false);
 const TableHeader = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
-      Ariakit.Role.div,
+      Role.div,
       {
         ...props,
         className: cx("\u{1F95D}-table-header", props.className),
@@ -40,7 +40,7 @@ const TableHeader = forwardRef(
 );
 const TableBody = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...props,
       className: cx("\u{1F95D}-table-body", props.className),
@@ -52,7 +52,7 @@ const TableBody = forwardRef((props, forwardedRef) => {
 const TableRow = forwardRef((props, forwardedRef) => {
   const { children, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...rest,
       className: cx("\u{1F95D}-table-row", props.className),
@@ -74,7 +74,7 @@ const TableCaption = forwardRef(
       [id, setCaptionId]
     );
     return /* @__PURE__ */ jsx(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         id,
@@ -88,7 +88,7 @@ const TableCaption = forwardRef(
 const TableCell = forwardRef((props, forwardedRef) => {
   const isWithinTableHeader = React.useContext(TableHeaderContext);
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
+    Role.span,
     {
       ...props,
       className: cx("\u{1F95D}-table-cell", props.className),