@lukso/web-components 1.64.1 → 1.66.0

package/dist/components/lukso-icon/icons/logo-facebook.d.ts

@@ -0,0 +1,3 @@
+import { IconOptions } from '../../../components/lukso-icon/index.js';
+export declare const logoFacebook: (options: IconOptions) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=logo-facebook.d.ts.map

package/dist/components/lukso-icon/icons/logo-facebook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-facebook.d.ts","sourceRoot":"","sources":["../../../../../../src/components/lukso-icon/icons/logo-facebook.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,eAAO,MAAM,YAAY,YAAa,WAAW,yCAmBhD,CAAA"}

package/dist/components/lukso-icon/icons/logo-x.d.ts

@@ -0,0 +1,3 @@
+import { IconOptions } from '../../../components/lukso-icon/index.js';
+export declare const logoX: (options: IconOptions) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=logo-x.d.ts.map

package/dist/components/lukso-icon/icons/logo-x.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-x.d.ts","sourceRoot":"","sources":["../../../../../../src/components/lukso-icon/icons/logo-x.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAE9D,eAAO,MAAM,KAAK,YAAa,WAAW,yCAiBzC,CAAA"}

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

@@ -5802,6 +5802,46 @@ const walletRestore = (options) => {
   </svg>`;
 };
 
+const logoX = (options) => {
+  return shared_tailwindElement_index.x`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap.o({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="m2.05 2.599 7.757 10.37-7.805 8.433h1.757l6.833-7.382 5.522 7.382h5.978l-8.193-10.955L21.164 2.6h-1.756l-6.294 6.799-5.085-6.8zm2.584 1.294h2.747l12.127 16.215h-2.746z"
+      fill="#243542"
+    />
+  </svg> `;
+};
+
+const logoFacebook = (options) => {
+  return shared_tailwindElement_index.x`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap.o({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M22.5 12.064c0-5.799-4.702-10.5-10.5-10.5S1.5 6.264 1.5 12.063c0 5.24 3.84 9.584 8.86 10.372V15.1H7.692v-3.036h2.666V9.75c0-2.63 1.568-4.085 3.967-4.085 1.148 0 2.35.205 2.35.205v2.584h-1.324c-1.304 0-1.712.81-1.712 1.64v1.97h2.912l-.465 3.036H13.64v7.337c5.02-.788 8.859-5.132 8.859-10.374"
+      fill="#0866FF"
+    />
+  </svg> `;
+};
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -5867,12 +5907,14 @@ const iconMap = {
   login,
   "login-2": login2,
   "login-3": login3,
-  "logo-chrome": logoChrome,
   "logo-brave": logoBrave,
+  "logo-chrome": logoChrome,
   "logo-edge": logoEdge,
+  "logo-facebook": logoFacebook,
   "logo-firefox": logoFirefox,
   "logo-opera": logoOpera,
   "logo-safari": logoSafari,
+  "logo-x": logoX,
   mail,
   "menu-1": menu1,
   "menu-2": menu2,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-icon/index.ts"],"names":[],"mappings":"AAmJA,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAA;;AAwJ5E,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,SAAK;IAGT,IAAI,SAAW;IAGf,KAAK,SAAe;IAGpB,cAAc,SAAK;IAEnB,OAAO,CAAC,KAAK,CA0BZ;IAED,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-icon/index.ts"],"names":[],"mappings":"AAqJA,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAA;;AA0J5E,qBACa,SAAU,SAAQ,cAA4B;IAEzD,IAAI,SAAK;IAGT,IAAI,SAAW;IAGf,KAAK,SAAe;IAGpB,cAAc,SAAK;IAEnB,OAAO,CAAC,KAAK,CA0BZ;IAED,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

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

@@ -5798,6 +5798,46 @@ const walletRestore = (options) => {
   </svg>`;
 };
 
+const logoX = (options) => {
+  return x`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${o({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      d="m2.05 2.599 7.757 10.37-7.805 8.433h1.757l6.833-7.382 5.522 7.382h5.978l-8.193-10.955L21.164 2.6h-1.756l-6.294 6.799-5.085-6.8zm2.584 1.294h2.747l12.127 16.215h-2.746z"
+      fill="#243542"
+    />
+  </svg> `;
+};
+
+const logoFacebook = (options) => {
+  return x`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${o({
+    width: `${options.width}px`,
+    height: `${options.height}px`
+  })}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M22.5 12.064c0-5.799-4.702-10.5-10.5-10.5S1.5 6.264 1.5 12.063c0 5.24 3.84 9.584 8.86 10.372V15.1H7.692v-3.036h2.666V9.75c0-2.63 1.568-4.085 3.967-4.085 1.148 0 2.35.205 2.35.205v2.584h-1.324c-1.304 0-1.712.81-1.712 1.64v1.97h2.912l-.465 3.036H13.64v7.337c5.02-.788 8.859-5.132 8.859-10.374"
+      fill="#0866FF"
+    />
+  </svg> `;
+};
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -5863,12 +5903,14 @@ const iconMap = {
   login,
   "login-2": login2,
   "login-3": login3,
-  "logo-chrome": logoChrome,
   "logo-brave": logoBrave,
+  "logo-chrome": logoChrome,
   "logo-edge": logoEdge,
+  "logo-facebook": logoFacebook,
   "logo-firefox": logoFirefox,
   "logo-opera": logoOpera,
   "logo-safari": logoSafari,
+  "logo-x": logoX,
   mail,
   "menu-1": menu1,
   "menu-2": menu2,

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

@@ -10,7 +10,7 @@ require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
 require('../../style-map-c86dd6e2.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-e9668573.cjs');
+require('../../index-98e8e0d5.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -6,7 +6,7 @@ import '../lukso-icon/index.js';
 import '../lukso-tag/index.js';
 import '../../style-map-9fdda015.js';
 import '../../directive-2bb7789e.js';
-import '../../index-5e194caf.js';
+import '../../index-1765cfe1.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const shared_tailwindElement_index = require('../../index-688c3040.cjs');
 const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
-const styleMap = require('../../style-map-c86dd6e2.cjs');
-const index = require('../../index-e9668573.cjs');
+const index = require('../../index-e8741080.cjs');
+const index$1 = require('../../index-98e8e0d5.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -27,42 +27,55 @@ exports.LuksoTag = class LuksoTag extends shared_tailwindElement_index.TailwindS
     this.size = "small";
     this.isRounded = false;
     this.backgroundColor = "";
+    this.borderColor = "";
     this.textColor = "";
-    this.defaultStyles = `inline-flex items-center justify-center border border-neutral-20 text-neutral-20`;
-    this.extraSmallStyles = `font-inter text-8 font-500 leading-20 h-[20px]`;
-    this.smallStyles = `paragraph-inter-12-medium h-[28px]`;
-    this.largeStyles = `paragraph-inter-14-medium h-[34px]`;
+    this.tagStyles = index.se({
+      base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2",
+      variants: {
+        size: {
+          "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
+          small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
+          large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
+        },
+        isRounded: {
+          true: "rounded-[56px]"
+        }
+      },
+      compoundVariants: [
+        {
+          size: "small",
+          isRounded: true,
+          class: "px-3"
+        },
+        {
+          size: "x-small",
+          isRounded: true,
+          class: "px-2"
+        }
+      ]
+    });
   }
-  padding() {
-    if (this.size === "x-small" && !this.isRounded) {
-      return "px-1";
+  resolveBorderColor() {
+    if (this.borderColor) {
+      return this.borderColor;
     }
-    if (this.size === "small" && this.isRounded) {
-      return "px-3";
+    if (this.backgroundColor) {
+      return this.backgroundColor;
     }
-    if (this.size === "large") {
-      return "px-4";
-    }
-    return "px-2";
   }
   render() {
+    const tagStyles = this.tagStyles({
+      size: this.size,
+      isRounded: this.isRounded
+    });
     return shared_tailwindElement_index.x`
       <div
         data-testid="tag"
-        class=${index.customClassMap({
-      [this.defaultStyles]: true,
-      [this.padding()]: true,
-      ["rounded-[56px]"]: this.isRounded,
-      ["rounded-8"]: !this.isRounded && this.size !== "x-small",
-      ["rounded-4"]: !this.isRounded && this.size === "x-small",
-      [this.extraSmallStyles]: this.size === "x-small",
-      [this.smallStyles]: this.size === "small",
-      [this.largeStyles]: this.size === "large"
-    })}
-        style=${styleMap.o({
-      backgroundColor: `var(--${this.backgroundColor})`,
-      borderColor: `var(--${this.backgroundColor})`,
-      color: `var(--${this.textColor})`
+        class=${tagStyles}
+        style=${index$1.customStyleMap({
+      [`background-color: var(--${this.backgroundColor})`]: !!this.backgroundColor,
+      [`border-color: var(--${this.resolveBorderColor()})`]: !!this.resolveBorderColor(),
+      [`color: var(--${this.textColor})`]: !!this.textColor
     })}
       >
         <slot></slot>
@@ -79,6 +92,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.n({ type: String, attribute: "background-color" })
 ], exports.LuksoTag.prototype, "backgroundColor", 2);
+__decorateClass([
+  queryAssignedElements.n({ type: String, attribute: "border-color" })
+], exports.LuksoTag.prototype, "borderColor", 2);
 __decorateClass([
   queryAssignedElements.n({ type: String, attribute: "text-color" })
 ], exports.LuksoTag.prototype, "textColor", 2);

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

@@ -4,12 +4,10 @@ export declare class LuksoTag extends LuksoTag_base {
     size: TagSizes;
     isRounded: boolean;
     backgroundColor: string;
+    borderColor: string;
     textColor: string;
-    private defaultStyles;
-    private extraSmallStyles;
-    private smallStyles;
-    private largeStyles;
-    private padding;
+    private tagStyles;
+    private resolveBorderColor;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tag/index.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;;AAEpD,qBACa,QAAS,SAAQ,aAA4B;IAExD,IAAI,EAAE,QAAQ,CAAU;IAGxB,SAAS,UAAQ;IAGjB,eAAe,SAAK;IAGpB,SAAS,SAAK;IAEd,OAAO,CAAC,aAAa,CAAqF;IAC1G,OAAO,CAAC,gBAAgB,CAAmD;IAC3E,OAAO,CAAC,WAAW,CAAuC;IAC1D,OAAO,CAAC,WAAW,CAAuC;IAE1D,OAAO,CAAC,OAAO;IAgBf,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAA;KACtB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tag/index.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;;AAEpD,qBACa,QAAS,SAAQ,aAA4B;IAExD,IAAI,EAAE,QAAQ,CAAU;IAGxB,SAAS,UAAQ;IAGjB,eAAe,SAAK;IAGpB,WAAW,SAAK;IAGhB,SAAS,SAAK;IAEd,OAAO,CAAC,SAAS,CAyBf;IAEF,OAAO,CAAC,kBAAkB;IAU1B,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAA;KACtB;CACF"}

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

@@ -1,7 +1,7 @@
 import { T as TailwindStyledElement, x } from '../../index-3527fb14.js';
 import { n, e } from '../../query-assigned-elements-5d94572f.js';
-import { o } from '../../style-map-9fdda015.js';
-import { c as customClassMap } from '../../index-5e194caf.js';
+import { s as se } from '../../index-c55a1069.js';
+import { c as customStyleMap } from '../../index-1765cfe1.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";
@@ -23,42 +23,55 @@ let LuksoTag = class extends TailwindStyledElement(style) {
     this.size = "small";
     this.isRounded = false;
     this.backgroundColor = "";
+    this.borderColor = "";
     this.textColor = "";
-    this.defaultStyles = `inline-flex items-center justify-center border border-neutral-20 text-neutral-20`;
-    this.extraSmallStyles = `font-inter text-8 font-500 leading-20 h-[20px]`;
-    this.smallStyles = `paragraph-inter-12-medium h-[28px]`;
-    this.largeStyles = `paragraph-inter-14-medium h-[34px]`;
+    this.tagStyles = se({
+      base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2",
+      variants: {
+        size: {
+          "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
+          small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
+          large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
+        },
+        isRounded: {
+          true: "rounded-[56px]"
+        }
+      },
+      compoundVariants: [
+        {
+          size: "small",
+          isRounded: true,
+          class: "px-3"
+        },
+        {
+          size: "x-small",
+          isRounded: true,
+          class: "px-2"
+        }
+      ]
+    });
   }
-  padding() {
-    if (this.size === "x-small" && !this.isRounded) {
-      return "px-1";
+  resolveBorderColor() {
+    if (this.borderColor) {
+      return this.borderColor;
     }
-    if (this.size === "small" && this.isRounded) {
-      return "px-3";
+    if (this.backgroundColor) {
+      return this.backgroundColor;
     }
-    if (this.size === "large") {
-      return "px-4";
-    }
-    return "px-2";
   }
   render() {
+    const tagStyles = this.tagStyles({
+      size: this.size,
+      isRounded: this.isRounded
+    });
     return x`
       <div
         data-testid="tag"
-        class=${customClassMap({
-      [this.defaultStyles]: true,
-      [this.padding()]: true,
-      ["rounded-[56px]"]: this.isRounded,
-      ["rounded-8"]: !this.isRounded && this.size !== "x-small",
-      ["rounded-4"]: !this.isRounded && this.size === "x-small",
-      [this.extraSmallStyles]: this.size === "x-small",
-      [this.smallStyles]: this.size === "small",
-      [this.largeStyles]: this.size === "large"
-    })}
-        style=${o({
-      backgroundColor: `var(--${this.backgroundColor})`,
-      borderColor: `var(--${this.backgroundColor})`,
-      color: `var(--${this.textColor})`
+        class=${tagStyles}
+        style=${customStyleMap({
+      [`background-color: var(--${this.backgroundColor})`]: !!this.backgroundColor,
+      [`border-color: var(--${this.resolveBorderColor()})`]: !!this.resolveBorderColor(),
+      [`color: var(--${this.textColor})`]: !!this.textColor
     })}
       >
         <slot></slot>
@@ -75,6 +88,9 @@ __decorateClass([
 __decorateClass([
   n({ type: String, attribute: "background-color" })
 ], LuksoTag.prototype, "backgroundColor", 2);
+__decorateClass([
+  n({ type: String, attribute: "border-color" })
+], LuksoTag.prototype, "borderColor", 2);
 __decorateClass([
   n({ type: String, attribute: "text-color" })
 ], LuksoTag.prototype, "textColor", 2);

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/web-components';
+import type { Meta } from '@storybook/web-components';
 /**  Documentation and examples of `lukso-tag` component. */
 declare const meta: Meta;
 export default meta;
@@ -10,7 +10,7 @@ export declare const LargeTag: any;
 export declare const ExtraSmallTag: any;
 /** You can create "pill" tags when adding `is-rounded` property. */
 export declare const RoundedTag: any;
-/** You can change color of the tag to any from the palette with `text-color` and `background-color` property. */
+/** You can change color of the tag to any from the palette with `text-color`, `background-color` and 'border-color` property. */
 export declare const CustomColorTag: any;
 /** Tags can have icons inside. Please check `lukso-icon` component for more details about using icons. */
 export declare const IconTag: any;

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

@@ -1 +1 @@
-{"version":3,"file":"lukso-tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tag/lukso-tag.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,4DAA4D;AAC5D,QAAA,MAAM,IAAI,EAAE,IAyEX,CAAA;AAED,eAAe,IAAI,CAAA;AAWnB,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAoB,CAAA;AAQ3C,oFAAoF;AACpF,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAYzC,yCAAyC;AACzC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAY9C,oEAAoE;AACpE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAW3C,iHAAiH;AACjH,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,0GAA0G;AAC1G,eAAO,MAAM,OAAO,KAAoB,CAAA"}
+{"version":3,"file":"lukso-tag.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-tag/lukso-tag.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,4DAA4D;AAC5D,QAAA,MAAM,IAAI,EAAE,IAqFX,CAAA;AAED,eAAe,IAAI,CAAA;AAmBnB,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAoB,CAAA;AAQ3C,oFAAoF;AACpF,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAYzC,yCAAyC;AACzC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAY9C,oEAAoE;AACpE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAW3C,iIAAiI;AACjI,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,0GAA0G;AAC1G,eAAO,MAAM,OAAO,KAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.64.1",
+  "version": "1.66.0",
   "type": "module",
   "files": [
     "dist",