(()=>{var ke=`:root{--default-radius:8px;--text-paragraph-lg-line-height:28px;--text-paragraph-lg-font-size:18px;--text-paragraph-md-line-height:24px;--text-paragraph-md-font-size:16px;--text-paragraph-sm-line-height:20px;--text-paragraph-sm-font-size:14px;--text-paragraph-xs-line-height:20px;--text-paragraph-xs-font-size:12px;--text-overline-letter-spacing:1px;--text-overline-text-transform:uppercase;--text-overline-font-weight:600;--shadow-xs:0px 1px 2px 0px rgba(16, 24, 40, 0.1);--shadow-sm:0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -1px rgba(16, 24, 40, 0.06);--shadow-lg:0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05);--shadow-xlg:0px 8px 10px -6px rgba(16, 24, 40, 0.1), 0px 20px 25px -5px rgba(16, 24, 40, 0.1);--blur-none:none;--blur-sm:blur(4px);--blur-md:blur(8px);--blur-lg:blur(12px);--blur-xl:blur(20px);--spacing-xxs:4px;--spacing-xs:8px;--spacing-sm:16px;--spacing-md:24px;--spacing-lg:32px;--spacing-xlg:40px;--spacing-xxlg:48px;--spacing-xxxlg:56px;--spacing-xxxxlg:64px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-xlg:16px;--border-radius-xxlg:20px;--color-primary-50:#f2f6ff;--color-primary-100:#d9e4ff;--color-primary-200:#bfd1ff;--color-primary-300:#a6baff;--color-primary-400:#6889fe;--color-primary-500:#0000ff;--color-primary-600:#0000df;--color-primary-700:#0000bf;--color-primary-800:#000080;--color-primary-900:#000040;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-destructive-50:#fef2f2;--color-destructive-100:#fee2e2;--color-destructive-200:#fecaca;--color-destructive-300:#fca5a5;--color-destructive-400:#f87171;--color-destructive-500:#ef4444;--color-destructive-600:#dc2626;--color-destructive-700:#b91c1c;--color-destructive-800:#991b1b;--color-destructive-900:#7f1d1d;--color-success-50:#f0fdf4;--color-success-100:#dcfce7;--color-success-200:#bbf7d0;--color-success-300:#86efac;--color-success-400:#4ade80;--color-success-500:#22c55e;--color-success-600:#16a34a;--color-success-700:#15803d;--color-success-800:#166534;--color-success-900:#14532d;--color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-200:#fde68a;--color-warning-300:#fcd34d;--color-warning-400:#fbbf24;--color-warning-500:#f59e0b;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-warning-800:#92400e;--color-warning-900:#78350f;--color-surface:white;--color-code-surface:var(--color-neutral-900)}@media (prefers-color-scheme: dark){:root{--color-surface:#1f1f1f;--color-code-surface:#0a0a0a;--color-neutral-50:#171717;--color-neutral-100:#1f1f1f;--color-neutral-200:#292929;--color-neutral-300:#404040;--color-neutral-400:#737373;--color-neutral-500:#a3a3a3;--color-neutral-600:#d4d4d4;--color-neutral-700:#e5e5e5;--color-neutral-800:#f5f5f5;--color-neutral-900:#fafafa;--color-primary-50:#0d0d33;--color-primary-100:#1a1a5c;--color-success-50:#0a1a0f;--color-success-100:#0f2a15;--shadow-xs:0px 1px 2px 0px rgba(0, 0, 0, 0.4);--shadow-sm:0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);--shadow-md:0px 4px 6px -1px rgba(0, 0, 0, 0.4), 0px 2px 4px -1px rgba(0, 0, 0, 0.3);--shadow-lg:0px 10px 15px -3px rgba(0, 0, 0, 0.4), 0px 4px 6px -2px rgba(0, 0, 0, 0.2)}}`;function Oe(e,r,a){let t=typeof HTMLElement<"u"?HTMLElement.prototype:null;for(;e&&e!==t;){let s=Object.getOwnPropertyDescriptor(e,r);if(s&&(!a||s.get))return s;e=Object.getPrototypeOf(e)}}var B,er=(e,r)=>{var a;Object.entries((a=r.o.t)!=null?a:{}).map((([t,[s]])=>{if(31&s||32&s){let i=e[t],n=Oe(Object.getPrototypeOf(e),t,!0)||Object.getOwnPropertyDescriptor(e,t);n&&Object.defineProperty(e,t,{get(){return n.get.call(this)},set(l){n.set.call(this,l)},configurable:!0,enumerable:!0}),r.l.has(t)?e[t]=r.l.get(t):i!==void 0&&(e[t]=i)}}))},M=e=>{if(e.__stencil__getHostRef)return e.__stencil__getHostRef()},_e=(e,r)=>r in e,A=(e,r)=>(0,console.error)(e,r),ee=new Map,rr=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"],P=typeof window<"u"?window:{},z=P.HTMLElement||class{},I={i:0,u:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,r,a,t)=>e.addEventListener(r,a,t),rel:(e,r,a,t)=>e.removeEventListener(r,a,t),ce:(e,r)=>new CustomEvent(e,r)},q=(()=>{try{return!!P.document.adoptedStyleSheets&&(new CSSStyleSheet,typeof new CSSStyleSheet().replaceSync=="function")}catch{}return!1})(),le=!!q&&!!P.document&&Object.getOwnPropertyDescriptor(P.document.adoptedStyleSheets,"length").writable,ce=!1,ze=[],Ue=[],tr=(e,r)=>a=>{e.push(a),ce||(ce=!0,r&&4&I.i?ge(de):I.raf(de))},Ce=e=>{for(let r=0;r{Ce(ze),Ce(Ue),(ce=ze.length>0)&&I.raf(de)},ge=e=>Promise.resolve(void 0).then(e),ar=tr(Ue,!0);function or(){var e;let r=this.attachShadow({mode:"open"});if(B===void 0&&(B=(e=(function(a){if(!q)return;let t=new CSSStyleSheet;return t.replaceSync(a),t})(ke))!=null?e:null),B)le?r.adoptedStyleSheets.push(B):r.adoptedStyleSheets=[...r.adoptedStyleSheets,B];else if(!q){let a=document.createElement("style");a.innerHTML=ke,r.prepend(a)}}var ae,U=new WeakMap,Ae=e=>"sc-"+e.p,ue=e=>(e=typeof e)=="object"||e==="function",o=(e,r,...a)=>{let t=null,s=null,i=!1,n=!1,l=[],c=h=>{for(let d=0;dh[d])).join(" "))}}if(typeof e=="function")return e(r===null?{}:r,l,ir);let p=re(e,null);return p.m=r,l.length>0&&(p.v=l),p.$=s,p},re=(e,r)=>({i:0,j:e,h:r??null,O:null,v:null,m:null,$:null}),T={},ir={forEach:(e,r)=>e.map(Se).forEach(r),map:(e,r)=>e.map(Se).map(r).map(nr)},Se=e=>({vattrs:e.m,vchildren:e.v,vkey:e.$,vname:e.S,vtag:e.j,vtext:e.h}),nr=e=>{if(typeof e.vtag=="function"){let a={...e.vattrs};return e.vkey&&(a.key=e.vkey),e.vname&&(a.name=e.vname),o(e.vtag,a,...e.vchildren||[])}let r=re(e.vtag,e.vtext);return r.m=e.vattrs,r.v=e.vchildren,r.$=e.vkey,r.S=e.vname,r},Te=e=>{if(!e)return;let r=Object.keys(e);if(r.length===0)return;let a=!1;for(let s of r){if(a)break;for(let i of e[s])if(typeof i=="string"){a=!0;break}}if(!a)return e;let t={};for(let s of r)t[s]=e[s].map((i=>typeof i=="string"?{[i]:0}:i));return t},He=(e,r,a)=>e==null||ue(e)?e:4&r?(a&&typeof e=="string"||e!=="false")&&(e===""||!!e):2&r?typeof e=="string"?parseFloat(e):typeof e=="number"?e:NaN:1&r?e+"":e,R=(e,r)=>{let a=e;return{emit:t=>$e(a,r,{bubbles:!0,composed:!0,cancelable:!0,detail:t})}},$e=(e,r,a)=>{let t=I.ce(r,a);return e.dispatchEvent(t),t},Le=(e,r,a,t,s,i)=>{if(a===t)return;let n=_e(e,r),l=r.toLowerCase();if(r==="class"){let c=e.classList,p=Pe(a),h=Pe(t);c.remove(...p.filter((d=>d&&!h.includes(d)))),c.add(...h.filter((d=>d&&!p.includes(d))))}else if(r==="style"){for(let c in a)t&&t[c]!=null||(c.includes("-")?e.style.removeProperty(c):e.style[c]="");for(let c in t)a&&t[c]===a[c]||(c.includes("-")?e.style.setProperty(c,t[c]):e.style[c]=t[c])}else if(r!=="key"){if(r==="ref")t&&cr(t,e);else if(e.__lookupSetter__(r)||r[0]!=="o"||r[1]!=="n"){if(r[0]==="a"&&r.startsWith("attr:")){let c=r.slice(5),p;{let h=M(e);if(h&&h.o&&h.o.t){let d=h.o.t[c];d&&d[1]&&(p=d[1])}}return p||(p=c.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(t==null||t===!1?t===!1&&e.getAttribute(p)!==""||e.removeAttribute(p):e.setAttribute(p,t===!0?"":t))}if(r[0]==="p"&&r.startsWith("prop:")){let c=r.slice(5);try{e[c]=t}catch{}return}{let c=ue(t);if((n||c&&t!==null)&&!s)try{if(e.tagName.includes("-"))e[r]!==t&&(e[r]=t);else{let p=t??"";r==="list"?n=!1:a!=null&&e[r]===p||(typeof e.__lookupSetter__(r)=="function"?e[r]=p:e.setAttribute(r,p))}}catch{}t==null||t===!1?t===!1&&e.getAttribute(r)!==""||e.removeAttribute(r):(!n||4&i||s)&&!c&&e.nodeType===1&&e.setAttribute(r,t=t===!0?"":t)}}else if(r=r[2]==="-"?r.slice(3):_e(P,l)?l.slice(2):l[2]+r.slice(3),a||t){let c=r.endsWith(Ve);r=r.replace(lr,""),a&&I.rel(e,r,a,c),t&&I.ael(e,r,t,c)}}},sr=/\s/,Pe=e=>(typeof e=="object"&&e&&"baseVal"in e&&(e=e.baseVal),e&&typeof e=="string"?e.split(sr):[]),Ve="Capture",lr=RegExp(Ve+"$"),Fe=(e,r,a)=>{let t=r.O.nodeType===11&&r.O.host?r.O.host:r.O,s=e&&e.m||{},i=r.m||{};for(let n of Ie(Object.keys(s)))n in i||Le(t,n,s[n],void 0,a,r.i);for(let n of Ie(Object.keys(i)))Le(t,n,s[n],i[n],a,r.i)};function Ie(e){return e.includes("ref")?[...e.filter((r=>r!=="ref")),"ref"]:e}var Be=!1,E=!1,pe=[],he=[],te=(e,r,a)=>{let t=r.v[a],s,i,n=0;if(t.h!=null)s=t.O=P.document.createTextNode(t.h);else{if(E||(E=t.j==="svg"),!P.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(s=t.O=P.document.createElementNS(E?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",t.j),E&&t.j==="foreignObject"&&(E=!1),Fe(null,t,E),t.v){let l=t.j==="template"?s.content:s;for(n=0;n{let n,l=e;for(l.shadowRoot&&l.tagName===ae&&(l=l.shadowRoot),a.j==="template"&&(l=l.content);s<=i;++s)t[s]&&(n=te(null,a,s),n&&(t[s].O=n,N(l,n,r)))},De=(e,r,a)=>{for(let t=r;t<=a;++t){let s=e[t];if(s){let i=s.O;Ne(s),i&&i.remove()}}},Z=(e,r,a=!1)=>e.j===r.j&&(a?(a&&!e.$&&r.$&&(e.$=r.$),!0):e.$===r.$),V=(e,r,a=!1)=>{let t=r.O=e.O,s=e.v,i=r.v,n=r.j,l=r.h;l==null?(E=n==="svg"||n!=="foreignObject"&&E,n!=="slot"||Be||e.S!==r.S&&(r.O["s-sn"]=r.S||"",(c=>{I.i|=1;let p=c.closest(ae.toLowerCase());if(p!=null){let h=Array.from(p.__childNodes||p.childNodes).find((g=>g["s-cr"])),d=Array.from(c.__childNodes||c.childNodes);for(let g of h?d.reverse():d)g["s-sh"]!=null&&(N(p,g,h??null),g["s-sh"]=void 0)}I.i&=-2})(r.O.parentElement)),Fe(e,r,E),s!==null&&i!==null?((c,p,h,d,g=!1)=>{let y,D,S=0,x=0,w=0,m=0,b=p.length-1,v=p[0],f=p[b],k=d.length-1,_=d[0],O=d[k],we=h.j==="template"?c.content:c;for(;S<=b&&x<=k;)if(v==null)v=p[++S];else if(f==null)f=p[--b];else if(_==null)_=d[++x];else if(O==null)O=d[--k];else if(Z(v,_,g))V(v,_,g),v=p[++S],_=d[++x];else if(Z(f,O,g))V(f,O,g),f=p[--b],O=d[--k];else if(Z(v,O,g))V(v,O,g),N(we,v.O,f.O.nextSibling),v=p[++S],O=d[--k];else if(Z(f,_,g))V(f,_,g),N(we,f.O,v.O),f=p[--b],_=d[++x];else{for(w=-1,m=S;m<=b;++m)if(p[m]&&p[m].$!==null&&p[m].$===_.$){w=m;break}w>=0?(D=p[w],D.j!==_.j?y=te(p&&p[x],h,w):(V(D,_,g),p[w]=void 0,y=D.O),_=d[++x]):(y=te(p&&p[x],h,x),_=d[++x]),y&&N(v.O.parentNode,y,v.O)}S>b?je(c,d[k+1]==null?null:d[k+1].O,h,d,x,k):x>k&&De(p,S,b)})(t,s,r,i,a):i!==null?(e.h!==null&&(t.textContent=""),je(t,null,r,i,0,i.length-1)):!a&&s!==null&&De(s,0,s.length-1),E&&n==="svg"&&(E=!1)):e.h!==l&&(t.data=l)},Ne=e=>{e.m&&e.m.ref&&pe.push((()=>e.m.ref(null))),e.v&&e.v.map(Ne)},cr=(e,r)=>{he.push((()=>e(r)))},N=(e,r,a)=>e.__insertBefore?e.__insertBefore(r,a):e?.insertBefore(r,a),dr=(e,r,a=!1)=>{let t=e.$hostElement$,s=e.o,i=e.k||re(null,null),n=(l=>l&&l.j===T)(r)?r:o(null,null,r);if(ae=t.tagName,a&&n.m)for(let l of Object.keys(n.m))t.hasAttribute(l)&&!["key","ref","style","class"].includes(l)&&(n.m[l]=t[l]);n.j=null,n.i|=4,e.k=n,n.O=i.O=t.shadowRoot||t,Be=!(!(1&s.i)||128&s.i),V(i,n,a),pe.forEach((l=>l())),pe.length=0,he.forEach((l=>l())),he.length=0},Ke=(e,r)=>{if(r&&!e.M&&r["s-p"]){let a=r["s-p"].push(new Promise((t=>e.M=()=>{r["s-p"].splice(a-1,1),t()})))}},fe=(e,r)=>{if(e.i|=16,4&e.i)return void(e.i|=512);Ke(e,e.C);let a=()=>pr(e,r);if(!r)return ar(a);queueMicrotask((()=>{a()}))},pr=(e,r)=>{let a=e.$hostElement$,t=a;if(!t)throw Error(`Can't render component <${a.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let s;return s=K(t,r?"componentWillLoad":"componentWillUpdate",void 0,a),s=Ee(s,(()=>K(t,"componentWillRender",void 0,a))),Ee(s,(()=>gr(e,t,r)))},Ee=(e,r)=>hr(e)?e.then(r).catch((a=>{console.error(a),r()})):r(),hr=e=>e instanceof Promise||e&&e.then&&typeof e.then=="function",gr=async(e,r,a)=>{var t;let s=e.$hostElement$,i=s["s-rc"];a&&(n=>{let l=n.o,c=n.$hostElement$,p=l.i,h=((d,g)=>{var y,D,S;let x=Ae(g),w=ee.get(x);if(!P.document)return x;if(d=d.nodeType===11?d:P.document,w)if(typeof w=="string"){let m,b=U.get(d=d.head||d);if(b||U.set(d,b=new Set),!b.has(x)){m=P.document.createElement("style"),m.textContent=w;let v=(y=I.A)!=null?y:(function(){var f,k,_;return(_=(k=(f=P.document.head)==null?void 0:f.querySelector('meta[name="csp-nonce"]'))==null?void 0:k.getAttribute("content"))!=null?_:void 0})();if(v!=null&&m.setAttribute("nonce",v),!(1&g.i))if(d.nodeName==="HEAD"){let f=d.querySelectorAll("link[rel=preconnect]"),k=f.length>0?f[f.length-1].nextSibling:d.querySelector("style");d.insertBefore(m,k?.parentNode===d?k:null)}else if("host"in d)if(q){let f=new((D=d.defaultView)!=null?D:d.ownerDocument.defaultView).CSSStyleSheet;f.replaceSync(w),le?d.adoptedStyleSheets.unshift(f):d.adoptedStyleSheets=[f,...d.adoptedStyleSheets]}else{let f=d.querySelector("style");f?f.textContent=w+f.textContent:d.prepend(m)}else d.append(m);1&g.i&&d.insertBefore(m,null),4&g.i&&(m.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),b&&b.add(x)}}else{let m=U.get(d);if(m||U.set(d,m=new Set),!m.has(x)){let b=(S=d.defaultView)!=null?S:d.ownerDocument.defaultView,v;if(w.constructor===b.CSSStyleSheet)v=w;else{v=new b.CSSStyleSheet;for(let f=0;fn())),s["s-rc"]=void 0);{let n=(t=s["s-p"])!=null?t:[],l=()=>fr(e);n.length===0?l():(Promise.all(n).then(l).catch(l),e.i|=4,n.length=0)}},ur=(e,r,a,t)=>{try{r=r.render(),e.i&=-17,e.i|=2,dr(e,r,t)}catch(s){A(s,e.$hostElement$)}return null},fr=e=>{let r=e.$hostElement$,a=r,t=e.C;K(a,"componentDidRender",void 0,r),64&e.i?K(a,"componentDidUpdate",void 0,r):(e.i|=64,vr(r),K(a,"componentDidLoad",void 0,r),e.R(r),t||mr()),e.M&&(e.M(),e.M=void 0),512&e.i&&ge((()=>fe(e,!1))),e.i&=-517},mr=()=>{ge((()=>$e(P,"appload",{detail:{namespace:"logo-display-builder"}})))},K=(e,r,a,t)=>{if(e&&e[r])try{return e[r](a)}catch(s){A(s,t)}},vr=e=>e.classList.add("hydrated"),Re=(e,r,a,t)=>{let s=M(e);if(!s)return;let i=e,n=s.l.get(r),l=s.i,c=i;if(!((a=He(a,t.t[r][0],!!(64&t.i)))===n||Number.isNaN(n)&&Number.isNaN(a))){if(s.l.set(r,a),t.D){let p=t.D[r];p&&p.map((h=>{try{let[[d,g]]=Object.entries(h);(128&l||1&g)&&(c?c[d](a,n,r):s.L.push((()=>{s.N[d](a,n,r)})))}catch(d){A(d,i)}}))}if(2&l){if(c.componentShouldUpdate&&c.componentShouldUpdate(a,n,r)===!1&&!(16&l))return;16&l||fe(s,!1)}}},br=(e,r,a)=>{var t,s;let i=e.prototype;64&r.i&&1&a&&rr.forEach((n=>{let l=i[n];Object.defineProperty(i,n,{value(...c){var p;let h=M(this),d=this;d?typeof l=="function"&&l.call(d,...c):(p=h?._)==null||p.then((g=>{let y=g[n];typeof y=="function"&&y.call(g,...c)}))}})}));{e.watchers&&!r.D&&(r.D=Te(e.watchers)),e.deserializers&&!r.H&&(r.H=e.deserializers),e.serializers&&!r.P&&(r.P=e.serializers);let n=Object.entries((t=r.t)!=null?t:{});n.map((([l,[c]])=>{if(31&c||32&c){let{get:p,set:h}=Oe(i,l)||{};p&&(r.t[l][0]|=2048),h&&(r.t[l][0]|=4096),Object.defineProperty(i,l,{get(){return p?p.apply(this):((d,g)=>M(this).l.get(g))(0,l)},configurable:!0,enumerable:!0}),Object.defineProperty(i,l,{set(d){let g=M(this);if(g){if(h)return(32&c?this[l]:g.$hostElement$[l])===void 0&&g.l.get(l)&&(d=g.l.get(l)),h.call(this,He(d,c,!!(64&r.i))),void Re(this,l,d=32&c?this[l]:g.$hostElement$[l],r);Re(this,l,d,r)}}})}}));{let l=new Map;i.attributeChangedCallback=function(c,p,h){I.jmp((()=>{var d;let g=l.get(c),y=M(this);if(this.hasOwnProperty(g),i.hasOwnProperty(g)&&typeof this[g]=="number"&&this[g]==h)return;if(g==null){let m=y?.i;if(y&&m&&!(8&m)&&h!==p){let b=this,v=(d=r.D)==null?void 0:d[c];v?.forEach((f=>{let[[k,_]]=Object.entries(f);b[k]!=null&&(128&m||1&_)&&b[k].call(b,h,p,c)}))}return}let D=n.find((([m])=>m===g)),S=D&&4&D[1][0],x=S&&h===null&&this[g]===void 0;S&&(h=h!==null&&h!=="false");let w=Object.getOwnPropertyDescriptor(i,g);x||h==this[g]||w.get&&!w.set||(this[g]=h)}))},e.observedAttributes=Array.from(new Set([...Object.keys((s=r.D)!=null?s:{}),...n.filter((([c,p])=>31&p[0])).map((([c,p])=>{let h=p[1]||c;return l.set(h,c),h}))]))}}return e},L=(e,r)=>{let a={i:r[0],p:r[1]};try{a.t=r[2],a.U=r[3],a.D=Te(e.D),a.H=e.H,a.P=e.P;let t=e.prototype.connectedCallback,s=e.prototype.disconnectedCallback;return Object.assign(e.prototype,{__hasHostListenerAttached:!1,__registerHost(){((i,n)=>{let l={i:0,$hostElement$:i,o:n,l:new Map,W:new Map};l._=new Promise((p=>l.R=p)),i["s-p"]=[],i["s-rc"]=[];let c=l;i.__stencil__getHostRef=()=>c,512&n.i&&er(i,l)})(this,a)},connectedCallback(){if(!this.__hasHostListenerAttached){let i=M(this);if(!i)return;Me(this,i,a.U),this.__hasHostListenerAttached=!0}(i=>{if(!(1&I.i)){let n=M(i);if(!n)return;let l=n.o,c=()=>{};if(1&n.i)Me(i,n,l.U),n?.N||n?._&&n._.then((()=>{}));else{n.i|=1;{let p=i;for(;p=p.parentNode||p.host;)if(p["s-p"]){Ke(n,n.C=p);break}}l.t&&Object.entries(l.t).map((([p,[h]])=>{if(31&h&&Object.prototype.hasOwnProperty.call(i,p)){let d=i[p];delete i[p],i[p]=d}})),(async(p,h,d)=>{let g;try{if(!(32&h.i)&&(h.i|=32,g=p.constructor,customElements.whenDefined(p.localName).then((()=>h.i|=128)),g&&g.style)){let S;typeof g.style=="string"&&(S=g.style);let x=Ae(d);if(!ee.has(x)){let w=()=>{};((m,b,v)=>{let f=ee.get(m);q&&v?(f=f||new CSSStyleSheet,typeof f=="string"?f=b:f.replaceSync(b)):f=b,ee.set(m,f)})(x,S,!!(1&d.i)),w()}}let y=h.C,D=()=>fe(h,!0);y&&y["s-rc"]?y["s-rc"].push(D):D()}catch(y){A(y,p),h.M&&(h.M(),h.M=void 0),h.R&&h.R(p)}})(i,n,l)}c()}})(this),t&&t.call(this)},disconnectedCallback(){(async i=>{if(!(1&I.i)){let n=M(i);n?.F&&(n.F.map((l=>l())),n.F=void 0)}U.has(i)&&U.delete(i),i.shadowRoot&&U.has(i.shadowRoot)&&U.delete(i.shadowRoot)})(this),s&&s.call(this)},__attachShadow(){if(this.shadowRoot){if(this.shadowRoot.mode!=="open")throw Error(`Unable to re-use existing shadow root for ${a.p}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else or.call(this,a)}}),Object.defineProperty(e,"is",{value:a.p,configurable:!0}),br(e,a,3)}catch(t){return A(t),e}},Me=(e,r,a)=>{a&&P.document&&a.map((([t,s,i])=>{let n=e,l=xr(r,i),c=yr(t);I.ael(n,s,l,c),(r.F=r.F||[]).push((()=>I.rel(n,s,l,c)))}))},xr=(e,r)=>a=>{try{e.$hostElement$[r](a)}catch(t){A(t,e.$hostElement$)}},yr=e=>({passive:!!(1&e),capture:!!(2&e)});var qe={en:{common:{},fields:{payment_logos:"Select Payment methods",payment_logos_keyboard_hint:"Keyboard: Space to toggle \xB7 Arrow keys to navigate \xB7 Shift+Arrow to reorder",style_variant:"Variant",style_variant_colors:"Colors",style_variant_mono:"Mono",style_variant_darkcolors:"Darkcolors",style_variant_logomark:"Logomark",style_variant_smallmark:"Smallmark",background_colour:"Payment badge colour",background_colour_mono:"Color",background_colour_description:"Enter hex color without # (e.g., cfcfcf, 444444, ee00ee)",width:"Width",template:"Template",template_dintero_top_frame:"Top frame",template_dintero_left_frame:"Left frame",template_logos:"Just logos",account_id:"Account ID",account_id_description:"Example: P11113127",profile_id:"Profile ID",profile_id_description:"Example: P11113127.5z9cwTnW8Xh8qFtAeqN4Qy",transparent_background:"No background color",preview_background_color:"Preview background colour",secure_payment_badge:"Show secure payment text",secure_payment_badge_description:'Show "Secure payment powered by Dintero" information'},actions:{reset_form:"Reset",copy_url:"Copy URL code",copy_profile_url:"Copy URL code",copied_url_code:"Copied URL code"},titles:{configuration:"Settings",preview:"Preview",generated_url:"Generated URL",quick_tips:"Quick Tips",payment_profile:"Payment Profile",style_settings:"Style settings",preview_settings:"Preview settings",profile_based_logo_url:"My Dintero payment profile",benefits_of_payment_profiles:"Benefits of Payment Profiles",secure_payment_powered_by_dintero:"Secure payment powered by Dintero"},bodies:{secure_payment_powered_by_dintero_sub:"Colour: {{color}} (icon, text, and logo)",payment_profile_sub:"A Payment Profile allows you to automatically display logos for all payment methods configured in your Dintero account, without manually specifying each one.

This is the recommended approach as it dynamically updates when you add or remove payment methods from your account settings.",configuration_sub:"Customize your logo display settings",profile_based_logo_url_sub:"Generate logos based on your payment profile configuration",preview_sub:"If your website/app uses a background color, adjust the settings to see how it looks.",preview_settings_sub:"If your website/app uses a background color, adjust the settings to see how it looks.",generated_url_sub:"Copy this URL to use in your website/app.",benefits_of_payment_profiles_auto_reflect:"Automatically reflects your current payment method configuration",benefits_of_payment_profiles_no_need_manual:"No need to manually update URLs when adding or removing payment methods",benefits_of_payment_profiles_ensure_consistency:"Ensures consistency across all your checkout implementations",benefits_of_payment_profiles_simplifies:"Simplifies maintenance and reduces the chance of displaying outdated payment options",quick_tip_select_multiple:"Select multiple payment logos to display them together",quick_tip_logomark_use:"Use 'logomark' variant for a simplified version with only payment logos",quick_tip_dark_colors_dark_bg:"Dark colors variant works best on dark backgrounds",quick_tip_adjust_width:"Adjust width based on your checkout layout (typically 400-600px)"},errors:{copy_url_clipboard_failed:"Failed to copy URL to clipboard",copy_profile_url_clipboard_failed:"Failed to copy profile URL to clipboard",image_preview_error:"Add your Account ID and Profile ID to see the preview"},tooltips:{select_payment_methods:"In Dintero Backoffice, go to Settings > Payments > Payment methods to view the Payment methods you have Active.",my_dintero_payment_profile:"In Dintero Backoffice, go to Settings > Payments > Payment profile and select a profile to find your Account ID and Profile ID."}},da:{common:{},fields:{payment_logos:"V\xE6lg betalingsmetoder",payment_logos_keyboard_hint:"Tastatur: Mellemrum for at v\xE6lge \xB7 Piletaster for at navigere \xB7 Skift+Piletast for at omarrangere",style_variant:"Stilvariant",style_variant_colors:"Farver",style_variant_mono:"Ensfarvet",style_variant_darkcolors:"M\xF8rke farver",style_variant_logomark:"Piller",style_variant_smallmark:"Sm\xE5 piller",background_colour:"Farve p\xE5 betalingsm\xE6rke",background_colour_description:"Indtast hex-farve uden # (f.eks. cfcfcf, 444444, ee00ee)",width:"Bredde",template:"Skabelon",template_dintero_top_frame:"\xD8verste ramme",template_dintero_left_frame:"Venstre ramme",template_logos:"Kun logoer",account_id:"Konto-ID",account_id_description:"Eksempel: P11113127",profile_id:"Profil-ID",profile_id_description:"Eksempel: P11113127.5z9cwTnW8Xh8qFtAeqN4Qy",transparent_background:"Ingen baggrundsfarve",preview_background_color:"Forh\xE5ndsvisningens baggrundsfarve",background_colour_mono:"Farve",secure_payment_badge:"Vis tekst om sikker betaling",secure_payment_badge_description:'Vis "Sikker betaling med Dintero"-information'},actions:{reset_form:"Nulstil",copy_url:"Kopi\xE9r URL-kode",copy_profile_url:"Kopi\xE9r URL-kode",copied_url_code:"URL-kode kopieret"},titles:{configuration:"Konfiguration",preview:"Forh\xE5ndsvisning",generated_url:"Genereret URL",quick_tips:"Hurtige tips",payment_profile:"Betalingsprofil",style_settings:"Stilindstillinger",preview_settings:"Forh\xE5ndsvisningsindstillinger",profile_based_logo_url:"Min Dintero-betalingsprofil",benefits_of_payment_profiles:"Fordele ved betalingsprofiler",secure_payment_powered_by_dintero:"Sikker betaling med Dintero"},bodies:{secure_payment_powered_by_dintero_sub:"Farve: {{color}} (ikon, tekst og logo)",payment_profile_sub:"En Betalingsprofil giver dig mulighed for automatisk at vise logoer for alle betalingsmetoder, der er konfigureret p\xE5 din Dintero-konto, uden manuelt at angive hver enkelt.

Dette er den anbefalede tilgang, da den dynamisk opdateres, n\xE5r du tilf\xF8jer eller fjerner betalingsmetoder fra dine kontoindstillinger.",configuration_sub:"Tilpas dine logovisningsindstillinger",profile_based_logo_url_sub:"Generer logoer baseret p\xE5 din betalingsprofilkonfiguration",preview_sub:"Hvis din hjemmeside/app bruger en baggrundsfarve, kan du justere indstillingerne for at se, hvordan det ser ud.",preview_settings_sub:"Hvis din hjemmeside/app bruger en baggrundsfarve, kan du justere indstillingerne for at se, hvordan det ser ud.",generated_url_sub:"Kopi\xE9r denne URL for at bruge den p\xE5 din hjemmeside/app.",benefits_of_payment_profiles_auto_reflect:"Afspejler automatisk din aktuelle betalingsmetodekonfiguration",benefits_of_payment_profiles_no_need_manual:"Ingen grund til manuelt at opdatere URL'er, n\xE5r du tilf\xF8jer eller fjerner betalingsmetoder",benefits_of_payment_profiles_ensure_consistency:"Sikrer konsistens p\xE5 tv\xE6rs af alle dine checkout-implementeringer",benefits_of_payment_profiles_simplifies:"Forenkler vedligeholdelse og reducerer risikoen for at vise for\xE6ldede betalingsmuligheder",quick_tip_select_multiple:"V\xE6lg flere betalingslogoer for at vise dem sammen",quick_tip_logomark_use:"Brug 'logomark'-varianten for en forenklet version med kun betalingslogoer",quick_tip_dark_colors_dark_bg:"M\xF8rke farver-varianten fungerer bedst p\xE5 m\xF8rke baggrunde",quick_tip_adjust_width:"Just\xE9r bredden baseret p\xE5 dit checkout-layout (typisk 400-600px)"},errors:{copy_url_clipboard_failed:"Kunne ikke kopiere URL til udklipsholder",copy_profile_url_clipboard_failed:"Kunne ikke kopiere profil-URL til udklipsholder",image_preview_error:"Tilf\xF8j dit Konto-ID og Profil-ID for at se forh\xE5ndsvisningen"},tooltips:{select_payment_methods:"I Dintero Backoffice, g\xE5 til Indstillinger > Betalinger > Betalingsmetoder for at se de betalingsmetoder, du har aktive.",my_dintero_payment_profile:"I Dintero Backoffice, g\xE5 til Indstillinger > Betalinger > Betalingsprofil og v\xE6lg en profil for at finde dit Konto-ID og Profil-ID."}},fi:{common:{},fields:{payment_logos:"Valitse maksutavat",payment_logos_keyboard_hint:"N\xE4pp\xE4imist\xF6n: v\xE4lily\xF6nti valitaksesi \xB7 nuolin\xE4pp\xE4imet navigointiin \xB7 Shift+nuolin\xE4pp\xE4imet j\xE4rjest\xE4miseen",style_variant:"Tyylivalinta",style_variant_colors:"V\xE4rit",style_variant_mono:"Yksiv\xE4rinen",style_variant_darkcolors:"Tummat v\xE4rit",style_variant_logomark:"Pillerit",style_variant_smallmark:"Pienet pillerit",background_colour:"Maksumerkin v\xE4ri",background_colour_description:"Sy\xF6t\xE4 hex-v\xE4ri ilman #-merkki\xE4 (esim. cfcfcf, 444444, ee00ee)",width:"Leveys",template:"Malli",template_dintero_top_frame:"Yl\xE4kehys",template_dintero_left_frame:"Vasen kehys",template_logos:"Vain logot",account_id:"Tili-ID",account_id_description:"Esimerkki: P11113127",profile_id:"Profiili-ID",profile_id_description:"Esimerkki: P11113127.5z9cwTnW8Xh8qFtAeqN4Qy",transparent_background:"Ei taustav\xE4ri\xE4",preview_background_color:"Esikatselun taustav\xE4ri",background_colour_mono:"V\xE4ri",secure_payment_badge:"N\xE4yt\xE4 turvallisen maksun teksti",secure_payment_badge_description:'N\xE4yt\xE4 "Turvallinen maksu Dinterolla" -tiedot'},actions:{reset_form:"Nollaa",copy_url:"Kopioi URL-koodi",copy_profile_url:"Kopioi URL-koodi",copied_url_code:"Kopioitu URL-koodi"},titles:{configuration:"Asetukset",preview:"Esikatselu",generated_url:"Luotu URL",quick_tips:"Pikavinkit",payment_profile:"Maksuprofiili",style_settings:"Tyyliasetukset",preview_settings:"Esikatseluasetukset",profile_based_logo_url:"Oma Dintero-maksuprofiili",benefits_of_payment_profiles:"Maksuprofiilien edut",secure_payment_powered_by_dintero:"Turvallinen maksu Dinterolla"},bodies:{secure_payment_powered_by_dintero_sub:"V\xE4ri: {{color}} (kuvake, teksti ja logo)",payment_profile_sub:"Maksuprofiili mahdollistaa kaikkien Dintero-tilillesi m\xE4\xE4ritettyjen maksutapojen logojen automaattisen n\xE4ytt\xE4misen ilman jokaisen manuaalista m\xE4\xE4ritt\xE4mist\xE4.

T\xE4m\xE4 on suositeltu l\xE4hestymistapa, koska se p\xE4ivittyy dynaamisesti, kun lis\xE4\xE4t tai poistat maksutapoja tiliasetuksistasi.",configuration_sub:"Mukauta logon\xE4yt\xF6n asetuksia",profile_based_logo_url_sub:"Luo logot maksuprofiilisi kokoonpanon perusteella",preview_sub:"Jos verkkosivustosi/sovelluksesi k\xE4ytt\xE4\xE4 taustav\xE4ri\xE4, s\xE4\xE4d\xE4 asetuksia n\xE4hd\xE4ksesi milt\xE4 se n\xE4ytt\xE4\xE4.",preview_settings_sub:"Jos verkkosivustosi/sovelluksesi k\xE4ytt\xE4\xE4 taustav\xE4ri\xE4, s\xE4\xE4d\xE4 asetuksia n\xE4hd\xE4ksesi milt\xE4 se n\xE4ytt\xE4\xE4.",generated_url_sub:"Kopioi t\xE4m\xE4 URL k\xE4ytett\xE4v\xE4ksi verkkosivustollasi/sovelluksessasi.",benefits_of_payment_profiles_auto_reflect:"Heijastaa automaattisesti nykyisen maksutapakokoonpanosi",benefits_of_payment_profiles_no_need_manual:"Ei tarvetta p\xE4ivitt\xE4\xE4 URL-osoitteita manuaalisesti lis\xE4tess\xE4si tai poistaessasi maksutapoja",benefits_of_payment_profiles_ensure_consistency:"Varmistaa johdonmukaisuuden kaikissa kassatoteutuksissasi",benefits_of_payment_profiles_simplifies:"Yksinkertaistaa yll\xE4pitoa ja v\xE4hent\xE4\xE4 vanhentuneiden maksutapojen n\xE4ytt\xE4misen riski\xE4",quick_tip_select_multiple:"Valitse useita maksulogoja n\xE4ytt\xE4\xE4ksesi ne yhdess\xE4",quick_tip_logomark_use:"K\xE4yt\xE4 'logomark'-varianttia yksinkertaistettuun versioon, jossa on vain maksulogot",quick_tip_dark_colors_dark_bg:"Tummien v\xE4rien vaihtoehto toimii parhaiten tummilla taustoilla",quick_tip_adjust_width:"S\xE4\xE4d\xE4 leveytt\xE4 kassan\xE4kym\xE4n asettelun mukaan (yleens\xE4 400\u2013600px)"},errors:{copy_url_clipboard_failed:"URL-osoitteen kopiointi leikep\xF6yd\xE4lle ep\xE4onnistui",copy_profile_url_clipboard_failed:"Profiili-URL-osoitteen kopiointi leikep\xF6yd\xE4lle ep\xE4onnistui",image_preview_error:"Lis\xE4\xE4 Tili-ID ja Profiili-ID n\xE4hd\xE4ksesi esikatselun"},tooltips:{select_payment_methods:"Siirry Dintero Backofficessa kohtaan Asetukset > Maksut > Maksutavat n\xE4hd\xE4ksesi aktiiviset maksutapasi.",my_dintero_payment_profile:"Siirry Dintero Backofficessa kohtaan Asetukset > Maksut > Maksuprofiili ja valitse profiili l\xF6yt\xE4\xE4ksesi Tili-ID ja Profiili-ID."}},no:{common:{},fields:{payment_logos:"Velg betalingsmetoder",payment_logos_keyboard_hint:"Tastatur: Mellomrom for \xE5 velge \xB7 piltaster for \xE5 navigere \xB7 Shift+piltast for \xE5 sortere",style_variant:"Stilvariant",style_variant_colors:"Farger",style_variant_mono:"Ensfarget",style_variant_darkcolors:"M\xF8rke farger",style_variant_logomark:"Piller",style_variant_smallmark:"Sm\xE5 piller",background_colour:"Farge p\xE5 betalingsmerke",background_colour_description:"Angi hex-farge uten # (f.eks. cfcfcf, 444444, ee00ee)",width:"Bredde",template:"Mal",template_dintero_top_frame:"\xD8vre ramme",template_dintero_left_frame:"Venstre ramme",template_logos:"Bare logoer",account_id:"Konto-ID",account_id_description:"Eksempel: P11113127",profile_id:"Profil-ID",profile_id_description:"Eksempel: P11113127.5z9cwTnW8Xh8qFtAeqN4Qy",transparent_background:"Ingen bakgrunnsfarge",preview_background_color:"Forh\xE5ndsvisningens bakgrunnsfarge",background_colour_mono:"Farge",secure_payment_badge:"Vis tekst om sikker betaling",secure_payment_badge_description:'Vis "Sikker betaling med Dintero"-informasjon'},actions:{reset_form:"Tilbakestill",copy_url:"Kopier URL-kode",copy_profile_url:"Kopier URL-kode",copied_url_code:"URL-kode kopiert"},titles:{configuration:"Konfigurasjon",preview:"Forh\xE5ndsvisning",generated_url:"Generert URL",quick_tips:"Hurtigtips",payment_profile:"Betalingsprofil",style_settings:"Stilinnstillinger",preview_settings:"Forh\xE5ndsvisningsinnstillinger",profile_based_logo_url:"Min Dintero-betalingsprofil",benefits_of_payment_profiles:"Fordeler med betalingsprofiler",secure_payment_powered_by_dintero:"Sikker betaling med Dintero"},bodies:{secure_payment_powered_by_dintero_sub:"Farge: {{color}} (ikon, tekst og logo)",payment_profile_sub:"En Betalingsprofil lar deg automatisk vise logoer for alle betalingsmetoder som er konfigurert i Dintero-kontoen din, uten \xE5 manuelt spesifisere hver enkelt.

Dette er den anbefalte tiln\xE6rmingen ettersom den dynamisk oppdateres n\xE5r du legger til eller fjerner betalingsmetoder fra kontoinnstillingene dine.",configuration_sub:"Tilpass innstillingene for logovisning",profile_based_logo_url_sub:"Generer logoer basert p\xE5 betalingsprofilkonfigurasjonen din",preview_sub:"Hvis nettsiden/appen din bruker en bakgrunnsfarge, kan du justere innstillingene for \xE5 se hvordan det ser ut.",preview_settings_sub:"Hvis nettsiden/appen din bruker en bakgrunnsfarge, kan du justere innstillingene for \xE5 se hvordan det ser ut.",generated_url_sub:"Kopier denne URL-en for \xE5 bruke den p\xE5 nettsiden/appen din.",benefits_of_payment_profiles_auto_reflect:"Gjenspeiler automatisk din gjeldende betalingsmetodekonfigurasjon",benefits_of_payment_profiles_no_need_manual:"Ikke behov for \xE5 manuelt oppdatere URL-er n\xE5r du legger til eller fjerner betalingsmetoder",benefits_of_payment_profiles_ensure_consistency:"Sikrer konsistens p\xE5 tvers av alle kassaimplementasjonene dine",benefits_of_payment_profiles_simplifies:"Forenkler vedlikehold og reduserer sjansen for \xE5 vise utdaterte betalingsalternativer",quick_tip_select_multiple:"Velg flere betalingslogoer for \xE5 vise dem sammen",quick_tip_logomark_use:"Bruk 'logomark'-varianten for en forenklet versjon med bare betalingslogoer",quick_tip_dark_colors_dark_bg:"M\xF8rke farger-varianten fungerer best p\xE5 m\xF8rke bakgrunner",quick_tip_adjust_width:"Juster bredden basert p\xE5 utsjekk-layouten din (vanligvis 400\u2013600px)"},errors:{copy_url_clipboard_failed:"Kunne ikke kopiere URL til utklippstavlen",copy_profile_url_clipboard_failed:"Kunne ikke kopiere profil-URL til utklippstavlen",image_preview_error:"Legg til Konto-ID og Profil-ID for \xE5 se forh\xE5ndsvisningen"},tooltips:{select_payment_methods:"I Dintero Backoffice, g\xE5 til Innstillinger > Betalinger > Betalingsmetoder for \xE5 se betalingsmetodene du har aktive.",my_dintero_payment_profile:"I Dintero Backoffice, g\xE5 til Innstillinger > Betalinger > Betalingsprofil og velg en profil for \xE5 finne ditt Konto-ID og Profil-ID."}},sv:{common:{},fields:{payment_logos:"V\xE4lj betalningsmetoder",payment_logos_keyboard_hint:"Tangentbord: Mellanslag f\xF6r att v\xE4lja \xB7 Piltangenter f\xF6r att navigera \xB7 Shift+Pil f\xF6r att ordna om",style_variant:"Stilvariant",style_variant_colors:"F\xE4rger",style_variant_mono:"Enf\xE4rgad",style_variant_darkcolors:"M\xF6rka f\xE4rger",style_variant_logomark:"Piller",style_variant_smallmark:"Sm\xE5 piller",background_colour:"F\xE4rg p\xE5 betalningsm\xE4rke",background_colour_description:"Ange hex-f\xE4rg utan # (t.ex. cfcfcf, 444444, ee00ee)",width:"Bredd",template:"Mall",template_dintero_top_frame:"\xD6vre ram",template_dintero_left_frame:"V\xE4nster ram",template_logos:"Bara logotyper",account_id:"Konto-ID",account_id_description:"Exempel: P11113127",profile_id:"Profil-ID",profile_id_description:"Exempel: P11113127.5z9cwTnW8Xh8qFtAeqN4Qy",transparent_background:"Ingen bakgrundsf\xE4rg",preview_background_color:"F\xF6rhandsgranskningens bakgrundsf\xE4rg",background_colour_mono:"F\xE4rg",secure_payment_badge:"Visa text om s\xE4ker betalning",secure_payment_badge_description:'Visa information om "S\xE4ker betalning med Dintero"'},actions:{reset_form:"\xC5terst\xE4ll",copy_url:"Kopiera URL-kod",copy_profile_url:"Kopiera URL-kod",copied_url_code:"Kopierad URL-kod"},titles:{configuration:"Konfiguration",preview:"F\xF6rhandsgranskning",generated_url:"Genererad URL",quick_tips:"Snabbtips",payment_profile:"Betalprofil",style_settings:"Stilinst\xE4llningar",preview_settings:"F\xF6rhandsgranskningsinst\xE4llningar",profile_based_logo_url:"Min Dintero-betalprofil",benefits_of_payment_profiles:"F\xF6rdelar med betalprofiler",secure_payment_powered_by_dintero:"S\xE4ker betalning med Dintero"},bodies:{secure_payment_powered_by_dintero_sub:"F\xE4rg: {{color}} (ikon, text och logotyp)",payment_profile_sub:"En Betalprofil l\xE5ter dig automatiskt visa logotyper f\xF6r alla betalningsmetoder som \xE4r konfigurerade i ditt Dintero-konto, utan att manuellt ange var och en.

Detta \xE4r den rekommenderade metoden eftersom den uppdateras dynamiskt n\xE4r du l\xE4gger till eller tar bort betalningsmetoder fr\xE5n dina kontoinst\xE4llningar.",configuration_sub:"Anpassa dina inst\xE4llningar f\xF6r logovisning",profile_based_logo_url_sub:"Generera logotyper baserat p\xE5 din betalprofils konfiguration",preview_sub:"Om din webbplats/app anv\xE4nder en bakgrundsf\xE4rg kan du justera inst\xE4llningarna f\xF6r att se hur det ser ut.",preview_settings_sub:"Om din webbplats/app anv\xE4nder en bakgrundsf\xE4rg kan du justera inst\xE4llningarna f\xF6r att se hur det ser ut.",generated_url_sub:"Kopiera denna URL f\xF6r att anv\xE4nda den p\xE5 din webbplats/app.",benefits_of_payment_profiles_auto_reflect:"Reflekterar automatiskt din aktuella betalningsmetodkonfiguration",benefits_of_payment_profiles_no_need_manual:"Inget behov av att manuellt uppdatera URL:er n\xE4r du l\xE4gger till eller tar bort betalningsmetoder",benefits_of_payment_profiles_ensure_consistency:"S\xE4kerst\xE4ller konsekvens i alla dina kassaimplementationer",benefits_of_payment_profiles_simplifies:"F\xF6renklar underh\xE5ll och minskar risken att visa inaktuella betalningsalternativ",quick_tip_select_multiple:"V\xE4lj flera betalningslogotyper f\xF6r att visa dem tillsammans",quick_tip_logomark_use:"Anv\xE4nd 'logomark'-varianten f\xF6r en f\xF6renklad version med endast betalningslogotyper",quick_tip_dark_colors_dark_bg:"M\xF6rka f\xE4rger-varianten fungerar b\xE4st p\xE5 m\xF6rka bakgrunder",quick_tip_adjust_width:"Justera bredden baserat p\xE5 din kassalayout (vanligtvis 400\u2013600px)"},errors:{copy_url_clipboard_failed:"Kunde inte kopiera URL till urklipp",copy_profile_url_clipboard_failed:"Kunde inte kopiera profil-URL till urklipp",image_preview_error:"L\xE4gg till Konto-ID och Profil-ID f\xF6r att se f\xF6rhandsgranskningen"},tooltips:{select_payment_methods:"I Dintero Backoffice, g\xE5 till Inst\xE4llningar > Betalningar > Betalningsmetoder f\xF6r att se de betalningsmetoder du har aktiva.",my_dintero_payment_profile:"I Dintero Backoffice, g\xE5 till Inst\xE4llningar > Betalningar > Betalprofil och v\xE4lj en profil f\xF6r att hitta ditt Konto-ID och Profil-ID."}}},We=(e,r)=>{let a=e;for(let t of r.split(".")){if(a==null||typeof a!="object")return;a=a[t]}return typeof a=="string"?a:void 0},u=(e,r)=>{let a=qe[r],t;return a&&(t=We(a,e)),t===void 0&&r!=="en"&&(t=We(qe.en,e)),t===void 0?e:t},wr={nb:"no"},me=e=>{let r=e.split("-")[0].toLowerCase();return wr[r]??r},F=(e,r)=>{if(r)return me(r);let a=e?.closest("[lang]")?.getAttribute("lang");return a?me(a):typeof navigator<"u"&&navigator.language?me(navigator.language):"en"},oe=()=>o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",role:"presentation"},o("path",{d:"M7.66677 4.55556H6.11122C5.25211 4.55556 4.55566 5.252 4.55566 6.11111V15.4444C4.55566 16.3036 5.25211 17 6.11122 17H13.889C14.7481 17 15.4446 16.3036 15.4446 15.4444V6.11111C15.4446 5.252 14.7481 4.55556 13.889 4.55556H12.3334M7.66677 4.55556C7.66677 5.41467 8.36322 6.11111 9.22233 6.11111H10.7779C11.637 6.11111 12.3334 5.41467 12.3334 4.55556M7.66677 4.55556C7.66677 3.69645 8.36322 3 9.22233 3H10.7779C11.637 3 12.3334 3.69645 12.3334 4.55556",stroke:"currentColor","stroke-width":"1.67","stroke-linecap":"round"})),ie=()=>o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",role:"presentation"},o("path",{d:"M2.3999 2.40002V5.90002H2.80696M13.5566 7.30002C13.2121 4.53761 10.8556 2.40002 7.9999 2.40002C5.64974 2.40002 3.63771 3.84774 2.80696 5.90002M2.80696 5.90002H5.8999M13.5999 13.6V10.1H13.1928M13.1928 10.1C12.3621 12.1523 10.3501 13.6 7.9999 13.6C5.14417 13.6 2.7877 11.4624 2.44323 8.70002M13.1928 10.1H10.0999",stroke:"currentColor","stroke-width":"1.67","stroke-linecap":"round","stroke-linejoin":"round"})),ne=()=>o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 20 20",fill:"none",role:"presentation"},o("path",{d:"M3 11L7 15L17 5",stroke:"currentColor","stroke-width":"1.67","stroke-linecap":"round","stroke-linejoin":"round"})),se=()=>o("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",role:"presentation"},o("path",{d:"M10.7778 13.1111H10V10H9.22222M10 6.88889H10.0078M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z",stroke:"currentColor","stroke-width":"1.67","stroke-linecap":"round","stroke-linejoin":"round"}));function j(e,r){if(!e)return;let a=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),"setFormValue");typeof a?.value=="function"&&a.value.call(e,r)}var kr=L(class extends z{constructor(e){super(),e!==!1&&this.__registerHost(),this.__attachShadow(),this.uxChange=R(this,"uxChange"),this.uxInput=R(this,"uxInput"),this.internals=this.attachInternals()}label="";description="";textPrefix="";placeholder="";value="";name="";type="text";currentValue="";focused=!1;uxChange;uxInput;internals;input;async setFocus(){this.input?.focus()}async getInputElement(){return this.input}componentWillLoad(){this.currentValue=this.value,j(this.internals,this.value)}valueChanged(e){this.currentValue=e}handleInput(e){let r=e.target.value;this.currentValue=r,j(this.internals,r),this.uxInput.emit(r)}handleChange(e){this.uxChange.emit(e.target.value)}render(){return o("div",{key:"0bc291e074405d1d38e108c7729a111268304c80",class:"wrapper"},this.label&&o("label",{key:"813afe22e78c3a205defdf407b9f30952f54aff0",class:"label",htmlFor:this.name},this.label),o("div",{key:"acd7749c42fbf5b3d37955ad64b7d7a43e07872a",class:"input-row"},o("div",{key:"467a46462bb7b6140a9c88b271f4cc4d8fb05105",class:"input-container "+(this.focused?"focused":"")},this.textPrefix&&o("span",{key:"22d097ee4d6b258903210491eea8d883732dd51c",class:"prefix"},this.textPrefix),o("input",{key:"2219c9f41197eb6bed9763666b8ed3a3d3b5f363",id:this.name,ref:e=>this.input=e,type:this.type,name:this.name,value:this.currentValue,placeholder:this.placeholder,onInput:e=>this.handleInput(e),onChange:e=>this.handleChange(e),onFocus:()=>this.focused=!0,onBlur:()=>this.focused=!1})),o("slot",{key:"bcc3e457324641efbcf0fe20f94d0c1ccfc62fc2",name:"textSuffix"})),this.description&&o("p",{key:"afc234b41a47ba7212aa8c148c810b27befb9fad",class:"description"},this.description))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'h1,h2,h3,h4,h5,h6,p,span,code,pre,strong,a,div{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em}h1{font-size:48px;line-height:56px;font-weight:700}h2{font-size:40px;line-height:48px;font-weight:700}h3{font-size:32px;line-height:40px;font-weight:700}h4{font-size:24px;line-height:32px;font-weight:700}h5{font-size:20px;line-height:28px;font-weight:700}h6{font-size:16px;line-height:24px;font-weight:700}p{line-height:20px;&.xs{line-height:var(--text-paragraph-xs-line-height);font-size:var(--text-paragraph-xs-font-size)}&.sm{line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}&.md{line-height:var(--text-paragraph-md-line-height);font-size:var(--text-paragraph-md-font-size)}&.lg{line-height:var(--text-paragraph-lg-line-height);font-size:var(--text-paragraph-lg-font-size)}&.overline{letter-spacing:var(--text-overline-letter-spacing);text-transform:var(--text-overline-text-transform);font-weight:var(--text-overline-font-weight)}}*{box-sizing:border-box;margin:0;padding:0}.header{display:flex;align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-sm);border-bottom:2px solid var(--color-primary-500)}.pane{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;flex:1 1 400px;&.settings-pane{order:1}&.preview-pane{flex:1 1 500px;align-items:center;order:2}&.url-pane{order:3}}.content{flex:1;display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-self:stretch;max-width:100%;&.single-column{flex-direction:column;.pane{max-width:100%}}}.footer{display:flex;align-items:center;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);justify-content:center}.card{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;overflow:hidden;background-color:var(--color-surface);&.primary-accent{background-color:var(--color-primary-50);border-color:var(--color-primary-100);color:var(--color-primary-700);:host(.dark) &{background-color:var(--color-primary-100);border-color:var(--color-primary-300);color:var(--color-primary-200)}}&.greenish-accent{background-color:var(--color-success-50);border-color:var(--color-success-300);color:var(--color-success-900);:host(.dark) &{background-color:var(--color-success-300);border-color:var(--color-success-500);color:var(--color-success-50)}}}ul{list-style-type:disc;display:flex;flex-direction:column;gap:var(--spacing-xs);li{margin-left:var(--spacing-md);line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}}.card-header{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:center;justify-content:space-between}.card-title{display:flex;flex-direction:column;gap:var(--spacing-xs)}button{appearance:none;background:none;font:inherit;outline:2px solid transparent;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.2s, background-color 0.2s, box-shadow 0.1s, opacity 0.05s, outline 0.1s, outline-offset 0.15s;display:flex;align-items:center;gap:var(--spacing-xs);&:hover{opacity:0.9}&:focus{outline:3px solid var(--color-primary-100);outline-offset:6px}&:active{opacity:0.8}&.primary{background-color:var(--color-primary-500);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md)}&.default{color:var(--color-neutral-900);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);border-color:var(--color-neutral-300);box-shadow:var(--shadow-xs);&:hover{border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}&:active{border-color:var(--color-neutral-500);background-color:var(--color-neutral-100);box-shadow:var(--shadow-md)}}&.outlined{color:var(--color-neutral-900);border-color:var(--color-neutral-500);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);gap:6px;font-weight:500;&:hover{background-color:var(--color-neutral-50)}&:active{background-color:var(--color-neutral-100)}}&.small{padding:6px 12px;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height)}}hr{border-style:solid;color:var(--color-neutral-300)}code{white-space:pre-wrap;word-break:break-all;&.in-block{background-color:var(--color-code-surface);color:var(--color-success-400);border:1px solid var(--color-code-surface);border-radius:var(--default-radius);padding:var(--spacing-sm)}}.section-heading{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--color-neutral-900)}.section-subheading{display:flex;align-items:center;justify-content:space-between;width:100%}.section-subheading-title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900);display:flex;align-items:center;gap:var(--spacing-xs)}.preview-area{background-color:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-xlg);width:100%;overflow-x:auto}.preview-area-scroll{padding:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm)}.preview-area-inner{background-color:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;img{max-width:100%;height:auto}}.preview-settings{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.preview-settings-heading{display:flex;flex-direction:column}.preview-settings-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900)}.preview-settings-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:var(--color-neutral-700)}.generated-url-section{width:100%;padding-top:var(--spacing-sm)}.generated-url-card{background-color:#171717;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.generated-url-heading{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}.generated-url-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:#ffffff}.generated-url-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:#d4d4d4}.console{background-color:#303b42;border:1px solid #262f35;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;overflow:hidden;width:100%}.console code{white-space:pre-wrap;word-break:break-all;font-family:"JetBrains Mono", monospace;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:#d4d4d4;max-width:100%}.console button{background-color:#ffffff;color:#171717;font-weight:500;padding:10px var(--spacing-sm);border-radius:var(--border-radius-md);border:none;&:hover{opacity:0.9}}:host{font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:400;font-style:normal;font-stretch:normal;font-feature-settings:"liga" 1, "calt" 1;display:flex;flex-direction:column;padding:unset;margin:unset;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}.label{font-size:var(--text-paragraph-sm-font-size);font-weight:500;color:var(--color-neutral-900)}.input-row{display:flex;align-items:center;gap:var(--spacing-xs);min-width:0}.input-container{display:flex;align-items:center;flex:1;min-width:0;gap:var(--spacing-xs);background:var(--color-surface);border:1.5px solid var(--color-neutral-300);border-radius:var(--border-radius-md);padding:10px var(--spacing-sm);transition:border-color 0.15s ease, box-shadow 0.15s ease}.input-container.focused{border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-100)}.prefix{font-size:var(--text-paragraph-md-font-size);color:var(--color-neutral-500);user-select:none;flex-shrink:0}input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--text-paragraph-md-font-size);color:var(--color-neutral-900);min-width:0}input::placeholder{color:var(--color-neutral-400)}.description{font-size:var(--text-paragraph-sm-font-size);color:var(--color-neutral-600);margin:0}::slotted([slot="textSuffix"]){flex-shrink:0}'}},[833,"ux-text-input",{label:[1],description:[1],textPrefix:[1,"text-prefix"],placeholder:[1],value:[1],name:[1],type:[1],currentValue:[32],focused:[32],setFocus:[64],getInputElement:[64]},void 0,{value:[{valueChanged:0}]}]);function $(){typeof customElements<"u"&&["ux-text-input"].forEach((e=>{e==="ux-text-input"&&(customElements.get(e)||customElements.define(e,kr))}))}$();var W=e=>/^[0-9a-fA-F]{6}$/.test(e),ve=e=>{let r=parseInt(e.slice(0,2),16)/255,a=parseInt(e.slice(2,4),16)/255,t=parseInt(e.slice(4,6),16)/255,s=Math.max(r,a,t),i=s-Math.min(r,a,t),n=s,l=s===0?0:i/s,c=0;if(i!==0)switch(s){case r:c=((a-t)/i+(a{let t=r/100,s=a/100,i=n=>{let l=(n+e/60)%6,c=s-s*t*Math.max(Math.min(l,4-l,1),0);return Math.round(255*c).toString(16).padStart(2,"0")};return`${i(5)}${i(3)}${i(1)}`},_r=L(class extends z{constructor(e){super(),e!==!1&&this.__registerHost(),this.__attachShadow(),this.uxChange=R(this,"uxChange"),this.uxInput=R(this,"uxInput"),this.internals=this.attachInternals()}get el(){return this}label="";description="";value="#000000";name="";hex="000000";pickerOpen=!1;hsv={hue:0,sat:0,val:0};uxChange;uxInput;internals;swatchRef;pickerRef;canvasRef;hueStripRef;componentWillLoad(){this.hex=this.value.replace(/^#/,""),W(this.hex)&&(this.hsv=ve(this.hex)),j(this.internals,this.value)}connectedCallback(){document.addEventListener("pointerdown",this.onDocumentPointerDown)}disconnectedCallback(){document.removeEventListener("pointerdown",this.onDocumentPointerDown),this.stopTrackingPosition()}onDocumentPointerDown=e=>{this.pickerOpen&&(e.composedPath().includes(this.el)||(this.pickerOpen=!1,this.stopTrackingPosition()))};positionPicker(){if(!this.pickerRef||!this.swatchRef)return;let e=this.swatchRef.getBoundingClientRect();Object.assign(this.pickerRef.style,{top:`${e.bottom+4}px`,left:e.right-(this.pickerRef.offsetWidth||240)+"px"})}onScrollOrResize=()=>this.positionPicker();startTrackingPosition(){window.addEventListener("scroll",this.onScrollOrResize,{capture:!0,passive:!0}),window.addEventListener("resize",this.onScrollOrResize,{passive:!0})}stopTrackingPosition(){window.removeEventListener("scroll",this.onScrollOrResize,{capture:!0}),window.removeEventListener("resize",this.onScrollOrResize)}togglePicker(){this.pickerOpen?(this.pickerOpen=!1,this.stopTrackingPosition()):(this.positionPicker(),this.pickerOpen=!0,this.startTrackingPosition())}valueChanged(e){let r=e.replace(/^#/,"");this.hex=r,W(r)&&(this.hsv=ve(r))}emitHex(e,r){j(this.internals,`#${e}`),r==="input"?this.uxInput.emit(`#${e}`):this.uxChange.emit(`#${e}`)}onHexInput(e){e.stopPropagation(),this.hex=e.detail,W(this.hex)&&(this.hsv=ve(this.hex),this.emitHex(this.hex,"input"))}onHexChange(e){e.stopPropagation(),W(e.detail)&&this.emitHex(e.detail,"change")}updateFromCanvas(e){try{let r=this.canvasRef?.getBoundingClientRect(),a=Math.round(100*Math.max(0,Math.min(1,(e.clientX-r.left)/r.width))),t=Math.round(100*Math.max(0,Math.min(1,1-(e.clientY-r.top)/r.height))),s={...this.hsv,sat:a,val:t};this.hsv=s;let i=Qe(s.hue,s.sat,s.val);this.hex=i,this.emitHex(i,"input")}catch(r){console.error("Error updating canvas color:",r)}}onCanvasPointerDown(e){e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),this.updateFromCanvas(e)}onCanvasPointerMove(e){e.currentTarget.hasPointerCapture(e.pointerId)&&this.updateFromCanvas(e)}onCanvasPointerUp(e){e.currentTarget.hasPointerCapture(e.pointerId)&&this.emitHex(this.hex,"change")}updateFromHue(e){try{let r=this.hueStripRef?.getBoundingClientRect(),a=Math.round(360*Math.max(0,Math.min(1,(e.clientY-r.top)/r.height))),t={...this.hsv,hue:a};this.hsv=t;let s=Qe(t.hue,t.sat,t.val);this.hex=s,this.emitHex(s,"input")}catch(r){console.error("Error updating hue:",r)}}onHuePointerDown(e){e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),this.updateFromHue(e)}onHuePointerMove(e){e.currentTarget.hasPointerCapture(e.pointerId)&&this.updateFromHue(e)}onHuePointerUp(e){e.currentTarget.hasPointerCapture(e.pointerId)&&this.emitHex(this.hex,"change")}render(){let e=W(this.hex)?`#${this.hex}`:"transparent",{hue:r,sat:a,val:t}=this.hsv,s=["linear-gradient(to bottom, transparent, black)",`linear-gradient(to right, white, hsl(${r}, 100%, 50%))`].join(", ");return o("div",{key:"03e358a3471bf46fbf359d4ca34c00f03625f760",class:"root"},o("ux-text-input",{key:"e864e194692bd137d6db20c617e650fe5a2b1158",label:this.label,description:this.description,textPrefix:"#",name:this.name,value:this.hex,placeholder:"171717",onUxInput:i=>this.onHexInput(i),onUxChange:i=>this.onHexChange(i)},o("div",{key:"ca038ae5764b1841af9f30d21b6984b995a6a271",slot:"textSuffix",class:"swatch-wrapper"},o("button",{key:"2815cf1ea10ae314d8ecb48e41b52adc39300dce",type:"button",ref:i=>this.swatchRef=i,class:"swatch",style:{backgroundColor:e},onClick:()=>this.togglePicker(),"aria-label":`Open color picker, current color ${e}`,"aria-expanded":String(this.pickerOpen)}),o("div",{key:"603e6213fd8bfcefe544c0ff6164f1c990065754",ref:i=>this.pickerRef=i,class:"picker-popover"+(this.pickerOpen?" is-open":"")},o("div",{key:"91d972a895e23e5c7087c2d7ad251adfb9abd464",class:"picker-body"},o("div",{key:"f5e6d39665cf09e17c27ee59bea762020600d805",class:"color-canvas",ref:i=>this.canvasRef=i,style:{background:s},onPointerDown:i=>this.onCanvasPointerDown(i),onPointerMove:i=>this.onCanvasPointerMove(i),onPointerUp:i=>this.onCanvasPointerUp(i)},o("div",{key:"a45de1fea956d83c8237880fe20f6b88a35019f6",class:"canvas-handle",style:{left:`${a}%`,top:100-t+"%"}})),o("div",{key:"305cdf3c8a1df78db3678872ad9cb2bad43907da",class:"hue-strip",ref:i=>this.hueStripRef=i,style:{background:"linear-gradient(to bottom, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"},onPointerDown:i=>this.onHuePointerDown(i),onPointerMove:i=>this.onHuePointerMove(i),onPointerUp:i=>this.onHuePointerUp(i)},o("div",{key:"3f209341eece5e854fbd35ca0b24b3faebc48d36",class:"hue-handle",style:{top:r/360*100+"%"}})))))))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'h1,h2,h3,h4,h5,h6,p,span,code,pre,strong,a,div{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em}h1{font-size:48px;line-height:56px;font-weight:700}h2{font-size:40px;line-height:48px;font-weight:700}h3{font-size:32px;line-height:40px;font-weight:700}h4{font-size:24px;line-height:32px;font-weight:700}h5{font-size:20px;line-height:28px;font-weight:700}h6{font-size:16px;line-height:24px;font-weight:700}p{line-height:20px;&.xs{line-height:var(--text-paragraph-xs-line-height);font-size:var(--text-paragraph-xs-font-size)}&.sm{line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}&.md{line-height:var(--text-paragraph-md-line-height);font-size:var(--text-paragraph-md-font-size)}&.lg{line-height:var(--text-paragraph-lg-line-height);font-size:var(--text-paragraph-lg-font-size)}&.overline{letter-spacing:var(--text-overline-letter-spacing);text-transform:var(--text-overline-text-transform);font-weight:var(--text-overline-font-weight)}}*{box-sizing:border-box;margin:0;padding:0}.header{display:flex;align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-sm);border-bottom:2px solid var(--color-primary-500)}.pane{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;flex:1 1 400px;&.settings-pane{order:1}&.preview-pane{flex:1 1 500px;align-items:center;order:2}&.url-pane{order:3}}.content{flex:1;display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-self:stretch;max-width:100%;&.single-column{flex-direction:column;.pane{max-width:100%}}}.footer{display:flex;align-items:center;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);justify-content:center}.card{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;overflow:hidden;background-color:var(--color-surface);&.primary-accent{background-color:var(--color-primary-50);border-color:var(--color-primary-100);color:var(--color-primary-700);:host(.dark) &{background-color:var(--color-primary-100);border-color:var(--color-primary-300);color:var(--color-primary-200)}}&.greenish-accent{background-color:var(--color-success-50);border-color:var(--color-success-300);color:var(--color-success-900);:host(.dark) &{background-color:var(--color-success-300);border-color:var(--color-success-500);color:var(--color-success-50)}}}ul{list-style-type:disc;display:flex;flex-direction:column;gap:var(--spacing-xs);li{margin-left:var(--spacing-md);line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}}.card-header{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:center;justify-content:space-between}.card-title{display:flex;flex-direction:column;gap:var(--spacing-xs)}button{appearance:none;background:none;font:inherit;outline:2px solid transparent;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.2s, background-color 0.2s, box-shadow 0.1s, opacity 0.05s, outline 0.1s, outline-offset 0.15s;display:flex;align-items:center;gap:var(--spacing-xs);&:hover{opacity:0.9}&:focus{outline:3px solid var(--color-primary-100);outline-offset:6px}&:active{opacity:0.8}&.primary{background-color:var(--color-primary-500);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md)}&.default{color:var(--color-neutral-900);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);border-color:var(--color-neutral-300);box-shadow:var(--shadow-xs);&:hover{border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}&:active{border-color:var(--color-neutral-500);background-color:var(--color-neutral-100);box-shadow:var(--shadow-md)}}&.outlined{color:var(--color-neutral-900);border-color:var(--color-neutral-500);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);gap:6px;font-weight:500;&:hover{background-color:var(--color-neutral-50)}&:active{background-color:var(--color-neutral-100)}}&.small{padding:6px 12px;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height)}}hr{border-style:solid;color:var(--color-neutral-300)}code{white-space:pre-wrap;word-break:break-all;&.in-block{background-color:var(--color-code-surface);color:var(--color-success-400);border:1px solid var(--color-code-surface);border-radius:var(--default-radius);padding:var(--spacing-sm)}}.section-heading{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--color-neutral-900)}.section-subheading{display:flex;align-items:center;justify-content:space-between;width:100%}.section-subheading-title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900);display:flex;align-items:center;gap:var(--spacing-xs)}.preview-area{background-color:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-xlg);width:100%;overflow-x:auto}.preview-area-scroll{padding:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm)}.preview-area-inner{background-color:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;img{max-width:100%;height:auto}}.preview-settings{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.preview-settings-heading{display:flex;flex-direction:column}.preview-settings-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900)}.preview-settings-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:var(--color-neutral-700)}.generated-url-section{width:100%;padding-top:var(--spacing-sm)}.generated-url-card{background-color:#171717;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.generated-url-heading{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}.generated-url-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:#ffffff}.generated-url-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:#d4d4d4}.console{background-color:#303b42;border:1px solid #262f35;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;overflow:hidden;width:100%}.console code{white-space:pre-wrap;word-break:break-all;font-family:"JetBrains Mono", monospace;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:#d4d4d4;max-width:100%}.console button{background-color:#ffffff;color:#171717;font-weight:500;padding:10px var(--spacing-sm);border-radius:var(--border-radius-md);border:none;&:hover{opacity:0.9}}:host{display:flex;flex-direction:column}.root{display:flex;flex-direction:column}.swatch-wrapper{position:relative;flex-shrink:0}.swatch{display:block;width:40px;height:40px;border-radius:var(--border-radius-md);border:1px solid var(--color-neutral-300);cursor:pointer;padding:0;transition:box-shadow 0.15s ease;&:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-primary-100)}&:hover{box-shadow:var(--shadow-sm)}}.picker-popover{position:fixed;top:0;left:0;margin:0;background:var(--color-surface);border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-sm);width:240px;z-index:9999;visibility:hidden;opacity:0;transform:translateY(-4px) scale(0.98);pointer-events:none;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s}.picker-popover.is-open{visibility:visible;opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.picker-body{display:flex;gap:var(--spacing-xs)}.color-canvas{flex:1;height:150px;border-radius:var(--border-radius-sm);position:relative;cursor:crosshair;touch-action:none;user-select:none}.canvas-handle{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.4);transform:translate(-50%, -50%);pointer-events:none}.hue-strip{width:16px;height:150px;border-radius:var(--border-radius-sm);position:relative;cursor:pointer;touch-action:none;user-select:none;flex-shrink:0}.hue-handle{position:absolute;left:-3px;right:-3px;height:4px;background:white;border:1px solid rgba(0, 0, 0, 0.35);border-radius:2px;transform:translateY(-50%);pointer-events:none;box-shadow:var(--shadow-sm)}'}},[577,"ux-color-input",{label:[1],description:[1],value:[1],name:[1],hex:[32],pickerOpen:[32],hsv:[32]},void 0,{value:[{valueChanged:0}]}]);function Q(){typeof customElements<"u"&&["ux-color-input","ux-text-input"].forEach((e=>{switch(e){case"ux-color-input":customElements.get(e)||customElements.define(e,_r);break;case"ux-text-input":customElements.get(e)||$()}}))}Q();var zr=0,Cr=L(class extends z{constructor(e){super(),e!==!1&&this.__registerHost(),this.__attachShadow(),this.uxChange=R(this,"uxChange"),this.internals=this.attachInternals()}get el(){return this}label="";description="";name="";multiple=!1;clearable=!1;searchable=!1;placeholder="Select...";options=[];value="";open=!1;searchQuery="";selectedValues=[];focusedIndex=-1;uxChange;internals;_id="ux-combobox-"+ ++zr;triggerRef;dropdownRef;searchRef;get listboxId(){return`${this._id}-listbox`}optionId(e){return`${this._id}-opt-${e}`}componentWillLoad(){this.syncFromValue(this.value)}connectedCallback(){document.addEventListener("pointerdown",this.onDocumentPointerDown)}disconnectedCallback(){document.removeEventListener("pointerdown",this.onDocumentPointerDown),this.stopTrackingPosition()}onDocumentPointerDown=e=>{this.open&&(e.composedPath().includes(this.el)||this.closeDropdown())};valueChanged(e){this.syncFromValue(e)}syncFromValue(e){this.selectedValues=Array.isArray(e)?e:e?[e]:[],this.updateFormValue()}updateFormValue(){j(this.internals,this.multiple?this.selectedValues.join(","):this.selectedValues[0]??"")}handleFocusOut(e){if(!this.open)return;let r=e.relatedTarget;r&&this.el.shadowRoot?.contains(r)||r===this.el||this.closeDropdown()}closeDropdown(){this.open=!1,this.stopTrackingPosition(),setTimeout((()=>{this.searchQuery="",this.focusedIndex=-1}),150)}positionDropdown(){if(!this.dropdownRef||!this.triggerRef)return;let e=this.triggerRef.getBoundingClientRect();Object.assign(this.dropdownRef.style,{top:`${e.bottom+4}px`,left:`${e.left}px`,width:`${e.width}px`})}onScrollOrResize=()=>this.positionDropdown();startTrackingPosition(){window.addEventListener("scroll",this.onScrollOrResize,{capture:!0,passive:!0}),window.addEventListener("resize",this.onScrollOrResize,{passive:!0})}stopTrackingPosition(){window.removeEventListener("scroll",this.onScrollOrResize,{capture:!0}),window.removeEventListener("resize",this.onScrollOrResize)}get filteredOptions(){if(!this.searchQuery)return this.options;let e=this.searchQuery.toLowerCase();return this.options.filter((r=>r.label.toLowerCase().includes(e)))}get groupedOptions(){let e=new Map;for(let a of this.filteredOptions){let t=a.group??null;e.has(t)||e.set(t,[]),e.get(t)?.push(a)}let r=[];e.has(null)&&r.push({group:null,options:e.get(null)??[]});for(let[a,t]of e)a!==null&&r.push({group:a,options:t});return r}get displayLabel(){return this.selectedValues.length===0?"":this.selectedValues.map((e=>this.options.find((r=>r.value===e))?.label??e)).join(", ")}get activeDescendant(){if(this.focusedIndex<0)return;let e=this.filteredOptions[this.focusedIndex];return e?this.optionId(e.value):void 0}toggleOpen(){this.open?this.closeDropdown():(this.open=!0,this.focusedIndex=-1,this.positionDropdown(),this.startTrackingPosition(),this.searchable&&requestAnimationFrame((()=>this.searchRef?.focus())))}selectOption(e){this.multiple?this.selectedValues=this.selectedValues.includes(e)?this.selectedValues.filter((r=>r!==e)):[...this.selectedValues,e]:(this.selectedValues=[e],this.closeDropdown(),this.triggerRef?.focus()),this.updateFormValue(),this.uxChange.emit(this.multiple?[...this.selectedValues]:this.selectedValues[0]??"")}clear(e){e.stopPropagation(),this.selectedValues=[],this.updateFormValue(),this.uxChange.emit(this.multiple?[]:"")}handleTriggerKeyDown(e){switch(e.key){case"Enter":case" ":e.preventDefault(),this.toggleOpen();break;case"Escape":this.closeDropdown();break;case"ArrowDown":e.preventDefault(),this.open?this.focusedIndex=Math.min(this.focusedIndex+1,this.filteredOptions.length-1):(this.open=!0,this.focusedIndex=0,this.positionDropdown(),this.startTrackingPosition());break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0)}}handleDropdownKeyDown(e){switch(e.key){case"Escape":this.closeDropdown(),this.triggerRef?.focus();break;case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,this.filteredOptions.length-1);break;case"ArrowUp":e.preventDefault(),this.focusedIndex<=0?(this.closeDropdown(),this.triggerRef?.focus()):this.focusedIndex--;break;case"Enter":case" ":{e.preventDefault();let r=this.filteredOptions[this.focusedIndex];r&&this.selectOption(r.value);break}}}render(){let e=this.selectedValues.length>0,r=this.displayLabel,a=this.filteredOptions,t=this.groupedOptions,s=`${this._id}-label`,i=this.activeDescendant;return o("div",{key:"210e9343415e6d3a33051328b7dc2e0cb82227a1",class:"wrapper"},this.label&&o("span",{key:"48d741cad8acad2eb522c086fc55265a48c4f4d3",id:s,class:"label"},this.label),o("div",{key:"e511c9a8a155397f5d8105ee13cb925ee3d3cc5e",class:"control"},o("div",{key:"6bcbabb5a6b45fbaca9f1681c4e9855bd4b22460",ref:n=>this.triggerRef=n,class:"trigger"+(this.open?" open":""),role:"combobox",tabIndex:0,"aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":this.listboxId,"aria-labelledby":this.label?s:void 0,"aria-activedescendant":i,onClick:()=>this.toggleOpen(),onKeyDown:n=>this.handleTriggerKeyDown(n)},o("span",{key:"e60d71a1e26f7e485d3a11fb7254696055d26c62",class:"trigger-label"+(e?"":" placeholder")},e?r:this.placeholder),o("span",{key:"f7ea0129754bf4186275c7ef0af43e76ca08abc3",class:"trigger-end"},this.clearable&&e&&o("button",{key:"418e1eaa7d465fb52e583eeb07cdaabf7c0aebd7",type:"button",class:"clear-btn","aria-label":"Clear selection",onClick:n=>this.clear(n),onKeyDown:n=>n.stopPropagation()},o("svg",{key:"b4f5a21e385a2b2896175190c9cac30cbd772b47",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true"},o("path",{key:"5285046ad6975f1933ca3fcbd7fe7e8d3a3f840e",d:"M9 3L3 9M3 3L9 9",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"}))),o("svg",{key:"0a119d897a618938079791faf3efbac2981f0731",class:"chevron"+(this.open?" open":""),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},o("path",{key:"27bf530764932053c5ae1e26817572c4699a60d8",d:"M4 6L8 10L12 6",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})))),o("div",{key:"f937028207c8c64fa510c9527bc9c4727ade1fca",ref:n=>this.dropdownRef=n,class:"dropdown"+(this.open?" is-open":""),onKeyDown:n=>this.handleDropdownKeyDown(n)},this.searchable&&o("div",{key:"0fd344c7881ee0b93fc2a509f35fc8b4f5e23812",class:"search-wrapper"},o("svg",{key:"ce67ebd971699e5cfe2de8613d6e88b8747c5e5d",class:"search-icon",width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true"},o("circle",{key:"a34cbfea210007e241cf3ebf72be2350300a6317",cx:"6",cy:"6",r:"4",stroke:"currentColor","stroke-width":"1.5"}),o("path",{key:"34667b8331c6da4d4656382bbe661f2f2180f55d",d:"M9.5 9.5L12 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"})),o("input",{key:"3fddcf3a92410eb7663fa7fbd16c537cbbace1f8",ref:n=>this.searchRef=n,class:"search",type:"text",placeholder:"Search...",value:this.searchQuery,onInput:n=>{this.searchQuery=n.target.value,this.focusedIndex=-1},onKeyDown:n=>{n.key==="ArrowDown"?(n.preventDefault(),this.focusedIndex=0):n.key==="Escape"&&(this.closeDropdown(),this.triggerRef?.focus())}})),o("ul",{key:"9b9d7926094ab97d6f80f4cb95602b312202fd3f",id:this.listboxId,class:"options-list",role:"listbox","aria-multiselectable":String(this.multiple)},a.length===0&&o("li",{key:"783b625f185efa9105a5e361334038fefe0fb6f1",class:"no-options",role:"presentation"},"No options found"),t.flatMap((({group:n,options:l})=>[n?[o("li",{class:"group-label",role:"presentation"},n)]:[],...l.map((c=>{let p=this.selectedValues.includes(c.value),h=a.indexOf(c)===this.focusedIndex;return o("li",{key:c.value,id:this.optionId(c.value),class:`option${p?" selected":""}${h?" focused":""}`,role:"option","aria-selected":String(p),onClick:()=>this.selectOption(c.value),onKeyDown:d=>{d.key!=="Enter"&&d.key!==" "||(d.preventDefault(),this.selectOption(c.value))},tabIndex:-1},o("span",{class:"option-label"},c.label),p&&o("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},o("path",{d:"M3 8L6.5 11.5L13 4.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})))}))]))))),this.description&&o("p",{key:"024726b0b284387995d1d3b1485c62677549abdf",class:"description"},this.description))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'h1,h2,h3,h4,h5,h6,p,span,code,pre,strong,a,div{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em}h1{font-size:48px;line-height:56px;font-weight:700}h2{font-size:40px;line-height:48px;font-weight:700}h3{font-size:32px;line-height:40px;font-weight:700}h4{font-size:24px;line-height:32px;font-weight:700}h5{font-size:20px;line-height:28px;font-weight:700}h6{font-size:16px;line-height:24px;font-weight:700}p{line-height:20px;&.xs{line-height:var(--text-paragraph-xs-line-height);font-size:var(--text-paragraph-xs-font-size)}&.sm{line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}&.md{line-height:var(--text-paragraph-md-line-height);font-size:var(--text-paragraph-md-font-size)}&.lg{line-height:var(--text-paragraph-lg-line-height);font-size:var(--text-paragraph-lg-font-size)}&.overline{letter-spacing:var(--text-overline-letter-spacing);text-transform:var(--text-overline-text-transform);font-weight:var(--text-overline-font-weight)}}*{box-sizing:border-box;margin:0;padding:0}.header{display:flex;align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-sm);border-bottom:2px solid var(--color-primary-500)}.pane{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;flex:1 1 400px;&.settings-pane{order:1}&.preview-pane{flex:1 1 500px;align-items:center;order:2}&.url-pane{order:3}}.content{flex:1;display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-self:stretch;max-width:100%;&.single-column{flex-direction:column;.pane{max-width:100%}}}.footer{display:flex;align-items:center;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);justify-content:center}.card{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;overflow:hidden;background-color:var(--color-surface);&.primary-accent{background-color:var(--color-primary-50);border-color:var(--color-primary-100);color:var(--color-primary-700);:host(.dark) &{background-color:var(--color-primary-100);border-color:var(--color-primary-300);color:var(--color-primary-200)}}&.greenish-accent{background-color:var(--color-success-50);border-color:var(--color-success-300);color:var(--color-success-900);:host(.dark) &{background-color:var(--color-success-300);border-color:var(--color-success-500);color:var(--color-success-50)}}}ul{list-style-type:disc;display:flex;flex-direction:column;gap:var(--spacing-xs);li{margin-left:var(--spacing-md);line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}}.card-header{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:center;justify-content:space-between}.card-title{display:flex;flex-direction:column;gap:var(--spacing-xs)}button{appearance:none;background:none;font:inherit;outline:2px solid transparent;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.2s, background-color 0.2s, box-shadow 0.1s, opacity 0.05s, outline 0.1s, outline-offset 0.15s;display:flex;align-items:center;gap:var(--spacing-xs);&:hover{opacity:0.9}&:focus{outline:3px solid var(--color-primary-100);outline-offset:6px}&:active{opacity:0.8}&.primary{background-color:var(--color-primary-500);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md)}&.default{color:var(--color-neutral-900);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);border-color:var(--color-neutral-300);box-shadow:var(--shadow-xs);&:hover{border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}&:active{border-color:var(--color-neutral-500);background-color:var(--color-neutral-100);box-shadow:var(--shadow-md)}}&.outlined{color:var(--color-neutral-900);border-color:var(--color-neutral-500);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);gap:6px;font-weight:500;&:hover{background-color:var(--color-neutral-50)}&:active{background-color:var(--color-neutral-100)}}&.small{padding:6px 12px;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height)}}hr{border-style:solid;color:var(--color-neutral-300)}code{white-space:pre-wrap;word-break:break-all;&.in-block{background-color:var(--color-code-surface);color:var(--color-success-400);border:1px solid var(--color-code-surface);border-radius:var(--default-radius);padding:var(--spacing-sm)}}.section-heading{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--color-neutral-900)}.section-subheading{display:flex;align-items:center;justify-content:space-between;width:100%}.section-subheading-title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900);display:flex;align-items:center;gap:var(--spacing-xs)}.preview-area{background-color:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-xlg);width:100%;overflow-x:auto}.preview-area-scroll{padding:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm)}.preview-area-inner{background-color:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;img{max-width:100%;height:auto}}.preview-settings{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.preview-settings-heading{display:flex;flex-direction:column}.preview-settings-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900)}.preview-settings-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:var(--color-neutral-700)}.generated-url-section{width:100%;padding-top:var(--spacing-sm)}.generated-url-card{background-color:#171717;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.generated-url-heading{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}.generated-url-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:#ffffff}.generated-url-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:#d4d4d4}.console{background-color:#303b42;border:1px solid #262f35;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;overflow:hidden;width:100%}.console code{white-space:pre-wrap;word-break:break-all;font-family:"JetBrains Mono", monospace;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:#d4d4d4;max-width:100%}.console button{background-color:#ffffff;color:#171717;font-weight:500;padding:10px var(--spacing-sm);border-radius:var(--border-radius-md);border:none;&:hover{opacity:0.9}}:host{font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:400;font-style:normal;font-feature-settings:"liga" 1, "calt" 1;display:flex;flex-direction:column;padding:unset;margin:unset;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}.label{font-size:var(--text-paragraph-sm-font-size);font-weight:500;color:var(--color-neutral-900)}.control{width:100%}.trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-xs);width:100%;background:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-md);padding:10px var(--spacing-sm);cursor:pointer;user-select:none;transition:border-color 0.15s ease, box-shadow 0.15s ease;font-family:inherit;font-size:var(--text-paragraph-md-font-size);outline:none}.trigger:focus-visible{border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-100)}.trigger.open{border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-100)}.trigger-label{flex:1;color:var(--color-neutral-900);font-size:var(--text-paragraph-md-font-size);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.trigger-label.placeholder{color:var(--color-neutral-400)}.trigger-end{display:flex;align-items:center;gap:6px;flex-shrink:0}.clear-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--border-radius-sm);color:var(--color-neutral-400);background:transparent;border:none;padding:0;cursor:pointer;transition:color 0.15s, background-color 0.15s;outline:none}.clear-btn:hover{color:var(--color-neutral-700);background:var(--color-neutral-200)}.clear-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.chevron{color:var(--color-neutral-400);transition:transform 0.2s ease;flex-shrink:0}.chevron.open{transform:rotate(180deg)}.dropdown{position:fixed;top:0;left:0;margin:0;padding:0;border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);overflow:hidden;max-height:800px;background:var(--color-surface);display:flex;flex-direction:column;z-index:9999;visibility:hidden;opacity:0;transform:translateY(-4px) scale(0.98);pointer-events:none;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s}.dropdown.is-open{visibility:visible;opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.search-wrapper{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-bottom:1px solid var(--color-neutral-200);flex-shrink:0}.search-icon{color:var(--color-neutral-400);flex-shrink:0}.search{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--text-paragraph-sm-font-size);color:var(--color-neutral-900);min-width:0}.search::placeholder{color:var(--color-neutral-400)}.options-list{list-style:none;overflow-y:auto;flex:1;margin:0;margin-block:0;padding:0;gap:0;& li{margin-left:0}}.group-label{padding:var(--spacing-xs) var(--spacing-sm) var(--spacing-xxs);font-size:var(--text-paragraph-xs-font-size);font-weight:600;color:var(--color-neutral-500);text-transform:uppercase;letter-spacing:0.06em;user-select:none}.group-label:not(:first-child){border-top:1px solid var(--color-neutral-100);margin-top:var(--spacing-xxs);padding-top:var(--spacing-xs)}.option{display:flex;align-items:center;justify-content:space-between;padding:10px var(--spacing-sm);cursor:pointer;list-style:none;transition:background-color 0.1s;color:var(--color-neutral-900);font-size:var(--text-paragraph-md-font-size);gap:var(--spacing-xs)}.option:hover{background-color:var(--color-primary-50)}.option.selected{background-color:var(--color-primary-500);color:white}.option.focused{background-color:var(--color-primary-100)}.option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option svg{color:white;flex-shrink:0}.no-options{padding:10px var(--spacing-sm);color:var(--color-neutral-500);font-size:var(--text-paragraph-sm-font-size);list-style:none;text-align:center}.description{font-size:var(--text-paragraph-sm-font-size);color:var(--color-primary-600);margin:0}'}},[577,"ux-combobox",{label:[1],description:[1],name:[1],multiple:[4],clearable:[4],searchable:[4],placeholder:[1],options:[16],value:[1],open:[32],searchQuery:[32],selectedValues:[32],focusedIndex:[32]},[[0,"focusout","handleFocusOut"]],{value:[{valueChanged:0}]}]);function G(){typeof customElements<"u"&&["ux-combobox"].forEach((e=>{e==="ux-combobox"&&(customElements.get(e)||customElements.define(e,Cr))}))}G();var Sr=L(class extends z{constructor(e){super(),e!==!1&&this.__registerHost(),this.__attachShadow(),this.uxChange=R(this,"uxChange"),this.uxInput=R(this,"uxInput"),this.internals=this.attachInternals()}min=0;max=100;step=1;value=0;name="";label="";unit="";currentValue=0;uxChange;uxInput;internals;input;async setFocus(){this.input?.focus()}async getInputElement(){return this.input}componentWillLoad(){this.currentValue=this.value,j(this.internals,String(this.value))}valueChanged(e){this.currentValue=e}handleInput(e){let r=parseFloat(e.target.value);this.currentValue=r,j(this.internals,String(r)),this.uxInput.emit(r)}handleChange(e){let r=parseFloat(e.target.value);this.uxChange.emit(r)}render(){let e=(this.currentValue-this.min)/(this.max-this.min)*100;return o("div",{key:"43adb4bea542d60546bebf27339d74d830f1c970",class:"slider-wrapper"},this.label&&o("div",{key:"5dae7c84344a6f377aca2d68247ae429539f52be",class:"slider-header"},o("span",{key:"898f7fe6e6d057635e92e168c6d8aeca643bfc3c",class:"slider-label"},this.label),o("span",{key:"db2e510b612b7e1587078a1703f3f6cba13aaff4",class:"slider-value"},this.currentValue,this.unit)),o("input",{key:"2c8a974f11ea154d83f2aca44c1027ddb724244c",ref:r=>this.input=r,type:"range",min:this.min,max:this.max,step:this.step,value:this.currentValue,name:this.name,style:{"--fill-percent":`${e}%`},onInput:r=>this.handleInput(r),onChange:r=>this.handleChange(r)}))}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'h1,h2,h3,h4,h5,h6,p,span,code,pre,strong,a,div{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em}h1{font-size:48px;line-height:56px;font-weight:700}h2{font-size:40px;line-height:48px;font-weight:700}h3{font-size:32px;line-height:40px;font-weight:700}h4{font-size:24px;line-height:32px;font-weight:700}h5{font-size:20px;line-height:28px;font-weight:700}h6{font-size:16px;line-height:24px;font-weight:700}p{line-height:20px;&.xs{line-height:var(--text-paragraph-xs-line-height);font-size:var(--text-paragraph-xs-font-size)}&.sm{line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}&.md{line-height:var(--text-paragraph-md-line-height);font-size:var(--text-paragraph-md-font-size)}&.lg{line-height:var(--text-paragraph-lg-line-height);font-size:var(--text-paragraph-lg-font-size)}&.overline{letter-spacing:var(--text-overline-letter-spacing);text-transform:var(--text-overline-text-transform);font-weight:var(--text-overline-font-weight)}}*{box-sizing:border-box;margin:0;padding:0}.header{display:flex;align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-sm);border-bottom:2px solid var(--color-primary-500)}.pane{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;flex:1 1 400px;&.settings-pane{order:1}&.preview-pane{flex:1 1 500px;align-items:center;order:2}&.url-pane{order:3}}.content{flex:1;display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-self:stretch;max-width:100%;&.single-column{flex-direction:column;.pane{max-width:100%}}}.footer{display:flex;align-items:center;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);justify-content:center}.card{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;overflow:hidden;background-color:var(--color-surface);&.primary-accent{background-color:var(--color-primary-50);border-color:var(--color-primary-100);color:var(--color-primary-700);:host(.dark) &{background-color:var(--color-primary-100);border-color:var(--color-primary-300);color:var(--color-primary-200)}}&.greenish-accent{background-color:var(--color-success-50);border-color:var(--color-success-300);color:var(--color-success-900);:host(.dark) &{background-color:var(--color-success-300);border-color:var(--color-success-500);color:var(--color-success-50)}}}ul{list-style-type:disc;display:flex;flex-direction:column;gap:var(--spacing-xs);li{margin-left:var(--spacing-md);line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}}.card-header{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:center;justify-content:space-between}.card-title{display:flex;flex-direction:column;gap:var(--spacing-xs)}button{appearance:none;background:none;font:inherit;outline:2px solid transparent;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.2s, background-color 0.2s, box-shadow 0.1s, opacity 0.05s, outline 0.1s, outline-offset 0.15s;display:flex;align-items:center;gap:var(--spacing-xs);&:hover{opacity:0.9}&:focus{outline:3px solid var(--color-primary-100);outline-offset:6px}&:active{opacity:0.8}&.primary{background-color:var(--color-primary-500);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md)}&.default{color:var(--color-neutral-900);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);border-color:var(--color-neutral-300);box-shadow:var(--shadow-xs);&:hover{border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}&:active{border-color:var(--color-neutral-500);background-color:var(--color-neutral-100);box-shadow:var(--shadow-md)}}&.outlined{color:var(--color-neutral-900);border-color:var(--color-neutral-500);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);gap:6px;font-weight:500;&:hover{background-color:var(--color-neutral-50)}&:active{background-color:var(--color-neutral-100)}}&.small{padding:6px 12px;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height)}}hr{border-style:solid;color:var(--color-neutral-300)}code{white-space:pre-wrap;word-break:break-all;&.in-block{background-color:var(--color-code-surface);color:var(--color-success-400);border:1px solid var(--color-code-surface);border-radius:var(--default-radius);padding:var(--spacing-sm)}}.section-heading{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--color-neutral-900)}.section-subheading{display:flex;align-items:center;justify-content:space-between;width:100%}.section-subheading-title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900);display:flex;align-items:center;gap:var(--spacing-xs)}.preview-area{background-color:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-xlg);width:100%;overflow-x:auto}.preview-area-scroll{padding:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm)}.preview-area-inner{background-color:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;img{max-width:100%;height:auto}}.preview-settings{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.preview-settings-heading{display:flex;flex-direction:column}.preview-settings-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900)}.preview-settings-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:var(--color-neutral-700)}.generated-url-section{width:100%;padding-top:var(--spacing-sm)}.generated-url-card{background-color:#171717;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.generated-url-heading{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}.generated-url-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:#ffffff}.generated-url-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:#d4d4d4}.console{background-color:#303b42;border:1px solid #262f35;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;overflow:hidden;width:100%}.console code{white-space:pre-wrap;word-break:break-all;font-family:"JetBrains Mono", monospace;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:#d4d4d4;max-width:100%}.console button{background-color:#ffffff;color:#171717;font-weight:500;padding:10px var(--spacing-sm);border-radius:var(--border-radius-md);border:none;&:hover{opacity:0.9}}:host{font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:400;font-style:normal;font-stretch:normal;font-feature-settings:"liga" 1, "calt" 1;display:flex;flex-direction:column;padding:unset;margin:unset;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.slider-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}.slider-header{display:flex;justify-content:space-between;align-items:center}.slider-label{font-size:var(--text-paragraph-sm-font-size);font-weight:500;color:var(--color-neutral-900)}.slider-value{font-size:var(--text-paragraph-sm-font-size);font-weight:500;color:var(--color-neutral-700);background:var(--color-neutral-100);padding:2px var(--spacing-xs);border-radius:var(--border-radius-md)}input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;outline:none;cursor:pointer;background:linear-gradient( to right, var(--color-neutral-900) 0%, var(--color-neutral-900) var(--fill-percent, 0%), var(--color-neutral-200) var(--fill-percent, 0%), var(--color-neutral-200) 100% )}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-neutral-900);cursor:pointer;border:none;box-shadow:var(--shadow-sm);transition:box-shadow 0.15s ease}input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-neutral-900);cursor:pointer;border:none;box-shadow:var(--shadow-sm);transition:box-shadow 0.15s ease}input[type="range"]:hover::-webkit-slider-thumb{box-shadow:var(--shadow-md)}input[type="range"]:hover::-moz-range-thumb{box-shadow:var(--shadow-md)}input[type="range"]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--color-primary-500);outline-offset:2px}input[type="range"]:focus-visible::-moz-range-thumb{outline:2px solid var(--color-primary-500);outline-offset:2px}'}},[577,"ux-slider",{min:[2],max:[2],step:[2],value:[2],name:[1],label:[1],unit:[1],currentValue:[32],setFocus:[64],getInputElement:[64]},void 0,{value:[{valueChanged:0}]}]);function J(){typeof customElements<"u"&&["ux-slider"].forEach((e=>{e==="ux-slider"&&(customElements.get(e)||customElements.define(e,Sr))}))}J();var Lr=L(class extends z{constructor(e){super(),e!==!1&&this.__registerHost(),this.__attachShadow(),this.uxChange=R(this,"uxChange"),this.internals=this.attachInternals()}label="";description="";name="";checked=!1;disabled=!1;uxChange;internals;componentWillLoad(){j(this.internals,String(this.checked))}checkedChanged(e){j(this.internals,String(e))}toggle(){this.disabled||(this.checked=!this.checked,this.uxChange.emit(this.checked))}onKeyDown(e){e.key!==" "&&e.key!=="Enter"||(e.preventDefault(),this.toggle())}render(){return o("div",{key:"092939c70907714c177777cebe9481ec2845ba83",class:"wrapper"},o("div",{key:"f6f0dc50bdbc7d158a1d173d4fea41ba848da214",class:"label-group"},this.label&&o("span",{key:"3bf99c44b23cea6995365e4dabe27e27cc36c18d",class:"label"},this.label),this.description&&o("span",{key:"1e6fe412fe7ea7a3c5771f23064706999252670d",class:"description"},this.description)),o("button",{key:"11d2ea961639e652ce83f2bb207a4bf0fd09a70d",type:"button",role:"switch","aria-checked":String(this.checked),"aria-label":this.label||void 0,"aria-disabled":this.disabled?"true":void 0,class:`track ${this.checked?"checked":""} ${this.disabled?"disabled":""}`,onClick:()=>this.toggle(),onKeyDown:e=>this.onKeyDown(e)},o("span",{key:"41770f0427006f5f0c4f2730c0612e45eac6ca7a",class:"thumb"})))}static get formAssociated(){return!0}static get watchers(){return{checked:[{checkedChanged:0}]}}static get style(){return'h1,h2,h3,h4,h5,h6,p,span,code,pre,strong,a,div{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em}h1{font-size:48px;line-height:56px;font-weight:700}h2{font-size:40px;line-height:48px;font-weight:700}h3{font-size:32px;line-height:40px;font-weight:700}h4{font-size:24px;line-height:32px;font-weight:700}h5{font-size:20px;line-height:28px;font-weight:700}h6{font-size:16px;line-height:24px;font-weight:700}p{line-height:20px;&.xs{line-height:var(--text-paragraph-xs-line-height);font-size:var(--text-paragraph-xs-font-size)}&.sm{line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}&.md{line-height:var(--text-paragraph-md-line-height);font-size:var(--text-paragraph-md-font-size)}&.lg{line-height:var(--text-paragraph-lg-line-height);font-size:var(--text-paragraph-lg-font-size)}&.overline{letter-spacing:var(--text-overline-letter-spacing);text-transform:var(--text-overline-text-transform);font-weight:var(--text-overline-font-weight)}}*{box-sizing:border-box;margin:0;padding:0}.header{display:flex;align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-sm);border-bottom:2px solid var(--color-primary-500)}.pane{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;flex:1 1 400px;&.settings-pane{order:1}&.preview-pane{flex:1 1 500px;align-items:center;order:2}&.url-pane{order:3}}.content{flex:1;display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-self:stretch;max-width:100%;&.single-column{flex-direction:column;.pane{max-width:100%}}}.footer{display:flex;align-items:center;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);justify-content:center}.card{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;overflow:hidden;background-color:var(--color-surface);&.primary-accent{background-color:var(--color-primary-50);border-color:var(--color-primary-100);color:var(--color-primary-700);:host(.dark) &{background-color:var(--color-primary-100);border-color:var(--color-primary-300);color:var(--color-primary-200)}}&.greenish-accent{background-color:var(--color-success-50);border-color:var(--color-success-300);color:var(--color-success-900);:host(.dark) &{background-color:var(--color-success-300);border-color:var(--color-success-500);color:var(--color-success-50)}}}ul{list-style-type:disc;display:flex;flex-direction:column;gap:var(--spacing-xs);li{margin-left:var(--spacing-md);line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}}.card-header{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:center;justify-content:space-between}.card-title{display:flex;flex-direction:column;gap:var(--spacing-xs)}button{appearance:none;background:none;font:inherit;outline:2px solid transparent;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.2s, background-color 0.2s, box-shadow 0.1s, opacity 0.05s, outline 0.1s, outline-offset 0.15s;display:flex;align-items:center;gap:var(--spacing-xs);&:hover{opacity:0.9}&:focus{outline:3px solid var(--color-primary-100);outline-offset:6px}&:active{opacity:0.8}&.primary{background-color:var(--color-primary-500);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md)}&.default{color:var(--color-neutral-900);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);border-color:var(--color-neutral-300);box-shadow:var(--shadow-xs);&:hover{border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}&:active{border-color:var(--color-neutral-500);background-color:var(--color-neutral-100);box-shadow:var(--shadow-md)}}&.outlined{color:var(--color-neutral-900);border-color:var(--color-neutral-500);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);gap:6px;font-weight:500;&:hover{background-color:var(--color-neutral-50)}&:active{background-color:var(--color-neutral-100)}}&.small{padding:6px 12px;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height)}}hr{border-style:solid;color:var(--color-neutral-300)}code{white-space:pre-wrap;word-break:break-all;&.in-block{background-color:var(--color-code-surface);color:var(--color-success-400);border:1px solid var(--color-code-surface);border-radius:var(--default-radius);padding:var(--spacing-sm)}}.section-heading{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--color-neutral-900)}.section-subheading{display:flex;align-items:center;justify-content:space-between;width:100%}.section-subheading-title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900);display:flex;align-items:center;gap:var(--spacing-xs)}.preview-area{background-color:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-xlg);width:100%;overflow-x:auto}.preview-area-scroll{padding:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm)}.preview-area-inner{background-color:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;img{max-width:100%;height:auto}}.preview-settings{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.preview-settings-heading{display:flex;flex-direction:column}.preview-settings-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900)}.preview-settings-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:var(--color-neutral-700)}.generated-url-section{width:100%;padding-top:var(--spacing-sm)}.generated-url-card{background-color:#171717;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.generated-url-heading{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}.generated-url-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:#ffffff}.generated-url-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:#d4d4d4}.console{background-color:#303b42;border:1px solid #262f35;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;overflow:hidden;width:100%}.console code{white-space:pre-wrap;word-break:break-all;font-family:"JetBrains Mono", monospace;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:#d4d4d4;max-width:100%}.console button{background-color:#ffffff;color:#171717;font-weight:500;padding:10px var(--spacing-sm);border-radius:var(--border-radius-md);border:none;&:hover{opacity:0.9}}:host{font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:400;font-style:normal;font-stretch:normal;font-feature-settings:"liga" 1, "calt" 1;display:flex;padding:unset;margin:unset;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%}.label-group{display:flex;flex-direction:column;gap:2px}.label{font-size:var(--text-paragraph-sm-font-size);font-weight:600;color:var(--color-neutral-900);line-height:var(--text-paragraph-sm-line-height)}.description{font-size:var(--text-paragraph-sm-font-size);color:var(--color-neutral-500);line-height:var(--text-paragraph-sm-line-height)}.track{flex-shrink:0;position:relative;width:48px;height:28px;border-radius:9999px;background-color:var(--color-neutral-300);border:none;padding:0;cursor:pointer;transition:background-color 0.2s ease;outline:none;&:focus-visible{box-shadow:0 0 0 3px var(--color-primary-100)}&.checked{background-color:var(--color-neutral-900)}&.disabled{opacity:0.4;cursor:not-allowed}}.thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:white;box-shadow:var(--shadow-sm);transition:transform 0.2s ease;.track.checked &{transform:translateX(20px);background:var(--color-surface)}}'}},[577,"ux-switch",{label:[1],description:[1],name:[1],checked:[1028],disabled:[4]},void 0,{checked:[{checkedChanged:0}]}]);function Y(){typeof customElements<"u"&&["ux-switch"].forEach((e=>{e==="ux-switch"&&(customElements.get(e)||customElements.define(e,Lr))}))}Y();var Pr=new Set(["B","STRONG","I","EM","BR"]);function Ir(e,r=Pr){let a=document.createElement("template");return a.innerHTML=e,Ge(a.content,r),a.content}function Ge(e,r){for(let a of Array.from(e.childNodes))if(a.nodeType===Node.ELEMENT_NODE){let t=a;if(!r.has(t.tagName)){t.replaceWith(document.createTextNode(t.textContent??""));continue}for(let s of Array.from(t.attributes))t.removeAttribute(s.name);Ge(t,r)}else a.nodeType!==Node.TEXT_NODE&&a.parentNode?.removeChild(a)}var jr=L(class extends z{constructor(e){super(),e!==!1&&this.__registerHost(),this.__attachShadow()}get el(){return this}text="";placement="top";visible=!1;tooltipEl=null;supportsPopover=typeof z.prototype=="object"&&"popover"in z.prototype;connectedCallback(){this.el.addEventListener("mouseenter",this.show),this.el.addEventListener("mouseleave",this.hide),this.el.addEventListener("focusin",this.show),this.el.addEventListener("focusout",this.hide)}disconnectedCallback(){this.el.removeEventListener("mouseenter",this.show),this.el.removeEventListener("mouseleave",this.hide),this.el.removeEventListener("focusin",this.show),this.el.removeEventListener("focusout",this.hide),this.destroyTooltip()}show=()=>{this.text&&(this.visible=!0,this.createTooltip())};hide=()=>{this.visible=!1,this.destroyTooltip()};createTooltip(){if(this.tooltipEl)return;let e=document.createElement("div");e.className=`ux-tooltip-overlay ux-tooltip-${this.placement}`,e.setAttribute("role","tooltip"),e.style.cssText=` position: fixed; z-index: 99999; margin: 0; inset: unset; padding: 6px 10px; border: none; border-radius: 6px; background: #171717; color: white; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; max-width: min(320px, calc(100vw - 16px)); overflow: visible; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; `;let r=document.createElement("span");r.className="ux-tooltip-arrow",r.style.cssText=` position: absolute; width: 8px; height: 8px; background: #171717; border: none; transform: rotate(45deg); `,e.appendChild(r);let a=document.createElement("span");a.appendChild(Ir(this.text)),e.appendChild(a),this.supportsPopover?(e.setAttribute("popover","manual"),document.body.appendChild(e),e.showPopover()):document.body.appendChild(e),this.tooltipEl=e,requestAnimationFrame((()=>{this.positionTooltip(),requestAnimationFrame((()=>{this.tooltipEl&&(this.tooltipEl.style.opacity="1")}))}))}destroyTooltip(){this.tooltipEl&&(this.supportsPopover&&this.tooltipEl.matches(":popover-open")&&this.tooltipEl.hidePopover(),this.tooltipEl.remove(),this.tooltipEl=null)}positionTooltip(){if(!this.tooltipEl)return;let e=this.el.getBoundingClientRect(),r=this.tooltipEl,a=r.querySelector(".ux-tooltip-arrow");r.style.visibility="hidden",r.style.opacity="0";let t=r.getBoundingClientRect(),s=0,i=0,n="",l="";switch(this.placement){case"top":s=e.top-t.height-8,i=e.left+e.width/2-t.width/2,n=t.height-4+"px",l=t.width/2-4+"px";break;case"bottom":s=e.bottom+8,i=e.left+e.width/2-t.width/2,n="-4px",l=t.width/2-4+"px";break;case"left":s=e.top+e.height/2-t.height/2,i=e.left-t.width-8,n=t.height/2-4+"px",l=t.width-4+"px";break;case"right":s=e.top+e.height/2-t.height/2,i=e.right+8,n=t.height/2-4+"px",l="-4px"}let c=window.innerWidth,p=window.innerHeight,h=Math.max(8,Math.min(i,c-t.width-8)),d=Math.max(8,Math.min(s,p-t.height-8)),g=h-i,y=d-s;r.style.top=`${d}px`,r.style.left=`${h}px`,r.style.visibility="",a&&(a.style.top=this.placement==="top"||this.placement==="bottom"?n:Number.parseFloat(n)-y+"px",a.style.left=this.placement==="left"||this.placement==="right"?l:Number.parseFloat(l)-g+"px")}render(){return o(T,{key:"2fd17d276eba528fdeec4d970c3fcb2c5d09ad14"},o("slot",{key:"68c1be8758cbf763a1d0c1b59b4164639eb5602e"}))}static get style(){return'h1,h2,h3,h4,h5,h6,p,span,code,pre,strong,a,div{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em}h1{font-size:48px;line-height:56px;font-weight:700}h2{font-size:40px;line-height:48px;font-weight:700}h3{font-size:32px;line-height:40px;font-weight:700}h4{font-size:24px;line-height:32px;font-weight:700}h5{font-size:20px;line-height:28px;font-weight:700}h6{font-size:16px;line-height:24px;font-weight:700}p{line-height:20px;&.xs{line-height:var(--text-paragraph-xs-line-height);font-size:var(--text-paragraph-xs-font-size)}&.sm{line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}&.md{line-height:var(--text-paragraph-md-line-height);font-size:var(--text-paragraph-md-font-size)}&.lg{line-height:var(--text-paragraph-lg-line-height);font-size:var(--text-paragraph-lg-font-size)}&.overline{letter-spacing:var(--text-overline-letter-spacing);text-transform:var(--text-overline-text-transform);font-weight:var(--text-overline-font-weight)}}*{box-sizing:border-box;margin:0;padding:0}.header{display:flex;align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-sm);border-bottom:2px solid var(--color-primary-500)}.pane{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;flex:1 1 400px;&.settings-pane{order:1}&.preview-pane{flex:1 1 500px;align-items:center;order:2}&.url-pane{order:3}}.content{flex:1;display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-self:stretch;max-width:100%;&.single-column{flex-direction:column;.pane{max-width:100%}}}.footer{display:flex;align-items:center;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);justify-content:center}.card{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;overflow:hidden;background-color:var(--color-surface);&.primary-accent{background-color:var(--color-primary-50);border-color:var(--color-primary-100);color:var(--color-primary-700);:host(.dark) &{background-color:var(--color-primary-100);border-color:var(--color-primary-300);color:var(--color-primary-200)}}&.greenish-accent{background-color:var(--color-success-50);border-color:var(--color-success-300);color:var(--color-success-900);:host(.dark) &{background-color:var(--color-success-300);border-color:var(--color-success-500);color:var(--color-success-50)}}}ul{list-style-type:disc;display:flex;flex-direction:column;gap:var(--spacing-xs);li{margin-left:var(--spacing-md);line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}}.card-header{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:center;justify-content:space-between}.card-title{display:flex;flex-direction:column;gap:var(--spacing-xs)}button{appearance:none;background:none;font:inherit;outline:2px solid transparent;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.2s, background-color 0.2s, box-shadow 0.1s, opacity 0.05s, outline 0.1s, outline-offset 0.15s;display:flex;align-items:center;gap:var(--spacing-xs);&:hover{opacity:0.9}&:focus{outline:3px solid var(--color-primary-100);outline-offset:6px}&:active{opacity:0.8}&.primary{background-color:var(--color-primary-500);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md)}&.default{color:var(--color-neutral-900);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);border-color:var(--color-neutral-300);box-shadow:var(--shadow-xs);&:hover{border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}&:active{border-color:var(--color-neutral-500);background-color:var(--color-neutral-100);box-shadow:var(--shadow-md)}}&.outlined{color:var(--color-neutral-900);border-color:var(--color-neutral-500);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);gap:6px;font-weight:500;&:hover{background-color:var(--color-neutral-50)}&:active{background-color:var(--color-neutral-100)}}&.small{padding:6px 12px;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height)}}hr{border-style:solid;color:var(--color-neutral-300)}code{white-space:pre-wrap;word-break:break-all;&.in-block{background-color:var(--color-code-surface);color:var(--color-success-400);border:1px solid var(--color-code-surface);border-radius:var(--default-radius);padding:var(--spacing-sm)}}.section-heading{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--color-neutral-900)}.section-subheading{display:flex;align-items:center;justify-content:space-between;width:100%}.section-subheading-title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900);display:flex;align-items:center;gap:var(--spacing-xs)}.preview-area{background-color:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-xlg);width:100%;overflow-x:auto}.preview-area-scroll{padding:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm)}.preview-area-inner{background-color:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;img{max-width:100%;height:auto}}.preview-settings{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.preview-settings-heading{display:flex;flex-direction:column}.preview-settings-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900)}.preview-settings-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:var(--color-neutral-700)}.generated-url-section{width:100%;padding-top:var(--spacing-sm)}.generated-url-card{background-color:#171717;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.generated-url-heading{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}.generated-url-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:#ffffff}.generated-url-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:#d4d4d4}.console{background-color:#303b42;border:1px solid #262f35;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;overflow:hidden;width:100%}.console code{white-space:pre-wrap;word-break:break-all;font-family:"JetBrains Mono", monospace;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:#d4d4d4;max-width:100%}.console button{background-color:#ffffff;color:#171717;font-weight:500;padding:10px var(--spacing-sm);border-radius:var(--border-radius-md);border:none;&:hover{opacity:0.9}}:host{font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:400;display:inline-flex;padding:unset;margin:unset}'}},[769,"ux-tooltip",{text:[1],placement:[1],visible:[32]}]);function X(){typeof customElements<"u"&&["ux-tooltip"].forEach((e=>{e==="ux-tooltip"&&(customElements.get(e)||customElements.define(e,jr))}))}X();var Dr={visa:"Visa",mastercard:"Mastercard",applepay:"Apple Pay",googlepay:"Google Pay",vipps:"Vipps",mobilepay:"MobilePay",swish:"Swish",klarna:"Klarna",billie:"Billie",walley:"Walley",kravia:"Kravia",two:"Two"},C={logos:["visa","mastercard","applepay","googlepay","vipps","klarna","swish","walley","mobilepay","billie","kravia","two"].map((e=>["visa","mastercard","applepay","googlepay","vipps","klarna"].includes(e)?{name:e,selected:!0}:{name:e,selected:!1})),variant:"colors",color:"#171717",width:600,template:"dintero_top_frame",transparentPreview:!1,previewColor:"#ffffff"},Er=L(class extends z{constructor(e){super(),e!==!1&&this.__registerHost(),this.__attachShadow()}get el(){return this}locale;resolvedLocale="en";logos=C.logos;variant=C.variant;color=C.color;width=C.width;template=C.template;transparentPreview=C.transparentPreview;previewColor=C.previewColor;dragIndex=null;dragOverIndex=null;showCopiedLabel=!1;variantSelect;templateSelect;prefersDarkMediaQuery=window.matchMedia("(prefers-color-scheme: dark)");colorScheme;systemColorScheme=this.prefersDarkMediaQuery.matches?"dark":"light";get effectiveColorScheme(){return this.colorScheme??this.systemColorScheme}connectedCallback(){this.prefersDarkMediaQuery.addEventListener("change",this.handleColorSchemeChange)}disconnectedCallback(){this.prefersDarkMediaQuery.removeEventListener("change",this.handleColorSchemeChange)}handleColorSchemeChange=e=>{this.systemColorScheme=e.matches?"dark":"light"};componentWillLoad(){this.resolvedLocale=F(this.el,this.locale)}handleLocaleChange(){this.resolvedLocale=F(this.el,this.locale)}handleVariantChange(e){this.variantSelect&&(this.variantSelect.value=e)}handleTemplateChange(e){this.templateSelect&&(this.templateSelect.value=e)}generateUrl(){return`https://checkout.dintero.com/v1/branding/logos/${this.logos.filter((e=>e.selected)).map((e=>e.name)).join("_")}/variant/${this.variant}/color/${this.color.slice(1)}/width/${this.width}/${this.template}.svg`}async copyUrlToClipboard(){if(this.showCopiedLabel)return;let e=this.generateUrl();try{await navigator.clipboard.writeText(e),this.showCopiedLabel=!0,await new Promise((r=>setTimeout(r,2e3))),this.showCopiedLabel=!1}catch{console.error(u("errors.copy_url_clipboard_failed",this.resolvedLocale))}}reset(){this.logos=C.logos,this.variant=C.variant,this.color=C.color,this.width=C.width,this.template=C.template,this.previewColor=C.previewColor,this.transparentPreview=C.transparentPreview}onChangeVariant(e){this.variant=e.detail,["logomark","smallmark"].includes(this.variant)?this.template="logos":this.template==="logos"&&(this.template="dintero_top_frame"),this.variant==="darkcolors"?(this.color="#ffffff",this.previewColor="#171717",this.transparentPreview&&(this.transparentPreview=!1)):(this.color=C.color,this.previewColor=C.previewColor,this.transparentPreview=C.transparentPreview)}onChangeColor(e){this.color=e.detail}onChangeWidth(e){this.width=e.detail}onChangeTemplate(e){this.template=e}onChangePreviewColor(e){this.previewColor=e.detail}onToggleTransparentPreview(e){this.transparentPreview=e.detail}onInputSelectedLogos(e,r){let a=e.target;this.logos=this.logos.map((t=>t.name===r?{...t,selected:a.checked}:t))}onReorderSelectedLogos(e,r){let a=[...this.logos],[t]=a.splice(e,1);a.splice(r,0,t),this.logos=a}onDragStart(e,r){e.dataTransfer?.setData("text/plain",""+r),e.dataTransfer&&(e.dataTransfer.effectAllowed="move"),this.dragIndex=r;let a=e.currentTarget,t=a.getBoundingClientRect(),s=a.cloneNode(!0);Object.assign(s.style,{position:"fixed",top:"-9999px",left:"-9999px",width:t.width+"px",height:t.height+"px",pointerEvents:"none",margin:"0",boxShadow:"0 8px 24px rgba(0,0,0,0.18)",borderColor:"var(--color-primary-500)",transform:"scale(1.05)",opacity:"1",zIndex:"9999"});let i=this.el.shadowRoot;i?.appendChild(s);let n=e.clientX-t.left,l=e.clientY-t.top;e.dataTransfer?.setDragImage(s,n,l),requestAnimationFrame((()=>{i?.removeChild(s)}))}onDragEnd(){this.dragIndex=null,this.dragOverIndex=null}onDrop(e,r){e.preventDefault();let a=parseInt(e.dataTransfer?.getData("text/plain")||"-1",10);this.dragOverIndex=null,a>=0&&a!==r&&this.onReorderSelectedLogos(a,r)}onDragOver(e,r){e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this.dragOverIndex!==r&&(this.dragOverIndex=r)}onDragLeave(e,r){let a=e.relatedTarget;a&&e.currentTarget.contains(a)||this.dragOverIndex===r&&(this.dragOverIndex=null)}getGridColumns(){let e=this.el.shadowRoot?.querySelector(".payment-logo-grid");if(!e)return 4;let r=e.querySelectorAll(".payment-logo-option");if(r.length<2)return 1;let a=r[0].getBoundingClientRect().top,t=0;for(let s of Array.from(r)){if(s.getBoundingClientRect().top!==a)break;t++}return t||1}focusLogoAt(e){requestAnimationFrame((()=>{this.el.shadowRoot?.querySelectorAll(".payment-logo-option")?.[e]?.focus()}))}onLogoKeyDown(e,r){let a=this.logos.length-1;switch(e.key){case" ":case"Enter":e.preventDefault(),this.logos=this.logos.map(((t,s)=>s===r?{...t,selected:!t.selected}:t));break;case"ArrowLeft":{e.preventDefault();let t=Math.max(0,r-1);e.shiftKey&&t!==r&&this.onReorderSelectedLogos(r,t),this.focusLogoAt(t);break}case"ArrowRight":{e.preventDefault();let t=Math.min(a,r+1);e.shiftKey&&t!==r&&this.onReorderSelectedLogos(r,t),this.focusLogoAt(t);break}case"ArrowUp":{e.preventDefault();let t=Math.max(0,r-this.getGridColumns());e.shiftKey&&t!==r&&this.onReorderSelectedLogos(r,t),this.focusLogoAt(t);break}case"ArrowDown":{e.preventDefault();let t=Math.min(a,r+this.getGridColumns());e.shiftKey&&t!==r&&this.onReorderSelectedLogos(r,t),this.focusLogoAt(t);break}}}render(){return o(T,{key:"8b65721298f618d602d80696ea2f5a47ed762b7c",class:{dark:this.effectiveColorScheme==="dark",light:this.effectiveColorScheme==="light"}},o("div",{key:"988cb01abd504a3ba2f97aef47db7d8d463ec2f5"},o("div",{key:"a3454fc7fdd134de279b392140a6744ba157aa83",class:"content"},o("div",{key:"614d587720a69c29cfeb84a32a8b0d1b05eb5c95",class:"pane settings-pane"},o("p",{key:"1dce55bb0403287e6ec2c92a2ab03ae87c6221d1",class:"section-heading"},u("titles.configuration",this.resolvedLocale)),o("div",{key:"bb495c58ad638968e85a8d6eaa7d9fcd0914ede6",class:"card"},o("p",{key:"e4a4d39b453e80c4f51a4fbeaf0bfc3d9c6ba0c0",class:"section-subheading-title"},u("fields.payment_logos",this.resolvedLocale),o("ux-tooltip",{key:"b3c7e9468faa3b0566e9464e1692544fc81f8e34",text:u("tooltips.select_payment_methods",this.resolvedLocale),placement:"top"},o(se,{key:"a3108fdd160b0fa6e8005c3e3f3c0ebe985d0b2a"}))),o("div",{key:"cea0ba32723b52d48c659ad26afa24a527a542ad",class:"payment-logo-grid"},this.logos.map((e=>{let r=this.logos.indexOf(e);return o("label",{key:e.name,tabIndex:0,class:["payment-logo-option",this.dragIndex===r?"is-dragging":"",this.dragOverIndex===r&&this.dragIndex!==r?"is-drag-over":""].filter(Boolean).join(" "),draggable:!0,"aria-label":`${e.name} logo, ${e.selected?"selected":"not selected"}. Space to toggle, arrow keys to navigate, Shift+Arrow to reorder.`,onKeyDown:a=>this.onLogoKeyDown(a,r),onDragStart:a=>this.onDragStart(a,r),onDragOver:a=>this.onDragOver(a,r),onDragLeave:a=>this.onDragLeave(a,r),onDragEnd:()=>this.onDragEnd(),onDrop:a=>this.onDrop(a,r)},o("input",{type:"checkbox",checked:e.selected,onInput:a=>this.onInputSelectedLogos(a,e.name)}),o("img",{src:`https://checkout.dintero.com/v1/branding/logos/${e.name}/variant/smallmark/logo.svg`,alt:e.name+" logo",style:{userSelect:"none",pointerEvents:"none"}}),o("span",{class:"logo-name"},Dr[e.name]))}))),o("hr",{key:"5a1bbbde589c3699a322086e5c94d1eea648fca7"}),o("div",{key:"10172a3c0b2041cf1115039ee5cd6bd4bdb9da6a",class:"section-subheading"},o("p",{key:"94bf0571cec1ab4549863790897557b59eaa3b46",class:"section-subheading-title"},u("titles.style_settings",this.resolvedLocale)),o("button",{key:"5b0a1ed01c4b0a909350fab7c4378bf1eb255da8",type:"button",class:"small outlined",onClick:()=>this.reset()},o(ie,{key:"33d5c56d34ff007ac7cd6e1ffa9bec0d409377ae"}),u("actions.reset_form",this.resolvedLocale))),o("ux-switch",{key:"3cb37f5a1d84be7803d23f7a6a4a157993960cca",label:u("fields.secure_payment_badge",this.resolvedLocale),checked:this.template==="dintero_top_frame",disabled:["logomark","smallmark"].includes(this.variant),onUxChange:e=>this.onChangeTemplate(e.detail?"dintero_top_frame":"logos")}),o("ux-color-input",{key:"b682ded6230d79b01f8edf1c1bb27cfa1d2f3f1d",label:u("fields.background_colour_mono",this.resolvedLocale),value:this.color,onUxInput:e=>this.onChangeColor(e),onUxChange:e=>this.onChangeColor(e)}),o("ux-combobox",{key:"810d70a3869994aaf26236631ba7258b0161f9f7",ref:e=>this.variantSelect=e,label:u("fields.style_variant",this.resolvedLocale),options:["colors","mono","darkcolors","logomark","smallmark"].map((e=>({value:e,label:u("fields.style_variant_"+e,this.resolvedLocale)}))),onUxChange:e=>this.onChangeVariant(e),value:this.variant}),o("ux-slider",{key:"c84dbe75e33ed86e98db3bddc3c5bb192ccc5ff8",label:u("fields.width",this.resolvedLocale),unit:"px",min:350,max:800,step:50,value:this.width,onUxChange:e=>this.onChangeWidth(e)}))),o("div",{key:"37decffac006a1f3f5473532b5388dc475ea39dd",class:"pane preview-pane"},o("p",{key:"83aea5e3f87cedb49a56c1b2e984384684ba1ac0",class:"section-heading"},u("titles.preview",this.resolvedLocale)),o("div",{key:"0f1ac5fdf1f9f767a70b87615c78632860541486",class:"preview-area"},o("div",{key:"b57c466c33d21db19b83498c161418828179c9c2",class:"preview-area-scroll"},o("div",{key:"5b5fcbcab29f5dc4d008bcb832143e60e4d71a7e",class:"preview-area-inner",style:{backgroundColor:this.transparentPreview?void 0:this.previewColor}},o("img",{key:"63db0e4747c0c3777a22b78e8445ac66814398f5",style:{width:this.width+"px",height:"auto",minHeight:"80px",display:"block",padding:"var(--spacing-sm)",backgroundColor:this.transparentPreview?"transparent":this.previewColor},src:this.generateUrl(),alt:"Logo preview",onError:e=>{e.target.style.display="none"},onLoad:e=>{e.target.style.display="block"}})))),o("div",{key:"ed568b0603eb7d6d6355710811c6f4e56f25b94c",class:"preview-settings"},o("div",{key:"dc5b67ece0661c5348c54d0b6bfc3136f6f46e20",class:"preview-settings-heading"},o("p",{key:"35fedcbf906522bd52dc829d6f211600f0ba1132",class:"title"},u("titles.preview_settings",this.resolvedLocale)),o("p",{key:"4f8e670b686c56e0cba2f73351c7329312137c7b",class:"description"},u("bodies.preview_sub",this.resolvedLocale))),o("ux-switch",{key:"3e8fd8475f095a8916d87f0ef982ecf4844efd77",label:u("fields.transparent_background",this.resolvedLocale),checked:this.transparentPreview,onUxChange:e=>this.onToggleTransparentPreview(e)}),!this.transparentPreview&&o("ux-color-input",{key:"7b0ded84151335780808b05e89318ed3bdb27684",label:u("fields.preview_background_color",this.resolvedLocale),value:this.previewColor,onUxInput:e=>this.onChangePreviewColor(e)})))),o("div",{key:"e2374a0ca63a2eda34da6afe52cd6351825ac852",class:"pane url-pane"},o("div",{key:"6bd7ea875fcad7bb5f42be4255f6872b6893dbd5",class:"generated-url-section"},o("div",{key:"f383a644b6109967c6aa3bb988dd708e25de7578",class:"generated-url-card"},o("div",{key:"2d7258b2d9d1ba3f5682037bebc23a9e539015e4",class:"generated-url-heading"},o("p",{key:"0a9498f7ad1d562f97544d7cb111d71cdac20d55",class:"title"},u("titles.generated_url",this.resolvedLocale)),o("p",{key:"366d815093f2dc42a10a583fec207573469bca03",class:"description"},u("bodies.generated_url_sub",this.resolvedLocale))),o("div",{key:"98a2a2b730b3993f1bff5034123754c9ccc57c82",class:"console"},o("button",{key:"dd6fc21b983aca405cd39edd0d1523be7c8e4769",type:"button",onClick:()=>this.copyUrlToClipboard()},o(this.showCopiedLabel?ne:oe,null),u(this.showCopiedLabel?"actions.copied_url_code":"actions.copy_url",this.resolvedLocale)),o("code",{key:"021e8fec5a492722a8ae7332235d6ff347840b44"},this.generateUrl())))))))}static get watchers(){return{locale:[{handleLocaleChange:0}],variant:[{handleVariantChange:0}],template:[{handleTemplateChange:0}]}}static get style(){return'h1,h2,h3,h4,h5,h6,p,span,code,pre,strong,a,div{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em}h1{font-size:48px;line-height:56px;font-weight:700}h2{font-size:40px;line-height:48px;font-weight:700}h3{font-size:32px;line-height:40px;font-weight:700}h4{font-size:24px;line-height:32px;font-weight:700}h5{font-size:20px;line-height:28px;font-weight:700}h6{font-size:16px;line-height:24px;font-weight:700}p{line-height:20px;&.xs{line-height:var(--text-paragraph-xs-line-height);font-size:var(--text-paragraph-xs-font-size)}&.sm{line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}&.md{line-height:var(--text-paragraph-md-line-height);font-size:var(--text-paragraph-md-font-size)}&.lg{line-height:var(--text-paragraph-lg-line-height);font-size:var(--text-paragraph-lg-font-size)}&.overline{letter-spacing:var(--text-overline-letter-spacing);text-transform:var(--text-overline-text-transform);font-weight:var(--text-overline-font-weight)}}*{box-sizing:border-box;margin:0;padding:0}.header{display:flex;align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-sm);border-bottom:2px solid var(--color-primary-500)}.pane{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;flex:1 1 400px;&.settings-pane{order:1}&.preview-pane{flex:1 1 500px;align-items:center;order:2}&.url-pane{order:3}}.content{flex:1;display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-self:stretch;max-width:100%;&.single-column{flex-direction:column;.pane{max-width:100%}}}.footer{display:flex;align-items:center;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);justify-content:center}.card{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;overflow:hidden;background-color:var(--color-surface);&.primary-accent{background-color:var(--color-primary-50);border-color:var(--color-primary-100);color:var(--color-primary-700);:host(.dark) &{background-color:var(--color-primary-100);border-color:var(--color-primary-300);color:var(--color-primary-200)}}&.greenish-accent{background-color:var(--color-success-50);border-color:var(--color-success-300);color:var(--color-success-900);:host(.dark) &{background-color:var(--color-success-300);border-color:var(--color-success-500);color:var(--color-success-50)}}}ul{list-style-type:disc;display:flex;flex-direction:column;gap:var(--spacing-xs);li{margin-left:var(--spacing-md);line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}}.card-header{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:center;justify-content:space-between}.card-title{display:flex;flex-direction:column;gap:var(--spacing-xs)}button{appearance:none;background:none;font:inherit;outline:2px solid transparent;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.2s, background-color 0.2s, box-shadow 0.1s, opacity 0.05s, outline 0.1s, outline-offset 0.15s;display:flex;align-items:center;gap:var(--spacing-xs);&:hover{opacity:0.9}&:focus{outline:3px solid var(--color-primary-100);outline-offset:6px}&:active{opacity:0.8}&.primary{background-color:var(--color-primary-500);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md)}&.default{color:var(--color-neutral-900);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);border-color:var(--color-neutral-300);box-shadow:var(--shadow-xs);&:hover{border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}&:active{border-color:var(--color-neutral-500);background-color:var(--color-neutral-100);box-shadow:var(--shadow-md)}}&.outlined{color:var(--color-neutral-900);border-color:var(--color-neutral-500);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);gap:6px;font-weight:500;&:hover{background-color:var(--color-neutral-50)}&:active{background-color:var(--color-neutral-100)}}&.small{padding:6px 12px;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height)}}hr{border-style:solid;color:var(--color-neutral-300)}code{white-space:pre-wrap;word-break:break-all;&.in-block{background-color:var(--color-code-surface);color:var(--color-success-400);border:1px solid var(--color-code-surface);border-radius:var(--default-radius);padding:var(--spacing-sm)}}.section-heading{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--color-neutral-900)}.section-subheading{display:flex;align-items:center;justify-content:space-between;width:100%}.section-subheading-title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900);display:flex;align-items:center;gap:var(--spacing-xs)}.preview-area{background-color:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-xlg);width:100%;overflow-x:auto}.preview-area-scroll{padding:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm)}.preview-area-inner{background-color:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;img{max-width:100%;height:auto}}.preview-settings{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.preview-settings-heading{display:flex;flex-direction:column}.preview-settings-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900)}.preview-settings-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:var(--color-neutral-700)}.generated-url-section{width:100%;padding-top:var(--spacing-sm)}.generated-url-card{background-color:#171717;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.generated-url-heading{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}.generated-url-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:#ffffff}.generated-url-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:#d4d4d4}.console{background-color:#303b42;border:1px solid #262f35;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;overflow:hidden;width:100%}.console code{white-space:pre-wrap;word-break:break-all;font-family:"JetBrains Mono", monospace;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:#d4d4d4;max-width:100%}.console button{background-color:#ffffff;color:#171717;font-weight:500;padding:10px var(--spacing-sm);border-radius:var(--border-radius-md);border:none;&:hover{opacity:0.9}}:host(.dark){--color-surface:#1f1f1f;--color-code-surface:#0a0a0a;--color-neutral-50:#171717;--color-neutral-100:#1f1f1f;--color-neutral-200:#292929;--color-neutral-300:#404040;--color-neutral-400:#737373;--color-neutral-500:#a3a3a3;--color-neutral-600:#d4d4d4;--color-neutral-700:#e5e5e5;--color-neutral-800:#f5f5f5;--color-neutral-900:#fafafa;--color-primary-50:#0d0d33;--color-primary-100:#1a1a5c;--color-success-50:#0a1a0f;--color-success-100:#0f2a15;--shadow-xs:0px 1px 2px 0px rgba(0, 0, 0, 0.4);--shadow-sm:0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);--shadow-md:0px 4px 6px -1px rgba(0, 0, 0, 0.4), 0px 2px 4px -1px rgba(0, 0, 0, 0.3);--shadow-lg:0px 10px 15px -3px rgba(0, 0, 0, 0.4), 0px 4px 6px -2px rgba(0, 0, 0, 0.2)}:host(.light){--color-surface:white;--color-code-surface:#171717;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-primary-50:#f2f6ff;--color-primary-100:#d9e4ff;--color-success-50:#f0fdf4;--color-success-100:#dcfce7;--shadow-xs:0px 1px 2px 0px rgba(16, 24, 40, 0.1);--shadow-sm:0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -1px rgba(16, 24, 40, 0.06);--shadow-lg:0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05)}:host{background:transparent;color:var(--color-neutral-900);font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:400;font-style:normal;font-stretch:normal;font-feature-settings:"liga" 1, "calt" 1;display:flex;flex-direction:column;padding:unset;margin:unset;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;width:100%;min-height:100%}.payment-logo-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.payment-logo-option{display:flex;align-items:center;gap:var(--spacing-xs);min-width:86px;padding:var(--spacing-sm);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-md);cursor:grab;transition:border-color 0.1s, box-shadow 0.2s, opacity 0.2s, background-color 0.15s, transform 0.15s;&:hover{border-color:var(--color-neutral-400);box-shadow:var(--shadow-sm)}&:has(input:checked){border-color:var(--color-primary-400);background-color:var(--color-primary-100)}&:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;box-shadow:0 0 0 4px var(--color-primary-100)}&.is-dragging{opacity:0.35;transform:scale(0.97);border-color:var(--color-primary-300);border-style:dashed;cursor:grabbing}&.is-drag-over{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-200), var(--shadow-md);transform:scale(1.04);background-color:var(--color-primary-100)}input{display:none}img{width:34px;height:24px;object-fit:contain;border-radius:var(--border-radius-sm);flex-shrink:0}.logo-name{font-size:var(--text-paragraph-md-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:var(--color-neutral-900);white-space:nowrap}}.keyboard-hint{font-size:var(--text-paragraph-xs-font-size);color:var(--color-neutral-600);margin:0}'}},[513,"logo-display-builder",{locale:[1],colorScheme:[1,"color-scheme"],resolvedLocale:[32],logos:[32],variant:[32],color:[32],width:[32],template:[32],transparentPreview:[32],previewColor:[32],dragIndex:[32],dragOverIndex:[32],showCopiedLabel:[32],systemColorScheme:[32]},void 0,{locale:[{handleLocaleChange:0}],variant:[{handleVariantChange:0}],template:[{handleTemplateChange:0}]}]);function Rr(){typeof customElements<"u"&&["logo-display-builder","ux-color-input","ux-combobox","ux-slider","ux-switch","ux-text-input","ux-tooltip"].forEach((e=>{switch(e){case"logo-display-builder":customElements.get(e)||customElements.define(e,Er);break;case"ux-color-input":customElements.get(e)||Q();break;case"ux-combobox":customElements.get(e)||G();break;case"ux-slider":customElements.get(e)||J();break;case"ux-switch":customElements.get(e)||Y();break;case"ux-text-input":customElements.get(e)||$();break;case"ux-tooltip":customElements.get(e)||X()}}))}Rr();var Mr=(...e)=>e.filter(Boolean).join(" "),Or=e=>{let r=(n=>{let l=n.trim().replace(/^#/,"");return/^[\da-fA-F]{3}$/.test(l)?l.split("").map((c=>c+c)).join(""):/^[\da-fA-F]{6}$/.test(l)?l:null})(e);if(!r)return"light";let a=Number.parseInt(r.slice(0,2),16)/255,t=Number.parseInt(r.slice(2,4),16)/255,s=Number.parseInt(r.slice(4,6),16)/255,i=n=>n<=.03928?n/12.92:((n+.055)/1.055)**2.4;return .2126*i(a)+.7152*i(t)+.0722*i(s)>.179?"light":"dark"},Je="P11113127",Ye="P11113127.5GgMj1TaeHrSyaQoF4D1ij",Xe="colors",be="#171717",Ze="dintero_top_frame",xe=!1,ye="#ffffff",Ur=L(class extends z{constructor(e){super(),e!==!1&&this.__registerHost(),this.__attachShadow()}get el(){return this}locale;resolvedLocale="en";accountId=Je;profileId=Ye;baseUrl="https://checkout.dintero.com/v1/branding";showMyDinteroPaymentProfileHeader=!0;showPaneLabels=!0;immutableAccountAndProfile=!1;singleColumn=!1;variant=Xe;color=be;width=600;template=Ze;transparentPreview=xe;previewColor=ye;colorScheme;systemColorScheme=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";get effectiveColorScheme(){return this.colorScheme??this.systemColorScheme}variantSelect;templateSelect;showCopiedLabel=!1;errorOnImagePreview=!1;connectedCallback(){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",this.handleColorSchemeChange)}disconnectedCallback(){window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change",this.handleColorSchemeChange)}handleColorSchemeChange=e=>{this.systemColorScheme=e.matches?"dark":"light"};componentWillLoad(){this.resolvedLocale=F(this.el,this.locale)}handleLocaleChange(){this.resolvedLocale=F(this.el,this.locale)}handleVariantChange(e){this.variantSelect&&(this.variantSelect.value=e)}handleTemplateChange(e){this.templateSelect&&(this.templateSelect.value=e)}generateUrl(){return`${this.baseUrl}/accounts/${encodeURIComponent(this.accountId)}/profiles/${encodeURIComponent(this.profileId)}/variant/${this.variant}/color/${this.color.slice(1)}/width/${this.width}/${this.template}.svg`}reset(){this.immutableAccountAndProfile||(this.accountId=Je,this.profileId=Ye),this.variant=Xe,this.color=be,this.width=600,this.template=Ze,this.previewColor=ye,this.transparentPreview=xe}onChangeAccountId(e){this.accountId=e.detail.trim()}onChangeProfileId(e){this.profileId=e.detail.trim()}onChangeVariant(e){this.variant=e.detail,["logomark","smallmark"].includes(this.variant)?this.template="logos":this.template==="logos"&&(this.template="dintero_top_frame"),this.variant==="darkcolors"?(this.color="#ffffff",this.previewColor="#171717",this.transparentPreview&&(this.transparentPreview=!1)):(this.color=be,this.previewColor=ye,this.transparentPreview=xe)}onChangeColor(e){this.color=e.detail}onChangeWidth(e){this.width=e.detail}onChangeTemplate(e){this.template=e}onChangePreviewColor(e){this.previewColor=e.detail}onToggleTransparentPreview(e){this.transparentPreview=e.detail}async copyUrlToClipboard(){if(this.showCopiedLabel)return;let e=this.generateUrl();try{await navigator.clipboard.writeText(e),this.showCopiedLabel=!0,await new Promise((r=>setTimeout(r,2e3))),this.showCopiedLabel=!1}catch{console.error(u("errors.copy_profile_url_clipboard_failed",this.resolvedLocale))}}render(){return o(T,{key:"bf46949ec30717ef474d7842f841a2ef847a96cf",class:{dark:this.effectiveColorScheme==="dark",light:this.effectiveColorScheme==="light"}},o("div",{key:"8bcc7fb0827facc0e6f875805a6f2d218115e848"},o("div",{key:"91e647eb8197c8ce3d333eda030a13ebe38cb816",class:Mr("content",this.singleColumn&&"single-column")},o("div",{key:"405d4edb395f0bb13d1ac1413c51c21f94cb9610",class:"pane settings-pane"},this.showPaneLabels&&o("p",{key:"be82e247f0cd09506f4b08be5ea926bb25d20580",class:"section-heading"},u("titles.configuration",this.resolvedLocale)),o("div",{key:"1d108cb4238857e28bc14f1ca458800b6bc182af",class:"card"},this.showMyDinteroPaymentProfileHeader&&o("p",{key:"b03249bf44c1e59bd3d0520a686bd84b6d744623",class:"section-subheading-title"},u("titles.profile_based_logo_url",this.resolvedLocale),o("ux-tooltip",{key:"ca91dfbe75e959584e482f39d391c657769add2c",text:u("tooltips.my_dintero_payment_profile",this.resolvedLocale),placement:"top"},o(se,{key:"083cdb025515184cf382d12baabdb6ebae1d06c6"}))),!this.immutableAccountAndProfile&&o("div",{key:"437e324ba129b1bd00cec9e6a571d2403aadf90b",class:"profile-inputs"},o("ux-text-input",{key:"f62415418564c19bcf2696b16011374fbf6856f6",label:u("fields.account_id",this.resolvedLocale),onUxChange:e=>this.onChangeAccountId(e),value:this.accountId}),o("ux-text-input",{key:"08ed2cae921ea9054c44160a332bd39c680d9974",label:u("fields.profile_id",this.resolvedLocale),onUxChange:e=>this.onChangeProfileId(e),value:this.profileId})),!this.immutableAccountAndProfile&&o("hr",{key:"456a223f5f4961ef88ab24618a8cbcda1655da54"}),o("div",{key:"175f5db7279a0a726f67694789866d76a4a01faa",class:"section-subheading"},o("p",{key:"e6a061a6c4fab3434bd24727ae708a129588bbea",class:"section-subheading-title"},u("titles.style_settings",this.resolvedLocale)),o("button",{key:"5fe6f4f977aac4a8062c0f24374d78aa9e0cc554",type:"button",class:"small outlined",onClick:()=>this.reset()},o(ie,{key:"a672de76adc9e57524d1340a8d9d437d9aada99c"}),u("actions.reset_form",this.resolvedLocale))),o("ux-switch",{key:"6e8a20bae3f30d943cc5c6d6a1f5cda779c45292",label:u("fields.secure_payment_badge",this.resolvedLocale),checked:this.template==="dintero_top_frame",disabled:["logomark","smallmark"].includes(this.variant),onUxChange:e=>this.onChangeTemplate(e.detail?"dintero_top_frame":"logos")}),o("ux-color-input",{key:"f09e081c7686c3cb8a41b46963414ac11ca9a590",label:u("fields.background_colour_mono",this.resolvedLocale),value:this.color,onUxInput:e=>this.onChangeColor(e),onUxChange:e=>this.onChangeColor(e)}),o("ux-combobox",{key:"fd8eca33256287ac009b842824a4f774f97f1d5c",ref:e=>this.variantSelect=e,label:u("fields.style_variant",this.resolvedLocale),options:["colors","mono","darkcolors","logomark","smallmark"].map((e=>({value:e,label:u("fields.style_variant_"+e,this.resolvedLocale)}))),onUxChange:e=>this.onChangeVariant(e),value:this.variant}),o("ux-slider",{key:"b03c6d0ee89bf41ef1f78a0daec022db3fb3c4c1",label:u("fields.width",this.resolvedLocale),unit:"px",min:350,max:800,step:50,value:this.width,onUxChange:e=>this.onChangeWidth(e)}))),o("div",{key:"6d76f6fbaf296208a34508b360bdd6e6d3572ac0",class:"pane preview-pane"},this.showPaneLabels&&o("p",{key:"9cdff2f5439832af1eb211f11718822ffbc57bbc",class:"section-heading"},u("titles.preview",this.resolvedLocale)),o("div",{key:"0b5877ed7a09797c6714ce2c9aed2b512d8db9ff",class:"preview-area"},o("div",{key:"03cc4198c7880a0e5c0addac542b5aa43c39302f",class:"preview-area-scroll"},o("div",{key:"e4cbc0b419d1a7c7146c57b8b72f1364d88fd632",class:"preview-area-inner",style:{backgroundColor:this.transparentPreview?void 0:this.previewColor}},o("img",{key:"e74ce8816519a04eb9f19b136aa116fdabdca78e",style:{width:this.width+"px",height:"auto",minHeight:"80px",display:"block",padding:"var(--spacing-sm)",backgroundColor:this.transparentPreview?"transparent":this.previewColor},src:this.generateUrl(),alt:"Logo preview",onError:e=>{e.target.style.display="none",this.errorOnImagePreview=!0},onLoad:e=>{e.target.style.display="block",this.errorOnImagePreview=!1}}),this.errorOnImagePreview&&o("p",{key:"03c76b9ddce8c2d852a8fe8bcc02b68c8f601518",style:{fontWeight:"600",fontSize:"18px",lineHeight:"28px",textAlign:"center",...Or(this.previewColor)==="dark"&&{color:"#fff"}}},u("errors.image_preview_error",this.resolvedLocale))))),o("div",{key:"33e8033b1892ff4e58ecb9f2383ac041b0abef6f",class:"preview-settings"},o("div",{key:"35deadeba54443e1fe1145c1ba627fcae0cb6009",class:"preview-settings-heading"},o("p",{key:"a4bf1e26718b9e058a55864a095787e5502ffcee",class:"title"},u("titles.preview_settings",this.resolvedLocale)),o("p",{key:"2e28a81a6c47ec780c1dff3c5ad13092f5c16ace",class:"description"},u("bodies.preview_settings_sub",this.resolvedLocale))),o("ux-switch",{key:"d8a0914b5776cbd26bf6d733e88c852146bb1426",label:u("fields.transparent_background",this.resolvedLocale),checked:this.transparentPreview,onUxChange:e=>this.onToggleTransparentPreview(e)}),!this.transparentPreview&&o("ux-color-input",{key:"46a3e00b517acca0eb18f3ad82ee191267acc577",label:u("fields.preview_background_color",this.resolvedLocale),value:this.previewColor,onUxInput:e=>this.onChangePreviewColor(e)})),o("div",{key:"be788deee38d4537eb5e6f316cfba5ffab310ce6",class:"generated-url-section"},o("div",{key:"e8d1da28796eaa87d1a2e2e2a8ec188dfdd2799b",class:"generated-url-card"},o("div",{key:"094c74f18345955a2ea14a99f171c503572fef16",class:"generated-url-heading"},o("p",{key:"8fd055a4005e72d8c7c979ee71c8088d3f29cb0c",class:"title"},u("titles.generated_url",this.resolvedLocale)),o("p",{key:"532440aa81399f145083b4ec2d230abab71a98d1",class:"description"},u("bodies.generated_url_sub",this.resolvedLocale))),o("div",{key:"4143709f791bbf3190fe6c7c0e82681db04dea42",class:"console"},o("button",{key:"b9b5a5b6d6287edefa83032d2c7c864205b35ded",type:"button",onClick:()=>this.copyUrlToClipboard()},o(this.showCopiedLabel?ne:oe,null),u(this.showCopiedLabel?"actions.copied_url_code":"actions.copy_url",this.resolvedLocale)),o("code",{key:"0e84697387644406e37b5ffb209ea4fa71f5f4cb"},this.generateUrl()))))))))}static get watchers(){return{locale:[{handleLocaleChange:0}],variant:[{handleVariantChange:0}],template:[{handleTemplateChange:0}]}}static get style(){return'h1,h2,h3,h4,h5,h6,p,span,code,pre,strong,a,div{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-0.02em}h1{font-size:48px;line-height:56px;font-weight:700}h2{font-size:40px;line-height:48px;font-weight:700}h3{font-size:32px;line-height:40px;font-weight:700}h4{font-size:24px;line-height:32px;font-weight:700}h5{font-size:20px;line-height:28px;font-weight:700}h6{font-size:16px;line-height:24px;font-weight:700}p{line-height:20px;&.xs{line-height:var(--text-paragraph-xs-line-height);font-size:var(--text-paragraph-xs-font-size)}&.sm{line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}&.md{line-height:var(--text-paragraph-md-line-height);font-size:var(--text-paragraph-md-font-size)}&.lg{line-height:var(--text-paragraph-lg-line-height);font-size:var(--text-paragraph-lg-font-size)}&.overline{letter-spacing:var(--text-overline-letter-spacing);text-transform:var(--text-overline-text-transform);font-weight:var(--text-overline-font-weight)}}*{box-sizing:border-box;margin:0;padding:0}.header{display:flex;align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-sm);border-bottom:2px solid var(--color-primary-500)}.pane{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:0;flex:1 1 400px;&.settings-pane{order:1}&.preview-pane{flex:1 1 500px;align-items:center;order:2}&.url-pane{order:3}}.content{flex:1;display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-self:stretch;max-width:100%;&.single-column{flex-direction:column;.pane{max-width:100%}}}.footer{display:flex;align-items:center;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);justify-content:center}.card{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;overflow:hidden;background-color:var(--color-surface);&.primary-accent{background-color:var(--color-primary-50);border-color:var(--color-primary-100);color:var(--color-primary-700);:host(.dark) &{background-color:var(--color-primary-100);border-color:var(--color-primary-300);color:var(--color-primary-200)}}&.greenish-accent{background-color:var(--color-success-50);border-color:var(--color-success-300);color:var(--color-success-900);:host(.dark) &{background-color:var(--color-success-300);border-color:var(--color-success-500);color:var(--color-success-50)}}}ul{list-style-type:disc;display:flex;flex-direction:column;gap:var(--spacing-xs);li{margin-left:var(--spacing-md);line-height:var(--text-paragraph-sm-line-height);font-size:var(--text-paragraph-sm-font-size)}}.card-header{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:center;justify-content:space-between}.card-title{display:flex;flex-direction:column;gap:var(--spacing-xs)}button{appearance:none;background:none;font:inherit;outline:2px solid transparent;cursor:pointer;user-select:none;border:1px solid transparent;transition:border-color 0.2s, background-color 0.2s, box-shadow 0.1s, opacity 0.05s, outline 0.1s, outline-offset 0.15s;display:flex;align-items:center;gap:var(--spacing-xs);&:hover{opacity:0.9}&:focus{outline:3px solid var(--color-primary-100);outline-offset:6px}&:active{opacity:0.8}&.primary{background-color:var(--color-primary-500);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-md)}&.default{color:var(--color-neutral-900);font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);border-color:var(--color-neutral-300);box-shadow:var(--shadow-xs);&:hover{border-color:var(--color-neutral-400);background-color:var(--color-neutral-50);box-shadow:var(--shadow-sm)}&:active{border-color:var(--color-neutral-500);background-color:var(--color-neutral-100);box-shadow:var(--shadow-md)}}&.outlined{color:var(--color-neutral-900);border-color:var(--color-neutral-500);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-md);gap:6px;font-weight:500;&:hover{background-color:var(--color-neutral-50)}&:active{background-color:var(--color-neutral-100)}}&.small{padding:6px 12px;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height)}}hr{border-style:solid;color:var(--color-neutral-300)}code{white-space:pre-wrap;word-break:break-all;&.in-block{background-color:var(--color-code-surface);color:var(--color-success-400);border:1px solid var(--color-code-surface);border-radius:var(--default-radius);padding:var(--spacing-sm)}}.section-heading{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.02em;color:var(--color-neutral-900)}.section-subheading{display:flex;align-items:center;justify-content:space-between;width:100%}.section-subheading-title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900);display:flex;align-items:center;gap:var(--spacing-xs)}.preview-area{background-color:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-xlg);width:100%;overflow-x:auto}.preview-area-scroll{padding:var(--spacing-md);display:flex;justify-content:center;gap:var(--spacing-sm)}.preview-area-inner{background-color:var(--color-surface);border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;img{max-width:100%;height:auto}}.preview-settings{border:1px solid var(--color-neutral-300);border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.preview-settings-heading{display:flex;flex-direction:column}.preview-settings-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:var(--color-neutral-900)}.preview-settings-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:var(--color-neutral-700)}.generated-url-section{width:100%;padding-top:var(--spacing-sm)}.generated-url-card{background-color:#171717;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.generated-url-heading{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}.generated-url-heading .title{font-size:var(--text-paragraph-lg-font-size);line-height:var(--text-paragraph-lg-line-height);font-weight:600;color:#ffffff}.generated-url-heading .description{font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-sm-line-height);color:#d4d4d4}.console{background-color:#303b42;border:1px solid #262f35;border-radius:var(--default-radius);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;overflow:hidden;width:100%}.console code{white-space:pre-wrap;word-break:break-all;font-family:"JetBrains Mono", monospace;font-size:var(--text-paragraph-sm-font-size);line-height:var(--text-paragraph-md-line-height);font-weight:500;color:#d4d4d4;max-width:100%}.console button{background-color:#ffffff;color:#171717;font-weight:500;padding:10px var(--spacing-sm);border-radius:var(--border-radius-md);border:none;&:hover{opacity:0.9}}:host(.dark){--color-surface:#1f1f1f;--color-code-surface:#0a0a0a;--color-neutral-50:#171717;--color-neutral-100:#1f1f1f;--color-neutral-200:#292929;--color-neutral-300:#404040;--color-neutral-400:#737373;--color-neutral-500:#a3a3a3;--color-neutral-600:#d4d4d4;--color-neutral-700:#e5e5e5;--color-neutral-800:#f5f5f5;--color-neutral-900:#fafafa;--color-primary-50:#0d0d33;--color-primary-100:#1a1a5c;--color-success-50:#0a1a0f;--color-success-100:#0f2a15;--shadow-xs:0px 1px 2px 0px rgba(0, 0, 0, 0.4);--shadow-sm:0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);--shadow-md:0px 4px 6px -1px rgba(0, 0, 0, 0.4), 0px 2px 4px -1px rgba(0, 0, 0, 0.3);--shadow-lg:0px 10px 15px -3px rgba(0, 0, 0, 0.4), 0px 4px 6px -2px rgba(0, 0, 0, 0.2)}:host(.light){--color-surface:white;--color-code-surface:#171717;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-primary-50:#f2f6ff;--color-primary-100:#d9e4ff;--color-success-50:#f0fdf4;--color-success-100:#dcfce7;--shadow-xs:0px 1px 2px 0px rgba(16, 24, 40, 0.1);--shadow-sm:0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -1px rgba(16, 24, 40, 0.06);--shadow-lg:0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05)}.profile-inputs{display:flex;gap:var(--spacing-sm);align-items:flex-end;width:100%}.profile-inputs ux-text-input:first-child{flex:0 1 auto;max-width:120px}.profile-inputs ux-text-input:last-child{flex:1 1 0;min-width:0}:host{background:transparent;color:var(--color-neutral-900);font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:400;font-style:normal;font-stretch:normal;font-feature-settings:"liga" 1, "calt" 1;display:flex;flex-direction:column;padding:unset;margin:unset;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;width:100%;min-height:100%}'}},[513,"payment-profile",{locale:[1],accountId:[1025,"account-id"],profileId:[1025,"profile-id"],baseUrl:[1,"base-url"],showMyDinteroPaymentProfileHeader:[4,"show-my-dintero-payment-profile-header"],showPaneLabels:[4,"show-pane-labels"],immutableAccountAndProfile:[4,"immutable-account-and-profile"],singleColumn:[4,"single-column"],colorScheme:[1,"color-scheme"],resolvedLocale:[32],variant:[32],color:[32],width:[32],template:[32],transparentPreview:[32],previewColor:[32],systemColorScheme:[32],showCopiedLabel:[32],errorOnImagePreview:[32]},void 0,{locale:[{handleLocaleChange:0}],variant:[{handleVariantChange:0}],template:[{handleTemplateChange:0}]}]);function Ar(){typeof customElements<"u"&&["payment-profile","ux-color-input","ux-combobox","ux-slider","ux-switch","ux-text-input","ux-tooltip"].forEach((e=>{switch(e){case"payment-profile":customElements.get(e)||customElements.define(e,Ur);break;case"ux-color-input":customElements.get(e)||Q();break;case"ux-combobox":customElements.get(e)||G();break;case"ux-slider":customElements.get(e)||J();break;case"ux-switch":customElements.get(e)||Y();break;case"ux-text-input":customElements.get(e)||$();break;case"ux-tooltip":customElements.get(e)||X()}}))}Ar();})();

​What is Split Payout?

​Steps to start splitting payments with Dintero Checkout

What is Split Payout?

Steps to start splitting payments with Dintero Checkout