@bytebrand/fe-ui-core-autobahn 1.0.118 → 1.0.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/cards/CarCard.tsx +32 -8
  2. package/cards/cardParts.tsx +15 -3
  3. package/compat/ButtonOld/Button.styl +1 -1
  4. package/compat/Checkbox/Checkbox.styl +6 -1
  5. package/compat/Checkbox/Checkbox.tsx +11 -1
  6. package/compat/Checkbox/FormCheckbox.styl +2 -1
  7. package/compat/CookieModal/modals/ManageCookieModal/ManageCookieModal.styl +1 -1
  8. package/compat/CookieModal/modals/PreviewCookieModal/PreviewCookieModal.styl +7 -7
  9. package/compat/MdField/MdField.tsx +24 -1
  10. package/compat/MdSelect/MdSelect.tsx +10 -1
  11. package/compat/RateSearchWidget/RateSearchWidget.styl +6 -1
  12. package/compat/StarButton/StarButton.styl +1 -1
  13. package/package.json +1 -1
  14. package/theme/autobahn.css +47 -5
  15. package/theme/md3.css +200 -120
  16. package/ui/CardCarousel.tsx +12 -4
  17. package/ui/Dropdown.tsx +11 -0
  18. package/vdp/FinanceCalculator.tsx +2 -2
  19. package/vdp/VdpModules.tsx +49 -49
package/ui/CardCarousel.tsx CHANGED
@@ -121,7 +121,15 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
121
121
  width: '100%',
122
122
  height: '100%',
123
123
  objectFit: fit === 'auto' ? 'contain' : fit,
124
- padding: fit !== 'cover' && padded ? '5% 6%' : 0,
124
+ // Was a flat `fit !== 'cover' && padded ? '5% 6%' : 0` — collapsed TWO
125
+ // different callers into the same `0`: VehicleDetailedNextPage's VDP
126
+ // gallery (fit="cover", padded irrelevant) and CarCard's SRP/home card
127
+ // carousel (fit="contain" padded={false}). Nesting the check keeps
128
+ // 'cover' at flat 0 (VDP untouched) while giving the padded=false
129
+ // 'contain'/'auto' case (currently only CarCard) its own bottom-only
130
+ // inset — object-fit:contain draws the photo slightly higher, leaving
131
+ // room below it instead of crowding the dots row (.cardcar-dots).
132
+ padding: fit === 'cover' ? 0 : padded ? '5% 6%' : '0 0 14px 0',
125
133
  boxSizing: 'border-box',
126
134
  background: '#fff',
127
135
  }
@@ -160,8 +168,8 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
160
168
  className="cardcar-dots"
161
169
  style={{
162
170
  position: 'absolute',
163
- bottom: 9,
164
- left: 0,
171
+ bottom: 23,
172
+ left: -5,
165
173
  right: 0,
166
174
  display: 'flex',
167
175
  justifyContent: 'center',
@@ -174,7 +182,7 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
174
182
  key={k}
175
183
  style={{
176
184
  width: k === i ? 16 : 6,
177
- height: 6,
185
+ height: 7,
178
186
  borderRadius: 3,
179
187
  background: k === i ? 'var(--md-on-surface)' : 'rgba(26,27,34,.3)',
180
188
  boxShadow: '0 0 0 1px rgba(255,255,255,.5)',
package/ui/Dropdown.tsx CHANGED
@@ -46,6 +46,11 @@ export interface DropdownProps {
46
46
  size?: 'sm' | 'md';
47
47
  /** accessible label when there is no visible <label> wrapping the control. */
48
48
  ariaLabel?: string;
49
+ /** marks the trigger aria-invalid (screen readers) when the owning field has a validation
50
+ * error — purely additive/opt-in, undefined by default so existing callers are unaffected. */
51
+ ariaInvalid?: boolean;
52
+ /** id of the (possibly visually-hidden) error text describing why the field is invalid. */
53
+ ariaDescribedBy?: string;
49
54
  /** extra class on the wrapper (e.g. 'srp-sort' for width rules). */
50
55
  className?: string;
51
56
  /** align the popover to the right edge of the trigger (default left). */
@@ -82,6 +87,8 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
82
87
  block = true,
83
88
  size = 'md',
84
89
  ariaLabel,
90
+ ariaInvalid,
91
+ ariaDescribedBy,
85
92
  className,
86
93
  menuAlign = 'left',
87
94
  searchable = false,
@@ -393,6 +400,8 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
393
400
  aria-expanded={open}
394
401
  aria-controls={`${idBase}list`}
395
402
  aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
403
+ aria-invalid={ariaInvalid ? true : undefined}
404
+ aria-describedby={ariaDescribedBy}
396
405
  {...(numeric ? { inputMode: 'numeric' as const, pattern: '[0-9]*' } : {})}
397
406
  />
398
407
  <button type="button" className="mselect-chev-btn" aria-label="Close" onClick={() => close(true)}>
@@ -407,6 +416,8 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
407
416
  aria-haspopup="listbox"
408
417
  aria-expanded={open}
409
418
  aria-label={ariaLabel}
419
+ aria-invalid={ariaInvalid ? true : undefined}
420
+ aria-describedby={ariaDescribedBy}
410
421
  disabled={disabled}
411
422
  onClick={() => (open ? close(false) : openMenu())}
412
423
  onKeyDown={onTriggerKeyDown}
package/vdp/FinanceCalculator.tsx CHANGED
@@ -287,7 +287,7 @@ export const ToggleRow: React.FunctionComponent<{
287
287
  </span>
288
288
  )}
289
289
  {staticNote ? (
290
- <span style={{ fontFamily: 'Arial', fontWeight: 400, fontSize: 15, lineHeight: '17px', color: '#0E2238' }}>
290
+ <span style={{ fontFamily: 'Arial, Arimo, sans-serif', fontWeight: 400, fontSize: 15, lineHeight: '17px', color: '#0E2238' }}>
291
291
  {staticNote}
292
292
  </span>
293
293
  ) : (
@@ -312,7 +312,7 @@ export const AddServicesTooltipBody: React.FunctionComponent<{ t: TranslationFun
312
312
  <p style={{ margin: '0 0 8px' }}>
313
313
  {t(isCash ? 'autobahn:finance.addServicesTooltipIntroCash' : 'autobahn:finance.addServicesTooltipIntroFinanced')}
314
314
  </p>
315
- <p style={{ fontFamily: 'Arial', fontWeight: 700, fontSize: 10, lineHeight: '13px', color: '#0E2238', margin: '0 0 4px' }}>
315
+ <p style={{ fontFamily: 'Arial, Arimo, sans-serif', fontWeight: 700, fontSize: 10, lineHeight: '13px', color: '#0E2238', margin: '0 0 4px' }}>
316
316
  {t('autobahn:finance.addServicesTooltipHeading')}
317
317
  </p>
318
318
  <ul style={{ margin: 0, padding: '0 0 0 14px' }}>
package/vdp/VdpModules.tsx CHANGED
@@ -163,7 +163,7 @@ export const VdpFactsGrid: React.FunctionComponent<VdpHeaderCardProps> = ({ vehi
163
163
  )}
164
164
  <span
165
165
  style={{
166
- fontFamily: 'Arial, Helvetica, sans-serif',
166
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
167
167
  fontStyle: 'normal',
168
168
  fontWeight: 700,
169
169
  fontSize: 16,
@@ -790,7 +790,7 @@ export const PriceHistory: React.FunctionComponent<PriceHistoryProps> = ({ vehic
790
790
  style={{
791
791
  paddingTop: 10,
792
792
  paddingBottom: 10,
793
- fontFamily: 'Arial, Helvetica, sans-serif',
793
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
794
794
  fontWeight: 400,
795
795
  fontSize: 9,
796
796
  lineHeight: '14px',
@@ -1101,7 +1101,7 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
1101
1101
  className="md-label-sm"
1102
1102
  style={{
1103
1103
  flexShrink: 0,
1104
- fontFamily: 'Arial, Helvetica, sans-serif',
1104
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1105
1105
  fontWeight: 700,
1106
1106
  fontSize,
1107
1107
  lineHeight: '14px',
@@ -1123,7 +1123,7 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
1123
1123
  <span
1124
1124
  className="num md-label-sm"
1125
1125
  style={{
1126
- fontFamily: 'Arial, Helvetica, sans-serif',
1126
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1127
1127
  fontWeight: 700,
1128
1128
  fontSize: 10.2,
1129
1129
  lineHeight: '14px',
@@ -1136,7 +1136,7 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
1136
1136
  className="md-body-sm"
1137
1137
  style={{
1138
1138
  margin: '2px 0 0',
1139
- fontFamily: 'Arial, Helvetica, sans-serif',
1139
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1140
1140
  fontWeight: 400,
1141
1141
  fontSize: 8.7,
1142
1142
  lineHeight: '12px',
@@ -1155,7 +1155,7 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
1155
1155
  className="md-label-sm"
1156
1156
  style={{
1157
1157
  flexShrink: 0,
1158
- fontFamily: 'Arial, Helvetica, sans-serif',
1158
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1159
1159
  fontWeight: 700,
1160
1160
  fontSize: 9,
1161
1161
  lineHeight: '14px',
@@ -1177,7 +1177,7 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
1177
1177
  <span
1178
1178
  className="num md-label-sm"
1179
1179
  style={{
1180
- fontFamily: 'Arial, Helvetica, sans-serif',
1180
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1181
1181
  fontWeight: 700,
1182
1182
  fontSize: 10.2,
1183
1183
  lineHeight: '14px',
@@ -1190,7 +1190,7 @@ const PriceRatingBreakdown: React.FunctionComponent<{ vehicle: VehicleDetail; t:
1190
1190
  className="md-body-sm"
1191
1191
  style={{
1192
1192
  margin: '2px 0 0',
1193
- fontFamily: 'Arial, Helvetica, sans-serif',
1193
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1194
1194
  fontWeight: 400,
1195
1195
  fontSize: 8.7,
1196
1196
  lineHeight: '12px',
@@ -1572,14 +1572,14 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
1572
1572
  }
1573
1573
  const priceStyle: React.CSSProperties = isCash
1574
1574
  ? {
1575
- fontFamily: 'Arial, Helvetica, sans-serif',
1575
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1576
1576
  fontWeight: 700,
1577
1577
  fontSize: 40,
1578
1578
  color: '#005CFF',
1579
1579
  letterSpacing: '-1px',
1580
1580
  }
1581
1581
  : {
1582
- fontFamily: 'Arial, Helvetica, sans-serif',
1582
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1583
1583
  fontWeight: 700,
1584
1584
  fontSize: 52,
1585
1585
  lineHeight: '58px',
@@ -1699,7 +1699,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
1699
1699
  sits level with the blue hero rate instead of centering high in the row. */}
1700
1700
  <span
1701
1701
  style={{
1702
- fontFamily: 'Arial, Helvetica, sans-serif',
1702
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1703
1703
  fontWeight: 700,
1704
1704
  fontSize: 18,
1705
1705
  lineHeight: '21px',
@@ -1726,7 +1726,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
1726
1726
  display: 'flex',
1727
1727
  alignItems: 'center',
1728
1728
  justifyContent: 'center',
1729
- fontFamily: 'Arial, Helvetica, sans-serif',
1729
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1730
1730
  fontWeight: 700,
1731
1731
  fontSize: 12,
1732
1732
  lineHeight: '14px',
@@ -1774,7 +1774,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
1774
1774
  gap: 8,
1775
1775
  background: '#005CFF',
1776
1776
  borderRadius: 16,
1777
- fontFamily: 'Arial, Helvetica, sans-serif',
1777
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1778
1778
  fontWeight: 700,
1779
1779
  fontSize: 14,
1780
1780
  lineHeight: '16px',
@@ -1813,7 +1813,7 @@ export const VdpBottomBar: React.FunctionComponent<VdpBottomBarProps> = ({
1813
1813
  background: '#FFFFFF',
1814
1814
  border: '1.6px solid #5B6B7F',
1815
1815
  borderRadius: 16,
1816
- fontFamily: 'Arial, Helvetica, sans-serif',
1816
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
1817
1817
  fontWeight: 700,
1818
1818
  fontSize: 13,
1819
1819
  lineHeight: '15px',
@@ -2259,7 +2259,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2259
2259
  >
2260
2260
  <span
2261
2261
  style={{
2262
- fontFamily: 'Arial, Helvetica, sans-serif',
2262
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2263
2263
  fontStyle: 'normal',
2264
2264
  fontWeight: bold ? 700 : 400,
2265
2265
  fontSize: 13,
@@ -2273,7 +2273,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2273
2273
  <span
2274
2274
  className="num"
2275
2275
  style={{
2276
- fontFamily: 'Arial, Helvetica, sans-serif',
2276
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2277
2277
  fontStyle: 'normal',
2278
2278
  fontWeight: bold ? 700 : 400,
2279
2279
  fontSize: 13,
@@ -2562,7 +2562,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2562
2562
  <>
2563
2563
  <p
2564
2564
  style={{
2565
- fontFamily: 'Arial, Helvetica, sans-serif',
2565
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2566
2566
  fontWeight: 700,
2567
2567
  fontSize: 16,
2568
2568
  lineHeight: '18px',
@@ -2575,7 +2575,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2575
2575
  </p>
2576
2576
  <p
2577
2577
  style={{
2578
- fontFamily: 'Arial, Helvetica, sans-serif',
2578
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2579
2579
  fontWeight: 700,
2580
2580
  fontSize: 9,
2581
2581
  lineHeight: '12px',
@@ -2618,7 +2618,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2618
2618
  <div style={{ width: '100%' }}>
2619
2619
  <p
2620
2620
  style={{
2621
- fontFamily: 'Arial, Helvetica, sans-serif',
2621
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2622
2622
  fontWeight: 700,
2623
2623
  fontSize: 14,
2624
2624
  lineHeight: '13px',
@@ -2631,7 +2631,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2631
2631
  </p>
2632
2632
  <p
2633
2633
  style={{
2634
- fontFamily: 'Arial, Helvetica, sans-serif',
2634
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2635
2635
  fontWeight: 400,
2636
2636
  fontSize: 12,
2637
2637
  lineHeight: '13px',
@@ -2646,7 +2646,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2646
2646
  <div style={{ height: 1, background: '#D6DEE8', margin: '8px 0' }} />
2647
2647
  <p
2648
2648
  style={{
2649
- fontFamily: 'Arial, Helvetica, sans-serif',
2649
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2650
2650
  fontWeight: 700,
2651
2651
  fontSize: 14,
2652
2652
  lineHeight: '13px',
@@ -2659,7 +2659,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2659
2659
  </p>
2660
2660
  <p
2661
2661
  style={{
2662
- fontFamily: 'Arial, Helvetica, sans-serif',
2662
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2663
2663
  fontWeight: 400,
2664
2664
  fontSize: 12,
2665
2665
  lineHeight: '13px',
@@ -2693,7 +2693,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2693
2693
  </svg>
2694
2694
  <p
2695
2695
  style={{
2696
- fontFamily: 'Arial, Helvetica, sans-serif',
2696
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2697
2697
  fontWeight: 400,
2698
2698
  fontSize: 10,
2699
2699
  lineHeight: '10px',
@@ -2708,7 +2708,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2708
2708
  )}
2709
2709
  <p
2710
2710
  style={{
2711
- fontFamily: 'Arial, Helvetica, sans-serif',
2711
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2712
2712
  fontWeight: 700,
2713
2713
  fontSize: 13.3,
2714
2714
  lineHeight: '17px',
@@ -2721,15 +2721,15 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2721
2721
  </p>
2722
2722
  {isLease ? (
2723
2723
  <>
2724
- <p style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 5 }}>
2724
+ <p style={{ fontFamily: 'Arial, Helvetica, Arimo, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 5 }}>
2725
2725
  {t('autobahn:modal.legalFootnoteAcquisitionPrice')}
2726
2726
  </p>
2727
- <p style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 10 }}>
2727
+ <p style={{ fontFamily: 'Arial, Helvetica, Arimo, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 10 }}>
2728
2728
  {t('autobahn:modal.legalFootnoteListPriceLease')}
2729
2729
  </p>
2730
2730
  <p
2731
2731
  style={{
2732
- fontFamily: 'Arial, Helvetica, sans-serif',
2732
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2733
2733
  fontWeight: 400,
2734
2734
  fontSize: 12,
2735
2735
  lineHeight: '12px',
@@ -2756,7 +2756,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2756
2756
  <li
2757
2757
  key={notice}
2758
2758
  style={{
2759
- fontFamily: 'Arial, Helvetica, sans-serif',
2759
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2760
2760
  fontWeight: 400,
2761
2761
  fontSize: 12,
2762
2762
  lineHeight: '12px',
@@ -2769,7 +2769,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2769
2769
  </ul>
2770
2770
  <p
2771
2771
  style={{
2772
- fontFamily: 'Arial, Helvetica, sans-serif',
2772
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2773
2773
  fontWeight: 400,
2774
2774
  fontSize: 12,
2775
2775
  lineHeight: '12px',
@@ -2792,7 +2792,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
2792
2792
  background: '#005CFF',
2793
2793
  borderRadius: 16,
2794
2794
  justifyContent: 'center',
2795
- fontFamily: 'Arial, Helvetica, sans-serif',
2795
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
2796
2796
  fontWeight: 700,
2797
2797
  fontSize: 14,
2798
2798
  lineHeight: '16px',
@@ -3059,7 +3059,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3059
3059
  justifyContent: 'flex-start',
3060
3060
  paddingLeft: 47,
3061
3061
  paddingRight: 47,
3062
- fontFamily: 'Arial, Helvetica, sans-serif',
3062
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3063
3063
  fontWeight: 700,
3064
3064
  fontSize: 14,
3065
3065
  lineHeight: '16px',
@@ -3195,7 +3195,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3195
3195
  justifyContent: 'flex-start',
3196
3196
  paddingLeft: 47,
3197
3197
  paddingRight: 47,
3198
- fontFamily: 'Arial, Helvetica, sans-serif',
3198
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3199
3199
  fontWeight: 700,
3200
3200
  fontSize: 14,
3201
3201
  lineHeight: '16px',
@@ -3235,7 +3235,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3235
3235
  display: 'inline-flex',
3236
3236
  alignItems: 'center',
3237
3237
  gap: 7,
3238
- fontFamily: 'Arial, Helvetica, sans-serif',
3238
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3239
3239
  fontWeight: 700,
3240
3240
  fontSize: 15,
3241
3241
  lineHeight: '17px',
@@ -3254,7 +3254,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3254
3254
  <div ref={mobileBreakdownRef} style={{ marginBottom: 5 }}>
3255
3255
  <p
3256
3256
  style={{
3257
- fontFamily: 'Arial, Helvetica, sans-serif',
3257
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3258
3258
  fontWeight: 700,
3259
3259
  fontSize: 16,
3260
3260
  lineHeight: '18px',
@@ -3269,7 +3269,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3269
3269
  </p>
3270
3270
  <p
3271
3271
  style={{
3272
- fontFamily: 'Arial, Helvetica, sans-serif',
3272
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3273
3273
  fontWeight: 700,
3274
3274
  fontSize: 9,
3275
3275
  lineHeight: '12px',
@@ -3301,7 +3301,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3301
3301
  <div style={{ width: '100%' }}>
3302
3302
  <p
3303
3303
  style={{
3304
- fontFamily: 'Arial, Helvetica, sans-serif',
3304
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3305
3305
  fontWeight: 700,
3306
3306
  fontSize: 14,
3307
3307
  lineHeight: '13px',
@@ -3314,7 +3314,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3314
3314
  </p>
3315
3315
  <p
3316
3316
  style={{
3317
- fontFamily: 'Arial, Helvetica, sans-serif',
3317
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3318
3318
  fontWeight: 400,
3319
3319
  fontSize: 12,
3320
3320
  lineHeight: '13px',
@@ -3331,7 +3331,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3331
3331
  <div style={{ height: 1, background: '#D6DEE8', margin: '8px 0' }} />
3332
3332
  <p
3333
3333
  style={{
3334
- fontFamily: 'Arial, Helvetica, sans-serif',
3334
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3335
3335
  fontWeight: 700,
3336
3336
  fontSize: 14,
3337
3337
  lineHeight: '13px',
@@ -3344,7 +3344,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3344
3344
  </p>
3345
3345
  <p
3346
3346
  style={{
3347
- fontFamily: 'Arial, Helvetica, sans-serif',
3347
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3348
3348
  fontWeight: 400,
3349
3349
  fontSize: 12,
3350
3350
  lineHeight: '13px',
@@ -3381,7 +3381,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3381
3381
  </svg>
3382
3382
  <p
3383
3383
  style={{
3384
- fontFamily: 'Arial, Helvetica, sans-serif',
3384
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3385
3385
  fontWeight: 400,
3386
3386
  fontSize: 10,
3387
3387
  lineHeight: '10px',
@@ -3396,7 +3396,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3396
3396
  )}
3397
3397
  <p
3398
3398
  style={{
3399
- fontFamily: 'Arial, Helvetica, sans-serif',
3399
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3400
3400
  fontWeight: 700,
3401
3401
  fontSize: 13.3,
3402
3402
  lineHeight: '17px',
@@ -3409,15 +3409,15 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3409
3409
  </p>
3410
3410
  {isLease ? (
3411
3411
  <>
3412
- <p style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 5 }}>
3412
+ <p style={{ fontFamily: 'Arial, Helvetica, Arimo, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 5 }}>
3413
3413
  {t('autobahn:modal.legalFootnoteAcquisitionPrice')}
3414
3414
  </p>
3415
- <p style={{ fontFamily: 'Arial, Helvetica, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 10 }}>
3415
+ <p style={{ fontFamily: 'Arial, Helvetica, Arimo, sans-serif', fontWeight: 400, fontSize: 12, lineHeight: '12px', color: '#0E2238', margin: 0, marginBottom: 10 }}>
3416
3416
  {t('autobahn:modal.legalFootnoteListPriceLease')}
3417
3417
  </p>
3418
3418
  <p
3419
3419
  style={{
3420
- fontFamily: 'Arial, Helvetica, sans-serif',
3420
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3421
3421
  fontWeight: 400,
3422
3422
  fontSize: 12,
3423
3423
  lineHeight: '12px',
@@ -3444,7 +3444,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3444
3444
  <li
3445
3445
  key={notice}
3446
3446
  style={{
3447
- fontFamily: 'Arial, Helvetica, sans-serif',
3447
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3448
3448
  fontWeight: 400,
3449
3449
  fontSize: 12,
3450
3450
  lineHeight: '12px',
@@ -3457,7 +3457,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3457
3457
  </ul>
3458
3458
  <p
3459
3459
  style={{
3460
- fontFamily: 'Arial, Helvetica, sans-serif',
3460
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3461
3461
  fontWeight: 400,
3462
3462
  fontSize: 12,
3463
3463
  lineHeight: '12px',
@@ -3482,7 +3482,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
3482
3482
  justifyContent: 'flex-start',
3483
3483
  paddingLeft: 47,
3484
3484
  paddingRight: 47,
3485
- fontFamily: 'Arial, Helvetica, sans-serif',
3485
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3486
3486
  fontWeight: 700,
3487
3487
  fontSize: 14,
3488
3488
  lineHeight: '16px',
@@ -3576,7 +3576,7 @@ export const ReviewsTeaser: React.FunctionComponent<ReviewsTeaserProps> = ({ cou
3576
3576
  <span
3577
3577
  className="num"
3578
3578
  style={{
3579
- fontFamily: 'Arial, Helvetica, sans-serif',
3579
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3580
3580
  fontStyle: 'normal',
3581
3581
  fontWeight: 700,
3582
3582
  fontSize: 21,
@@ -3591,7 +3591,7 @@ export const ReviewsTeaser: React.FunctionComponent<ReviewsTeaserProps> = ({ cou
3591
3591
  style={{
3592
3592
  display: 'block',
3593
3593
  marginTop: 4,
3594
- fontFamily: 'Arial, Helvetica, sans-serif',
3594
+ fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
3595
3595
  fontStyle: 'normal',
3596
3596
  fontWeight: 400,
3597
3597
  fontSize: 16,