// Generated by Framer (3c6ede6)

import * as React from "react";
import { motion, LayoutGroup } from "framer-motion";
import { useOnVariantChange, useActiveVariantCallback, Image, transformTemplate, addFonts, withCSS, addPropertyControls, ControlType, cx, useVariantState, CycleVariantState, RichText } from "framer";
import * as sharedStyle from "../css/AS4PcgcTr";
import * as sharedStyle1 from "../css/xZndidUCt";
import * as sharedStyle2 from "../css/ro7OPezbn";

const cycleOrder = ["eoTXJYY6N", "vRz6iFx98", "dxtA8R9ro", "cejOMEH6_"];

const variantClassNames = {eoTXJYY6N: "framer-v-1h3kkwj", vRz6iFx98: "framer-v-1f45kyb", dxtA8R9ro: "framer-v-gjks3k", cejOMEH6_: "framer-v-i8tr5s"};

function addPropertyOverrides(overrides, ...variants) {
const nextOverrides = {}
variants?.forEach(variant => variant && Object.assign(nextOverrides, overrides[variant]))
return nextOverrides
}

const humanReadableVariantMap = {Desktop: "eoTXJYY6N", Tablet: "vRz6iFx98", Phone: "dxtA8R9ro", "Phone Open": "cejOMEH6_"};

const transitions = {default: {type: "spring", ease: [0.44, 0, 0.56, 1], duration: 1, delay: 0, stiffness: 400, damping: 35, mass: 1}};

const BASE62 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"

const useRandomID = () => {const ref = React.useRef(null);
if (ref.current === null) {
ref.current = Array(5).fill(0).map(() => BASE62[Math.floor(Math.random() * BASE62.length)]).join("");
}
return ref.current;}

export interface Props extends React.HTMLAttributes<HTMLDivElement> { layoutId?: string | null; width?: number; height?: number; layoutDependency?: string | number; variant?: keyof typeof humanReadableVariantMap; }

const Component = React.forwardRef<HTMLDivElement, Props>(function({ id, style: externalStyle = {}, className, width, height, layoutId, variant: outerVariant = "eoTXJYY6N", ...restProps }, ref) {

const outerVariantId = humanReadableVariantMap[outerVariant];

const variant = outerVariantId || outerVariant;

const { variants, baseVariant, gestureVariant, classNames, transition, setVariant, setGestureState } = useVariantState({defaultVariant: "eoTXJYY6N", variant, transitions, variantClassNames, cycleOrder});
const layoutDependency = variants.join("-") + restProps.layoutDependency;

const { activeVariantCallback, delay } = useActiveVariantCallback(baseVariant);

const onTap1t0f0tf = activeVariantCallback(async (...args) => {
setVariant("cejOMEH6_")
})

const onTap7q5mbe = activeVariantCallback(async (...args) => {
setVariant("dxtA8R9ro")
})

const isDisplayed1 = () => {
if (["dxtA8R9ro", "cejOMEH6_"].includes(baseVariant)) return true;
return false
}

const isDisplayed2 = () => {
if (baseVariant === "dxtA8R9ro") return false
return true
}

const isDisplayed3 = () => {
if (baseVariant === "dxtA8R9ro") return false
return true
}

const defaultLayoutId = useRandomID();

const { pointerEvents, ...style } = externalStyle

return (<LayoutGroup id={layoutId ?? defaultLayoutId}>
<motion.div data-framer-generated initial={variant} animate={variants} onHoverStart={() => setGestureState({isHovered: true})} onHoverEnd={() => setGestureState({isHovered: false})} onTapStart={() => setGestureState({isPressed: true})} onTap={() => setGestureState({isPressed: false})} onTapCancel={() => setGestureState({isPressed: false})} className={cx("framer-ECLZz", sharedStyle.className, sharedStyle1.className, sharedStyle2.className, classNames)} style={{display: "contents", pointerEvents: pointerEvents ?? undefined}}>
<motion.nav {...restProps} className={cx("framer-1h3kkwj", className)} style={{backgroundColor: "rgb(255, 255, 255)", "--border-left-width": "0px", "--border-right-width": "0px", "--border-top-width": "0px", "--border-bottom-width": "1px", "--border-style": "solid", "--border-color": "rgba(0, 0, 0, 0.08)", ...style}} layoutId={"eoTXJYY6N"} transition={transition} layoutDependency={layoutDependency} data-framer-name={"Desktop"} data-border={true} ref={ref} {...addPropertyOverrides({vRz6iFx98: {"data-framer-name": "Tablet"}, dxtA8R9ro: {"data-framer-name": "Phone"}, cejOMEH6_: {"data-framer-name": "Phone Open"}}, baseVariant, gestureVariant)}><motion.div className={"framer-19nhdre"} style={{}} layoutId={"loTDjognq"} transition={transition} layoutDependency={layoutDependency} background={null} data-framer-name={"Title and Icon"} {...addPropertyOverrides({cejOMEH6_: {transformTemplate: undefined, background: null}}, baseVariant, gestureVariant)}><RichText className={"framer-q7dosh"} style={{"--framer-paragraph-spacing": "0px", whiteSpace: "pre", "--extracted-euys4q": "rgb(17, 17, 17)"}} layoutId={"YVvQbLNfa"} transition={transition} layoutDependency={layoutDependency} fonts={["GF;Manrope-800"]} withExternalLayout={true} verticalAlignment={"top"} preload={["augiA20Il"]} __fromCanvasComponent={true} __link={"data:framer/page-link,augiA20Il"} __htmlStructure={"<h2 style=\"--framer-line-height:2em; --framer-text-alignment:left;\"><a class=\"framer-styles-preset-fsrzda\" data-styles-preset=\"AS4PcgcTr\" href=\"data:framer/page-link,augiA20Il\" rel=\"noreferrer noopener\"><span style=\"--framer-font-family:&quot;Manrope&quot;, serif; --framer-font-style:normal; --framer-font-weight:800; --font-selector:R0Y7TWFucm9wZS04MDA=; --framer-text-color:var(--extracted-euys4q); --framer-letter-spacing:1px;\">{{ text-placeholder }}</span></a></h2>"} htmlFromDesign={"<h2 style=\"--framer-line-height:2em; --framer-text-alignment:left;\"><a class=\"framer-styles-preset-fsrzda\" data-styles-preset=\"AS4PcgcTr\" href=\"data:framer/page-link,augiA20Il\" rel=\"noreferrer noopener\"><span style=\"--framer-font-family:&quot;Manrope&quot;, serif; --framer-font-style:normal; --framer-font-weight:800; --font-selector:R0Y7TWFucm9wZS04MDA=; --framer-text-color:var(--extracted-euys4q); --framer-letter-spacing:1px;\">FRAMER</span></a></h2>"}/>{isDisplayed1() && (<motion.div className={"framer-cixk1f"} style={{}} layoutId={"f7q1_4HYs"} transition={transition} layoutDependency={layoutDependency} background={null} data-framer-name={"Icon"} {...addPropertyOverrides({dxtA8R9ro: {onTap: onTap1t0f0tf, "data-highlight": true}, cejOMEH6_: {onTap: onTap7q5mbe, background: null, "data-highlight": true}}, baseVariant, gestureVariant)}><motion.div className={"framer-137fe1y"} style={{borderBottomLeftRadius: 10, borderBottomRightRadius: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10, backgroundColor: "rgb(153, 153, 153)", rotate: 0}} layoutId={"JnWn3HUoS"} transition={transition} layoutDependency={layoutDependency} data-framer-name={"Bottom"} variants={{cejOMEH6_: {rotate: -45}}} {...addPropertyOverrides({cejOMEH6_: {transformTemplate: undefined}}, baseVariant, gestureVariant)}/><motion.div className={"framer-191ndl0"} style={{borderBottomLeftRadius: 10, borderBottomRightRadius: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10, backgroundColor: "rgb(153, 153, 153)"}} layoutId={"q6J4YelpH"} transition={transition} layoutDependency={layoutDependency} data-framer-name={"Mid"}/><motion.div className={"framer-ec9dat"} style={{borderBottomLeftRadius: 10, borderBottomRightRadius: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10, backgroundColor: "rgb(153, 153, 153)", rotate: 0}} layoutId={"GEPuuP2jb"} transition={transition} layoutDependency={layoutDependency} data-framer-name={"Top"} variants={{cejOMEH6_: {rotate: 45}}} {...addPropertyOverrides({cejOMEH6_: {transformTemplate: undefined}}, baseVariant, gestureVariant)}/></motion.div>)}</motion.div>{isDisplayed2() && (<RichText className={"framer-9rkqj0"} style={{"--framer-paragraph-spacing": "0px", whiteSpace: "pre", opacity: 1}} layoutId={"HdW3bYUTP"} transition={transition} layoutDependency={layoutDependency} fonts={[]} withExternalLayout={true} verticalAlignment={"top"} preload={["fyxHY82ZH"]} __fromCanvasComponent={true} __link={"data:framer/page-link,fyxHY82ZH"} __htmlStructure={"<p class=\"framer-styles-preset-21ogod\" data-styles-preset=\"xZndidUCt\" style=\"--framer-text-alignment:center;\"><a class=\"framer-styles-preset-1wicq5s\" data-styles-preset=\"ro7OPezbn\" href=\"data:framer/page-link,fyxHY82ZH\" rel=\"noreferrer noopener\">{{ text-placeholder }}</a></p>"} htmlFromDesign={"<p class=\"framer-styles-preset-21ogod\" data-styles-preset=\"xZndidUCt\" style=\"--framer-text-alignment:center;\"><a class=\"framer-styles-preset-1wicq5s\" data-styles-preset=\"ro7OPezbn\" href=\"data:framer/page-link,fyxHY82ZH\" rel=\"noreferrer noopener\">About</a></p>"} variants={{dxtA8R9ro: {opacity: 0}, cejOMEH6_: {opacity: 1}}}/>)}{isDisplayed3() && (<RichText className={"framer-wzr83z"} style={{"--framer-paragraph-spacing": "0px", whiteSpace: "pre", opacity: 1}} layoutId={"fkJeskHNO"} transition={transition} layoutDependency={layoutDependency} fonts={[]} withExternalLayout={true} verticalAlignment={"top"} preload={["oSqiE1i1k"]} __fromCanvasComponent={true} __link={"data:framer/page-link,oSqiE1i1k"} __htmlStructure={"<p class=\"framer-styles-preset-21ogod\" data-styles-preset=\"xZndidUCt\" style=\"--framer-text-alignment:center;\"><a class=\"framer-styles-preset-1wicq5s\" data-styles-preset=\"ro7OPezbn\" href=\"data:framer/page-link,oSqiE1i1k\" rel=\"noreferrer noopener\">{{ text-placeholder }}</a></p>"} htmlFromDesign={"<p class=\"framer-styles-preset-21ogod\" data-styles-preset=\"xZndidUCt\" style=\"--framer-text-alignment:center;\"><a class=\"framer-styles-preset-1wicq5s\" data-styles-preset=\"ro7OPezbn\" href=\"data:framer/page-link,oSqiE1i1k\" rel=\"noreferrer noopener\">Contact</a></p>"} variants={{dxtA8R9ro: {opacity: 0}, cejOMEH6_: {opacity: 1}}}/>)}</motion.nav>
</motion.div>
</LayoutGroup>)

});

const css = [".framer-ECLZz [data-border=\"true\"]::after { content: \"\"; border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0); border-color: var(--border-color, none); border-style: var(--border-style, none); width: 100%; height: 100%; position: absolute; box-sizing: border-box; left: 0; top: 0; border-radius: inherit; pointer-events: none;}", "@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } }", ".framer-ECLZz * { box-sizing: border-box; }", ".framer-ECLZz .framer-1h3kkwj { position: relative; overflow: hidden; width: 1200px; height: 80px; display: flex; flex-direction: row; justify-content: center; align-content: center; align-items: center; flex-wrap: nowrap; gap: 24px; padding: 24px 24px 24px 24px; }", ".framer-ECLZz .framer-19nhdre { position: relative; overflow: visible; width: 1px; height: 32px; flex: 1 0 0px; display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; align-items: flex-start; flex-wrap: nowrap; padding: 0px 0px 0px 0px; }", ".framer-ECLZz .framer-q7dosh { position: relative; overflow: hidden; width: auto; height: 32px; flex: none; white-space: pre; }", ".framer-ECLZz .framer-cixk1f { position: relative; overflow: hidden; width: 32px; height: var(--framer-aspect-ratio-supported, 32px); flex: none; aspect-ratio: 1 / 1; }", ".framer-ECLZz .framer-137fe1y { position: absolute; overflow: hidden; will-change: transform; width: 24px; height: 2px; bottom: 7px; left: calc(50.00000000000002% - 24px / 2); flex: none; }", ".framer-ECLZz .framer-191ndl0 { position: absolute; overflow: hidden; will-change: transform; width: 24px; height: 2px; left: calc(50.00000000000002% - 24px / 2); top: calc(50.00000000000002% - 2px / 2); flex: none; }", ".framer-ECLZz .framer-ec9dat { position: absolute; overflow: hidden; will-change: transform; width: 24px; height: 2px; left: calc(50.00000000000002% - 24px / 2); top: 7px; flex: none; }", ".framer-ECLZz .framer-9rkqj0, .framer-ECLZz .framer-wzr83z { position: relative; overflow: visible; width: auto; height: auto; flex: none; white-space: pre; }", "@supports (background: -webkit-named-image(i)) and (not (font-palette:dark)) { .framer-ECLZz framer-1h3kkwj > * { margin: 0px; margin-left: calc(24px / 2); margin-right: calc(24px / 2); } .framer-ECLZz framer-1h3kkwj > :first-child { margin-left: 0px; } .framer-ECLZz framer-1h3kkwj > :last-child { margin-right: 0px; } }", ".framer-ECLZz.framer-v-1f45kyb .framer-1h3kkwj { width: 810px; height: 80px; }", ".framer-ECLZz.framer-v-gjks3k .framer-1h3kkwj { width: 390px; height: 80px; }", ".framer-ECLZz.framer-v-gjks3k .framer-cixk1f { cursor: pointer; }", ".framer-ECLZz.framer-v-i8tr5s .framer-1h3kkwj { display: flex; flex-direction: column; justify-content: flex-start; align-content: center; align-items: center; flex-wrap: nowrap; gap: 0px; width: 390px; height: min-content; padding: 24px 24px 60px 24px; }", ".framer-ECLZz.framer-v-i8tr5s .framer-19nhdre { width: 100%; height: 64px; right: auto; bottom: auto; left: auto; top: auto; flex: none; align-self: auto; aspect-ratio: unset; display: flex; flex-direction: row; justify-content: space-between; align-content: flex-start; align-items: flex-start; flex-wrap: nowrap; gap: unset; order: 0; }", ".framer-ECLZz.framer-v-i8tr5s .framer-q7dosh { width: auto; height: 32px; right: auto; bottom: auto; left: auto; top: auto; flex: none; align-self: auto; white-space: pre; aspect-ratio: unset; }", ".framer-ECLZz.framer-v-i8tr5s .framer-cixk1f { width: 32px; height: var(--framer-aspect-ratio-supported, 32px); right: auto; bottom: auto; left: auto; top: auto; flex: none; align-self: auto; aspect-ratio: 1 / 1; cursor: pointer; }", ".framer-ECLZz.framer-v-i8tr5s .framer-137fe1y { width: 24px; height: 2px; right: auto; bottom: 15px; left: calc(50.00000000000002% - 24px / 2); top: auto; flex: none; aspect-ratio: unset; }", ".framer-ECLZz.framer-v-i8tr5s .framer-191ndl0 { width: 2px; height: 2px; right: auto; bottom: auto; left: calc(50.00000000000002% - 2px / 2); top: calc(50.00000000000002% - 2px / 2); flex: none; aspect-ratio: unset; }", ".framer-ECLZz.framer-v-i8tr5s .framer-ec9dat { width: 24px; height: 2px; right: auto; bottom: auto; left: calc(50.00000000000002% - 24px / 2); top: 15px; flex: none; aspect-ratio: unset; }", ".framer-ECLZz.framer-v-i8tr5s .framer-9rkqj0 { width: auto; height: auto; right: auto; bottom: auto; left: auto; top: auto; flex: none; align-self: auto; white-space: pre; aspect-ratio: unset; order: 1; }", ".framer-ECLZz.framer-v-i8tr5s .framer-wzr83z { width: auto; height: auto; right: auto; bottom: auto; left: auto; top: auto; flex: none; align-self: auto; white-space: pre; aspect-ratio: unset; order: 2; }", "@supports (background: -webkit-named-image(i)) and (not (font-palette:dark)) { .framer-ECLZzframer-1h3kkwj > * { margin: 0px; margin-top: calc(0px / 2); margin-bottom: calc(0px / 2); } .framer-ECLZzframer-1h3kkwj > :first-child { margin-top: 0px; } .framer-ECLZzframer-1h3kkwj > :last-child { margin-bottom: 0px; } }", ...sharedStyle.css, ...sharedStyle1.css, ...sharedStyle2.css]

/**
 * This is a generated Framer component.
 * @framerIntrinsicHeight 80
 * @framerIntrinsicWidth 1200
 * @framerCanvasComponentVariantDetails {"propertyName":"variant","data":{"default":{"layout":["fixed","fixed"]},"vRz6iFx98":{"layout":["fixed","fixed"]},"dxtA8R9ro":{"layout":["fixed","fixed"]},"cejOMEH6_":{"layout":["fixed","auto"]}}}
 */
const FramerpQWsMWkcK: React.ComponentType<Props> = withCSS(Component, css) as typeof Component;
export default FramerpQWsMWkcK;

FramerpQWsMWkcK.displayName = "Topbar";

FramerpQWsMWkcK.defaultProps = {width: 1200, height: 80};

addPropertyControls(FramerpQWsMWkcK, {variant: {type: ControlType.Enum, title: "Variant", options: ["eoTXJYY6N", "vRz6iFx98", "dxtA8R9ro", "cejOMEH6_"], optionTitles: ["Desktop", "Tablet", "Phone", "Phone Open"]}} as any);

addFonts(FramerpQWsMWkcK, [{url: "https://fonts.gstatic.com/s/manrope/v12/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk59E-_F87jxeN7B.ttf", family: "Manrope", style: "normal", weight: "800", moduleAsset: {url: "https://fonts.gstatic.com/s/manrope/v12/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk59E-_F87jxeN7B.ttf", localModuleIdentifier: "local-module:canvasComponent/pQWsMWkcK:default"}}, ...sharedStyle.fonts, ...sharedStyle1.fonts, ...sharedStyle2.fonts]);