Using platform-version 2.3, fdk 9.0.6, and crayons v3 the fw-country-phone element in the following html is not rendering:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script async src="{{{appclient}}}"></script>
<link rel="stylesheet" type="text/css" href="../styles/style.css" />
</head>
<body>
<div id="static-form-container">
<fw-form id="fw-static-form">
<fw-form-control id="recipient_name"
type="TEXT"
name="recipient_name"
placeholder="Enter name"
required
label="Recipient Name"
hint="Maximum length is 32 characters"
></fw-form-control>
</fw-form>
<fw-country-phone id="fax_number"
value="+18556322499"
name="fax_number"
clear-input
select-placeholder="select country code"
input-placeholder="Enter fax number"
required
input-label="Recipient fax number"
select-label="Country (Only U.S. Supported)"
error-text="Please enter a valid US phone number"
warning-text="select country code to get valid phonenumber"
state="normal"
style="--fw-select-width: 0 0 400px"
></fw-country-phone>
<fw-select id="file_select"
required
label="Select file"
placeholder="Your choices"
hint-text="Select file to fax"
></fw-select>
<fw-button id="send-fax-static-form">Send Fax</fw-button>
</div>
<section class="auth-call"></section>
</body>
<script defer src="../scripts/utils.js"></script>
<script defer src="../scripts/fax.js"></script>
<script async type="module" src="https://unpkg.com/@freshworks/crayons@3/dist/crayons/crayons.esm.js"></script>
<script async nomodule src="https://unpkg.com/@freshworks/crayons@3/dist/crayons/crayons.js"></script>
</html>
I can drop in other crayon elements in the same location and they render without problems.