@koine/react 1.1.10 → 1.1.12

package/Hidden/Hidden.js

@@ -1,6 +1,9 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-export var Hidden = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hidden = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.Hidden = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
     return "".concat(p.$min
         ? "\n  @media (min-width: ".concat(p.theme.breakpoints[p.$min], "px) {\n    display: none;\n  }")
         : "", " ").concat(p.$max

package/Hidden/Hidden.mjs

@@ -0,0 +1,10 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var Hidden = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(p.$min
+        ? "\n  @media (min-width: ".concat(p.theme.breakpoints[p.$min], "px) {\n    display: none;\n  }")
+        : "", " ").concat(p.$max
+        ? "\n  @media (max-width: ".concat(p.theme.breakpoints[p.$max], "px) {\n    display: none;\n  }")
+        : "");
+});
+var templateObject_1;

package/Hidden/index.js

@@ -1 +1,4 @@
-export * from "./Hidden";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Hidden"), exports);

package/Hidden/index.mjs

@@ -0,0 +1 @@
+export * from "./Hidden";

package/Hidden/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Hidden/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Img/index.js

@@ -1 +1,4 @@
-export * from "./types";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./types"), exports);

package/Img/index.mjs

@@ -0,0 +1 @@
+export * from "./types";

package/Img/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Img/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Img/sc/bare.js

@@ -1,10 +1,13 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineImg = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 // export type KoineImgProps = {
 //   /** @default "cover" */
 //   $fit?: "cover" | "contain";
 // };
-export var KoineImg = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+exports.KoineImg = styled_components_1.default.img(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 var templateObject_1;
 // export const KoineImg = styled.img<KoineImgProps>`
 //   object-fit: ${(p) => p.$fit || "cover"};

package/{node/Img/sc/bare.js → Img/sc/bare.mjs}

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineImg = void 0;
-var tslib_1 = require("tslib");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
 // export type KoineImgProps = {
 //   /** @default "cover" */
 //   $fit?: "cover" | "contain";
 // };
-exports.KoineImg = styled_components_1.default.img(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+export var KoineImg = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var templateObject_1;
 // export const KoineImg = styled.img<KoineImgProps>`
 //   object-fit: ${(p) => p.$fit || "cover"};

package/Img/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/Img/types.mjs

@@ -0,0 +1 @@
+export {};

package/Link/Link.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export type KoineLinkProps = React.ComponentPropsWithRef<"a">;
-export declare const KoineLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+export declare const KoineLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
 }, never>;

package/Link/Link.js

@@ -1,4 +1,7 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-export var KoineLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineLink = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.KoineLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 var templateObject_1;

package/Link/Link.mjs

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var KoineLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;

package/Link/LinkBlank.js

@@ -1,17 +1,21 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
-import { MdLaunch as IconOutboundLink } from "react-icons/md";
-import { max } from "../styles/media";
-export var LinkBlankA = styled.a.attrs({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkBlank = exports.LinkBlankIcon = exports.LinkBlankA = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var md_1 = require("react-icons/md");
+var media_1 = require("../styles/media");
+exports.LinkBlankA = styled_components_1.default.a.attrs({
     target: "_blank",
     rel: "noopener",
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+})(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 // TODO: use `touch` class on <html> instead of relying on screenwidth,
 // probably implement a lean Modernizr like thing with react-helmet
-export var LinkBlankIcon = styled(IconOutboundLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"], ["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"])), max.sm);
-export var LinkBlank = function (_a) {
-    var children = _a.children, target = _a.target, rel = _a.rel, props = __rest(_a, ["children", "target", "rel"]);
-    return (_jsxs(LinkBlankA, __assign({}, props, { children: [children, _jsx(LinkBlankIcon, {})] })));
+exports.LinkBlankIcon = (0, styled_components_1.default)(md_1.MdLaunch)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"], ["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"])), media_1.max.sm);
+var LinkBlank = function (_a) {
+    var children = _a.children, target = _a.target, rel = _a.rel, props = tslib_1.__rest(_a, ["children", "target", "rel"]);
+    return ((0, jsx_runtime_1.jsxs)(exports.LinkBlankA, tslib_1.__assign({}, props, { children: [children, (0, jsx_runtime_1.jsx)(exports.LinkBlankIcon, {})] })));
 };
+exports.LinkBlank = LinkBlank;
 var templateObject_1, templateObject_2;

package/Link/LinkBlank.mjs

@@ -0,0 +1,17 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { MdLaunch as IconOutboundLink } from "react-icons/md";
+import { max } from "../styles/media";
+export var LinkBlankA = styled.a.attrs({
+    target: "_blank",
+    rel: "noopener",
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+// TODO: use `touch` class on <html> instead of relying on screenwidth,
+// probably implement a lean Modernizr like thing with react-helmet
+export var LinkBlankIcon = styled(IconOutboundLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"], ["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"])), max.sm);
+export var LinkBlank = function (_a) {
+    var children = _a.children, target = _a.target, rel = _a.rel, props = __rest(_a, ["children", "target", "rel"]);
+    return (_jsxs(LinkBlankA, __assign({}, props, { children: [children, _jsx(LinkBlankIcon, {})] })));
+};
+var templateObject_1, templateObject_2;

package/Link/index.js

@@ -1,2 +1,5 @@
-export * from "./Link";
-export * from "./LinkBlank";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Link"), exports);
+tslib_1.__exportStar(require("./LinkBlank"), exports);

package/Link/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Link";
+export * from "./LinkBlank";

package/Link/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Link/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Menu/Menu.js

@@ -1,4 +1,7 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-export var Menu = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"], ["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.Menu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"], ["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"])));
 var templateObject_1;

package/Menu/Menu.mjs

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var Menu = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"], ["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"])));
+var templateObject_1;

package/Menu/MenuMui.d.ts

@@ -1,35 +0,0 @@
-import React from "react";
-import { type HTMLMotionProps } from "framer-motion";
-import { useMenu } from "@mui/base/MenuUnstyled";
-import { type PopperChildrenProps } from "react-popper";
-/**
- * Props we control, cannot be overriden from implementers
- */
-type MenuButtonOwnProps = {
-    "aria-controls"?: string;
-    "aria-haspopup": true | "true";
-    "aria-expanded"?: true | "true";
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
-    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => unknown;
-};
-type MenuButtonProps = Omit<React.ComponentPropsWithRef<"button">, keyof MenuButtonOwnProps> & MenuButtonOwnProps;
-export type MenuItemsProps = {
-    /**
-     * Closes the parent menu
-     */
-    close: () => unknown;
-};
-/**
- * Props we control, cannot be overriden from implementers
- */
-type MenuOwnProps = ReturnType<typeof useMenu>["getListboxProps"] & {
-    onKeyDown: (event: React.KeyboardEvent) => unknown;
-    style: React.StyleHTMLAttributes<HTMLDivElement>;
-};
-export type MenuProps = Omit<Omit<HTMLMotionProps<"div">, "children"> & {
-    placement?: PopperChildrenProps["placement"];
-    Button: (props: MenuButtonProps) => JSX.Element;
-    children: (props: MenuItemsProps) => React.ReactNode;
-}, keyof MenuOwnProps>;
-export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<unknown>>;
-export default Menu;

package/Menu/MenuMui.js

@@ -1,75 +1,165 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useMemo, useRef, useState } from "react";
-import { unstable_useEventCallback as useEventCallback } from "@mui/utils";
-import { motion as m, AnimatePresence, } from "framer-motion";
-import { useMenu, MenuUnstyledContext, } from "@mui/base/MenuUnstyled";
-import ModalUnstyled from "@mui/base/ModalUnstyled";
-import ClickAwayListener from "@mui/base/ClickAwayListener";
-import { usePopper } from "react-popper";
-import clsx from "@koine/utils/clsx";
-var MenuRoot = m.div;
-var MenuBackdrop = function () { return _jsx("div", { className: "fixed inset-0" }); };
-export var Menu = forwardRef(function Menu(props, ref) {
-    var Button = props.Button, placement = props.placement, children = props.children, className = props.className, htmlAttributes = __rest(props, ["Button", "placement", "children", "className"]);
-    var id = useId();
-    var buttonRef = useRef(null);
-    var menuActions = useRef(null);
-    var _a = useState(null), popperElement = _a[0], setPopperElement = _a[1];
-    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
-    var open = Boolean(anchorEl);
-    var styles = usePopper(anchorEl, popperElement, {
-        placement: placement,
-        // strategy: "absolute",
-    }).styles;
-    var _c = useMenu({
-        listboxId: id,
-        listboxRef: setPopperElement,
-        // these two make the Tab key behaviour correct, closing the menu on Tab
-        // press and re-focusing the Button trigger element
-        open: open,
-        onClose: function () { return setAnchorEl(null); },
-    }), registerItem = _c.registerItem, unregisterItem = _c.unregisterItem, getListboxProps = _c.getListboxProps, getItemProps = _c.getItemProps, getItemState = _c.getItemState;
-    var contextValue = {
-        registerItem: registerItem,
-        unregisterItem: unregisterItem,
-        getItemState: getItemState,
-        getItemProps: getItemProps,
-        open: open,
-    };
-    var handleButtonClick = function (event) {
-        if (open) {
-            setAnchorEl(null);
-        }
-        else {
-            setAnchorEl(event.currentTarget);
-        }
-    };
-    var handleButtonKeyDown = function (event) {
-        var _a;
-        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault();
-            setAnchorEl(event.currentTarget);
-            if (event.key === "ArrowUp") {
-                (_a = menuActions.current) === null || _a === void 0 ? void 0 : _a.highlightLastItem();
-            }
-        }
-    };
-    var close = useEventCallback(function () {
-        var _a;
-        setAnchorEl(null);
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    });
-    var renderChildren = useMemo(function () {
-        var childrenProps = { close: close };
-        return children(childrenProps);
-    }, [children, close]);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, id: id, "aria-haspopup": "true", "aria-controls": open ? id : undefined, "aria-expanded": open ? "true" : undefined, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown }), _jsx(AnimatePresence, { children: open && (_jsx(ModalUnstyled, __assign({ slots: { backdrop: MenuBackdrop }, onClose: close, onBackdropClick: close, open: open }, { children: _jsx("div", { children: _jsx(ClickAwayListener, __assign({ onClickAway: close }, { children: _jsx(MenuRoot, __assign({ initial: {
-                                    opacity: 0,
-                                }, animate: {
-                                    opacity: 1,
-                                }, exit: {
-                                    opacity: 0,
-                                }, className: clsx(className), style: styles["popper"] }, htmlAttributes, getListboxProps(), { "aria-labelledby": id }, { children: _jsx(MenuUnstyledContext.Provider, __assign({ value: contextValue }, { children: renderChildren })) })) })) }) }))) })] }));
-});
-export default Menu;
+"use strict";
+// import React, { forwardRef, useId, useMemo, useRef, useState } from "react";
+// import { unstable_useEventCallback as useEventCallback } from "@mui/utils";
+// import {
+//   motion as m,
+//   AnimatePresence,
+//   type HTMLMotionProps,
+// } from "framer-motion";
+// import {
+//   useMenu,
+//   MenuUnstyledContext,
+//   type MenuUnstyledContextType,
+//   type MenuUnstyledActions,
+// } from "@mui/base/MenuUnstyled";
+// import ModalUnstyled from "@mui/base/ModalUnstyled";
+// import ClickAwayListener from "@mui/base/ClickAwayListener";
+// import { usePopper, type PopperChildrenProps } from "react-popper";
+// import clsx from "@koine/utils/clsx";
+// const MenuRoot = m.div;
+// const MenuBackdrop = () => <div className="fixed inset-0" />;
+// /**
+//  * Props we control, cannot be overriden from implementers
+//  */
+// type MenuButtonOwnProps = {
+//   "aria-controls"?: string;
+//   "aria-haspopup": true | "true";
+//   "aria-expanded"?: true | "true";
+//   onClick: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
+//   onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => unknown;
+// };
+// type MenuButtonProps = Omit<
+//   React.ComponentPropsWithRef<"button">,
+//   keyof MenuButtonOwnProps
+// > &
+//   MenuButtonOwnProps;
+// export type MenuItemsProps = {
+//   /**
+//    * Closes the parent menu
+//    */
+//   close: () => unknown;
+// };
+// /**
+//  * Props we control, cannot be overriden from implementers
+//  */
+// type MenuOwnProps = ReturnType<typeof useMenu>["getListboxProps"] & {
+//   onKeyDown: (event: React.KeyboardEvent) => unknown;
+//   style: React.StyleHTMLAttributes<HTMLDivElement>;
+// };
+// export type MenuProps = Omit<
+//   Omit<HTMLMotionProps<"div">, "children"> & {
+//     placement?: PopperChildrenProps["placement"];
+//     Button: (props: MenuButtonProps) => JSX.Element;
+//     children: (props: MenuItemsProps) => React.ReactNode;
+//   },
+//   keyof MenuOwnProps
+// >;
+// export const Menu = forwardRef(function Menu(props: MenuProps, ref) {
+//   const { Button, placement, children, className, ...htmlAttributes } = props;
+//   const id = useId();
+//   const buttonRef = useRef<HTMLButtonElement>(null);
+//   const menuActions = useRef<MenuUnstyledActions>(null);
+//   const [popperElement, setPopperElement] = useState(null);
+//   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+//   const open = Boolean(anchorEl);
+//   const { styles } = usePopper(anchorEl, popperElement, {
+//     placement,
+//     // strategy: "absolute",
+//   });
+//   const {
+//     registerItem,
+//     unregisterItem,
+//     getListboxProps,
+//     getItemProps,
+//     getItemState,
+//   } = useMenu({
+//     listboxId: id,
+//     listboxRef: setPopperElement,
+//     // these two make the Tab key behaviour correct, closing the menu on Tab
+//     // press and re-focusing the Button trigger element
+//     open,
+//     onClose: () => setAnchorEl(null),
+//   });
+//   const contextValue: MenuUnstyledContextType = {
+//     registerItem,
+//     unregisterItem,
+//     getItemState,
+//     getItemProps,
+//     open,
+//   };
+//   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+//     if (open) {
+//       setAnchorEl(null);
+//     } else {
+//       setAnchorEl(event.currentTarget);
+//     }
+//   };
+//   const handleButtonKeyDown = (
+//     event: React.KeyboardEvent<HTMLButtonElement>
+//   ) => {
+//     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+//       event.preventDefault();
+//       setAnchorEl(event.currentTarget);
+//       if (event.key === "ArrowUp") {
+//         menuActions.current?.highlightLastItem();
+//       }
+//     }
+//   };
+//   const close = useEventCallback(() => {
+//     setAnchorEl(null);
+//     buttonRef.current?.focus();
+//   });
+//   const renderChildren = useMemo(() => {
+//     const childrenProps: MenuItemsProps = { close };
+//     return children(childrenProps);
+//   }, [children, close]);
+//   return (
+//     <>
+//       <Button
+//         ref={buttonRef}
+//         id={id}
+//         aria-haspopup="true"
+//         aria-controls={open ? id : undefined}
+//         aria-expanded={open ? "true" : undefined}
+//         onClick={handleButtonClick}
+//         onKeyDown={handleButtonKeyDown}
+//       />
+//       <AnimatePresence>
+//         {open && (
+//           <ModalUnstyled
+//             slots={{ backdrop: MenuBackdrop }}
+//             onClose={close}
+//             onBackdropClick={close}
+//             open={open}
+//           >
+//             <div>
+//               <ClickAwayListener onClickAway={close}>
+//                 <MenuRoot
+//                   initial={{
+//                     opacity: 0,
+//                   }}
+//                   animate={{
+//                     opacity: 1,
+//                   }}
+//                   exit={{
+//                     opacity: 0,
+//                   }}
+//                   className={clsx(className)}
+//                   style={styles["popper"]}
+//                   {...htmlAttributes}
+//                   {...getListboxProps()}
+//                   aria-labelledby={id}
+//                 >
+//                   <MenuUnstyledContext.Provider value={contextValue}>
+//                     {renderChildren}
+//                   </MenuUnstyledContext.Provider>
+//                 </MenuRoot>
+//               </ClickAwayListener>
+//             </div>
+//           </ModalUnstyled>
+//         )}
+//       </AnimatePresence>
+//     </>
+//   );
+// });
+// export default Menu;