Framed Choice Frame

<div class="{{ namespace }}framedChoice {{ namespace }}showCustomIndicatorHover{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<input name="{{ inputName or "framedChoiceInput" }}" type="{{ type }}" id="{{ id }}" class="{{ namespace }}framedChoice__input sr-only{% if error %} is-invalid{% endif %}"{% if error %} aria-invalid="true"{% endif %} {% if error or hint %} aria-describedby="{% if error %}{{ errorID }}{% endif %}{% if hint %} {{ hintID }}{% endif %}"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}framedChoice__body" data-scope-wrapper="box" data-scope="flat">

		<div class="{{ namespace }}framedChoice__content {{ namespace }}staticGapMd">

			<div class="{{ namespace }}framedChoice__inputShape d-flex">
				{% if type === "checkbox" %}
					{% render "@checkbox-dot--no-input" %}
				{% else %}
					{% render "@radio-dot--no-input" %}
				{% endif %}
			</div>

			{% if media === true %}
			<div class="{{ namespace }}framedChoice__media">
			{% endif %}
			{% block media %}
			{% endblock %}
			{% if media === true %}
			</div>
			{% endif %}

			<div class="flex-grow-1">
				{% block text %}
				{% endblock %}
			</div>

			{% if infoDot %}
			<div class="{{ namespace }}aboveClickArea">
				{% render "@info-dot--modal" %}
			</div>
			{% endif %}

		</div>

		{% if collapse %}
		<div class="{{ namespace }}framedChoice__collapse collapse" id="{{ collapseID }}">
			<div class="{{ namespace }}framedChoice__collapseInner">
		{% endif %}
		{% block collapse %}
		{% endblock %}
		{% if collapse %}
			</div>
		</div>
		{% endif %}

	</div>

	{% if (type === "checkbox") and (error === "true") %}
		<div class="invalid-feedback">
			{% render "@hint--error",{
				text: "Error message",
				attrs: {
					id: errorID
				}
			},true %}
		</div>
	{% endif %}

	{% if hint %}
	{% render "@hint",{
		attrs: {
			id: hintID
		}
	},true %}
	{% endif %}

</div>