@lukso/web-components 1.135.0 → 1.136.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 (93) hide show
  1. package/dist/components/index.cjs +3 -3
  2. package/dist/components/index.js +3 -3
  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 +63 -6
  6. package/dist/components/lukso-card/index.d.ts +2 -1
  7. package/dist/components/lukso-card/index.d.ts.map +1 -1
  8. package/dist/components/lukso-card/index.js +63 -6
  9. package/dist/components/lukso-card/lukso-card.stories.d.ts +2 -0
  10. package/dist/components/lukso-card/lukso-card.stories.d.ts.map +1 -1
  11. package/dist/components/lukso-checkbox/index.cjs +3 -3
  12. package/dist/components/lukso-checkbox/index.js +3 -3
  13. package/dist/components/lukso-color-picker/index.cjs +4 -4
  14. package/dist/components/lukso-color-picker/index.js +4 -4
  15. package/dist/components/lukso-dropdown/index.cjs +4 -4
  16. package/dist/components/lukso-dropdown/index.js +4 -4
  17. package/dist/components/lukso-dropdown-option/index.cjs +2 -2
  18. package/dist/components/lukso-dropdown-option/index.js +2 -2
  19. package/dist/components/lukso-footer/index.cjs +2 -2
  20. package/dist/components/lukso-footer/index.js +2 -2
  21. package/dist/components/lukso-icon/index.cjs +3 -3
  22. package/dist/components/lukso-icon/index.js +3 -3
  23. package/dist/components/lukso-image/index.cjs +4 -4
  24. package/dist/components/lukso-image/index.js +4 -4
  25. package/dist/components/lukso-input/index.cjs +3 -3
  26. package/dist/components/lukso-input/index.js +3 -3
  27. package/dist/components/lukso-modal/index.cjs +2 -2
  28. package/dist/components/lukso-modal/index.js +2 -2
  29. package/dist/components/lukso-navbar/index.cjs +3 -3
  30. package/dist/components/lukso-navbar/index.js +3 -3
  31. package/dist/components/lukso-pagination/index.cjs +3 -3
  32. package/dist/components/lukso-pagination/index.js +3 -3
  33. package/dist/components/lukso-profile/index.cjs +3 -3
  34. package/dist/components/lukso-profile/index.js +3 -3
  35. package/dist/components/lukso-progress/index.cjs +3 -3
  36. package/dist/components/lukso-progress/index.js +3 -3
  37. package/dist/components/lukso-radio/index.cjs +3 -3
  38. package/dist/components/lukso-radio/index.js +3 -3
  39. package/dist/components/lukso-radio-group/index.cjs +3 -3
  40. package/dist/components/lukso-radio-group/index.js +3 -3
  41. package/dist/components/lukso-sanitize/index.cjs +2 -2
  42. package/dist/components/lukso-sanitize/index.js +2 -2
  43. package/dist/components/lukso-search/index.cjs +5 -5
  44. package/dist/components/lukso-search/index.js +5 -5
  45. package/dist/components/lukso-select/index.cjs +5 -5
  46. package/dist/components/lukso-select/index.js +5 -5
  47. package/dist/components/lukso-share/index.cjs +2 -2
  48. package/dist/components/lukso-share/index.js +2 -2
  49. package/dist/components/lukso-switch/index.cjs +3 -3
  50. package/dist/components/lukso-switch/index.js +3 -3
  51. package/dist/components/lukso-tag/index.cjs +3 -3
  52. package/dist/components/lukso-tag/index.js +3 -3
  53. package/dist/components/lukso-terms/index.cjs +3 -3
  54. package/dist/components/lukso-terms/index.js +3 -3
  55. package/dist/components/lukso-test/index.cjs +3 -3
  56. package/dist/components/lukso-test/index.js +3 -3
  57. package/dist/components/lukso-textarea/index.cjs +3 -3
  58. package/dist/components/lukso-textarea/index.js +3 -3
  59. package/dist/components/lukso-tooltip/index.cjs +3 -3
  60. package/dist/components/lukso-tooltip/index.js +3 -3
  61. package/dist/components/lukso-username/index.cjs +4 -4
  62. package/dist/components/lukso-username/index.js +4 -4
  63. package/dist/components/lukso-wizard/index.cjs +3 -3
  64. package/dist/components/lukso-wizard/index.js +3 -3
  65. package/dist/{directive-helpers-DArp4lXT.cjs → directive-helpers-H8p9PdKN.cjs} +1 -1
  66. package/dist/{directive-helpers-CAIm9TDG.js → directive-helpers-XXAgyWCB.js} +1 -1
  67. package/dist/index-BMxMUsIi.cjs +50 -0
  68. package/dist/{index-D1v8ZgtZ.cjs → index-CLQY_oJv.cjs} +1 -1
  69. package/dist/{index-DHAAIAHr.js → index-CngaNvkX.js} +1 -1
  70. package/dist/index-DAgkWi0r.js +41 -0
  71. package/dist/{index--44JsQ_1.js → index-DqBf0kRy.js} +3 -3
  72. package/dist/{index-D19a1K8E.cjs → index-RU2Ma8ic.cjs} +3 -3
  73. package/dist/{index-CUMvAhRx.cjs → index-S_Dlt9s3.cjs} +2 -2
  74. package/dist/{index-Dsu77DGF.js → index-mgbCsUYd.js} +2 -2
  75. package/dist/index.cjs +3 -3
  76. package/dist/index.js +3 -3
  77. package/dist/{property-DGVQMLCH.cjs → property-CoW1aNZS.cjs} +1 -1
  78. package/dist/{property-CYbm8aZx.js → property-pT168uml.js} +1 -1
  79. package/dist/shared/tailwind-element/index.cjs +1 -1
  80. package/dist/shared/tailwind-element/index.js +1 -1
  81. package/dist/{state-CCMDzTj3.cjs → state-4AI1NTU_.cjs} +1 -1
  82. package/dist/{state-hoCBDnpA.js → state-B8LewVrr.js} +1 -1
  83. package/dist/{style-map-VlU1Vn2Q.cjs → style-map-CSf_9JOX.cjs} +1 -1
  84. package/dist/{style-map-Min8ajOg.js → style-map-tFqWcuNo.js} +1 -1
  85. package/dist/styles/main.css +1 -1
  86. package/package.json +1 -1
  87. package/tailwind.config.cjs +6 -1
  88. package/tools/sass/component.scss +3 -3
  89. package/tools/sass/main.scss +6 -6
  90. package/tools/sass/typography.scss +1 -1
  91. package/tools/styles/main.css +1 -1
  92. package/dist/index-BMFENeRI.cjs +0 -50
  93. package/dist/index-axQAcayx.js +0 -41
@@ -15,7 +15,7 @@ const components_luksoInput_index = require('./lukso-input/index.cjs');
15
15
  const components_luksoModal_index = require('./lukso-modal/index.cjs');
16
16
  const components_luksoNavbar_index = require('./lukso-navbar/index.cjs');
17
17
  const components_luksoPagination_index = require('./lukso-pagination/index.cjs');
18
- const components_luksoProfile_index = require('../index-CUMvAhRx.cjs');
18
+ const components_luksoProfile_index = require('../index-S_Dlt9s3.cjs');
19
19
  const components_luksoProgress_index = require('./lukso-progress/index.cjs');
20
20
  const components_luksoRadio_index = require('./lukso-radio/index.cjs');
21
21
  const components_luksoRadioGroup_index = require('./lukso-radio-group/index.cjs');
@@ -29,9 +29,9 @@ const components_luksoTerms_index = require('./lukso-terms/index.cjs');
29
29
  const components_luksoTest_index = require('./lukso-test/index.cjs');
30
30
  const components_luksoTextarea_index = require('./lukso-textarea/index.cjs');
31
31
  const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
32
- const components_luksoUsername_index = require('../index-D19a1K8E.cjs');
32
+ const components_luksoUsername_index = require('../index-RU2Ma8ic.cjs');
33
33
  const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
34
- const shared_tailwindElement_index = require('../index-BMFENeRI.cjs');
34
+ const shared_tailwindElement_index = require('../index-BMxMUsIi.cjs');
35
35
  require('../cn-CNdKneQ1.cjs');
36
36
 
37
37
 
@@ -11,7 +11,7 @@ export { LuksoInput } from './lukso-input/index.js';
11
11
  export { LuksoModal } from './lukso-modal/index.js';
12
12
  export { LuksoNavbar } from './lukso-navbar/index.js';
13
13
  export { LuksoPagination } from './lukso-pagination/index.js';
14
- export { L as LuksoProfile } from '../index-Dsu77DGF.js';
14
+ export { L as LuksoProfile } from '../index-mgbCsUYd.js';
15
15
  export { LuksoProgress } from './lukso-progress/index.js';
16
16
  export { LuksoRadio } from './lukso-radio/index.js';
17
17
  export { LuksoRadioGroup } from './lukso-radio-group/index.js';
@@ -25,7 +25,7 @@ export { LuksoTerms } from './lukso-terms/index.js';
25
25
  export { LuksoTest } from './lukso-test/index.js';
26
26
  export { LuksoTextarea } from './lukso-textarea/index.js';
27
27
  export { LuksoTooltip } from './lukso-tooltip/index.js';
28
- export { L as LuksoUsername } from '../index--44JsQ_1.js';
28
+ export { L as LuksoUsername } from '../index-DqBf0kRy.js';
29
29
  export { LuksoWizard } from './lukso-wizard/index.js';
30
- export { a as TailwindElement, T as TailwindStyledElement } from '../index-axQAcayx.js';
30
+ export { a as TailwindElement, T as TailwindStyledElement } from '../index-DAgkWi0r.js';
31
31
  import '../cn-Cu9aP49j.js';
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const state = require('../../state-CCMDzTj3.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const state = require('../../state-4AI1NTU_.cjs');
8
8
  const index = require('../../index-CaJky2qL.cjs');
9
9
  require('../../tailwind-config.cjs');
10
10
  const cn = require('../../cn-CNdKneQ1.cjs');
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, E, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
3
- import { r } from '../../state-hoCBDnpA.js';
1
+ import { T as TailwindStyledElement, E, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
+ import { r } from '../../state-B8LewVrr.js';
4
4
  import { c as ce } from '../../index-B9iart53.js';
5
5
  import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-Cu9aP49j.js';
@@ -2,15 +2,15 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const components_luksoProfile_index = require('../../index-CUMvAhRx.cjs');
6
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
7
- const property = require('../../property-DGVQMLCH.cjs');
8
- const state = require('../../state-CCMDzTj3.cjs');
9
- const styleMap = require('../../style-map-VlU1Vn2Q.cjs');
5
+ const components_luksoProfile_index = require('../../index-S_Dlt9s3.cjs');
6
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
7
+ const property = require('../../property-CoW1aNZS.cjs');
8
+ const state = require('../../state-4AI1NTU_.cjs');
9
+ const styleMap = require('../../style-map-CSf_9JOX.cjs');
10
10
  const index = require('../../index-CaJky2qL.cjs');
11
11
  require('../../tailwind-config.cjs');
12
12
  const cn = require('../../cn-CNdKneQ1.cjs');
13
- const index$1 = require('../../index-D1v8ZgtZ.cjs');
13
+ const index$1 = require('../../index-CLQY_oJv.cjs');
14
14
  require('../lukso-image/index.cjs');
15
15
 
16
16
  /**
@@ -288,6 +288,61 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
288
288
  </div>
289
289
  `;
290
290
  }
291
+ profile3Template() {
292
+ const cardStyles = this.cardStyles({
293
+ borderRadius: this.borderRadius,
294
+ shadow: this.shadow,
295
+ isHoverable: this.isHoverable,
296
+ hasNoWidth: !this.width,
297
+ class: "grid grid-rows-[auto,1fr]"
298
+ });
299
+ return shared_tailwindElement_index.x`
300
+ <div
301
+ data-testid="card"
302
+ style=${index$1.customStyleMap({
303
+ [`min-height: ${this.height}px`]: !!this.height,
304
+ [`width: ${this.width}px`]: !!this.width
305
+ })}
306
+ class=${cn.cn(cardStyles, this.customClass)}
307
+ >
308
+ <div
309
+ style=${styleMap.o({
310
+ backgroundImage: this.backgroundGradient()
311
+ })}
312
+ class=${cn.cn(
313
+ "min-h-[40px] bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
314
+ this.headerClass
315
+ )}
316
+ >
317
+ ${this.backgroundUrl && shared_tailwindElement_index.x`<div
318
+ class="rounded-t-[inherit] overflow-hidden absolute inset-0"
319
+ >
320
+ <lukso-image src=${this.backgroundUrl}></lukso-image>
321
+ </div>
322
+ <div
323
+ class="min-h-full min-w-full rounded-t-[inherit] rounded-b-0 bg-neutral-10/10 absolute"
324
+ ></div>`}
325
+ <div>
326
+ <slot name="header"></slot>
327
+ </div>
328
+ </div>
329
+ <div class="grid grid-rows-[max-content] rounded-b-[inherit]">
330
+ <div class="bg-neutral-100 relative pt-5 rounded-b-[inherit]">
331
+ <lukso-profile
332
+ profile-url=${this.isEoa ? components_luksoProfile_index.makeBlockie(this.profileAddress) : this.profileUrl}
333
+ borderRadius="large"
334
+ profile-address=${this.profileAddress}
335
+ ?has-identicon=${!this.isEoa}
336
+ size="small"
337
+ class="absolute -top-6 left-3 z-10 border-[3px] border-neutral-100 rounded-full"
338
+ ></lukso-profile>
339
+
340
+ <slot name="content"></slot>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ `;
345
+ }
291
346
  heroTemplate() {
292
347
  const cardStyles = this.cardStyles({
293
348
  borderRadius: this.borderRadius,
@@ -371,6 +426,8 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
371
426
  return this.profileTemplate();
372
427
  case "profile-2":
373
428
  return this.profile2Template();
429
+ case "profile-3":
430
+ return this.profile3Template();
374
431
  case "hero":
375
432
  return this.heroTemplate();
376
433
  case "dapp":
@@ -1,4 +1,4 @@
1
- export type CardVariants = 'basic' | 'with-header' | 'profile' | 'profile-2' | 'hero' | 'dapp';
1
+ export type CardVariants = 'basic' | 'with-header' | 'profile' | 'profile-2' | 'hero' | 'dapp' | 'profile-3';
2
2
  export type CardBorderRadius = 'small' | 'medium' | 'none';
3
3
  export type CardShadows = 'small' | 'medium' | 'large';
4
4
  declare const LuksoCard_base: typeof import('lit').LitElement;
@@ -25,6 +25,7 @@ export declare class LuksoCard extends LuksoCard_base {
25
25
  withHeaderTemplate(): import('lit-html').TemplateResult<1>;
26
26
  profileTemplate(): import('lit-html').TemplateResult<1>;
27
27
  profile2Template(): import('lit-html').TemplateResult<1>;
28
+ profile3Template(): import('lit-html').TemplateResult<1>;
28
29
  heroTemplate(): import('lit-html').TemplateResult<1>;
29
30
  dappTemplate(): import('lit-html').TemplateResult<1>;
30
31
  render(): import('lit-html').TemplateResult<1>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAaA,OAAO,4BAA4B,CAAA;AAGnC,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;;AAEtD,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,YAAY,EAAE,gBAAgB,CAAW;IAGzC,MAAM,EAAE,WAAW,CAAU;IAG7B,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,KAAK,UAAQ;IAGb,OAAO,CAAC,WAAW,CAAyB;IAG5C,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,UAAU,CAqChB;IAEF,aAAa;IAsBb,kBAAkB;IA8BlB,eAAe;IAuEf,gBAAgB;IA0EhB,YAAY;IAyCZ,YAAY;IAyCZ,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/index.ts"],"names":[],"mappings":"AAaA,OAAO,4BAA4B,CAAA;AAGnC,OAAO,0BAA0B,CAAA;AAEjC,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,aAAa,GACb,SAAS,GACT,WAAW,GACX,MAAM,GACN,MAAM,GACN,WAAW,CAAA;AAEf,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE1D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;;AAEtD,qBACa,SAAU,SAAQ,cAA4B;IAEzD,OAAO,EAAE,YAAY,CAAU;IAG/B,aAAa,SAAK;IAGlB,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAGrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAGtC,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,YAAY,EAAE,gBAAgB,CAAW;IAGzC,MAAM,EAAE,WAAW,CAAU;IAG7B,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,KAAK,UAAQ;IAGb,OAAO,CAAC,WAAW,CAAyB;IAG5C,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,UAAU,CAqChB;IAEF,aAAa;IAsBb,kBAAkB;IA8BlB,eAAe;IAuEf,gBAAgB;IA0EhB,gBAAgB;IA4DhB,YAAY;IAyCZ,YAAY;IAyCZ,MAAM;CAkBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
@@ -1,12 +1,12 @@
1
- import { m as makeBlockie } from '../../index-Dsu77DGF.js';
2
- import { T as TailwindStyledElement, x, E } from '../../index-axQAcayx.js';
3
- import { n, t } from '../../property-CYbm8aZx.js';
4
- import { r } from '../../state-hoCBDnpA.js';
5
- import { o as o$1 } from '../../style-map-Min8ajOg.js';
1
+ import { m as makeBlockie } from '../../index-mgbCsUYd.js';
2
+ import { T as TailwindStyledElement, x, E } from '../../index-DAgkWi0r.js';
3
+ import { n, t } from '../../property-pT168uml.js';
4
+ import { r } from '../../state-B8LewVrr.js';
5
+ import { o as o$1 } from '../../style-map-tFqWcuNo.js';
6
6
  import { c as ce } from '../../index-B9iart53.js';
7
7
  import '../../tailwind-config.js';
8
8
  import { c as cn } from '../../cn-Cu9aP49j.js';
9
- import { c as customStyleMap } from '../../index-DHAAIAHr.js';
9
+ import { c as customStyleMap } from '../../index-CngaNvkX.js';
10
10
  import '../lukso-image/index.js';
11
11
 
12
12
  /**
@@ -284,6 +284,61 @@ let LuksoCard = class extends TailwindStyledElement(style) {
284
284
  </div>
285
285
  `;
286
286
  }
287
+ profile3Template() {
288
+ const cardStyles = this.cardStyles({
289
+ borderRadius: this.borderRadius,
290
+ shadow: this.shadow,
291
+ isHoverable: this.isHoverable,
292
+ hasNoWidth: !this.width,
293
+ class: "grid grid-rows-[auto,1fr]"
294
+ });
295
+ return x`
296
+ <div
297
+ data-testid="card"
298
+ style=${customStyleMap({
299
+ [`min-height: ${this.height}px`]: !!this.height,
300
+ [`width: ${this.width}px`]: !!this.width
301
+ })}
302
+ class=${cn(cardStyles, this.customClass)}
303
+ >
304
+ <div
305
+ style=${o$1({
306
+ backgroundImage: this.backgroundGradient()
307
+ })}
308
+ class=${cn(
309
+ "min-h-[40px] bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
310
+ this.headerClass
311
+ )}
312
+ >
313
+ ${this.backgroundUrl && x`<div
314
+ class="rounded-t-[inherit] overflow-hidden absolute inset-0"
315
+ >
316
+ <lukso-image src=${this.backgroundUrl}></lukso-image>
317
+ </div>
318
+ <div
319
+ class="min-h-full min-w-full rounded-t-[inherit] rounded-b-0 bg-neutral-10/10 absolute"
320
+ ></div>`}
321
+ <div>
322
+ <slot name="header"></slot>
323
+ </div>
324
+ </div>
325
+ <div class="grid grid-rows-[max-content] rounded-b-[inherit]">
326
+ <div class="bg-neutral-100 relative pt-5 rounded-b-[inherit]">
327
+ <lukso-profile
328
+ profile-url=${this.isEoa ? makeBlockie(this.profileAddress) : this.profileUrl}
329
+ borderRadius="large"
330
+ profile-address=${this.profileAddress}
331
+ ?has-identicon=${!this.isEoa}
332
+ size="small"
333
+ class="absolute -top-6 left-3 z-10 border-[3px] border-neutral-100 rounded-full"
334
+ ></lukso-profile>
335
+
336
+ <slot name="content"></slot>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ `;
341
+ }
287
342
  heroTemplate() {
288
343
  const cardStyles = this.cardStyles({
289
344
  borderRadius: this.borderRadius,
@@ -367,6 +422,8 @@ let LuksoCard = class extends TailwindStyledElement(style) {
367
422
  return this.profileTemplate();
368
423
  case "profile-2":
369
424
  return this.profile2Template();
425
+ case "profile-3":
426
+ return this.profile3Template();
370
427
  case "hero":
371
428
  return this.heroTemplate();
372
429
  case "dapp":
@@ -14,6 +14,8 @@ export declare const CardWithCustomHeader: any;
14
14
  export declare const ProfileCard: any;
15
15
  /** Example of `profile-2` variant. */
16
16
  export declare const Profile2Card: any;
17
+ /** Example of `profile-3` variant. */
18
+ export declare const Profile3Card: any;
17
19
  /** Example of `hero` variant. */
18
20
  export declare const HeroCard: any;
19
21
  /** Example of `dapp` variant. */
@@ -1 +1 @@
1
- {"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IAwKX,CAAA;AAED,eAAe,IAAI,CAAA;AA4JnB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,iHAAiH;AACjH,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAAwB,CAAA;AAK7C,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAMhD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,uEAAuE;AACvE,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA;AAOrD,0DAA0D;AAC1D,eAAO,MAAM,MAAM,KAA2B,CAAA"}
1
+ {"version":3,"file":"lukso-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-card/lukso-card.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,qJAAqJ;AACrJ,QAAA,MAAM,IAAI,EAAE,IAgLX,CAAA;AAED,eAAe,IAAI,CAAA;AA+JnB,iDAAiD;AACjD,eAAO,MAAM,WAAW,KAA2B,CAAA;AAQnD,iHAAiH;AACjH,eAAO,MAAM,SAAS,KAA2B,CAAA;AAYjD,wCAAwC;AACxC,eAAO,MAAM,cAAc,KAA2B,CAAA;AAatD,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,KAAgC,CAAA;AAajE,sIAAsI;AACtI,eAAO,MAAM,WAAW,KAA2B,CAAA;AAmBnD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAOpD,uCAAuC;AACvC,eAAO,MAAM,YAAY,KAA2B,CAAA;AAUpD,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAAwB,CAAA;AAK7C,kCAAkC;AAClC,eAAO,MAAM,QAAQ,KAA2B,CAAA;AAMhD,uGAAuG;AACvG,eAAO,MAAM,UAAU,KAA2B,CAAA;AAalD,uEAAuE;AACvE,eAAO,MAAM,SAAS,KAA2B,CAAA;AAKjD,sEAAsE;AACtE,eAAO,MAAM,aAAa,KAA2B,CAAA;AAOrD,0DAA0D;AAC1D,eAAO,MAAM,MAAM,KAA2B,CAAA"}
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const state = require('../../state-CCMDzTj3.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const state = require('../../state-4AI1NTU_.cjs');
8
8
  const index = require('../../index-D0nCA-7X.cjs');
9
9
 
10
10
  var __defProp = Object.defineProperty;
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x, E } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
3
- import { r } from '../../state-hoCBDnpA.js';
1
+ import { a as TailwindElement, x, E } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
+ import { r } from '../../state-B8LewVrr.js';
4
4
  import { c as customClassMap } from '../../index-F8ll4iy2.js';
5
5
 
6
6
  var __defProp = Object.defineProperty;
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const state = require('../../state-CCMDzTj3.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const state = require('../../state-4AI1NTU_.cjs');
8
8
  const index = require('../../index-CaJky2qL.cjs');
9
- const styleMap = require('../../style-map-VlU1Vn2Q.cjs');
9
+ const styleMap = require('../../style-map-CSf_9JOX.cjs');
10
10
  require('../../tailwind-config.cjs');
11
11
  const cn = require('../../cn-CNdKneQ1.cjs');
12
12
  require('../lukso-icon/index.cjs');
@@ -1,8 +1,8 @@
1
- import { T as TailwindStyledElement, E, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
3
- import { r } from '../../state-hoCBDnpA.js';
1
+ import { T as TailwindStyledElement, E, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
+ import { r } from '../../state-B8LewVrr.js';
4
4
  import { c as ce } from '../../index-B9iart53.js';
5
- import { o } from '../../style-map-Min8ajOg.js';
5
+ import { o } from '../../style-map-tFqWcuNo.js';
6
6
  import '../../tailwind-config.js';
7
7
  import { c as cn } from '../../cn-Cu9aP49j.js';
8
8
  import '../lukso-icon/index.js';
@@ -2,12 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
7
  const index = require('../../index-CaJky2qL.cjs');
8
8
  require('../lukso-icon/index.cjs');
9
- require('../../index-CUMvAhRx.cjs');
10
- require('../../index-D19a1K8E.cjs');
9
+ require('../../index-S_Dlt9s3.cjs');
10
+ require('../../index-RU2Ma8ic.cjs');
11
11
  const uniqId = require('../../uniq-id-Cszs24DQ.cjs');
12
12
 
13
13
  const debounceFunction = (func, timeout = 100) => {
@@ -1,9 +1,9 @@
1
- import { T as TailwindStyledElement, E, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
1
+ import { T as TailwindStyledElement, E, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
3
  import { c as ce } from '../../index-B9iart53.js';
4
4
  import '../lukso-icon/index.js';
5
- import '../../index-Dsu77DGF.js';
6
- import '../../index--44JsQ_1.js';
5
+ import '../../index-mgbCsUYd.js';
6
+ import '../../index-DqBf0kRy.js';
7
7
  import { u as uniqId } from '../../uniq-id-CGUN-pJV.js';
8
8
 
9
9
  const debounceFunction = (func, timeout = 100) => {
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
7
  const index = require('../../index-CaJky2qL.cjs');
8
8
 
9
9
  const style = ":host {\n display: block\n}";
@@ -1,5 +1,5 @@
1
- import { T as TailwindStyledElement, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
3
  import { c as ce } from '../../index-B9iart53.js';
4
4
 
5
5
  const style = ":host {\n display: block\n}";
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
7
 
8
8
  var __defProp = Object.defineProperty;
9
9
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1,5 +1,5 @@
1
- import { a as TailwindElement, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
1
+ import { a as TailwindElement, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
3
 
4
4
  var __defProp = Object.defineProperty;
5
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const styleMap = require('../../style-map-VlU1Vn2Q.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const styleMap = require('../../style-map-CSf_9JOX.cjs');
8
8
 
9
9
  const style = ":host {\n display: inline-flex\n}";
10
10
 
@@ -1,6 +1,6 @@
1
- import { x, T as TailwindStyledElement } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
3
- import { o } from '../../style-map-Min8ajOg.js';
1
+ import { x, T as TailwindStyledElement } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
+ import { o } from '../../style-map-tFqWcuNo.js';
4
4
 
5
5
  const style = ":host {\n display: inline-flex\n}";
6
6
 
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const state = require('../../state-CCMDzTj3.cjs');
8
- const styleMap = require('../../style-map-VlU1Vn2Q.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const state = require('../../state-4AI1NTU_.cjs');
8
+ const styleMap = require('../../style-map-CSf_9JOX.cjs');
9
9
  const index = require('../../index-CaJky2qL.cjs');
10
10
 
11
11
  var __defProp = Object.defineProperty;
@@ -1,7 +1,7 @@
1
- import { a as TailwindElement, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
3
- import { r } from '../../state-hoCBDnpA.js';
4
- import { o } from '../../style-map-Min8ajOg.js';
1
+ import { a as TailwindElement, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
+ import { r } from '../../state-B8LewVrr.js';
4
+ import { o } from '../../style-map-tFqWcuNo.js';
5
5
  import { c as ce } from '../../index-B9iart53.js';
6
6
 
7
7
  var __defProp = Object.defineProperty;
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const state = require('../../state-CCMDzTj3.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const state = require('../../state-4AI1NTU_.cjs');
8
8
  const index = require('../../index-CaJky2qL.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-sanitize/index.cjs');
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, E, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
3
- import { r } from '../../state-hoCBDnpA.js';
1
+ import { T as TailwindStyledElement, E, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
+ import { r } from '../../state-B8LewVrr.js';
4
4
  import { c as ce } from '../../index-B9iart53.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-sanitize/index.js';
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
7
  const index = require('../../index-CaJky2qL.cjs');
8
8
 
9
9
  var __defProp = Object.defineProperty;
@@ -1,5 +1,5 @@
1
- import { a as TailwindElement, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
1
+ import { a as TailwindElement, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
3
  import { c as ce } from '../../index-B9iart53.js';
4
4
 
5
5
  var __defProp = Object.defineProperty;
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const state = require('../../state-CCMDzTj3.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const state = require('../../state-4AI1NTU_.cjs');
8
8
  const index = require('../../index-CaJky2qL.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-tag/index.cjs');
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x, E } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
3
- import { r } from '../../state-hoCBDnpA.js';
1
+ import { a as TailwindElement, x, E } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
+ import { r } from '../../state-B8LewVrr.js';
4
4
  import { c as ce } from '../../index-B9iart53.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-tag/index.js';
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const state = require('../../state-CCMDzTj3.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const state = require('../../state-4AI1NTU_.cjs');
8
8
  const index = require('../../index-CaJky2qL.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-button/index.cjs');
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, x } from '../../index-axQAcayx.js';
2
- import { n, t } from '../../property-CYbm8aZx.js';
3
- import { r } from '../../state-hoCBDnpA.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-DAgkWi0r.js';
2
+ import { n, t } from '../../property-pT168uml.js';
3
+ import { r } from '../../state-B8LewVrr.js';
4
4
  import { c as ce } from '../../index-B9iart53.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-button/index.js';
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- require('../../index-BMFENeRI.cjs');
6
- require('../../property-DGVQMLCH.cjs');
7
- const components_luksoProfile_index = require('../../index-CUMvAhRx.cjs');
5
+ require('../../index-BMxMUsIi.cjs');
6
+ require('../../property-CoW1aNZS.cjs');
7
+ const components_luksoProfile_index = require('../../index-S_Dlt9s3.cjs');
8
8
  require('../../index-CaJky2qL.cjs');
9
9
  require('../lukso-image/index.cjs');
10
10
 
@@ -1,5 +1,5 @@
1
- import '../../index-axQAcayx.js';
2
- import '../../property-CYbm8aZx.js';
3
- export { L as LuksoProfile } from '../../index-Dsu77DGF.js';
1
+ import '../../index-DAgkWi0r.js';
2
+ import '../../property-pT168uml.js';
3
+ export { L as LuksoProfile } from '../../index-mgbCsUYd.js';
4
4
  import '../../index-B9iart53.js';
5
5
  import '../lukso-image/index.js';
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-BMFENeRI.cjs');
6
- const property = require('../../property-DGVQMLCH.cjs');
7
- const styleMap = require('../../style-map-VlU1Vn2Q.cjs');
5
+ const shared_tailwindElement_index = require('../../index-BMxMUsIi.cjs');
6
+ const property = require('../../property-CoW1aNZS.cjs');
7
+ const styleMap = require('../../style-map-CSf_9JOX.cjs');
8
8
  require('../../tailwind-config.cjs');
9
9
  const cn = require('../../cn-CNdKneQ1.cjs');
10
10