// import { Banner, IconInfo32, Link, Textbox } from '@create-figma-plugin/ui'; import { Banner, IconInfo32, Textbox } from '@create-figma-plugin/ui'; import { Controller, useFormContext } from 'react-hook-form'; import { Stack } from './Stack'; type MissingFontsSectionProps = { fonts?: string[]; }; export const MissingFontsSection = ({ fonts }: MissingFontsSectionProps) => { if (!fonts || !fonts.length) return null; return ( }> {fonts.length} custom font{fonts.length > 1 ? 's' : ''} detected To export your file with custom fonts, please follow these steps:
  • Upload your local fonts in Penpot. {/*
    Learn how to do it. */}
  • Copy and paste the font IDs from Penpot below.
  • {fonts.map(font => ( {font} ))}
    ); }; type ControlledTextboxProps = { name: string; placeholder: string }; const ControlledTextbox = ({ name, placeholder }: ControlledTextboxProps) => { const { control } = useFormContext(); return ( ( )} /> ); };