{{#if @vertical}}
  <div class={{cn
    "card-pay-labeled-value"
    "card-pay-labeled-value--vertical"
    card-pay-labeled-value--compact=@isCompact
    card-pay-labeled-value--address=@isAddress
    card-pay-labeled-value--has-icon=@icon
    card-pay-labeled-value--has-block=(has-block)
  }}
  ...attributes
  >
    <span class="card-pay-labeled-value__label">{{@label}}</span>
    {{#if (has-block)}}
      {{yield}}
    {{else}}
      <span class="card-pay-labeled-value__contents">
        {{#if @icon}}
          {{svg-jar @icon class="card-pay-labeled-value__small-icon" role="presentation"}}
        {{/if}}
        {{@value}}
      </span>
    {{/if}}
  </div>
{{else}}
  <Boxel::Field
    @label={{@label}}
    @fieldMode={{if @fieldMode @fieldMode "view"}}
    class={{cn
      "card-pay-labeled-value"
      card-pay-labeled-value--compact=@isCompact
      card-pay-labeled-value--address=@isAddress
      card-pay-labeled-value--has-icon=@icon
    }}
    @labelClass="card-pay-labeled-value__label"
    ...attributes
  >
    {{#if (has-block)}}
      {{yield}}
    {{else}}
      <span class="card-pay-labeled-value__contents">
        {{#if @icon}}
          {{svg-jar @icon class="card-pay-labeled-value__small-icon" role="presentation"}}
        {{/if}}
        {{@value}}
      </span>
    {{/if}}
  </Boxel::Field>
{{/if}}