@snack-uikit/link 0.16.5 → 0.16.6-preview-f475624a.0

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 (18) hide show
  1. package/README.md +1 -0
  2. package/dist/cjs/components/Link.d.ts +1 -1
  3. package/dist/cjs/components/Link.js +3 -1
  4. package/dist/cjs/components/constants.d.ts +7 -0
  5. package/dist/cjs/components/constants.js +8 -1
  6. package/dist/cjs/components/styles.module.css +345 -9
  7. package/dist/cjs/components/types.d.ts +6 -1
  8. package/dist/esm/components/Link.d.ts +1 -1
  9. package/dist/esm/components/Link.js +3 -3
  10. package/dist/esm/components/constants.d.ts +7 -0
  11. package/dist/esm/components/constants.js +7 -0
  12. package/dist/esm/components/styles.module.css +345 -9
  13. package/dist/esm/components/types.d.ts +6 -1
  14. package/package.json +2 -2
  15. package/src/components/Link.tsx +3 -1
  16. package/src/components/constants.ts +8 -0
  17. package/src/components/styles.module.scss +11 -6
  18. package/src/components/types.ts +7 -1
package/README.md CHANGED
@@ -38,6 +38,7 @@ import { Link as ReactRouterLink } from 'react-router-dom';
38
38
  |------|------|---------------|-------------|
39
39
  | text | `string` | - | Текст ссылки |
40
40
  | size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
41
+ | purpose | enum Purpose: `"display"`, `"headline"`, `"title"`, `"label"`, `"body"` | body | Роль |
41
42
  | appearance | enum Appearance: `"invert-neutral"`, `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | primary | Стилизует ссылку для размещения на цветном фоне |
42
43
  | textMode | enum TextMode: `"default"`, `"accent"`, `"on-accent"` | default | Тип поверхности, на которой размещена ссылка |
43
44
  | insideText | `boolean` | - | Находится ли ссылка внутри текста (и можно ли её переносить) |
package/dist/cjs/components/Link.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ElementType } from 'react';
2
2
  import { LinkProps } from './types';
3
3
  /** Компонент ссылка */
4
- export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;
4
+ export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, purpose, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/components/Link.js CHANGED
@@ -31,12 +31,13 @@ function Link(_a) {
31
31
  className,
32
32
  textMode = constants_1.TEXT_MODE.Default,
33
33
  size = constants_1.SIZE.S,
34
+ purpose = constants_1.PURPOSE.Body,
34
35
  appearance = constants_1.APPEARANCE.Primary,
35
36
  insideText = false,
36
37
  truncateVariant,
37
38
  as
38
39
  } = _a,
39
- rest = __rest(_a, ["text", "className", "textMode", "size", "appearance", "insideText", "truncateVariant", "as"]);
40
+ rest = __rest(_a, ["text", "className", "textMode", "size", "purpose", "appearance", "insideText", "truncateVariant", "as"]);
40
41
  const Component = as || 'a';
41
42
  let fallbackProps;
42
43
  if (Component === 'a') {
@@ -57,6 +58,7 @@ function Link(_a) {
57
58
  className: (0, classnames_1.default)(styles_module_scss_1.default.link, className)
58
59
  }, fallbackProps, {
59
60
  "data-size": size,
61
+ "data-purpose": purpose,
60
62
  "data-text-mode": textMode,
61
63
  "data-appearance": appearance,
62
64
  "data-inside-text": insideText || undefined,
package/dist/cjs/components/constants.d.ts CHANGED
@@ -15,6 +15,13 @@ export declare const SIZE: {
15
15
  readonly M: "m";
16
16
  readonly L: "l";
17
17
  };
18
+ export declare const PURPOSE: {
19
+ readonly Display: "display";
20
+ readonly Headline: "headline";
21
+ readonly Title: "title";
22
+ readonly Label: "label";
23
+ readonly Body: "body";
24
+ };
18
25
  export declare const TARGET: {
19
26
  readonly Self: "_self";
20
27
  readonly Blank: "_blank";
package/dist/cjs/components/constants.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TEXT_MODE = exports.TARGET = exports.SIZE = exports.APPEARANCE = void 0;
6
+ exports.TEXT_MODE = exports.TARGET = exports.PURPOSE = exports.SIZE = exports.APPEARANCE = void 0;
7
7
  exports.APPEARANCE = {
8
8
  InvertNeutral: 'invert-neutral',
9
9
  Neutral: 'neutral',
@@ -21,6 +21,13 @@ exports.SIZE = {
21
21
  M: 'm',
22
22
  L: 'l'
23
23
  };
24
+ exports.PURPOSE = {
25
+ Display: 'display',
26
+ Headline: 'headline',
27
+ Title: 'title',
28
+ Label: 'label',
29
+ Body: 'body'
30
+ };
24
31
  exports.TARGET = {
25
32
  Self: '_self',
26
33
  Blank: '_blank',
package/dist/cjs/components/styles.module.css CHANGED
@@ -426,7 +426,119 @@
426
426
  height:var(--size-link-s, 16px);
427
427
  gap:var(--space-link-gap-single, 0px);
428
428
  }
429
- .link[data-size=s][data-text-mode=default]{
429
+ .link[data-size=s][data-purpose=display][data-text-mode=default]{
430
+ font-family:var(--sans-display-s-font-family, SB Sans Interface);
431
+ font-weight:var(--sans-display-s-font-weight, Semibold);
432
+ line-height:var(--sans-display-s-line-height, 48px);
433
+ font-size:var(--sans-display-s-font-size, 40px);
434
+ letter-spacing:var(--sans-display-s-letter-spacing, -0.5px);
435
+ paragraph-spacing:var(--sans-display-s-paragraph-spacing, 22px);
436
+ }
437
+ .link[data-size=s][data-purpose=display][data-text-mode=accent]{
438
+ font-family:var(--link-display-s-font-family, SB Sans Interface);
439
+ font-weight:var(--link-display-s-font-weight, Semibold);
440
+ line-height:var(--link-display-s-line-height, 48px);
441
+ font-size:var(--link-display-s-font-size, 40px);
442
+ letter-spacing:var(--link-display-s-letter-spacing, -0.5px);
443
+ paragraph-spacing:var(--link-display-s-paragraph-spacing, 22px);
444
+ -webkit-text-decoration:var(--link-display-s-text-decoration, underline);
445
+ text-decoration:var(--link-display-s-text-decoration, underline);
446
+ }
447
+ .link[data-size=s][data-purpose=display][data-text-mode=on-accent]{
448
+ font-family:var(--link-display-s-font-family, SB Sans Interface);
449
+ font-weight:var(--link-display-s-font-weight, Semibold);
450
+ line-height:var(--link-display-s-line-height, 48px);
451
+ font-size:var(--link-display-s-font-size, 40px);
452
+ letter-spacing:var(--link-display-s-letter-spacing, -0.5px);
453
+ paragraph-spacing:var(--link-display-s-paragraph-spacing, 22px);
454
+ -webkit-text-decoration:var(--link-display-s-text-decoration, underline);
455
+ text-decoration:var(--link-display-s-text-decoration, underline);
456
+ }
457
+ .link[data-size=s][data-purpose=headline][data-text-mode=default]{
458
+ font-family:var(--sans-headline-s-font-family, SB Sans Interface);
459
+ font-weight:var(--sans-headline-s-font-weight, Semibold);
460
+ line-height:var(--sans-headline-s-line-height, 32px);
461
+ font-size:var(--sans-headline-s-font-size, 24px);
462
+ letter-spacing:var(--sans-headline-s-letter-spacing, -0.5px);
463
+ paragraph-spacing:var(--sans-headline-s-paragraph-spacing, 13.2px);
464
+ }
465
+ .link[data-size=s][data-purpose=headline][data-text-mode=accent]{
466
+ font-family:var(--link-headline-s-font-family, SB Sans Interface);
467
+ font-weight:var(--link-headline-s-font-weight, Semibold);
468
+ line-height:var(--link-headline-s-line-height, 32px);
469
+ font-size:var(--link-headline-s-font-size, 24px);
470
+ letter-spacing:var(--link-headline-s-letter-spacing, -0.5px);
471
+ paragraph-spacing:var(--link-headline-s-paragraph-spacing, 13.2px);
472
+ -webkit-text-decoration:var(--link-headline-s-text-decoration, underline);
473
+ text-decoration:var(--link-headline-s-text-decoration, underline);
474
+ }
475
+ .link[data-size=s][data-purpose=headline][data-text-mode=on-accent]{
476
+ font-family:var(--link-headline-s-font-family, SB Sans Interface);
477
+ font-weight:var(--link-headline-s-font-weight, Semibold);
478
+ line-height:var(--link-headline-s-line-height, 32px);
479
+ font-size:var(--link-headline-s-font-size, 24px);
480
+ letter-spacing:var(--link-headline-s-letter-spacing, -0.5px);
481
+ paragraph-spacing:var(--link-headline-s-paragraph-spacing, 13.2px);
482
+ -webkit-text-decoration:var(--link-headline-s-text-decoration, underline);
483
+ text-decoration:var(--link-headline-s-text-decoration, underline);
484
+ }
485
+ .link[data-size=s][data-purpose=title][data-text-mode=default]{
486
+ font-family:var(--sans-title-s-font-family, SB Sans Interface);
487
+ font-weight:var(--sans-title-s-font-weight, Semibold);
488
+ line-height:var(--sans-title-s-line-height, 20px);
489
+ font-size:var(--sans-title-s-font-size, 14px);
490
+ letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
491
+ paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
492
+ }
493
+ .link[data-size=s][data-purpose=title][data-text-mode=accent]{
494
+ font-family:var(--link-title-s-font-family, SB Sans Interface);
495
+ font-weight:var(--link-title-s-font-weight, Semibold);
496
+ line-height:var(--link-title-s-line-height, 20px);
497
+ font-size:var(--link-title-s-font-size, 14px);
498
+ letter-spacing:var(--link-title-s-letter-spacing, 0.15px);
499
+ paragraph-spacing:var(--link-title-s-paragraph-spacing, 7.7px);
500
+ -webkit-text-decoration:var(--link-title-s-text-decoration, underline);
501
+ text-decoration:var(--link-title-s-text-decoration, underline);
502
+ }
503
+ .link[data-size=s][data-purpose=title][data-text-mode=on-accent]{
504
+ font-family:var(--link-title-s-font-family, SB Sans Interface);
505
+ font-weight:var(--link-title-s-font-weight, Semibold);
506
+ line-height:var(--link-title-s-line-height, 20px);
507
+ font-size:var(--link-title-s-font-size, 14px);
508
+ letter-spacing:var(--link-title-s-letter-spacing, 0.15px);
509
+ paragraph-spacing:var(--link-title-s-paragraph-spacing, 7.7px);
510
+ -webkit-text-decoration:var(--link-title-s-text-decoration, underline);
511
+ text-decoration:var(--link-title-s-text-decoration, underline);
512
+ }
513
+ .link[data-size=s][data-purpose=label][data-text-mode=default]{
514
+ font-family:var(--sans-label-s-font-family, SB Sans Interface);
515
+ font-weight:var(--sans-label-s-font-weight, Semibold);
516
+ line-height:var(--sans-label-s-line-height, 14px);
517
+ font-size:var(--sans-label-s-font-size, 11px);
518
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
519
+ paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
520
+ }
521
+ .link[data-size=s][data-purpose=label][data-text-mode=accent]{
522
+ font-family:var(--link-label-s-font-family, SB Sans Interface);
523
+ font-weight:var(--link-label-s-font-weight, Semibold);
524
+ line-height:var(--link-label-s-line-height, 14px);
525
+ font-size:var(--link-label-s-font-size, 11px);
526
+ letter-spacing:var(--link-label-s-letter-spacing, 0px);
527
+ paragraph-spacing:var(--link-label-s-paragraph-spacing, 6.05px);
528
+ -webkit-text-decoration:var(--link-label-s-text-decoration, underline);
529
+ text-decoration:var(--link-label-s-text-decoration, underline);
530
+ }
531
+ .link[data-size=s][data-purpose=label][data-text-mode=on-accent]{
532
+ font-family:var(--link-label-s-font-family, SB Sans Interface);
533
+ font-weight:var(--link-label-s-font-weight, Semibold);
534
+ line-height:var(--link-label-s-line-height, 14px);
535
+ font-size:var(--link-label-s-font-size, 11px);
536
+ letter-spacing:var(--link-label-s-letter-spacing, 0px);
537
+ paragraph-spacing:var(--link-label-s-paragraph-spacing, 6.05px);
538
+ -webkit-text-decoration:var(--link-label-s-text-decoration, underline);
539
+ text-decoration:var(--link-label-s-text-decoration, underline);
540
+ }
541
+ .link[data-size=s][data-purpose=body][data-text-mode=default]{
430
542
  font-family:var(--sans-body-s-font-family, SB Sans Interface);
431
543
  font-weight:var(--sans-body-s-font-weight, Regular);
432
544
  line-height:var(--sans-body-s-line-height, 16px);
@@ -434,7 +546,7 @@
434
546
  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
435
547
  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
436
548
  }
437
- .link[data-size=s][data-text-mode=accent]{
549
+ .link[data-size=s][data-purpose=body][data-text-mode=accent]{
438
550
  font-family:var(--link-body-s-font-family, SB Sans Interface);
439
551
  font-weight:var(--link-body-s-font-weight, Regular);
440
552
  line-height:var(--link-body-s-line-height, 16px);
@@ -444,7 +556,7 @@
444
556
  -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
445
557
  text-decoration:var(--link-body-s-text-decoration, underline);
446
558
  }
447
- .link[data-size=s][data-text-mode=on-accent]{
559
+ .link[data-size=s][data-purpose=body][data-text-mode=on-accent]{
448
560
  font-family:var(--link-body-s-font-family, SB Sans Interface);
449
561
  font-weight:var(--link-body-s-font-weight, Regular);
450
562
  line-height:var(--link-body-s-line-height, 16px);
@@ -462,7 +574,119 @@
462
574
  height:var(--size-link-m, 20px);
463
575
  gap:var(--space-link-gap-single, 0px);
464
576
  }
465
- .link[data-size=m][data-text-mode=default]{
577
+ .link[data-size=m][data-purpose=display][data-text-mode=default]{
578
+ font-family:var(--sans-display-m-font-family, SB Sans Interface);
579
+ font-weight:var(--sans-display-m-font-weight, Semibold);
580
+ line-height:var(--sans-display-m-line-height, 60px);
581
+ font-size:var(--sans-display-m-font-size, 48px);
582
+ letter-spacing:var(--sans-display-m-letter-spacing, -0.5px);
583
+ paragraph-spacing:var(--sans-display-m-paragraph-spacing, 26.4px);
584
+ }
585
+ .link[data-size=m][data-purpose=display][data-text-mode=accent]{
586
+ font-family:var(--link-display-m-font-family, SB Sans Interface);
587
+ font-weight:var(--link-display-m-font-weight, Semibold);
588
+ line-height:var(--link-display-m-line-height, 60px);
589
+ font-size:var(--link-display-m-font-size, 48px);
590
+ letter-spacing:var(--link-display-m-letter-spacing, -0.5px);
591
+ paragraph-spacing:var(--link-display-m-paragraph-spacing, 26.4px);
592
+ -webkit-text-decoration:var(--link-display-m-text-decoration, underline);
593
+ text-decoration:var(--link-display-m-text-decoration, underline);
594
+ }
595
+ .link[data-size=m][data-purpose=display][data-text-mode=on-accent]{
596
+ font-family:var(--link-display-m-font-family, SB Sans Interface);
597
+ font-weight:var(--link-display-m-font-weight, Semibold);
598
+ line-height:var(--link-display-m-line-height, 60px);
599
+ font-size:var(--link-display-m-font-size, 48px);
600
+ letter-spacing:var(--link-display-m-letter-spacing, -0.5px);
601
+ paragraph-spacing:var(--link-display-m-paragraph-spacing, 26.4px);
602
+ -webkit-text-decoration:var(--link-display-m-text-decoration, underline);
603
+ text-decoration:var(--link-display-m-text-decoration, underline);
604
+ }
605
+ .link[data-size=m][data-purpose=headline][data-text-mode=default]{
606
+ font-family:var(--sans-headline-m-font-family, SB Sans Interface);
607
+ font-weight:var(--sans-headline-m-font-weight, Semibold);
608
+ line-height:var(--sans-headline-m-line-height, 36px);
609
+ font-size:var(--sans-headline-m-font-size, 28px);
610
+ letter-spacing:var(--sans-headline-m-letter-spacing, -0.5px);
611
+ paragraph-spacing:var(--sans-headline-m-paragraph-spacing, 15.4px);
612
+ }
613
+ .link[data-size=m][data-purpose=headline][data-text-mode=accent]{
614
+ font-family:var(--link-headline-m-font-family, SB Sans Interface);
615
+ font-weight:var(--link-headline-m-font-weight, Semibold);
616
+ line-height:var(--link-headline-m-line-height, 36px);
617
+ font-size:var(--link-headline-m-font-size, 28px);
618
+ letter-spacing:var(--link-headline-m-letter-spacing, -0.5px);
619
+ paragraph-spacing:var(--link-headline-m-paragraph-spacing, 15.4px);
620
+ -webkit-text-decoration:var(--link-headline-m-text-decoration, underline);
621
+ text-decoration:var(--link-headline-m-text-decoration, underline);
622
+ }
623
+ .link[data-size=m][data-purpose=headline][data-text-mode=on-accent]{
624
+ font-family:var(--link-headline-m-font-family, SB Sans Interface);
625
+ font-weight:var(--link-headline-m-font-weight, Semibold);
626
+ line-height:var(--link-headline-m-line-height, 36px);
627
+ font-size:var(--link-headline-m-font-size, 28px);
628
+ letter-spacing:var(--link-headline-m-letter-spacing, -0.5px);
629
+ paragraph-spacing:var(--link-headline-m-paragraph-spacing, 15.4px);
630
+ -webkit-text-decoration:var(--link-headline-m-text-decoration, underline);
631
+ text-decoration:var(--link-headline-m-text-decoration, underline);
632
+ }
633
+ .link[data-size=m][data-purpose=title][data-text-mode=default]{
634
+ font-family:var(--sans-title-m-font-family, SB Sans Interface);
635
+ font-weight:var(--sans-title-m-font-weight, Semibold);
636
+ line-height:var(--sans-title-m-line-height, 24px);
637
+ font-size:var(--sans-title-m-font-size, 16px);
638
+ letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
639
+ paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
640
+ }
641
+ .link[data-size=m][data-purpose=title][data-text-mode=accent]{
642
+ font-family:var(--link-title-m-font-family, SB Sans Interface);
643
+ font-weight:var(--link-title-m-font-weight, Semibold);
644
+ line-height:var(--link-title-m-line-height, 24px);
645
+ font-size:var(--link-title-m-font-size, 16px);
646
+ letter-spacing:var(--link-title-m-letter-spacing, 0.15px);
647
+ paragraph-spacing:var(--link-title-m-paragraph-spacing, 8.8px);
648
+ -webkit-text-decoration:var(--link-title-m-text-decoration, underline);
649
+ text-decoration:var(--link-title-m-text-decoration, underline);
650
+ }
651
+ .link[data-size=m][data-purpose=title][data-text-mode=on-accent]{
652
+ font-family:var(--link-title-m-font-family, SB Sans Interface);
653
+ font-weight:var(--link-title-m-font-weight, Semibold);
654
+ line-height:var(--link-title-m-line-height, 24px);
655
+ font-size:var(--link-title-m-font-size, 16px);
656
+ letter-spacing:var(--link-title-m-letter-spacing, 0.15px);
657
+ paragraph-spacing:var(--link-title-m-paragraph-spacing, 8.8px);
658
+ -webkit-text-decoration:var(--link-title-m-text-decoration, underline);
659
+ text-decoration:var(--link-title-m-text-decoration, underline);
660
+ }
661
+ .link[data-size=m][data-purpose=label][data-text-mode=default]{
662
+ font-family:var(--sans-label-m-font-family, SB Sans Interface);
663
+ font-weight:var(--sans-label-m-font-weight, Semibold);
664
+ line-height:var(--sans-label-m-line-height, 16px);
665
+ font-size:var(--sans-label-m-font-size, 12px);
666
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
667
+ paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
668
+ }
669
+ .link[data-size=m][data-purpose=label][data-text-mode=accent]{
670
+ font-family:var(--link-label-m-font-family, SB Sans Interface);
671
+ font-weight:var(--link-label-m-font-weight, Semibold);
672
+ line-height:var(--link-label-m-line-height, 16px);
673
+ font-size:var(--link-label-m-font-size, 12px);
674
+ letter-spacing:var(--link-label-m-letter-spacing, 0px);
675
+ paragraph-spacing:var(--link-label-m-paragraph-spacing, 6.6px);
676
+ -webkit-text-decoration:var(--link-label-m-text-decoration, underline);
677
+ text-decoration:var(--link-label-m-text-decoration, underline);
678
+ }
679
+ .link[data-size=m][data-purpose=label][data-text-mode=on-accent]{
680
+ font-family:var(--link-label-m-font-family, SB Sans Interface);
681
+ font-weight:var(--link-label-m-font-weight, Semibold);
682
+ line-height:var(--link-label-m-line-height, 16px);
683
+ font-size:var(--link-label-m-font-size, 12px);
684
+ letter-spacing:var(--link-label-m-letter-spacing, 0px);
685
+ paragraph-spacing:var(--link-label-m-paragraph-spacing, 6.6px);
686
+ -webkit-text-decoration:var(--link-label-m-text-decoration, underline);
687
+ text-decoration:var(--link-label-m-text-decoration, underline);
688
+ }
689
+ .link[data-size=m][data-purpose=body][data-text-mode=default]{
466
690
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
467
691
  font-weight:var(--sans-body-m-font-weight, Regular);
468
692
  line-height:var(--sans-body-m-line-height, 20px);
@@ -470,7 +694,7 @@
470
694
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
471
695
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
472
696
  }
473
- .link[data-size=m][data-text-mode=accent]{
697
+ .link[data-size=m][data-purpose=body][data-text-mode=accent]{
474
698
  font-family:var(--link-body-m-font-family, SB Sans Interface);
475
699
  font-weight:var(--link-body-m-font-weight, Regular);
476
700
  line-height:var(--link-body-m-line-height, 20px);
@@ -480,7 +704,7 @@
480
704
  -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
481
705
  text-decoration:var(--link-body-m-text-decoration, underline);
482
706
  }
483
- .link[data-size=m][data-text-mode=on-accent]{
707
+ .link[data-size=m][data-purpose=body][data-text-mode=on-accent]{
484
708
  font-family:var(--link-body-m-font-family, SB Sans Interface);
485
709
  font-weight:var(--link-body-m-font-weight, Regular);
486
710
  line-height:var(--link-body-m-line-height, 20px);
@@ -498,7 +722,119 @@
498
722
  height:var(--size-link-l, 24px);
499
723
  gap:var(--space-link-gap-single, 0px);
500
724
  }
501
- .link[data-size=l][data-text-mode=default]{
725
+ .link[data-size=l][data-purpose=display][data-text-mode=default]{
726
+ font-family:var(--sans-display-l-font-family, SB Sans Interface);
727
+ font-weight:var(--sans-display-l-font-weight, Bold);
728
+ line-height:var(--sans-display-l-line-height, 72px);
729
+ font-size:var(--sans-display-l-font-size, 56px);
730
+ letter-spacing:var(--sans-display-l-letter-spacing, -0.5px);
731
+ paragraph-spacing:var(--sans-display-l-paragraph-spacing, 30.8px);
732
+ }
733
+ .link[data-size=l][data-purpose=display][data-text-mode=accent]{
734
+ font-family:var(--link-display-l-font-family, SB Sans Interface);
735
+ font-weight:var(--link-display-l-font-weight, Bold);
736
+ line-height:var(--link-display-l-line-height, 72px);
737
+ font-size:var(--link-display-l-font-size, 56px);
738
+ letter-spacing:var(--link-display-l-letter-spacing, -0.5px);
739
+ paragraph-spacing:var(--link-display-l-paragraph-spacing, 30.8px);
740
+ -webkit-text-decoration:var(--link-display-l-text-decoration, underline);
741
+ text-decoration:var(--link-display-l-text-decoration, underline);
742
+ }
743
+ .link[data-size=l][data-purpose=display][data-text-mode=on-accent]{
744
+ font-family:var(--link-display-l-font-family, SB Sans Interface);
745
+ font-weight:var(--link-display-l-font-weight, Bold);
746
+ line-height:var(--link-display-l-line-height, 72px);
747
+ font-size:var(--link-display-l-font-size, 56px);
748
+ letter-spacing:var(--link-display-l-letter-spacing, -0.5px);
749
+ paragraph-spacing:var(--link-display-l-paragraph-spacing, 30.8px);
750
+ -webkit-text-decoration:var(--link-display-l-text-decoration, underline);
751
+ text-decoration:var(--link-display-l-text-decoration, underline);
752
+ }
753
+ .link[data-size=l][data-purpose=headline][data-text-mode=default]{
754
+ font-family:var(--sans-headline-l-font-family, SB Sans Interface);
755
+ font-weight:var(--sans-headline-l-font-weight, Semibold);
756
+ line-height:var(--sans-headline-l-line-height, 40px);
757
+ font-size:var(--sans-headline-l-font-size, 32px);
758
+ letter-spacing:var(--sans-headline-l-letter-spacing, -0.5px);
759
+ paragraph-spacing:var(--sans-headline-l-paragraph-spacing, 17.6px);
760
+ }
761
+ .link[data-size=l][data-purpose=headline][data-text-mode=accent]{
762
+ font-family:var(--link-headline-l-font-family, SB Sans Interface);
763
+ font-weight:var(--link-headline-l-font-weight, Semibold);
764
+ line-height:var(--link-headline-l-line-height, 40px);
765
+ font-size:var(--link-headline-l-font-size, 32px);
766
+ letter-spacing:var(--link-headline-l-letter-spacing, -0.5px);
767
+ paragraph-spacing:var(--link-headline-l-paragraph-spacing, 17.6px);
768
+ -webkit-text-decoration:var(--link-headline-l-text-decoration, underline);
769
+ text-decoration:var(--link-headline-l-text-decoration, underline);
770
+ }
771
+ .link[data-size=l][data-purpose=headline][data-text-mode=on-accent]{
772
+ font-family:var(--link-headline-l-font-family, SB Sans Interface);
773
+ font-weight:var(--link-headline-l-font-weight, Semibold);
774
+ line-height:var(--link-headline-l-line-height, 40px);
775
+ font-size:var(--link-headline-l-font-size, 32px);
776
+ letter-spacing:var(--link-headline-l-letter-spacing, -0.5px);
777
+ paragraph-spacing:var(--link-headline-l-paragraph-spacing, 17.6px);
778
+ -webkit-text-decoration:var(--link-headline-l-text-decoration, underline);
779
+ text-decoration:var(--link-headline-l-text-decoration, underline);
780
+ }
781
+ .link[data-size=l][data-purpose=title][data-text-mode=default]{
782
+ font-family:var(--sans-title-l-font-family, SB Sans Interface);
783
+ font-weight:var(--sans-title-l-font-weight, Semibold);
784
+ line-height:var(--sans-title-l-line-height, 28px);
785
+ font-size:var(--sans-title-l-font-size, 20px);
786
+ letter-spacing:var(--sans-title-l-letter-spacing, 0.15px);
787
+ paragraph-spacing:var(--sans-title-l-paragraph-spacing, 11px);
788
+ }
789
+ .link[data-size=l][data-purpose=title][data-text-mode=accent]{
790
+ font-family:var(--link-title-l-font-family, SB Sans Interface);
791
+ font-weight:var(--link-title-l-font-weight, Semibold);
792
+ line-height:var(--link-title-l-line-height, 28px);
793
+ font-size:var(--link-title-l-font-size, 20px);
794
+ letter-spacing:var(--link-title-l-letter-spacing, 0.15px);
795
+ paragraph-spacing:var(--link-title-l-paragraph-spacing, 11px);
796
+ -webkit-text-decoration:var(--link-title-l-text-decoration, underline);
797
+ text-decoration:var(--link-title-l-text-decoration, underline);
798
+ }
799
+ .link[data-size=l][data-purpose=title][data-text-mode=on-accent]{
800
+ font-family:var(--link-title-l-font-family, SB Sans Interface);
801
+ font-weight:var(--link-title-l-font-weight, Semibold);
802
+ line-height:var(--link-title-l-line-height, 28px);
803
+ font-size:var(--link-title-l-font-size, 20px);
804
+ letter-spacing:var(--link-title-l-letter-spacing, 0.15px);
805
+ paragraph-spacing:var(--link-title-l-paragraph-spacing, 11px);
806
+ -webkit-text-decoration:var(--link-title-l-text-decoration, underline);
807
+ text-decoration:var(--link-title-l-text-decoration, underline);
808
+ }
809
+ .link[data-size=l][data-purpose=label][data-text-mode=default]{
810
+ font-family:var(--sans-label-l-font-family, SB Sans Interface);
811
+ font-weight:var(--sans-label-l-font-weight, Semibold);
812
+ line-height:var(--sans-label-l-line-height, 20px);
813
+ font-size:var(--sans-label-l-font-size, 14px);
814
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
815
+ paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
816
+ }
817
+ .link[data-size=l][data-purpose=label][data-text-mode=accent]{
818
+ font-family:var(--link-label-l-font-family, SB Sans Interface);
819
+ font-weight:var(--link-label-l-font-weight, Semibold);
820
+ line-height:var(--link-label-l-line-height, 20px);
821
+ font-size:var(--link-label-l-font-size, 14px);
822
+ letter-spacing:var(--link-label-l-letter-spacing, 0px);
823
+ paragraph-spacing:var(--link-label-l-paragraph-spacing, 7.7px);
824
+ -webkit-text-decoration:var(--link-label-l-text-decoration, underline);
825
+ text-decoration:var(--link-label-l-text-decoration, underline);
826
+ }
827
+ .link[data-size=l][data-purpose=label][data-text-mode=on-accent]{
828
+ font-family:var(--link-label-l-font-family, SB Sans Interface);
829
+ font-weight:var(--link-label-l-font-weight, Semibold);
830
+ line-height:var(--link-label-l-line-height, 20px);
831
+ font-size:var(--link-label-l-font-size, 14px);
832
+ letter-spacing:var(--link-label-l-letter-spacing, 0px);
833
+ paragraph-spacing:var(--link-label-l-paragraph-spacing, 7.7px);
834
+ -webkit-text-decoration:var(--link-label-l-text-decoration, underline);
835
+ text-decoration:var(--link-label-l-text-decoration, underline);
836
+ }
837
+ .link[data-size=l][data-purpose=body][data-text-mode=default]{
502
838
  font-family:var(--sans-body-l-font-family, SB Sans Interface);
503
839
  font-weight:var(--sans-body-l-font-weight, Regular);
504
840
  line-height:var(--sans-body-l-line-height, 24px);
@@ -506,7 +842,7 @@
506
842
  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
507
843
  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
508
844
  }
509
- .link[data-size=l][data-text-mode=accent]{
845
+ .link[data-size=l][data-purpose=body][data-text-mode=accent]{
510
846
  font-family:var(--link-body-l-font-family, SB Sans Interface);
511
847
  font-weight:var(--link-body-l-font-weight, Regular);
512
848
  line-height:var(--link-body-l-line-height, 24px);
@@ -516,7 +852,7 @@
516
852
  -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
517
853
  text-decoration:var(--link-body-l-text-decoration, underline);
518
854
  }
519
- .link[data-size=l][data-text-mode=on-accent]{
855
+ .link[data-size=l][data-purpose=body][data-text-mode=on-accent]{
520
856
  font-family:var(--link-body-l-font-family, SB Sans Interface);
521
857
  font-weight:var(--link-body-l-font-weight, Regular);
522
858
  line-height:var(--link-body-l-line-height, 24px);
package/dist/cjs/components/types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { ComponentPropsWithoutRef, ElementType } from 'react';
2
2
  import { TruncateStringProps } from '@snack-uikit/truncate-string';
3
3
  import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
4
- import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
4
+ import { APPEARANCE, PURPOSE, SIZE, TEXT_MODE } from './constants';
5
5
  export type Appearance = ValueOf<typeof APPEARANCE>;
6
6
  export type Size = ValueOf<typeof SIZE>;
7
+ export type Purpose = ValueOf<typeof PURPOSE>;
7
8
  export type TextMode = ValueOf<typeof TEXT_MODE>;
8
9
  export type BaseProps = WithSupportProps<{
9
10
  /** Текст ссылки */
@@ -12,6 +13,10 @@ export type BaseProps = WithSupportProps<{
12
13
  * @default 's'
13
14
  */
14
15
  size?: Size;
16
+ /** Роль
17
+ * @default 'body'
18
+ */
19
+ purpose?: Purpose;
15
20
  /** Стилизует ссылку для размещения на цветном фоне
16
21
  * @default 'primary'
17
22
  */
package/dist/esm/components/Link.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { ElementType } from 'react';
2
2
  import { LinkProps } from './types';
3
3
  /** Компонент ссылка */
4
- export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;
4
+ export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, purpose, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;
package/dist/esm/components/Link.js CHANGED
@@ -13,12 +13,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import cn from 'classnames';
14
14
  import { TruncateString } from '@snack-uikit/truncate-string';
15
15
  import { extractSupportProps } from '@snack-uikit/utils';
16
- import { APPEARANCE, SIZE, TARGET, TEXT_MODE } from './constants';
16
+ import { APPEARANCE, PURPOSE, SIZE, TARGET, TEXT_MODE } from './constants';
17
17
  import styles from './styles.module.css';
18
18
  /** Компонент ссылка */
19
19
  export function Link(_a) {
20
20
  var _b, _c;
21
- var { text = '', className, textMode = TEXT_MODE.Default, size = SIZE.S, appearance = APPEARANCE.Primary, insideText = false, truncateVariant, as } = _a, rest = __rest(_a, ["text", "className", "textMode", "size", "appearance", "insideText", "truncateVariant", "as"]);
21
+ var { text = '', className, textMode = TEXT_MODE.Default, size = SIZE.S, purpose = PURPOSE.Body, appearance = APPEARANCE.Primary, insideText = false, truncateVariant, as } = _a, rest = __rest(_a, ["text", "className", "textMode", "size", "purpose", "appearance", "insideText", "truncateVariant", "as"]);
22
22
  const Component = as || 'a';
23
23
  let fallbackProps;
24
24
  if (Component === 'a') {
@@ -31,5 +31,5 @@ export function Link(_a) {
31
31
  else {
32
32
  fallbackProps = rest;
33
33
  }
34
- return (_jsx(Component, Object.assign({ className: cn(styles.link, className) }, fallbackProps, { "data-size": size, "data-text-mode": textMode, "data-appearance": appearance, "data-inside-text": insideText || undefined, children: insideText ? text : _jsx(TruncateString, { text: text, maxLines: 1, variant: truncateVariant }) })));
34
+ return (_jsx(Component, Object.assign({ className: cn(styles.link, className) }, fallbackProps, { "data-size": size, "data-purpose": purpose, "data-text-mode": textMode, "data-appearance": appearance, "data-inside-text": insideText || undefined, children: insideText ? text : _jsx(TruncateString, { text: text, maxLines: 1, variant: truncateVariant }) })));
35
35
  }
package/dist/esm/components/constants.d.ts CHANGED
@@ -15,6 +15,13 @@ export declare const SIZE: {
15
15
  readonly M: "m";
16
16
  readonly L: "l";
17
17
  };
18
+ export declare const PURPOSE: {
19
+ readonly Display: "display";
20
+ readonly Headline: "headline";
21
+ readonly Title: "title";
22
+ readonly Label: "label";
23
+ readonly Body: "body";
24
+ };
18
25
  export declare const TARGET: {
19
26
  readonly Self: "_self";
20
27
  readonly Blank: "_blank";
package/dist/esm/components/constants.js CHANGED
@@ -15,6 +15,13 @@ export const SIZE = {
15
15
  M: 'm',
16
16
  L: 'l',
17
17
  };
18
+ export const PURPOSE = {
19
+ Display: 'display',
20
+ Headline: 'headline',
21
+ Title: 'title',
22
+ Label: 'label',
23
+ Body: 'body',
24
+ };
18
25
  export const TARGET = {
19
26
  Self: '_self',
20
27
  Blank: '_blank',
package/dist/esm/components/styles.module.css CHANGED
@@ -426,7 +426,119 @@
426
426
  height:var(--size-link-s, 16px);
427
427
  gap:var(--space-link-gap-single, 0px);
428
428
  }
429
- .link[data-size=s][data-text-mode=default]{
429
+ .link[data-size=s][data-purpose=display][data-text-mode=default]{
430
+ font-family:var(--sans-display-s-font-family, SB Sans Interface);
431
+ font-weight:var(--sans-display-s-font-weight, Semibold);
432
+ line-height:var(--sans-display-s-line-height, 48px);
433
+ font-size:var(--sans-display-s-font-size, 40px);
434
+ letter-spacing:var(--sans-display-s-letter-spacing, -0.5px);
435
+ paragraph-spacing:var(--sans-display-s-paragraph-spacing, 22px);
436
+ }
437
+ .link[data-size=s][data-purpose=display][data-text-mode=accent]{
438
+ font-family:var(--link-display-s-font-family, SB Sans Interface);
439
+ font-weight:var(--link-display-s-font-weight, Semibold);
440
+ line-height:var(--link-display-s-line-height, 48px);
441
+ font-size:var(--link-display-s-font-size, 40px);
442
+ letter-spacing:var(--link-display-s-letter-spacing, -0.5px);
443
+ paragraph-spacing:var(--link-display-s-paragraph-spacing, 22px);
444
+ -webkit-text-decoration:var(--link-display-s-text-decoration, underline);
445
+ text-decoration:var(--link-display-s-text-decoration, underline);
446
+ }
447
+ .link[data-size=s][data-purpose=display][data-text-mode=on-accent]{
448
+ font-family:var(--link-display-s-font-family, SB Sans Interface);
449
+ font-weight:var(--link-display-s-font-weight, Semibold);
450
+ line-height:var(--link-display-s-line-height, 48px);
451
+ font-size:var(--link-display-s-font-size, 40px);
452
+ letter-spacing:var(--link-display-s-letter-spacing, -0.5px);
453
+ paragraph-spacing:var(--link-display-s-paragraph-spacing, 22px);
454
+ -webkit-text-decoration:var(--link-display-s-text-decoration, underline);
455
+ text-decoration:var(--link-display-s-text-decoration, underline);
456
+ }
457
+ .link[data-size=s][data-purpose=headline][data-text-mode=default]{
458
+ font-family:var(--sans-headline-s-font-family, SB Sans Interface);
459
+ font-weight:var(--sans-headline-s-font-weight, Semibold);
460
+ line-height:var(--sans-headline-s-line-height, 32px);
461
+ font-size:var(--sans-headline-s-font-size, 24px);
462
+ letter-spacing:var(--sans-headline-s-letter-spacing, -0.5px);
463
+ paragraph-spacing:var(--sans-headline-s-paragraph-spacing, 13.2px);
464
+ }
465
+ .link[data-size=s][data-purpose=headline][data-text-mode=accent]{
466
+ font-family:var(--link-headline-s-font-family, SB Sans Interface);
467
+ font-weight:var(--link-headline-s-font-weight, Semibold);
468
+ line-height:var(--link-headline-s-line-height, 32px);
469
+ font-size:var(--link-headline-s-font-size, 24px);
470
+ letter-spacing:var(--link-headline-s-letter-spacing, -0.5px);
471
+ paragraph-spacing:var(--link-headline-s-paragraph-spacing, 13.2px);
472
+ -webkit-text-decoration:var(--link-headline-s-text-decoration, underline);
473
+ text-decoration:var(--link-headline-s-text-decoration, underline);
474
+ }
475
+ .link[data-size=s][data-purpose=headline][data-text-mode=on-accent]{
476
+ font-family:var(--link-headline-s-font-family, SB Sans Interface);
477
+ font-weight:var(--link-headline-s-font-weight, Semibold);
478
+ line-height:var(--link-headline-s-line-height, 32px);
479
+ font-size:var(--link-headline-s-font-size, 24px);
480
+ letter-spacing:var(--link-headline-s-letter-spacing, -0.5px);
481
+ paragraph-spacing:var(--link-headline-s-paragraph-spacing, 13.2px);
482
+ -webkit-text-decoration:var(--link-headline-s-text-decoration, underline);
483
+ text-decoration:var(--link-headline-s-text-decoration, underline);
484
+ }
485
+ .link[data-size=s][data-purpose=title][data-text-mode=default]{
486
+ font-family:var(--sans-title-s-font-family, SB Sans Interface);
487
+ font-weight:var(--sans-title-s-font-weight, Semibold);
488
+ line-height:var(--sans-title-s-line-height, 20px);
489
+ font-size:var(--sans-title-s-font-size, 14px);
490
+ letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
491
+ paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
492
+ }
493
+ .link[data-size=s][data-purpose=title][data-text-mode=accent]{
494
+ font-family:var(--link-title-s-font-family, SB Sans Interface);
495
+ font-weight:var(--link-title-s-font-weight, Semibold);
496
+ line-height:var(--link-title-s-line-height, 20px);
497
+ font-size:var(--link-title-s-font-size, 14px);
498
+ letter-spacing:var(--link-title-s-letter-spacing, 0.15px);
499
+ paragraph-spacing:var(--link-title-s-paragraph-spacing, 7.7px);
500
+ -webkit-text-decoration:var(--link-title-s-text-decoration, underline);
501
+ text-decoration:var(--link-title-s-text-decoration, underline);
502
+ }
503
+ .link[data-size=s][data-purpose=title][data-text-mode=on-accent]{
504
+ font-family:var(--link-title-s-font-family, SB Sans Interface);
505
+ font-weight:var(--link-title-s-font-weight, Semibold);
506
+ line-height:var(--link-title-s-line-height, 20px);
507
+ font-size:var(--link-title-s-font-size, 14px);
508
+ letter-spacing:var(--link-title-s-letter-spacing, 0.15px);
509
+ paragraph-spacing:var(--link-title-s-paragraph-spacing, 7.7px);
510
+ -webkit-text-decoration:var(--link-title-s-text-decoration, underline);
511
+ text-decoration:var(--link-title-s-text-decoration, underline);
512
+ }
513
+ .link[data-size=s][data-purpose=label][data-text-mode=default]{
514
+ font-family:var(--sans-label-s-font-family, SB Sans Interface);
515
+ font-weight:var(--sans-label-s-font-weight, Semibold);
516
+ line-height:var(--sans-label-s-line-height, 14px);
517
+ font-size:var(--sans-label-s-font-size, 11px);
518
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
519
+ paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
520
+ }
521
+ .link[data-size=s][data-purpose=label][data-text-mode=accent]{
522
+ font-family:var(--link-label-s-font-family, SB Sans Interface);
523
+ font-weight:var(--link-label-s-font-weight, Semibold);
524
+ line-height:var(--link-label-s-line-height, 14px);
525
+ font-size:var(--link-label-s-font-size, 11px);
526
+ letter-spacing:var(--link-label-s-letter-spacing, 0px);
527
+ paragraph-spacing:var(--link-label-s-paragraph-spacing, 6.05px);
528
+ -webkit-text-decoration:var(--link-label-s-text-decoration, underline);
529
+ text-decoration:var(--link-label-s-text-decoration, underline);
530
+ }
531
+ .link[data-size=s][data-purpose=label][data-text-mode=on-accent]{
532
+ font-family:var(--link-label-s-font-family, SB Sans Interface);
533
+ font-weight:var(--link-label-s-font-weight, Semibold);
534
+ line-height:var(--link-label-s-line-height, 14px);
535
+ font-size:var(--link-label-s-font-size, 11px);
536
+ letter-spacing:var(--link-label-s-letter-spacing, 0px);
537
+ paragraph-spacing:var(--link-label-s-paragraph-spacing, 6.05px);
538
+ -webkit-text-decoration:var(--link-label-s-text-decoration, underline);
539
+ text-decoration:var(--link-label-s-text-decoration, underline);
540
+ }
541
+ .link[data-size=s][data-purpose=body][data-text-mode=default]{
430
542
  font-family:var(--sans-body-s-font-family, SB Sans Interface);
431
543
  font-weight:var(--sans-body-s-font-weight, Regular);
432
544
  line-height:var(--sans-body-s-line-height, 16px);
@@ -434,7 +546,7 @@
434
546
  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
435
547
  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
436
548
  }
437
- .link[data-size=s][data-text-mode=accent]{
549
+ .link[data-size=s][data-purpose=body][data-text-mode=accent]{
438
550
  font-family:var(--link-body-s-font-family, SB Sans Interface);
439
551
  font-weight:var(--link-body-s-font-weight, Regular);
440
552
  line-height:var(--link-body-s-line-height, 16px);
@@ -444,7 +556,7 @@
444
556
  -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
445
557
  text-decoration:var(--link-body-s-text-decoration, underline);
446
558
  }
447
- .link[data-size=s][data-text-mode=on-accent]{
559
+ .link[data-size=s][data-purpose=body][data-text-mode=on-accent]{
448
560
  font-family:var(--link-body-s-font-family, SB Sans Interface);
449
561
  font-weight:var(--link-body-s-font-weight, Regular);
450
562
  line-height:var(--link-body-s-line-height, 16px);
@@ -462,7 +574,119 @@
462
574
  height:var(--size-link-m, 20px);
463
575
  gap:var(--space-link-gap-single, 0px);
464
576
  }
465
- .link[data-size=m][data-text-mode=default]{
577
+ .link[data-size=m][data-purpose=display][data-text-mode=default]{
578
+ font-family:var(--sans-display-m-font-family, SB Sans Interface);
579
+ font-weight:var(--sans-display-m-font-weight, Semibold);
580
+ line-height:var(--sans-display-m-line-height, 60px);
581
+ font-size:var(--sans-display-m-font-size, 48px);
582
+ letter-spacing:var(--sans-display-m-letter-spacing, -0.5px);
583
+ paragraph-spacing:var(--sans-display-m-paragraph-spacing, 26.4px);
584
+ }
585
+ .link[data-size=m][data-purpose=display][data-text-mode=accent]{
586
+ font-family:var(--link-display-m-font-family, SB Sans Interface);
587
+ font-weight:var(--link-display-m-font-weight, Semibold);
588
+ line-height:var(--link-display-m-line-height, 60px);
589
+ font-size:var(--link-display-m-font-size, 48px);
590
+ letter-spacing:var(--link-display-m-letter-spacing, -0.5px);
591
+ paragraph-spacing:var(--link-display-m-paragraph-spacing, 26.4px);
592
+ -webkit-text-decoration:var(--link-display-m-text-decoration, underline);
593
+ text-decoration:var(--link-display-m-text-decoration, underline);
594
+ }
595
+ .link[data-size=m][data-purpose=display][data-text-mode=on-accent]{
596
+ font-family:var(--link-display-m-font-family, SB Sans Interface);
597
+ font-weight:var(--link-display-m-font-weight, Semibold);
598
+ line-height:var(--link-display-m-line-height, 60px);
599
+ font-size:var(--link-display-m-font-size, 48px);
600
+ letter-spacing:var(--link-display-m-letter-spacing, -0.5px);
601
+ paragraph-spacing:var(--link-display-m-paragraph-spacing, 26.4px);
602
+ -webkit-text-decoration:var(--link-display-m-text-decoration, underline);
603
+ text-decoration:var(--link-display-m-text-decoration, underline);
604
+ }
605
+ .link[data-size=m][data-purpose=headline][data-text-mode=default]{
606
+ font-family:var(--sans-headline-m-font-family, SB Sans Interface);
607
+ font-weight:var(--sans-headline-m-font-weight, Semibold);
608
+ line-height:var(--sans-headline-m-line-height, 36px);
609
+ font-size:var(--sans-headline-m-font-size, 28px);
610
+ letter-spacing:var(--sans-headline-m-letter-spacing, -0.5px);
611
+ paragraph-spacing:var(--sans-headline-m-paragraph-spacing, 15.4px);
612
+ }
613
+ .link[data-size=m][data-purpose=headline][data-text-mode=accent]{
614
+ font-family:var(--link-headline-m-font-family, SB Sans Interface);
615
+ font-weight:var(--link-headline-m-font-weight, Semibold);
616
+ line-height:var(--link-headline-m-line-height, 36px);
617
+ font-size:var(--link-headline-m-font-size, 28px);
618
+ letter-spacing:var(--link-headline-m-letter-spacing, -0.5px);
619
+ paragraph-spacing:var(--link-headline-m-paragraph-spacing, 15.4px);
620
+ -webkit-text-decoration:var(--link-headline-m-text-decoration, underline);
621
+ text-decoration:var(--link-headline-m-text-decoration, underline);
622
+ }
623
+ .link[data-size=m][data-purpose=headline][data-text-mode=on-accent]{
624
+ font-family:var(--link-headline-m-font-family, SB Sans Interface);
625
+ font-weight:var(--link-headline-m-font-weight, Semibold);
626
+ line-height:var(--link-headline-m-line-height, 36px);
627
+ font-size:var(--link-headline-m-font-size, 28px);
628
+ letter-spacing:var(--link-headline-m-letter-spacing, -0.5px);
629
+ paragraph-spacing:var(--link-headline-m-paragraph-spacing, 15.4px);
630
+ -webkit-text-decoration:var(--link-headline-m-text-decoration, underline);
631
+ text-decoration:var(--link-headline-m-text-decoration, underline);
632
+ }
633
+ .link[data-size=m][data-purpose=title][data-text-mode=default]{
634
+ font-family:var(--sans-title-m-font-family, SB Sans Interface);
635
+ font-weight:var(--sans-title-m-font-weight, Semibold);
636
+ line-height:var(--sans-title-m-line-height, 24px);
637
+ font-size:var(--sans-title-m-font-size, 16px);
638
+ letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
639
+ paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
640
+ }
641
+ .link[data-size=m][data-purpose=title][data-text-mode=accent]{
642
+ font-family:var(--link-title-m-font-family, SB Sans Interface);
643
+ font-weight:var(--link-title-m-font-weight, Semibold);
644
+ line-height:var(--link-title-m-line-height, 24px);
645
+ font-size:var(--link-title-m-font-size, 16px);
646
+ letter-spacing:var(--link-title-m-letter-spacing, 0.15px);
647
+ paragraph-spacing:var(--link-title-m-paragraph-spacing, 8.8px);
648
+ -webkit-text-decoration:var(--link-title-m-text-decoration, underline);
649
+ text-decoration:var(--link-title-m-text-decoration, underline);
650
+ }
651
+ .link[data-size=m][data-purpose=title][data-text-mode=on-accent]{
652
+ font-family:var(--link-title-m-font-family, SB Sans Interface);
653
+ font-weight:var(--link-title-m-font-weight, Semibold);
654
+ line-height:var(--link-title-m-line-height, 24px);
655
+ font-size:var(--link-title-m-font-size, 16px);
656
+ letter-spacing:var(--link-title-m-letter-spacing, 0.15px);
657
+ paragraph-spacing:var(--link-title-m-paragraph-spacing, 8.8px);
658
+ -webkit-text-decoration:var(--link-title-m-text-decoration, underline);
659
+ text-decoration:var(--link-title-m-text-decoration, underline);
660
+ }
661
+ .link[data-size=m][data-purpose=label][data-text-mode=default]{
662
+ font-family:var(--sans-label-m-font-family, SB Sans Interface);
663
+ font-weight:var(--sans-label-m-font-weight, Semibold);
664
+ line-height:var(--sans-label-m-line-height, 16px);
665
+ font-size:var(--sans-label-m-font-size, 12px);
666
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
667
+ paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
668
+ }
669
+ .link[data-size=m][data-purpose=label][data-text-mode=accent]{
670
+ font-family:var(--link-label-m-font-family, SB Sans Interface);
671
+ font-weight:var(--link-label-m-font-weight, Semibold);
672
+ line-height:var(--link-label-m-line-height, 16px);
673
+ font-size:var(--link-label-m-font-size, 12px);
674
+ letter-spacing:var(--link-label-m-letter-spacing, 0px);
675
+ paragraph-spacing:var(--link-label-m-paragraph-spacing, 6.6px);
676
+ -webkit-text-decoration:var(--link-label-m-text-decoration, underline);
677
+ text-decoration:var(--link-label-m-text-decoration, underline);
678
+ }
679
+ .link[data-size=m][data-purpose=label][data-text-mode=on-accent]{
680
+ font-family:var(--link-label-m-font-family, SB Sans Interface);
681
+ font-weight:var(--link-label-m-font-weight, Semibold);
682
+ line-height:var(--link-label-m-line-height, 16px);
683
+ font-size:var(--link-label-m-font-size, 12px);
684
+ letter-spacing:var(--link-label-m-letter-spacing, 0px);
685
+ paragraph-spacing:var(--link-label-m-paragraph-spacing, 6.6px);
686
+ -webkit-text-decoration:var(--link-label-m-text-decoration, underline);
687
+ text-decoration:var(--link-label-m-text-decoration, underline);
688
+ }
689
+ .link[data-size=m][data-purpose=body][data-text-mode=default]{
466
690
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
467
691
  font-weight:var(--sans-body-m-font-weight, Regular);
468
692
  line-height:var(--sans-body-m-line-height, 20px);
@@ -470,7 +694,7 @@
470
694
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
471
695
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
472
696
  }
473
- .link[data-size=m][data-text-mode=accent]{
697
+ .link[data-size=m][data-purpose=body][data-text-mode=accent]{
474
698
  font-family:var(--link-body-m-font-family, SB Sans Interface);
475
699
  font-weight:var(--link-body-m-font-weight, Regular);
476
700
  line-height:var(--link-body-m-line-height, 20px);
@@ -480,7 +704,7 @@
480
704
  -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
481
705
  text-decoration:var(--link-body-m-text-decoration, underline);
482
706
  }
483
- .link[data-size=m][data-text-mode=on-accent]{
707
+ .link[data-size=m][data-purpose=body][data-text-mode=on-accent]{
484
708
  font-family:var(--link-body-m-font-family, SB Sans Interface);
485
709
  font-weight:var(--link-body-m-font-weight, Regular);
486
710
  line-height:var(--link-body-m-line-height, 20px);
@@ -498,7 +722,119 @@
498
722
  height:var(--size-link-l, 24px);
499
723
  gap:var(--space-link-gap-single, 0px);
500
724
  }
501
- .link[data-size=l][data-text-mode=default]{
725
+ .link[data-size=l][data-purpose=display][data-text-mode=default]{
726
+ font-family:var(--sans-display-l-font-family, SB Sans Interface);
727
+ font-weight:var(--sans-display-l-font-weight, Bold);
728
+ line-height:var(--sans-display-l-line-height, 72px);
729
+ font-size:var(--sans-display-l-font-size, 56px);
730
+ letter-spacing:var(--sans-display-l-letter-spacing, -0.5px);
731
+ paragraph-spacing:var(--sans-display-l-paragraph-spacing, 30.8px);
732
+ }
733
+ .link[data-size=l][data-purpose=display][data-text-mode=accent]{
734
+ font-family:var(--link-display-l-font-family, SB Sans Interface);
735
+ font-weight:var(--link-display-l-font-weight, Bold);
736
+ line-height:var(--link-display-l-line-height, 72px);
737
+ font-size:var(--link-display-l-font-size, 56px);
738
+ letter-spacing:var(--link-display-l-letter-spacing, -0.5px);
739
+ paragraph-spacing:var(--link-display-l-paragraph-spacing, 30.8px);
740
+ -webkit-text-decoration:var(--link-display-l-text-decoration, underline);
741
+ text-decoration:var(--link-display-l-text-decoration, underline);
742
+ }
743
+ .link[data-size=l][data-purpose=display][data-text-mode=on-accent]{
744
+ font-family:var(--link-display-l-font-family, SB Sans Interface);
745
+ font-weight:var(--link-display-l-font-weight, Bold);
746
+ line-height:var(--link-display-l-line-height, 72px);
747
+ font-size:var(--link-display-l-font-size, 56px);
748
+ letter-spacing:var(--link-display-l-letter-spacing, -0.5px);
749
+ paragraph-spacing:var(--link-display-l-paragraph-spacing, 30.8px);
750
+ -webkit-text-decoration:var(--link-display-l-text-decoration, underline);
751
+ text-decoration:var(--link-display-l-text-decoration, underline);
752
+ }
753
+ .link[data-size=l][data-purpose=headline][data-text-mode=default]{
754
+ font-family:var(--sans-headline-l-font-family, SB Sans Interface);
755
+ font-weight:var(--sans-headline-l-font-weight, Semibold);
756
+ line-height:var(--sans-headline-l-line-height, 40px);
757
+ font-size:var(--sans-headline-l-font-size, 32px);
758
+ letter-spacing:var(--sans-headline-l-letter-spacing, -0.5px);
759
+ paragraph-spacing:var(--sans-headline-l-paragraph-spacing, 17.6px);
760
+ }
761
+ .link[data-size=l][data-purpose=headline][data-text-mode=accent]{
762
+ font-family:var(--link-headline-l-font-family, SB Sans Interface);
763
+ font-weight:var(--link-headline-l-font-weight, Semibold);
764
+ line-height:var(--link-headline-l-line-height, 40px);
765
+ font-size:var(--link-headline-l-font-size, 32px);
766
+ letter-spacing:var(--link-headline-l-letter-spacing, -0.5px);
767
+ paragraph-spacing:var(--link-headline-l-paragraph-spacing, 17.6px);
768
+ -webkit-text-decoration:var(--link-headline-l-text-decoration, underline);
769
+ text-decoration:var(--link-headline-l-text-decoration, underline);
770
+ }
771
+ .link[data-size=l][data-purpose=headline][data-text-mode=on-accent]{
772
+ font-family:var(--link-headline-l-font-family, SB Sans Interface);
773
+ font-weight:var(--link-headline-l-font-weight, Semibold);
774
+ line-height:var(--link-headline-l-line-height, 40px);
775
+ font-size:var(--link-headline-l-font-size, 32px);
776
+ letter-spacing:var(--link-headline-l-letter-spacing, -0.5px);
777
+ paragraph-spacing:var(--link-headline-l-paragraph-spacing, 17.6px);
778
+ -webkit-text-decoration:var(--link-headline-l-text-decoration, underline);
779
+ text-decoration:var(--link-headline-l-text-decoration, underline);
780
+ }
781
+ .link[data-size=l][data-purpose=title][data-text-mode=default]{
782
+ font-family:var(--sans-title-l-font-family, SB Sans Interface);
783
+ font-weight:var(--sans-title-l-font-weight, Semibold);
784
+ line-height:var(--sans-title-l-line-height, 28px);
785
+ font-size:var(--sans-title-l-font-size, 20px);
786
+ letter-spacing:var(--sans-title-l-letter-spacing, 0.15px);
787
+ paragraph-spacing:var(--sans-title-l-paragraph-spacing, 11px);
788
+ }
789
+ .link[data-size=l][data-purpose=title][data-text-mode=accent]{
790
+ font-family:var(--link-title-l-font-family, SB Sans Interface);
791
+ font-weight:var(--link-title-l-font-weight, Semibold);
792
+ line-height:var(--link-title-l-line-height, 28px);
793
+ font-size:var(--link-title-l-font-size, 20px);
794
+ letter-spacing:var(--link-title-l-letter-spacing, 0.15px);
795
+ paragraph-spacing:var(--link-title-l-paragraph-spacing, 11px);
796
+ -webkit-text-decoration:var(--link-title-l-text-decoration, underline);
797
+ text-decoration:var(--link-title-l-text-decoration, underline);
798
+ }
799
+ .link[data-size=l][data-purpose=title][data-text-mode=on-accent]{
800
+ font-family:var(--link-title-l-font-family, SB Sans Interface);
801
+ font-weight:var(--link-title-l-font-weight, Semibold);
802
+ line-height:var(--link-title-l-line-height, 28px);
803
+ font-size:var(--link-title-l-font-size, 20px);
804
+ letter-spacing:var(--link-title-l-letter-spacing, 0.15px);
805
+ paragraph-spacing:var(--link-title-l-paragraph-spacing, 11px);
806
+ -webkit-text-decoration:var(--link-title-l-text-decoration, underline);
807
+ text-decoration:var(--link-title-l-text-decoration, underline);
808
+ }
809
+ .link[data-size=l][data-purpose=label][data-text-mode=default]{
810
+ font-family:var(--sans-label-l-font-family, SB Sans Interface);
811
+ font-weight:var(--sans-label-l-font-weight, Semibold);
812
+ line-height:var(--sans-label-l-line-height, 20px);
813
+ font-size:var(--sans-label-l-font-size, 14px);
814
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
815
+ paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
816
+ }
817
+ .link[data-size=l][data-purpose=label][data-text-mode=accent]{
818
+ font-family:var(--link-label-l-font-family, SB Sans Interface);
819
+ font-weight:var(--link-label-l-font-weight, Semibold);
820
+ line-height:var(--link-label-l-line-height, 20px);
821
+ font-size:var(--link-label-l-font-size, 14px);
822
+ letter-spacing:var(--link-label-l-letter-spacing, 0px);
823
+ paragraph-spacing:var(--link-label-l-paragraph-spacing, 7.7px);
824
+ -webkit-text-decoration:var(--link-label-l-text-decoration, underline);
825
+ text-decoration:var(--link-label-l-text-decoration, underline);
826
+ }
827
+ .link[data-size=l][data-purpose=label][data-text-mode=on-accent]{
828
+ font-family:var(--link-label-l-font-family, SB Sans Interface);
829
+ font-weight:var(--link-label-l-font-weight, Semibold);
830
+ line-height:var(--link-label-l-line-height, 20px);
831
+ font-size:var(--link-label-l-font-size, 14px);
832
+ letter-spacing:var(--link-label-l-letter-spacing, 0px);
833
+ paragraph-spacing:var(--link-label-l-paragraph-spacing, 7.7px);
834
+ -webkit-text-decoration:var(--link-label-l-text-decoration, underline);
835
+ text-decoration:var(--link-label-l-text-decoration, underline);
836
+ }
837
+ .link[data-size=l][data-purpose=body][data-text-mode=default]{
502
838
  font-family:var(--sans-body-l-font-family, SB Sans Interface);
503
839
  font-weight:var(--sans-body-l-font-weight, Regular);
504
840
  line-height:var(--sans-body-l-line-height, 24px);
@@ -506,7 +842,7 @@
506
842
  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
507
843
  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
508
844
  }
509
- .link[data-size=l][data-text-mode=accent]{
845
+ .link[data-size=l][data-purpose=body][data-text-mode=accent]{
510
846
  font-family:var(--link-body-l-font-family, SB Sans Interface);
511
847
  font-weight:var(--link-body-l-font-weight, Regular);
512
848
  line-height:var(--link-body-l-line-height, 24px);
@@ -516,7 +852,7 @@
516
852
  -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
517
853
  text-decoration:var(--link-body-l-text-decoration, underline);
518
854
  }
519
- .link[data-size=l][data-text-mode=on-accent]{
855
+ .link[data-size=l][data-purpose=body][data-text-mode=on-accent]{
520
856
  font-family:var(--link-body-l-font-family, SB Sans Interface);
521
857
  font-weight:var(--link-body-l-font-weight, Regular);
522
858
  line-height:var(--link-body-l-line-height, 24px);
package/dist/esm/components/types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { ComponentPropsWithoutRef, ElementType } from 'react';
2
2
  import { TruncateStringProps } from '@snack-uikit/truncate-string';
3
3
  import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
4
- import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
4
+ import { APPEARANCE, PURPOSE, SIZE, TEXT_MODE } from './constants';
5
5
  export type Appearance = ValueOf<typeof APPEARANCE>;
6
6
  export type Size = ValueOf<typeof SIZE>;
7
+ export type Purpose = ValueOf<typeof PURPOSE>;
7
8
  export type TextMode = ValueOf<typeof TEXT_MODE>;
8
9
  export type BaseProps = WithSupportProps<{
9
10
  /** Текст ссылки */
@@ -12,6 +13,10 @@ export type BaseProps = WithSupportProps<{
12
13
  * @default 's'
13
14
  */
14
15
  size?: Size;
16
+ /** Роль
17
+ * @default 'body'
18
+ */
19
+ purpose?: Purpose;
15
20
  /** Стилизует ссылку для размещения на цветном фоне
16
21
  * @default 'primary'
17
22
  */
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Link",
7
- "version": "0.16.5",
7
+ "version": "0.16.6-preview-f475624a.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -40,5 +40,5 @@
40
40
  "@snack-uikit/utils": "3.8.1",
41
41
  "classnames": "2.5.1"
42
42
  },
43
- "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
43
+ "gitHead": "91074db89ad1da846bacfe271c2c6003012ae718"
44
44
  }
package/src/components/Link.tsx CHANGED
@@ -4,7 +4,7 @@ import { ElementType } from 'react';
4
4
  import { TruncateString } from '@snack-uikit/truncate-string';
5
5
  import { extractSupportProps } from '@snack-uikit/utils';
6
6
 
7
- import { APPEARANCE, SIZE, TARGET, TEXT_MODE } from './constants';
7
+ import { APPEARANCE, PURPOSE, SIZE, TARGET, TEXT_MODE } from './constants';
8
8
  import styles from './styles.module.scss';
9
9
  import { LinkProps } from './types';
10
10
 
@@ -14,6 +14,7 @@ export function Link<T extends ElementType = 'a'>({
14
14
  className,
15
15
  textMode = TEXT_MODE.Default,
16
16
  size = SIZE.S,
17
+ purpose = PURPOSE.Body,
17
18
  appearance = APPEARANCE.Primary,
18
19
  insideText = false,
19
20
  truncateVariant,
@@ -42,6 +43,7 @@ export function Link<T extends ElementType = 'a'>({
42
43
  className={cn(styles.link, className)}
43
44
  {...fallbackProps}
44
45
  data-size={size}
46
+ data-purpose={purpose}
45
47
  data-text-mode={textMode}
46
48
  data-appearance={appearance}
47
49
  data-inside-text={insideText || undefined}
package/src/components/constants.ts CHANGED
@@ -17,6 +17,14 @@ export const SIZE = {
17
17
  L: 'l',
18
18
  } as const;
19
19
 
20
+ export const PURPOSE = {
21
+ Display: 'display',
22
+ Headline: 'headline',
23
+ Title: 'title',
24
+ Label: 'label',
25
+ Body: 'body',
26
+ } as const;
27
+
20
28
  export const TARGET = {
21
29
  Self: '_self',
22
30
  Blank: '_blank',
package/src/components/styles.module.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 's', 'm', 'l';
5
+ $purposes: 'display', 'headline', 'title', 'label', 'body';
5
6
  $text-modes: 'default', 'accent', 'on-accent';
6
7
  $appearances: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
7
8
  $icon-sizes: (
@@ -86,14 +87,18 @@ $icon-sizes: (
86
87
 
87
88
  @each $size in $sizes {
88
89
  &[data-size='#{$size}'] {
89
- @each $text-mode in $text-modes {
90
- &[data-text-mode='#{$text-mode}'] {
91
- @if $text-mode == 'default' {
92
- @include styles-tokens-link.composite-var(styles-tokens-link.$theme-variables, 'sans', 'body', $size);
93
- }
90
+ @each $purpose in $purposes {
91
+ &[data-purpose='#{$purpose}'] {
92
+ @each $text-mode in $text-modes {
93
+ &[data-text-mode='#{$text-mode}'] {
94
+ @if $text-mode == 'default' {
95
+ @include styles-tokens-link.composite-var(styles-tokens-link.$theme-variables, 'sans', $purpose, $size);
96
+ }
94
97
 
95
98
  @else {
96
- @include styles-tokens-link.composite-var(styles-tokens-link.$theme-variables, 'link', 'body', $size);
99
+ @include styles-tokens-link.composite-var(styles-tokens-link.$theme-variables, 'link', $purpose, $size);
100
+ }
101
+ }
97
102
  }
98
103
  }
99
104
  }
package/src/components/types.ts CHANGED
@@ -3,12 +3,14 @@ import { ComponentPropsWithoutRef, ElementType } from 'react';
3
3
  import { TruncateStringProps } from '@snack-uikit/truncate-string';
4
4
  import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
5
5
 
6
- import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
6
+ import { APPEARANCE, PURPOSE, SIZE, TEXT_MODE } from './constants';
7
7
 
8
8
  export type Appearance = ValueOf<typeof APPEARANCE>;
9
9
 
10
10
  export type Size = ValueOf<typeof SIZE>;
11
11
 
12
+ export type Purpose = ValueOf<typeof PURPOSE>;
13
+
12
14
  export type TextMode = ValueOf<typeof TEXT_MODE>;
13
15
 
14
16
  export type BaseProps = WithSupportProps<{
@@ -18,6 +20,10 @@ export type BaseProps = WithSupportProps<{
18
20
  * @default 's'
19
21
  */
20
22
  size?: Size;
23
+ /** Роль
24
+ * @default 'body'
25
+ */
26
+ purpose?: Purpose;
21
27
  /** Стилизует ссылку для размещения на цветном фоне
22
28
  * @default 'primary'
23
29
  */