@withone/connect 0.6.2 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +1 -1
  2. package/dist/index.esm.js +1 -1
  3. package/dist/index.umd.js +1 -1
  4. package/dist/react.cjs.js +1 -1
  5. package/dist/react.d.ts +2 -0
  6. package/dist/react.esm.js +1 -1
  7. package/dist/svelte.cjs.js +1 -1
  8. package/dist/svelte.esm.js +1 -1
  9. package/dist/types/index.d.ts +8 -0
  10. package/dist/vue.cjs.js +1 -1
  11. package/dist/vue.esm.js +1 -1
  12. package/dist/wrapper-options.d.ts +1 -0
  13. package/package.json +1 -1
  14. package/src/button.ts +4 -0
  15. package/src/react-types.d.ts +1 -0
  16. package/src/react.ts +4 -0
  17. package/src/svelte-types.d.ts +1 -0
  18. package/src/types/index.d.ts +8 -0
  19. package/src/useOneConnect.ts +51 -0
  20. package/src/wrapper-options.ts +2 -0
package/README.md CHANGED
@@ -279,7 +279,7 @@ export async function GET(req: NextRequest) {
279
279
  url.searchParams.set("client_id", process.env.ONE_CLIENT_ID!);
280
280
  url.searchParams.set("redirect_uri", process.env.ONE_REDIRECT_URI!);
281
281
  url.searchParams.set("response_type", "code");
282
- url.searchParams.set("scope", "user:connections:read user:connections:write");
282
+ url.searchParams.set("scope", "user:connections:read user:connections:write org:connections:read org:connections:write project:connections:read project:connections:write"); // all 3 tenancy tiers — org/project grants 403 without theirs
283
283
  url.searchParams.set("state", state);
284
284
  url.searchParams.set("code_challenge", challenge);
285
285
  url.searchParams.set("code_challenge_method", "S256");
package/dist/index.esm.js CHANGED
@@ -1 +1 @@
1
- const e="@withone/connect:result",t="one-connect-frame";function n(){const e=document.getElementById(t);e&&e.remove()}const o="one-connect-success";function i(e,t,n){var i;r();const s="dark"===t,c=document.createElement("div");c.id=o,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=s?"#a1a1aa":"#6b7280",d=s?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=s?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=s?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${s?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${s?"#fafafa":"#111114"};color:${s?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${s?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${s?"#fafafa":"#111114"};">one</span></div>`;const f=l.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),c.appendChild(l),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);c.addEventListener("click",e=>{e.target===c&&h()}),window.addEventListener("keydown",m),null===(i=l.querySelector("[data-one-close]"))||void 0===i||i.focus()}function r(){var e;null===(e=document.getElementById(o))||void 0===e||e.remove()}function s(){return document.getElementById(t)}const c=o=>{let c=null,l=!1;const a=()=>{"undefined"!=typeof window&&c&&(window.removeEventListener("message",c),c=null),n()},d=(e,t)=>{if(!l){l=!0,a(),"success"===e?i("success",o.appTheme):function(e,t){i("error",e,t)}(o.appTheme,t);try{var n,r;if("success"===e)null===(n=o.onSuccess)||void 0===n||n.call(o);else null===(r=o.onError)||void 0===r||r.call(o,null!=t?t:"The connection was not completed.")}catch{}}},p=t=>{const n=t.data;if(!n)return;const i=s();if(i&&t.source===i.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||d(n.status,n.message);else{a();try{var r;null===(r=o.onClose)||void 0===r||r.call(o)}catch{}}},u=()=>{var e;const t=s();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const c=o.get("one_connect");"success"!==c&&"error"!==c||(t.style.visibility="hidden",d(c,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;l=!1,c=p,window.addEventListener("message",c);(function(e){n();const o=document.createElement("iframe");return o.id=t,o.src=e,o.setAttribute("allowtransparency","true"),Object.assign(o.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(o),o})((()=>{try{const e=new URL(o.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return o.appTheme&&(e.hash=`one_theme=${o.appTheme}`),e.toString()}catch{return o.authorize.url}})()).addEventListener("load",u)},close:e=>{null!=e&&e.keepResult||r(),a()}}};function l(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1}function a(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const d="one-connect-button-styles",p="cubic-bezier(.2,.9,.25,1)",u={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},f={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},h="#CCFF00",m="#3FE3A5",b="#0A0C0B";const g=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(d))return;const e=document.createElement("style");e.id=d,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${p},box-shadow .2s ${p},opacity .2s ${p}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${m};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${p};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${p},opacity .2s ${p}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?f:u,r=null!==(n=t.variant)&&void 0!==n?n:"default",s=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let l="idle",a=!1;const g=c({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),w=document.createElement("button");w.type="button",w.className="block"===r?"owcb owcb-block":"owcb",w.addEventListener("click",()=>{"idle"!==l&&"connected"!==l||(x("connecting"),g.open())});const v=()=>{var e,n,o;const c="accent"===r,a="block"===r,d=a?i.surface:c?null!==(e=t.accentColor)&&void 0!==e?e:h:i.btnBg,p=a?i.fg:c?b:i.btnFg,u=a?i.surface:d,f=a?i.muted:p;w.style.background="connected"!==l||a?d:m,w.style.color="connected"!==l||a?p:b,w.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===l?"none":c?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:h}38`:i.shadow,w.disabled="connecting"===l,w.innerHTML="";const g=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const s=document.createElement("span");s.className="owcb-stack",s.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=b}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=b;s.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,s.appendChild(e)}return s}(t,u,f);if(a){var v;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(v=t.connectedLabel)&&void 0!==v?v:"Connected":s,e.appendChild(n),"connecting"===l){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(w.appendChild(e),t.description&&"idle"===l){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,w.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void w.appendChild(o)}if("connecting"===l){const e=document.createElement("span");e.className="owcb-spinner",w.appendChild(e)}else if("connected"===l){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}else g&&w.appendChild(g);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":s,w.appendChild(x),"idle"===l){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}},x=e=>{a||(l=e,v())};return v(),e.appendChild(w),{setState:x,destroy:()=>{a=!0,g.close({keepResult:!0}),w.remove()}}};function w(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),a(this,"onSuccess",null),a(this,"onError",null),a(this,"onClose",null),a(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,s,c;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const l=this.getAttribute("authorize-url");if(!l)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=g(this,{connect:{authorize:{url:l},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(s=this.getAttribute("accent-color"))&&void 0!==s?s:void 0,connectedLabel:null!==(c=this.getAttribute("connected-label"))&&void 0!==c?c:void 0})}}a(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}w();export{l as completeOneConnect,g as mountConnectButton,w as registerConnectButton,c as useOneConnect};
1
+ const e="@withone/connect:result",t="one_connect",n="one_connect_message",o="one-connect-frame";function i(){const e=document.getElementById(o);e&&e.remove()}const r="one-connect-success";function c(e,t,n){var o;s();const i="dark"===t,c=document.createElement("div");c.id=r,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=l.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),c.appendChild(l),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);c.addEventListener("click",e=>{e.target===c&&f()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function s(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}function l(){return document.getElementById(o)}let a=!1;const d=r=>{var d;let p=null,u=!1;const h=null!==(d=r.mode)&&void 0!==d?d:"redirect",f=()=>{try{const e=new URL(r.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return r.appTheme&&(e.hash=`one_theme=${r.appTheme}`),e.toString()}catch{return r.authorize.url}},m=()=>{"undefined"!=typeof window&&p&&(window.removeEventListener("message",p),p=null),i()},b=(e,t)=>{if(!u){u=!0,m(),"success"===e?c("success",r.appTheme):function(e,t){c("error",e,t)}(r.appTheme,t);try{var n,o;if("success"===e)null===(n=r.onSuccess)||void 0===n||n.call(r);else null===(o=r.onError)||void 0===o||o.call(r,null!=t?t:"The connection was not completed.")}catch{}}},g=t=>{const n=t.data;if(!n)return;const o=l();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||b(n.status,n.message);else{m();try{var i;null===(i=r.onClose)||void 0===i||i.call(r)}catch{}}},w=()=>{var e;const o=l();if(!o)return;let i,r;try{var c,s;i=null!==(c=null===(s=o.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==c?c:""}catch{return}try{r=new URL(i).searchParams}catch{return}const a=r.get(t);"success"!==a&&"error"!==a||(o.style.visibility="hidden",b(a,null!==(e=r.get(n))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!a){const e=new URLSearchParams(window.location.search),o=e.get(t);if("success"===o||"error"===o){var v;a=!0;const i=null!==(v=e.get(n))&&void 0!==v?v:void 0;e.delete(t),e.delete(n);const c=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",c),window.setTimeout(()=>{if(!u){u=!0;try{var e,t;"success"===o?null===(e=r.onSuccess)||void 0===e||e.call(r):null===(t=r.onError)||void 0===t||t.call(r,null!=i?i:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===h)return void window.location.assign(f());u=!1,p=g,window.addEventListener("message",p);(function(e){i();const t=document.createElement("iframe");return t.id=o,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(f()).addEventListener("load",w)},close:e=>{null!=e&&e.keepResult||s(),m()}}};function p(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1}function u(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const h="one-connect-button-styles",f="cubic-bezier(.2,.9,.25,1)",m={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},b={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},g="#CCFF00",w="#3FE3A5",v="#0A0C0B";const x=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(h))return;const e=document.createElement("style");e.id=h,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${f},box-shadow .2s ${f},opacity .2s ${f}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${w};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${f};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${f},opacity .2s ${f}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?b:m,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let s="idle",l=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),p=document.createElement("button");p.type="button",p.className="block"===r?"owcb owcb-block":"owcb",p.addEventListener("click",()=>{"idle"!==s&&"connected"!==s||(x("connecting"),a.open())});const u=()=>{var e,n,o;const l="accent"===r,a="block"===r,d=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:g:i.btnBg,u=a?i.fg:l?v:i.btnFg,h=a?i.surface:d,f=a?i.muted:u;p.style.background="connected"!==s||a?d:w,p.style.color="connected"!==s||a?u:v,p.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===s?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:g}38`:i.shadow,p.disabled="connecting"===s,p.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,h,f);if(a){var b;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(b=t.connectedLabel)&&void 0!==b?b:"Connected":c,e.appendChild(n),"connecting"===s){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(p.appendChild(e),t.description&&"idle"===s){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,p.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void p.appendChild(o)}if("connecting"===s){const e=document.createElement("span");e.className="owcb-spinner",p.appendChild(e)}else if("connected"===s){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",p.appendChild(e)}else m&&p.appendChild(m);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,p.appendChild(x),"idle"===s){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",p.appendChild(e)}},x=e=>{l||(s=e,u())};return u(),e.appendChild(p),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),p.remove()}}};function y(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),u(this,"onSuccess",null),u(this,"onError",null),u(this,"onClose",null),u(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),h=u?parseInt(u,10):void 0;this.handle=x(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(s=this.getAttribute("accent-color"))&&void 0!==s?s:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}u(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}y();export{p as completeOneConnect,x as mountConnectButton,y as registerConnectButton,d as useOneConnect};
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- "use strict";const e="@withone/connect:result",t="one-connect-frame";function n(){const e=document.getElementById(t);e&&e.remove()}const o="one-connect-success";function i(e,t,n){var i;s();const r="dark"===t,c=document.createElement("div");c.id=o,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=r?"#a1a1aa":"#6b7280",d=r?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=r?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=r?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${r?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${r?"#fafafa":"#111114"};color:${r?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${r?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${r?"#fafafa":"#111114"};">one</span></div>`;const f=l.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),c.appendChild(l),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);c.addEventListener("click",e=>{e.target===c&&h()}),window.addEventListener("keydown",m),null===(i=l.querySelector("[data-one-close]"))||void 0===i||i.focus()}function s(){var e;null===(e=document.getElementById(o))||void 0===e||e.remove()}function r(){return document.getElementById(t)}const c=o=>{let c=null,l=!1;const a=()=>{"undefined"!=typeof window&&c&&(window.removeEventListener("message",c),c=null),n()},d=(e,t)=>{if(!l){l=!0,a(),"success"===e?i("success",o.appTheme):function(e,t){i("error",e,t)}(o.appTheme,t);try{var n,s;if("success"===e)null===(n=o.onSuccess)||void 0===n||n.call(o);else null===(s=o.onError)||void 0===s||s.call(o,null!=t?t:"The connection was not completed.")}catch{}}},p=t=>{const n=t.data;if(!n)return;const i=r();if(i&&t.source===i.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||d(n.status,n.message);else{a();try{var s;null===(s=o.onClose)||void 0===s||s.call(o)}catch{}}},u=()=>{var e;const t=r();if(!t)return;let n,o;try{var i,s;n=null!==(i=null===(s=t.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const c=o.get("one_connect");"success"!==c&&"error"!==c||(t.style.visibility="hidden",d(c,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;l=!1,c=p,window.addEventListener("message",c);(function(e){n();const o=document.createElement("iframe");return o.id=t,o.src=e,o.setAttribute("allowtransparency","true"),Object.assign(o.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(o),o})((()=>{try{const e=new URL(o.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return o.appTheme&&(e.hash=`one_theme=${o.appTheme}`),e.toString()}catch{return o.authorize.url}})()).addEventListener("load",u)},close:e=>{null!=e&&e.keepResult||s(),a()}}};function l(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const a="one-connect-button-styles",d="cubic-bezier(.2,.9,.25,1)",p={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},u={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},f="#CCFF00",h="#3FE3A5",m="#0A0C0B";const b=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(a))return;const e=document.createElement("style");e.id=a,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${d},box-shadow .2s ${d},opacity .2s ${d}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${h};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${d};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${d},opacity .2s ${d}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?u:p,s=null!==(n=t.variant)&&void 0!==n?n:"default",r=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let l="idle",b=!1;const g=c({...t.connect,onSuccess:()=>{var e,n;v("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;v("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;v("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),w=document.createElement("button");w.type="button",w.className="block"===s?"owcb owcb-block":"owcb",w.addEventListener("click",()=>{"idle"!==l&&"connected"!==l||(v("connecting"),g.open())});const x=()=>{var e,n,o;const c="accent"===s,a="block"===s,d=a?i.surface:c?null!==(e=t.accentColor)&&void 0!==e?e:f:i.btnBg,p=a?i.fg:c?m:i.btnFg,u=a?i.surface:d,b=a?i.muted:p;w.style.background="connected"!==l||a?d:h,w.style.color="connected"!==l||a?p:m,w.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===l?"none":c?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:f}38`:i.shadow,w.disabled="connecting"===l,w.innerHTML="";const g=function(e,t,n){var o,i;const s=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===s.length&&!e.moreCount)return null;const r=document.createElement("span");r.className="owcb-stack",r.setAttribute("aria-hidden","true");for(const e of s.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m;r.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,s.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,r.appendChild(e)}return r}(t,u,b);if(a){var x;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(x=t.connectedLabel)&&void 0!==x?x:"Connected":r,e.appendChild(n),"connecting"===l){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(w.appendChild(e),t.description&&"idle"===l){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,w.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void w.appendChild(o)}if("connecting"===l){const e=document.createElement("span");e.className="owcb-spinner",w.appendChild(e)}else if("connected"===l){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}else g&&w.appendChild(g);const v=document.createElement("span");if(v.className="owcb-label",v.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":r,w.appendChild(v),"idle"===l){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",w.appendChild(e)}},v=e=>{b||(l=e,x())};return x(),e.appendChild(w),{setState:v,destroy:()=>{b=!0,g.close({keepResult:!0}),w.remove()}}};function g(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),l(this,"onSuccess",null),l(this,"onError",null),l(this,"onClose",null),l(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,s,r,c;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const l=this.getAttribute("authorize-url");if(!l)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=b(this,{connect:{authorize:{url:l},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(s=this.getAttribute("description"))&&void 0!==s?s:void 0,accentColor:null!==(r=this.getAttribute("accent-color"))&&void 0!==r?r:void 0,connectedLabel:null!==(c=this.getAttribute("connected-label"))&&void 0!==c?c:void 0})}}l(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}g(),exports.completeOneConnect=function(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1},exports.mountConnectButton=b,exports.registerConnectButton=g,exports.useOneConnect=c;
1
+ "use strict";const e="@withone/connect:result",t="one_connect",n="one_connect_message",o="one-connect-frame";function i(){const e=document.getElementById(o);e&&e.remove()}const r="one-connect-success";function c(e,t,n){var o;s();const i="dark"===t,c=document.createElement("div");c.id=r,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=l.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),c.appendChild(l),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);c.addEventListener("click",e=>{e.target===c&&f()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function s(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}function l(){return document.getElementById(o)}let a=!1;const d=r=>{var d;let p=null,u=!1;const h=null!==(d=r.mode)&&void 0!==d?d:"redirect",f=()=>{try{const e=new URL(r.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return r.appTheme&&(e.hash=`one_theme=${r.appTheme}`),e.toString()}catch{return r.authorize.url}},m=()=>{"undefined"!=typeof window&&p&&(window.removeEventListener("message",p),p=null),i()},b=(e,t)=>{if(!u){u=!0,m(),"success"===e?c("success",r.appTheme):function(e,t){c("error",e,t)}(r.appTheme,t);try{var n,o;if("success"===e)null===(n=r.onSuccess)||void 0===n||n.call(r);else null===(o=r.onError)||void 0===o||o.call(r,null!=t?t:"The connection was not completed.")}catch{}}},g=t=>{const n=t.data;if(!n)return;const o=l();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||b(n.status,n.message);else{m();try{var i;null===(i=r.onClose)||void 0===i||i.call(r)}catch{}}},w=()=>{var e;const o=l();if(!o)return;let i,r;try{var c,s;i=null!==(c=null===(s=o.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==c?c:""}catch{return}try{r=new URL(i).searchParams}catch{return}const a=r.get(t);"success"!==a&&"error"!==a||(o.style.visibility="hidden",b(a,null!==(e=r.get(n))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!a){const e=new URLSearchParams(window.location.search),o=e.get(t);if("success"===o||"error"===o){var v;a=!0;const i=null!==(v=e.get(n))&&void 0!==v?v:void 0;e.delete(t),e.delete(n);const c=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",c),window.setTimeout(()=>{if(!u){u=!0;try{var e,t;"success"===o?null===(e=r.onSuccess)||void 0===e||e.call(r):null===(t=r.onError)||void 0===t||t.call(r,null!=i?i:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===h)return void window.location.assign(f());u=!1,p=g,window.addEventListener("message",p);(function(e){i();const t=document.createElement("iframe");return t.id=o,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(f()).addEventListener("load",w)},close:e=>{null!=e&&e.keepResult||s(),m()}}};function p(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const u="one-connect-button-styles",h="cubic-bezier(.2,.9,.25,1)",f={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},m={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},b="#CCFF00",g="#3FE3A5",w="#0A0C0B";const v=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(u))return;const e=document.createElement("style");e.id=u,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${h},box-shadow .2s ${h},opacity .2s ${h}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${g};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${h};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${h},opacity .2s ${h}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?m:f,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let s="idle",l=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),p=document.createElement("button");p.type="button",p.className="block"===r?"owcb owcb-block":"owcb",p.addEventListener("click",()=>{"idle"!==s&&"connected"!==s||(x("connecting"),a.open())});const v=()=>{var e,n,o;const l="accent"===r,a="block"===r,d=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:b:i.btnBg,u=a?i.fg:l?w:i.btnFg,h=a?i.surface:d,f=a?i.muted:u;p.style.background="connected"!==s||a?d:g,p.style.color="connected"!==s||a?u:w,p.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===s?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:b}38`:i.shadow,p.disabled="connecting"===s,p.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=w}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=w;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,h,f);if(a){var v;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(v=t.connectedLabel)&&void 0!==v?v:"Connected":c,e.appendChild(n),"connecting"===s){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(p.appendChild(e),t.description&&"idle"===s){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,p.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void p.appendChild(o)}if("connecting"===s){const e=document.createElement("span");e.className="owcb-spinner",p.appendChild(e)}else if("connected"===s){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",p.appendChild(e)}else m&&p.appendChild(m);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,p.appendChild(x),"idle"===s){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",p.appendChild(e)}},x=e=>{l||(s=e,v())};return v(),e.appendChild(p),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),p.remove()}}};function x(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),p(this,"onSuccess",null),p(this,"onError",null),p(this,"onClose",null),p(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),h=u?parseInt(u,10):void 0;this.handle=v(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(s=this.getAttribute("accent-color"))&&void 0!==s?s:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}p(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}x(),exports.completeOneConnect=function(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1},exports.mountConnectButton=v,exports.registerConnectButton=x,exports.useOneConnect=d;
package/dist/react.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("react");function t(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const n="one-connect-frame";function o(){const e=document.getElementById(n);e&&e.remove()}const i="one-connect-success";function r(e,t,n){var o;c();const r="dark"===t,s=document.createElement("div");s.id=i,Object.assign(s.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=r?"#a1a1aa":"#6b7280",d=r?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=r?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=r?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${r?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${r?"#fafafa":"#111114"};color:${r?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${r?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${r?"#fafafa":"#111114"};">one</span></div>`;const f=l.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),s.appendChild(l),document.body.appendChild(s),requestAnimationFrame(()=>{s.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),s.style.opacity="0",window.setTimeout(()=>s.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);s.addEventListener("click",e=>{e.target===s&&h()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function c(){var e;null===(e=document.getElementById(i))||void 0===e||e.remove()}function s(){return document.getElementById(n)}const l=e=>{let t=null,i=!1;const l=()=>{"undefined"!=typeof window&&t&&(window.removeEventListener("message",t),t=null),o()},a=(t,n)=>{if(!i){i=!0,l(),"success"===t?r("success",e.appTheme):function(e,t){r("error",e,t)}(e.appTheme,n);try{var o,c;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(c=e.onError)||void 0===c||c.call(e,null!=n?n:"The connection was not completed.")}catch{}}},d=t=>{const n=t.data;if(!n)return;const o=s();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||a(n.status,n.message);else{l();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},p=()=>{var e;const t=s();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const c=o.get("one_connect");"success"!==c&&"error"!==c||(t.style.visibility="hidden",a(c,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;i=!1,t=d,window.addEventListener("message",t);(function(e){o();const t=document.createElement("iframe");return t.id=n,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})()).addEventListener("load",p)},close:e=>{null!=e&&e.keepResult||c(),l()}}},a="one-connect-button-styles",d="cubic-bezier(.2,.9,.25,1)",p={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},u={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},f="#CCFF00",h="#3FE3A5",m="#0A0C0B";const b=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(a))return;const e=document.createElement("style");e.id=a,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${d},box-shadow .2s ${d},opacity .2s ${d}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${h};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${d};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${d},opacity .2s ${d}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?u:p,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let s="idle",b=!1;const g=l({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==s&&"connected"!==s||(x("connecting"),g.open())});const w=()=>{var e,n,o;const l="accent"===r,a="block"===r,d=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:f:i.btnBg,p=a?i.fg:l?m:i.btnFg,u=a?i.surface:d,b=a?i.muted:p;v.style.background="connected"!==s||a?d:h,v.style.color="connected"!==s||a?p:m,v.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===s?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:f}38`:i.shadow,v.disabled="connecting"===s,v.innerHTML="";const g=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,u,b);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===s){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(v.appendChild(e),t.description&&"idle"===s){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===s){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===s){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else g&&v.appendChild(g);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===s){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{b||(s=e,w())};return w(),e.appendChild(v),{setState:x,destroy:()=>{b=!0,g.close({keepResult:!0}),v.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),t(this,"onSuccess",null),t(this,"onError",null),t(this,"onClose",null),t(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const l=this.getAttribute("authorize-url");if(!l)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=b(this,{connect:{authorize:{url:l},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}t(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}(),exports.ConnectButton=function(t){var n;const o=e.useRef(null),i=e.useRef(null),r=e.useRef({onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose});r.current={onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose};const c=JSON.stringify(null!==(n=t.platforms)&&void 0!==n?n:[]);return e.useEffect(()=>{if(!o.current)return;const e={connect:{authorize:{url:t.authorizeUrl},appTheme:t.appTheme,onSuccess:()=>{var e,t;return null===(e=(t=r.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=r.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=r.current).onClose)||void 0===e?void 0:e.call(t)}},label:t.label,variant:t.variant,theme:t.theme,platforms:t.platforms,moreCount:t.moreCount,description:t.description,accentColor:t.accentColor,connectedLabel:t.connectedLabel};return i.current=b(o.current,e),()=>{var e;null===(e=i.current)||void 0===e||e.destroy(),i.current=null}},[t.authorizeUrl,t.appTheme,t.label,t.variant,t.theme,c,t.moreCount,t.description,t.accentColor,t.connectedLabel]),e.createElement("div",{ref:o,className:t.className,style:t.style})};
1
+ "use strict";var e=require("react");function t(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const n="one_connect",o="one_connect_message",i="one-connect-frame";function r(){const e=document.getElementById(i);e&&e.remove()}const c="one-connect-success";function s(e,t,n){var o;l();const i="dark"===t,r=document.createElement("div");r.id=c,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const s=document.createElement("div");Object.assign(s.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",u=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",p=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";s.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${u};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${p};border:1px solid ${u};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=s.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(s),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of s.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);r.addEventListener("click",e=>{e.target===r&&f()}),window.addEventListener("keydown",m),null===(o=s.querySelector("[data-one-close]"))||void 0===o||o.focus()}function l(){var e;null===(e=document.getElementById(c))||void 0===e||e.remove()}function a(){return document.getElementById(i)}let d=!1;const u=e=>{var t;let c=null,u=!1;const p=null!==(t=e.mode)&&void 0!==t?t:"redirect",h=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},f=()=>{"undefined"!=typeof window&&c&&(window.removeEventListener("message",c),c=null),r()},m=(t,n)=>{if(!u){u=!0,f(),"success"===t?s("success",e.appTheme):function(e,t){s("error",e,t)}(e.appTheme,n);try{var o,i;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(i=e.onError)||void 0===i||i.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=a();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{f();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const t=a();if(!t)return;let i,r;try{var c,s;i=null!==(c=null===(s=t.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==c?c:""}catch{return}try{r=new URL(i).searchParams}catch{return}const l=r.get(n);"success"!==l&&"error"!==l||(t.style.visibility="hidden",m(l,null!==(e=r.get(o))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!d){const t=new URLSearchParams(window.location.search),i=t.get(n);if("success"===i||"error"===i){var v;d=!0;const r=null!==(v=t.get(o))&&void 0!==v?v:void 0;t.delete(n),t.delete(o);const c=window.location.pathname+(t.toString()?`?${t.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",c),window.setTimeout(()=>{if(!u){u=!0;try{var t,n;"success"===i?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(n=e.onError)||void 0===n||n.call(e,null!=r?r:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===p)return void window.location.assign(h());u=!1,c=b,window.addEventListener("message",c);(function(e){r();const t=document.createElement("iframe");return t.id=i,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||l(),f()}}},p="one-connect-button-styles",h="cubic-bezier(.2,.9,.25,1)",f={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},m={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},b="#CCFF00",g="#3FE3A5",v="#0A0C0B";const w=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${h},box-shadow .2s ${h},opacity .2s ${h}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${g};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${h};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${h},opacity .2s ${h}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?m:f,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let s="idle",l=!1;const a=u({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==s&&"connected"!==s||(x("connecting"),a.open())});const w=()=>{var e,n,o;const l="accent"===r,a="block"===r,u=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:b:i.btnBg,p=a?i.fg:l?v:i.btnFg,h=a?i.surface:u,f=a?i.muted:p;d.style.background="connected"!==s||a?u:g,d.style.color="connected"!==s||a?p:v,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===s?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:b}38`:i.shadow,d.disabled="connecting"===s,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,h,f);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===s){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===s){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===s){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===s){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,d.appendChild(x),"idle"===s){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},x=e=>{l||(s=e,w())};return w(),e.appendChild(d),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),d.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),t(this,"onSuccess",null),t(this,"onError",null),t(this,"onClose",null),t(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const u=this.getAttribute("platforms");if(u)try{const e=JSON.parse(u);Array.isArray(e)&&(d=e)}catch{}const p=this.getAttribute("more-count"),h=p?parseInt(p,10):void 0;this.handle=w(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(s=this.getAttribute("accent-color"))&&void 0!==s?s:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}t(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}(),exports.ConnectButton=function(t){var n;const o=e.useRef(null),i=e.useRef(null),r=e.useRef({onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose});r.current={onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose};const c=JSON.stringify(null!==(n=t.platforms)&&void 0!==n?n:[]);return e.useEffect(()=>{if(!o.current)return;const e={connect:{authorize:{url:t.authorizeUrl},appTheme:t.appTheme,mode:t.mode,onSuccess:()=>{var e,t;return null===(e=(t=r.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=r.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=r.current).onClose)||void 0===e?void 0:e.call(t)}},label:t.label,variant:t.variant,theme:t.theme,platforms:t.platforms,moreCount:t.moreCount,description:t.description,accentColor:t.accentColor,connectedLabel:t.connectedLabel};return i.current=w(o.current,e),()=>{var e;null===(e=i.current)||void 0===e||e.destroy(),i.current=null}},[t.authorizeUrl,t.appTheme,t.mode,t.label,t.variant,t.theme,c,t.moreCount,t.description,t.accentColor,t.connectedLabel]),e.createElement("div",{ref:o,className:t.className,style:t.style})};
package/dist/react.d.ts CHANGED
@@ -6,6 +6,8 @@ export interface ConnectButtonProps {
6
6
  authorizeUrl: string;
7
7
  /** Theme for One's card (rides the URL fragment). */
8
8
  appTheme?: "light" | "dark";
9
+ /** "redirect" (default, full-page hosted flow) or "modal" (legacy iframe). */
10
+ mode?: "redirect" | "modal";
9
11
  onSuccess?: () => void;
10
12
  onError?: (error: string) => void;
11
13
  onClose?: () => void;
package/dist/react.esm.js CHANGED
@@ -1 +1 @@
1
- import{useRef as e,useEffect as t,createElement as n}from"react";function o(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const i="one-connect-frame";function r(){const e=document.getElementById(i);e&&e.remove()}const c="one-connect-success";function s(e,t,n){var o;l();const i="dark"===t,r=document.createElement("div");r.id=c,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const s=document.createElement("div");Object.assign(s.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";s.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=s.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(s),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of s.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);r.addEventListener("click",e=>{e.target===r&&f()}),window.addEventListener("keydown",m),null===(o=s.querySelector("[data-one-close]"))||void 0===o||o.focus()}function l(){var e;null===(e=document.getElementById(c))||void 0===e||e.remove()}function a(){return document.getElementById(i)}const d=e=>{let t=null,n=!1;const o=()=>{"undefined"!=typeof window&&t&&(window.removeEventListener("message",t),t=null),r()},c=(t,i)=>{if(!n){n=!0,o(),"success"===t?s("success",e.appTheme):function(e,t){s("error",e,t)}(e.appTheme,i);try{var r,c;if("success"===t)null===(r=e.onSuccess)||void 0===r||r.call(e);else null===(c=e.onError)||void 0===c||c.call(e,null!=i?i:"The connection was not completed.")}catch{}}},d=t=>{const n=t.data;if(!n)return;const i=a();if(i&&t.source===i.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||c(n.status,n.message);else{o();try{var r;null===(r=e.onClose)||void 0===r||r.call(e)}catch{}}},p=()=>{var e;const t=a();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const s=o.get("one_connect");"success"!==s&&"error"!==s||(t.style.visibility="hidden",c(s,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;n=!1,t=d,window.addEventListener("message",t);(function(e){r();const t=document.createElement("iframe");return t.id=i,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})()).addEventListener("load",p)},close:e=>{null!=e&&e.keepResult||l(),o()}}},p="one-connect-button-styles",u="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},f={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},m="#CCFF00",b="#3FE3A5",g="#0A0C0B";const v=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${u},box-shadow .2s ${u},opacity .2s ${u}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${b};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${u};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${u},opacity .2s ${u}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?f:h,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let s="idle",l=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==s&&"connected"!==s||(x("connecting"),a.open())});const w=()=>{var e,n,o;const l="accent"===r,a="block"===r,d=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:m:i.btnBg,p=a?i.fg:l?g:i.btnFg,u=a?i.surface:d,h=a?i.muted:p;v.style.background="connected"!==s||a?d:b,v.style.color="connected"!==s||a?p:g,v.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===s?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:m}38`:i.shadow,v.disabled="connecting"===s,v.innerHTML="";const f=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,u,h);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===s){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else f&&e.appendChild(f);if(v.appendChild(e),t.description&&"idle"===s){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===s){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===s){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else f&&v.appendChild(f);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===s){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{l||(s=e,w())};return w(),e.appendChild(v),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),v.remove()}}};function w(o){var i;const r=e(null),c=e(null),s=e({onSuccess:o.onSuccess,onError:o.onError,onClose:o.onClose});s.current={onSuccess:o.onSuccess,onError:o.onError,onClose:o.onClose};const l=JSON.stringify(null!==(i=o.platforms)&&void 0!==i?i:[]);return t(()=>{if(!r.current)return;const e={connect:{authorize:{url:o.authorizeUrl},appTheme:o.appTheme,onSuccess:()=>{var e,t;return null===(e=(t=s.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=s.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=s.current).onClose)||void 0===e?void 0:e.call(t)}},label:o.label,variant:o.variant,theme:o.theme,platforms:o.platforms,moreCount:o.moreCount,description:o.description,accentColor:o.accentColor,connectedLabel:o.connectedLabel};return c.current=v(r.current,e),()=>{var e;null===(e=c.current)||void 0===e||e.destroy(),c.current=null}},[o.authorizeUrl,o.appTheme,o.label,o.variant,o.theme,l,o.moreCount,o.description,o.accentColor,o.connectedLabel]),n("div",{ref:r,className:o.className,style:o.style})}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),o(this,"onSuccess",null),o(this,"onError",null),o(this,"onClose",null),o(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const l=this.getAttribute("authorize-url");if(!l)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=v(this,{connect:{authorize:{url:l},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}o(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();export{w as ConnectButton};
1
+ import{useRef as e,useEffect as t,createElement as n}from"react";function o(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const i="one_connect",r="one_connect_message",c="one-connect-frame";function l(){const e=document.getElementById(c);e&&e.remove()}const s="one-connect-success";function a(e,t,n){var o;d();const i="dark"===t,r=document.createElement("div");r.id=s,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const c=document.createElement("div");Object.assign(c.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const l=i?"#a1a1aa":"#6b7280",a=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",u=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",p=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";c.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${a};border:1px solid ${u};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${l};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${l};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${p};border:1px solid ${u};border-top:0;">`+`<span style="font-size:11px;color:${l};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=c.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(c),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of c.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);r.addEventListener("click",e=>{e.target===r&&f()}),window.addEventListener("keydown",m),null===(o=c.querySelector("[data-one-close]"))||void 0===o||o.focus()}function d(){var e;null===(e=document.getElementById(s))||void 0===e||e.remove()}function u(){return document.getElementById(c)}let p=!1;const h=e=>{var t;let n=null,o=!1;const s=null!==(t=e.mode)&&void 0!==t?t:"redirect",h=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},f=()=>{"undefined"!=typeof window&&n&&(window.removeEventListener("message",n),n=null),l()},m=(t,n)=>{if(!o){o=!0,f(),"success"===t?a("success",e.appTheme):function(e,t){a("error",e,t)}(e.appTheme,n);try{var i,r;if("success"===t)null===(i=e.onSuccess)||void 0===i||i.call(e);else null===(r=e.onError)||void 0===r||r.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=u();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{f();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const t=u();if(!t)return;let n,o;try{var c,l;n=null!==(c=null===(l=t.contentWindow)||void 0===l?void 0:l.location.href)&&void 0!==c?c:""}catch{return}try{o=new URL(n).searchParams}catch{return}const s=o.get(i);"success"!==s&&"error"!==s||(t.style.visibility="hidden",m(s,null!==(e=o.get(r))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!p){const t=new URLSearchParams(window.location.search),n=t.get(i);if("success"===n||"error"===n){var v;p=!0;const c=null!==(v=t.get(r))&&void 0!==v?v:void 0;t.delete(i),t.delete(r);const l=window.location.pathname+(t.toString()?`?${t.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",l),window.setTimeout(()=>{if(!o){o=!0;try{var t,i;"success"===n?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(i=e.onError)||void 0===i||i.call(e,null!=c?c:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===s)return void window.location.assign(h());o=!1,n=b,window.addEventListener("message",n);(function(e){l();const t=document.createElement("iframe");return t.id=c,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||d(),f()}}},f="one-connect-button-styles",m="cubic-bezier(.2,.9,.25,1)",b={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},g={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},v="#CCFF00",w="#3FE3A5",x="#0A0C0B";const y=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(f))return;const e=document.createElement("style");e.id=f,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${m},box-shadow .2s ${m},opacity .2s ${m}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${w};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${m};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${m},opacity .2s ${m}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?g:b,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let l="idle",s=!1;const a=h({...t.connect,onSuccess:()=>{var e,n;p("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;p("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;p("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==l&&"connected"!==l||(p("connecting"),a.open())});const u=()=>{var e,n,o;const s="accent"===r,a="block"===r,u=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:v:i.btnBg,p=a?i.fg:s?x:i.btnFg,h=a?i.surface:u,f=a?i.muted:p;d.style.background="connected"!==l||a?u:w,d.style.color="connected"!==l||a?p:x,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===l?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:v}38`:i.shadow,d.disabled="connecting"===l,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=x}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=x;c.appendChild(n)}const l=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(l>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${l}`,c.appendChild(e)}return c}(t,h,f);if(a){var b;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(b=t.connectedLabel)&&void 0!==b?b:"Connected":c,e.appendChild(n),"connecting"===l){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===l){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===l){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===l){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const g=document.createElement("span");if(g.className="owcb-label",g.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,d.appendChild(g),"idle"===l){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},p=e=>{s||(l=e,u())};return u(),e.appendChild(d),{setState:p,destroy:()=>{s=!0,a.close({keepResult:!0}),d.remove()}}};function C(o){var i;const r=e(null),c=e(null),l=e({onSuccess:o.onSuccess,onError:o.onError,onClose:o.onClose});l.current={onSuccess:o.onSuccess,onError:o.onError,onClose:o.onClose};const s=JSON.stringify(null!==(i=o.platforms)&&void 0!==i?i:[]);return t(()=>{if(!r.current)return;const e={connect:{authorize:{url:o.authorizeUrl},appTheme:o.appTheme,mode:o.mode,onSuccess:()=>{var e,t;return null===(e=(t=l.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=l.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=l.current).onClose)||void 0===e?void 0:e.call(t)}},label:o.label,variant:o.variant,theme:o.theme,platforms:o.platforms,moreCount:o.moreCount,description:o.description,accentColor:o.accentColor,connectedLabel:o.connectedLabel};return c.current=y(r.current,e),()=>{var e;null===(e=c.current)||void 0===e||e.destroy(),c.current=null}},[o.authorizeUrl,o.appTheme,o.mode,o.label,o.variant,o.theme,s,o.moreCount,o.description,o.accentColor,o.connectedLabel]),n("div",{ref:r,className:o.className,style:o.style})}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),o(this,"onSuccess",null),o(this,"onError",null),o(this,"onClose",null),o(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,l,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const u=this.getAttribute("platforms");if(u)try{const e=JSON.parse(u);Array.isArray(e)&&(d=e)}catch{}const p=this.getAttribute("more-count"),h=p?parseInt(p,10):void 0;this.handle=y(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}o(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();export{C as ConnectButton};
package/dist/svelte.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one-connect-frame";function n(){const e=document.getElementById(t);e&&e.remove()}const o="one-connect-success";function i(e,t,n){var i;r();const c="dark"===t,s=document.createElement("div");s.id=o,Object.assign(s.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=c?"#a1a1aa":"#6b7280",d=c?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=c?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=c?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${c?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${c?"#fafafa":"#111114"};color:${c?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${c?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${c?"#fafafa":"#111114"};">one</span></div>`;const h=l.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),s.appendChild(l),document.body.appendChild(s),requestAnimationFrame(()=>{s.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),s.style.opacity="0",window.setTimeout(()=>s.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);s.addEventListener("click",e=>{e.target===s&&f()}),window.addEventListener("keydown",m),null===(i=l.querySelector("[data-one-close]"))||void 0===i||i.focus()}function r(){var e;null===(e=document.getElementById(o))||void 0===e||e.remove()}function c(){return document.getElementById(t)}const s=e=>{let o=null,s=!1;const l=()=>{"undefined"!=typeof window&&o&&(window.removeEventListener("message",o),o=null),n()},a=(t,n)=>{if(!s){s=!0,l(),"success"===t?i("success",e.appTheme):function(e,t){i("error",e,t)}(e.appTheme,n);try{var o,r;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(r=e.onError)||void 0===r||r.call(e,null!=n?n:"The connection was not completed.")}catch{}}},d=t=>{const n=t.data;if(!n)return;const o=c();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||a(n.status,n.message);else{l();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},p=()=>{var e;const t=c();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const s=o.get("one_connect");"success"!==s&&"error"!==s||(t.style.visibility="hidden",a(s,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;s=!1,o=d,window.addEventListener("message",o);(function(e){n();const o=document.createElement("iframe");return o.id=t,o.src=e,o.setAttribute("allowtransparency","true"),Object.assign(o.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(o),o})((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})()).addEventListener("load",p)},close:e=>{null!=e&&e.keepResult||r(),l()}}},l="one-connect-button-styles",a="cubic-bezier(.2,.9,.25,1)",d={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},p={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},u="#CCFF00",h="#3FE3A5",f="#0A0C0B";const m=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(l))return;const e=document.createElement("style");e.id=l,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${a},box-shadow .2s ${a},opacity .2s ${a}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${h};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${a};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${a},opacity .2s ${a}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?p:d,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let m="idle",b=!1;const g=s({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==m&&"connected"!==m||(x("connecting"),g.open())});const w=()=>{var e,n,o;const s="accent"===r,l="block"===r,a=l?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:u:i.btnBg,d=l?i.fg:s?f:i.btnFg,p=l?i.surface:a,b=l?i.muted:d;v.style.background="connected"!==m||l?a:h,v.style.color="connected"!==m||l?d:f,v.style.boxShadow=l?`inset 0 0 0 1px ${i.line}`:"connected"===m?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:u}38`:i.shadow,v.disabled="connecting"===m,v.innerHTML="";const g=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=f}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=f;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,p,b);if(l){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===m?"Connecting…":"connected"===m?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===m){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(v.appendChild(e),t.description&&"idle"===m){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===m){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===m){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else g&&v.appendChild(g);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===m?"Connecting…":"connected"===m?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===m){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{b||(m=e,w())};return w(),e.appendChild(v),{setState:x,destroy:()=>{b=!0,g.close({keepResult:!0}),v.remove()}}};function b(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const l=this.getAttribute("authorize-url");if(!l)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=m(this,{connect:{authorize:{url:l},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}(),exports.connectButton=function(e,t){let n=m(e,b(t));return{update(t){n.destroy(),n=m(e,b(t))},destroy(){n.destroy()}}};
1
+ "use strict";function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one_connect",n="one_connect_message",o="one-connect-frame";function i(){const e=document.getElementById(o);e&&e.remove()}const r="one-connect-success";function c(e,t,n){var o;l();const i="dark"===t,c=document.createElement("div");c.id=r,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const s=document.createElement("div");Object.assign(s.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";s.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=s.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),c.appendChild(s),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of s.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);c.addEventListener("click",e=>{e.target===c&&f()}),window.addEventListener("keydown",m),null===(o=s.querySelector("[data-one-close]"))||void 0===o||o.focus()}function l(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}function s(){return document.getElementById(o)}let a=!1;const d=e=>{var r;let d=null,p=!1;const u=null!==(r=e.mode)&&void 0!==r?r:"redirect",h=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},f=()=>{"undefined"!=typeof window&&d&&(window.removeEventListener("message",d),d=null),i()},m=(t,n)=>{if(!p){p=!0,f(),"success"===t?c("success",e.appTheme):function(e,t){c("error",e,t)}(e.appTheme,n);try{var o,i;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(i=e.onError)||void 0===i||i.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=s();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{f();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const o=s();if(!o)return;let i,r;try{var c,l;i=null!==(c=null===(l=o.contentWindow)||void 0===l?void 0:l.location.href)&&void 0!==c?c:""}catch{return}try{r=new URL(i).searchParams}catch{return}const a=r.get(t);"success"!==a&&"error"!==a||(o.style.visibility="hidden",m(a,null!==(e=r.get(n))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!a){const o=new URLSearchParams(window.location.search),i=o.get(t);if("success"===i||"error"===i){var v;a=!0;const r=null!==(v=o.get(n))&&void 0!==v?v:void 0;o.delete(t),o.delete(n);const c=window.location.pathname+(o.toString()?`?${o.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",c),window.setTimeout(()=>{if(!p){p=!0;try{var t,n;"success"===i?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(n=e.onError)||void 0===n||n.call(e,null!=r?r:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===u)return void window.location.assign(h());p=!1,d=b,window.addEventListener("message",d);(function(e){i();const t=document.createElement("iframe");return t.id=o,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||l(),f()}}},p="one-connect-button-styles",u="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},f={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},m="#CCFF00",b="#3FE3A5",g="#0A0C0B";const v=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${u},box-shadow .2s ${u},opacity .2s ${u}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${b};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${u};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${u},opacity .2s ${u}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?f:h,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let l="idle",s=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==l&&"connected"!==l||(x("connecting"),a.open())});const w=()=>{var e,n,o;const s="accent"===r,a="block"===r,d=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:m:i.btnBg,p=a?i.fg:s?g:i.btnFg,u=a?i.surface:d,h=a?i.muted:p;v.style.background="connected"!==l||a?d:b,v.style.color="connected"!==l||a?p:g,v.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===l?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:m}38`:i.shadow,v.disabled="connecting"===l,v.innerHTML="";const f=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g;c.appendChild(n)}const l=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(l>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${l}`,c.appendChild(e)}return c}(t,u,h);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===l){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else f&&e.appendChild(f);if(v.appendChild(e),t.description&&"idle"===l){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===l){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===l){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else f&&v.appendChild(f);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===l){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{s||(l=e,w())};return w(),e.appendChild(v),{setState:x,destroy:()=>{s=!0,a.close({keepResult:!0}),v.remove()}}};function w(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,mode:e.mode,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,l,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),h=u?parseInt(u,10):void 0;this.handle=v(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}(),exports.connectButton=function(e,t){let n=v(e,w(t));return{update(t){n.destroy(),n=v(e,w(t))},destroy(){n.destroy()}}};
package/dist/svelte.esm.js CHANGED
@@ -1 +1 @@
1
- function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one-connect-frame";function n(){const e=document.getElementById(t);e&&e.remove()}const o="one-connect-success";function i(e,t,n){var i;r();const c="dark"===t,s=document.createElement("div");s.id=o,Object.assign(s.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=c?"#a1a1aa":"#6b7280",d=c?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=c?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=c?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${c?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${c?"#fafafa":"#111114"};color:${c?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${c?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${c?"#fafafa":"#111114"};">one</span></div>`;const h=l.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),s.appendChild(l),document.body.appendChild(s),requestAnimationFrame(()=>{s.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),s.style.opacity="0",window.setTimeout(()=>s.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);s.addEventListener("click",e=>{e.target===s&&f()}),window.addEventListener("keydown",m),null===(i=l.querySelector("[data-one-close]"))||void 0===i||i.focus()}function r(){var e;null===(e=document.getElementById(o))||void 0===e||e.remove()}function c(){return document.getElementById(t)}const s=e=>{let o=null,s=!1;const l=()=>{"undefined"!=typeof window&&o&&(window.removeEventListener("message",o),o=null),n()},a=(t,n)=>{if(!s){s=!0,l(),"success"===t?i("success",e.appTheme):function(e,t){i("error",e,t)}(e.appTheme,n);try{var o,r;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(r=e.onError)||void 0===r||r.call(e,null!=n?n:"The connection was not completed.")}catch{}}},d=t=>{const n=t.data;if(!n)return;const o=c();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||a(n.status,n.message);else{l();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},p=()=>{var e;const t=c();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const s=o.get("one_connect");"success"!==s&&"error"!==s||(t.style.visibility="hidden",a(s,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;s=!1,o=d,window.addEventListener("message",o);(function(e){n();const o=document.createElement("iframe");return o.id=t,o.src=e,o.setAttribute("allowtransparency","true"),Object.assign(o.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(o),o})((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})()).addEventListener("load",p)},close:e=>{null!=e&&e.keepResult||r(),l()}}},l="one-connect-button-styles",a="cubic-bezier(.2,.9,.25,1)",d={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},p={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},u="#CCFF00",h="#3FE3A5",f="#0A0C0B";const m=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(l))return;const e=document.createElement("style");e.id=l,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${a},box-shadow .2s ${a},opacity .2s ${a}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${h};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${a};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${a},opacity .2s ${a}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?p:d,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let m="idle",b=!1;const g=s({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==m&&"connected"!==m||(x("connecting"),g.open())});const w=()=>{var e,n,o;const s="accent"===r,l="block"===r,a=l?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:u:i.btnBg,d=l?i.fg:s?f:i.btnFg,p=l?i.surface:a,b=l?i.muted:d;v.style.background="connected"!==m||l?a:h,v.style.color="connected"!==m||l?d:f,v.style.boxShadow=l?`inset 0 0 0 1px ${i.line}`:"connected"===m?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:u}38`:i.shadow,v.disabled="connecting"===m,v.innerHTML="";const g=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=f}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=f;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,p,b);if(l){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===m?"Connecting…":"connected"===m?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===m){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(v.appendChild(e),t.description&&"idle"===m){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===m){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===m){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else g&&v.appendChild(g);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===m?"Connecting…":"connected"===m?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===m){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{b||(m=e,w())};return w(),e.appendChild(v),{setState:x,destroy:()=>{b=!0,g.close({keepResult:!0}),v.remove()}}};function b(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}function g(e,t){let n=m(e,b(t));return{update(t){n.destroy(),n=m(e,b(t))},destroy(){n.destroy()}}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const l=this.getAttribute("authorize-url");if(!l)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=m(this,{connect:{authorize:{url:l},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}();export{g as connectButton};
1
+ function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one_connect",n="one_connect_message",o="one-connect-frame";function i(){const e=document.getElementById(o);e&&e.remove()}const r="one-connect-success";function c(e,t,n){var o;l();const i="dark"===t,c=document.createElement("div");c.id=r,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const s=document.createElement("div");Object.assign(s.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";s.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=s.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),c.appendChild(s),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of s.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);c.addEventListener("click",e=>{e.target===c&&f()}),window.addEventListener("keydown",m),null===(o=s.querySelector("[data-one-close]"))||void 0===o||o.focus()}function l(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}function s(){return document.getElementById(o)}let a=!1;const d=e=>{var r;let d=null,p=!1;const u=null!==(r=e.mode)&&void 0!==r?r:"redirect",h=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},f=()=>{"undefined"!=typeof window&&d&&(window.removeEventListener("message",d),d=null),i()},m=(t,n)=>{if(!p){p=!0,f(),"success"===t?c("success",e.appTheme):function(e,t){c("error",e,t)}(e.appTheme,n);try{var o,i;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(i=e.onError)||void 0===i||i.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=s();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{f();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const o=s();if(!o)return;let i,r;try{var c,l;i=null!==(c=null===(l=o.contentWindow)||void 0===l?void 0:l.location.href)&&void 0!==c?c:""}catch{return}try{r=new URL(i).searchParams}catch{return}const a=r.get(t);"success"!==a&&"error"!==a||(o.style.visibility="hidden",m(a,null!==(e=r.get(n))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!a){const o=new URLSearchParams(window.location.search),i=o.get(t);if("success"===i||"error"===i){var v;a=!0;const r=null!==(v=o.get(n))&&void 0!==v?v:void 0;o.delete(t),o.delete(n);const c=window.location.pathname+(o.toString()?`?${o.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",c),window.setTimeout(()=>{if(!p){p=!0;try{var t,n;"success"===i?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(n=e.onError)||void 0===n||n.call(e,null!=r?r:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===u)return void window.location.assign(h());p=!1,d=b,window.addEventListener("message",d);(function(e){i();const t=document.createElement("iframe");return t.id=o,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||l(),f()}}},p="one-connect-button-styles",u="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},f={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},m="#CCFF00",b="#3FE3A5",g="#0A0C0B";const v=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${u},box-shadow .2s ${u},opacity .2s ${u}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${b};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${u};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${u},opacity .2s ${u}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?f:h,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let l="idle",s=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==l&&"connected"!==l||(x("connecting"),a.open())});const w=()=>{var e,n,o;const s="accent"===r,a="block"===r,d=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:m:i.btnBg,p=a?i.fg:s?g:i.btnFg,u=a?i.surface:d,h=a?i.muted:p;v.style.background="connected"!==l||a?d:b,v.style.color="connected"!==l||a?p:g,v.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===l?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:m}38`:i.shadow,v.disabled="connecting"===l,v.innerHTML="";const f=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g;c.appendChild(n)}const l=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(l>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${l}`,c.appendChild(e)}return c}(t,u,h);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===l){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else f&&e.appendChild(f);if(v.appendChild(e),t.description&&"idle"===l){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===l){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===l){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else f&&v.appendChild(f);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===l){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{s||(l=e,w())};return w(),e.appendChild(v),{setState:x,destroy:()=>{s=!0,a.close({keepResult:!0}),v.remove()}}};function w(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,mode:e.mode,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}function x(e,t){let n=v(e,w(t));return{update(t){n.destroy(),n=v(e,w(t))},destroy(){n.destroy()}}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,l,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),h=u?parseInt(u,10):void 0;this.handle=v(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}();export{x as connectButton};
package/dist/types/index.d.ts CHANGED
@@ -15,6 +15,14 @@ export interface OneConnectResult {
15
15
  }
16
16
 
17
17
  export interface OneConnectProps {
18
+ /**
19
+ * "redirect" (default): the flow opens FULL-PAGE in the same tab on
20
+ * One's hosted connect domain — first-party cookies, every browser.
21
+ * The user returns via the app's own callback redirect; the SDK
22
+ * detects `?one_connect=…` on the next page load, fires the callback
23
+ * and shows the result card. "modal": the legacy in-page iframe.
24
+ */
25
+ mode?: "redirect" | "modal";
18
26
  /**
19
27
  * The consumer's OWN backend route that starts the flow. It must
20
28
  * generate `state` + PKCE, set them in an httpOnly cookie, and 302
package/dist/vue.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("vue");function t(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const n="one-connect-frame";function o(){const e=document.getElementById(n);e&&e.remove()}const i="one-connect-success";function r(e,t,n){var o;c();const r="dark"===t,l=document.createElement("div");l.id=i,Object.assign(l.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const s=document.createElement("div");Object.assign(s.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=r?"#a1a1aa":"#6b7280",d=r?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=r?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=r?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";s.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${r?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${r?"#fafafa":"#111114"};color:${r?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${r?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${r?"#fafafa":"#111114"};">one</span></div>`;const f=s.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),l.appendChild(s),document.body.appendChild(l),requestAnimationFrame(()=>{l.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),l.style.opacity="0",window.setTimeout(()=>l.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of s.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);l.addEventListener("click",e=>{e.target===l&&h()}),window.addEventListener("keydown",m),null===(o=s.querySelector("[data-one-close]"))||void 0===o||o.focus()}function c(){var e;null===(e=document.getElementById(i))||void 0===e||e.remove()}function l(){return document.getElementById(n)}const s=e=>{let t=null,i=!1;const s=()=>{"undefined"!=typeof window&&t&&(window.removeEventListener("message",t),t=null),o()},a=(t,n)=>{if(!i){i=!0,s(),"success"===t?r("success",e.appTheme):function(e,t){r("error",e,t)}(e.appTheme,n);try{var o,c;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(c=e.onError)||void 0===c||c.call(e,null!=n?n:"The connection was not completed.")}catch{}}},d=t=>{const n=t.data;if(!n)return;const o=l();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||a(n.status,n.message);else{s();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},p=()=>{var e;const t=l();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const c=o.get("one_connect");"success"!==c&&"error"!==c||(t.style.visibility="hidden",a(c,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;i=!1,t=d,window.addEventListener("message",t);(function(e){o();const t=document.createElement("iframe");return t.id=n,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})()).addEventListener("load",p)},close:e=>{null!=e&&e.keepResult||c(),s()}}},a="one-connect-button-styles",d="cubic-bezier(.2,.9,.25,1)",p={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},u={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},f="#CCFF00",h="#3FE3A5",m="#0A0C0B";const b=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(a))return;const e=document.createElement("style");e.id=a,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${d},box-shadow .2s ${d},opacity .2s ${d}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${h};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${d};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${d},opacity .2s ${d}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?u:p,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let l="idle",b=!1;const g=s({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==l&&"connected"!==l||(y("connecting"),g.open())});const w=()=>{var e,n,o;const s="accent"===r,a="block"===r,d=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:f:i.btnBg,p=a?i.fg:s?m:i.btnFg,u=a?i.surface:d,b=a?i.muted:p;v.style.background="connected"!==l||a?d:h,v.style.color="connected"!==l||a?p:m,v.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===l?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:f}38`:i.shadow,v.disabled="connecting"===l,v.innerHTML="";const g=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m;c.appendChild(n)}const l=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(l>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${l}`,c.appendChild(e)}return c}(t,u,b);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===l){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else g&&e.appendChild(g);if(v.appendChild(e),t.description&&"idle"===l){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===l){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===l){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else g&&v.appendChild(g);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(y),"idle"===l){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},y=e=>{b||(l=e,w())};return w(),e.appendChild(v),{setState:y,destroy:()=>{b=!0,g.close({keepResult:!0}),v.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),t(this,"onSuccess",null),t(this,"onError",null),t(this,"onClose",null),t(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=b(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}t(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();const g=e.defineComponent({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},appTheme:{type:String,default:void 0},label:{type:String,default:void 0},variant:{type:String,default:void 0},theme:{type:String,default:void 0},platforms:{type:Array,default:void 0},moreCount:{type:Number,default:void 0},description:{type:String,default:void 0},accentColor:{type:String,default:void 0},connectedLabel:{type:String,default:void 0}},emits:["success","error","close"],setup(t,{emit:n}){const o=e.ref(null);let i=null;const r=()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null,o.value&&(i=b(o.value,function(e,t){const n=null!=t?t:e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}({...t},{onSuccess:()=>n("success"),onError:e=>n("error",e),onClose:()=>n("close")})))};return e.onMounted(r),e.watch(()=>{var e;return[t.authorizeUrl,t.appTheme,t.label,t.variant,t.theme,JSON.stringify(null!==(e=t.platforms)&&void 0!==e?e:[]),t.moreCount,t.description,t.accentColor,t.connectedLabel]},r),e.onBeforeUnmount(()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null}),()=>e.h("div",{ref:o})}});exports.ConnectButton=g;
1
+ "use strict";var e=require("vue");function t(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const n="one_connect",o="one_connect_message",i="one-connect-frame";function r(){const e=document.getElementById(i);e&&e.remove()}const l="one-connect-success";function c(e,t,n){var o;s();const i="dark"===t,r=document.createElement("div");r.id=l,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const c=document.createElement("div");Object.assign(c.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";c.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const f=c.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(c),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of c.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);r.addEventListener("click",e=>{e.target===r&&h()}),window.addEventListener("keydown",m),null===(o=c.querySelector("[data-one-close]"))||void 0===o||o.focus()}function s(){var e;null===(e=document.getElementById(l))||void 0===e||e.remove()}function a(){return document.getElementById(i)}let d=!1;const p=e=>{var t;let l=null,p=!1;const u=null!==(t=e.mode)&&void 0!==t?t:"redirect",f=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},h=()=>{"undefined"!=typeof window&&l&&(window.removeEventListener("message",l),l=null),r()},m=(t,n)=>{if(!p){p=!0,h(),"success"===t?c("success",e.appTheme):function(e,t){c("error",e,t)}(e.appTheme,n);try{var o,i;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(i=e.onError)||void 0===i||i.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=a();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{h();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},v=()=>{var e;const t=a();if(!t)return;let i,r;try{var l,c;i=null!==(l=null===(c=t.contentWindow)||void 0===c?void 0:c.location.href)&&void 0!==l?l:""}catch{return}try{r=new URL(i).searchParams}catch{return}const s=r.get(n);"success"!==s&&"error"!==s||(t.style.visibility="hidden",m(s,null!==(e=r.get(o))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!d){const t=new URLSearchParams(window.location.search),i=t.get(n);if("success"===i||"error"===i){var g;d=!0;const r=null!==(g=t.get(o))&&void 0!==g?g:void 0;t.delete(n),t.delete(o);const l=window.location.pathname+(t.toString()?`?${t.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",l),window.setTimeout(()=>{if(!p){p=!0;try{var t,n;"success"===i?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(n=e.onError)||void 0===n||n.call(e,null!=r?r:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===u)return void window.location.assign(f());p=!1,l=b,window.addEventListener("message",l);(function(e){r();const t=document.createElement("iframe");return t.id=i,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(f()).addEventListener("load",v)},close:e=>{null!=e&&e.keepResult||s(),h()}}},u="one-connect-button-styles",f="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},m={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},b="#CCFF00",v="#3FE3A5",g="#0A0C0B";const w=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(u))return;const e=document.createElement("style");e.id=u,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${f},box-shadow .2s ${f},opacity .2s ${f}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${v};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${f};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${f},opacity .2s ${f}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?m:h,r=null!==(n=t.variant)&&void 0!==n?n:"default",l=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let c="idle",s=!1;const a=p({...t.connect,onSuccess:()=>{var e,n;y("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;y("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;y("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==c&&"connected"!==c||(y("connecting"),a.open())});const w=()=>{var e,n,o;const s="accent"===r,a="block"===r,p=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:b:i.btnBg,u=a?i.fg:s?g:i.btnFg,f=a?i.surface:p,h=a?i.muted:u;d.style.background="connected"!==c||a?p:v,d.style.color="connected"!==c||a?u:g,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===c?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:b}38`:i.shadow,d.disabled="connecting"===c,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g;l.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,l.appendChild(e)}return l}(t,f,h);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":l,e.appendChild(n),"connecting"===c){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===c){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===c){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===c){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const y=document.createElement("span");if(y.className="owcb-label",y.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":l,d.appendChild(y),"idle"===c){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},y=e=>{s||(c=e,w())};return w(),e.appendChild(d),{setState:y,destroy:()=>{s=!0,a.close({keepResult:!0}),d.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),t(this,"onSuccess",null),t(this,"onError",null),t(this,"onClose",null),t(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,l,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),f=u?parseInt(u,10):void 0;this.handle=w(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(f)?f:void 0,description:null!==(l=this.getAttribute("description"))&&void 0!==l?l:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}t(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();const y=e.defineComponent({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},appTheme:{type:String,default:void 0},label:{type:String,default:void 0},variant:{type:String,default:void 0},theme:{type:String,default:void 0},platforms:{type:Array,default:void 0},moreCount:{type:Number,default:void 0},description:{type:String,default:void 0},accentColor:{type:String,default:void 0},connectedLabel:{type:String,default:void 0}},emits:["success","error","close"],setup(t,{emit:n}){const o=e.ref(null);let i=null;const r=()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null,o.value&&(i=w(o.value,function(e,t){const n=null!=t?t:e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,mode:e.mode,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}({...t},{onSuccess:()=>n("success"),onError:e=>n("error",e),onClose:()=>n("close")})))};return e.onMounted(r),e.watch(()=>{var e;return[t.authorizeUrl,t.appTheme,t.label,t.variant,t.theme,JSON.stringify(null!==(e=t.platforms)&&void 0!==e?e:[]),t.moreCount,t.description,t.accentColor,t.connectedLabel]},r),e.onBeforeUnmount(()=>{var e;null===(e=i)||void 0===e||e.destroy(),i=null}),()=>e.h("div",{ref:o})}});exports.ConnectButton=y;
package/dist/vue.esm.js CHANGED
@@ -1 +1 @@
1
- import{defineComponent as e,ref as t,onMounted as n,watch as o,onBeforeUnmount as i,h as r}from"vue";function l(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const c="one-connect-frame";function s(){const e=document.getElementById(c);e&&e.remove()}const a="one-connect-success";function d(e,t,n){var o;p();const i="dark"===t,r=document.createElement("div");r.id=a,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const c=i?"#a1a1aa":"#6b7280",s=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",d=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${s};border:1px solid ${d};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${c};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${c};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${d};border-top:0;">`+`<span style="font-size:11px;color:${c};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const f=l.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(l),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);r.addEventListener("click",e=>{e.target===r&&h()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function p(){var e;null===(e=document.getElementById(a))||void 0===e||e.remove()}function u(){return document.getElementById(c)}const f=e=>{let t=null,n=!1;const o=()=>{"undefined"!=typeof window&&t&&(window.removeEventListener("message",t),t=null),s()},i=(t,i)=>{if(!n){n=!0,o(),"success"===t?d("success",e.appTheme):function(e,t){d("error",e,t)}(e.appTheme,i);try{var r,l;if("success"===t)null===(r=e.onSuccess)||void 0===r||r.call(e);else null===(l=e.onError)||void 0===l||l.call(e,null!=i?i:"The connection was not completed.")}catch{}}},r=t=>{const n=t.data;if(!n)return;const r=u();if(r&&t.source===r.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||i(n.status,n.message);else{o();try{var l;null===(l=e.onClose)||void 0===l||l.call(e)}catch{}}},l=()=>{var e;const t=u();if(!t)return;let n,o;try{var r,l;n=null!==(r=null===(l=t.contentWindow)||void 0===l?void 0:l.location.href)&&void 0!==r?r:""}catch{return}try{o=new URL(n).searchParams}catch{return}const c=o.get("one_connect");"success"!==c&&"error"!==c||(t.style.visibility="hidden",i(c,null!==(e=o.get("one_connect_message"))&&void 0!==e?e:void 0))};return{open:()=>{if("undefined"==typeof window)return;n=!1,t=r,window.addEventListener("message",t);(function(e){s();const t=document.createElement("iframe");return t.id=c,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})()).addEventListener("load",l)},close:e=>{null!=e&&e.keepResult||p(),o()}}},h="one-connect-button-styles",m="cubic-bezier(.2,.9,.25,1)",b={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},g={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},v="#CCFF00",w="#3FE3A5",y="#0A0C0B";const x=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(h))return;const e=document.createElement("style");e.id=h,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${m},box-shadow .2s ${m},opacity .2s ${m}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${w};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${m};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${m},opacity .2s ${m}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?g:b,r=null!==(n=t.variant)&&void 0!==n?n:"default",l=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let c="idle",s=!1;const a=f({...t.connect,onSuccess:()=>{var e,n;u("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;u("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;u("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==c&&"connected"!==c||(u("connecting"),a.open())});const p=()=>{var e,n,o;const s="accent"===r,a="block"===r,p=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:v:i.btnBg,u=a?i.fg:s?y:i.btnFg,f=a?i.surface:p,h=a?i.muted:u;d.style.background="connected"!==c||a?p:w,d.style.color="connected"!==c||a?u:y,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===c?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:v}38`:i.shadow,d.disabled="connecting"===c,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=y}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=y;l.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,l.appendChild(e)}return l}(t,f,h);if(a){var b;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(b=t.connectedLabel)&&void 0!==b?b:"Connected":l,e.appendChild(n),"connecting"===c){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===c){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===c){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===c){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const g=document.createElement("span");if(g.className="owcb-label",g.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":l,d.appendChild(g),"idle"===c){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},u=e=>{s||(c=e,p())};return p(),e.appendChild(d),{setState:u,destroy:()=>{s=!0,a.close({keepResult:!0}),d.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),l(this,"onSuccess",null),l(this,"onError",null),l(this,"onClose",null),l(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,l,c;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=x(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(c=this.getAttribute("connected-label"))&&void 0!==c?c:void 0})}}l(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();const C=e({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},appTheme:{type:String,default:void 0},label:{type:String,default:void 0},variant:{type:String,default:void 0},theme:{type:String,default:void 0},platforms:{type:Array,default:void 0},moreCount:{type:Number,default:void 0},description:{type:String,default:void 0},accentColor:{type:String,default:void 0},connectedLabel:{type:String,default:void 0}},emits:["success","error","close"],setup(e,{emit:l}){const c=t(null);let s=null;const a=()=>{var t;null===(t=s)||void 0===t||t.destroy(),s=null,c.value&&(s=x(c.value,function(e,t){const n=null!=t?t:e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}({...e},{onSuccess:()=>l("success"),onError:e=>l("error",e),onClose:()=>l("close")})))};return n(a),o(()=>{var t;return[e.authorizeUrl,e.appTheme,e.label,e.variant,e.theme,JSON.stringify(null!==(t=e.platforms)&&void 0!==t?t:[]),e.moreCount,e.description,e.accentColor,e.connectedLabel]},a),i(()=>{var e;null===(e=s)||void 0===e||e.destroy(),s=null}),()=>r("div",{ref:c})}});export{C as ConnectButton};
1
+ import{defineComponent as e,ref as t,onMounted as n,watch as o,onBeforeUnmount as i,h as r}from"vue";function l(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const c="one_connect",s="one_connect_message",a="one-connect-frame";function d(){const e=document.getElementById(a);e&&e.remove()}const p="one-connect-success";function u(e,t,n){var o;f();const i="dark"===t,r=document.createElement("div");r.id=p,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const c=i?"#a1a1aa":"#6b7280",s=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",a=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",d=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${s};border:1px solid ${a};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${c};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${c};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${d};border:1px solid ${a};border-top:0;">`+`<span style="font-size:11px;color:${c};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const u=l.querySelector("[data-one-result-body]");u&&(u.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(l),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);r.addEventListener("click",e=>{e.target===r&&h()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function f(){var e;null===(e=document.getElementById(p))||void 0===e||e.remove()}function h(){return document.getElementById(a)}let m=!1;const b=e=>{var t;let n=null,o=!1;const i=null!==(t=e.mode)&&void 0!==t?t:"redirect",r=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},l=()=>{"undefined"!=typeof window&&n&&(window.removeEventListener("message",n),n=null),d()},p=(t,n)=>{if(!o){o=!0,l(),"success"===t?u("success",e.appTheme):function(e,t){u("error",e,t)}(e.appTheme,n);try{var i,r;if("success"===t)null===(i=e.onSuccess)||void 0===i||i.call(e);else null===(r=e.onError)||void 0===r||r.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=h();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||p(n.status,n.message);else{l();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},v=()=>{var e;const t=h();if(!t)return;let n,o;try{var i,r;n=null!==(i=null===(r=t.contentWindow)||void 0===r?void 0:r.location.href)&&void 0!==i?i:""}catch{return}try{o=new URL(n).searchParams}catch{return}const l=o.get(c);"success"!==l&&"error"!==l||(t.style.visibility="hidden",p(l,null!==(e=o.get(s))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!m){const t=new URLSearchParams(window.location.search),n=t.get(c);if("success"===n||"error"===n){var g;m=!0;const i=null!==(g=t.get(s))&&void 0!==g?g:void 0;t.delete(c),t.delete(s);const r=window.location.pathname+(t.toString()?`?${t.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",r),window.setTimeout(()=>{if(!o){o=!0;try{var t,r;"success"===n?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(r=e.onError)||void 0===r||r.call(e,null!=i?i:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===i)return void window.location.assign(r());o=!1,n=b,window.addEventListener("message",n);(function(e){d();const t=document.createElement("iframe");return t.id=a,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(r()).addEventListener("load",v)},close:e=>{null!=e&&e.keepResult||f(),l()}}},v="one-connect-button-styles",g="cubic-bezier(.2,.9,.25,1)",w={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},y={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},x="#CCFF00",C="#3FE3A5",k="#0A0C0B";const E=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(v))return;const e=document.createElement("style");e.id=v,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${g},box-shadow .2s ${g},opacity .2s ${g}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${C};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${g};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${g},opacity .2s ${g}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?y:w,r=null!==(n=t.variant)&&void 0!==n?n:"default",l=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let c="idle",s=!1;const a=b({...t.connect,onSuccess:()=>{var e,n;u("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;u("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;u("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==c&&"connected"!==c||(u("connecting"),a.open())});const p=()=>{var e,n,o;const s="accent"===r,a="block"===r,p=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:x:i.btnBg,u=a?i.fg:s?k:i.btnFg,f=a?i.surface:p,h=a?i.muted:u;d.style.background="connected"!==c||a?p:C,d.style.color="connected"!==c||a?u:k,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===c?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:x}38`:i.shadow,d.disabled="connecting"===c,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=k}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=k;l.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,l.appendChild(e)}return l}(t,f,h);if(a){var b;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(b=t.connectedLabel)&&void 0!==b?b:"Connected":l,e.appendChild(n),"connecting"===c){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===c){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===c){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===c){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const v=document.createElement("span");if(v.className="owcb-label",v.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":l,d.appendChild(v),"idle"===c){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},u=e=>{s||(c=e,p())};return p(),e.appendChild(d),{setState:u,destroy:()=>{s=!0,a.close({keepResult:!0}),d.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),l(this,"onSuccess",null),l(this,"onError",null),l(this,"onClose",null),l(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,l,c,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),f=u?parseInt(u,10):void 0;this.handle=E(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(f)?f:void 0,description:null!==(l=this.getAttribute("description"))&&void 0!==l?l:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}l(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();const S=e({name:"OneConnectButton",props:{authorizeUrl:{type:String,required:!0},appTheme:{type:String,default:void 0},label:{type:String,default:void 0},variant:{type:String,default:void 0},theme:{type:String,default:void 0},platforms:{type:Array,default:void 0},moreCount:{type:Number,default:void 0},description:{type:String,default:void 0},accentColor:{type:String,default:void 0},connectedLabel:{type:String,default:void 0}},emits:["success","error","close"],setup(e,{emit:l}){const c=t(null);let s=null;const a=()=>{var t;null===(t=s)||void 0===t||t.destroy(),s=null,c.value&&(s=E(c.value,function(e,t){const n=null!=t?t:e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,mode:e.mode,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}({...e},{onSuccess:()=>l("success"),onError:e=>l("error",e),onClose:()=>l("close")})))};return n(a),o(()=>{var t;return[e.authorizeUrl,e.appTheme,e.label,e.variant,e.theme,JSON.stringify(null!==(t=e.platforms)&&void 0!==t?t:[]),e.moreCount,e.description,e.accentColor,e.connectedLabel]},a),i(()=>{var e;null===(e=s)||void 0===e||e.destroy(),s=null}),()=>r("div",{ref:c})}});export{S as ConnectButton};
package/dist/wrapper-options.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { ConnectButtonOptions, ConnectButtonPlatform } from "./types";
4
4
  * the core mountConnectButton options. */
5
5
  export interface ConnectButtonWrapperProps {
6
6
  authorizeUrl: string;
7
+ mode?: "redirect" | "modal";
7
8
  appTheme?: "light" | "dark";
8
9
  onSuccess?: () => void;
9
10
  onError?: (error: string) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withone/connect",
3
- "version": "0.6.2",
3
+ "version": "0.7.1",
4
4
  "description": "Frontend bindings for One Connect, a drop-in OAuth flow that lets your users grant your application scoped, revocable access to their own connected tools. The user owns the connections; you hold a token scoped to exactly what they granted.",
5
5
  "files": [
6
6
  "dist",
package/src/button.ts CHANGED
@@ -325,6 +325,7 @@ export function registerConnectButton(): void {
325
325
  static observedAttributes = [
326
326
  "authorize-url",
327
327
  "app-theme",
328
+ "mode",
328
329
  "label",
329
330
  "variant",
330
331
  "theme",
@@ -380,6 +381,9 @@ export function registerConnectButton(): void {
380
381
  appTheme:
381
382
  (this.getAttribute("app-theme") as "light" | "dark" | null) ??
382
383
  undefined,
384
+ mode:
385
+ (this.getAttribute("mode") as "redirect" | "modal" | null) ??
386
+ undefined,
383
387
  onSuccess: () => {
384
388
  this.onSuccess?.();
385
389
  this.dispatchEvent(new CustomEvent("success"));
package/src/react-types.d.ts CHANGED
@@ -5,6 +5,7 @@ import type { ConnectButtonPlatform } from "./types";
5
5
  export interface ConnectButtonProps {
6
6
  authorizeUrl: string;
7
7
  appTheme?: "light" | "dark";
8
+ mode?: "redirect" | "modal";
8
9
  onSuccess?: () => void;
9
10
  onError?: (error: string) => void;
10
11
  onClose?: () => void;
package/src/react.ts CHANGED
@@ -22,6 +22,8 @@ export interface ConnectButtonProps {
22
22
  authorizeUrl: string;
23
23
  /** Theme for One's card (rides the URL fragment). */
24
24
  appTheme?: "light" | "dark";
25
+ /** "redirect" (default, full-page hosted flow) or "modal" (legacy iframe). */
26
+ mode?: "redirect" | "modal";
25
27
  onSuccess?: () => void;
26
28
  onError?: (error: string) => void;
27
29
  onClose?: () => void;
@@ -62,6 +64,7 @@ export function ConnectButton(props: ConnectButtonProps): ReactElement {
62
64
  connect: {
63
65
  authorize: { url: props.authorizeUrl },
64
66
  appTheme: props.appTheme,
67
+ mode: props.mode,
65
68
  onSuccess: () => callbacksRef.current.onSuccess?.(),
66
69
  onError: (error) => callbacksRef.current.onError?.(error),
67
70
  onClose: () => callbacksRef.current.onClose?.(),
@@ -85,6 +88,7 @@ export function ConnectButton(props: ConnectButtonProps): ReactElement {
85
88
  }, [
86
89
  props.authorizeUrl,
87
90
  props.appTheme,
91
+ props.mode,
88
92
  props.label,
89
93
  props.variant,
90
94
  props.theme,
package/src/svelte-types.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { ConnectButtonPlatform } from "./types";
4
4
  export interface ConnectButtonProps {
5
5
  authorizeUrl: string;
6
6
  appTheme?: "light" | "dark";
7
+ mode?: "redirect" | "modal";
7
8
  onSuccess?: () => void;
8
9
  onError?: (error: string) => void;
9
10
  onClose?: () => void;
package/src/types/index.d.ts CHANGED
@@ -15,6 +15,14 @@ export interface OneConnectResult {
15
15
  }
16
16
 
17
17
  export interface OneConnectProps {
18
+ /**
19
+ * "redirect" (default): the flow opens FULL-PAGE in the same tab on
20
+ * One's hosted connect domain — first-party cookies, every browser.
21
+ * The user returns via the app's own callback redirect; the SDK
22
+ * detects `?one_connect=…` on the next page load, fires the callback
23
+ * and shows the result card. "modal": the legacy in-page iframe.
24
+ */
25
+ mode?: "redirect" | "modal";
18
26
  /**
19
27
  * The consumer's OWN backend route that starts the flow. It must
20
28
  * generate `state` + PKCE, set them in an httpOnly cookie, and 302
package/src/useOneConnect.ts CHANGED
@@ -21,9 +21,15 @@ import type {
21
21
 
22
22
  // Like useOneAuth, this is a plain function rather than a React hook so
23
23
  // it works from any framework.
24
+
25
+ /** The return leg is a page LOAD (redirect mode) — only the first hook
26
+ * instance on the page consumes it. */
27
+ let returnConsumed = false;
28
+
24
29
  export const useOneConnect = (props: OneConnectProps): OneConnectHandle => {
25
30
  let messageHandler: ((event: MessageEvent) => void) | null = null;
26
31
  let resultDelivered = false;
32
+ const mode = props.mode ?? "redirect";
27
33
 
28
34
  // The theme rides in the URL FRAGMENT: fragments never reach any
29
35
  // server and browsers carry them through the whole redirect chain
@@ -132,6 +138,14 @@ export const useOneConnect = (props: OneConnectProps): OneConnectHandle => {
132
138
 
133
139
  const open = () => {
134
140
  if (typeof window === "undefined") return;
141
+ if (mode === "redirect") {
142
+ // Full-page hosted flow, Stripe-Checkout style: same tab, One's
143
+ // own domain (first-party — works in every browser). The app's
144
+ // callback redirect brings the user home; detection below picks
145
+ // it up on the next load.
146
+ window.location.assign(buildUrl());
147
+ return;
148
+ }
135
149
  resultDelivered = false;
136
150
 
137
151
  messageHandler = handleMessage;
@@ -150,5 +164,42 @@ export const useOneConnect = (props: OneConnectProps): OneConnectHandle => {
150
164
  teardown();
151
165
  };
152
166
 
167
+ // Redirect-mode return detection: the app's callback redirected the
168
+ // TAB to a URL carrying ?one_connect=… — deliver it once, scrub the
169
+ // params so a refresh doesn't re-fire, and paint the result card.
170
+ if (typeof window !== "undefined" && !returnConsumed) {
171
+ const search = new URLSearchParams(window.location.search);
172
+ const returnStatus = search.get(RETURN_STATUS_PARAM);
173
+ if (returnStatus === "success" || returnStatus === "error") {
174
+ returnConsumed = true;
175
+ const returnMessage = search.get(RETURN_MESSAGE_PARAM) ?? undefined;
176
+ search.delete(RETURN_STATUS_PARAM);
177
+ search.delete(RETURN_MESSAGE_PARAM);
178
+ const clean =
179
+ window.location.pathname +
180
+ (search.toString() ? `?${search.toString()}` : "") +
181
+ window.location.hash;
182
+ window.history.replaceState(null, "", clean);
183
+ // No overlay here: in redirect mode One's HOSTED page already
184
+ // showed the result beat ("You're all set" + countdown / the
185
+ // failure screen) before sending the user home — painting a
186
+ // second card would double-announce. Callbacks still fire so the
187
+ // app updates its own state.
188
+ window.setTimeout(() => {
189
+ if (resultDelivered) return;
190
+ resultDelivered = true;
191
+ try {
192
+ if (returnStatus === "success") props.onSuccess?.();
193
+ else
194
+ props.onError?.(
195
+ returnMessage ?? "The connection was not completed.",
196
+ );
197
+ } catch {
198
+ /* consumer callback errors are not our problem */
199
+ }
200
+ }, 0);
201
+ }
202
+ }
203
+
153
204
  return { open, close };
154
205
  };
package/src/wrapper-options.ts CHANGED
@@ -5,6 +5,7 @@ import type { ConnectButtonOptions, ConnectButtonPlatform } from "./types";
5
5
  * the core mountConnectButton options. */
6
6
  export interface ConnectButtonWrapperProps {
7
7
  authorizeUrl: string;
8
+ mode?: "redirect" | "modal";
8
9
  appTheme?: "light" | "dark";
9
10
  onSuccess?: () => void;
10
11
  onError?: (error: string) => void;
@@ -32,6 +33,7 @@ export function optionsFromWrapperProps(
32
33
  connect: {
33
34
  authorize: { url: props.authorizeUrl },
34
35
  appTheme: props.appTheme,
36
+ mode: props.mode,
35
37
  onSuccess: () => cb.onSuccess?.(),
36
38
  onError: (error) => cb.onError?.(error),
37
39
  onClose: () => cb.onClose?.(),