const { Tailwind } = VM.require("beachsunandrockandroll.near/widget/preflight"); const checkboxClassname = "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"; const CheckboxRoot = ({ className, ...props }) => ( <Tailwind> <Checkbox.Root ref="forwardedRef" className={className ?? checkboxClassname} {...props} > <Checkbox.Indicator className="flex items-center justify-center text-current"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="h-4 w-4" viewBox="0 0 16 16" > <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" /> <path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" /> </svg> </Checkbox.Indicator> </Checkbox.Root> </Tailwind> ); return { CheckboxRoot, checkboxClassname };