@lukso/web-components 1.44.0 → 1.46.0

package/dist/components/index.cjs

@@ -21,13 +21,13 @@ const components_luksoTerms_index = require('./lukso-terms/index.cjs');
 const components_luksoTest_index = require('./lukso-test/index.cjs');
 const components_luksoUsername_index = require('./lukso-username/index.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../index-c00a1316.cjs');
 require('../query-assigned-elements-5200f974.cjs');
 require('../state-51b50a6b.cjs');
 require('../index-e9668573.cjs');
 require('../directive-8278ab14.cjs');
-require('../style-map-c00f9dd9.cjs');
-require('../directive-helpers-b2851157.cjs');
+require('../style-map-f36ae803.cjs');
+require('../directive-helpers-c00f5d40.cjs');
 
 
 

package/dist/components/index.js

@@ -17,10 +17,10 @@ export { LuksoTerms } from './lukso-terms/index.js';
 export { LuksoTest } from './lukso-test/index.js';
 export { LuksoUsername } from './lukso-username/index.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-5b6b1166.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-51cfbd32.js';
 import '../query-assigned-elements-e36df787.js';
 import '../state-02a92ffa.js';
 import '../index-5e194caf.js';
 import '../directive-2bb7789e.js';
-import '../style-map-6cdbbb8b.js';
-import '../directive-helpers-422da386.js';
+import '../style-map-bcba103a.js';
+import '../directive-helpers-63c6ddf6.js';

package/dist/components/lukso-button/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const state = require('../../state-51b50a6b.cjs');
 const index = require('../../index-e9668573.cjs');

package/dist/components/lukso-button/index.js

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
+import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import { t } from '../../state-02a92ffa.js';
 import { c as customClassMap } from '../../index-5e194caf.js';

package/dist/components/lukso-card/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-c00f9dd9.cjs');
+const styleMap = require('../../style-map-f36ae803.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-profile/index.cjs');
 require('../../directive-8278ab14.cjs');

package/dist/components/lukso-card/index.js

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x } from '../../index-5b6b1166.js';
+import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-6cdbbb8b.js';
+import { o } from '../../style-map-bcba103a.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-profile/index.js';
 import '../../directive-2bb7789e.js';

package/dist/components/lukso-checkbox/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const state = require('../../state-51b50a6b.cjs');
 const index = require('../../index-e9668573.cjs');

package/dist/components/lukso-checkbox/index.js

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x, A } from '../../index-5b6b1166.js';
+import { a as TailwindElement, x, A } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import { t } from '../../state-02a92ffa.js';
 import { c as customClassMap } from '../../index-5e194caf.js';

package/dist/components/lukso-footer/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 require('../lukso-share/index.cjs');
 
@@ -38,7 +38,7 @@ exports.LuksoFooter = class LuksoFooter extends shared_tailwindElement_index.Tai
           class="p-10 grid gap-8 items-center lg:grid-cols-[auto,max-content]"
         >
           <slot name="links"></slot>
-          <div class="flex sm:justify-between gap-4 flex-col sm:flex-row">
+          <div class="flex gap-5 flex-col sm:flex-row sm:justify-between">
             <lukso-share
               providers=${JSON.stringify(this.providers)}
             ></lukso-share>
@@ -46,13 +46,16 @@ exports.LuksoFooter = class LuksoFooter extends shared_tailwindElement_index.Tai
               <a
                 href="https://lukso.network/"
                 target="_blank"
-                class="flex flex-col opacity-50 text-neutral-30 transition-opacity hover:opacity-80 sm:text-right"
+                class="flex flex-col opacity-50 text-neutral-30 transition-opacity hover:opacity-80"
               >
-                <span class="paragraph-inter-10-semi-bold">Powered by</span>
+                <span
+                  class="text-6 not-italic font-600 leading-[7.26px] font-inter"
+                  >Powered by</span
+                >
                 <img
                   src="/assets/images/lukso-logo.svg"
                   alt="LUKSO"
-                  class="h-4"
+                  class="h-4 mt-[1px]"
                 />
               </a>
             </div>

package/dist/components/lukso-footer/index.d.ts

@@ -1,7 +1,7 @@
 import { TailwindElement } from '../../shared/tailwind-element';
-import { Provider } from '../../components/lukso-share';
+import { ProviderName, ProviderObject } from '../../components/lukso-share';
 export declare class LuksoFooter extends TailwindElement {
-    providers: Provider[];
+    providers: ProviderName[] | ProviderObject[];
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/lukso-footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-footer/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,0BAA0B,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEnD,qBACa,WAAY,SAAQ,eAAe;IAE9C,SAAS,EAAE,QAAQ,EAAE,CASpB;IAED,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-footer/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAEvE,qBACa,WAAY,SAAQ,eAAe;IAE9C,SAAS,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAS3C;IAED,MAAM;CAiCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

package/dist/components/lukso-footer/index.js

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-5b6b1166.js';
+import { a as TailwindElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import '../lukso-share/index.js';
 
@@ -34,7 +34,7 @@ let LuksoFooter = class extends TailwindElement {
           class="p-10 grid gap-8 items-center lg:grid-cols-[auto,max-content]"
         >
           <slot name="links"></slot>
-          <div class="flex sm:justify-between gap-4 flex-col sm:flex-row">
+          <div class="flex gap-5 flex-col sm:flex-row sm:justify-between">
             <lukso-share
               providers=${JSON.stringify(this.providers)}
             ></lukso-share>
@@ -42,13 +42,16 @@ let LuksoFooter = class extends TailwindElement {
               <a
                 href="https://lukso.network/"
                 target="_blank"
-                class="flex flex-col opacity-50 text-neutral-30 transition-opacity hover:opacity-80 sm:text-right"
+                class="flex flex-col opacity-50 text-neutral-30 transition-opacity hover:opacity-80"
               >
-                <span class="paragraph-inter-10-semi-bold">Powered by</span>
+                <span
+                  class="text-6 not-italic font-600 leading-[7.26px] font-inter"
+                  >Powered by</span
+                >
                 <img
                   src="/assets/images/lukso-logo.svg"
                   alt="LUKSO"
-                  class="h-4"
+                  class="h-4 mt-[1px]"
                 />
               </a>
             </div>

package/dist/components/lukso-footer/lukso-footer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-footer.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-footer/lukso-footer.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,8HAA8H;AAC9H,QAAA,MAAM,IAAI,EAAE,IAyBX,CAAA;AAED,eAAe,IAAI,CAAA;AAiDnB,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAE9C,iJAAiJ;AACjJ,eAAO,MAAM,cAAc,KAAoB,CAAA"}
+{"version":3,"file":"lukso-footer.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-footer/lukso-footer.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB,8HAA8H;AAC9H,QAAA,MAAM,IAAI,EAAE,IAyBX,CAAA;AAED,eAAe,IAAI,CAAA;AAqCnB,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAE9C,iJAAiJ;AACjJ,eAAO,MAAM,cAAc,KAAoB,CAAA"}

package/dist/components/lukso-icon/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-c00f9dd9.cjs');
+const styleMap = require('../../style-map-f36ae803.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";

package/dist/components/lukso-icon/index.js

@@ -1,6 +1,6 @@
-import { x, T as TailwindStyledElement } from '../../index-5b6b1166.js';
+import { x, T as TailwindStyledElement } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-6cdbbb8b.js';
+import { o } from '../../style-map-bcba103a.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";

package/dist/components/lukso-input/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const state = require('../../state-51b50a6b.cjs');
 const index = require('../../index-e9668573.cjs');

package/dist/components/lukso-input/index.js

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x, A } from '../../index-5b6b1166.js';
+import { a as TailwindElement, x, A } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import { t } from '../../state-02a92ffa.js';
 import { c as customClassMap } from '../../index-5e194caf.js';

package/dist/components/lukso-modal/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');

package/dist/components/lukso-modal/index.js

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-5b6b1166.js';
+import { a as TailwindElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';

package/dist/components/lukso-navbar/index.cjs

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const state = require('../../state-51b50a6b.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-c00f9dd9.cjs');
+require('../../style-map-f36ae803.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-navbar/index.js

@@ -1,11 +1,11 @@
-import { a as TailwindElement, x } from '../../index-5b6b1166.js';
+import { a as TailwindElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import { t } from '../../state-02a92ffa.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-6cdbbb8b.js';
+import '../../style-map-bcba103a.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-profile/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-c00f9dd9.cjs');
+const styleMap = require('../../style-map-f36ae803.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 
@@ -467,26 +467,32 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
     this.profileAddress = "";
     this.hasIdenticon = false;
     this.size = "large";
+    this.isSquare = false;
     this.sizes = {
       "x-small": {
         identiconSize: 12,
-        profileImageSize: 24
+        profileImageSize: 24,
+        squareRounding: 2
       },
       small: {
         identiconSize: 16,
-        profileImageSize: 40
+        profileImageSize: 40,
+        squareRounding: 4
       },
       medium: {
         identiconSize: 20,
-        profileImageSize: 56
+        profileImageSize: 56,
+        squareRounding: 8
       },
       large: {
         identiconSize: 24,
-        profileImageSize: 80
+        profileImageSize: 80,
+        squareRounding: 10
       },
       "x-large": {
         identiconSize: 28,
-        profileImageSize: 96
+        profileImageSize: 96,
+        squareRounding: 12
       }
     };
     this.defaultProfileUrl = "/assets/images/profile-default.svg";
@@ -497,6 +503,9 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
   identiconSize() {
     return this.sizes[this.size].identiconSize;
   }
+  squareRoundingSize() {
+    return this.sizes[this.size].squareRounding;
+  }
   identicon() {
     return this.hasIdenticon && this.profileAddress && this.identiconSize() ? makeBlockie(this.profileAddress) : "";
   }
@@ -507,18 +516,20 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
         style=${styleMap.o({
       backgroundImage: `url(${this.defaultProfileUrl})`,
       width: `${this.profileImageSize()}px`,
-      height: `${this.profileImageSize()}px`
+      height: `${this.profileImageSize()}px`,
+      borderRadius: `${this.isSquare ? this.squareRoundingSize() + "px" : "50%"}`
     })}
-        class="rounded-full bg-[50%] bg-no-repeat bg-cover bg-neutral-90
+        class="bg-[50%] bg-no-repeat bg-cover bg-neutral-90
           outline outline-2 outline-neutral-100"
       >
         <div
           style=${styleMap.o({
       backgroundImage: `url(${this.profileUrl})`,
       width: `${this.profileImageSize()}px`,
-      height: `${this.profileImageSize()}px`
+      height: `${this.profileImageSize()}px`,
+      borderRadius: `${this.isSquare ? this.squareRoundingSize() + "px" : "50%"}`
     })}
-          class="rounded-full bg-[50%] bg-no-repeat bg-cover relative
+          class="bg-[50%] bg-no-repeat bg-cover relative
           "
         >
           ${this.identicon() ? shared_tailwindElement_index.x`<img
@@ -552,6 +563,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.e({ type: String })
 ], exports.LuksoProfile.prototype, "size", 2);
+__decorateClass([
+  queryAssignedElements.e({ type: Boolean, attribute: "is-square" })
+], exports.LuksoProfile.prototype, "isSquare", 2);
 exports.LuksoProfile = __decorateClass([
   queryAssignedElements.e$1("lukso-profile")
 ], exports.LuksoProfile);

package/dist/components/lukso-profile/index.d.ts

@@ -1,17 +1,20 @@
 import { TailwindElement } from '../../shared/tailwind-element';
 export type ProfileSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type SizeDef = {
-    identiconSize?: number;
+    identiconSize: number;
     profileImageSize: number;
+    squareRounding: number;
 };
 export declare class LuksoProfile extends TailwindElement {
     profileUrl: string;
     profileAddress: string;
     hasIdenticon: boolean;
     size: ProfileSize;
+    isSquare: boolean;
     sizes: Record<ProfileSize, SizeDef>;
     private profileImageSize;
     private identiconSize;
+    private squareRoundingSize;
     private defaultProfileUrl;
     private identicon;
     render(): import("lit").TemplateResult<1>;

package/dist/components/lukso-profile/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAC9E,KAAK,OAAO,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnE,qBACa,YAAa,SAAQ,eAAe;IAE/C,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,IAAI,EAAE,WAAW,CAAU;IAE3B,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAqBlC;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB,CAAuC;IAEhE,OAAO,CAAC,SAAS;IAMjB,MAAM;CAyCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAC9E,KAAK,OAAO,GAAG;IACb,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,qBACa,YAAa,SAAQ,eAAe;IAE/C,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,IAAI,EAAE,WAAW,CAAU;IAG3B,QAAQ,UAAQ;IAEhB,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CA0BlC;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,iBAAiB,CAAuC;IAEhE,OAAO,CAAC,SAAS;IAMjB,MAAM;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}

package/dist/components/lukso-profile/index.js

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-5b6b1166.js';
+import { a as TailwindElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-6cdbbb8b.js';
+import { o } from '../../style-map-bcba103a.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 
@@ -463,26 +463,32 @@ let LuksoProfile = class extends TailwindElement {
     this.profileAddress = "";
     this.hasIdenticon = false;
     this.size = "large";
+    this.isSquare = false;
     this.sizes = {
       "x-small": {
         identiconSize: 12,
-        profileImageSize: 24
+        profileImageSize: 24,
+        squareRounding: 2
       },
       small: {
         identiconSize: 16,
-        profileImageSize: 40
+        profileImageSize: 40,
+        squareRounding: 4
       },
       medium: {
         identiconSize: 20,
-        profileImageSize: 56
+        profileImageSize: 56,
+        squareRounding: 8
       },
       large: {
         identiconSize: 24,
-        profileImageSize: 80
+        profileImageSize: 80,
+        squareRounding: 10
       },
       "x-large": {
         identiconSize: 28,
-        profileImageSize: 96
+        profileImageSize: 96,
+        squareRounding: 12
       }
     };
     this.defaultProfileUrl = "/assets/images/profile-default.svg";
@@ -493,6 +499,9 @@ let LuksoProfile = class extends TailwindElement {
   identiconSize() {
     return this.sizes[this.size].identiconSize;
   }
+  squareRoundingSize() {
+    return this.sizes[this.size].squareRounding;
+  }
   identicon() {
     return this.hasIdenticon && this.profileAddress && this.identiconSize() ? makeBlockie(this.profileAddress) : "";
   }
@@ -503,18 +512,20 @@ let LuksoProfile = class extends TailwindElement {
         style=${o({
       backgroundImage: `url(${this.defaultProfileUrl})`,
       width: `${this.profileImageSize()}px`,
-      height: `${this.profileImageSize()}px`
+      height: `${this.profileImageSize()}px`,
+      borderRadius: `${this.isSquare ? this.squareRoundingSize() + "px" : "50%"}`
     })}
-        class="rounded-full bg-[50%] bg-no-repeat bg-cover bg-neutral-90
+        class="bg-[50%] bg-no-repeat bg-cover bg-neutral-90
           outline outline-2 outline-neutral-100"
       >
         <div
           style=${o({
       backgroundImage: `url(${this.profileUrl})`,
       width: `${this.profileImageSize()}px`,
-      height: `${this.profileImageSize()}px`
+      height: `${this.profileImageSize()}px`,
+      borderRadius: `${this.isSquare ? this.squareRoundingSize() + "px" : "50%"}`
     })}
-          class="rounded-full bg-[50%] bg-no-repeat bg-cover relative
+          class="bg-[50%] bg-no-repeat bg-cover relative
           "
         >
           ${this.identicon() ? x`<img
@@ -548,6 +559,9 @@ __decorateClass([
 __decorateClass([
   e({ type: String })
 ], LuksoProfile.prototype, "size", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-square" })
+], LuksoProfile.prototype, "isSquare", 2);
 LuksoProfile = __decorateClass([
   e$1("lukso-profile")
 ], LuksoProfile);

package/dist/components/lukso-profile/lukso-profile.stories.d.ts

@@ -1,9 +1,9 @@
 import { Meta } from '@storybook/web-components';
 /**
  *  Documentation and examples of `lukso-profile` component.
- *  Profiles comes in `x-small`, `small`, `medium`, `large` and `x-large` size that is set in `size` property.
- *  Identicon is generated using `ethereum-blockies-base64` library from `profile-Address` property.
- *  To show profile picture pass valid url in `profile-url` property.
+ *  Profiles comes in `x-small`, `small`, `medium`, `large` and `x-large` size that is set in `size` attribute.
+ *  Identicon is generated using `ethereum-blockies-base64` library from `profile-Address` attribute.
+ *  To show profile picture pass valid url in `profile-url` attribute.
  */
 declare const meta: Meta;
 export default meta;
@@ -19,6 +19,8 @@ export declare const Small: any;
 export declare const XSmall: any;
 /** When image can't be loaded or missing the placeholder is displayed. */
 export declare const Unknown: any;
-/** You can also control if identicon should be visible with `has-identicon` property. */
+/** You can also control if identicon should be visible with `has-identicon` attribute. */
 export declare const NoIdenticon: any;
+/** You can also show square profile using `is-square` attribute. */
+export declare const Square: any;
 //# sourceMappingURL=lukso-profile.stories.d.ts.map

package/dist/components/lukso-profile/lukso-profile.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-profile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/lukso-profile.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAoEX,CAAA;AAED,eAAe,IAAI,CAAA;AAUnB,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,wDAAwD;AACxD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,0EAA0E;AAC1E,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,yFAAyF;AACzF,eAAO,MAAM,WAAW,KAAoB,CAAA"}
+{"version":3,"file":"lukso-profile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/lukso-profile.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAgFX,CAAA;AAED,eAAe,IAAI,CAAA;AAiBnB,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,wDAAwD;AACxD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,0EAA0E;AAC1E,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,0FAA0F;AAC1F,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,oEAAoE;AACpE,eAAO,MAAM,MAAM,KAAoB,CAAA"}

package/dist/components/lukso-progress/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-c00f9dd9.cjs');
+const styleMap = require('../../style-map-f36ae803.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

package/dist/components/lukso-progress/index.js

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x } from '../../index-5b6b1166.js';
+import { a as TailwindElement, x } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-6cdbbb8b.js';
+import { o } from '../../style-map-bcba103a.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

package/dist/components/lukso-sanitize/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const directive = require('../../directive-8278ab14.cjs');
 

package/dist/components/lukso-sanitize/index.js

@@ -1,4 +1,4 @@
-import { c as A, b as T, a as TailwindElement, x } from '../../index-5b6b1166.js';
+import { c as A, b as T, a as TailwindElement, x } from '../../index-51cfbd32.js';
 import { e as e$2, a as e$3 } from '../../query-assigned-elements-e36df787.js';
 import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
 

package/dist/components/lukso-search/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-7ef6f8a1.cjs');
+const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 const state = require('../../state-51b50a6b.cjs');
 const index = require('../../index-e9668573.cjs');
@@ -10,7 +10,7 @@ require('../lukso-icon/index.cjs');
 require('../lukso-profile/index.cjs');
 require('../lukso-username/index.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../style-map-c00f9dd9.cjs');
+require('../../style-map-f36ae803.cjs');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";
 

package/dist/components/lukso-search/index.js

@@ -1,4 +1,4 @@
-import { T as TailwindStyledElement, x, A } from '../../index-5b6b1166.js';
+import { T as TailwindStyledElement, x, A } from '../../index-51cfbd32.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import { t } from '../../state-02a92ffa.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
@@ -6,7 +6,7 @@ import '../lukso-icon/index.js';
 import '../lukso-profile/index.js';
 import '../lukso-username/index.js';
 import '../../directive-2bb7789e.js';
-import '../../style-map-6cdbbb8b.js';
+import '../../style-map-bcba103a.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";