igloo-d2c-components 1.0.26 → 1.0.28

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 (6) hide show
  1. package/dist/cjs/index.js +39 -2
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +39 -2
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/types/themes/typography.d.ts +4 -0
  6. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -93,11 +93,13 @@ const iglooTypography = {
93
93
  fontStyle: 'normal',
94
94
  fontWeight: 700,
95
95
  lineHeight: '48px',
96
+ wordSpacing: '-5px',
96
97
  '@media (max-width:600px)': {
97
98
  fontSize: '24px',
98
99
  fontStyle: 'normal',
99
100
  fontWeight: 700,
100
101
  lineHeight: '30px',
102
+ wordSpacing: '-5px',
101
103
  },
102
104
  },
103
105
  h2: {
@@ -105,11 +107,13 @@ const iglooTypography = {
105
107
  fontStyle: 'normal',
106
108
  fontWeight: 700,
107
109
  lineHeight: '26px',
110
+ wordSpacing: '-5px',
108
111
  '@media (max-width:600px)': {
109
112
  fontSize: '14px',
110
113
  fontStyle: 'normal',
111
114
  fontWeight: 700,
112
115
  lineHeight: '22px',
116
+ wordSpacing: '-5px',
113
117
  },
114
118
  },
115
119
  h3: {
@@ -117,11 +121,13 @@ const iglooTypography = {
117
121
  fontStyle: 'normal',
118
122
  fontWeight: 600,
119
123
  lineHeight: '24px',
124
+ wordSpacing: '-5px',
120
125
  '@media (max-width:600px)': {
121
126
  fontSize: '14px',
122
127
  fontStyle: 'normal',
123
128
  fontWeight: 600,
124
129
  lineHeight: '20px',
130
+ wordSpacing: '-5px',
125
131
  },
126
132
  },
127
133
  h4: {
@@ -129,11 +135,13 @@ const iglooTypography = {
129
135
  fontStyle: 'normal',
130
136
  fontWeight: 600,
131
137
  lineHeight: '24px',
138
+ wordSpacing: '-5px',
132
139
  '@media (max-width:600px)': {
133
140
  fontSize: '14px',
134
141
  fontStyle: 'normal',
135
142
  fontWeight: 500,
136
143
  lineHeight: '18px',
144
+ wordSpacing: '-5px',
137
145
  },
138
146
  },
139
147
  bodyStrongLarge: {
@@ -141,11 +149,13 @@ const iglooTypography = {
141
149
  fontStyle: 'normal',
142
150
  fontWeight: 500,
143
151
  lineHeight: '20px',
152
+ wordSpacing: '-5px',
144
153
  '@media (max-width:600px)': {
145
154
  fontSize: '14px',
146
155
  fontStyle: 'normal',
147
156
  fontWeight: 400,
148
157
  lineHeight: '18px',
158
+ wordSpacing: '-5px',
149
159
  },
150
160
  },
151
161
  bodyStrongMedium: {
@@ -153,23 +163,27 @@ const iglooTypography = {
153
163
  fontStyle: 'normal',
154
164
  fontWeight: 500,
155
165
  lineHeight: '18px',
166
+ wordSpacing: '-5px',
156
167
  },
157
168
  bodyStrongSmall: {
158
169
  fontSize: '12px',
159
170
  fontStyle: 'normal',
160
171
  fontWeight: 500,
161
172
  lineHeight: '16px',
173
+ wordSpacing: '-5px',
162
174
  },
163
175
  bodyLarge: {
164
176
  fontSize: '16px',
165
177
  fontStyle: 'normal',
166
178
  fontWeight: 400,
167
179
  lineHeight: '20px',
180
+ wordSpacing: '-5px',
168
181
  '@media (max-width:600px)': {
169
182
  fontSize: '14px',
170
183
  fontStyle: 'normal',
171
184
  fontWeight: 400,
172
185
  lineHeight: '18px',
186
+ wordSpacing: '-5px',
173
187
  },
174
188
  },
175
189
  bodyMedium: {
@@ -177,18 +191,21 @@ const iglooTypography = {
177
191
  fontStyle: 'normal',
178
192
  fontWeight: 400,
179
193
  lineHeight: '20px',
194
+ wordSpacing: '-5px',
180
195
  },
181
196
  bodySmall: {
182
197
  fontSize: '12px',
183
198
  fontStyle: 'normal',
184
199
  fontWeight: 400,
185
200
  lineHeight: '16px',
201
+ wordSpacing: '-5px',
186
202
  },
187
203
  smallText: {
188
204
  fontSize: '8px',
189
205
  fontStyle: 'normal',
190
206
  fontWeight: 500,
191
207
  lineHeight: '16px',
208
+ wordSpacing: '-5px',
192
209
  },
193
210
  };
194
211
  /**
@@ -244,6 +261,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
244
261
  fontWeight: 700,
245
262
  lineHeight: '72px',
246
263
  letterSpacing: 0,
264
+ wordSpacing: '-5px',
247
265
  },
248
266
  // Display Medium - MetLife Circular Bold 45/52
249
267
  displayMediumFigma: {
@@ -252,6 +270,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
252
270
  fontWeight: 700,
253
271
  lineHeight: '52px',
254
272
  letterSpacing: 0,
273
+ wordSpacing: '-5px',
255
274
  },
256
275
  // Display Small - MetLife Circular Bold 34/44
257
276
  displaySmallFigma: {
@@ -260,6 +279,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
260
279
  fontWeight: 700,
261
280
  lineHeight: '44px',
262
281
  letterSpacing: 0,
282
+ wordSpacing: '-5px',
263
283
  },
264
284
  /* ========================================
265
285
  * HEADLINE VARIANTS (PC/Desktop)
@@ -273,6 +293,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
273
293
  fontWeight: 700,
274
294
  lineHeight: '44px',
275
295
  letterSpacing: 0,
296
+ wordSpacing: '-5px',
276
297
  },
277
298
  // Headline Medium (H2) - MetLife Circular Bold 22/26
278
299
  headlineMedium: {
@@ -281,6 +302,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
281
302
  fontWeight: 700,
282
303
  lineHeight: '26px',
283
304
  letterSpacing: 0,
305
+ wordSpacing: '-5px',
284
306
  },
285
307
  // Headline Small (H3) - MetLife Circular Bold 18/24
286
308
  headlineSmall: {
@@ -289,6 +311,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
289
311
  fontWeight: 700,
290
312
  lineHeight: '24px',
291
313
  letterSpacing: 0,
314
+ wordSpacing: '-5px',
292
315
  },
293
316
  /* ========================================
294
317
  * TITLE VARIANTS (Mobile)
@@ -308,6 +331,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
308
331
  fontWeight: 700,
309
332
  lineHeight: '38px',
310
333
  letterSpacing: 0,
334
+ wordSpacing: '-5px',
311
335
  },
312
336
  // Title Medium (H2) - MetLife Circular Bold 16/24
313
337
  titleMedium: {
@@ -316,6 +340,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
316
340
  fontWeight: 700,
317
341
  lineHeight: '24px',
318
342
  letterSpacing: 0,
343
+ wordSpacing: '-5px',
319
344
  },
320
345
  // Title Small (H3) - MetLife Circular Bold 14/20
321
346
  titleSmall: {
@@ -324,12 +349,14 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
324
349
  fontWeight: 700,
325
350
  lineHeight: '20px',
326
351
  letterSpacing: 0,
352
+ wordSpacing: '-5px',
327
353
  }, titleTiny: {
328
354
  fontSize: '10px',
329
355
  fontStyle: 'normal',
330
356
  fontWeight: 700,
331
357
  lineHeight: '20px',
332
358
  letterSpacing: 0,
359
+ wordSpacing: '-5px',
333
360
  },
334
361
  /* ========================================
335
362
  * BODY STRONG VARIANTS
@@ -343,6 +370,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
343
370
  fontWeight: 500,
344
371
  lineHeight: '20px',
345
372
  letterSpacing: 0,
373
+ wordSpacing: '-5px',
346
374
  },
347
375
  // Body Medium Strong - MetLife Circular Medium 14/18
348
376
  bodyMediumStrong: {
@@ -351,6 +379,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
351
379
  fontWeight: 500,
352
380
  lineHeight: '18px',
353
381
  letterSpacing: 0,
382
+ wordSpacing: '-5px',
354
383
  },
355
384
  // Body Small Strong - MetLife Circular Medium 12/16
356
385
  bodySmallStrong: {
@@ -359,6 +388,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
359
388
  fontWeight: 500,
360
389
  lineHeight: '16px',
361
390
  letterSpacing: 0,
391
+ wordSpacing: '-5px',
362
392
  },
363
393
  /* ========================================
364
394
  * BODY VARIANTS
@@ -372,6 +402,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
372
402
  fontWeight: 400,
373
403
  lineHeight: '20px',
374
404
  letterSpacing: 0,
405
+ wordSpacing: '-5px',
375
406
  },
376
407
  // Body Medium - MetLife Circular Normal 14/18
377
408
  bodyMediumFigma: {
@@ -380,6 +411,7 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
380
411
  fontWeight: 400,
381
412
  lineHeight: '18px',
382
413
  letterSpacing: 0,
414
+ wordSpacing: '-5px',
383
415
  },
384
416
  // Body Small - MetLife Circular Normal 12/16
385
417
  bodySmallFigma: {
@@ -388,27 +420,32 @@ const ammetlifeTypography = Object.assign(Object.assign({}, iglooTypography), {
388
420
  fontWeight: 400,
389
421
  lineHeight: '16px',
390
422
  letterSpacing: 0,
423
+ wordSpacing: '-5px',
391
424
  }, bodyTinyFigma: {
392
425
  fontSize: '9px',
393
426
  fontStyle: 'normal',
394
427
  fontWeight: 400,
395
428
  lineHeight: 'normal',
396
429
  letterSpacing: 0,
430
+ wordSpacing: '-5px',
397
431
  }, textFieldMedium: {
398
432
  fontSize: '14px',
399
433
  fontStyle: 'normal',
400
434
  fontWeight: 500,
401
435
  lineHeight: '18px',
436
+ wordSpacing: '-5px',
402
437
  }, textFieldNormal: {
403
438
  fontSize: '12px',
404
439
  fontStyle: 'normal',
405
440
  fontWeight: 400,
406
441
  lineHeight: '16px',
442
+ wordSpacing: '-5px',
407
443
  }, optionButton: {
408
444
  fontSize: '14px',
409
445
  fontStyle: 'normal',
410
446
  fontWeight: 700,
411
447
  lineHeight: '20px',
448
+ wordSpacing: '-5px',
412
449
  } });
413
450
  /**
414
451
  * Typography Registry
@@ -909,8 +946,8 @@ const LogoContainer$2 = styled(Box)({
909
946
  * Width: 126px, height: 16px (per Figma)
910
947
  */
911
948
  const LogoImage$1 = styled('img')({
912
- width: '126px',
913
- height: '16px',
949
+ width: '94px',
950
+ height: '32px',
914
951
  objectFit: 'contain',
915
952
  });
916
953
  /**