@ariakit/react-core 0.2.17 → 0.3.1

package/esm/__chunks/{KME3EPVS.js → VDTDCNMP.js}

@@ -1,24 +1,24 @@
 import {
-  MenuBarContext,
-  MenuContext
-} from "./HVBRRKV4.js";
+  MenuScopedContextProvider,
+  useMenuProviderContext
+} from "./2GC3IEM7.js";
 import {
   useCompositeTypeahead
-} from "./F4XABKPL.js";
+} from "./YVYWIVKG.js";
 import {
   useComposite
-} from "./AAVDGJD5.js";
+} from "./HYNMOU7J.js";
 import {
   isHidden
-} from "./WHEEIXMF.js";
+} from "./3D7ZB3CS.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useStoreState
-} from "./P63NRZ4A.js";
+} from "./XXO3VVQU.js";
 import {
   useEvent,
   useId,
@@ -32,14 +32,15 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/menu/menu-list.tsx
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 function useAriaLabelledBy(_a) {
   var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
   const [id, setId] = useState(void 0);
   const label = props["aria-label"];
-  const disclosureElement = store.useState("disclosureElement");
-  const contentElement = store.useState("contentElement");
+  const disclosureElement = useStoreState(store, "disclosureElement");
+  const contentElement = useStoreState(store, "contentElement");
   useEffect(() => {
     const disclosure = disclosureElement;
     if (!disclosure)
@@ -58,9 +59,15 @@ function useAriaLabelledBy(_a) {
 }
 var useMenuList = createHook(
   (_a) => {
-    var _b = _a, { store, alwaysVisible, composite = true } = _b, props = __objRest(_b, ["store", "alwaysVisible", "composite"]);
-    const parentMenu = useContext(MenuContext);
-    const parentMenuBar = useContext(MenuBarContext);
+    var _b = _a, { store, alwaysVisible, composite } = _b, props = __objRest(_b, ["store", "alwaysVisible", "composite"]);
+    const context = useMenuProviderContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "MenuList must receive a `store` prop or be wrapped in a MenuProvider component."
+    );
+    const parentMenu = store.parent;
+    const parentMenuBar = store.menubar;
     const hasParentMenu = !!parentMenu;
     const id = useId(props.id);
     const onKeyDownProp = props.onKeyDown;
@@ -71,9 +78,9 @@ var useMenuList = createHook(
       (state) => state.orientation === "both" ? void 0 : state.orientation
     );
     const isHorizontal = orientation !== "vertical";
-    const isMenuBarHorizontal = !!useStoreState(
+    const isMenuBarHorizontal = useStoreState(
       parentMenuBar,
-      (state) => state.orientation !== "vertical"
+      (state) => !!state && state.orientation !== "vertical"
     );
     const onKeyDown = useEvent((event) => {
       onKeyDownProp == null ? void 0 : onKeyDownProp(event);
@@ -90,7 +97,7 @@ var useMenuList = createHook(
         if (action == null ? void 0 : action()) {
           event.stopPropagation();
           event.preventDefault();
-          return store.hide();
+          return store == null ? void 0 : store.hide();
         }
       }
       if (parentMenuBar) {
@@ -127,7 +134,7 @@ var useMenuList = createHook(
     });
     props = useWrapElement(
       props,
-      (element) => /* @__PURE__ */ jsx(MenuContext.Provider, { value: store, children: element }),
+      (element) => /* @__PURE__ */ jsx(MenuScopedContextProvider, { value: store, children: element }),
       [store]
     );
     const ariaLabelledBy = useAriaLabelledBy(__spreadValues({ store }, props));
@@ -143,6 +150,8 @@ var useMenuList = createHook(
       style,
       onKeyDown
     });
+    const hasCombobox = !!store.combobox;
+    composite = composite != null ? composite : !hasCombobox;
     if (composite) {
       props = __spreadValues({
         role: "menu",
@@ -150,7 +159,7 @@ var useMenuList = createHook(
       }, props);
     }
     props = useComposite(__spreadValues({ store, composite }, props));
-    props = useCompositeTypeahead(__spreadValues({ store }, props));
+    props = useCompositeTypeahead(__spreadValues({ store, typeahead: !hasCombobox }, props));
     return props;
   }
 );

package/esm/__chunks/VPTWELSR.js

@@ -0,0 +1,21 @@
+import {
+  useCompositeStoreProps
+} from "./WGAKICTY.js";
+import {
+  useStore
+} from "./XXO3VVQU.js";
+
+// src/toolbar/toolbar-store.ts
+import * as Core from "@ariakit/core/toolbar/toolbar-store";
+function useToolbarStoreProps(store, update, props) {
+  return useCompositeStoreProps(store, update, props);
+}
+function useToolbarStore(props = {}) {
+  const [store, update] = useStore(Core.createToolbarStore, props);
+  return useToolbarStoreProps(store, update, props);
+}
+
+export {
+  useToolbarStoreProps,
+  useToolbarStore
+};

package/esm/__chunks/{7KULBIZY.js → WGAKICTY.js}

@@ -1,22 +1,15 @@
 import {
-  useCollectionStoreOptions,
   useCollectionStoreProps
-} from "./RS7KBRGA.js";
+} from "./NWDF5QDV.js";
 import {
   useStore,
   useStoreProps
-} from "./P63NRZ4A.js";
-import {
-  __spreadValues
-} from "./PNRLI7OV.js";
+} from "./XXO3VVQU.js";
 
 // src/composite/composite-store.ts
 import * as Core from "@ariakit/core/composite/composite-store";
-function useCompositeStoreOptions(props) {
-  return useCollectionStoreOptions(props);
-}
-function useCompositeStoreProps(store, props) {
-  store = useCollectionStoreProps(store, props);
+function useCompositeStoreProps(store, update, props) {
+  store = useCollectionStoreProps(store, update, props);
   useStoreProps(store, props, "activeId", "setActiveId");
   useStoreProps(store, props, "includesBaseElement");
   useStoreProps(store, props, "virtualFocus");
@@ -28,15 +21,11 @@ function useCompositeStoreProps(store, props) {
   return store;
 }
 function useCompositeStore(props = {}) {
-  const options = useCompositeStoreOptions(props);
-  const store = useStore(
-    () => Core.createCompositeStore(__spreadValues(__spreadValues({}, props), options))
-  );
-  return useCompositeStoreProps(store, props);
+  const [store, update] = useStore(Core.createCompositeStore, props);
+  return useCompositeStoreProps(store, update, props);
 }
 
 export {
-  useCompositeStoreOptions,
   useCompositeStoreProps,
   useCompositeStore
 };

package/esm/__chunks/{AUUE7U2H.js → WJZPOH5E.js}

@@ -1,11 +1,14 @@
 import {
   usePopoverDisclosureArrow
-} from "./LVMO37QD.js";
+} from "./5HSRXC5S.js";
+import {
+  useSelectContext
+} from "./US4OMDIO.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   __objRest,
   __spreadValues
@@ -15,6 +18,8 @@ import {
 var useSelectArrow = createHook(
   (_a) => {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+    const context = useSelectContext();
+    store = store || context;
     props = usePopoverDisclosureArrow(__spreadValues({ store }, props));
     return props;
   }

package/esm/__chunks/{NHPU54IO.js → XASENZA4.js}

@@ -1,20 +1,20 @@
 import {
   hideElementFromAccessibilityTree
-} from "./GDORSOK6.js";
+} from "./X5VV5CBA.js";
+import {
+  supportsInert
+} from "./KOVUJERF.js";
 import {
   isBackdrop
 } from "./IXXFVVA2.js";
 import {
-  supportsInert
-} from "./KOVUJERF.js";
+  walkTreeOutside
+} from "./5M4ITSXL.js";
 import {
   assignStyle,
   setAttribute,
   setProperty
 } from "./FW6QFGFT.js";
-import {
-  walkTreeOutside
-} from "./5M4ITSXL.js";
 
 // src/dialog/utils/disable-tree-outside.ts
 import { contains } from "@ariakit/core/utils/dom";

package/esm/__chunks/{W5P7IKOU.js → XCH4OEEE.js}

@@ -1,11 +1,11 @@
 import {
-  CompositeContext
-} from "./WJ37OVG2.js";
+  useCompositeContext
+} from "./5C7J4IAS.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -18,7 +18,6 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/composite/composite-hover.ts
-import { useContext } from "react";
 import { closest, contains } from "@ariakit/core/utils/dom";
 import { hasFocus, hasFocusWithin } from "@ariakit/core/utils/focus";
 import { invariant } from "@ariakit/core/utils/misc";
@@ -45,11 +44,11 @@ function movingToAnotherItem(event) {
 var useCompositeHover = createHook(
   (_a) => {
     var _b = _a, { store, focusOnHover = true } = _b, props = __objRest(_b, ["store", "focusOnHover"]);
-    const context = useContext(CompositeContext);
+    const context = useCompositeContext();
     store = store || context;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "CompositeHover must be wrapped in a Composite component"
+      process.env.NODE_ENV !== "production" && "CompositeHover must be wrapped in a Composite component."
     );
     const isMouseMoving = useIsMouseMoving();
     const onMouseMoveProp = props.onMouseMove;

package/esm/__chunks/XEZV3AK4.js

@@ -0,0 +1,28 @@
+import {
+  useDialogStoreProps
+} from "./HCTAKPNS.js";
+import {
+  useStore,
+  useStoreProps
+} from "./XXO3VVQU.js";
+import {
+  useUpdateEffect
+} from "./J7Q2EO23.js";
+
+// src/popover/popover-store.ts
+import * as Core from "@ariakit/core/popover/popover-store";
+function usePopoverStoreProps(store, update, props) {
+  useUpdateEffect(update, [props.popover]);
+  store = useDialogStoreProps(store, update, props);
+  useStoreProps(store, props, "placement");
+  return store;
+}
+function usePopoverStore(props = {}) {
+  const [store, update] = useStore(Core.createPopoverStore, props);
+  return usePopoverStoreProps(store, update, props);
+}
+
+export {
+  usePopoverStoreProps,
+  usePopoverStore
+};

package/esm/__chunks/{VFNGSUSF.js → XIA3HAXM.js}

@@ -1,11 +1,11 @@
 import {
-  CollectionContext
-} from "./T3DJZG63.js";
+  useCollectionContext
+} from "./74KKBFVP.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useId,
   useMergeRefs
@@ -17,7 +17,7 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/collection/collection-item.ts
-import { useContext, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { identity } from "@ariakit/core/utils/misc";
 var useCollectionItem = createHook(
   (_a) => {
@@ -33,7 +33,7 @@ var useCollectionItem = createHook(
       // @ts-expect-error This prop may come from a collection renderer.
       "element"
     ]);
-    const context = useContext(CollectionContext);
+    const context = useCollectionContext();
     store = store || context;
     const id = useId(props.id);
     const ref = useRef(element);

package/esm/__chunks/{P63NRZ4A.js → XXO3VVQU.js}

@@ -1,5 +1,5 @@
 import {
-  useLazyValue,
+  useEvent,
   useLiveRef,
   useSafeLayoutEffect
 } from "./J7Q2EO23.js";
@@ -11,7 +11,7 @@ import {
 // src/utils/store.tsx
 import * as React from "react";
 import { hasOwnProperty, identity } from "@ariakit/core/utils/misc";
-import { batch, init, subscribe, sync } from "@ariakit/core/utils/store";
+import { init, subscribe, sync } from "@ariakit/core/utils/store";
 import { flushSync } from "react-dom";
 import useSyncExternalStoreExports from "use-sync-external-store/shim/index.js";
 var { useSyncExternalStore } = useSyncExternalStoreExports;
@@ -49,13 +49,13 @@ function useStoreState(store, keyOrSelector = identity) {
     [store]
   );
   const getSnapshot = () => {
-    if (!store)
-      return;
-    const state = store.getState();
-    const selector = typeof keyOrSelector === "function" ? keyOrSelector : null;
     const key = typeof keyOrSelector === "string" ? keyOrSelector : null;
+    const selector = typeof keyOrSelector === "function" ? keyOrSelector : null;
+    const state = store == null ? void 0 : store.getState();
     if (selector)
       return selector(state);
+    if (!state)
+      return;
     if (!key)
       return;
     if (!hasOwnProperty(state, key))
@@ -66,45 +66,57 @@ function useStoreState(store, keyOrSelector = identity) {
 }
 function useStoreProps(store, props, key, setKey) {
   const value = hasOwnProperty(props, key) ? props[key] : void 0;
-  const propsRef = useLiveRef({
-    value,
-    setValue: setKey ? props[setKey] : void 0
-  });
+  const setValue = setKey ? props[setKey] : void 0;
+  const propsRef = useLiveRef({ value, setValue });
+  const canSyncValue = React.useRef(true);
   useSafeLayoutEffect(() => {
     let canFlushSync = false;
     queueMicrotask(() => {
       canFlushSync = true;
     });
     return sync(store, [key], (state, prev) => {
-      const { value: value2, setValue } = propsRef.current;
-      if (!setValue)
+      const { value: value2, setValue: setValue2 } = propsRef.current;
+      if (!setValue2)
         return;
       if (state[key] === prev[key])
         return;
       if (state[key] === value2)
         return;
-      safeFlushSync(() => setValue(state[key]), canFlushSync);
+      if (!canFlushSync) {
+        canSyncValue.current = false;
+        queueMicrotask(() => {
+          canSyncValue.current = true;
+        });
+      }
+      safeFlushSync(() => setValue2(state[key]), canFlushSync);
     });
   }, [store, key]);
   useSafeLayoutEffect(() => {
-    return batch(store, [key], () => {
-      if (value === void 0)
+    if (value === void 0)
+      return;
+    canSyncValue.current = true;
+    return sync(store, [key], () => {
+      if (!canSyncValue.current)
         return;
       store.setState(key, value);
     });
   }, [store, key, value]);
 }
-function useStore(createStore) {
-  const store = useLazyValue(createStore);
+function useStore(createStore, props) {
+  const [store, setStore] = React.useState(() => createStore(props));
   useSafeLayoutEffect(() => init(store), [store]);
-  const useState = React.useCallback(
+  const useState2 = React.useCallback(
     (keyOrSelector) => useStoreState(store, keyOrSelector),
     [store]
   );
-  return React.useMemo(
-    () => __spreadProps(__spreadValues({}, store), { useState }),
-    [store, useState]
+  const memoizedStore = React.useMemo(
+    () => __spreadProps(__spreadValues({}, store), { useState: useState2 }),
+    [store, useState2]
   );
+  const updateStore = useEvent(() => {
+    setStore((store2) => createStore(__spreadValues(__spreadValues({}, props), store2.getState())));
+  });
+  return [memoizedStore, updateStore];
 }
 
 export {

package/esm/__chunks/{24II2LYU.js → YJPXO6F5.js}

@@ -5,12 +5,16 @@ import {
 } from "./X7FKJQME.js";
 import {
   usePopover
-} from "./K5MSER23.js";
+} from "./RVGVDX6B.js";
+import {
+  HovercardScopedContextProvider,
+  useHovercardProviderContext
+} from "./5DA3HK6G.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -38,7 +42,11 @@ import {
 import { contains } from "@ariakit/core/utils/dom";
 import { addGlobalEventListener } from "@ariakit/core/utils/events";
 import { hasFocusWithin } from "@ariakit/core/utils/focus";
-import { chain, isFalsyBooleanCallback } from "@ariakit/core/utils/misc";
+import {
+  chain,
+  invariant,
+  isFalsyBooleanCallback
+} from "@ariakit/core/utils/misc";
 import { sync } from "@ariakit/core/utils/store";
 import { jsx } from "react/jsx-runtime";
 function isMovingOnHovercard(target, card, anchor, nested) {
@@ -56,7 +64,11 @@ function isMovingOnHovercard(target, card, anchor, nested) {
   return false;
 }
 function useAutoFocusOnShow(_a) {
-  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  var _b = _a, {
+    store
+  } = _b, props = __objRest(_b, [
+    "store"
+  ]);
   const open = store.useState("open");
   const openRef = useLiveRef(open);
   useEffect(() => {
@@ -79,7 +91,11 @@ function useAutoFocusOnShow(_a) {
   return __spreadValues({ autoFocusOnShow }, props);
 }
 function useAutoFocusOnHide(_a) {
-  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  var _b = _a, {
+    store
+  } = _b, props = __objRest(_b, [
+    "store"
+  ]);
   const [autoFocusOnHide, setAutoFocusOnHide] = useState(false);
   const mounted = store.useState("mounted");
   useEffect(() => {
@@ -126,6 +142,12 @@ var useHovercard = createHook(
       "hideOnHoverOutside",
       "disablePointerEventsOnApproach"
     ]);
+    const context = useHovercardProviderContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "Hovercard must receive a `store` prop or be wrapped in a HovercardProvider component."
+    );
     const ref = useRef(null);
     const [nestedHovercards, setNestedHovercards] = useState([]);
     const hideTimeoutRef = useRef(0);
@@ -149,6 +171,8 @@ var useHovercard = createHook(
       if (!element)
         return;
       const onMouseMove = (event) => {
+        if (!store)
+          return;
         const { anchorElement, hideTimeout, timeout } = store.getState();
         const enterPoint = enterPointRef.current;
         const target = event.target;
@@ -177,7 +201,7 @@ var useHovercard = createHook(
           return;
         hideTimeoutRef.current = window.setTimeout(() => {
           hideTimeoutRef.current = 0;
-          store.hide();
+          store == null ? void 0 : store.hide();
         }, hideTimeout != null ? hideTimeout : timeout);
       };
       return chain(
@@ -254,8 +278,8 @@ var useHovercard = createHook(
     );
     props = useWrapElement(
       props,
-      (element) => /* @__PURE__ */ jsx(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }),
-      [registerNestedHovercard]
+      (element) => /* @__PURE__ */ jsx(HovercardScopedContextProvider, { value: store, children: /* @__PURE__ */ jsx(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }) }),
+      [store, registerNestedHovercard]
     );
     props = __spreadProps(__spreadValues({}, props), {
       ref: useMergeRefs(ref, props.ref)
@@ -271,7 +295,11 @@ var useHovercard = createHook(
       hideOnEscape(event) {
         if (isFalsyBooleanCallback(hideOnEscape, event))
           return false;
-        requestAnimationFrame(() => requestAnimationFrame(store.hide));
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            store == null ? void 0 : store.hide();
+          });
+        });
         return true;
       }
     }));

package/esm/__chunks/{F4XABKPL.js → YVYWIVKG.js}

@@ -2,13 +2,13 @@ import {
   flipItems
 } from "./OXPV2NBK.js";
 import {
-  CompositeContext
-} from "./WJ37OVG2.js";
+  useCompositeContext
+} from "./5C7J4IAS.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./NQJBHION.js";
+} from "./CFEUKV6C.js";
 import {
   useEvent
 } from "./J7Q2EO23.js";
@@ -19,7 +19,7 @@ import {
 } from "./PNRLI7OV.js";
 
 // src/composite/composite-typeahead.ts
-import { useContext, useRef } from "react";
+import { useRef } from "react";
 import { isTextField } from "@ariakit/core/utils/dom";
 import { isSelfTarget } from "@ariakit/core/utils/events";
 import { invariant, normalizeString } from "@ariakit/core/utils/misc";
@@ -73,7 +73,7 @@ function getSameInitialItems(items, char, activeId) {
 var useCompositeTypeahead = createHook(
   (_a) => {
     var _b = _a, { store, typeahead = true } = _b, props = __objRest(_b, ["store", "typeahead"]);
-    const context = useContext(CompositeContext);
+    const context = useCompositeContext();
     store = store || context;
     invariant(
       store,

package/esm/button/button.js

@@ -1,11 +1,11 @@
 import {
   Button,
   useButton
-} from "../__chunks/O6CV6VRM.js";
-import "../__chunks/P4RGQGTG.js";
-import "../__chunks/MYID4V27.js";
+} from "../__chunks/QPWEKAWF.js";
+import "../__chunks/LND6SMHN.js";
+import "../__chunks/M4OAD5XF.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/NQJBHION.js";
+import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/checkbox/checkbox-check.js

@@ -1,9 +1,9 @@
 import {
   CheckboxCheck,
   useCheckboxCheck
-} from "../__chunks/37OBPWF6.js";
+} from "../__chunks/3Z4KAOQS.js";
 import "../__chunks/M5KYRTQG.js";
-import "../__chunks/NQJBHION.js";
+import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/checkbox/checkbox-context.d.ts

@@ -0,0 +1,19 @@
+import type { CheckboxStore } from "./checkbox-store.js";
+/**
+ * Returns the checkbox store from the nearest checkbox container.
+ * @example
+ * function Checkbox() {
+ *   const store = useCheckboxContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Checkbox must be wrapped in CheckboxProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export declare const useCheckboxContext: () => CheckboxStore<string | number | boolean | (string | number)[]> | undefined;
+export declare const useCheckboxScopedContext: (onlyScoped?: boolean) => CheckboxStore<string | number | boolean | (string | number)[]> | undefined;
+export declare const useCheckboxProviderContext: () => CheckboxStore<string | number | boolean | (string | number)[]> | undefined;
+export declare const CheckboxContextProvider: (props: import("react").ProviderProps<CheckboxStore<string | number | boolean | (string | number)[]> | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxScopedContextProvider: (props: import("react").ProviderProps<CheckboxStore<string | number | boolean | (string | number)[]> | undefined>) => import("react/jsx-runtime").JSX.Element;

package/esm/checkbox/checkbox-context.js

@@ -0,0 +1,18 @@
+import {
+  CheckboxContextProvider,
+  CheckboxScopedContextProvider,
+  useCheckboxContext,
+  useCheckboxProviderContext,
+  useCheckboxScopedContext
+} from "../__chunks/ICL2YIES.js";
+import "../__chunks/CFEUKV6C.js";
+import "../__chunks/J7Q2EO23.js";
+import "../__chunks/CP3U4HPL.js";
+import "../__chunks/PNRLI7OV.js";
+export {
+  CheckboxContextProvider,
+  CheckboxScopedContextProvider,
+  useCheckboxContext,
+  useCheckboxProviderContext,
+  useCheckboxScopedContext
+};