@lukso/web-components 1.117.0 → 1.118.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 (78) hide show
  1. package/dist/components/index.cjs +7 -7
  2. package/dist/components/index.js +7 -7
  3. package/dist/components/lukso-button/index.cjs +3 -3
  4. package/dist/components/lukso-button/index.js +3 -3
  5. package/dist/components/lukso-card/index.cjs +6 -6
  6. package/dist/components/lukso-card/index.js +6 -6
  7. package/dist/components/lukso-checkbox/index.cjs +3 -3
  8. package/dist/components/lukso-checkbox/index.js +3 -3
  9. package/dist/components/lukso-color-picker/index.cjs +4 -4
  10. package/dist/components/lukso-color-picker/index.js +4 -4
  11. package/dist/components/lukso-dropdown/index.cjs +7 -7
  12. package/dist/components/lukso-dropdown/index.js +7 -7
  13. package/dist/components/lukso-dropdown-option/index.cjs +2 -2
  14. package/dist/components/lukso-dropdown-option/index.js +2 -2
  15. package/dist/components/lukso-footer/index.cjs +2 -2
  16. package/dist/components/lukso-footer/index.js +2 -2
  17. package/dist/components/lukso-icon/icons/document-text.d.ts +3 -0
  18. package/dist/components/lukso-icon/icons/document-text.d.ts.map +1 -0
  19. package/dist/components/lukso-icon/index.cjs +27 -3
  20. package/dist/components/lukso-icon/index.d.ts.map +1 -1
  21. package/dist/components/lukso-icon/index.js +27 -3
  22. package/dist/components/lukso-image/index.cjs +4 -4
  23. package/dist/components/lukso-image/index.js +4 -4
  24. package/dist/components/lukso-input/index.cjs +4 -4
  25. package/dist/components/lukso-input/index.js +4 -4
  26. package/dist/components/lukso-modal/index.cjs +2 -2
  27. package/dist/components/lukso-modal/index.js +2 -2
  28. package/dist/components/lukso-navbar/index.cjs +5 -5
  29. package/dist/components/lukso-navbar/index.js +5 -5
  30. package/dist/components/lukso-pagination/index.cjs +4 -4
  31. package/dist/components/lukso-pagination/index.js +4 -4
  32. package/dist/components/lukso-profile/index.cjs +5 -5
  33. package/dist/components/lukso-profile/index.js +5 -5
  34. package/dist/components/lukso-progress/index.cjs +3 -3
  35. package/dist/components/lukso-progress/index.js +3 -3
  36. package/dist/components/lukso-sanitize/index.cjs +2 -2
  37. package/dist/components/lukso-sanitize/index.js +2 -2
  38. package/dist/components/lukso-search/index.cjs +7 -7
  39. package/dist/components/lukso-search/index.js +7 -7
  40. package/dist/components/lukso-select/index.cjs +75 -75
  41. package/dist/components/lukso-select/index.js +75 -75
  42. package/dist/components/lukso-share/index.cjs +24 -27
  43. package/dist/components/lukso-share/index.js +24 -27
  44. package/dist/components/lukso-switch/index.cjs +8 -11
  45. package/dist/components/lukso-switch/index.js +8 -11
  46. package/dist/components/lukso-tag/index.cjs +32 -35
  47. package/dist/components/lukso-tag/index.js +32 -35
  48. package/dist/components/lukso-terms/index.cjs +7 -10
  49. package/dist/components/lukso-terms/index.js +7 -10
  50. package/dist/components/lukso-test/index.cjs +13 -16
  51. package/dist/components/lukso-test/index.js +13 -16
  52. package/dist/components/lukso-textarea/index.cjs +83 -86
  53. package/dist/components/lukso-textarea/index.js +83 -86
  54. package/dist/components/lukso-tooltip/index.cjs +35 -38
  55. package/dist/components/lukso-tooltip/index.js +35 -38
  56. package/dist/components/lukso-username/index.cjs +50 -53
  57. package/dist/components/lukso-username/index.js +50 -53
  58. package/dist/components/lukso-wizard/index.cjs +42 -45
  59. package/dist/components/lukso-wizard/index.js +42 -45
  60. package/dist/{index-ff8d75cd.js → index-30c74dfe.js} +2 -2
  61. package/dist/{index-12775596.js → index-40811e43.js} +3 -3
  62. package/dist/{index-92dc158d.js → index-86a3fdc1.js} +3 -5
  63. package/dist/{index-67915f32.cjs → index-9f282d35.cjs} +2 -2
  64. package/dist/{index-104cf124.cjs → index-dbfb7d50.cjs} +3 -3
  65. package/dist/{index-68c61387.cjs → index-dda1809d.cjs} +3 -5
  66. package/dist/{index-7bb28a79.js → index-eb08047e.js} +1 -1
  67. package/dist/{index-3926da18.cjs → index-f564f46f.cjs} +1 -1
  68. package/dist/index.cjs +7 -7
  69. package/dist/index.js +7 -7
  70. package/dist/{property-eaa52bd9.js → property-140ef335.js} +1 -1
  71. package/dist/{property-bf2eee83.cjs → property-46482bf7.cjs} +1 -1
  72. package/dist/shared/tailwind-element/index.cjs +1 -1
  73. package/dist/shared/tailwind-element/index.js +1 -1
  74. package/dist/{state-1fc9a224.js → state-876605e4.js} +1 -1
  75. package/dist/{state-375dfffc.cjs → state-94c1d585.cjs} +1 -1
  76. package/dist/{style-map-5aef4b6f.js → style-map-15dde65e.js} +1 -1
  77. package/dist/{style-map-8e54f508.cjs → style-map-552ab28f.cjs} +1 -1
  78. package/package.json +1 -1
@@ -1,11 +1,11 @@
1
- import { T as TailwindStyledElement, x, E } from '../../index-92dc158d.js';
2
- import { n, t } from '../../property-eaa52bd9.js';
3
- import { r } from '../../state-1fc9a224.js';
1
+ import { T as TailwindStyledElement, x, E } from '../../index-86a3fdc1.js';
2
+ import { n, t } from '../../property-140ef335.js';
3
+ import { r } from '../../state-876605e4.js';
4
4
  import { c as ce } from '../../index-d14b6a34.js';
5
5
  import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-90c03edf.js';
7
7
  import '../lukso-icon/index.js';
8
- import '../../style-map-5aef4b6f.js';
8
+ import '../../style-map-15dde65e.js';
9
9
  import '../../directive-2bb7789e.js';
10
10
 
11
11
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -23,95 +23,92 @@ var __decorateClass = (decorators, target, key, kind) => {
23
23
  };
24
24
  const FOCUS_DELAY_MS = 10;
25
25
  let LuksoTextarea = class extends TailwindStyledElement(style) {
26
- constructor() {
27
- super(...arguments);
28
- this.value = "";
29
- this.name = "";
30
- this.placeholder = "";
31
- this.label = "";
32
- this.id = "";
33
- this.ref = void 0;
34
- this.description = "";
35
- this.error = "";
36
- this.customClass = "";
37
- this.isFullWidth = false;
38
- this.isReadonly = false;
39
- this.isDisabled = false;
40
- this.autofocus = false;
41
- this.borderless = false;
42
- this.isNonResizable = false;
43
- this.keepFocusOnEscape = false;
44
- this.size = "medium";
45
- this.rows = 4;
46
- this.hasFocus = false;
47
- this.hasHighlight = false;
48
- this.styles = ce({
49
- slots: {
50
- wrapper: "group flex",
51
- input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
26
+ value = "";
27
+ name = "";
28
+ placeholder = "";
29
+ label = "";
30
+ id = "";
31
+ ref = void 0;
32
+ description = "";
33
+ error = "";
34
+ customClass = "";
35
+ isFullWidth = false;
36
+ isReadonly = false;
37
+ isDisabled = false;
38
+ autofocus = false;
39
+ borderless = false;
40
+ isNonResizable = false;
41
+ keepFocusOnEscape = false;
42
+ size = "medium";
43
+ rows = 4;
44
+ hasFocus = false;
45
+ hasHighlight = false;
46
+ styles = ce({
47
+ slots: {
48
+ wrapper: "group flex",
49
+ input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
52
50
  outline-none transition transition-all duration-150 appearance-none`
53
- },
54
- variants: {
55
- hasError: {
56
- true: {
57
- input: "border-red-85"
58
- },
59
- false: {
60
- input: "border-neutral-90"
61
- }
62
- },
63
- hasHighlight: {
64
- true: {
65
- input: "border-neutral-35"
66
- }
67
- },
68
- borderless: {
69
- true: { input: "border-0" },
70
- false: { input: "border" }
51
+ },
52
+ variants: {
53
+ hasError: {
54
+ true: {
55
+ input: "border-red-85"
71
56
  },
72
- isReadonly: {
73
- true: { input: "cursor-not-allowed" }
74
- },
75
- isDisabled: {
76
- true: {
77
- input: "text-neutral-60 cursor-not-allowed"
78
- },
79
- false: { input: "text-neutral-20" }
80
- },
81
- isFullWidth: {
82
- true: { wrapper: "w-full" },
83
- false: { wrapper: "w-[350px]" }
57
+ false: {
58
+ input: "border-neutral-90"
59
+ }
60
+ },
61
+ hasHighlight: {
62
+ true: {
63
+ input: "border-neutral-35"
64
+ }
65
+ },
66
+ borderless: {
67
+ true: { input: "border-0" },
68
+ false: { input: "border" }
69
+ },
70
+ isReadonly: {
71
+ true: { input: "cursor-not-allowed" }
72
+ },
73
+ isDisabled: {
74
+ true: {
75
+ input: "text-neutral-60 cursor-not-allowed"
84
76
  },
85
- size: {
86
- small: {
87
- input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
88
- },
89
- medium: {
90
- input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
91
- }
77
+ false: { input: "text-neutral-20" }
78
+ },
79
+ isFullWidth: {
80
+ true: { wrapper: "w-full" },
81
+ false: { wrapper: "w-[350px]" }
82
+ },
83
+ size: {
84
+ small: {
85
+ input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
92
86
  },
93
- isNonResizable: {
94
- true: {
95
- input: "resize-none"
96
- }
87
+ medium: {
88
+ input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
97
89
  }
98
90
  },
99
- compoundVariants: [
100
- {
101
- isFullWidth: false,
102
- size: "small",
103
- class: { wrapper: "w-[210px]" }
104
- },
105
- {
106
- hasHighlight: true,
107
- hasError: true,
108
- class: {
109
- input: "border-red-65"
110
- }
91
+ isNonResizable: {
92
+ true: {
93
+ input: "resize-none"
111
94
  }
112
- ]
113
- });
114
- }
95
+ }
96
+ },
97
+ compoundVariants: [
98
+ {
99
+ isFullWidth: false,
100
+ size: "small",
101
+ class: { wrapper: "w-[210px]" }
102
+ },
103
+ {
104
+ hasHighlight: true,
105
+ hasError: true,
106
+ class: {
107
+ input: "border-red-65"
108
+ }
109
+ }
110
+ ]
111
+ });
115
112
  connectedCallback() {
116
113
  super.connectedCallback();
117
114
  if (this.autofocus) {
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-68c61387.cjs');
6
- const property = require('../../property-bf2eee83.cjs');
7
- const state = require('../../state-375dfffc.cjs');
5
+ const shared_tailwindElement_index = require('../../index-dda1809d.cjs');
6
+ const property = require('../../property-46482bf7.cjs');
7
+ const state = require('../../state-94c1d585.cjs');
8
8
  const index = require('../../index-2b104ecb.cjs');
9
- const styleMap = require('../../style-map-8e54f508.cjs');
9
+ const styleMap = require('../../style-map-552ab28f.cjs');
10
10
  require('../../directive-8278ab14.cjs');
11
11
 
12
12
  var top = 'top';
@@ -3460,42 +3460,39 @@ var __decorateClass = (decorators, target, key, kind) => {
3460
3460
  return result;
3461
3461
  };
3462
3462
  exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.TailwindStyledElement(style) {
3463
- constructor() {
3464
- super(...arguments);
3465
- this.variant = "light";
3466
- this.size = "medium";
3467
- this.placement = "top";
3468
- this.trigger = "mouseenter";
3469
- this.text = "";
3470
- this.maxWidth = 300;
3471
- this.show = false;
3472
- this.hideOnClick = "true";
3473
- this.isClipboardCopy = false;
3474
- this.copyText = "";
3475
- this.copyValue = "";
3476
- this.offset = 10;
3477
- this.options = "";
3478
- this.showArrow = true;
3479
- this.showDelay = 300;
3480
- this.hideDelay = 300;
3481
- this.showCopy = false;
3482
- this.optionsParsed = [];
3483
- this.tooltipInstance = void 0;
3484
- this.styles = index.ce({
3485
- slots: {
3486
- tooltip: "hidden",
3487
- trigger: "cursor-pointer flex flex-col items-center",
3488
- options: "rounded-4 hover:bg-neutral-95"
3489
- },
3490
- variants: {
3491
- hasNoText: {
3492
- true: {
3493
- trigger: "cursor-default"
3494
- }
3463
+ variant = "light";
3464
+ size = "medium";
3465
+ placement = "top";
3466
+ trigger = "mouseenter";
3467
+ text = "";
3468
+ maxWidth = 300;
3469
+ show = false;
3470
+ hideOnClick = "true";
3471
+ isClipboardCopy = false;
3472
+ copyText = "";
3473
+ copyValue = "";
3474
+ offset = 10;
3475
+ options = "";
3476
+ showArrow = true;
3477
+ showDelay = 300;
3478
+ hideDelay = 300;
3479
+ showCopy = false;
3480
+ optionsParsed = [];
3481
+ tooltipInstance = void 0;
3482
+ styles = index.ce({
3483
+ slots: {
3484
+ tooltip: "hidden",
3485
+ trigger: "cursor-pointer flex flex-col items-center",
3486
+ options: "rounded-4 hover:bg-neutral-95"
3487
+ },
3488
+ variants: {
3489
+ hasNoText: {
3490
+ true: {
3491
+ trigger: "cursor-default"
3495
3492
  }
3496
3493
  }
3497
- });
3498
- }
3494
+ }
3495
+ });
3499
3496
  hideOnClickCheck() {
3500
3497
  if (this.hideOnClick === "toggle") {
3501
3498
  return this.hideOnClick;
@@ -1,8 +1,8 @@
1
- import { T as TailwindStyledElement, x } from '../../index-92dc158d.js';
2
- import { n, t } from '../../property-eaa52bd9.js';
3
- import { r } from '../../state-1fc9a224.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-86a3fdc1.js';
2
+ import { n, t } from '../../property-140ef335.js';
3
+ import { r } from '../../state-876605e4.js';
4
4
  import { c as ce } from '../../index-d14b6a34.js';
5
- import { o } from '../../style-map-5aef4b6f.js';
5
+ import { o } from '../../style-map-15dde65e.js';
6
6
  import '../../directive-2bb7789e.js';
7
7
 
8
8
  var top = 'top';
@@ -3456,42 +3456,39 @@ var __decorateClass = (decorators, target, key, kind) => {
3456
3456
  return result;
3457
3457
  };
3458
3458
  let LuksoTooltip = class extends TailwindStyledElement(style) {
3459
- constructor() {
3460
- super(...arguments);
3461
- this.variant = "light";
3462
- this.size = "medium";
3463
- this.placement = "top";
3464
- this.trigger = "mouseenter";
3465
- this.text = "";
3466
- this.maxWidth = 300;
3467
- this.show = false;
3468
- this.hideOnClick = "true";
3469
- this.isClipboardCopy = false;
3470
- this.copyText = "";
3471
- this.copyValue = "";
3472
- this.offset = 10;
3473
- this.options = "";
3474
- this.showArrow = true;
3475
- this.showDelay = 300;
3476
- this.hideDelay = 300;
3477
- this.showCopy = false;
3478
- this.optionsParsed = [];
3479
- this.tooltipInstance = void 0;
3480
- this.styles = ce({
3481
- slots: {
3482
- tooltip: "hidden",
3483
- trigger: "cursor-pointer flex flex-col items-center",
3484
- options: "rounded-4 hover:bg-neutral-95"
3485
- },
3486
- variants: {
3487
- hasNoText: {
3488
- true: {
3489
- trigger: "cursor-default"
3490
- }
3459
+ variant = "light";
3460
+ size = "medium";
3461
+ placement = "top";
3462
+ trigger = "mouseenter";
3463
+ text = "";
3464
+ maxWidth = 300;
3465
+ show = false;
3466
+ hideOnClick = "true";
3467
+ isClipboardCopy = false;
3468
+ copyText = "";
3469
+ copyValue = "";
3470
+ offset = 10;
3471
+ options = "";
3472
+ showArrow = true;
3473
+ showDelay = 300;
3474
+ hideDelay = 300;
3475
+ showCopy = false;
3476
+ optionsParsed = [];
3477
+ tooltipInstance = void 0;
3478
+ styles = ce({
3479
+ slots: {
3480
+ tooltip: "hidden",
3481
+ trigger: "cursor-pointer flex flex-col items-center",
3482
+ options: "rounded-4 hover:bg-neutral-95"
3483
+ },
3484
+ variants: {
3485
+ hasNoText: {
3486
+ true: {
3487
+ trigger: "cursor-default"
3491
3488
  }
3492
3489
  }
3493
- });
3494
- }
3490
+ }
3491
+ });
3495
3492
  hideOnClickCheck() {
3496
3493
  if (this.hideOnClick === "toggle") {
3497
3494
  return this.hideOnClick;
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-68c61387.cjs');
6
- const property = require('../../property-bf2eee83.cjs');
5
+ const shared_tailwindElement_index = require('../../index-dda1809d.cjs');
6
+ const property = require('../../property-46482bf7.cjs');
7
7
  const index = require('../../index-2b104ecb.cjs');
8
- const index$1 = require('../../index-3926da18.cjs');
8
+ const index$1 = require('../../index-f564f46f.cjs');
9
9
  require('../../tailwind-config.cjs');
10
10
  const cn = require('../../cn-b6daa995.cjs');
11
11
  require('../../directive-8278ab14.cjs');
@@ -1178,60 +1178,57 @@ var __decorateClass = (decorators, target, key, kind) => {
1178
1178
  return result;
1179
1179
  };
1180
1180
  exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index.TailwindStyledElement(style) {
1181
- constructor() {
1182
- super(...arguments);
1183
- this.name = "";
1184
- this.address = "";
1185
- this.maxWidth = 200;
1186
- this.size = "large";
1187
- this.sliceBy = 8;
1188
- this.addressColor = "";
1189
- this.nameColor = "";
1190
- this.customClass = "";
1191
- this.hidePrefix = false;
1192
- this.prefix = "@";
1193
- this.noTransform = false;
1194
- /** Width of the first 4 bytes of the address */
1195
- this.bytesWidth = 52;
1196
- this.styles = index.ce({
1197
- slots: {
1198
- wrapper: "inline-flex",
1199
- name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
1200
- address: "inline-block",
1201
- bytes: "inline-block"
1202
- },
1203
- variants: {
1204
- size: {
1205
- "x-small": {
1206
- wrapper: "paragraph-ptmono-10-bold"
1207
- },
1208
- small: {
1209
- wrapper: "paragraph-ptmono-12-bold"
1210
- },
1211
- medium: {
1212
- wrapper: "paragraph-ptmono-14-bold"
1213
- },
1214
- large: {
1215
- wrapper: "paragraph-ptmono-16-bold"
1216
- },
1217
- "x-large": {
1218
- wrapper: "paragraph-ptmono-24-bold"
1219
- }
1181
+ name = "";
1182
+ address = "";
1183
+ maxWidth = 200;
1184
+ size = "large";
1185
+ sliceBy = 8;
1186
+ addressColor = "";
1187
+ nameColor = "";
1188
+ customClass = "";
1189
+ hidePrefix = false;
1190
+ prefix = "@";
1191
+ noTransform = false;
1192
+ /** Width of the first 4 bytes of the address */
1193
+ bytesWidth = 52;
1194
+ styles = index.ce({
1195
+ slots: {
1196
+ wrapper: "inline-flex",
1197
+ name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
1198
+ address: "inline-block",
1199
+ bytes: "inline-block"
1200
+ },
1201
+ variants: {
1202
+ size: {
1203
+ "x-small": {
1204
+ wrapper: "paragraph-ptmono-10-bold"
1205
+ },
1206
+ small: {
1207
+ wrapper: "paragraph-ptmono-12-bold"
1220
1208
  },
1221
- hasNameColor: {
1222
- false: {
1223
- name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
1224
- }
1209
+ medium: {
1210
+ wrapper: "paragraph-ptmono-14-bold"
1225
1211
  },
1226
- hasAddressColor: {
1227
- false: {
1228
- address: "text-neutral-20",
1229
- bytes: "text-neutral-60"
1230
- }
1212
+ large: {
1213
+ wrapper: "paragraph-ptmono-16-bold"
1214
+ },
1215
+ "x-large": {
1216
+ wrapper: "paragraph-ptmono-24-bold"
1217
+ }
1218
+ },
1219
+ hasNameColor: {
1220
+ false: {
1221
+ name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
1222
+ }
1223
+ },
1224
+ hasAddressColor: {
1225
+ false: {
1226
+ address: "text-neutral-20",
1227
+ bytes: "text-neutral-60"
1231
1228
  }
1232
1229
  }
1233
- });
1234
- }
1230
+ }
1231
+ });
1235
1232
  transformName(name) {
1236
1233
  if (this.noTransform) {
1237
1234
  return name;
@@ -1,7 +1,7 @@
1
- import { T as TailwindStyledElement, x, E } from '../../index-92dc158d.js';
2
- import { n, t } from '../../property-eaa52bd9.js';
1
+ import { T as TailwindStyledElement, x, E } from '../../index-86a3fdc1.js';
2
+ import { n, t } from '../../property-140ef335.js';
3
3
  import { c as ce } from '../../index-d14b6a34.js';
4
- import { c as customStyleMap } from '../../index-7bb28a79.js';
4
+ import { c as customStyleMap } from '../../index-eb08047e.js';
5
5
  import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-90c03edf.js';
7
7
  import '../../directive-2bb7789e.js';
@@ -1174,60 +1174,57 @@ var __decorateClass = (decorators, target, key, kind) => {
1174
1174
  return result;
1175
1175
  };
1176
1176
  let LuksoUsername = class extends TailwindStyledElement(style) {
1177
- constructor() {
1178
- super(...arguments);
1179
- this.name = "";
1180
- this.address = "";
1181
- this.maxWidth = 200;
1182
- this.size = "large";
1183
- this.sliceBy = 8;
1184
- this.addressColor = "";
1185
- this.nameColor = "";
1186
- this.customClass = "";
1187
- this.hidePrefix = false;
1188
- this.prefix = "@";
1189
- this.noTransform = false;
1190
- /** Width of the first 4 bytes of the address */
1191
- this.bytesWidth = 52;
1192
- this.styles = ce({
1193
- slots: {
1194
- wrapper: "inline-flex",
1195
- name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
1196
- address: "inline-block",
1197
- bytes: "inline-block"
1198
- },
1199
- variants: {
1200
- size: {
1201
- "x-small": {
1202
- wrapper: "paragraph-ptmono-10-bold"
1203
- },
1204
- small: {
1205
- wrapper: "paragraph-ptmono-12-bold"
1206
- },
1207
- medium: {
1208
- wrapper: "paragraph-ptmono-14-bold"
1209
- },
1210
- large: {
1211
- wrapper: "paragraph-ptmono-16-bold"
1212
- },
1213
- "x-large": {
1214
- wrapper: "paragraph-ptmono-24-bold"
1215
- }
1177
+ name = "";
1178
+ address = "";
1179
+ maxWidth = 200;
1180
+ size = "large";
1181
+ sliceBy = 8;
1182
+ addressColor = "";
1183
+ nameColor = "";
1184
+ customClass = "";
1185
+ hidePrefix = false;
1186
+ prefix = "@";
1187
+ noTransform = false;
1188
+ /** Width of the first 4 bytes of the address */
1189
+ bytesWidth = 52;
1190
+ styles = ce({
1191
+ slots: {
1192
+ wrapper: "inline-flex",
1193
+ name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
1194
+ address: "inline-block",
1195
+ bytes: "inline-block"
1196
+ },
1197
+ variants: {
1198
+ size: {
1199
+ "x-small": {
1200
+ wrapper: "paragraph-ptmono-10-bold"
1201
+ },
1202
+ small: {
1203
+ wrapper: "paragraph-ptmono-12-bold"
1216
1204
  },
1217
- hasNameColor: {
1218
- false: {
1219
- name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
1220
- }
1205
+ medium: {
1206
+ wrapper: "paragraph-ptmono-14-bold"
1221
1207
  },
1222
- hasAddressColor: {
1223
- false: {
1224
- address: "text-neutral-20",
1225
- bytes: "text-neutral-60"
1226
- }
1208
+ large: {
1209
+ wrapper: "paragraph-ptmono-16-bold"
1210
+ },
1211
+ "x-large": {
1212
+ wrapper: "paragraph-ptmono-24-bold"
1213
+ }
1214
+ },
1215
+ hasNameColor: {
1216
+ false: {
1217
+ name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
1218
+ }
1219
+ },
1220
+ hasAddressColor: {
1221
+ false: {
1222
+ address: "text-neutral-20",
1223
+ bytes: "text-neutral-60"
1227
1224
  }
1228
1225
  }
1229
- });
1230
- }
1226
+ }
1227
+ });
1231
1228
  transformName(name) {
1232
1229
  if (this.noTransform) {
1233
1230
  return name;