@agility/plenum-ui 1.3.31 → 1.3.33

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 (105) hide show
  1. package/.storybook/Layout.jsx +1 -1
  2. package/lib/index.esm.js +1 -1
  3. package/lib/index.js +1 -1
  4. package/lib/{index.css → tailwind.css} +252 -63
  5. package/libxxx/common/brandCfg.d.ts +3 -0
  6. package/libxxx/common/index.d.ts +3 -0
  7. package/libxxx/common/storyCfg.d.ts +5 -0
  8. package/libxxx/components/Avatar/Avatar.d.ts +27 -0
  9. package/libxxx/components/Avatar/Avatar.stories.d.ts +6 -0
  10. package/libxxx/components/Avatar/Avatar.test.d.ts +1 -0
  11. package/libxxx/components/Avatar/index.d.ts +1 -0
  12. package/libxxx/components/Button/Button.d.ts +45 -0
  13. package/libxxx/components/Button/Button.stories.d.ts +10 -0
  14. package/libxxx/components/Button/Button.test.d.ts +1 -0
  15. package/libxxx/components/Button/index.d.ts +1 -0
  16. package/libxxx/components/ButtonDropdown/ButtonDropdown.d.ts +11 -0
  17. package/libxxx/components/ButtonDropdown/ButtonDropdown.stories.d.ts +8 -0
  18. package/libxxx/components/ButtonDropdown/index.d.ts +1 -0
  19. package/libxxx/components/Combobox/Combobox.d.ts +34 -0
  20. package/libxxx/components/Combobox/Combobox.stories.d.ts +14 -0
  21. package/libxxx/components/Combobox/Combobox.test.d.ts +1 -0
  22. package/libxxx/components/Combobox/index.d.ts +1 -0
  23. package/libxxx/components/Dropdown/Dropdown.d.ts +25 -0
  24. package/libxxx/components/Dropdown/Dropdown.stories.d.ts +9 -0
  25. package/libxxx/components/Dropdown/Dropdown.test.d.ts +1 -0
  26. package/libxxx/components/Dropdown/data.d.ts +3 -0
  27. package/libxxx/components/Dropdown/index.d.ts +1 -0
  28. package/libxxx/components/Forms/BaseField/BaseField.d.ts +34 -0
  29. package/libxxx/components/Forms/BaseField/BaseField.stories.d.ts +6 -0
  30. package/libxxx/components/Forms/BaseField/BaseField.test.d.ts +1 -0
  31. package/libxxx/components/Forms/BaseField/index.d.ts +1 -0
  32. package/libxxx/components/Forms/Checkbox/Checkbox.d.ts +23 -0
  33. package/libxxx/components/Forms/Checkbox/Checkbox.stories.d.ts +13 -0
  34. package/libxxx/components/Forms/Checkbox/Checkbox.test.d.ts +1 -0
  35. package/libxxx/components/Forms/Checkbox/index.d.ts +1 -0
  36. package/libxxx/components/Forms/InputCounter/InputCounter.d.ts +9 -0
  37. package/libxxx/components/Forms/InputCounter/InputCounter.stories.d.ts +6 -0
  38. package/libxxx/components/Forms/InputCounter/InputCounter.test.d.ts +1 -0
  39. package/libxxx/components/Forms/InputCounter/index.d.ts +1 -0
  40. package/libxxx/components/Forms/InputLabel/InputLabel.d.ts +14 -0
  41. package/libxxx/components/Forms/InputLabel/InputLabel.stories.d.ts +6 -0
  42. package/libxxx/components/Forms/InputLabel/InputLabel.test.d.ts +1 -0
  43. package/libxxx/components/Forms/InputLabel/index.d.ts +1 -0
  44. package/libxxx/components/Forms/Radio/Radio.d.ts +27 -0
  45. package/libxxx/components/Forms/Radio/Radio.stories.d.ts +12 -0
  46. package/libxxx/components/Forms/Radio/Radio.test.d.ts +1 -0
  47. package/libxxx/components/Forms/Radio/index.d.ts +1 -0
  48. package/libxxx/components/Forms/Select/Select.d.ts +27 -0
  49. package/libxxx/components/Forms/Select/Select.stories.d.ts +11 -0
  50. package/libxxx/components/Forms/Select/Select.test.d.ts +1 -0
  51. package/libxxx/components/Forms/Select/index.d.ts +1 -0
  52. package/libxxx/components/Forms/TextInput/TextInput.d.ts +37 -0
  53. package/libxxx/components/Forms/TextInput/TextInput.stories.d.ts +12 -0
  54. package/libxxx/components/Forms/TextInput/index.d.ts +1 -0
  55. package/libxxx/components/Forms/TextInputAddon/InputCta/InputCta.d.ts +16 -0
  56. package/libxxx/components/Forms/TextInputAddon/InputCta/InputCta.stories.d.ts +6 -0
  57. package/libxxx/components/Forms/TextInputAddon/InputCta/InputCta.test.d.ts +1 -0
  58. package/libxxx/components/Forms/TextInputAddon/InputCta/index.d.ts +1 -0
  59. package/libxxx/components/Forms/TextInputAddon/TextInputAddon.d.ts +52 -0
  60. package/libxxx/components/Forms/TextInputAddon/TextInputAddon.stories.d.ts +12 -0
  61. package/libxxx/components/Forms/TextInputAddon/index.d.ts +1 -0
  62. package/libxxx/components/Forms/TextInputSelect/InputSelect/InputSelect.d.ts +13 -0
  63. package/libxxx/components/Forms/TextInputSelect/InputSelect/InputSelect.stories.d.ts +6 -0
  64. package/libxxx/components/Forms/TextInputSelect/InputSelect/InputSelect.test.d.ts +1 -0
  65. package/libxxx/components/Forms/TextInputSelect/InputSelect/index.d.ts +1 -0
  66. package/libxxx/components/Forms/TextInputSelect/TextInputSelect.d.ts +48 -0
  67. package/libxxx/components/Forms/TextInputSelect/TextInputSelect.stories.d.ts +8 -0
  68. package/libxxx/components/Forms/TextInputSelect/index.d.ts +1 -0
  69. package/libxxx/components/Forms/Textarea/Textarea.d.ts +32 -0
  70. package/libxxx/components/Forms/Textarea/Textarea.stories.d.ts +12 -0
  71. package/libxxx/components/Forms/Textarea/Textarea.test.d.ts +1 -0
  72. package/libxxx/components/Forms/Textarea/index.d.ts +1 -0
  73. package/libxxx/components/Switch/Switch.d.ts +11 -0
  74. package/libxxx/components/Switch/Switch.stories.d.ts +9 -0
  75. package/libxxx/components/Switch/Switch.test.d.ts +1 -0
  76. package/libxxx/components/Switch/index.d.ts +1 -0
  77. package/libxxx/components/TreeView/TreeView.d.ts +36 -0
  78. package/libxxx/components/TreeView/TreeView.stories.d.ts +6 -0
  79. package/libxxx/components/TreeView/TreeView.test.d.ts +1 -0
  80. package/libxxx/components/TreeView/index.d.ts +1 -0
  81. package/libxxx/components/TreeView V1/TreeItem/TreeItem.d.ts +16 -0
  82. package/libxxx/components/TreeView V1/TreeItem/TreeItem.stories.d.ts +9 -0
  83. package/libxxx/components/TreeView V1/TreeItem/TreeItem.test.d.ts +1 -0
  84. package/libxxx/components/TreeView V1/TreeItem/index.d.ts +1 -0
  85. package/libxxx/components/TreeView V1/TreeView.d.ts +6 -0
  86. package/libxxx/components/TreeView V1/TreeView.stories.d.ts +6 -0
  87. package/libxxx/components/TreeView V1/TreeView.test.d.ts +1 -0
  88. package/libxxx/components/TreeView V1/context.d.ts +9 -0
  89. package/libxxx/components/TreeView V1/index.d.ts +1 -0
  90. package/libxxx/components/TreeView V1/sampleData.d.ts +71 -0
  91. package/libxxx/components/TreeView V1/types/tree.types.d.ts +21 -0
  92. package/libxxx/index.d.ts +14 -0
  93. package/libxxx/page/TreeNavigation/CustomNode/CustomNode.d.ts +3 -0
  94. package/libxxx/page/TreeNavigation/CustomNode/CustomNode.test.d.ts +1 -0
  95. package/libxxx/page/TreeNavigation/CustomNode/index.d.ts +1 -0
  96. package/libxxx/page/TreeNavigation/TreeNavigation.d.ts +8 -0
  97. package/libxxx/page/TreeNavigation/TreeNavigation.stories.d.ts +6 -0
  98. package/libxxx/page/TreeNavigation/hooks/useFetch.d.ts +14 -0
  99. package/libxxx/page/TreeNavigation/index.d.ts +1 -0
  100. package/libxxx/util/DynamicIcons.d.ts +10 -0
  101. package/libxxx/util/Loader.d.ts +6 -0
  102. package/libxxx/util/useID.d.ts +1 -0
  103. package/package.json +3 -3
  104. package/tsconfig.json +2 -2
  105. package/lib/index.esm.css +0 -1866
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import '../src/tailwind.css';
2
+ import '../lib/tailwind.css';
3
3
  import '../src/font.css';
4
4
 
5
5
  const Layout = ({ children }) => {
package/lib/index.esm.js CHANGED
@@ -7281,7 +7281,7 @@ var ButtonDropDown = function (_a) {
7281
7281
  return (React__default.createElement("div", { className: "flex items-stretch" },
7282
7282
  React__default.createElement(_Button, __assign$1({}, button, { className: "!rounded-r-none !border-r-0 hover:!border-r-0 " })),
7283
7283
  React__default.createElement("div", { className: cn("w-[1px]", button.type === "primary" ? "bg-purple-700" : "", button.type === "secondary" ? "bg-purple-200" : "", button.type === "alternative" ? "bg-gray-300" : "") }),
7284
- React__default.createElement(Dropdown, __assign$1({}, dropDown, { className: cn("h-[calc(100%)] !rounded-l-none border !border-l-0 px-2 transition-all hover:!border-l-0", button.type === "primary"
7284
+ React__default.createElement(Dropdown, __assign$1({}, dropDown, { className: cn("h-full rounded-l-none border !border-l-0 px-2 transition-all hover:!border-l-0", button.type === "primary"
7285
7285
  ? "border-purple-600 bg-purple-600 !text-white hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800"
7286
7286
  : "", button.type === "secondary"
7287
7287
  ? "border-purple-100 bg-purple-100 !text-purple-700 hover:border-purple-200 hover:bg-purple-200 active:!border-purple-300 active:!bg-purple-300"
package/lib/index.js CHANGED
@@ -7307,7 +7307,7 @@ var ButtonDropDown = function (_a) {
7307
7307
  return (React__default["default"].createElement("div", { className: "flex items-stretch" },
7308
7308
  React__default["default"].createElement(_Button, __assign$1({}, button, { className: "!rounded-r-none !border-r-0 hover:!border-r-0 " })),
7309
7309
  React__default["default"].createElement("div", { className: cn("w-[1px]", button.type === "primary" ? "bg-purple-700" : "", button.type === "secondary" ? "bg-purple-200" : "", button.type === "alternative" ? "bg-gray-300" : "") }),
7310
- React__default["default"].createElement(Dropdown, __assign$1({}, dropDown, { className: cn("h-[calc(100%)] !rounded-l-none border !border-l-0 px-2 transition-all hover:!border-l-0", button.type === "primary"
7310
+ React__default["default"].createElement(Dropdown, __assign$1({}, dropDown, { className: cn("h-full rounded-l-none border !border-l-0 px-2 transition-all hover:!border-l-0", button.type === "primary"
7311
7311
  ? "border-purple-600 bg-purple-600 !text-white hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800"
7312
7312
  : "", button.type === "secondary"
7313
7313
  ? "border-purple-100 bg-purple-100 !text-purple-700 hover:border-purple-200 hover:bg-purple-200 active:!border-purple-300 active:!bg-purple-300"
@@ -1,5 +1,5 @@
1
1
  /*
2
- ! tailwindcss v3.0.21 | MIT License | https://tailwindcss.com
2
+ ! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
3
3
  */
4
4
 
5
5
  /*
@@ -476,14 +476,18 @@ input::placeholder,textarea::placeholder {
476
476
  min-height: 1.5em;
477
477
  }
478
478
 
479
+ ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
480
+ padding-top: 0;
481
+ padding-bottom: 0;
482
+ }
483
+
479
484
  select {
480
485
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
481
486
  background-position: right 0.5rem center;
482
487
  background-repeat: no-repeat;
483
488
  background-size: 1.5em 1.5em;
484
489
  padding-right: 2.5rem;
485
- -webkit-print-color-adjust: exact;
486
- color-adjust: exact;
490
+ print-color-adjust: exact;
487
491
  }
488
492
 
489
493
  [multiple] {
@@ -492,8 +496,7 @@ select {
492
496
  background-repeat: unset;
493
497
  background-size: initial;
494
498
  padding-right: 0.75rem;
495
- -webkit-print-color-adjust: unset;
496
- color-adjust: unset;
499
+ print-color-adjust: unset;
497
500
  }
498
501
 
499
502
  [type='checkbox'],[type='radio'] {
@@ -501,8 +504,7 @@ select {
501
504
  -moz-appearance: none;
502
505
  appearance: none;
503
506
  padding: 0;
504
- -webkit-print-color-adjust: exact;
505
- color-adjust: exact;
507
+ print-color-adjust: exact;
506
508
  display: inline-block;
507
509
  vertical-align: middle;
508
510
  background-origin: border-box;
@@ -586,6 +588,7 @@ select {
586
588
  }
587
589
 
588
590
  [type='file']:focus {
591
+ outline: 1px solid ButtonText;
589
592
  outline: 1px auto -webkit-focus-ring-color;
590
593
  }
591
594
 
@@ -713,14 +716,14 @@ select {
713
716
  top: 1px;
714
717
  }
715
718
 
716
- .left-0 {
717
- left: 0px;
718
- }
719
-
720
719
  .bottom-10 {
721
720
  bottom: 2.5rem;
722
721
  }
723
722
 
723
+ .left-0 {
724
+ left: 0px;
725
+ }
726
+
724
727
  .left-4 {
725
728
  left: 1rem;
726
729
  }
@@ -741,6 +744,10 @@ select {
741
744
  z-index: 20;
742
745
  }
743
746
 
747
+ .z-\[2\] {
748
+ z-index: 2;
749
+ }
750
+
744
751
  .z-10 {
745
752
  z-index: 10;
746
753
  }
@@ -749,6 +756,10 @@ select {
749
756
  margin: auto;
750
757
  }
751
758
 
759
+ .\!mt-1 {
760
+ margin-top: 0.25rem !important;
761
+ }
762
+
752
763
  .mt-5 {
753
764
  margin-top: 1.25rem;
754
765
  }
@@ -1001,6 +1012,10 @@ select {
1001
1012
  width: 1.25rem;
1002
1013
  }
1003
1014
 
1015
+ .w-\[1px\] {
1016
+ width: 1px;
1017
+ }
1018
+
1004
1019
  .w-56 {
1005
1020
  width: 14rem;
1006
1021
  }
@@ -1140,6 +1155,10 @@ select {
1140
1155
  align-items: center;
1141
1156
  }
1142
1157
 
1158
+ .items-stretch {
1159
+ align-items: stretch;
1160
+ }
1161
+
1143
1162
  .justify-center {
1144
1163
  justify-content: center;
1145
1164
  }
@@ -1170,6 +1189,16 @@ select {
1170
1189
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
1171
1190
  }
1172
1191
 
1192
+ .\!divide-purple-700 > :not([hidden]) ~ :not([hidden]) {
1193
+ --tw-divide-opacity: 1 !important;
1194
+ border-color: rgb(88 0 212 / var(--tw-divide-opacity)) !important;
1195
+ }
1196
+
1197
+ .\!divide-purple-200 > :not([hidden]) ~ :not([hidden]) {
1198
+ --tw-divide-opacity: 1 !important;
1199
+ border-color: rgb(205 179 242 / var(--tw-divide-opacity)) !important;
1200
+ }
1201
+
1173
1202
  .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
1174
1203
  --tw-divide-opacity: 1;
1175
1204
  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
@@ -1201,10 +1230,6 @@ select {
1201
1230
  border-radius: 9999px;
1202
1231
  }
1203
1232
 
1204
- .rounded-md {
1205
- border-radius: 0.375rem;
1206
- }
1207
-
1208
1233
  .rounded {
1209
1234
  border-radius: 0.25rem;
1210
1235
  }
@@ -1213,29 +1238,34 @@ select {
1213
1238
  border-radius: 0px;
1214
1239
  }
1215
1240
 
1216
- .rounded-r-md {
1217
- border-top-right-radius: 0.375rem;
1218
- border-bottom-right-radius: 0.375rem;
1219
- }
1220
-
1221
1241
  .\!rounded-r-none {
1222
1242
  border-top-right-radius: 0px !important;
1223
1243
  border-bottom-right-radius: 0px !important;
1224
1244
  }
1225
1245
 
1226
- .\!rounded-l-md {
1227
- border-top-left-radius: 0.375rem !important;
1228
- border-bottom-left-radius: 0.375rem !important;
1246
+ .rounded-l-none {
1247
+ border-top-left-radius: 0px;
1248
+ border-bottom-left-radius: 0px;
1249
+ }
1250
+
1251
+ .rounded-r {
1252
+ border-top-right-radius: 0.25rem;
1253
+ border-bottom-right-radius: 0.25rem;
1229
1254
  }
1230
1255
 
1231
- .\!rounded-r-md {
1232
- border-top-right-radius: 0.375rem !important;
1233
- border-bottom-right-radius: 0.375rem !important;
1256
+ .\!rounded-l {
1257
+ border-top-left-radius: 0.25rem !important;
1258
+ border-bottom-left-radius: 0.25rem !important;
1234
1259
  }
1235
1260
 
1236
- .rounded-l-md {
1237
- border-top-left-radius: 0.375rem;
1238
- border-bottom-left-radius: 0.375rem;
1261
+ .\!rounded-r {
1262
+ border-top-right-radius: 0.25rem !important;
1263
+ border-bottom-right-radius: 0.25rem !important;
1264
+ }
1265
+
1266
+ .rounded-l {
1267
+ border-top-left-radius: 0.25rem;
1268
+ border-bottom-left-radius: 0.25rem;
1239
1269
  }
1240
1270
 
1241
1271
  .border-8 {
@@ -1250,6 +1280,10 @@ select {
1250
1280
  border-width: 2px;
1251
1281
  }
1252
1282
 
1283
+ .\!border-r-0 {
1284
+ border-right-width: 0px !important;
1285
+ }
1286
+
1253
1287
  .\!border-l-0 {
1254
1288
  border-left-width: 0px !important;
1255
1289
  }
@@ -1260,7 +1294,17 @@ select {
1260
1294
 
1261
1295
  .border-purple-700 {
1262
1296
  --tw-border-opacity: 1;
1263
- border-color: rgb(126 34 206 / var(--tw-border-opacity));
1297
+ border-color: rgb(88 0 212 / var(--tw-border-opacity));
1298
+ }
1299
+
1300
+ .border-purple-600 {
1301
+ --tw-border-opacity: 1;
1302
+ border-color: rgb(105 44 216 / var(--tw-border-opacity));
1303
+ }
1304
+
1305
+ .border-purple-100 {
1306
+ --tw-border-opacity: 1;
1307
+ border-color: rgb(222 204 246 / var(--tw-border-opacity));
1264
1308
  }
1265
1309
 
1266
1310
  .border-gray-300 {
@@ -1273,6 +1317,16 @@ select {
1273
1317
  border-color: rgb(252 165 165 / var(--tw-border-opacity));
1274
1318
  }
1275
1319
 
1320
+ .\!border-purple-700 {
1321
+ --tw-border-opacity: 1 !important;
1322
+ border-color: rgb(88 0 212 / var(--tw-border-opacity)) !important;
1323
+ }
1324
+
1325
+ .\!border-purple-200 {
1326
+ --tw-border-opacity: 1 !important;
1327
+ border-color: rgb(205 179 242 / var(--tw-border-opacity)) !important;
1328
+ }
1329
+
1276
1330
  .border-red-500 {
1277
1331
  --tw-border-opacity: 1;
1278
1332
  border-color: rgb(239 68 68 / var(--tw-border-opacity));
@@ -1284,7 +1338,7 @@ select {
1284
1338
 
1285
1339
  .border-purple-500 {
1286
1340
  --tw-border-opacity: 1;
1287
- border-color: rgb(168 85 247 / var(--tw-border-opacity));
1341
+ border-color: rgb(121 51 221 / var(--tw-border-opacity));
1288
1342
  }
1289
1343
 
1290
1344
  .\!border-red-500 {
@@ -1344,17 +1398,17 @@ select {
1344
1398
 
1345
1399
  .bg-green-400 {
1346
1400
  --tw-bg-opacity: 1;
1347
- background-color: rgb(74 222 128 / var(--tw-bg-opacity));
1401
+ background-color: rgb(52 211 153 / var(--tw-bg-opacity));
1348
1402
  }
1349
1403
 
1350
1404
  .bg-purple-600 {
1351
1405
  --tw-bg-opacity: 1;
1352
- background-color: rgb(147 51 234 / var(--tw-bg-opacity));
1406
+ background-color: rgb(105 44 216 / var(--tw-bg-opacity));
1353
1407
  }
1354
1408
 
1355
1409
  .bg-purple-100 {
1356
1410
  --tw-bg-opacity: 1;
1357
- background-color: rgb(243 232 255 / var(--tw-bg-opacity));
1411
+ background-color: rgb(222 204 246 / var(--tw-bg-opacity));
1358
1412
  }
1359
1413
 
1360
1414
  .bg-white {
@@ -1367,6 +1421,36 @@ select {
1367
1421
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
1368
1422
  }
1369
1423
 
1424
+ .bg-purple-700 {
1425
+ --tw-bg-opacity: 1;
1426
+ background-color: rgb(88 0 212 / var(--tw-bg-opacity));
1427
+ }
1428
+
1429
+ .bg-purple-200 {
1430
+ --tw-bg-opacity: 1;
1431
+ background-color: rgb(205 179 242 / var(--tw-bg-opacity));
1432
+ }
1433
+
1434
+ .\!bg-purple-600 {
1435
+ --tw-bg-opacity: 1 !important;
1436
+ background-color: rgb(105 44 216 / var(--tw-bg-opacity)) !important;
1437
+ }
1438
+
1439
+ .\!bg-purple-100 {
1440
+ --tw-bg-opacity: 1 !important;
1441
+ background-color: rgb(222 204 246 / var(--tw-bg-opacity)) !important;
1442
+ }
1443
+
1444
+ .\!bg-purple-800 {
1445
+ --tw-bg-opacity: 1 !important;
1446
+ background-color: rgb(79 0 191 / var(--tw-bg-opacity)) !important;
1447
+ }
1448
+
1449
+ .\!bg-purple-300 {
1450
+ --tw-bg-opacity: 1 !important;
1451
+ background-color: rgb(188 153 238 / var(--tw-bg-opacity)) !important;
1452
+ }
1453
+
1370
1454
  .bg-gray-200 {
1371
1455
  --tw-bg-opacity: 1;
1372
1456
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1374,7 +1458,7 @@ select {
1374
1458
 
1375
1459
  .bg-purple-500 {
1376
1460
  --tw-bg-opacity: 1;
1377
- background-color: rgb(168 85 247 / var(--tw-bg-opacity));
1461
+ background-color: rgb(121 51 221 / var(--tw-bg-opacity));
1378
1462
  }
1379
1463
 
1380
1464
  .bg-gray-50 {
@@ -1415,11 +1499,6 @@ select {
1415
1499
  padding-bottom: 0.25rem;
1416
1500
  }
1417
1501
 
1418
- .py-16 {
1419
- padding-top: 4rem;
1420
- padding-bottom: 4rem;
1421
- }
1422
-
1423
1502
  .px-3 {
1424
1503
  padding-left: 0.75rem;
1425
1504
  padding-right: 0.75rem;
@@ -1439,10 +1518,6 @@ select {
1439
1518
  padding-left: 0.75rem;
1440
1519
  }
1441
1520
 
1442
- .pr-10 {
1443
- padding-right: 2.5rem;
1444
- }
1445
-
1446
1521
  .pr-9 {
1447
1522
  padding-right: 2.25rem;
1448
1523
  }
@@ -1451,6 +1526,10 @@ select {
1451
1526
  padding-right: 1rem;
1452
1527
  }
1453
1528
 
1529
+ .pl-1 {
1530
+ padding-left: 0.25rem;
1531
+ }
1532
+
1454
1533
  .pl-0 {
1455
1534
  padding-left: 0px;
1456
1535
  }
@@ -1459,6 +1538,10 @@ select {
1459
1538
  padding-left: 0.5rem;
1460
1539
  }
1461
1540
 
1541
+ .pr-10 {
1542
+ padding-right: 2.5rem;
1543
+ }
1544
+
1462
1545
  .pl-10 {
1463
1546
  padding-left: 2.5rem;
1464
1547
  }
@@ -1513,7 +1596,7 @@ select {
1513
1596
  }
1514
1597
 
1515
1598
  .font-medium {
1516
- font-weight: 500;
1599
+ font-weight: 600;
1517
1600
  }
1518
1601
 
1519
1602
  .font-semibold {
@@ -1553,7 +1636,7 @@ select {
1553
1636
 
1554
1637
  .text-purple-700 {
1555
1638
  --tw-text-opacity: 1;
1556
- color: rgb(126 34 206 / var(--tw-text-opacity));
1639
+ color: rgb(88 0 212 / var(--tw-text-opacity));
1557
1640
  }
1558
1641
 
1559
1642
  .text-gray-700 {
@@ -1561,6 +1644,26 @@ select {
1561
1644
  color: rgb(55 65 81 / var(--tw-text-opacity));
1562
1645
  }
1563
1646
 
1647
+ .\!text-white {
1648
+ --tw-text-opacity: 1 !important;
1649
+ color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
1650
+ }
1651
+
1652
+ .\!text-purple-700 {
1653
+ --tw-text-opacity: 1 !important;
1654
+ color: rgb(88 0 212 / var(--tw-text-opacity)) !important;
1655
+ }
1656
+
1657
+ .\!text-gray-600 {
1658
+ --tw-text-opacity: 1 !important;
1659
+ color: rgb(75 85 99 / var(--tw-text-opacity)) !important;
1660
+ }
1661
+
1662
+ .\!text-purple-600 {
1663
+ --tw-text-opacity: 1 !important;
1664
+ color: rgb(105 44 216 / var(--tw-text-opacity)) !important;
1665
+ }
1666
+
1564
1667
  .text-gray-400 {
1565
1668
  --tw-text-opacity: 1;
1566
1669
  color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1573,7 +1676,7 @@ select {
1573
1676
 
1574
1677
  .text-purple-600 {
1575
1678
  --tw-text-opacity: 1;
1576
- color: rgb(147 51 234 / var(--tw-text-opacity));
1679
+ color: rgb(105 44 216 / var(--tw-text-opacity));
1577
1680
  }
1578
1681
 
1579
1682
  .text-red-500 {
@@ -1581,14 +1684,14 @@ select {
1581
1684
  color: rgb(239 68 68 / var(--tw-text-opacity));
1582
1685
  }
1583
1686
 
1584
- .text-gray-200 {
1687
+ .text-gray-500 {
1585
1688
  --tw-text-opacity: 1;
1586
- color: rgb(229 231 235 / var(--tw-text-opacity));
1689
+ color: rgb(107 114 128 / var(--tw-text-opacity));
1587
1690
  }
1588
1691
 
1589
- .text-gray-500 {
1692
+ .text-gray-200 {
1590
1693
  --tw-text-opacity: 1;
1591
- color: rgb(107 114 128 / var(--tw-text-opacity));
1694
+ color: rgb(229 231 235 / var(--tw-text-opacity));
1592
1695
  }
1593
1696
 
1594
1697
  .text-gray-700\/\[\.5\] {
@@ -1597,7 +1700,7 @@ select {
1597
1700
 
1598
1701
  .text-purple-500 {
1599
1702
  --tw-text-opacity: 1;
1600
- color: rgb(168 85 247 / var(--tw-text-opacity));
1703
+ color: rgb(121 51 221 / var(--tw-text-opacity));
1601
1704
  }
1602
1705
 
1603
1706
  .opacity-50 {
@@ -1612,10 +1715,8 @@ select {
1612
1715
  opacity: 1;
1613
1716
  }
1614
1717
 
1615
- .shadow-sm {
1616
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1617
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1618
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1718
+ .opacity-60 {
1719
+ opacity: 0.6;
1619
1720
  }
1620
1721
 
1621
1722
  .shadow-lg {
@@ -1624,6 +1725,12 @@ select {
1624
1725
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1625
1726
  }
1626
1727
 
1728
+ .shadow-sm {
1729
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1730
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1731
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1732
+ }
1733
+
1627
1734
  .shadow-none {
1628
1735
  --tw-shadow: 0 0 #0000;
1629
1736
  --tw-shadow-colored: 0 0 #0000;
@@ -1635,7 +1742,7 @@ select {
1635
1742
  }
1636
1743
 
1637
1744
  .outline-purple-500 {
1638
- outline-color: #a855f7;
1745
+ outline-color: #7933DD;
1639
1746
  }
1640
1747
 
1641
1748
  .\!outline-red-500 {
@@ -1741,14 +1848,37 @@ select {
1741
1848
  z-index: 10;
1742
1849
  }
1743
1850
 
1851
+ .hover\:\!border-r-0:hover {
1852
+ border-right-width: 0px !important;
1853
+ }
1854
+
1855
+ .hover\:\!border-l-0:hover {
1856
+ border-left-width: 0px !important;
1857
+ }
1858
+
1859
+ .hover\:border-purple-700:hover {
1860
+ --tw-border-opacity: 1;
1861
+ border-color: rgb(88 0 212 / var(--tw-border-opacity));
1862
+ }
1863
+
1864
+ .hover\:border-purple-200:hover {
1865
+ --tw-border-opacity: 1;
1866
+ border-color: rgb(205 179 242 / var(--tw-border-opacity));
1867
+ }
1868
+
1869
+ .hover\:border-gray-300:hover {
1870
+ --tw-border-opacity: 1;
1871
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
1872
+ }
1873
+
1744
1874
  .hover\:bg-purple-700:hover {
1745
1875
  --tw-bg-opacity: 1;
1746
- background-color: rgb(126 34 206 / var(--tw-bg-opacity));
1876
+ background-color: rgb(88 0 212 / var(--tw-bg-opacity));
1747
1877
  }
1748
1878
 
1749
1879
  .hover\:bg-purple-200:hover {
1750
1880
  --tw-bg-opacity: 1;
1751
- background-color: rgb(233 213 255 / var(--tw-bg-opacity));
1881
+ background-color: rgb(205 179 242 / var(--tw-bg-opacity));
1752
1882
  }
1753
1883
 
1754
1884
  .hover\:bg-gray-50:hover {
@@ -1761,6 +1891,11 @@ select {
1761
1891
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
1762
1892
  }
1763
1893
 
1894
+ .hover\:bg-white:hover {
1895
+ --tw-bg-opacity: 1;
1896
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1897
+ }
1898
+
1764
1899
  .hover\:bg-gray-100:hover {
1765
1900
  --tw-bg-opacity: 1;
1766
1901
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1768,7 +1903,7 @@ select {
1768
1903
 
1769
1904
  .hover\:text-purple-700:hover {
1770
1905
  --tw-text-opacity: 1;
1771
- color: rgb(126 34 206 / var(--tw-text-opacity));
1906
+ color: rgb(88 0 212 / var(--tw-text-opacity));
1772
1907
  }
1773
1908
 
1774
1909
  .hover\:text-gray-700:hover {
@@ -1798,7 +1933,12 @@ select {
1798
1933
 
1799
1934
  .focus\:border-purple-500:focus {
1800
1935
  --tw-border-opacity: 1;
1801
- border-color: rgb(168 85 247 / var(--tw-border-opacity));
1936
+ border-color: rgb(121 51 221 / var(--tw-border-opacity));
1937
+ }
1938
+
1939
+ .focus\:bg-purple-300:focus {
1940
+ --tw-bg-opacity: 1;
1941
+ background-color: rgb(188 153 238 / var(--tw-bg-opacity));
1802
1942
  }
1803
1943
 
1804
1944
  .focus\:outline-none:focus {
@@ -1814,7 +1954,7 @@ select {
1814
1954
 
1815
1955
  .focus\:ring-purple-500:focus {
1816
1956
  --tw-ring-opacity: 1;
1817
- --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
1957
+ --tw-ring-color: rgb(121 51 221 / var(--tw-ring-opacity));
1818
1958
  }
1819
1959
 
1820
1960
  .focus\:ring-red-500:focus {
@@ -1837,6 +1977,51 @@ select {
1837
1977
  --tw-ring-opacity: 0.75;
1838
1978
  }
1839
1979
 
1980
+ .active\:border-purple-800:active {
1981
+ --tw-border-opacity: 1;
1982
+ border-color: rgb(79 0 191 / var(--tw-border-opacity));
1983
+ }
1984
+
1985
+ .active\:border-purple-300:active {
1986
+ --tw-border-opacity: 1;
1987
+ border-color: rgb(188 153 238 / var(--tw-border-opacity));
1988
+ }
1989
+
1990
+ .active\:\!border-purple-800:active {
1991
+ --tw-border-opacity: 1 !important;
1992
+ border-color: rgb(79 0 191 / var(--tw-border-opacity)) !important;
1993
+ }
1994
+
1995
+ .active\:\!border-purple-300:active {
1996
+ --tw-border-opacity: 1 !important;
1997
+ border-color: rgb(188 153 238 / var(--tw-border-opacity)) !important;
1998
+ }
1999
+
2000
+ .active\:bg-purple-800:active {
2001
+ --tw-bg-opacity: 1;
2002
+ background-color: rgb(79 0 191 / var(--tw-bg-opacity));
2003
+ }
2004
+
2005
+ .active\:bg-purple-300:active {
2006
+ --tw-bg-opacity: 1;
2007
+ background-color: rgb(188 153 238 / var(--tw-bg-opacity));
2008
+ }
2009
+
2010
+ .active\:bg-gray-100:active {
2011
+ --tw-bg-opacity: 1;
2012
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
2013
+ }
2014
+
2015
+ .active\:\!bg-purple-800:active {
2016
+ --tw-bg-opacity: 1 !important;
2017
+ background-color: rgb(79 0 191 / var(--tw-bg-opacity)) !important;
2018
+ }
2019
+
2020
+ .active\:\!bg-purple-300:active {
2021
+ --tw-bg-opacity: 1 !important;
2022
+ background-color: rgb(188 153 238 / var(--tw-bg-opacity)) !important;
2023
+ }
2024
+
1840
2025
  .group:hover .group-hover\:block {
1841
2026
  display: block;
1842
2027
  }
@@ -1851,10 +2036,14 @@ select {
1851
2036
  color: rgb(239 68 68 / var(--tw-text-opacity));
1852
2037
  }
1853
2038
 
2039
+ .group:hover .group-hover\:opacity-100 {
2040
+ opacity: 1;
2041
+ }
2042
+
1854
2043
  @media (prefers-color-scheme: dark) {
1855
2044
  .dark\:text-purple-500 {
1856
2045
  --tw-text-opacity: 1;
1857
- color: rgb(168 85 247 / var(--tw-text-opacity));
2046
+ color: rgb(121 51 221 / var(--tw-text-opacity));
1858
2047
  }
1859
2048
  }
1860
2049
 
@@ -0,0 +1,3 @@
1
+ export declare const BRAND_CONFIG: {
2
+ brandTitle: string;
3
+ };
@@ -0,0 +1,3 @@
1
+ import { BRAND_CONFIG } from './brandCfg';
2
+ import { HIDE_CONTROL } from './storyCfg';
3
+ export { BRAND_CONFIG, HIDE_CONTROL };
@@ -0,0 +1,5 @@
1
+ export declare const HIDE_CONTROL: {
2
+ table: {
3
+ disable: boolean;
4
+ };
5
+ };
@@ -0,0 +1,27 @@
1
+ import { FC } from 'react';
2
+ export interface AvatarProps {
3
+ /**
4
+ * source url for the avatar
5
+ */
6
+ src?: string;
7
+ /**
8
+ * Initials we use as fallback if no src is passed
9
+ */
10
+ initials?: string;
11
+ /**
12
+ * optional status
13
+ */
14
+ status?: 'offline' | 'online' | 'busy';
15
+ /**
16
+ * avatar picture size (also affects status indicator)
17
+ */
18
+ size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
19
+ /**
20
+ * avatar img alt
21
+ */
22
+ alt?: string;
23
+ }
24
+ /**
25
+ * Avatar component that shows profile image or name initials of the user
26
+ */
27
+ export declare const Avatar: FC<AvatarProps>;
@@ -0,0 +1,6 @@
1
+ import { Meta } from '@storybook/react/types-6-0';
2
+ import { Story } from '@storybook/react';
3
+ import { AvatarProps } from './Avatar';
4
+ declare const _default: Meta<import("@storybook/react").Args>;
5
+ export default _default;
6
+ export declare const AvatarIcon: Story<AvatarProps>;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export * from './Avatar';