const { Tailwind } = VM.require( "beachsunandrockandroll.near/widget/preflight" ); State.init({ clsName: "", }); const code3 = ` <script type="module"> import mxcn from "https://cdn.jsdelivr.net/npm/mxcn@2.0.0/+esm" import {cva} from 'https://cdn.jsdelivr.net/npm/class-variance-authority@0.7.0/+esm' const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-uin-primary text-primary-foreground hover:opacity-90", destructive: "bg-destructive text-destructive-foreground hover:opacity-90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary hover:opacity-80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) window.top.postMessage("loaded", "*"); window.addEventListener("message", (event) => { const data = event.data try { const result = eval(data.exp); const {className,variant, size}= data event.source.postMessage(mxcn(buttonVariants({ variant, size, className })), "*"); } catch (e) { // ignore } }, false); </script> `; const Button = ({ className, variant, size, children, ...props }) => { return ( <Tailwind> <iframe className="hidden" srcDoc={code3} message={{ className, variant, size }} onMessage={(clsName) => State.update({ clsName })} /> <button className={state.clsName} ref={forwardedRef} {...props}> {children} </button> </Tailwind> ); }; return { Button }