@sproutsocial/racine 31.6.0 → 31.7.1
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.
- package/CHANGELOG.md +76 -0
- package/dist/components.css +676 -37
- package/package.json +40 -40
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,81 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 31.7.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [82bad75]
|
|
8
|
+
- @sproutsocial/seeds-react-narrative-kit@0.5.1
|
|
9
|
+
|
|
10
|
+
## 31.7.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- 65b5879: Complete the Tailwind migration of `Text` by converting the seven typographic
|
|
15
|
+
sub-components (`Text.Headline`, `Text.SubHeadline`, `Text.SmallSubHeadline`,
|
|
16
|
+
`Text.Byline`, `Text.SmallByline`, `Text.BodyCopy`, `Text.SmallBodyCopy`) from
|
|
17
|
+
`styled(Container)` styled-components to the Tailwind path.
|
|
18
|
+
|
|
19
|
+
Each sub-component now renders the base hybrid `Text` with a Seeds variant class
|
|
20
|
+
that maps the original color, weight, and typography size to CSS custom
|
|
21
|
+
properties. The variant classes are also usable directly on any element, e.g.:
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
<p className="seeds-text seeds-text-body">Some body text</p>
|
|
25
|
+
<h2 className="seeds-text seeds-text-headline">Some headline text</h2>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
New classes: `seeds-text-headline`, `seeds-text-subheadline`,
|
|
29
|
+
`seeds-text-small-subheadline`, `seeds-text-byline`, `seeds-text-small-byline`,
|
|
30
|
+
`seeds-text-body`, `seeds-text-small-body`. The public `Text.*` API and the
|
|
31
|
+
`TypeTextComponent` interface are unchanged.
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- Updated dependencies [b7b2ed3]
|
|
36
|
+
- Updated dependencies [c1a5071]
|
|
37
|
+
- Updated dependencies [65b5879]
|
|
38
|
+
- Updated dependencies [0e113bc]
|
|
39
|
+
- Updated dependencies [9a2dada]
|
|
40
|
+
- @sproutsocial/seeds-react-drawer@2.2.9
|
|
41
|
+
- @sproutsocial/seeds-react-loader@1.0.24
|
|
42
|
+
- @sproutsocial/seeds-react-text@1.5.0
|
|
43
|
+
- @sproutsocial/seeds-react-content-header@0.2.21
|
|
44
|
+
- @sproutsocial/seeds-react-progress@0.2.9
|
|
45
|
+
- @sproutsocial/seeds-react-token@1.5.8
|
|
46
|
+
- @sproutsocial/seeds-react-select@1.1.42
|
|
47
|
+
- @sproutsocial/seeds-react-spot-illustration@1.2.4
|
|
48
|
+
- @sproutsocial/seeds-react-collapsible@2.0.1
|
|
49
|
+
- @sproutsocial/seeds-react-narrative-kit@0.5.0
|
|
50
|
+
- @sproutsocial/seeds-react-panel@1.0.2
|
|
51
|
+
- @sproutsocial/seeds-react-peek-in@0.3.1
|
|
52
|
+
- @sproutsocial/seeds-react-content-block@0.5.16
|
|
53
|
+
- @sproutsocial/seeds-react-list@0.3.27
|
|
54
|
+
- @sproutsocial/seeds-react-loader-button@1.0.47
|
|
55
|
+
- @sproutsocial/seeds-react-avatar@1.1.18
|
|
56
|
+
- @sproutsocial/seeds-react-chart-legend@1.0.42
|
|
57
|
+
- @sproutsocial/seeds-react-checkbox@1.3.43
|
|
58
|
+
- @sproutsocial/seeds-react-data-table@2.6.24
|
|
59
|
+
- @sproutsocial/seeds-react-duration@1.0.25
|
|
60
|
+
- @sproutsocial/seeds-react-empty-state@1.0.24
|
|
61
|
+
- @sproutsocial/seeds-react-fieldset@1.0.24
|
|
62
|
+
- @sproutsocial/seeds-react-form-field@1.1.18
|
|
63
|
+
- @sproutsocial/seeds-react-input@1.5.28
|
|
64
|
+
- @sproutsocial/seeds-react-keyboard-key@1.0.24
|
|
65
|
+
- @sproutsocial/seeds-react-label@1.0.24
|
|
66
|
+
- @sproutsocial/seeds-react-link@1.1.14
|
|
67
|
+
- @sproutsocial/seeds-react-modal@2.5.24
|
|
68
|
+
- @sproutsocial/seeds-react-numeral@1.0.49
|
|
69
|
+
- @sproutsocial/seeds-react-pagination@0.1.22
|
|
70
|
+
- @sproutsocial/seeds-react-radio@1.3.24
|
|
71
|
+
- @sproutsocial/seeds-react-segmented-control@1.1.23
|
|
72
|
+
- @sproutsocial/seeds-react-table@1.0.43
|
|
73
|
+
- @sproutsocial/seeds-react-toast@1.0.43
|
|
74
|
+
- @sproutsocial/seeds-react-accordion@0.4.49
|
|
75
|
+
- @sproutsocial/seeds-react-token-input@1.4.50
|
|
76
|
+
- @sproutsocial/seeds-react-message@1.0.50
|
|
77
|
+
- @sproutsocial/seeds-react-breadcrumb@1.1.8
|
|
78
|
+
|
|
3
79
|
## 31.6.0
|
|
4
80
|
|
|
5
81
|
### Minor Changes
|
package/dist/components.css
CHANGED
|
@@ -487,6 +487,51 @@
|
|
|
487
487
|
}
|
|
488
488
|
|
|
489
489
|
} /* end @layer components */
|
|
490
|
+
/* --- seeds-react-collapsible --- */
|
|
491
|
+
/**
|
|
492
|
+
* Seeds Collapsible component classes
|
|
493
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
494
|
+
*
|
|
495
|
+
* Open/closed state is driven by Radix's data-state attribute on the panel.
|
|
496
|
+
*
|
|
497
|
+
* Usage:
|
|
498
|
+
* <div class="seeds-collapsible-content" data-state="open">…</div>
|
|
499
|
+
*/
|
|
500
|
+
|
|
501
|
+
/* @keyframes are not subject to cascade layers; keep them outside @layer so
|
|
502
|
+
they stay resolvable by name from the layered animation rules below. */
|
|
503
|
+
@keyframes collapsibleSlideDown {
|
|
504
|
+
from {
|
|
505
|
+
height: 0;
|
|
506
|
+
}
|
|
507
|
+
to {
|
|
508
|
+
height: var(--radix-collapsible-content-height);
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
@keyframes collapsibleSlideUp {
|
|
513
|
+
from {
|
|
514
|
+
height: var(--radix-collapsible-content-height);
|
|
515
|
+
}
|
|
516
|
+
to {
|
|
517
|
+
height: 0;
|
|
518
|
+
}
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
@layer components {
|
|
522
|
+
.seeds-collapsible-content {
|
|
523
|
+
overflow: hidden;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.seeds-collapsible-content[data-state="open"] {
|
|
527
|
+
animation: collapsibleSlideDown 300ms ease-in-out;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
.seeds-collapsible-content[data-state="closed"] {
|
|
531
|
+
animation: collapsibleSlideUp 300ms ease-in-out;
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
|
|
490
535
|
/* --- seeds-react-content-block --- */
|
|
491
536
|
/**
|
|
492
537
|
* Seeds ContentBlock component classes
|
|
@@ -846,6 +891,42 @@
|
|
|
846
891
|
.seeds-drawer-popup[data-nested-drawer-open][data-nested-drawer-swiping] > * {
|
|
847
892
|
opacity: 1;
|
|
848
893
|
}
|
|
894
|
+
|
|
895
|
+
/* Header ------------------------------------------------------------------ */
|
|
896
|
+
|
|
897
|
+
/* Port of the styled-components Box header (DrawerShared.tsx): flex row with
|
|
898
|
+
the title and close button, fixed at the top of the popup. */
|
|
899
|
+
.seeds-drawer-header {
|
|
900
|
+
display: flex;
|
|
901
|
+
flex: 0 0 auto;
|
|
902
|
+
justify-content: space-between;
|
|
903
|
+
align-items: center;
|
|
904
|
+
padding-top: var(--space-400);
|
|
905
|
+
padding-left: var(--space-450);
|
|
906
|
+
padding-right: var(--space-450);
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
/* Default title typography. `margin: 0` neutralises the user-agent <h2>
|
|
910
|
+
margin that the styled path's <Text> reset for us, avoiding a layout shift
|
|
911
|
+
between the Tailwind and styled headers. */
|
|
912
|
+
.seeds-drawer-header-title {
|
|
913
|
+
margin: 0;
|
|
914
|
+
font-size: var(--font-size-400);
|
|
915
|
+
line-height: var(--line-height-400);
|
|
916
|
+
font-weight: var(--font-weight-semibold);
|
|
917
|
+
color: var(--color-text-headline);
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
/* Content ----------------------------------------------------------------- */
|
|
921
|
+
|
|
922
|
+
/* Port of the styled-components Content (styles.ts) plus the styled-system
|
|
923
|
+
props it was rendered with (height/padding/color). */
|
|
924
|
+
.seeds-drawer-content {
|
|
925
|
+
height: 100%;
|
|
926
|
+
padding: var(--space-450);
|
|
927
|
+
overflow-y: auto;
|
|
928
|
+
color: var(--color-text-body);
|
|
929
|
+
}
|
|
849
930
|
}
|
|
850
931
|
|
|
851
932
|
/* --- seeds-react-link --- */
|
|
@@ -917,19 +998,23 @@
|
|
|
917
998
|
*
|
|
918
999
|
* Usage:
|
|
919
1000
|
* <div class="seeds-loader seeds-loader-delay">
|
|
1001
|
+
* <span class="seeds-loader-spinner" aria-hidden="true"></span>
|
|
920
1002
|
* <span class="seeds-loader-visually-hidden">Loading</span>
|
|
921
1003
|
* </div>
|
|
922
1004
|
* <div class="seeds-loader seeds-loader-sm">...</div> (small)
|
|
923
1005
|
* <div class="seeds-loader">...</div> (no delay)
|
|
1006
|
+
*
|
|
1007
|
+
* The visual is a thin rotating arc (--color-neutral-0) over a faint arc ring
|
|
1008
|
+
* (--color-neutral-600), both clipped to the bottom half by the spinner span.
|
|
924
1009
|
*/
|
|
925
1010
|
|
|
926
1011
|
@layer components {
|
|
927
1012
|
@keyframes seeds-loader-spin {
|
|
928
1013
|
from {
|
|
929
|
-
transform:
|
|
1014
|
+
transform: rotate(0deg);
|
|
930
1015
|
}
|
|
931
1016
|
to {
|
|
932
|
-
transform:
|
|
1017
|
+
transform: rotate(360deg);
|
|
933
1018
|
}
|
|
934
1019
|
}
|
|
935
1020
|
|
|
@@ -945,70 +1030,84 @@
|
|
|
945
1030
|
}
|
|
946
1031
|
}
|
|
947
1032
|
|
|
948
|
-
/* Base (large / 40px) */
|
|
1033
|
+
/* Base (large / 40px) — slow outer rotation hosting the spinner */
|
|
949
1034
|
.seeds-loader {
|
|
950
1035
|
position: relative;
|
|
951
1036
|
margin: 0 auto;
|
|
952
1037
|
padding: 0;
|
|
953
|
-
overflow: hidden;
|
|
954
|
-
border-radius: 100%;
|
|
955
1038
|
width: 40px;
|
|
956
1039
|
height: 40px;
|
|
957
|
-
|
|
958
|
-
0 0 0 2px var(--color-neutral-600),
|
|
959
|
-
inset 0 0 0 6px var(--color-neutral-600);
|
|
1040
|
+
animation: seeds-loader-spin 3s infinite linear;
|
|
960
1041
|
}
|
|
961
1042
|
|
|
962
|
-
|
|
1043
|
+
/* Visual spinner — clipped to bottom half, faster eased rotation */
|
|
1044
|
+
.seeds-loader-spinner {
|
|
963
1045
|
position: absolute;
|
|
964
|
-
|
|
965
|
-
|
|
1046
|
+
inset: 0;
|
|
1047
|
+
margin: auto;
|
|
1048
|
+
width: 40px;
|
|
1049
|
+
height: 40px;
|
|
1050
|
+
clip: rect(20px, 40px, 40px, 0);
|
|
1051
|
+
animation: seeds-loader-spin 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
/* Bright arc */
|
|
1055
|
+
.seeds-loader-spinner::before {
|
|
1056
|
+
content: "";
|
|
1057
|
+
position: absolute;
|
|
1058
|
+
inset: 0;
|
|
1059
|
+
margin: auto;
|
|
966
1060
|
width: 40px;
|
|
967
1061
|
height: 40px;
|
|
968
1062
|
box-sizing: border-box;
|
|
969
|
-
border
|
|
970
|
-
|
|
971
|
-
border-style: solid;
|
|
1063
|
+
border: 4px solid transparent;
|
|
1064
|
+
border-top-color: var(--color-neutral-0);
|
|
972
1065
|
border-radius: 100%;
|
|
973
|
-
|
|
974
|
-
transition: opacity 250ms;
|
|
975
|
-
border-color: var(--color-neutral-0) var(--color-neutral-0)
|
|
976
|
-
var(--color-neutral-600) var(--color-neutral-600);
|
|
977
|
-
animation: seeds-loader-spin 2.25s infinite linear;
|
|
1066
|
+
animation: seeds-loader-spin 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
|
|
978
1067
|
}
|
|
979
1068
|
|
|
980
|
-
|
|
981
|
-
|
|
1069
|
+
/* Faint arc ring (static) — clipped to bottom half alongside the bright arc */
|
|
1070
|
+
.seeds-loader-spinner::after {
|
|
1071
|
+
content: "";
|
|
1072
|
+
position: absolute;
|
|
1073
|
+
inset: 0;
|
|
1074
|
+
margin: auto;
|
|
1075
|
+
width: 40px;
|
|
1076
|
+
height: 40px;
|
|
1077
|
+
box-sizing: border-box;
|
|
1078
|
+
border: 4px solid var(--color-neutral-600);
|
|
1079
|
+
border-radius: 100%;
|
|
982
1080
|
}
|
|
983
1081
|
|
|
984
|
-
/*
|
|
985
|
-
|
|
986
|
-
|
|
1082
|
+
/* When animations are disabled, the faint arc still renders so the loader
|
|
1083
|
+
is never invisible. */
|
|
1084
|
+
.no-cssanimations .seeds-loader-spinner::after {
|
|
1085
|
+
border-color: var(--color-neutral-600);
|
|
987
1086
|
}
|
|
988
1087
|
|
|
989
|
-
|
|
1088
|
+
/* Delay variant — fades the whole spinner in alongside the outer rotation */
|
|
1089
|
+
.seeds-loader-delay {
|
|
990
1090
|
animation:
|
|
991
|
-
seeds-loader-spin
|
|
1091
|
+
seeds-loader-spin 3s infinite linear,
|
|
992
1092
|
seeds-loader-delay-anim 2s 1;
|
|
993
1093
|
}
|
|
994
1094
|
|
|
995
|
-
/* Small (20px) */
|
|
996
|
-
.seeds-loader-sm
|
|
1095
|
+
/* Small (20px) — scale size, border width, and the clip rect together */
|
|
1096
|
+
.seeds-loader-sm,
|
|
1097
|
+
.seeds-loader-sm .seeds-loader-spinner,
|
|
1098
|
+
.seeds-loader-sm .seeds-loader-spinner::before,
|
|
1099
|
+
.seeds-loader-sm .seeds-loader-spinner::after {
|
|
997
1100
|
width: 20px;
|
|
998
1101
|
height: 20px;
|
|
999
|
-
box-shadow:
|
|
1000
|
-
0 0 0 2px var(--color-neutral-600),
|
|
1001
|
-
inset 0 0 0 4px var(--color-neutral-600);
|
|
1002
1102
|
}
|
|
1003
1103
|
|
|
1004
|
-
.seeds-loader-sm
|
|
1005
|
-
|
|
1006
|
-
height: 20px;
|
|
1007
|
-
border-width: 2px;
|
|
1104
|
+
.seeds-loader-sm .seeds-loader-spinner {
|
|
1105
|
+
clip: rect(10px, 20px, 20px, 0);
|
|
1008
1106
|
}
|
|
1009
1107
|
|
|
1010
|
-
.
|
|
1011
|
-
|
|
1108
|
+
.seeds-loader-sm .seeds-loader-spinner::before,
|
|
1109
|
+
.seeds-loader-sm .seeds-loader-spinner::after {
|
|
1110
|
+
border-width: 2px;
|
|
1012
1111
|
}
|
|
1013
1112
|
|
|
1014
1113
|
/* Visually-hidden accessibility text */
|
|
@@ -1328,6 +1427,64 @@
|
|
|
1328
1427
|
|
|
1329
1428
|
}
|
|
1330
1429
|
|
|
1430
|
+
/* --- seeds-react-narrative-kit --- */
|
|
1431
|
+
/**
|
|
1432
|
+
* Seeds NarrativeAttribution component classes.
|
|
1433
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
1434
|
+
*
|
|
1435
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
1436
|
+
* CSS variable definitions and dark mode support.
|
|
1437
|
+
*
|
|
1438
|
+
* Usage:
|
|
1439
|
+
* <div class="seeds-narrative-attribution">
|
|
1440
|
+
* <img class="seeds-narrative-attribution-avatar" />
|
|
1441
|
+
* <div class="seeds-narrative-attribution-social-icon">...</div>
|
|
1442
|
+
* <span class="seeds-narrative-attribution-user-name">...</span>
|
|
1443
|
+
* </div>
|
|
1444
|
+
*/
|
|
1445
|
+
|
|
1446
|
+
@layer components {
|
|
1447
|
+
|
|
1448
|
+
/* Main container — horizontal layout with avatar, social icon, and user name. */
|
|
1449
|
+
.seeds-narrative-attribution {
|
|
1450
|
+
box-sizing: border-box;
|
|
1451
|
+
display: flex;
|
|
1452
|
+
align-items: center;
|
|
1453
|
+
gap: var(--space-300); /* 8px */;
|
|
1454
|
+
font-family: var(--font-family);
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
/* Circular avatar image — fixed size with rounded corners. */
|
|
1458
|
+
.seeds-narrative-attribution-avatar {
|
|
1459
|
+
width: var(--space-450); /* 24px */
|
|
1460
|
+
height: var(--space-450); /* 24px */
|
|
1461
|
+
border-radius: var(--radius-circular); /* 50% */
|
|
1462
|
+
object-fit: cover;
|
|
1463
|
+
flex-shrink: 0;
|
|
1464
|
+
}
|
|
1465
|
+
|
|
1466
|
+
/* Social network icon container — flexible sizing for partner logos. */
|
|
1467
|
+
.seeds-narrative-attribution-social-icon {
|
|
1468
|
+
flex-shrink: 0;
|
|
1469
|
+
display: flex;
|
|
1470
|
+
align-items: center;
|
|
1471
|
+
justify-content: center;
|
|
1472
|
+
}
|
|
1473
|
+
|
|
1474
|
+
/* User name text — bold headline text with ellipsis overflow. */
|
|
1475
|
+
.seeds-narrative-attribution-user-name {
|
|
1476
|
+
overflow: hidden;
|
|
1477
|
+
color: var(--color-text-headline);
|
|
1478
|
+
text-overflow: ellipsis;
|
|
1479
|
+
font-family: var(--font-family);
|
|
1480
|
+
font-size: var(--text-base-font-size, 14px);
|
|
1481
|
+
font-style: normal;
|
|
1482
|
+
font-weight: var(--font-weight-bold, 700);
|
|
1483
|
+
line-height: var(--text-base-line-height, 24px);
|
|
1484
|
+
}
|
|
1485
|
+
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1331
1488
|
/* --- seeds-react-narrative-kit --- */
|
|
1332
1489
|
/**
|
|
1333
1490
|
* Seeds NarrativeContainer component classes.
|
|
@@ -1768,6 +1925,87 @@
|
|
|
1768
1925
|
|
|
1769
1926
|
}
|
|
1770
1927
|
|
|
1928
|
+
/* --- seeds-react-narrative-kit --- */
|
|
1929
|
+
/**
|
|
1930
|
+
* Seeds NarrativeSocialMediaCard component classes.
|
|
1931
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
1932
|
+
*
|
|
1933
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
1934
|
+
* CSS variable definitions and dark mode support.
|
|
1935
|
+
*
|
|
1936
|
+
* Usage:
|
|
1937
|
+
* <div class="seeds-narrative-social-media-card">
|
|
1938
|
+
* <div class="seeds-narrative-social-media-card-header">...</div>
|
|
1939
|
+
* <div class="seeds-narrative-social-media-card-content">...</div>
|
|
1940
|
+
* <div class="seeds-narrative-social-media-card-footer">...</div>
|
|
1941
|
+
* </div>
|
|
1942
|
+
*/
|
|
1943
|
+
|
|
1944
|
+
@layer components {
|
|
1945
|
+
|
|
1946
|
+
/* Main card container — gray background with rounded corners and padding.
|
|
1947
|
+
Uses Seeds tokens for spacing, colors, and radius to match the design system. */
|
|
1948
|
+
.seeds-narrative-social-media-card {
|
|
1949
|
+
box-sizing: border-box;
|
|
1950
|
+
display: flex;
|
|
1951
|
+
flex-direction: column;
|
|
1952
|
+
align-items: flex-start;
|
|
1953
|
+
max-width: 320px;
|
|
1954
|
+
padding: var(--space-450); /* 24px */
|
|
1955
|
+
border-radius: var(--radius-500); /* 6px */
|
|
1956
|
+
background-color: var(--color-app-bg-base);
|
|
1957
|
+
font-family: var(--font-family);
|
|
1958
|
+
color: var(--color-text-body);
|
|
1959
|
+
}
|
|
1960
|
+
|
|
1961
|
+
/* No background — transparent background for cards that blend seamlessly with the page. */
|
|
1962
|
+
.seeds-narrative-social-media-card--no-background {
|
|
1963
|
+
background-color: transparent;
|
|
1964
|
+
}
|
|
1965
|
+
|
|
1966
|
+
/* Main content area — standard body text styling. */
|
|
1967
|
+
.seeds-narrative-social-media-card-content {
|
|
1968
|
+
flex: 1;
|
|
1969
|
+
margin-top: var(--space-400); /* 16px */
|
|
1970
|
+
font-family: var(--font-family);
|
|
1971
|
+
font-size: 14px;
|
|
1972
|
+
font-style: normal;
|
|
1973
|
+
font-weight: 400;
|
|
1974
|
+
line-height: 24px;
|
|
1975
|
+
color: var(--color-text-body);
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1978
|
+
/* Footer section — horizontal layout for stats with equal spacing. */
|
|
1979
|
+
.seeds-narrative-social-media-card-footer {
|
|
1980
|
+
display: flex;
|
|
1981
|
+
align-items: center;
|
|
1982
|
+
gap: var(--space-400); /* 16px */
|
|
1983
|
+
margin-top: var(--space-400); /* 16px */;
|
|
1984
|
+
}
|
|
1985
|
+
|
|
1986
|
+
/* Hide footer when empty (no metadata items). */
|
|
1987
|
+
.seeds-narrative-social-media-card-footer:empty {
|
|
1988
|
+
display: none;
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
/* Individual stat container — icon + value in horizontal layout. */
|
|
1992
|
+
.seeds-narrative-social-media-card-stat {
|
|
1993
|
+
display: flex;
|
|
1994
|
+
align-items: center;
|
|
1995
|
+
gap: var(--space-200); /* 4px */
|
|
1996
|
+
}
|
|
1997
|
+
|
|
1998
|
+
/* Stat value text — monospace font for numeric values. */
|
|
1999
|
+
.seeds-narrative-social-media-card-stat-value {
|
|
2000
|
+
font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace); font-size: 14px;
|
|
2001
|
+
font-style: normal;
|
|
2002
|
+
font-weight: 400;
|
|
2003
|
+
line-height: 24px;
|
|
2004
|
+
color: var(--color-text-body);
|
|
2005
|
+
}
|
|
2006
|
+
|
|
2007
|
+
}
|
|
2008
|
+
|
|
1771
2009
|
/* --- seeds-react-narrative-kit --- */
|
|
1772
2010
|
/**
|
|
1773
2011
|
* Seeds NarrativeSummary component classes.
|
|
@@ -1966,6 +2204,197 @@
|
|
|
1966
2204
|
|
|
1967
2205
|
}
|
|
1968
2206
|
|
|
2207
|
+
/* --- seeds-react-progress --- */
|
|
2208
|
+
/**
|
|
2209
|
+
* Seeds Progress component classes
|
|
2210
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
2211
|
+
*
|
|
2212
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
2213
|
+
* CSS variable definitions and dark mode support.
|
|
2214
|
+
*
|
|
2215
|
+
* Usage:
|
|
2216
|
+
* <div class="Progress seeds-progress"><div class="seeds-progress-indicator" /></div>
|
|
2217
|
+
*/
|
|
2218
|
+
|
|
2219
|
+
@layer components {
|
|
2220
|
+
.seeds-progress {
|
|
2221
|
+
position: relative;
|
|
2222
|
+
overflow: hidden;
|
|
2223
|
+
width: 100%;
|
|
2224
|
+
height: 8px;
|
|
2225
|
+
border-radius: var(--radius-outer);
|
|
2226
|
+
background-color: var(--color-container-border-base);
|
|
2227
|
+
}
|
|
2228
|
+
|
|
2229
|
+
.seeds-progress-indicator {
|
|
2230
|
+
height: 100%;
|
|
2231
|
+
width: 100%;
|
|
2232
|
+
border-radius: var(--radius-outer);
|
|
2233
|
+
background-color: var(--color-icon-base);
|
|
2234
|
+
transition: transform 150ms ease;
|
|
2235
|
+
}
|
|
2236
|
+
}
|
|
2237
|
+
|
|
2238
|
+
/* --- seeds-react-select --- */
|
|
2239
|
+
/**
|
|
2240
|
+
* Seeds Select component classes
|
|
2241
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
2242
|
+
*
|
|
2243
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
2244
|
+
* CSS variable definitions and dark mode support.
|
|
2245
|
+
*
|
|
2246
|
+
* Usage:
|
|
2247
|
+
* <div class="seeds-select seeds-select-default">
|
|
2248
|
+
* <select class="seeds-select-input">…</select>
|
|
2249
|
+
* <span class="seeds-select-arrow seeds-select-arrow-default">…</span>
|
|
2250
|
+
* </div>
|
|
2251
|
+
*/
|
|
2252
|
+
|
|
2253
|
+
@layer components {
|
|
2254
|
+
.seeds-select {
|
|
2255
|
+
position: relative;
|
|
2256
|
+
box-sizing: border-box;
|
|
2257
|
+
}
|
|
2258
|
+
|
|
2259
|
+
.seeds-select .seeds-select-input {
|
|
2260
|
+
box-sizing: border-box;
|
|
2261
|
+
width: 100%;
|
|
2262
|
+
border: 1px solid var(--color-form-border-base);
|
|
2263
|
+
border-radius: var(--radius-500);
|
|
2264
|
+
background-color: var(--color-form-bg-base);
|
|
2265
|
+
color: var(--color-text-body);
|
|
2266
|
+
cursor: pointer;
|
|
2267
|
+
outline: none;
|
|
2268
|
+
appearance: none;
|
|
2269
|
+
transition:
|
|
2270
|
+
border-color var(--duration-fast) var(--ease-ease_in),
|
|
2271
|
+
box-shadow var(--duration-fast) var(--ease-ease_in);
|
|
2272
|
+
font-family: var(--font-family);
|
|
2273
|
+
font-weight: var(--font-weight-normal);
|
|
2274
|
+
margin: 0;
|
|
2275
|
+
/* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
|
|
2276
|
+
visibility: visible;
|
|
2277
|
+
}
|
|
2278
|
+
|
|
2279
|
+
/* kill the dropdown arrow on IE 11 */
|
|
2280
|
+
.seeds-select .seeds-select-input::-ms-expand {
|
|
2281
|
+
display: none;
|
|
2282
|
+
}
|
|
2283
|
+
|
|
2284
|
+
.seeds-select .seeds-select-input:focus {
|
|
2285
|
+
box-shadow:
|
|
2286
|
+
0 0 0 1px var(--color-button-primary-bg-base),
|
|
2287
|
+
0 0px 0px 4px
|
|
2288
|
+
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
2289
|
+
outline: none;
|
|
2290
|
+
}
|
|
2291
|
+
|
|
2292
|
+
/* Fix for red ring when input is marked required in Firefox */
|
|
2293
|
+
.seeds-select
|
|
2294
|
+
.seeds-select-input:not(output):not(:focus):-moz-ui-invalid {
|
|
2295
|
+
box-shadow: none;
|
|
2296
|
+
}
|
|
2297
|
+
|
|
2298
|
+
/* size: default */
|
|
2299
|
+
.seeds-select-default .seeds-select-input {
|
|
2300
|
+
padding: var(--space-300) var(--space-500) var(--space-300) var(--space-300);
|
|
2301
|
+
font-size: var(--font-size-200);
|
|
2302
|
+
line-height: normal;
|
|
2303
|
+
}
|
|
2304
|
+
|
|
2305
|
+
/* size: large */
|
|
2306
|
+
.seeds-select-large .seeds-select-input {
|
|
2307
|
+
padding: var(--space-350) var(--space-600) var(--space-350) var(--space-400);
|
|
2308
|
+
font-size: var(--font-size-300);
|
|
2309
|
+
line-height: var(--line-height-300);
|
|
2310
|
+
}
|
|
2311
|
+
|
|
2312
|
+
/* size: small */
|
|
2313
|
+
.seeds-select-small .seeds-select-input {
|
|
2314
|
+
padding: var(--space-200) var(--space-500) var(--space-200) var(--space-200);
|
|
2315
|
+
font-size: var(--font-size-200);
|
|
2316
|
+
line-height: normal;
|
|
2317
|
+
}
|
|
2318
|
+
|
|
2319
|
+
.seeds-select-arrow {
|
|
2320
|
+
position: absolute;
|
|
2321
|
+
top: 50%;
|
|
2322
|
+
transform: translateY(-50%);
|
|
2323
|
+
color: var(--color-icon-base);
|
|
2324
|
+
pointer-events: none;
|
|
2325
|
+
}
|
|
2326
|
+
|
|
2327
|
+
.seeds-select-arrow-default,
|
|
2328
|
+
.seeds-select-arrow-small {
|
|
2329
|
+
right: var(--space-300);
|
|
2330
|
+
}
|
|
2331
|
+
|
|
2332
|
+
.seeds-select-arrow-large {
|
|
2333
|
+
right: var(--space-350);
|
|
2334
|
+
}
|
|
2335
|
+
|
|
2336
|
+
/* disabled */
|
|
2337
|
+
.seeds-select-disabled {
|
|
2338
|
+
opacity: 0.4;
|
|
2339
|
+
}
|
|
2340
|
+
|
|
2341
|
+
.seeds-select-disabled .seeds-select-input {
|
|
2342
|
+
cursor: not-allowed;
|
|
2343
|
+
}
|
|
2344
|
+
|
|
2345
|
+
/* invalid */
|
|
2346
|
+
.seeds-select-invalid .seeds-select-input {
|
|
2347
|
+
border-color: var(--color-form-border-error);
|
|
2348
|
+
}
|
|
2349
|
+
|
|
2350
|
+
.seeds-select-invalid .seeds-select-arrow {
|
|
2351
|
+
color: var(--color-icon-error);
|
|
2352
|
+
}
|
|
2353
|
+
}
|
|
2354
|
+
|
|
2355
|
+
/* --- seeds-react-spot-illustration --- */
|
|
2356
|
+
/**
|
|
2357
|
+
* Seeds SpotIllustration component classes
|
|
2358
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
2359
|
+
*
|
|
2360
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
2361
|
+
* CSS variable definitions and dark mode support.
|
|
2362
|
+
*
|
|
2363
|
+
* Usage:
|
|
2364
|
+
* <svg class="seeds-spot-illustration seeds-spot-illustration-red">…</svg>
|
|
2365
|
+
*/
|
|
2366
|
+
|
|
2367
|
+
@layer components {
|
|
2368
|
+
.seeds-spot-illustration {
|
|
2369
|
+
fill: var(--color-illustration-fill);
|
|
2370
|
+
color: var(--color-illustration-stroke);
|
|
2371
|
+
}
|
|
2372
|
+
|
|
2373
|
+
.seeds-spot-illustration-red {
|
|
2374
|
+
fill: var(--color-red-400);
|
|
2375
|
+
}
|
|
2376
|
+
|
|
2377
|
+
.seeds-spot-illustration-green {
|
|
2378
|
+
fill: var(--color-green-400);
|
|
2379
|
+
}
|
|
2380
|
+
|
|
2381
|
+
.seeds-spot-illustration-yellow {
|
|
2382
|
+
fill: var(--color-yellow-400);
|
|
2383
|
+
}
|
|
2384
|
+
|
|
2385
|
+
.seeds-spot-illustration-magenta {
|
|
2386
|
+
fill: var(--color-magenta-400);
|
|
2387
|
+
}
|
|
2388
|
+
|
|
2389
|
+
.seeds-spot-illustration-purple {
|
|
2390
|
+
fill: var(--color-purple-400);
|
|
2391
|
+
}
|
|
2392
|
+
|
|
2393
|
+
.seeds-spot-illustration-aqua {
|
|
2394
|
+
fill: var(--color-aqua-400);
|
|
2395
|
+
}
|
|
2396
|
+
}
|
|
2397
|
+
|
|
1969
2398
|
/* --- seeds-react-text --- */
|
|
1970
2399
|
/**
|
|
1971
2400
|
* Seeds Text component classes
|
|
@@ -2001,4 +2430,214 @@
|
|
|
2001
2430
|
word-break: break-word;
|
|
2002
2431
|
hyphens: auto;
|
|
2003
2432
|
}
|
|
2433
|
+
|
|
2434
|
+
.seeds-text-headline {
|
|
2435
|
+
color: var(--color-text-headline);
|
|
2436
|
+
font-weight: var(--font-weight-bold);
|
|
2437
|
+
font-size: var(--font-size-400);
|
|
2438
|
+
line-height: var(--line-height-400);
|
|
2439
|
+
}
|
|
2440
|
+
|
|
2441
|
+
.seeds-text-subheadline {
|
|
2442
|
+
color: var(--color-text-headline);
|
|
2443
|
+
font-weight: var(--font-weight-bold);
|
|
2444
|
+
font-size: var(--font-size-300);
|
|
2445
|
+
line-height: var(--line-height-300);
|
|
2446
|
+
}
|
|
2447
|
+
|
|
2448
|
+
.seeds-text-small-subheadline {
|
|
2449
|
+
color: var(--color-text-headline);
|
|
2450
|
+
font-weight: var(--font-weight-bold);
|
|
2451
|
+
font-size: var(--font-size-200);
|
|
2452
|
+
line-height: var(--line-height-200);
|
|
2453
|
+
}
|
|
2454
|
+
|
|
2455
|
+
.seeds-text-byline {
|
|
2456
|
+
color: var(--color-text-subtext);
|
|
2457
|
+
font-weight: var(--font-weight-normal);
|
|
2458
|
+
font-size: var(--font-size-200);
|
|
2459
|
+
line-height: var(--line-height-200);
|
|
2460
|
+
}
|
|
2461
|
+
|
|
2462
|
+
.seeds-text-small-byline {
|
|
2463
|
+
color: var(--color-text-subtext);
|
|
2464
|
+
font-weight: var(--font-weight-normal);
|
|
2465
|
+
font-size: var(--font-size-100);
|
|
2466
|
+
line-height: var(--line-height-100);
|
|
2467
|
+
}
|
|
2468
|
+
|
|
2469
|
+
.seeds-text-body {
|
|
2470
|
+
color: var(--color-text-body);
|
|
2471
|
+
font-weight: var(--font-weight-normal);
|
|
2472
|
+
font-size: var(--font-size-300);
|
|
2473
|
+
line-height: var(--line-height-300);
|
|
2474
|
+
}
|
|
2475
|
+
|
|
2476
|
+
.seeds-text-small-body {
|
|
2477
|
+
color: var(--color-text-body);
|
|
2478
|
+
font-weight: var(--font-weight-normal);
|
|
2479
|
+
font-size: var(--font-size-200);
|
|
2480
|
+
line-height: var(--line-height-200);
|
|
2481
|
+
}
|
|
2482
|
+
}
|
|
2483
|
+
/* --- seeds-react-token --- */
|
|
2484
|
+
/**
|
|
2485
|
+
* Seeds Token component classes
|
|
2486
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
2487
|
+
*
|
|
2488
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
2489
|
+
* CSS variable definitions and dark mode support.
|
|
2490
|
+
*
|
|
2491
|
+
* Usage:
|
|
2492
|
+
* <button class="seeds-token seeds-token-closeable">Token</button>
|
|
2493
|
+
*/
|
|
2494
|
+
|
|
2495
|
+
@layer components {
|
|
2496
|
+
.seeds-token {
|
|
2497
|
+
position: relative;
|
|
2498
|
+
display: inline-flex;
|
|
2499
|
+
align-items: center;
|
|
2500
|
+
margin: 0;
|
|
2501
|
+
outline: none;
|
|
2502
|
+
font-family: var(--font-family);
|
|
2503
|
+
font-size: var(--font-size-200);
|
|
2504
|
+
line-height: 13px;
|
|
2505
|
+
font-weight: var(--font-weight-normal);
|
|
2506
|
+
border: 1px solid var(--color-container-border-base);
|
|
2507
|
+
border-radius: var(--radius-500);
|
|
2508
|
+
color: var(--color-text-body);
|
|
2509
|
+
background: var(--color-container-bg-base);
|
|
2510
|
+
padding: var(--space-200) var(--space-300);
|
|
2511
|
+
transition: all var(--duration-fast) var(--ease-ease_inout);
|
|
2512
|
+
}
|
|
2513
|
+
|
|
2514
|
+
.seeds-token:focus {
|
|
2515
|
+
box-shadow:
|
|
2516
|
+
0 0 0 1px var(--color-button-primary-bg-base),
|
|
2517
|
+
0 0px 0px 4px
|
|
2518
|
+
color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
|
|
2519
|
+
outline: none;
|
|
2520
|
+
}
|
|
2521
|
+
|
|
2522
|
+
.seeds-token::-moz-focus-inner {
|
|
2523
|
+
border: 0;
|
|
2524
|
+
}
|
|
2525
|
+
|
|
2526
|
+
/* closeable / clickable */
|
|
2527
|
+
.seeds-token-closeable {
|
|
2528
|
+
cursor: pointer;
|
|
2529
|
+
}
|
|
2530
|
+
|
|
2531
|
+
.seeds-token-closeable:hover,
|
|
2532
|
+
.seeds-token-closeable:active {
|
|
2533
|
+
box-shadow: var(--shadow-low);
|
|
2534
|
+
border: 1px solid
|
|
2535
|
+
color-mix(in srgb, var(--color-container-border-base), black 20%);
|
|
2536
|
+
}
|
|
2537
|
+
|
|
2538
|
+
/* palette="blue" */
|
|
2539
|
+
.seeds-token-blue {
|
|
2540
|
+
background: var(--color-container-bg-decorative-blue);
|
|
2541
|
+
border: 1px solid var(--color-container-border-decorative-blue);
|
|
2542
|
+
}
|
|
2543
|
+
|
|
2544
|
+
.seeds-token-blue:hover,
|
|
2545
|
+
.seeds-token-blue:active {
|
|
2546
|
+
cursor: pointer;
|
|
2547
|
+
box-shadow: var(--shadow-low);
|
|
2548
|
+
border: 1px solid
|
|
2549
|
+
color-mix(in srgb, var(--color-container-border-decorative-blue), black 20%);
|
|
2550
|
+
}
|
|
2551
|
+
|
|
2552
|
+
/* disabled */
|
|
2553
|
+
.seeds-token-disabled {
|
|
2554
|
+
opacity: 0.4;
|
|
2555
|
+
cursor: not-allowed;
|
|
2556
|
+
}
|
|
2557
|
+
|
|
2558
|
+
.seeds-token-disabled:hover,
|
|
2559
|
+
.seeds-token-disabled:active {
|
|
2560
|
+
box-shadow: none;
|
|
2561
|
+
border: 1px solid var(--color-container-border-base);
|
|
2562
|
+
}
|
|
2563
|
+
|
|
2564
|
+
/* valid={false} */
|
|
2565
|
+
.seeds-token-invalid {
|
|
2566
|
+
color: var(--color-text-error);
|
|
2567
|
+
background: var(--color-container-bg-error);
|
|
2568
|
+
border: 1px solid var(--color-container-border-error);
|
|
2569
|
+
}
|
|
2570
|
+
|
|
2571
|
+
.seeds-token-invalid:hover {
|
|
2572
|
+
box-shadow: var(--shadow-low);
|
|
2573
|
+
border: 1px solid
|
|
2574
|
+
color-mix(in srgb, var(--color-container-border-error), black 20%);
|
|
2575
|
+
}
|
|
2576
|
+
|
|
2577
|
+
/* hasWarning */
|
|
2578
|
+
.seeds-token-warning {
|
|
2579
|
+
background: var(--color-container-bg-warning);
|
|
2580
|
+
border: 1px solid var(--color-container-border-warning);
|
|
2581
|
+
}
|
|
2582
|
+
|
|
2583
|
+
.seeds-token-warning:hover {
|
|
2584
|
+
box-shadow: var(--shadow-low);
|
|
2585
|
+
border: 1px solid
|
|
2586
|
+
color-mix(in srgb, var(--color-container-border-warning), black 20%);
|
|
2587
|
+
}
|
|
2588
|
+
|
|
2589
|
+
/* isGenerated (AI) */
|
|
2590
|
+
.seeds-token-generated {
|
|
2591
|
+
background: var(--color-container-bg-ai_generated);
|
|
2592
|
+
border: 1px solid var(--color-container-border-ai_generated);
|
|
2593
|
+
color: var(--color-text-ai_generated);
|
|
2594
|
+
}
|
|
2595
|
+
|
|
2596
|
+
.seeds-token-generated:hover {
|
|
2597
|
+
box-shadow: var(--shadow-low);
|
|
2598
|
+
border: 1px solid
|
|
2599
|
+
color-mix(in srgb, var(--color-container-border-ai_generated), black 20%);
|
|
2600
|
+
}
|
|
2601
|
+
|
|
2602
|
+
/* Dark mode: useInteractiveColor lightens (white) instead of darkening (black). */
|
|
2603
|
+
[data-theme="dark"] .seeds-token-closeable:hover,
|
|
2604
|
+
[data-theme="dark"] .seeds-token-closeable:active,
|
|
2605
|
+
.dark .seeds-token-closeable:hover,
|
|
2606
|
+
.dark .seeds-token-closeable:active,
|
|
2607
|
+
.lights-out .seeds-token-closeable:hover,
|
|
2608
|
+
.lights-out .seeds-token-closeable:active {
|
|
2609
|
+
border: 1px solid
|
|
2610
|
+
color-mix(in srgb, var(--color-container-border-base), white 20%);
|
|
2611
|
+
}
|
|
2612
|
+
|
|
2613
|
+
[data-theme="dark"] .seeds-token-blue:hover,
|
|
2614
|
+
[data-theme="dark"] .seeds-token-blue:active,
|
|
2615
|
+
.dark .seeds-token-blue:hover,
|
|
2616
|
+
.dark .seeds-token-blue:active,
|
|
2617
|
+
.lights-out .seeds-token-blue:hover,
|
|
2618
|
+
.lights-out .seeds-token-blue:active {
|
|
2619
|
+
border: 1px solid
|
|
2620
|
+
color-mix(in srgb, var(--color-container-border-decorative-blue), white 20%);
|
|
2621
|
+
}
|
|
2622
|
+
|
|
2623
|
+
[data-theme="dark"] .seeds-token-invalid:hover,
|
|
2624
|
+
.dark .seeds-token-invalid:hover,
|
|
2625
|
+
.lights-out .seeds-token-invalid:hover {
|
|
2626
|
+
border: 1px solid
|
|
2627
|
+
color-mix(in srgb, var(--color-container-border-error), white 20%);
|
|
2628
|
+
}
|
|
2629
|
+
|
|
2630
|
+
[data-theme="dark"] .seeds-token-warning:hover,
|
|
2631
|
+
.dark .seeds-token-warning:hover,
|
|
2632
|
+
.lights-out .seeds-token-warning:hover {
|
|
2633
|
+
border: 1px solid
|
|
2634
|
+
color-mix(in srgb, var(--color-container-border-warning), white 20%);
|
|
2635
|
+
}
|
|
2636
|
+
|
|
2637
|
+
[data-theme="dark"] .seeds-token-generated:hover,
|
|
2638
|
+
.dark .seeds-token-generated:hover,
|
|
2639
|
+
.lights-out .seeds-token-generated:hover {
|
|
2640
|
+
border: 1px solid
|
|
2641
|
+
color-mix(in srgb, var(--color-container-border-ai_generated), white 20%);
|
|
2642
|
+
}
|
|
2004
2643
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/racine",
|
|
3
|
-
"version": "31.
|
|
3
|
+
"version": "31.7.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": ">=18"
|
|
@@ -73,69 +73,69 @@
|
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
75
|
"@size-limit/file": "^11.1.6",
|
|
76
|
-
"@sproutsocial/seeds-react-accordion": "^0.4.
|
|
77
|
-
"@sproutsocial/seeds-react-avatar": "^1.1.
|
|
76
|
+
"@sproutsocial/seeds-react-accordion": "^0.4.49",
|
|
77
|
+
"@sproutsocial/seeds-react-avatar": "^1.1.18",
|
|
78
78
|
"@sproutsocial/seeds-react-badge": "^2.0.35",
|
|
79
79
|
"@sproutsocial/seeds-react-banner": "^1.1.23",
|
|
80
80
|
"@sproutsocial/seeds-react-box": "^1.1.22",
|
|
81
|
-
"@sproutsocial/seeds-react-breadcrumb": "^1.1.
|
|
81
|
+
"@sproutsocial/seeds-react-breadcrumb": "^1.1.8",
|
|
82
82
|
"@sproutsocial/seeds-react-button": "^2.2.2",
|
|
83
83
|
"@sproutsocial/seeds-react-card": "^1.1.43",
|
|
84
84
|
"@sproutsocial/seeds-react-character-counter": "^1.0.4",
|
|
85
|
-
"@sproutsocial/seeds-react-chart-legend": "^1.0.
|
|
85
|
+
"@sproutsocial/seeds-react-chart-legend": "^1.0.42",
|
|
86
86
|
"@sproutsocial/seeds-react-chat-bubble": "^0.2.2",
|
|
87
|
-
"@sproutsocial/seeds-react-checkbox": "^1.3.
|
|
88
|
-
"@sproutsocial/seeds-react-collapsible": "^2.0.
|
|
87
|
+
"@sproutsocial/seeds-react-checkbox": "^1.3.43",
|
|
88
|
+
"@sproutsocial/seeds-react-collapsible": "^2.0.1",
|
|
89
89
|
"@sproutsocial/seeds-react-container": "^0.3.16",
|
|
90
|
-
"@sproutsocial/seeds-react-content-block": "^0.5.
|
|
91
|
-
"@sproutsocial/seeds-react-content-header": "^0.2.
|
|
92
|
-
"@sproutsocial/seeds-react-data-table": "^2.6.
|
|
90
|
+
"@sproutsocial/seeds-react-content-block": "^0.5.16",
|
|
91
|
+
"@sproutsocial/seeds-react-content-header": "^0.2.21",
|
|
92
|
+
"@sproutsocial/seeds-react-data-table": "^2.6.24",
|
|
93
93
|
"@sproutsocial/seeds-react-datepicker": "^1.0.40",
|
|
94
|
-
"@sproutsocial/seeds-react-drawer": "^2.2.
|
|
95
|
-
"@sproutsocial/seeds-react-duration": "^1.0.
|
|
96
|
-
"@sproutsocial/seeds-react-empty-state": "^1.0.
|
|
97
|
-
"@sproutsocial/seeds-react-fieldset": "^1.0.
|
|
98
|
-
"@sproutsocial/seeds-react-form-field": "^1.1.
|
|
94
|
+
"@sproutsocial/seeds-react-drawer": "^2.2.9",
|
|
95
|
+
"@sproutsocial/seeds-react-duration": "^1.0.25",
|
|
96
|
+
"@sproutsocial/seeds-react-empty-state": "^1.0.24",
|
|
97
|
+
"@sproutsocial/seeds-react-fieldset": "^1.0.24",
|
|
98
|
+
"@sproutsocial/seeds-react-form-field": "^1.1.18",
|
|
99
99
|
"@sproutsocial/seeds-react-grid": "^0.2.6",
|
|
100
100
|
"@sproutsocial/seeds-react-hooks": "^3.2.3",
|
|
101
101
|
"@sproutsocial/seeds-react-icon": "^2.4.1",
|
|
102
102
|
"@sproutsocial/seeds-react-image": "^1.0.22",
|
|
103
103
|
"@sproutsocial/seeds-react-indicator": "^1.0.41",
|
|
104
|
-
"@sproutsocial/seeds-react-input": "^1.5.
|
|
105
|
-
"@sproutsocial/seeds-react-keyboard-key": "^1.0.
|
|
106
|
-
"@sproutsocial/seeds-react-label": "^1.0.
|
|
107
|
-
"@sproutsocial/seeds-react-link": "^1.1.
|
|
108
|
-
"@sproutsocial/seeds-react-list": "^0.3.
|
|
109
|
-
"@sproutsocial/seeds-react-loader": "^1.0.
|
|
110
|
-
"@sproutsocial/seeds-react-loader-button": "^1.0.
|
|
111
|
-
"@sproutsocial/seeds-react-message": "^1.0.
|
|
104
|
+
"@sproutsocial/seeds-react-input": "^1.5.28",
|
|
105
|
+
"@sproutsocial/seeds-react-keyboard-key": "^1.0.24",
|
|
106
|
+
"@sproutsocial/seeds-react-label": "^1.0.24",
|
|
107
|
+
"@sproutsocial/seeds-react-link": "^1.1.14",
|
|
108
|
+
"@sproutsocial/seeds-react-list": "^0.3.27",
|
|
109
|
+
"@sproutsocial/seeds-react-loader": "^1.0.24",
|
|
110
|
+
"@sproutsocial/seeds-react-loader-button": "^1.0.47",
|
|
111
|
+
"@sproutsocial/seeds-react-message": "^1.0.50",
|
|
112
112
|
"@sproutsocial/seeds-react-mixins": "^4.3.8",
|
|
113
|
-
"@sproutsocial/seeds-react-modal": "^2.5.
|
|
114
|
-
"@sproutsocial/seeds-react-narrative-kit": "^0.
|
|
115
|
-
"@sproutsocial/seeds-react-numeral": "^1.0.
|
|
116
|
-
"@sproutsocial/seeds-react-pagination": "^0.1.
|
|
117
|
-
"@sproutsocial/seeds-react-panel": "^1.0.
|
|
118
|
-
"@sproutsocial/seeds-react-peek-in": "^0.3.
|
|
113
|
+
"@sproutsocial/seeds-react-modal": "^2.5.24",
|
|
114
|
+
"@sproutsocial/seeds-react-narrative-kit": "^0.5.1",
|
|
115
|
+
"@sproutsocial/seeds-react-numeral": "^1.0.49",
|
|
116
|
+
"@sproutsocial/seeds-react-pagination": "^0.1.22",
|
|
117
|
+
"@sproutsocial/seeds-react-panel": "^1.0.2",
|
|
118
|
+
"@sproutsocial/seeds-react-peek-in": "^0.3.1",
|
|
119
119
|
"@sproutsocial/seeds-react-partner-logo": "^1.7.14",
|
|
120
120
|
"@sproutsocial/seeds-react-popout": "^2.5.10",
|
|
121
121
|
"@sproutsocial/seeds-react-portal": "^1.2.0",
|
|
122
|
-
"@sproutsocial/seeds-react-progress": "^0.2.
|
|
123
|
-
"@sproutsocial/seeds-react-radio": "^1.3.
|
|
122
|
+
"@sproutsocial/seeds-react-progress": "^0.2.9",
|
|
123
|
+
"@sproutsocial/seeds-react-radio": "^1.3.24",
|
|
124
124
|
"@sproutsocial/seeds-react-rating": "^1.0.41",
|
|
125
|
-
"@sproutsocial/seeds-react-segmented-control": "^1.1.
|
|
126
|
-
"@sproutsocial/seeds-react-spot-illustration": "^1.2.
|
|
127
|
-
"@sproutsocial/seeds-react-select": "^1.1.
|
|
125
|
+
"@sproutsocial/seeds-react-segmented-control": "^1.1.23",
|
|
126
|
+
"@sproutsocial/seeds-react-spot-illustration": "^1.2.4",
|
|
127
|
+
"@sproutsocial/seeds-react-select": "^1.1.42",
|
|
128
128
|
"@sproutsocial/seeds-react-skeleton": "^1.1.21",
|
|
129
129
|
"@sproutsocial/seeds-react-stack": "^1.0.21",
|
|
130
130
|
"@sproutsocial/seeds-react-switch": "^1.2.40",
|
|
131
131
|
"@sproutsocial/seeds-react-system-props": "^3.1.1",
|
|
132
|
-
"@sproutsocial/seeds-react-table": "^1.0.
|
|
132
|
+
"@sproutsocial/seeds-react-table": "^1.0.43",
|
|
133
133
|
"@sproutsocial/seeds-react-tabs": "^1.4.12",
|
|
134
|
-
"@sproutsocial/seeds-react-text": "^1.
|
|
134
|
+
"@sproutsocial/seeds-react-text": "^1.5.0",
|
|
135
135
|
"@sproutsocial/seeds-react-textarea": "^1.0.22",
|
|
136
|
-
"@sproutsocial/seeds-react-toast": "^1.0.
|
|
137
|
-
"@sproutsocial/seeds-react-token": "^1.5.
|
|
138
|
-
"@sproutsocial/seeds-react-token-input": "^1.4.
|
|
136
|
+
"@sproutsocial/seeds-react-toast": "^1.0.43",
|
|
137
|
+
"@sproutsocial/seeds-react-token": "^1.5.8",
|
|
138
|
+
"@sproutsocial/seeds-react-token-input": "^1.4.50",
|
|
139
139
|
"@sproutsocial/seeds-react-tooltip": "^1.1.28",
|
|
140
140
|
"@sproutsocial/seeds-react-theme": "^4.1.1",
|
|
141
141
|
"@sproutsocial/seeds-react-theme-provider": "^1.1.21",
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
"@sproutsocial/seeds-motion": "^1.8.2",
|
|
164
164
|
"@sproutsocial/seeds-networkcolor": "^2.22.0",
|
|
165
165
|
"@sproutsocial/seeds-partner-logos": "^2.4.1",
|
|
166
|
-
"@sproutsocial/seeds-react-menu": "^1.16.
|
|
166
|
+
"@sproutsocial/seeds-react-menu": "^1.16.2",
|
|
167
167
|
"@sproutsocial/seeds-react-testing-library": "*",
|
|
168
168
|
"@sproutsocial/seeds-space": "^0.8.1",
|
|
169
169
|
"@sproutsocial/seeds-testing": "*",
|