@indico-data/design-system 2.29.1 → 2.30.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 (12) hide show
  1. package/lib/index.css +75 -105
  2. package/lib/index.esm.css +75 -105
  3. package/lib/index.esm.js +5 -2
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +5 -2
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/table/Table.tsx +9 -2
  9. package/src/components/table/styles/Table.scss +73 -57
  10. package/src/components/table/styles/_variables.scss +9 -9
  11. package/src/styles/globals.scss +9 -0
  12. package/src/styles/variables/_typography.scss +0 -12
package/lib/index.css CHANGED
@@ -28,18 +28,6 @@
28
28
  --pf-label-size-lg: var(--pf-font-size-h2);
29
29
  }
30
30
 
31
- h1,
32
- h2,
33
- h3,
34
- h4,
35
- h5,
36
- h6,
37
- p,
38
- ul,
39
- li {
40
- color: var(--pf-font-color);
41
- }
42
-
43
31
  :root [data-theme=light],
44
32
  :root {
45
33
  --pf-primary-color: #6833d0;
@@ -375,6 +363,14 @@ body {
375
363
  font-weight: var(--pf-font-weight-regular);
376
364
  }
377
365
 
366
+ a, .link {
367
+ color: var(--pf-link-color);
368
+ transition: color 0.3s ease-in-out;
369
+ }
370
+ a:hover, .link:hover {
371
+ color: var(--pf-active-link-color);
372
+ }
373
+
378
374
  .theme {
379
375
  background-color: var(--pf-background-color);
380
376
  color: var(--pf-font-color);
@@ -911,109 +907,95 @@ body {
911
907
  margin: 1em 0;
912
908
  }
913
909
 
914
- :root,
915
- :root [data-theme=light],
916
- :root [data-theme=dark] {
917
- --pf-table-font-color: var(--pf-gray-color);
918
- --pf-table-stripe-color: var(--pf-gray-color-100);
919
- }
920
-
921
910
  :root [data-theme=light] {
922
911
  --pf-table-background-color: var(--pf-white-color);
912
+ --pf-table-font-color: var(--pf-gray-color);
913
+ --pf-table-border-color: var(--pf-gray-color-200);
923
914
  --pf-table-stripe-color: var(--pf-gray-color-100);
915
+ --pf-table-hover-color: var(--pf-gray-color-200);
916
+ --pf-table-disabled-color: var(--pf-gray-color-300);
924
917
  }
925
918
 
926
919
  :root [data-theme=dark] {
927
920
  --pf-table-background-color: var(--pf-primary-color-700);
928
- --pf-table-stripe-color: var(--pf-primary-color-400);
921
+ --pf-table-font-color: var(--pf-gray-color);
922
+ --pf-table-border-color: var(--pf-primary-color-300);
923
+ --pf-table-stripe-color: var(--pf-primary-color-600);
924
+ --pf-table-hover-color: var(--pf-primary-color-400);
925
+ --pf-table-disabled-color: var(--pf-gray-color-900);
929
926
  }
930
927
 
931
- :root .table-loading,
932
- :root [data-theme=light] .table-loading,
933
- :root [data-theme=dark] .table-loading {
928
+ .table-loading {
934
929
  color: var(--pf-table-font-color);
935
930
  }
936
- :root .table-wrapper,
937
- :root [data-theme=light] .table-wrapper,
938
- :root [data-theme=dark] .table-wrapper {
931
+
932
+ .table {
939
933
  background-color: var(--pf-table-background-color);
940
934
  color: var(--pf-table-font-color);
941
- }
942
- :root .table-wrapper .rdt_Table,
943
- :root .table-wrapper .rdt_TableRow,
944
- :root .table-wrapper .rdt_TableCol,
945
- :root .table-wrapper .rdt_TableCol_Sortable,
946
- :root .table-wrapper .rdt_TableCell,
947
- :root .table-wrapper .rdt_TableHeader,
948
- :root .table-wrapper .rdt_TableFooter,
949
- :root .table-wrapper .rdt_TableHead,
950
- :root .table-wrapper .rdt_TableHeadRow,
951
- :root .table-wrapper .rdt_TableBody,
952
- :root .table-wrapper .rdt_ExpanderRow,
953
- :root .table-wrapper .rdt_Pagination,
954
- :root [data-theme=light] .table-wrapper .rdt_Table,
955
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
956
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
957
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
958
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
959
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
960
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
961
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
962
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
963
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
964
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
965
- :root [data-theme=light] .table-wrapper .rdt_Pagination,
966
- :root [data-theme=dark] .table-wrapper .rdt_Table,
967
- :root [data-theme=dark] .table-wrapper .rdt_TableRow,
968
- :root [data-theme=dark] .table-wrapper .rdt_TableCol,
969
- :root [data-theme=dark] .table-wrapper .rdt_TableCol_Sortable,
970
- :root [data-theme=dark] .table-wrapper .rdt_TableCell,
971
- :root [data-theme=dark] .table-wrapper .rdt_TableHeader,
972
- :root [data-theme=dark] .table-wrapper .rdt_TableFooter,
973
- :root [data-theme=dark] .table-wrapper .rdt_TableHead,
974
- :root [data-theme=dark] .table-wrapper .rdt_TableHeadRow,
975
- :root [data-theme=dark] .table-wrapper .rdt_TableBody,
976
- :root [data-theme=dark] .table-wrapper .rdt_ExpanderRow,
977
- :root [data-theme=dark] .table-wrapper .rdt_Pagination {
935
+ border-radius: var(--pf-rounded);
936
+ border: 1px solid var(--pf-table-border-color);
937
+ }
938
+ .table .rdt_Table,
939
+ .table .rdt_TableRow,
940
+ .table .rdt_TableCol,
941
+ .table .rdt_TableCol_Sortable,
942
+ .table .rdt_TableCell,
943
+ .table .rdt_TableHeader,
944
+ .table .rdt_TableFooter,
945
+ .table .rdt_TableHead,
946
+ .table .rdt_TableHeadRow,
947
+ .table .rdt_TableBody,
948
+ .table .rdt_ExpanderRow,
949
+ .table .rdt_Pagination {
978
950
  background-color: var(--pf-table-background-color);
979
951
  color: var(--pf-table-font-color);
980
952
  }
981
- :root .table-wrapper button svg,
982
- :root [data-theme=light] .table-wrapper button svg,
983
- :root [data-theme=dark] .table-wrapper button svg {
953
+ .table button svg {
984
954
  fill: var(--pf-table-font-color);
985
955
  }
986
- :root .table-wrapper button:disabled svg,
987
- :root [data-theme=light] .table-wrapper button:disabled svg,
988
- :root [data-theme=dark] .table-wrapper button:disabled svg {
989
- fill: var(--pf-gray-color-900);
956
+ .table button:disabled svg {
957
+ fill: var(--pf-table-disabled-color);
990
958
  }
991
- :root .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
992
- :root [data-theme=light] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
993
- :root [data-theme=dark] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
- background-color: var(--pf-table-stripe-color);
959
+ .table .rdt_TableHeader {
960
+ border-radius: var(--pf-rounded) 0;
961
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
995
962
  }
996
-
997
- :root [data-theme=light] .table-wrapper .rdt_Table,
998
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
999
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
1000
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
1001
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
1002
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
1003
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
1004
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
1005
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
1006
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
1007
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
1008
- :root [data-theme=light] .table-wrapper .rdt_Pagination {
1009
- background-color: var(--pf-table-background-color);
1010
- color: var(--pf-table-font-color);
963
+ .table .rdt_TableHeadRow,
964
+ .table .rdt_TableRow {
965
+ border-bottom: none !important;
1011
966
  }
1012
- :root [data-theme=light] .table-wrapper button svg {
1013
- fill: var(--pf-table-font-color);
967
+ .table .rdt_TableHeadRow > :first-child,
968
+ .table .rdt_TableRow > :first-child {
969
+ padding-left: var(--pf-padding-4);
970
+ min-width: 60px;
971
+ justify-content: left;
972
+ }
973
+ .table .rdt_TableRow {
974
+ border-top: none;
975
+ }
976
+ .table .rdt_TableRow:hover .rdt_TableCell {
977
+ background-color: var(--pf-table-hover-color) !important;
978
+ }
979
+ .table .rdt_TableRow:first-child .rdt_TableCell {
980
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
981
+ }
982
+ .table .rdt_TableRow:last-child .rdt_TableCell {
983
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
984
+ }
985
+ .table .rdt_TableCell,
986
+ .table .rdt_TableCol {
987
+ font-size: var(--pf-font-size-base);
1014
988
  }
1015
- :root [data-theme=light] .table-wrapper button:disabled svg {
1016
- fill: var(--pf-gray-color-300);
989
+ .table .rdt_TableCell:not(:first-child),
990
+ .table .rdt_TableCol:not(:first-child) {
991
+ border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
992
+ }
993
+ .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
+ background-color: var(--pf-table-stripe-color);
995
+ }
996
+ .table .rdt_Pagination {
997
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
998
+ border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
1017
999
  }
1018
1000
 
1019
1001
  :root,
@@ -2361,18 +2343,6 @@ form {
2361
2343
  --pf-label-size-lg: var(--pf-font-size-h2);
2362
2344
  }
2363
2345
 
2364
- h1,
2365
- h2,
2366
- h3,
2367
- h4,
2368
- h5,
2369
- h6,
2370
- p,
2371
- ul,
2372
- li {
2373
- color: var(--pf-font-color);
2374
- }
2375
-
2376
2346
  html {
2377
2347
  font-size: var(--pf-font-size-base);
2378
2348
  font-family: var(--pf-font-family-base);
package/lib/index.esm.css CHANGED
@@ -28,18 +28,6 @@
28
28
  --pf-label-size-lg: var(--pf-font-size-h2);
29
29
  }
30
30
 
31
- h1,
32
- h2,
33
- h3,
34
- h4,
35
- h5,
36
- h6,
37
- p,
38
- ul,
39
- li {
40
- color: var(--pf-font-color);
41
- }
42
-
43
31
  :root [data-theme=light],
44
32
  :root {
45
33
  --pf-primary-color: #6833d0;
@@ -375,6 +363,14 @@ body {
375
363
  font-weight: var(--pf-font-weight-regular);
376
364
  }
377
365
 
366
+ a, .link {
367
+ color: var(--pf-link-color);
368
+ transition: color 0.3s ease-in-out;
369
+ }
370
+ a:hover, .link:hover {
371
+ color: var(--pf-active-link-color);
372
+ }
373
+
378
374
  .theme {
379
375
  background-color: var(--pf-background-color);
380
376
  color: var(--pf-font-color);
@@ -911,109 +907,95 @@ body {
911
907
  margin: 1em 0;
912
908
  }
913
909
 
914
- :root,
915
- :root [data-theme=light],
916
- :root [data-theme=dark] {
917
- --pf-table-font-color: var(--pf-gray-color);
918
- --pf-table-stripe-color: var(--pf-gray-color-100);
919
- }
920
-
921
910
  :root [data-theme=light] {
922
911
  --pf-table-background-color: var(--pf-white-color);
912
+ --pf-table-font-color: var(--pf-gray-color);
913
+ --pf-table-border-color: var(--pf-gray-color-200);
923
914
  --pf-table-stripe-color: var(--pf-gray-color-100);
915
+ --pf-table-hover-color: var(--pf-gray-color-200);
916
+ --pf-table-disabled-color: var(--pf-gray-color-300);
924
917
  }
925
918
 
926
919
  :root [data-theme=dark] {
927
920
  --pf-table-background-color: var(--pf-primary-color-700);
928
- --pf-table-stripe-color: var(--pf-primary-color-400);
921
+ --pf-table-font-color: var(--pf-gray-color);
922
+ --pf-table-border-color: var(--pf-primary-color-300);
923
+ --pf-table-stripe-color: var(--pf-primary-color-600);
924
+ --pf-table-hover-color: var(--pf-primary-color-400);
925
+ --pf-table-disabled-color: var(--pf-gray-color-900);
929
926
  }
930
927
 
931
- :root .table-loading,
932
- :root [data-theme=light] .table-loading,
933
- :root [data-theme=dark] .table-loading {
928
+ .table-loading {
934
929
  color: var(--pf-table-font-color);
935
930
  }
936
- :root .table-wrapper,
937
- :root [data-theme=light] .table-wrapper,
938
- :root [data-theme=dark] .table-wrapper {
931
+
932
+ .table {
939
933
  background-color: var(--pf-table-background-color);
940
934
  color: var(--pf-table-font-color);
941
- }
942
- :root .table-wrapper .rdt_Table,
943
- :root .table-wrapper .rdt_TableRow,
944
- :root .table-wrapper .rdt_TableCol,
945
- :root .table-wrapper .rdt_TableCol_Sortable,
946
- :root .table-wrapper .rdt_TableCell,
947
- :root .table-wrapper .rdt_TableHeader,
948
- :root .table-wrapper .rdt_TableFooter,
949
- :root .table-wrapper .rdt_TableHead,
950
- :root .table-wrapper .rdt_TableHeadRow,
951
- :root .table-wrapper .rdt_TableBody,
952
- :root .table-wrapper .rdt_ExpanderRow,
953
- :root .table-wrapper .rdt_Pagination,
954
- :root [data-theme=light] .table-wrapper .rdt_Table,
955
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
956
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
957
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
958
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
959
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
960
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
961
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
962
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
963
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
964
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
965
- :root [data-theme=light] .table-wrapper .rdt_Pagination,
966
- :root [data-theme=dark] .table-wrapper .rdt_Table,
967
- :root [data-theme=dark] .table-wrapper .rdt_TableRow,
968
- :root [data-theme=dark] .table-wrapper .rdt_TableCol,
969
- :root [data-theme=dark] .table-wrapper .rdt_TableCol_Sortable,
970
- :root [data-theme=dark] .table-wrapper .rdt_TableCell,
971
- :root [data-theme=dark] .table-wrapper .rdt_TableHeader,
972
- :root [data-theme=dark] .table-wrapper .rdt_TableFooter,
973
- :root [data-theme=dark] .table-wrapper .rdt_TableHead,
974
- :root [data-theme=dark] .table-wrapper .rdt_TableHeadRow,
975
- :root [data-theme=dark] .table-wrapper .rdt_TableBody,
976
- :root [data-theme=dark] .table-wrapper .rdt_ExpanderRow,
977
- :root [data-theme=dark] .table-wrapper .rdt_Pagination {
935
+ border-radius: var(--pf-rounded);
936
+ border: 1px solid var(--pf-table-border-color);
937
+ }
938
+ .table .rdt_Table,
939
+ .table .rdt_TableRow,
940
+ .table .rdt_TableCol,
941
+ .table .rdt_TableCol_Sortable,
942
+ .table .rdt_TableCell,
943
+ .table .rdt_TableHeader,
944
+ .table .rdt_TableFooter,
945
+ .table .rdt_TableHead,
946
+ .table .rdt_TableHeadRow,
947
+ .table .rdt_TableBody,
948
+ .table .rdt_ExpanderRow,
949
+ .table .rdt_Pagination {
978
950
  background-color: var(--pf-table-background-color);
979
951
  color: var(--pf-table-font-color);
980
952
  }
981
- :root .table-wrapper button svg,
982
- :root [data-theme=light] .table-wrapper button svg,
983
- :root [data-theme=dark] .table-wrapper button svg {
953
+ .table button svg {
984
954
  fill: var(--pf-table-font-color);
985
955
  }
986
- :root .table-wrapper button:disabled svg,
987
- :root [data-theme=light] .table-wrapper button:disabled svg,
988
- :root [data-theme=dark] .table-wrapper button:disabled svg {
989
- fill: var(--pf-gray-color-900);
956
+ .table button:disabled svg {
957
+ fill: var(--pf-table-disabled-color);
990
958
  }
991
- :root .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
992
- :root [data-theme=light] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
993
- :root [data-theme=dark] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
- background-color: var(--pf-table-stripe-color);
959
+ .table .rdt_TableHeader {
960
+ border-radius: var(--pf-rounded) 0;
961
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
995
962
  }
996
-
997
- :root [data-theme=light] .table-wrapper .rdt_Table,
998
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
999
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
1000
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
1001
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
1002
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
1003
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
1004
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
1005
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
1006
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
1007
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
1008
- :root [data-theme=light] .table-wrapper .rdt_Pagination {
1009
- background-color: var(--pf-table-background-color);
1010
- color: var(--pf-table-font-color);
963
+ .table .rdt_TableHeadRow,
964
+ .table .rdt_TableRow {
965
+ border-bottom: none !important;
1011
966
  }
1012
- :root [data-theme=light] .table-wrapper button svg {
1013
- fill: var(--pf-table-font-color);
967
+ .table .rdt_TableHeadRow > :first-child,
968
+ .table .rdt_TableRow > :first-child {
969
+ padding-left: var(--pf-padding-4);
970
+ min-width: 60px;
971
+ justify-content: left;
972
+ }
973
+ .table .rdt_TableRow {
974
+ border-top: none;
975
+ }
976
+ .table .rdt_TableRow:hover .rdt_TableCell {
977
+ background-color: var(--pf-table-hover-color) !important;
978
+ }
979
+ .table .rdt_TableRow:first-child .rdt_TableCell {
980
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
981
+ }
982
+ .table .rdt_TableRow:last-child .rdt_TableCell {
983
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
984
+ }
985
+ .table .rdt_TableCell,
986
+ .table .rdt_TableCol {
987
+ font-size: var(--pf-font-size-base);
1014
988
  }
1015
- :root [data-theme=light] .table-wrapper button:disabled svg {
1016
- fill: var(--pf-gray-color-300);
989
+ .table .rdt_TableCell:not(:first-child),
990
+ .table .rdt_TableCol:not(:first-child) {
991
+ border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
992
+ }
993
+ .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
+ background-color: var(--pf-table-stripe-color);
995
+ }
996
+ .table .rdt_Pagination {
997
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
998
+ border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
1017
999
  }
1018
1000
 
1019
1001
  :root,
@@ -2361,18 +2343,6 @@ form {
2361
2343
  --pf-label-size-lg: var(--pf-font-size-h2);
2362
2344
  }
2363
2345
 
2364
- h1,
2365
- h2,
2366
- h3,
2367
- h4,
2368
- h5,
2369
- h6,
2370
- p,
2371
- ul,
2372
- li {
2373
- color: var(--pf-font-color);
2374
- }
2375
-
2376
2346
  html {
2377
2347
  font-size: var(--pf-font-size-base);
2378
2348
  font-family: var(--pf-font-family-base);
package/lib/index.esm.js CHANGED
@@ -20936,8 +20936,11 @@ const LoadingComponent = () => {
20936
20936
  };
20937
20937
 
20938
20938
  const Table$1 = (props) => {
20939
- const { responsive = true, direction = 'auto', keyField = 'id', striped = true, noDataComponent = 'built-in', isDisabled, isLoading, subHeaderAlign = 'left' } = props, rest = __rest$1(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "subHeaderAlign"]);
20940
- return (jsx("div", { className: "table-wrapper", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: `${striped ? 'pf__table--striped' : ''}`, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
20939
+ const { responsive = true, direction = 'auto', keyField = 'id', striped = true, noDataComponent = 'built-in', isDisabled, isLoading, subHeaderAlign = 'left', className } = props, rest = __rest$1(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "subHeaderAlign", "className"]);
20940
+ const combinedClassName = classNames(className, {
20941
+ 'table--striped': striped,
20942
+ });
20943
+ return (jsx("div", { className: "table", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
20941
20944
  };
20942
20945
 
20943
20946
  const Label = ({ label, name, isRequired }) => {