@lukso/web-components 1.45.0 → 1.47.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-c00a1316.cjs');
+const shared_tailwindElement_index = require('../index-26918474.cjs');
 require('../query-assigned-elements-5200f974.cjs');
 require('../state-51b50a6b.cjs');
 require('../index-e9668573.cjs');
 require('../directive-8278ab14.cjs');
-require('../style-map-f36ae803.cjs');
-require('../directive-helpers-c00f5d40.cjs');
+require('../style-map-bdd4a4b4.cjs');
+require('../directive-helpers-3445f03f.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-51cfbd32.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-12d3b4a1.js';
 import '../query-assigned-elements-e36df787.js';
 import '../state-02a92ffa.js';
 import '../index-5e194caf.js';
 import '../directive-2bb7789e.js';
-import '../style-map-bcba103a.js';
-import '../directive-helpers-63c6ddf6.js';
+import '../style-map-7d8d33bb.js';
+import '../directive-helpers-3b8282aa.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-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.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-51cfbd32.js';
+import { T as TailwindStyledElement, x } from '../../index-12d3b4a1.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-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-f36ae803.cjs');
+const styleMap = require('../../style-map-bdd4a4b4.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-51cfbd32.js';
+import { T as TailwindStyledElement, x } from '../../index-12d3b4a1.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-bcba103a.js';
+import { o } from '../../style-map-7d8d33bb.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-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.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-51cfbd32.js';
+import { a as TailwindElement, x, A } from '../../index-12d3b4a1.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-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
 require('../lukso-share/index.cjs');
 

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

@@ -1,4 +1,4 @@
-import { a as TailwindElement, x } from '../../index-51cfbd32.js';
+import { a as TailwindElement, x } from '../../index-12d3b4a1.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
 import '../lukso-share/index.js';
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-f36ae803.cjs');
+const styleMap = require('../../style-map-bdd4a4b4.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-51cfbd32.js';
+import { x, T as TailwindStyledElement } from '../../index-12d3b4a1.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-bcba103a.js';
+import { o } from '../../style-map-7d8d33bb.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-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.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-51cfbd32.js';
+import { a as TailwindElement, x, A } from '../../index-12d3b4a1.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-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.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-51cfbd32.js';
+import { a as TailwindElement, x } from '../../index-12d3b4a1.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-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.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-f36ae803.cjs');
+require('../../style-map-bdd4a4b4.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -46,6 +46,13 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     });
     this.dispatchEvent(event);
   }
+  handleIconClick() {
+    const event = new CustomEvent("on-icon-click", {
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+  }
   handleMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
   }
@@ -57,9 +64,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     </div>`;
   }
   mobileMenuTemplate() {
-    return shared_tailwindElement_index.x`<div
-      class="w-full items-center justify-end pr-6 flex md:hidden"
-    >
+    return shared_tailwindElement_index.x`<div class="items-center justify-end pr-6 flex md:hidden">
       <div
         class="flex items-center justify-center w-8 h-8 cursor-pointer"
         @click=${this.handleMenuToggle}
@@ -93,32 +98,40 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
         class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
         ${index.customClassMap({
       [this.centerStyles]: this.isCenter,
+      ["justify-between"]: !this.isCenter,
       [this.stickyStyles]: this.isSticky,
       [this.transparentStyles]: this.isTransparent
     })}"
       >
-        <div
-          class="flex items-center px-7 h-full cursor-pointer sm:px-10"
-          @click=${this.handleBrandClick}
-        >
-          <img
-            src="${this.logoUrl || this.defaultLogoUrl}"
-            class="mr-2 h-[26px]"
-          />
+        <div class="flex items-center px-7 h-full sm:px-10">
           <div
-            class="text-purple-51 nav-apax-14-medium-uppercase
-              whitespace-pre-line flex leading-none hover:text-purple-41"
+            class="flex cursor-pointer group"
+            @click=${this.handleBrandClick}
           >
-            <span>${this.title}</span>
+            <img
+              src="${this.logoUrl || this.defaultLogoUrl}"
+              class="mr-2 h-[26px]"
+            />
+            <div
+              class="text-purple-51 nav-apax-14-medium-uppercase
+                whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
+            >
+              <span>${this.title}</span>
+            </div>
+            ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
+                  TESTNET
+                </lukso-tag>` : ""}
           </div>
-          ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
-                TESTNET
-              </lukso-tag>` : ""}
-          ${this.icon ? shared_tailwindElement_index.x`<lukso-icon
-                class="border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
-                name="${this.icon}"
-                color="purple-51"
-              ></lukso-icon>` : ""}
+          ${this.icon ? shared_tailwindElement_index.x`<div
+                class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
+              >
+                <lukso-icon
+                  class="transition cursor-pointer hover:scale-105"
+                  name="${this.icon}"
+                  color="purple-51"
+                  @click=${this.handleIconClick}
+                ></lukso-icon>
+              </div>` : ""}
         </div>
         ${this.isCenter ? shared_tailwindElement_index.x`` : this.hasMenu ? shared_tailwindElement_index.x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : shared_tailwindElement_index.x``}
       </nav>

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

@@ -14,6 +14,7 @@ export declare class LuksoNavbar extends TailwindElement {
     private stickyStyles;
     private transparentStyles;
     private handleBrandClick;
+    private handleIconClick;
     private handleMenuToggle;
     desktopMenuTemplate(): import("lit").TemplateResult<1>;
     mobileMenuTemplate(): import("lit").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAE/B,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,SAAS,UAAQ;IAGjB,IAAI,SAAK;IAGT,OAAO,UAAQ;IAGf,OAAO,SAAK;IAGZ,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAIxB,mBAAmB;IAQnB,kBAAkB;IAgClB,MAAM;CA8CP;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-navbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAE/B,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,SAAS,UAAQ;IAGjB,IAAI,SAAK;IAGT,OAAO,UAAQ;IAGf,OAAO,SAAK;IAGZ,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IAIxB,mBAAmB;IAQnB,kBAAkB;IA8BlB,MAAM;CAsDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

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

@@ -1,11 +1,11 @@
-import { a as TailwindElement, x } from '../../index-51cfbd32.js';
+import { a as TailwindElement, x } from '../../index-12d3b4a1.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-bcba103a.js';
+import '../../style-map-7d8d33bb.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -42,6 +42,13 @@ let LuksoNavbar = class extends TailwindElement {
     });
     this.dispatchEvent(event);
   }
+  handleIconClick() {
+    const event = new CustomEvent("on-icon-click", {
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+  }
   handleMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
   }
@@ -53,9 +60,7 @@ let LuksoNavbar = class extends TailwindElement {
     </div>`;
   }
   mobileMenuTemplate() {
-    return x`<div
-      class="w-full items-center justify-end pr-6 flex md:hidden"
-    >
+    return x`<div class="items-center justify-end pr-6 flex md:hidden">
       <div
         class="flex items-center justify-center w-8 h-8 cursor-pointer"
         @click=${this.handleMenuToggle}
@@ -89,32 +94,40 @@ let LuksoNavbar = class extends TailwindElement {
         class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
         ${customClassMap({
       [this.centerStyles]: this.isCenter,
+      ["justify-between"]: !this.isCenter,
       [this.stickyStyles]: this.isSticky,
       [this.transparentStyles]: this.isTransparent
     })}"
       >
-        <div
-          class="flex items-center px-7 h-full cursor-pointer sm:px-10"
-          @click=${this.handleBrandClick}
-        >
-          <img
-            src="${this.logoUrl || this.defaultLogoUrl}"
-            class="mr-2 h-[26px]"
-          />
+        <div class="flex items-center px-7 h-full sm:px-10">
           <div
-            class="text-purple-51 nav-apax-14-medium-uppercase
-              whitespace-pre-line flex leading-none hover:text-purple-41"
+            class="flex cursor-pointer group"
+            @click=${this.handleBrandClick}
           >
-            <span>${this.title}</span>
+            <img
+              src="${this.logoUrl || this.defaultLogoUrl}"
+              class="mr-2 h-[26px]"
+            />
+            <div
+              class="text-purple-51 nav-apax-14-medium-uppercase
+                whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
+            >
+              <span>${this.title}</span>
+            </div>
+            ${this.isTestnet ? x`<lukso-tag background-color="yellow-65" class="ml-2">
+                  TESTNET
+                </lukso-tag>` : ""}
           </div>
-          ${this.isTestnet ? x`<lukso-tag background-color="yellow-65" class="ml-2">
-                TESTNET
-              </lukso-tag>` : ""}
-          ${this.icon ? x`<lukso-icon
-                class="border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
-                name="${this.icon}"
-                color="purple-51"
-              ></lukso-icon>` : ""}
+          ${this.icon ? x`<div
+                class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
+              >
+                <lukso-icon
+                  class="transition cursor-pointer hover:scale-105"
+                  name="${this.icon}"
+                  color="purple-51"
+                  @click=${this.handleIconClick}
+                ></lukso-icon>
+              </div>` : ""}
         </div>
         ${this.isCenter ? x`` : this.hasMenu ? x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : x``}
       </nav>

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

@@ -2,18 +2,18 @@ import { Meta } from '@storybook/web-components';
 /**  Documentation and examples of `lukso-navbar` component.  */
 declare const meta: Meta;
 export default meta;
-/** Example of default navbar. It support `@on-brand-click` event that is fired when clicking on the logo/title. */
+/** Example of default navbar.  */
 export declare const DefaultNavbar: any;
-/** Example of navbar with logo and title in center. You set this by adding `is-center` property. */
+/** Example of navbar with logo and title in center. You set this by adding `is-center` attribute. */
 export declare const CenterNavbar: any;
-/** Example of navbar with transparent background and no shadow. You set this by adding `is-transparent` property. */
+/** Example of navbar with transparent background and no shadow. You set this by adding `is-transparent` attribute. */
 export declare const TransparentNavbar: any;
-/** By default navbar stays at the top of the document. If you want it scroll with the content then ad  `is-sticky` property. */
+/** By default navbar stays at the top of the document. If you want it scroll with the content then ad  `is-sticky` attribute. */
 export declare const StickyNavbar: any;
-/** Navbar with menu. It uses `desktop` and `mobile` slots for menus for different devices. It also require `has-menu` property to be set.  */
+/** Navbar with menu. It uses `desktop` and `mobile` slots for menus for different devices. It also require `has-menu` attribute to be set.  */
 export declare const NavbarWithMenu: any;
-/** Example of navbar with testnet badge. You set this by adding `is-testnet` property. */
+/** Example of navbar with testnet badge. You set this by adding `is-testnet` attribute. */
 export declare const TestnetNavbar: any;
-/** Example of navbar with custom logo. You set this by adding `logo-url` property. */
+/** Example of navbar with custom logo. You set this by adding `logo-url` attribute. */
 export declare const CustomLogoNavbar: any;
 //# sourceMappingURL=lukso-navbar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-navbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/lukso-navbar.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAE5B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IAqHX,CAAA;AAED,eAAe,IAAI,CAAA;AA+EnB,mHAAmH;AACnH,eAAO,MAAM,aAAa,KAAoB,CAAA;AAE9C,oGAAoG;AACpG,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,qHAAqH;AACrH,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAMlD,gIAAgI;AAChI,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,8IAA8I;AAC9I,eAAO,MAAM,cAAc,KAAwB,CAAA;AAKnD,0FAA0F;AAC1F,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,KAAoB,CAAA"}
+{"version":3,"file":"lukso-navbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/lukso-navbar.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAE5B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IA8HX,CAAA;AAED,eAAe,IAAI,CAAA;AA0DnB,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAE9C,qGAAqG;AACrG,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,sHAAsH;AACtH,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAMlD,iIAAiI;AACjI,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,+IAA+I;AAC/I,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,2FAA2F;AAC3F,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,KAAoB,CAAA"}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
+const shared_tailwindElement_index = require('../../index-26918474.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
-const styleMap = require('../../style-map-f36ae803.cjs');
+const styleMap = require('../../style-map-bdd4a4b4.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-51cfbd32.js';
+import { a as TailwindElement, x } from '../../index-12d3b4a1.js';
 import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
-import { o } from '../../style-map-bcba103a.js';
+import { o } from '../../style-map-7d8d33bb.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);