@webflow/webflow-cli 1.0.0

package/dist/devlink-engine/_Builtin/Form.js

@@ -0,0 +1,316 @@
+import React from "react";
+import { loadScript } from "../utils";
+export function FormWrapper({ className = "", state: initialState = "normal", onSubmit, children, ...props }) {
+    const [state, setState] = React.useState(initialState);
+    return React.createElement("div", {
+        className: className + " w-form",
+        ...props,
+    }, React.Children.map(children, (child) => {
+        if (child.type === FormForm) {
+            return React.cloneElement(child, {
+                ...child.props,
+                // @ts-ignore
+                onSubmit: (e) => {
+                    try {
+                        e.preventDefault();
+                        // If grecaptcha is defined, it means there is a ReCaptcha in the form
+                        if (window.grecaptcha) {
+                            // If the response is empty, it means the user didn't check the box
+                            if (!window.grecaptcha?.getResponse()) {
+                                alert(`Please confirm you’re not a robot.`);
+                                return;
+                            }
+                        }
+                        if (onSubmit) {
+                            onSubmit(e);
+                            setState("success");
+                        }
+                    }
+                    catch (err) {
+                        /**
+                         * Capture the error to correctly set the state, but rethrow it
+                         * in case another error handling method is used above up in
+                         * the tree (e.g. Error Boundaries)
+                         */
+                        setState("error");
+                        throw err;
+                    }
+                },
+                style: {
+                    display: state == "normal" || state == "error" ? "block" : "none",
+                },
+            });
+        }
+        if (child.type === FormSuccessMessage) {
+            return React.cloneElement(child, {
+                ...child.props,
+                // @ts-ignore
+                style: { display: state == "success" ? "block" : "none" },
+            });
+        }
+        if (child.type === FormErrorMessage) {
+            return React.cloneElement(child, {
+                ...child.props,
+                // @ts-ignore
+                style: { display: state == "error" ? "block" : "none" },
+            });
+        }
+        return child;
+    }));
+}
+export function FormForm(props) {
+    return React.createElement("form", props);
+}
+export function FormBlockLabel(props) {
+    return React.createElement("label", props);
+}
+export function FormTextInput({ className = "", ...props }) {
+    return React.createElement("input", {
+        type: "text",
+        className: className + " w-input",
+        ...props,
+    });
+}
+export function FormTextarea({ className = "", ...props }) {
+    return React.createElement("input", {
+        type: "textarea",
+        className: className + " w-input",
+        ...props,
+    });
+}
+export function FormInlineLabel({ className = "", ...props }) {
+    return React.createElement("span", {
+        className: className + " w-form-label",
+        ...props,
+    });
+}
+export function FormCheckboxWrapper({ className = "", ...props }) {
+    return React.createElement("label", {
+        className: className + " w-checkbox",
+        ...props,
+    });
+}
+export function FormRadioWrapper({ className = "", ...props }) {
+    return React.createElement("label", {
+        className: className + " w-radio",
+        ...props,
+    });
+}
+export function FormCheckboxInput({ className = "", checked = false, ...props }) {
+    const checkedProps = {};
+    if (typeof checked === "boolean") {
+        checkedProps["defaultChecked"] = checked;
+    }
+    return React.createElement("input", {
+        type: "checkbox",
+        className: className + " w-checkbox",
+        ...checkedProps,
+        ...props,
+    });
+}
+export function FormRadioInput({ className = "", inputType, ...props }) {
+    if (inputType === "custom") {
+        // TODO: support FormCustomRadioInput
+    }
+    return React.createElement("input", {
+        className: className + " w-radio-input",
+        ...props,
+    });
+}
+const MAX_FILE_SIZE_DEFAULT = 10485760;
+const FileUploadContext = React.createContext({
+    files: null,
+    error: null,
+    maxSize: MAX_FILE_SIZE_DEFAULT,
+    setFiles: () => { },
+    setError: () => { },
+});
+export function FormFileUploadWrapper({ maxSize = MAX_FILE_SIZE_DEFAULT, ...props }) {
+    const [files, setFiles] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    return React.createElement(FileUploadContext.Provider, {
+        value: { files, setFiles, error, setError, maxSize },
+    }, React.createElement(_FormFileUploadWrapper, { ...props }));
+}
+export function _FormFileUploadWrapper({ className = "", ...props }) {
+    return React.createElement("div", {
+        className: className + " w-file-upload",
+        ...props,
+    });
+}
+export function FormFileUploadDefault({ className = "", ...props }) {
+    const { files, error } = React.useContext(FileUploadContext);
+    return React.createElement("div", {
+        className: className + " w-file-upload-default",
+        ...props,
+        style: {
+            ...props.style,
+            display: !files || error ? "block" : "none",
+        },
+    });
+}
+export function FormFileUploadInput({ className = "", ...props }) {
+    const { setFiles, setError, maxSize } = React.useContext(FileUploadContext);
+    return React.createElement("input", {
+        type: "file",
+        className: className + " w-file-upload-input",
+        ...props,
+        onChange: (e) => {
+            if (e.target.files) {
+                if (e.target.files[0].size <= maxSize) {
+                    setError(null);
+                    setFiles(e.target.files);
+                }
+                else
+                    setError("SIZE_ERROR");
+            }
+        },
+    });
+}
+export function FormFileUploadLabel({ className = "", ...props }) {
+    return React.createElement("label", {
+        className: className + " w-file-upload-label",
+        ...props,
+    });
+}
+export function FormFileUploadText({ className = "", ...props }) {
+    return React.createElement("div", {
+        className: className + " w-inline-block",
+        ...props,
+    });
+}
+export function FormFileUploadInfo({ className = "", ...props }) {
+    return React.createElement("div", {
+        className: className + " w-file-upload-info",
+        ...props,
+    });
+}
+export function FormFileUploadUploading({ className = "", ...props }) {
+    return React.createElement("div", {
+        className: className + " w-file-upload-uploading",
+        style: { ...props.style, display: "none" },
+        ...props,
+    });
+}
+export function FormFileUploadUploadingBtn({ className = "", ...props }) {
+    return React.createElement("div", {
+        className: className + " w-file-upload-uploading-btn",
+        ...props,
+    });
+}
+export function FormFileUploadUploadingIcon({ className = "", ...props }) {
+    return React.createElement("svg", {
+        className: className + " icon w-icon-file-upload-uploading",
+        ...props,
+    }, React.createElement(React.Fragment, null,
+        React.createElement("path", { fill: "currentColor", opacity: ".2", d: "M15 30a15 15 0 1 1 0-30 15 15 0 0 1 0 30zm0-3a12 12 0 1 0 0-24 12 12 0 0 0 0 24z" }),
+        React.createElement("path", { fill: "currentColor", opacity: ".75", d: "M0 15A15 15 0 0 1 15 0v3A12 12 0 0 0 3 15H0z" },
+            React.createElement("animateTransform", { attributeName: "transform", attributeType: "XML", dur: "0.6s", from: "0 15 15", repeatCount: "indefinite", to: "360 15 15", type: "rotate" }))));
+}
+export function FormFileUploadSuccess({ className = "", ...props }) {
+    const { files, error } = React.useContext(FileUploadContext);
+    return React.createElement("div", {
+        className: className + " w-file-upload-success",
+        ...props,
+        style: {
+            ...props.style,
+            display: !!files && !error ? "block" : "none",
+        },
+    });
+}
+export function FormFileUploadFile({ className = "", ...props }) {
+    return React.createElement("div", {
+        className: className + " w-file-upload-file",
+        ...props,
+    });
+}
+export function FormFileUploadFileName({ className = "", ...props }) {
+    const { files } = React.useContext(FileUploadContext);
+    return React.createElement("div", {
+        className: className + " w-file-upload-file-name",
+        ...props,
+    }, files && files[0].name);
+}
+export function FormFileUploadRemoveLink({ className = "", ...props }) {
+    const { setFiles } = React.useContext(FileUploadContext);
+    return React.createElement("div", {
+        className: className + " w-file-remove-link",
+        ...props,
+        onClick: () => {
+            setFiles(null);
+        },
+    });
+}
+export function FormFileUploadError({ className = "", ...props }) {
+    const { error } = React.useContext(FileUploadContext);
+    return React.createElement("div", {
+        className: className + " w-file-upload-error",
+        ...props,
+        style: {
+            ...props.style,
+            display: !!error ? "block" : "none",
+        },
+    });
+}
+export function FormFileUploadErrorMsg({ errors, className = "", ...props }) {
+    const { error } = React.useContext(FileUploadContext);
+    return React.createElement("div", {
+        className: className + " w-file-upload-error-msg",
+        ...props,
+    }, errors[error ?? "GENERIC_ERROR"]);
+}
+export function FormButton({ className = "", value, ...props }) {
+    return React.createElement("input", {
+        type: "submit",
+        value: value ?? "",
+        className: className + " w-button",
+        ...props,
+    });
+}
+export function SearchForm(props) {
+    return React.createElement("form", props);
+}
+export function SearchInput({ className = "", ...props }) {
+    return React.createElement("input", {
+        type: "text",
+        className: className + " w-input",
+        ...props,
+    });
+}
+export function SearchButton({ value = "", className = "", ...props }) {
+    return React.createElement("input", {
+        type: "submit",
+        value,
+        className: className + " w-button",
+        ...props,
+    });
+}
+export function FormSuccessMessage({ className = "", ...props }) {
+    return React.createElement("div", {
+        className: className + " w-form-done",
+        ...props,
+    });
+}
+export function FormErrorMessage({ className = "", ...props }) {
+    return React.createElement("div", {
+        className: className + " w-form-fail",
+        ...props,
+    });
+}
+function hasValue(str) {
+    if (typeof str !== "string")
+        return false;
+    //   is &nbsp
+    return str.replace(/^[s ]+|[s ]+$/g, "").length > 0;
+}
+export function FormSelect({ options, className = "", ...props }) {
+    return React.createElement("select", { className: className + " w-select", ...props }, options.map(({ v, t }, index) => React.createElement("option", { key: index, value: hasValue(v) ? v : "" }, hasValue(t) ? t : "")));
+}
+export function FormReCaptcha({ siteKey = "", theme = "light", size = "normal", }) {
+    React.useEffect(() => {
+        loadScript("https://www.google.com/recaptcha/api.js", {
+            cacheRegex: /(http|https):\/\/(www)?.+\/recaptcha/,
+        });
+    }, []);
+    return (React.createElement("div", { className: "g-recaptcha", "data-sitekey": siteKey, "data-theme": theme, "data-size": size }));
+}

package/dist/devlink-engine/_Builtin/Map.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+type MapWidgetProps = {
+    className?: string;
+    apiKey: string;
+    zoom?: number;
+    latlng?: string;
+    mapStyle?: "roadmap" | "satellite" | "hybrid" | "terrain";
+    tooltip?: string;
+    title?: string;
+    enableScroll?: boolean;
+    enableTouch?: boolean;
+};
+export declare function MapWidget({ apiKey, mapStyle, zoom, latlng, tooltip, title, enableScroll, enableTouch, className, ...props }: MapWidgetProps): JSX.Element;
+export default Map;

package/dist/devlink-engine/_Builtin/Map.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from "react";
+import { cj, loadScript } from "../utils";
+function buildTitle(title, tooltip) {
+    let markerTitle = "Map pin";
+    if (title && tooltip) {
+        markerTitle = `Map pin on ${title} showing location of ${tooltip}`;
+    }
+    else if (title && !tooltip) {
+        markerTitle = `Map pin on ${title}`;
+    }
+    else if (!title && tooltip) {
+        markerTitle = `Map pin showing location of ${tooltip}`;
+    }
+    return markerTitle;
+}
+export function MapWidget({ apiKey = "", mapStyle = "roadmap", zoom = 12, latlng = "51.511214,-0.119824", tooltip = "", title = "", enableScroll = true, enableTouch = true, className = "", ...props }) {
+    const mapRef = useRef(null);
+    useEffect(() => {
+        const loadMap = () => {
+            if (!mapRef.current)
+                return;
+            if (!window?.google?.maps)
+                return;
+            const { Map, Marker, InfoWindow } = window.google.maps;
+            const coords = latlng.split(",");
+            const center = { lat: parseFloat(coords[0]), lng: parseFloat(coords[1]) };
+            const map = new Map(mapRef.current, {
+                zoom,
+                center,
+                mapTypeId: mapStyle,
+                mapTypeControl: false,
+                panControl: false,
+                streetViewControl: false,
+                draggable: enableTouch,
+                scrollwheel: enableScroll,
+                zoomControl: true,
+            });
+            const marker = new Marker({
+                draggable: false,
+                position: center,
+                title: buildTitle(title, tooltip),
+                map,
+            });
+            if (tooltip) {
+                new InfoWindow({
+                    disableAutoPan: true,
+                    content: tooltip,
+                    position: center,
+                }).open({ anchor: marker, map });
+            }
+            google.maps.event.addListener(marker, "click", function () {
+                window.open(`https://maps.google.com/?z=${zoom}&daddr=${latlng}`);
+            });
+        };
+        loadScript(`https://maps.googleapis.com/maps/api/js?v=3.52.5&key=${apiKey}`, {
+            cacheRegex: /maps\.googleapis\.com\/maps\/api\/js\?v=3\.52\.5\&key=/gi,
+        }).then(loadMap);
+    }, [
+        apiKey,
+        mapStyle,
+        zoom,
+        latlng,
+        tooltip,
+        title,
+        enableScroll,
+        enableTouch,
+        mapRef,
+    ]);
+    return (React.createElement("div", { ...props, className: cj(className, "w-widget w-widget-map"), role: "region", ref: mapRef }));
+}
+export default Map;

package/dist/devlink-engine/_Builtin/Navbar.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { EASING_FUNCTIONS } from "../utils";
+import { LinkProps, ContainerProps } from "./Basic";
+type NavbarConfig = {
+    animation: string;
+    collapse: string;
+    docHeight: boolean;
+    duration: number;
+    easing: keyof typeof EASING_FUNCTIONS;
+    easing2: keyof typeof EASING_FUNCTIONS;
+    noScroll: boolean;
+};
+export declare const NavbarContext: React.Context<NavbarConfig & {
+    animDirect: -1 | 1;
+    animOver: boolean;
+    getBodyHeight: () => number;
+    getOverlayHeight: () => number;
+    isOpen: boolean;
+    menu?: React.MutableRefObject<HTMLElement | null> | undefined;
+    root?: React.MutableRefObject<HTMLElement | null> | undefined;
+    toggleOpen: () => void;
+    navbarMounted: boolean;
+}>;
+type NavbarChildrenType = NavbarContainerProps | NavbarBrandProps | NavbarMenuProps | NavbarButtonProps;
+type NavbarProps = {
+    tag: React.ElementType;
+    config: NavbarConfig;
+    className?: string;
+    children?: React.ReactElement<NavbarChildrenType>[] | React.ReactElement<NavbarChildrenType>;
+};
+export declare function NavbarWrapper(props: NavbarProps): JSX.Element;
+type NavbarContainerProps = ContainerProps & {
+    toggleOpen: () => void;
+    isOpen: boolean;
+    children: React.ReactNode;
+};
+export declare function NavbarContainer({ children, ...props }: NavbarContainerProps): JSX.Element;
+type NavbarBrandProps = LinkProps;
+export declare function NavbarBrand({ className, ...props }: NavbarBrandProps): JSX.Element;
+type NavbarMenuProps = React.PropsWithChildren<{
+    tag?: React.ElementType;
+    className?: string;
+    isOpen?: boolean;
+}>;
+export declare function NavbarMenu({ tag, className, ...props }: NavbarMenuProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+type NavbarLinkProps = LinkProps;
+export declare function NavbarLink({ className, ...props }: NavbarLinkProps): JSX.Element;
+type NavbarButtonProps = React.PropsWithChildren<{
+    tag?: React.ElementType;
+    className?: string;
+}>;
+export declare function NavbarButton({ tag, className, ...props }: NavbarButtonProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/devlink-engine/_Builtin/Navbar.js

@@ -0,0 +1,240 @@
+import * as React from "react";
+import { EASING_FUNCTIONS, cj, debounce, isServer, useLayoutEffect, useResizeObserver, } from "../utils";
+import { Link, Container } from "./Basic";
+export const NavbarContext = React.createContext({
+    animDirect: 1,
+    animOver: false,
+    animation: "animation",
+    collapse: "medium",
+    docHeight: false,
+    duration: 400,
+    easing2: "ease",
+    easing: "ease",
+    getBodyHeight: () => 0,
+    getOverlayHeight: () => 0,
+    isOpen: false,
+    noScroll: false,
+    toggleOpen: () => { },
+    navbarMounted: false,
+});
+function getAnimationKeyframes({ axis = "Y", start, end, }) {
+    const t = `translate${axis}`;
+    return [{ transform: `${t}(${start}px)` }, { transform: `${t}(${end}px)` }];
+}
+export function NavbarWrapper(props) {
+    const { animation, docHeight, easing, easing2, duration, noScroll } = props.config;
+    const root = React.useRef(null);
+    const menu = React.useRef(null);
+    const animOver = /^over/.test(animation);
+    const animDirect = /left$/.test(animation) ? -1 : 1;
+    const getBodyHeight = React.useCallback(() => {
+        if (isServer)
+            return 0;
+        return docHeight
+            ? document.documentElement.scrollHeight
+            : document.body.scrollHeight;
+    }, [docHeight]);
+    const getOverlayHeight = React.useCallback(() => {
+        if (isServer || !root.current)
+            return 0;
+        let h = getBodyHeight();
+        const style = getComputedStyle(root.current);
+        if (!animOver && style.position !== "fixed") {
+            h -= root.current.offsetHeight;
+        }
+        return h;
+    }, [animOver, getBodyHeight]);
+    const getOffsetHeight = React.useCallback(() => {
+        if (!root.current || !menu.current)
+            return 0;
+        return root.current.offsetHeight + menu.current.offsetHeight;
+    }, []);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const toggleOpen = debounce(() => {
+        if (!menu.current)
+            return;
+        // menu is open and should be closed
+        if (isOpen) {
+            const keyframes = animOver
+                ? getAnimationKeyframes({
+                    axis: "X",
+                    start: 0,
+                    end: animDirect * menu.current.offsetWidth,
+                })
+                : getAnimationKeyframes({ start: 0, end: -getOffsetHeight() });
+            const anim = menu.current.animate(keyframes, {
+                easing: EASING_FUNCTIONS[easing2] ?? "ease",
+                duration,
+                fill: "forwards",
+            });
+            anim.onfinish = () => {
+                setIsOpen(!isOpen);
+            };
+            return;
+        }
+        setIsOpen(!isOpen);
+    });
+    useLayoutEffect(() => {
+        if (!menu.current)
+            return;
+        // menu is closed and will open, but the animation only runs when isOpen is true
+        if (isOpen) {
+            const keyframes = animOver
+                ? getAnimationKeyframes({
+                    axis: "X",
+                    start: animDirect * menu.current.offsetWidth,
+                    end: 0,
+                })
+                : getAnimationKeyframes({ start: -getOffsetHeight(), end: 0 });
+            menu.current.animate(keyframes, {
+                easing: EASING_FUNCTIONS[easing] ?? "ease",
+                duration,
+                fill: "forwards",
+            });
+        }
+    }, [
+        animDirect,
+        animOver,
+        duration,
+        easing,
+        getBodyHeight,
+        getOffsetHeight,
+        isOpen,
+    ]);
+    // if the menu is opened and noScroll === false prevent scrolling
+    useLayoutEffect(() => {
+        if (isOpen && noScroll) {
+            document.body.style.overflowY = "hidden";
+        }
+        else {
+            document.body.style.overflowY = "";
+        }
+        return () => {
+            document.body.style.overflowY = "";
+        };
+    }, [isOpen, noScroll]);
+    // Closes menu when the window is resized
+    const closeOnResize = React.useCallback(() => setIsOpen(false), [setIsOpen]);
+    useResizeObserver(root, closeOnResize);
+    return (React.createElement(NavbarContext.Provider, { value: {
+            ...props.config,
+            root,
+            menu,
+            animOver,
+            animDirect,
+            getBodyHeight,
+            getOverlayHeight,
+            isOpen,
+            toggleOpen,
+            navbarMounted: true,
+        } },
+        React.createElement(Navbar, { ...props })));
+}
+/**
+ * Navbar menu gets appended to the overlay when it's open.
+ * This function extracts the child menu when that's the case.
+ * */
+const maybeExtractChildMenu = (children, isOpen) => {
+    if (!isOpen)
+        return { childMenu: null, rest: children };
+    const childrenArray = React.Children.toArray(children);
+    const { childMenu, rest } = childrenArray.reduce((acc, child) => {
+        if (child.type === NavbarMenu) {
+            acc.childMenu = child;
+            return acc;
+        }
+        if (child.type === NavbarContainer) {
+            const { children: containerChildren, ...containerProps } = child.props;
+            const { childMenu, rest } = maybeExtractChildMenu(containerChildren, isOpen);
+            acc.childMenu = childMenu;
+            acc.rest.push(React.createElement(NavbarContainer, { ...containerProps }, rest));
+            return acc;
+        }
+        acc.rest.push(child);
+        return acc;
+    }, { childMenu: null, rest: [] });
+    return {
+        childMenu,
+        rest: React.createElement(React.Fragment, null, rest.map((e, i) => React.cloneElement(e, { key: i }))),
+    };
+};
+function Navbar({ tag = "div", className = "", children, config, ...props }) {
+    const { root, isOpen } = React.useContext(NavbarContext);
+    const { childMenu, rest } = React.useMemo(() => maybeExtractChildMenu(children, isOpen), [children, isOpen]);
+    return React.createElement(tag, {
+        ...props,
+        className: cj(className, "w-nav"),
+        "data-collapse": config.collapse,
+        "data-animation": config.animation,
+        ref: root,
+    }, React.createElement(React.Fragment, null,
+        rest,
+        React.createElement(NavbarOverlay, null, childMenu)));
+}
+function NavbarOverlay({ children }) {
+    const { isOpen, getOverlayHeight, toggleOpen } = React.useContext(NavbarContext);
+    const overlayToggleOpen = React.useCallback((e) => {
+        // prevent link clicks to close the overlay
+        if (e.target === e.currentTarget) {
+            toggleOpen();
+        }
+    }, [toggleOpen]);
+    return (React.createElement("div", { className: "w-nav-overlay", id: "w-nav-overlay", style: {
+            display: isOpen ? "block" : "none",
+            height: getOverlayHeight(),
+            width: isOpen ? "100vw" : 0,
+        }, onClick: overlayToggleOpen }, children));
+}
+export function NavbarContainer({ children, ...props }) {
+    const ref = React.useRef(null);
+    const { isOpen } = React.useContext(NavbarContext);
+    const updateLinkStyles = React.useCallback((entry) => {
+        const { maxWidth: containerMaxWidth } = getComputedStyle(entry.target);
+        document
+            .querySelectorAll(".w-nav-menu>.w-dropdown,.w-nav-menu>.w-nav-link")
+            .forEach((node) => {
+            if (!(node instanceof HTMLElement))
+                return;
+            if (!isOpen) {
+                node.style.maxWidth = "";
+                return;
+            }
+            const { maxWidth } = getComputedStyle(node);
+            node.style.maxWidth =
+                !maxWidth || maxWidth === "none" ? containerMaxWidth : "";
+        });
+    }, [isOpen]);
+    useResizeObserver(ref, updateLinkStyles);
+    return (React.createElement(Container, { ...props, ref: ref }, children));
+}
+export function NavbarBrand({ className = "", ...props }) {
+    return React.createElement(Link, { ...props, className: cj(className, "w-nav-brand") });
+}
+export function NavbarMenu({ tag = "nav", className = "", ...props }) {
+    const { getBodyHeight, animOver, isOpen, menu } = React.useContext(NavbarContext);
+    return React.createElement(tag, {
+        ...props,
+        className: cj(className, "w-nav-menu"),
+        ...(isOpen ? { "data-nav-menu-open": "" } : {}),
+        style: animOver ? { height: getBodyHeight() } : {},
+        ref: menu,
+    });
+}
+export function NavbarLink({ className = "", ...props }) {
+    const { isOpen } = React.useContext(NavbarContext);
+    return (React.createElement(Link, { ...props, className: cj(className, "w-nav-link", isOpen && "w--nav-link-open") }));
+}
+export function NavbarButton({ tag = "div", className = "", ...props }) {
+    const { isOpen, toggleOpen } = React.useContext(NavbarContext);
+    return React.createElement(tag, {
+        ...props,
+        "aria-label": "menu",
+        "aria-expanded": isOpen ? "true" : "false",
+        "aria-haspopup": "menu",
+        "aria-controls": "w-nav-overlay",
+        role: "button",
+        tabIndex: 0,
+        className: cj(className, "w-nav-button", isOpen && "w--open"),
+        onClick: toggleOpen,
+    });
+}