https://developers.basistheory.com/assets/js/30eb4dee.92462e2b.js

1/*! For license information please see 30eb4dee.92462e2b.js.LICENSE.txt */
2"use strict";(self.webpackChunkdevelopers_basistheory_com=self.webpackChunkdevelopers_basistheory_com||[]).push([[3409],{72615:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>p,frontMatter:()=>l,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"sdks/web/web-elements/v3/custom-domain","title":"Serve Elements from Your Domain","description":"By default, Web Elements load from js.basistheory.com. The SDK script, the element iframes, and the API requests all reference the Basis Theory domain. For most integrations this is exactly what you want \u2014 there is nothing to host and nothing to operate.","source":"@site/docs/sdks/web/web-elements/v3/custom-domain.mdx","sourceDirName":"sdks/web/web-elements/v3","slug":"/sdks/web/web-elements/v3/custom-domain","permalink":"/docs/sdks/web/web-elements/v3/custom-domain","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1790618629000,"frontMatter":{"title":"Serve Elements from Your Domain","sidebar_label":"Custom Domain"},"sidebar":"sdk","previous":{"title":"Security","permalink":"/docs/sdks/web/web-elements/v3/security"},"next":{"title":"Migration Guide","permalink":"/docs/sdks/web/web-elements/v3/migration"}}');var o=n(74848),s=n(28453),i=n(85202),a=n(13187),c=n(83227);const l={title:"Serve Elements from Your Domain",sidebar_label:"Custom Domain"},d="Serve Elements from Your Domain",u={},h=[{value:"How it works",id:"how-it-works",level:2},{value:"Setup",id:"setup",level:2},{value:"1. Request a custom domain",id:"1-request-a-custom-domain",level:3},{value:"2. Add the DNS record",id:"2-add-the-dns-record",level:3},{value:"3. Load the SDK from your domain",id:"3-load-the-sdk-from-your-domain",level:3},{value:"Security",id:"security",level:2},{value:"Serve from a dedicated origin",id:"serve-from-a-dedicated-origin",level:3},{value:"Prefer a cross-site domain",id:"prefer-a-cross-site-domain",level:3},{value:"Subresource Integrity",id:"subresource-integrity",level:3},{value:"Content Security Policy on your page",id:"content-security-policy-on-your-page",level:3},{value:"Things to know",id:"things-to-know",level:2}];function m(e){const t={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"serve-elements-from-your-domain",children:"Serve Elements from Your Domain"})}),"\n",(0,o.jsxs)(t.p,{children:["By default, Web Elements load from ",(0,o.jsx)(t.code,{children:"js.basistheory.com"}),". The SDK script, the element iframes, and the API requests all reference the Basis Theory domain. For most integrations this is exactly what you want \u2014 there is nothing to host and nothing to operate."]}),"\n",(0,o.jsx)(t.p,{children:"Some teams need the SDK to load from their own domain instead. Common reasons:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"A Content Security Policy that is difficult to extend to third-party domains."}),"\n",(0,o.jsx)(t.li,{children:"A requirement that every network request a customer's browser makes stays on the company's own domain."}),"\n",(0,o.jsx)(t.li,{children:"Brand consistency in browser developer tools and network logs."}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:['Custom domain hosting (sometimes called "whitelabeling") serves the SDK and element iframes from a domain you control \u2014 for example ',(0,o.jsx)(t.code,{children:"pay.your-company.com"})," \u2014 while Basis Theory continues to host, secure, and operate everything behind it. Your card data handling and PCI scope do not change: sensitive values are still captured inside Basis Theory-controlled iframes, never by your application."]}),"\n",(0,o.jsx)(i.F,{type:i.W.INFO,children:(0,o.jsxs)(t.p,{children:["Custom domain hosting is a managed capability. Basis Theory provisions and operates the domain routing for you. ",(0,o.jsx)("a",{href:"https://basistheory.com/contact",children:"Contact us"})," to get started."]})}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,o.jsxs)(t.p,{children:["You point a subdomain you own (for example ",(0,o.jsx)(t.code,{children:"pay.your-company.com"}),") at Basis Theory. From the browser's perspective, every part of the integration is served from that one domain:"]}),"\n",(0,o.jsxs)(t.table,{children:[(0,o.jsx)(t.thead,{children:(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.th,{children:"Resource"}),(0,o.jsx)(t.th,{children:"Default"}),(0,o.jsx)(t.th,{children:"On your custom domain"})]})}),(0,o.jsxs)(t.tbody,{children:[(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"Loader and SDK script"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"js.basistheory.com"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"pay.your-company.com"})})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"Element iframes"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"js.basistheory.com"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"pay.your-company.com"})})]}),(0,o.jsxs)(t.tr,{children:[(0,o.jsx)(t.td,{children:"API requests"}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"api.basistheory.com"})}),(0,o.jsx)(t.td,{children:(0,o.jsx)(t.code,{children:"pay.your-company.com/api"})})]})]})]}),"\n",(0,o.jsxs)(t.p,{children:["The SDK adapts to this automatically. The loader script detects the domain it was served from at runtime. When that domain is your custom domain rather than ",(0,o.jsx)(t.code,{children:"js.basistheory.com"}),", the SDK derives the locations of the SDK bundle and the element iframes from your domain, and routes its API calls back through your domain. Basis Theory forwards those requests on to the Basis Theory API behind the scenes."]}),"\n",(0,o.jsxs)(t.p,{children:["This detection is driven entirely by where you load the script from \u2014 so the only change in your application is the script's ",(0,o.jsx)(t.code,{children:"src"}),"."]}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.h2,{id:"setup",children:"Setup"}),"\n",(0,o.jsx)(t.h3,{id:"1-request-a-custom-domain",children:"1. Request a custom domain"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://basistheory.com/contact",children:"Contact us"})," with the subdomain you want to use (for example ",(0,o.jsx)(t.code,{children:"pay.your-company.com"}),"). Basis Theory will set up the domain routing and TLS certificate, and confirm the DNS records you need to add."]}),"\n",(0,o.jsx)(i.F,{type:i.W.WARNING,children:(0,o.jsxs)(t.p,{children:["Use a ",(0,o.jsx)("strong",{children:"dedicated subdomain that runs none of your own application code"}),". See ",(0,o.jsx)("a",{href:"#serve-from-a-dedicated-origin",children:"Serve from a dedicated origin"})," below \u2014 this is a security requirement, not a recommendation."]})}),"\n",(0,o.jsx)(t.h3,{id:"2-add-the-dns-record",children:"2. Add the DNS record"}),"\n",(0,o.jsx)(t.p,{children:"Add the DNS record Basis Theory provides for your subdomain. Once it propagates and the certificate is issued, your subdomain serves the SDK."}),"\n",(0,o.jsx)(t.h3,{id:"3-load-the-sdk-from-your-domain",children:"3. Load the SDK from your domain"}),"\n",(0,o.jsxs)(t.p,{children:["Update your script tag to point at your domain instead of ",(0,o.jsx)(t.code,{children:"js.basistheory.com"}),". Everything else stays the same."]}),"\n",(0,o.jsx)(a.A,{className:"bt-tabs",queryString:"implementation",children:(0,o.jsx)(c.A,{value:"cdn",label:"CDN",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",children:"<script src=\"https://pay.your-company.com/{version}/web-elements/basis-theory.js\"><\/script>\n\n<script>\n  document.addEventListener('DOMContentLoaded', async () => {\n    const bt = window.BasisTheory('<PUBLIC_API_KEY>');\n\n    const cardNumber = bt.createElement('cardNumber');\n    await cardNumber.mount('#card-number-container');\n  });\n<\/script>\n"})})})}),"\n",(0,o.jsxs)(t.p,{children:["That is the entire code change. You do not pass a base URL or any custom domain option to ",(0,o.jsx)(t.code,{children:"BasisTheory()"})," \u2014 initialization is identical to a standard integration. The loader resolves the SDK bundle, the element iframes, and the API base from the domain it was loaded from."]}),"\n",(0,o.jsx)(i.F,{type:i.W.INFO,children:(0,o.jsxs)(t.p,{children:["Custom domain hosting applies to the CDN ",(0,o.jsx)("code",{children:"<script>"})," integration. When you install the SDK from npm, your bundler serves the SDK code and there is no Basis Theory-hosted script to relocate."]})}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.h2,{id:"security",children:"Security"}),"\n",(0,o.jsxs)(t.p,{children:["Custom domain hosting changes where the SDK is served from, so two of the protections described 

2in the ",(0,o.jsx)(t.a,{href:"/docs/sdks/web/web-elements/v3/security",children:"security guide"})," work differently. Read this section before going live."]}),"\n",(0,o.jsx)(t.h3,{id:"serve-from-a-dedicated-origin",children:"Serve from a dedicated origin"}),"\n",(0,o.jsxs)(t.p,{children:["The iframes that capture card data are isolated from your application by the ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy",children:"same-origin policy"}),". That isolation is what guarantees your application's JavaScript cannot read the raw values a user types into an element. On a standard integration the iframes live on ",(0,o.jsx)(t.code,{children:"js.basistheory.com"}),", a different origin from your site, so the isolation is automatic."]}),"\n",(0,o.jsxs)(t.p,{children:["When you serve Elements from your own domain, ",(0,o.jsx)(t.strong,{children:"the element iframes must still live on an origin that runs none of your application code."})," A browser origin is the exact combination of scheme, host, and port \u2014 so ",(0,o.jsx)(t.code,{children:"pay.your-company.com"})," and ",(0,o.jsx)(t.code,{children:"app.your-company.com"})," are different origins, while ",(0,o.jsx)(t.code,{children:"pay.your-company.com/checkout"})," and ",(0,o.jsx)(t.code,{children:"pay.your-company.com/elements"})," are the ",(0,o.jsx)(t.em,{children:"same"})," origin."]}),"\n",(0,o.jsx)(i.F,{type:i.W.WARNING,children:(0,o.jsxs)(t.p,{children:["Do not serve Elements from the same origin that serves your own application. If your site's JavaScript and the element iframes share an origin, the boundary that prevents your code from accessing raw card data is lost \u2014 which can pull your application back into PCI scope. Always use a dedicated subdomain (for example ",(0,o.jsx)("code",{children:"pay.your-company.com"}),") that hosts nothing but Basis Theory Elements."]})}),"\n",(0,o.jsx)(t.p,{children:"Because of this requirement, dedicate the subdomain to Elements. Do not host your checkout page, marketing site, or any first-party scripts on it."}),"\n",(0,o.jsx)(t.h3,{id:"prefer-a-cross-site-domain",children:"Prefer a cross-site domain"}),"\n",(0,o.jsxs)(t.p,{children:["A dedicated subdomain like ",(0,o.jsx)(t.code,{children:"pay.your-company.com"})," is a different ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy",children:"origin"})," from your application \u2014 but if your application also runs under ",(0,o.jsx)(t.code,{children:"your-company.com"})," (for example on ",(0,o.jsx)(t.code,{children:"app.your-company.com"}),"), the two are still the same ",(0,o.jsx)(t.em,{children:"site"}),". They share a registrable domain, and browsers apply cookie and CSRF protections at the site boundary, not the origin boundary. The default ",(0,o.jsx)(t.code,{children:"js.basistheory.com"})," sits outside your site entirely (it is ",(0,o.jsx)(t.em,{children:"cross-site"}),"), so those protections always hold. A subdomain of your own site does not, which weakens your application's own defenses in two ways:"]}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["Cookies scoped with ",(0,o.jsx)(t.code,{children:"Domain=your-company.com"})," are sent to ",(0,o.jsx)(t.code,{children:"pay.your-company.com"}),", and any that are not ",(0,o.jsx)(t.code,{children:"HttpOnly"})," can be read by JavaScript running on that origin."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"SameSite=Lax"})," and ",(0,o.jsx)(t.code,{children:"SameSite=Strict"})," do not restrict requests from ",(0,o.jsx)(t.code,{children:"pay.your-company.com"})," to your application, because same-site requests are not what those attributes guard against."]}),"\n"]}),"\n",(0,o.jsx)(i.F,{type:i.W.WARNING,children:(0,o.jsxs)(t.p,{children:["Prefer a registrable domain that is ",(0,o.jsx)("strong",{children:"cross-site from your application"})," whenever ",(0,o.jsx)("code",{children:"SameSite"})," is what protects you from CSRF. If you must use a subdomain of your application's own site, treat it as a new attack surface on your side of the integration."]})}),"\n",(0,o.jsx)(t.p,{children:"When a subdomain is unavoidable:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["Audit your cookies so no sensitive cookie uses a ",(0,o.jsx)(t.code,{children:"Domain"})," attribute that scopes it to the parent domain (",(0,o.jsx)(t.code,{children:"Domain=your-company.com"}),")."]}),"\n",(0,o.jsxs)(t.li,{children:["Prefer ",(0,o.jsxs)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie#co

2okie_prefixes",children:[(0,o.jsx)(t.code,{children:"__Host-"})," prefixed cookies"]})," for your application's own sessions \u2014 they are locked to a single host and are never sent to subdomains."]}),"\n",(0,o.jsxs)(t.li,{children:["Enforce CSRF protection with explicit tokens or ",(0,o.jsx)(t.code,{children:"Origin"}),"/",(0,o.jsx)(t.code,{children:"Referer"})," validation rather than relying on ",(0,o.jsx)(t.code,{children:"SameSite"})," alone."]}),"\n"]}),"\n",(0,o.jsx)(t.h3,{id:"subresource-integrity",children:"Subresource Integrity"}),"\n",(0,o.jsxs)(t.p,{children:["On a standard integration, the loader verifies the SDK bundle with a ",(0,o.jsx)(t.a,{href:"/docs/sdks/web/web-elements/v3/security#subresource-integrity-sri",children:"Subresource Integrity"})," (SRI) hash baked in at build time, and you can optionally add an ",(0,o.jsx)(t.code,{children:"integrity"})," attribute to the loader ",(0,o.jsx)(t.code,{children:"<script>"})," tag yourself."]}),"\n",(0,o.jsxs)(t.p,{children:["The build-time SRI hash is computed against the bundle as served from ",(0,o.jsx)(t.code,{children:"js.basistheory.com"}),". When the SDK is served from your domain, that hash no longer applies, so ",(0,o.jsx)(t.strong,{children:"the loader does not enforce SRI in custom domain mode."})," Likewise, do not add a static ",(0,o.jsx)(t.code,{children:"integrity"})," attribute to a loader ",(0,o.jsx)(t.code,{children:"<script>"})," tag pointed at your domain \u2014 a published hash for the ",(0,o.jsx)(t.code,{children:"js.basistheory.com"})," bundle will not match, and the browser will refuse to load the script."]}),"\n",(0,o.jsx)(t.p,{children:"Integrity in this mode is provided by two layers instead:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"HTTPS"})," secures the bytes in transit between the browser and your domain."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"Basis Theory-managed delivery"})," serves the verified, unmodified SDK assets through the provisioned domain routing \u2014 the same artifacts published to the CDN."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.a,{href:"/docs/sdks/web/web-elements/v3/security#content-security-policy-csp",children:"hash-based Content Security Policy"})," baked into each element iframe is unaffected and continues to protect the iframe contents exactly as it does on a standard integration."]}),"\n",(0,o.jsx)(t.h3,{id:"content-security-policy-on-your-page",children:"Content Security Policy on your page"}),"\n",(0,o.jsxs)(t.p,{children:["If your application enforces its own Content Security Policy, allow your custom domain where you would otherwise allow ",(0,o.jsx)(t.code,{children:"*.basistheory.com"}),":"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",children:'<meta http-equiv="Content-Security-Policy"\n  content="frame-src https://pay.your-company.com;\n           script-src https://pay.your-company.com;\n           connect-src https://pay.your-company.com" />\n'})}),"\n",(0,o.jsxs)(t.p,{children:["Because the SDK, iframes, and API all resolve to your domain, your CSP can reference a single host. See the ",(0,o.jsx)(t.a,{href:"/docs/sdks/web/web-elements/v3/security#csp-on-your-page",children:"security guide"})," and ",(0,o.jsx)(t.a,{href:"/docs/sdks/web/web-elements/v3/troubleshooting#required-csp-directives",children:"troubleshooting guide"})," for the full list of directives."]}),"\n",(0,o.jsx)(t.hr,{}),"\n",(0,o.jsx)(t.h2,{id:"things-to-know",children:"Things to know"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"PCI scope is unchanged."})," Raw card data is still captured inside Basis Theory-controlled iframes and never touches your application, as long as you follow the ",(0,o.jsx)(t.a,{href:"#serve-from-a-dedicated-origin",children:"dedicated-origin requirement"}),"."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"Versioning works the same way."})," Pin a version in the script path exactly as you would on ",(0,o.jsx)(t.code,{children:"js.basistheory.com"}),". See ",(0,o.jsx)(t.a,{href:"/docs/sdks/web/web-elements/v3/initialization",children:"versioning guidance"}),"."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"The API is reached through your domain."})," Tokenization and other SDK calls route to ",(0,o.jsx)(t.code,{children:"pay.your-company.com/api"})," and are forwarded to the Basis Theory API. You continue to use a ",(0,o.jsx)(t.a,{href:"/docs/sdks/web/web-elements/v3#before-you-begin",children:"Public Application API key"})," \u2014 no additional credentials are required."]}),"\n"]}),"\n",(0,o.jsx)(i.F,{type:i.W.INFO,children:(0,o.jsxs)(t.p,{children:["Ready to set up a custom domain, or want to confirm whether it fits your integration? ",(0,o.jsx)("a",{href:"https://basistheory.com/contact",children:"Contact us"}),"."]})})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},21020:(e,t,n)=>{var r=n(96540),o=Symbol.for("react.element"),s=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,a=r.__SECRET_INT

2ERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,s={},l=null,d=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(d=t.ref),t)i.call(t,r)&&!c.hasOwnProperty(r)&&(s[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===s[r]&&(s[r]=t[r]);return{$$typeof:o,type:e,key:l,ref:d,props:s,_owner:a.current}}t.Fragment=s,t.jsx=l,t.jsxs=l},74848:(e,t,n)=>{e.exports=n(21020)},83227:(e,t,n)=>{n.d(t,{A:()=>i});var r=n(96540),o=n(34164);const s={tabItem:"tabItem_Ymn6"};function i({children:e,hidden:t,className:n}){return r.createElement("div",{role:"tabpanel",className:(0,o.A)(s.tabItem,n),hidden:t},e)}},13187:(e,t,n)=>{n.d(t,{A:()=>E});var r=n(96540),o=n(34164),s=n(23575),i=n(56347),a=n(91648),c=n(62072),l=n(73353),d=n(85831);function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function m(e){var t,n;return null!==(n=null===(t=r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})))||void 0===t?void 0:t.filter(Boolean))&&void 0!==n?n:[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=null!=t?t:function(e){return m(e).map((({props:{value:e,label:t,attributes:n,default:r}})=>({value:e,label:t,attributes:n,default:r})))}(n);return function(e){const t=(0,l.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,n])}function y({value:e,tabValues:t}){return t.some((t=>t.value===e))}function f({queryString:e=!1,groupId:t}){const n=(0,i.W6)(),o=function({queryString:e=!1,groupId:t}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=t?t:null}({queryString:e,groupId:t}),s=(0,c.aZ)(o),a=(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(n.location.search);t.set(o,e),n.replace(h(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){u(e,t,n[t])}))}return e}({},n.location),{search:t.toString()}))}),[o,n]);return[s,a]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:o}=e,s=p(e),[i,c]=(0,r.useState)((()=>function({defaultValue:e,tabValues:t}){if(0===t.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!y({value:e,tabValues:t}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}var n;const r=null!==(n=t.find((e=>e.default)))&&void 0!==n?n:t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s}))),[l,u]=f({queryString:n,groupId:o}),[h,m]=function({groupId:e}){const t=function(e){return e?`docusaurus.tab.${e}`:null}(e),[n,o]=(0,d.Dv)(t);return[n,(0,r.useCallback)((e=>{t&&o.set(e)}

2),[t,o])]}({groupId:o}),b=(()=>{const e=null!=l?l:h;return y({value:e,tabValues:s})?e:null})();(0,a.A)((()=>{b&&c(b)}),[b]);return{selectedValue:i,selectValue:(0,r.useCallback)((e=>{if(!y({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),u(e),m(e)}),[u,m,s]),tabValues:s}}var v=n(52700);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function x(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){g(e,t,n[t])}))}return e}function w(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function S({className:e,block:t,selectedValue:n,selectValue:i,tabValues:a}){const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,s.a_)(),d=e=>{const t=e.currentTarget,r=c.indexOf(t),o=a[r].value;o!==n&&(l(t),i(o))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const r=c.indexOf(e.currentTarget)+1;var n;t=null!==(n=c[r])&&void 0!==n?n:c[0];break}case"ArrowLeft":{const n=c.indexOf(e.currentTarget)-1;var r;t=null!==(r=c[n])&&void 0!==r?r:c[c.length-1];break}}null==t||t.focus()};return r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.A)("tabs",{"tabs--block":t},e)},a.map((({value:e,label:t,attributes:s})=>r.createElement("li",w(x({role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,key:e,ref:e=>{c.push(e)},onKeyDown:u,onClick:d},s),{className:(0,o.A)("tabs__item",j.tabItem,null==s?void 0:s.className,{"tabs__item--active":n===e})}),null!=t?t:e))))}function O({lazy:e,children:t,selectedValue:n}){const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const e=s.find((e=>e.props.value===n));return e?(0,r.cloneElement)(e,{className:(0,o.A)("margin-top--md",e.props.className)}):null}return r.createElement("div",{className:"margin-top--md"},s.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==n}))))}function k(e){const t=b(e);return r.createElement("div",{className:(0,o.A)("tabs-container",j.tabList)},r.createElement(S,x({},t,e)),r.createElement(O,x({},t,e)))}function E(e){const t=(0,v.A)();return r.createElement(k,x({key:String(t)},e),m(e.children))}},85202:(e,t,n)=>{n.d(t,{F:()=>I,W:()=>A});var r=n(34164),o=n(96540);const s="container_ygYU",i="title_KE4f",a="content_mpoX",c="error_YPD5",l="warning_Vv3u",d="info_XpSc",u="success_pFpA",h="neutral_bgLU",m="svg_xN_H";var p;function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},y.apply(null,arguments)}const f=e=>{let{title:t,titleId:n,...r}=e;return o.createElement("svg",y({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":n},r),t?o.createElement("title",{id:n},t):null,p||(p=o.createElement("path",{fill:"#F56C9D",fillRule:"evenodd",d:"M9 1.438A7.557 7.557 0 0 0 1.438 9 7.557 7.557 0 0 0 9 16.563 7.56 7.56 0 0 0 16.563 9 7.56 7.56 0 0 0 9 1.438M.063 9A8.93 8.93 0 0 1 9 .063 8.937 8.937 0 0 1 17.938 9 8.937 8.937 0 0 1 9 17.938 8.93 8.93 0 0 1 .063 9M9 4.188c.38 0 .688.307.688.687v4.583a.687.687 0 1 1-1.376 0V4.875c0-.38.308-.687.688-.687m-.006 7.791H9q.034 0 .067.003c.444.038.85.4.85.914 0 .27-.122.496-.272.645a.92.92 0 0 1-.645.271.92.92 0 0 1-.917-.916.914.914 0 0 1 .908-.917z",clipRule:"evenodd"})))};var b,v;function j(){return j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},j.apply(null,arguments)}const g=e=>{let{title:t,titleId:n,...r}=e;return o.createElement("svg",j({xmlns:"http://www.w3.org/2000/svg",width:20,height:18,fill:"none",viewBox:"0 0 20 18","aria-labelledby":n},r),t?o.createElement("title",{id:n},t):null,b||(b=o.createElement("path",{fill:"#FFA726",fillRule:"evenodd",d:"M7.656 1.614c1.04-1.809 3.649-1.809 4.689 0l7.055 12.27c1.037 1.803-.264 4.053-2.344 4.053H2.945c-2.08 0-3.381-2.25-2.345-4.052zm3.497.685a1.33 1.33 0 0 0-2.305 0L1.792 14.57a1.33 1.33 0 0 0 1.153 1.992h14.111a1.33 1.33 0 0 0 1.152-1.992z",clipRule:"evenodd"})),v||(v=o.createElement("path",{fill:"#FFA726",fillRule:"evenodd",d:"M10.001 5.883c.38 0 .688.308.688.688v3.428a.687.687 0 1 1-1.376 0V6.571c0-.38.308-.688.688-.688m-.006 6.183H10q.034 0 .068.003c.443.038.849.4.849.914 0 .27-.122.496-.271.645A.92.92 0 0 1 10 13.9a.92.92 0 0 1-.917-.916.914.914 0 0 1 .908-.917z",clipRule:"evenodd"})))};var x,w;function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},S.apply(null,arguments)}const O=e=>{let{title:t,titleId:n,...r}=e;return o.createElement("svg",S({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":n},r),t?o.createElement("title",{id:n},t):null,x||(x=o.createElement("path",{fill:"#00B68A",fillRule:"evenodd",d:"M5.58.743a8.937 8.937 0 1 1 6.84 16.514A8.937 8.937 0 0 1 5.58.743M9 1.438a7.562 7.562 0 1 0 0 15.124A7.562 7.562 0 0 0 9 1.437",clipRule:"evenodd"})),w||(w=o.createElement("path",{fill:"#00B68A",fillRule:"evenodd",d:"M12.664 6.31c.268.268.269.703 0 .972l-4.34 4.35a.69.69 0 0 1-1.087.151l-.018-.018L5.25 9.797a.688.688 0 1 1 .972-.972l1.481 1.481 3.987-3.995a.69.69 0 0 1 .973-.001",clipRule:"evenodd"})))};var k,E;function P(){return P=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},P.apply(null,arguments)}const D=e=>{let{title:t,titleId:n,...r}=e;return o.createElement("svg",P({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":n},r),t?o.createElement("title",{id:n},t):null,k||(k=o.createElement("path",{fill:"#29B6F6",fillRule:"evenodd",d:"M9.45 4.966a.69.69 0 0 0-.587-.33.914.914 0 0 0-.917.917.92.92 0 0 0 .917.917c.27 0 .495-.122.645-.271a.92.92 0 0 0 .271-.646.69.69 0 0 0-.33-.587M7.396 12.208c0-.38.308-.687.687-.687h2.118a.687.687 0 1 1 0 1.375H8.083a.69.69 0 0 1-.687-.688",clipRule:"evenodd"})),E||(E=o.createElement("path",{fill:"#29B6F6",fillRule:"evenodd",d:"M5.58.743a8.937 8.937 0 1 1 6.84 16.514A8.937 8.937 0 0 1 5.58.743M9 1.438a7.562 7.562 0 1 0 0 15.124A7.562 7.562 0 0 0 9 1.437m-.495 4.479a.687.687 0 0 0 1.265-.373.91.91 0 0 0-.97-.905.687.687 0 0 0-.295 1.278m-1.1 2.396c0-.38.307-.688.687-.688h1.054c.38 0 .687.308.687.688v3.895a.687.687 0 1 1-1.375 0V9h-.366a.69.69 0 0 1-.688-.687",clipRule:"evenodd"})))};var A=function(e){return e.ERROR="error",e.WARNING="warning",e.INFO="info",e.SUCCESS="success",e.NEUTRAL="neutral",e}({});const I=({type:e="info",title:t,content:n,children:p})=>{const y=(0,r.A)({[c]:"error"==e,[l]:"warning"==e,[d]:"info"==e,[u]:"success"==e,[h]:"neutral"==e}),b={error:f,warning:g,info:D,success:O}[e];return o.createElement("div",{className:(0,r.A)([s,y,"alert"])},b&&o.createElement("div",null,o.createElement(b,{className:m})),o.createElement("div",null,t&&o.createElement("div",{className:i},t),o.createElement("div",{className:a},null!=n?n:p)))}},28453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var r=n(96540);const o={},s=r.createContext(o);function i(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]);