Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
require("../lukso-image/index.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
let ethereum_blockies_base64 = require("ethereum-blockies-base64");
ethereum_blockies_base64 = require_runtime.__toESM(ethereum_blockies_base64, 1);
//#region src/components/lukso-profile/index.ts
var LuksoProfile = class LuksoProfile extends require_index.TailwindElement {
	constructor(..._args) {
		super(..._args);
		this.profileUrl = "";
		this.profileAddress = "";
		this.hasIdenticon = false;
		this.size = "large";
		this.isSquare = false;
		this.placeholder = "/assets/images/profile-default.svg";
		this.profileStyles = (0, tailwind_variants.tv)({
			slots: {
				wrapper: "outline outline-2 outline-neutral-100 relative",
				profile: "overflow-hidden",
				identicon: "absolute shadow-shadow-1xl rounded-full outline outline-neutral-100 right-0 bottom-0"
			},
			variants: {
				isSquare: { false: {
					wrapper: "rounded-full",
					profile: "rounded-full"
				} },
				size: {
					"2x-small": {
						wrapper: "w-4 h-4",
						profile: "w-4 h-4",
						identicon: "w-2 h-2 outline-1"
					},
					"x-small": {
						wrapper: "w-6 h-6",
						profile: "w-6 h-6",
						identicon: "w-3 h-3 outline-1"
					},
					small: {
						wrapper: "w-10 h-10",
						profile: "w-10 h-10",
						identicon: "w-4 h-4 outline-2"
					},
					medium: {
						wrapper: "w-14 h-14",
						profile: "w-14 h-14",
						identicon: "w-5 h-5 outline-2"
					},
					large: {
						wrapper: "w-20 h-20",
						profile: "w-20 h-20",
						identicon: "w-6 h-6 outline-2"
					},
					"x-large": {
						wrapper: "w-24 h-24",
						profile: "w-24 h-24",
						identicon: "w-7 h-7 outline-2"
					},
					"2x-large": {
						wrapper: "w-30 h-30",
						profile: "w-30 h-30",
						identicon: "w-9 h-9 outline-[2.5px]"
					}
				}
			},
			compoundVariants: [
				{
					isSquare: true,
					size: ["2x-small", "x-small"],
					class: {
						wrapper: "rounded-[2px]",
						profile: "rounded-[2px]"
					}
				},
				{
					isSquare: true,
					size: "small",
					class: {
						wrapper: "rounded-4",
						profile: "rounded-4"
					}
				},
				{
					isSquare: true,
					size: "medium",
					class: {
						wrapper: "rounded-8",
						profile: "rounded-8"
					}
				},
				{
					isSquare: true,
					size: "large",
					class: {
						wrapper: "rounded-[10px]",
						profile: "rounded-[10px]"
					}
				},
				{
					isSquare: true,
					size: ["2x-large", "x-large"],
					class: {
						wrapper: "rounded-12",
						profile: "rounded-12"
					}
				}
			]
		});
	}
	identicon() {
		return this.hasIdenticon && this.profileAddress ? (0, ethereum_blockies_base64.default)(this.profileAddress) : "";
	}
	render() {
		const { wrapper, profile, identicon } = this.profileStyles({
			size: this.size,
			isSquare: this.isSquare
		});
		return lit.html`
      <div data-testid="profile" class=${wrapper()}>
        <div class=${profile()}>
          <lukso-image
            src=${this.profileUrl}
            placeholder=${this.placeholder}
          ></lukso-image>
        </div>
        ${this.identicon() ? lit.html`<img src=${this.identicon()} class=${identicon()} alt="" />` : ""}
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "profile-url",
	reflect: true
})], LuksoProfile.prototype, "profileUrl", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "profile-address",
	reflect: true
})], LuksoProfile.prototype, "profileAddress", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "has-identicon",
	reflect: true
})], LuksoProfile.prototype, "hasIdenticon", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	reflect: true
})], LuksoProfile.prototype, "size", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-square"
})], LuksoProfile.prototype, "isSquare", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoProfile.prototype, "placeholder", void 0);
LuksoProfile = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-profile")], LuksoProfile);
//#endregion
Object.defineProperty(exports, "LuksoProfile", {
	enumerable: true,
	get: function() {
		return LuksoProfile;
	}
});
