vendor: 4,932 bytes, line 1
1(globalThis.wpRiseJsonp=globalThis.wpRiseJsonp||[]).push([["defaultVendors-node_modules_pnpm_articulate_design-system_1_18_1__articulate_design-system-to-25a547"],{71695(dn){var Ao="Expected a function",Br=NaN,Da="[object Symbol]",zo=/^\s+|\s+$/g,Lt=/^[-+]0x[0-9a-f]+$/i,Le=/^0b[01]+$/i,lr=/^0o[0-7]+$/i,Co=parseInt,na=typeof globalThis=="object"&&globalThis&&globalThis.Object===Object&&globalThis,So=typeof self=="object"&&self&&self.Object===Object&&self,_o=na||So||Function("return this")(),_r=Object.prototype,Za=_r.toString,Eo=Math.max,Rt=Math.min,Ka=function(){return _o.Date.now()};function ve(N,yr,ia){var Na,L,Er,za,Vr,Ur,qa=0,Io=!1,la=!1,c=!0;if(typeof N!="function")throw new TypeError(Ao);yr=Re(yr)||0,Ya(ia)&&(Io=!!ia.leading,la="maxWait"in ia,Er=la?Eo(Re(ia.maxWait)||0,yr):Er,c="trailing"in ia?!!ia.trailing:c);function y(tr){var pa=Na,Xa=L;return Na=L=void 0,qa=tr,za=N.apply(Xa,pa),za}function ue(tr){return qa=tr,Vr=setTimeout(Ja,yr),Io?y(tr):za}function Me(tr){var pa=tr-Ur,Xa=tr-qa,jo=yr-pa;return la?Rt(jo,Er-Xa):jo}function ge(tr){var pa=tr-Ur,Xa=tr-qa;return Ur===void 0||pa>=yr||pa<0||la&&Xa>=Er}function Ja(){var tr=Ka();if(ge(tr))return Be(tr);Vr=setTimeout(Ja,Me(tr))}function Be(tr){return Vr=void 0,c&&Na?y(tr):(Na=L=void 0,za)}function Bt(){Vr!==void 0&&clearTimeout(Vr),qa=0,Na=Ur=L=Vr=void 0}function i(){return Vr===void 0?za:Be(Ka())}function Pe(){var tr=Ka(),pa=ge(tr);if(Na=arguments,L=this,Ur=tr,pa){if(Vr===void 0)return ue(Ur);if(la)return Vr=setTimeout(Ja,yr),y(Ur)}return Vr===void 0&&(Vr=setTimeout(Ja,yr)),za}return Pe.cancel=Bt,Pe.flush=i,Pe}function Ya(N){var yr=typeof N;return!!N&&(yr=="object"||yr=="function")}function To(N){return!!N&&typeof N=="object"}function Mt(N){return typeof N=="symbol"||To(N)&&Za.call(N)==Da}function Re(N){if(typeof N=="number")return N;if(Mt(N))return Br;if(Ya(N)){var yr=typeof N.valueOf=="function"?N.valueOf():N;N=Ya(yr)?yr+"":yr}if(typeof N!="string")return N===0?N:+N;N=N.replace(zo,"");var ia=Le.test(N);return ia||lr.test(N)?Co(N.slice(2),ia?2:8):Lt.test(N)?Br:+N}dn.exports=ve},43712(dn,Ao,Br){"use strict";Br.r(Ao),Br.d(Ao,{Arc:()=>sv,ArcAbstractFlexLayouts:()=>yr,ArcAbstractGapSizes:()=>To,ArcAbstractIconSizes:()=>Ya,ArcAbstractOrientations:()=>ia,ArcAbstractPopoverActions:()=>ve,ArcAbstractPopoverModes:()=>Ka,ArcAbstractTextLayouts:()=>N,ArcAbstractTextOverflows:()=>Re,ArcAbstractTextSizes:()=>Mt,ArcAvatar:()=>ac,ArcAvatarColors:()=>En,ArcAvatarColorsReserved:()=>Rl,ArcAvatarOverflow:()=>jd,ArcAvatarOverflowSizes:()=>Nl,ArcAvatarPile:()=>vs,ArcAvatarPileSizes:()=>Dl,ArcAvatarSizes:()=>Ml,ArcAvatarText:()=>ec,ArcAvatarTextGapSizes:()=>Bl,ArcAvatarTextOverflows:()=>Pl,ArcAvatarTextSizes:()=>Ol,ArcBadge:()=>Zd,ArcBadgeColors:()=>Nd,ArcBadgeContrasts:()=>Ud,ArcBadgeCount:()=>th,ArcBadgeCountColors:()=>Fd,ArcBadgeCountContrasts:()=>ah,ArcBadgeCountShapes:()=>eh,ArcBadgeCountSizes:()=>Qd,ArcBadgeCountVariants:()=>rh,ArcBadgeLayouts:()=>Vd,ArcBadgeSizes:()=>Hd,ArcBadgeVariants:()=>Wd,ArcButton:()=>Ir,ArcButtonDeprecatedVariants:()=>si,ArcButtonHierarchies:()=>ed,ArcButtonLayouts:()=>Xs,ArcButtonPopoverActions:()=>od,ArcButtonSchemes:()=>rd,ArcButtonShadows:()=>ad,ArcButtonShapes:()=>qs,ArcButtonSizes:()=>Js,ArcButtonVariants:()=>Qs,ArcCheckbox:()=>bi,ArcCheckboxBar:()=>bh,ArcCheckboxBarLayouts:()=>ph,ArcCheckboxBarOption:()=>mh,ArcCheckboxBarSizes:()=>fh,ArcCheckboxLayouts:()=>hh,ArcCheckboxSizes:()=>vh,ArcCheckboxVariants:()=>uh,ArcDropdownMenu:()=>Sc,ArcIcon:()=>D,ArcIconText:()=>Yr,ArcIconTextVariants:()=>Ls,ArcInputAction:()=>Th,ArcLabel:()=>ne,ArcLabelContent:()=>ie,ArcLabelLayouts:()=>nh,ArcLink:()=>Rh,ArcLinkVariants:()=>Lh,ArcModal:()=>e0,ArcModalAlert:()=>t0,ArcModalAlertDefaults:()=>Ta,ArcModalAlertVariants:()=>Oh,ArcModalBackdropColors:()=>Dh,ArcModalBodyPaddings:()=>Nh,ArcModalCloseReasons:()=>Hh,ArcModalCommonDefaults:()=>Rr,ArcModalCommonVariants:()=>Bh,ArcModalConfirm:()=>_i,ArcModalConfirmDefaults:()=>Ua,ArcModalConfirmVariants:()=>Ph,ArcModalSchemes:()=>Mh,ArcModalSizes:()=>Fh,ArcPopover:()=>eo,ArcPopoverActions:()=>gs,ArcPopoverAnchors:()=>cc,ArcPopoverBoundaries:()=>nc,ArcPopoverButton:()=>Xe,ArcPopoverDefaults:()=>Or,ArcPopoverDensities:()=>Nn,ArcPopoverModes:()=>oc,ArcPopoverSchemes:()=>tc,ArcPopoverVariants:()=>Dn,ArcPopoverVariantsWithOutline:()=>ps,ArcRadio:()=>Ei,ArcRadioBar:()=>v0,ArcRadioBarLayouts:()=>s0,ArcRadioBarOption:()=>h0,ArcRadioBarSizes:()=>d0,ArcRadioLayouts:()=>n0,ArcRadioSizes:()=>i0,ArcSelect:()=>U0,ArcSelectLayouts:()=>g0,ArcSelectSizes:()=>p0,ArcSelectVariants:()=>f0,ArcSwitch:()=>K0,ArcSwitchLabelPositions:()=>Ee,ArcSwitchSizes:()=>W0,ArcSwitchStates:()=>br,ArcSystemAIGradients:()=>Eo,ArcSystemAlignments:()=>So,ArcSystemColors:()=>Za,ArcSystemGradients:()=>Rt,ArcSystemHierarchies:()=>Co,ArcSystemLayouts:()=>na,ArcSystemLineHeights:()=>_o,ArcSystemSchemes:()=>Da,ArcSystemShadows:()=>zo,ArcSystemShapes:()=>Le,ArcSystemSizes:()=>_r,ArcSystemSurfaces:()=>
1Lt,ArcSystemVariants:()=>lr,ArcTextAlignments:()=>ov,ArcTextBodyElements:()=>Gi,ArcTextBodySizes:()=>av,ArcTextBodyVariants:()=>ev,ArcTextElements:()=>Zi,ArcTextHeadingElements:()=>Wi,ArcTextHeadingSizes:()=>X0,ArcTextHeadingVariants:()=>rv,ArcTextInput:()=>gv,ArcTextInputLayouts:()=>dv,ArcTextInputSizes:()=>hv,ArcTextInputTypes:()=>uv,ArcTextInputVariants:()=>vv,ArcTextKinds:()=>Y0,ArcTextLineHeights:()=>tv,ArcTextSchemes:()=>q0,ArcTextSubheadingSizes:()=>Q0,ArcTextTitleSizes:()=>J0,ArcToast:()=>dl,ArcToastDefaults:()=>tl,ArcToastPlacements:()=>ol,ArcToastPopoverActions:()=>fv,ArcToastPopoverModes:()=>el,ArcToastProgressBarVariants:()=>mv,ArcToastSchemes:()=>Xi,ArcToastSeverities:()=>Qi,ArcToastSizes:()=>rl,ArcToastVariants:()=>al,ArcTooltip:()=>bc,ArcTooltipDefaults:()=>da,SVGLogoArticulate:()=>Zt,SVGLogoProductAI:()=>Kt,SVGLogoProductPeek:()=>Yt,SVGLogoProductReach:()=>qt,SVGLogoProductReview:()=>Jt,SVGLogoProductRise:()=>Xt,SVGLogoProductStoryline:()=>Qt,SVGLogoProductStudio:()=>rc,StorageType:()=>yo,adoptStyles:()=>H,adoptThemeTokens:()=>Tl,anchorNameRegistry:()=>Ge,assignRef:()=>za,bindDelegatedEvents:()=>ni,clamp:()=>Vr,createEmptyRect:()=>Ov,css:()=>i,cssFeatures:()=>lc,didElementRectChange:()=>Io,extractTextFromReactNode:()=>Ue,formatAnchorName:()=>sc,getPreferredAnchorForTooltipId:()=>mc,getShadowRootOrDocument:()=>la,handlePopover:()=>Vn,handleToast:()=>cl,hasNativeAnchorPositioning:()=>ic,isDifferent:()=>Ur,isObject:()=>Jn,isSame:()=>qa,isString:()=>No,joinArray:()=>We,logError:()=>_s,logMessage:()=>Ss,logWarning:()=>Qn,makeHtmlId:()=>us,mapDeprecated:()=>Na,noTailAnchors:()=>Fn,normalizeAnchorName:()=>Ze,pickFromList:()=>L,pickFromListByKeys:()=>Er,resolveTailMetrics:()=>Hn,shareAdoptedStyles:()=>El,splitString:()=>Xn,syncAnchorName:()=>Un,unbindDelegatedEvents:()=>Ks,useIsoLayoutEffect:()=>Po,useStableId:()=>Kr,useStorage:()=>Pv});const Da=["auto","light","dark","inverse"],zo=["none","sm","md","lg","xl"],Lt=["primary","secondary","inset","raised","floating"],Le=["circle","square","narrow"],lr=["inherit","common","disabled","neutral","outline","solid","plain","critical","ai","alpha","primary","secondary","tertiary","inverse","critical-primary","critical-secondary","ai-primary","ai-secondary","primary-inverse","secondary-inverse","tertiary-inverse","overlay-light","overlay-dark","brand-black","brand-blue","brand","info","success","warning","error","processing"],Co=["primary","secondary","tertiary","plain","link-style"],na=["hug","fill","icon","gutter","inline"],So=["inherit","start","left","justify","center","between","around","evenly","stretch","end","right"],_o=["inherit","tight","standard","loose"],_r=["inherit","xxl","xl","lg","md","sm","xs","xxs","custom","fullscreen"],Za=["blue","orange","mint","red","yellow","green","maroon","purple","neutral","white","black","mono","mono-inverse","overlay-light","overlay-dark","ai","brand"],Eo=["ai","ai-50","ai-100","ai-200","ai-300","ai-400","ai-500","ai-600"],Rt=[...Eo],Ka=["","auto","manual"],ve=["toggle","show","hide"],Ya=["inherit","xl","lg","md","sm","xs"],To=["inherit","lg","md","sm"],Mt=["inherit","md","sm"],Re=["inherit","wrap","truncate"],N=["gutter","inline"],yr=["hug","fill"],ia=["horizontal","vertical"],Na=(a,r)=>r[a]||a,L=(a,r)=>a.filter(e=>r.includes(e)),Er=(a,r)=>r.filter(e=>a.includes(e)),za=(a,r)=>{a&&(typeof a=="function"?a(r):a.current=r)},Vr=(a,r=0,e=100)=>Math.min(Math.max(a,r),e),Ur=(a,r)=>a!==r,qa=(a,r)=>a===r,Io=({a,b:r})=>Ur(a?.top,r?.top)||Ur(a?.left,r?.left)||Ur(a?.width,r?.width)||Ur(a?.height,r?.height);
vendor: 4,105 bytes, lines 1-9
1function la(a){if(!(a instanceof Node))return null;const r=a.getRootNode();return r instanceof ShadowRoot||r instanceof Document?r:null}var c=Br(16881),y=Br(26372);/** 2 * @license 3 * Copyright 2019 Google LLC 4 * SPDX-License-Identifier: BSD-3-Clause 5 */const ue=globalThis,Me=ue.ShadowRoot&&(ue.ShadyCSS===void 0||ue.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,ge=Symbol(),Ja=new WeakMap;class Be{constructor(r,e,o){if(this._$cssResult$=!0,o!==ge)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=r,this.t=e}get styleSheet(){let r=this.o;const e=this.t;if(Me&&r===void 0){const o=e!==void 0&&e.length===1;o&&(r=Ja.get(e)),r===void 0&&((this.o=r=new CSSStyleSheet).replaceSync(this.cssText),o&&Ja.set(e,r))}return r}toString(){return this.cssText}}const Bt=a=>new Be(typeof a=="string"?a:a+"",void 0,ge),i=(a,...r)=>{const e=a.length===1?a[0]:r.reduce(((o,t,l)=>o+(n=>{if(n._$cssResult$===!0)return n.cssText;if(typeof n=="number")return n;throw Error("Value passed to 'css' function must be a 'css' function result: "+n+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(t)+a[l+1]),a[0]);return new Be(e,a,ge)},Pe=(a,r)=>{if(Me)a.adoptedStyleSheets=r.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of r){const o=document.createElement("style"),t=ue.litNonce;t!==void 0&&o.setAttribute("nonce",t),o.textContent=e.cssText,a.appendChild(o)}},tr=Me?a=>a:a=>a instanceof CSSStyleSheet?(r=>{let e="";for(const o of r.cssRules)e+=o.cssText;return Bt(e)})(a):a;/** 6 * @license 7 * Copyright 2017 Google LLC 8 * SPDX-License-Identifier: BSD-3-Clause 9 */const{is:pa,defineProperty:Xa,getOwnPropertyDescriptor:jo,getOwnPropertyNames:$l,getOwnPropertySymbols:yl,getPrototypeOf:xl}=Object,Lo=globalThis,hn=Lo.trustedTypes,kl=hn?hn.emptyScript:"",wl=Lo.reactiveElementPolyfillSupport,Oe=(a,r)=>a,Pt={toAttribute(a,r){switch(r){case Boolean:a=a?kl:null;break;case Object:case Array:a=a==null?a:JSON.stringify(a)}return a},fromAttribute(a,r){let e=a;switch(r){case Boolean:e=a!==null;break;case Number:e=a===null?null:Number(a);break;case Object:case Array:try{e=JSON.parse(a)}catch{e=null}}return e}},vn=(a,r)=>!pa(a,r),un={attribute:!0,type:String,converter:Pt,reflect:!1,useDefault:!1,hasChanged:vn};Symbol.metadata??=Symbol("metadata"),Lo.litPropertyMetadata??=new WeakMap;class pe extends HTMLElement{static addInitializer(r){this._$Ei(),(this.l??=[]).push(r)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(r,e=un){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(r)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(r,e),!e.noAccessor){const o=Symbol(),t=this.getPropertyDescriptor(r,o,e);t!==void 0&&Xa(this.prototype,r,t)}}static getPropertyDescriptor(r,e,o){const{get:t,set:l}=jo(this.prototype,r)??{get(){return this[e]},set(n){this[e]=n}};return{get:t,set(n){const h=t?.call(this);l?.call(this,n),this.requestUpdate(r,h,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(r){return this.elementProperties.get(r)??un}static _$Ei(){if(this.hasOwnProperty(Oe("elementProperties")))return;const r=xl(this);r.finalize(),r.l!==void 0&&(this.l=[...r.l]),this.elementProperties=new Map(r.elementProperties)}static finalize(){if(this.hasOwnProperty(Oe("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(Oe("properties"))){const e=this.properties,o=[...$l(e),...yl(e)];for(const t of o)this.createProperty(t,e[t])}const r=this[Symbol.metadata];if(r!==null){const e=litPropertyMetadata.get(r);if(e!==void 0)for(const[o,t]of e)this.elementProperties.set(o,t)}this._$Eh=new Map;for(const[e,o]of this.elementProperties){const t=this._$Eu(e,o);t!==void 0&&this._$Eh.set(t,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(r){const e=[];if(Array.isArray(r)){const o=new Set(r.flat(1/0).reverse());for(const t of o)e.unshift(tr(t))}else r!==void 0&&e.push(tr(r));return e}static _$Eu(r,e){const o=e.attribute;
vendor: 20,667 bytes, lines 9-229
9return o===!1?void 0:typeof o=="string"?o:typeof r=="string"?r.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((r=>this.enableUpdating=r)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((r=>r(this)))}addController(r){(this._$EO??=new Set).add(r),this.renderRoot!==void 0&&this.isConnected&&r.hostConnected?.()}removeController(r){this._$EO?.delete(r)}_$E_(){const r=new Map,e=this.constructor.elementProperties;for(const o of e.keys())this.hasOwnProperty(o)&&(r.set(o,this[o]),delete this[o]);r.size>0&&(this._$Ep=r)}createRenderRoot(){const r=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Pe(r,this.constructor.elementStyles),r}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((r=>r.hostConnected?.()))}enableUpdating(r){}disconnectedCallback(){this._$EO?.forEach((r=>r.hostDisconnected?.()))}attributeChangedCallback(r,e,o){this._$AK(r,o)}_$ET(r,e){const o=this.constructor.elementProperties.get(r),t=this.constructor._$Eu(r,o);if(t!==void 0&&o.reflect===!0){const l=(o.converter?.toAttribute!==void 0?o.converter:Pt).toAttribute(e,o.type);this._$Em=r,l==null?this.removeAttribute(t):this.setAttribute(t,l),this._$Em=null}}_$AK(r,e){const o=this.constructor,t=o._$Eh.get(r);if(t!==void 0&&this._$Em!==t){const l=o.getPropertyOptions(t),n=typeof l.converter=="function"?{fromAttribute:l.converter}:l.converter?.fromAttribute!==void 0?l.converter:Pt;this._$Em=t;const h=n.fromAttribute(e,l.type);this[t]=h??this._$Ej?.get(t)??h,this._$Em=null}}requestUpdate(r,e,o){if(r!==void 0){const t=this.constructor,l=this[r];if(o??=t.getPropertyOptions(r),!((o.hasChanged??vn)(l,e)||o.useDefault&&o.reflect&&l===this._$Ej?.get(r)&&!this.hasAttribute(t._$Eu(r,o))))return;this.C(r,e,o)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(r,e,{useDefault:o,reflect:t,wrapped:l},n){o&&!(this._$Ej??=new Map).has(r)&&(this._$Ej.set(r,n??e??this[r]),l!==!0||n!==void 0)||(this._$AL.has(r)||(this.hasUpdated||o||(e=void 0),this._$AL.set(r,e)),t===!0&&this._$Em!==r&&(this._$Eq??=new Set).add(r))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const r=this.scheduleUpdate();return r!=null&&await r,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,l]of this._$Ep)this[t]=l;this._$Ep=void 0}const o=this.constructor.elementProperties;if(o.size>0)for(const[t,l]of o){const{wrapped:n}=l,h=this[t];n!==!0||this._$AL.has(t)||h===void 0||this.C(t,void 0,l,h)}}let r=!1;const e=this._$AL;try{r=this.shouldUpdate(e),r?(this.willUpdate(e),this._$EO?.forEach((o=>o.hostUpdate?.())),this.update(e)):this._$EM()}catch(o){throw r=!1,this._$EM(),o}r&&this._$AE(e)}willUpdate(r){}_$AE(r){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(r)),this.updated(r)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(r){return!0}update(r){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(r){}firstUpdated(r){}}pe.elementStyles=[],pe.shadowRootOptions={mode:"open"},pe[Oe("elementProperties")]=new Map,pe[Oe("finalized")]=new Map,wl?.({ReactiveElement:pe}),(Lo.reactiveElementVersions??=[]).push("2.1.1");/** 10 * @license 11 * Copyright 2017 Google LLC 12 * SPDX-License-Identifier: BSD-3-Clause 13 */const Ot=globalThis,Ro=Ot.trustedTypes,gn=Ro?Ro.createPolicy("lit-html",{createHTML:a=>a}):void 0,Dt="$lit$",Ca=`lit$${Math.random().toFixed(9).slice(2)}$`,Nt="?"+Ca,Al=`<${Nt}>`,Qa=document,De=()=>Qa.createComment(""),Ne=a=>a===null||typeof a!="object"&&typeof a!="function",Ft=Array.isArray,pn=a=>Ft(a)||typeof a?.[Symbol.iterator]=="function",Ht=`[ 14\f\r]`,Fe=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,fn=/-->/g,mn=/>/g,re=RegExp(`>|${Ht}(?:([^\\s"'>=/]+)(${Ht}*=${Ht}*(?:[^ 15\f\r"'\`<>=]|("|')|))|$)`,"g"),bn=/'/g,$n=/"/g,yn=/^(?:script|style|textarea|title)$/i,Vt=a=>(r,...e)=>({_$litType$:a,strings:r,values:e}),Fv=Vt(1),Hv=Vt(2),Vv=Vt(3),fe=Symbol.for("lit-noChange"),gr=Symbol.for("lit-nothing"),xn=new WeakMap,ae=Qa.createTreeWalker(Qa,129);function kn(a,r){if(!Ft(a)||!a.hasOwnProperty("raw"))throw Error("invalid template strings array");return gn!==void 0?gn.createHTML(r):r}const wn=(a,r)=>{const e=a.length-1,o=[];let t,l=r===2?"<svg>":r===3?"<math>":"",n=Fe;for(let h=0;h<e;h++){const d=a[h];let v,u,p=-1,g=0;for(;g<d.length&&(n.lastIndex=g,u=n.exec(d),u!==null);)g=n.lastIndex,n===Fe?u[1]==="!--"?n=fn:u[1]!==void 0?n=mn:u[2]!==void 0?(yn.test(u[2])&&(t=RegExp("</"+u[2],"g")),n=re):u[3]!==void 0&&(n=re):n===re?u[0]===">"?(n=t??Fe,p=-1):u[1]===void 0?p=-2:(p=n.lastIndex-u[2].length,v=u[1],n=u[3]===void 0?re:u[3]==='"'?$n:bn):n===$n||n===bn?n=re:n===fn||n===mn?n=Fe:(n=re,t=void 0);const f=n===re&&a[h+1].startsWith("/>")?" ":"";l+=n===Fe?d+Al:p>=0?(o.push(v),d.slice(0,p)+Dt+d.slice(p)+Ca+f):d+Ca+(p===-2?h:f)}return[kn(a,l+(a[e]||"<?>")+(r===2?"</svg>":r===3?"</math>":"")),o]};class He{constructor({strings:r,_$litType$:e},o){let t;this.parts=[];let l=0,n=0;const h=r.length-1,d=this.parts,[v,u]=wn(r,e);if(this.el=He.createElement(v,o),ae.currentNode=this.el.content,e===2||e===3){const p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(t=ae.nextNode())!==null&&d.length<h;){if(t.nodeType===1){if(t.hasAttributes())for(const p of t.getAttributeNames())if(p.endsWith(Dt)){const g=u[n++],f=t.getAttribute(p).split(Ca),k=/([.?@])?(.*)/.exec(g);d.push({type:1,index:l,name:k[2],strings:f,ctor:k[1]==="."?zn:k[1]==="?"?Cn:k[1]==="@"?Sn:Ve}),t.removeAttribute(p)}else p.startsWith(Ca)&&(d.push({type:6,index:l}),t.removeAttribute(p));if(yn.test(t.tagName)){const p=t.textContent.split(Ca),g=p.length-1;if(g>0){t.textContent=Ro?Ro.emptyScript:"";for(let f=0;f<g;f++)t.append(p[f],De()),ae.nextNode(),d.push({type:2,index:++l});t.append(p[g],De())}}}else if(t.nodeType===8)if(t.data===Nt)d.push({type:2,index:l});else{let p=-1;for(;(p=t.data.indexOf(Ca,p+1))!==-1;)d.push({type:7,index:l}),p+=Ca.length-1}l++}}static createElement(r,e){const o=Qa.createElement("template");return o.innerHTML=r,o}}function ee(a,r,e=a,o){if(r===fe)return r;let t=o!==void 0?e._$Co?.[o]:e._$Cl;const l=Ne(r)?void 0:r._$litDirective$;return t?.constructor!==l&&(t?._$AO?.(!1),l===void 0?t=void 0:(t=new l(a),t._$AT(a,e,o)),o!==void 0?(e._$Co??=[])[o]=t:e._$Cl=t),t!==void 0&&(r=ee(a,t._$AS(a,r.values),t,o)),r}class An{constructor(r,e){this._$AV=[],this._$AN=void 0,this._$AD=r,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(r){const{el:{content:e},parts:o}=this._$AD,t=(r?.creationScope??Qa).importNode(e,!0);ae.currentNode=t;let l=ae.nextNode(),n=0,h=0,d=o[0];for(;d!==void 0;){if(n===d.index){let v;d.type===2?v=new me(l,l.nextSibling,this,r):d.type===1?v=new d.ctor(l,d.name,d.strings,this,r):d.type===6&&(v=new _n(l,this,r)),this._$AV.push(v),d=o[++h]}n!==d?.index&&(l=ae.nextNode(),n++)}return ae.currentNode=Qa,t}p(r){let e=0;for(const o of this._$AV)o!==void 0&&(o.strings!==void 0?(o._$AI(r,o,e),e+=o.strings.length-2):o._$AI(r[e])),e++}}class me{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(r,e,o,t){this.type=2,this._$AH=gr,this._$AN=void 0,this._$AA=r,this._$AB=e,this._$AM=o,this.options=t,this._$Cv=t?.isConnected??!0}get parentNode(){let r=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&r?.nodeType===11&&(r=e.parentNode),r}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(r,e=this){r=ee(this,r,e),Ne(r)?r===gr||r==null||r===""?(this._$AH!==gr&&this._$AR(),this._$AH=gr):r!==this._$AH&&r!==fe&&this._(r):r._$litType$!==void 0?this.$(r):r.nodeType!==void 0?this.T(r):pn(r)?this.k(r):this._(r)}O(r){return this._$AA.parentNode.insertBefore(r,this._$AB)}T(r){this._$AH!==r&&(this._$AR(),this._$AH=this.O(r))}_(r){this._$AH!==gr&&Ne(this._$AH)?this._$AA.nextSibling.data=r:this.T(Qa.createTextNode(r)),this._$AH=r}$(r){const{values:e,_$litType$:o}=r,t=typeof o=="number"?this._$AC(r):(o.el===void 0&&(o.el=He.createElement(kn(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===t)this._$AH.p(e);else{const l=new An(t,this),n=l.u(this.options);l.p(e),this.T(n),this._$AH=l}}_$AC(r){let e=xn.get(r.strings);return e===void 0&&xn.set(r.strings,e=new He(r)),e}k(r){Ft(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,t=0;for(const l of r)t===e.length?e.push(o=new me(this.O(De()),this.O(De()),this,this.options)):o=e[t],o._$AI(l),t++;t<e.length&&(this._$AR(o&&o._$AB.nextSibling,t),e.length=t)}_$AR(r=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);r!==this._$AB;){const o=r.nextSibling;r.remove(),r=o}}setConnected(r){this._$AM===void 0&&(this._$Cv=r,this._$AP?.(r))}}class Ve{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(r,e,o,t,l){this.type=1,this._$AH=gr,this._$AN=void 0,this.element=r,this.name=e,this._$AM=t,this.options=l,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=gr}_$AI(r,e=this,o,t){const l=this.strings;let n=!1;if(l===void 0)r=ee(this,r,e,0),n=!Ne(r)||r!==this._$AH&&r!==fe,n&&(this._$AH=r);else{const h=r;let d,v;for(r=l[0],d=0;d<l.length-1;d++)v=ee(this,h[o+d],e,d),v===fe&&(v=this._$AH[d]),n||=!Ne(v)||v!==this._$AH[d],v===gr?r=gr:r!==gr&&(r+=(v??"")+l[d+1]),this._$AH[d]=v}n&&!t&&this.j(r)}j(r){r===gr?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,r??"")}}class zn extends Ve{constructor(){super(...arguments),this.type=3}j(r){this.element[this.name]=r===gr?void 0:r}}class Cn extends Ve{constructor(){super(...arguments),this.type=4}j(r){this.element.toggleAttribute(this.name,!!r&&r!==gr)}}class Sn extends Ve{constructor(r,e,o,t,l){super(r,e,o,t,l),this.type=5}_$AI(r,e=this){if((r=ee(this,r,e,0)??gr)===fe)return;const o=this._$AH,t=r===gr&&o!==gr||r.capture!==o.capture||r.once!==o.once||r.passive!==o.passive,l=r!==gr&&(o===gr||t);t&&this.element.removeEventListener(this.name,this,o),l&&this.element.addEventListener(this.name,this,r),this._$AH=r}handleEvent(r){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,r):this._$AH.handleEvent(r)}}class _n{constructor(r,e,o){this.element=r,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(r){ee(this,r)}}const Uv={M:Dt,P:Ca,A:Nt,C:1,L:wn,R:An,D:pn,V:ee,I:me,H:Ve,N:Cn,U:Sn,B:zn,F:_n},zl=Ot.litHtmlPolyfillSupport;zl?.(He,me),(Ot.litHtmlVersions??=[]).push("3.3.1");const Cl=(a,r,e)=>{const o=e?.renderBefore??r;let t=o._$litPart$;if(t===void 0){const l=e?.renderBefore??null;o._$litPart$=t=new me(r.insertBefore(De(),l),l,void 0,e??{})}return t._$AI(a),t};/** 16 * @license 17 * Copyright 2017 Google LLC 18 * SPDX-License-Identifier: BSD-3-Clause 19 */const Ut=globalThis;class Mo extends pe{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const r=super.createRenderRoot();return this.renderOptions.renderBefore??=r.firstChild,r}update(r){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(r),this._$Do=Cl(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return fe}}Mo._$litElement$=!0,Mo.finalized=!0,Ut.litElementHydrateSupport?.({LitElement:Mo});const Sl=Ut.litElementPolyfillSupport;Sl?.({LitElement:Mo});const Wv={_$AK:(a,r,e)=>{a._$AK(r,e)},_$AL:a=>a._$AL};(Ut.litElementVersions??=[]).push("4.2.1");const _l=`@charset "UTF-8"; 20@layer arc-theme, arc-components, arc-utils; 21@layer arc-theme { 22 :root, 23 ::backdrop { 24 --arc-color-mono-black: #000000; 25 --arc-color-mono-white: #ffffff; 26 --arc-color-light-neutral-0: #ffffff; 27 --arc-color-light-neutral-50: #f7f7f7; 28 --arc-color-light-neutral-100: #ededed; 29 --arc-color-light-neutral-200: #e6e6e6; 30 --arc-color-light-neutral-300: #c6c6c6; 31 --arc-color-light-neutral-400: #b0b0b0; 32 --arc-color-light-neutral-500: #9b9b9b; 33 --arc-color-light-neutral-600: #737373; 34 --arc-color-light-neutral-700: #636363; 35 --arc-color-light-neutral-800: #4b4b4b; 36 --arc-color-light-neutral-900: #212121; 37 --arc-color-light-neutral-1000: #000000; 38 --arc-color-light-blue-50: #f0fbff; 39 --arc-color-light-blue-100: #ddf4fd; 40 --arc-color-light-blue-200: #99e4ff; 41 --arc-color-light-blue-300: #53d1ff; 42 --arc-color-light-blue-400: #00aff0; 43 --arc-color-light-blue-500: #0098eb; 44 --arc-color-light-blue-600: #0075cf; 45 --arc-color-light-blue-700: #0065b2; 46 --arc-color-light-blue-800: #005394; 47 --arc-color-light-blue-900: #00335b; 48 --arc-color-light-purple-50: #f1f0ff; 49 --arc-color-light-purple-100: #e9e7fe; 50 --arc-color-light-purple-200: #b2a8ff; 51 --arc-color-light-purple-300: #9789fa; 52 --arc-color-light-purple-400: #8676ff; 53 --arc-color-light-purple-500: #7565f1; 54 --arc-color-light-purple-600: #4e3bd5; 55 --arc-color-light-purple-700: #3120b4; 56 --arc-color-light-purple-800: #16068e; 57 --arc-color-light-purple-900: #0c0064; 58 --arc-color-light-mint-50: #f0fff9; 59 --arc-color-light-mint-100: #d9fdef; 60 --arc-color-light-mint-200: #9df1d1; 61 --arc-color-light-mint-300: #6de3b6; 62 --arc-color-light-mint-400: #44bf90; 63 --arc-color-light-mint-500: #0f9f68; 64 --arc-color-light-mint-600: #008451; 65 --arc-color-light-mint-700: #006e44; 66 --arc-color-light-mint-800: #005937; 67 --arc-color-light-mint-900: #00442a; 68 --arc-color-light-orange-50: #fff6f0; 69 --arc-color-light-orange-100: #fdeadd; 70 --arc-color-light-orange-200: #fac39e; 71 --arc-color-light-orange-300: #fd9e5e; 72 --arc-color-light-orange-400: #ff6602; 73 --arc-color-light-orange-500: #e95d00; 74 --arc-color-light-orange-600: #c24e00; 75 --arc-color-light-orange-700: #a84300; 76 --arc-color-light-orange-800: #933b00; 77 --arc-color-light-orange-900: #662900; 78 --arc-color-light-maroon-50: #ffeff3; 79 --arc-color-light-maroon-100: #fedde5; 80 --arc-color-light-maroon-200: #ffa8be; 81 --arc-color-light-maroon-300: #fe8fab; 82 --arc-color-light-maroon-400: #f27195; 83 --arc-color-light-maroon-500: #e05580; 84 --arc-color-light-maroon-600: #c73868; 85 --arc-color-light-maroon-700: #aa1a53; 86 --arc-color-light-maroon-800: #841a42; 87 --arc-color-light-maroon-900: #5d132d; 88 --arc-color-light-green-50: #f6fff0; 89 --arc-color-light-green-100: #e7fdd9; 90 --arc-color-light-green-200: #bfeea0; 91 --arc-color-light-green-300: #8dd65c; 92 --arc-color-light-green-400: #74bb44; 93 --arc-color-light-green-500: #57a225; 94 --arc-color-light-green-600: #358201; 95 --arc-color-light-green-700: #2c6d00; 96 --arc-color-light-green-800: #235800; 97 --arc-color-light-green-900: #1b4300; 98 --arc-color-light-yellow-50: #fffaf0; 99 --arc-color-light-yellow-100: #fdf2dd; 100 --arc-color-light-yellow-200: #ffdb94; 101 --arc-color-light-yellow-300: #ffc960; 102 --arc-color-light-yellow-400: #ffb629; 103 --arc-color-light-yellow-500: #eb9b00; 104 --arc-color-light-yellow-600: #9e6900; 105 --arc-color-light-yellow-700: #805400; 106 --arc-color-light-yellow-800: #604000; 107 --arc-color-light-yellow-900: #3e2900; 108 --arc-color-light-red-50: #fff0f0; 109 --arc-color-light-red-100: #fde2e2; 110 --arc-color-light-red-200: #ff9999; 111 --arc-color-light-red-300: #ff6161; 112 --arc-color-light-red-400: #ff0000; 113 --arc-color-light-red-500: #eb0000; 114 --arc-color-light-red-600: #b80000; 115 --arc-color-light-red-700: #990000; 116 --arc-color-light-red-800: #7a0000; 117 --arc-color-light-red-900: #520000; 118 --arc-color-dark-neutral-0: #000000; 119 --arc-color-dark-neutral-50: #1c1c1c; 120 --arc-color-dark-neutral-100: #2a2a2a; 121 --arc-color-dark-neutral-200: #3d3d3d; 122 --arc-color-dark-neutral-300: #515151; 123 --arc-color-dark-neutral-400: #666666; 124 --arc-color-dark-neutral-500: #7b7b7b; 125 --arc-color-dark-neutral-600: #939393; 126 --arc-color-dark-neutral-700: #aeaeae; 127 --arc-color-dark-neutral-800: #d0d0d0; 128 --arc-color-dark-neutral-900: #ededed; 129 --arc-color-dark-neutral-1000: #ffffff; 130 --arc-color-dark-blue-50: #002542; 131 --arc-color-dark-blue-100: #093a63; 132 --arc-color-dark-blue-200: #0f4d7a; 133 --arc-color-dark-blue-300: #146192; 134 --arc-color-dark-blue-400: #1974aa; 135 --arc-color-dark-blue-500: #1e88c7; 136 --arc-color-dark-blue-600: #0ca1f7; 137 --arc-color-dark-blue-700: #3ab1f5; 138 --arc-color-dark-blue-800: #70cbfa; 139 --arc-color-dark-blue-900: #b9e6fd; 140 --arc-color-dark-purple-50: #161041; 141 --arc-color-dark-purple-100: #221c5a; 142 --arc-color-dark-purple-200: #2d2773; 143 --arc-color-dark-purple-300: #39328c; 144 --arc-color-dark-purple-400: #463da6; 145 --arc-color-dark-purple-500: #5449c0; 146 --arc-color-dark-purple-600: #6556da; 147 --arc-color-dark-purple-700: #7a6ef0; 148 --arc-color-dark-purple-800: #a193f9; 149 --arc-color-dark-purple-900: #d3c9ff; 150 --arc-color-dark-mint-50: #04291b; 151 --arc-color-dark-mint-100: #0b3425; 152 --arc-color-dark-mint-200: #134434; 153 --arc-color-dark-mint-300: #1b5444; 154 --arc-color-dark-mint-400: #246554; 155 --arc-color-dark-mint-500: #2f7766; 156 --arc-color-dark-mint-600: #14b290; 157 --arc-color-dark-mint-700: #52a895; 158 --arc-color-dark-mint-800: #84d0bd; 159 --arc-color-dark-mint-900: #d6fff2; 160 --arc-color-dark-orange-50: #251104; 161 --arc-color-dark-orange-100: #3a1a08; 162 --arc-color-dark-orange-200: #50240d; 163 --arc-color-dark-orange-300: #672f14; 164 --arc-color-dark-orange-400: #7f3c1d; 165 --arc-color-dark-orange-500: #984b27; 166 --arc-color-dark-orange-600: #d55913; 167 --arc-color-dark-orange-700: #d1764d; 168 --arc-color-dark-orange-800: #eba883; 169 --arc-color-dark-orange-900: #ffdcc9; 170 --arc-color-dark-maroon-50: #2a0914; 171 --arc-color-dark-maroon-100: #40101f; 172 --arc-color-dark-maroon-200: #56162b; 173 --arc-color-dark-maroon-300: #6c1e39; 174 --arc-color-dark-maroon-400: #822647; 175 --arc-color-dark-maroon-500: #993057; 176 --arc-color-dark-maroon-600: #b13d69; 177 --arc-color-dark-maroon-700: #d05886; 178 --arc-color-dark-maroon-800: #e891b5; 179 --arc-color-dark-maroon-900: #ffd6e7; 180 --arc-color-dark-green-50: #132904; 181 --arc-color-dark-green-100: #1b340a; 182 --arc-color-dark-green-200: #264411; 183 --arc-color-dark-green-300: #31551a; 184 --arc-color-dark-green-400: #3e6625; 185 --arc-color-dark-green-500: #4c7831; 186 --arc-color-dark-green-600: #55a722; 187 --arc-color-dark-green-700: #72a65b; 188 --arc-color-dark-green-800: #a0d092; 189 --arc-color-dark-green-900: #e2fcd9; 190 --arc-color-dark-yellow-50: #2e2005; 191 --arc-color-dark-yellow-100: #3a2907; 192 --arc-color-dark-yellow-200: #51390d; 193 --arc-color-dark-yellow-300: #684a14; 194 --arc-color-dark-yellow-400: #7f5c1c; 195 --arc-color-dark-yellow-500: #976f25; 196 --arc-color-dark-yellow-600: #d99d0f; 197 --arc-color-dark-yellow-700: #d1a049; 198 --arc-color-dark-yellow-800: #eccc86; 199 --arc-color-dark-yellow-900: #fff7d9; 200 --arc-color-dark-red-50: #250404; 201 --arc-color-dark-red-100: #3a0809; 202 --arc-color-dark-red-200: #500d0e; 203 --arc-color-dark-red-300: #671416; 204 --arc-color-dark-red-400: #7e1d1f; 205 --arc-color-dark-red-500: #97292b; 206 --arc-color-dark-red-600: #d4423f; 207 --arc-color-dark-red-700: #d86466; 208 --arc-color-dark-red-800: #e88987; 209 --arc-color-dark-red-900: #ffd6d6; 210 --arc-color-alpha-black-0: rgb(0 0 0 / 0%); 211 --arc-color-alpha-black-3: rgb(0 0 0 / 3%); 212 --arc-color-alpha-black-5: rgb(0 0 0 / 5%); 213 --arc-color-alpha-black-7: rgb(0 0 0 / 7%); 214 --arc-color-alpha-black-10: rgb(0 0 0 / 10%); 215 --arc-color-alpha-black-15: rgb(0 0 0 / 15%); 216 --arc-color-alpha-black-20: rgb(0 0 0 / 20%); 217 --arc-color-alpha-black-25: rgb(0 0 0 / 25%); 218 --arc-color-alpha-black-30: rgb(0 0 0 / 30%); 219 --arc-color-alpha-black-40: rgb(0 0 0 / 40%); 220 --arc-color-alpha-black-50: rgb(0 0 0 / 50%); 221 --arc-color-alpha-black-60: rgb(0 0 0 / 60%); 222 --arc-color-alpha-black-70: rgb(0 0 0 / 70%); 223 --arc-color-alpha-black-80: rgb(0 0 0 / 80%); 224 --arc-color-alpha-black-90: rgb(0 0 0 / 90%); 225 --arc-color-alpha-black-95: rgb(0 0 0 / 95%); 226 --arc-color-alpha-black-100: rgb(0 0 0 / 100%); 227 --arc-color-alpha-white-0: rgb(255 255 255 / 0%); 228 --arc-color-alpha-white-3: rgb(255 255 255 / 3%); 229 --arc-color-alpha-white-5: rgb(255 255 2
22955 / 5%); 230 --arc-color-alpha-white-7: rgb(255 255 255 / 7%); 231 --arc-color-alpha-white-10: rgb(255 255 255 / 10%); 232 --arc-color-alpha-white-15: rgb(255 255 255 / 15%); 233 --arc-color-alpha-white-20: rgb(255 255 255 / 20%); 234 --arc-color-alpha-white-25: rgb(255 255 255 / 25%); 235 --arc-color-alpha-white-30: rgb(255 255 255 / 30%); 236 --arc-color-alpha-white-40: rgb(255 255 255 / 40%); 237 --arc-color-alpha-white-50: rgb(255 255 255 / 50%); 238 --arc-color-alpha-white-60: rgb(255 255 255 / 60%); 239 --arc-color-alpha-white-70: rgb(255 255 255 / 70%); 240 --arc-color-alpha-white-80: rgb(255 255 255 / 80%); 241 --arc-color-alpha-white-90: rgb(255 255 255 / 90%); 242 --arc-color-alpha-white-95: rgb(255 255 255 / 95%); 243 --arc-color-alpha-white-100: rgb(255 255 255 / 100%); 244 --arc-gradient-ai-50: linear-gradient(to right top, light-dark(#fbf2ff, #210125), light-dark(#f4fbff, #00223b)); 245 --arc-gradient-ai-100: linear-gradient(to right top, light-dark(#efccff, #540160), light-dark(#d2f1fe, #02497d)); 246 --arc-gradient-ai-200: linear-gradient(to right top, light-dark(#9c15ff, #ad44cb), light-dark(#1eb4fb, #169cfe)); 247 --arc-gradient-ai-300: linear-gradient(to right top, light-dark(#680278, #ad44cb), light-dark(#0179d0, #71bdfe)); 248 --arc-gradient-ai-400: linear-gradient(to right top, light-dark(#5d3668, #c778de), light-dark(#36648c, #84daff)); 249 --arc-gradient-ai-500: linear-gradient(to right top, light-dark(#37003f, #e3a7ff), light-dark(#004273, #b7eaff)); 250 --arc-gradient-ai-600: linear-gradient(to right top, light-dark(#27002c, #f9ebff), light-dark(#012a48, #c2edff)); 251 --arc-color-overlay-subtle: light-dark(var(--arc-color-alpha-white-70), var(--arc-color-alpha-black-70)); 252 --arc-color-overlay-stark: light-dark(var(--arc-color-alpha-black-50), var(--arc-color-alpha-black-50)); 253 --arc-color-shadow-sm: light-dark(var(--arc-color-alpha-black-25), var(--arc-color-alpha-black-60)); 254 --arc-color-shadow-md: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-black-50)); 255 --arc-color-shadow-lg: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-black-40)); 256 --arc-color-shadow-xl: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-black-40)); 257 --arc-color-bg-primary: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-100)); 258 --arc-color-bg-secondary: light-dark(var(--arc-color-alpha-black-5), var(--arc-color-alpha-white-10)); 259 --arc-color-bg-tertiary: light-dark(var(--arc-color-light-neutral-200), var(--arc-color-dark-neutral-300)); 260 --arc-color-bg-mono-inverse: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 261 --arc-color-bg-mono: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 262 --arc-color-bg-disabled: light-dark(var(--arc-color-alpha-black-5), var(--arc-color-alpha-white-15)); 263 --arc-color-bg-hover-subtle: light-dark(var(--arc-color-alpha-black-3), var(--arc-color-alpha-white-3)); 264 --arc-color-bg-hover-default: light-dark(var(--arc-color-alpha-black-7), var(--arc-color-alpha-white-15)); 265 --arc-color-bg-hover-stark: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-30)); 266 --arc-color-bg-selected-subtle: light-dark(var(--arc-color-light-blue-50), var(--arc-color-dark-blue-50)); 267 --arc-color-bg-selected-default: light-dark(var(--arc-color-light-blue-100), var(--arc-color-dark-blue-200)); 268 --arc-color-bg-selected-stark: light-dark(var(--arc-color-light-blue-200), var(--arc-color-dark-blue-400)); 269 --arc-color-bg-theme-muted: light-dark(var(--arc-color-alpha-black-5), var(--arc-color-alpha-white-5)); 270 --arc-color-bg-theme-subtle: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-15)); 271 --arc-color-bg-theme-mid: light-dark(var(--arc-color-light-neutral-500), var(--arc-color-dark-neutral-300)); 272 --arc-color-bg-theme-stark: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-alpha-white-50)); 273 --arc-color-bg-theme-heavy: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 274 --arc-color-bg-success-muted: light-dark(var(--arc-color-light-green-50), var(--arc-color-dark-green-50)); 275 --arc-color-bg-success-subtle: light-dark(var(--arc-color-light-green-100), var(--arc-color-dark-green-100)); 276 --arc-color-bg-success-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 277 --arc-color-bg-success-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 278 --arc-color-bg-success-heavy: light-dark(var(--arc-color-light-green-800), var(--arc-color-dark-green-800)); 279 --arc-color-bg-warning-muted: light-dark(var(--arc-color-light-yellow-50), var(--arc-color-dark-yellow-50)); 280 --arc-color-bg-warning-subtle: light-dark(var(--arc-color-light-yellow-100), var(--arc-color-dark-yellow-100)); 281 --arc-color-bg-warning-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 282 --arc-color-bg-warning-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 283 --arc-color-bg-warning-heavy: light-dark(var(--arc-color-light-yellow-700), var(--arc-color-dark-yellow-700)); 284 --arc-color-bg-critical-muted: light-dark(var(--arc-color-light-red-50), var(--arc-color-dark-red-50)); 285 --arc-color-bg-critical-subtle: light-dark(var(--arc-color-light-red-100), var(--arc-color-dark-red-100)); 286 --arc-color-bg-critical-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-600)); 287 --arc-color-bg-critical-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-700)); 288 --arc-color-bg-critical-heavy: light-dark(var(--arc-color-light-red-800), var(--arc-color-dark-red-800)); 289 --arc-color-bg-info-muted: light-dark(var(--arc-color-light-purple-50), var(--arc-color-dark-purple-50)); 290 --arc-color-bg-info-subtle: light-dark(var(--arc-color-light-purple-100), var(--arc-color-dark-purple-100)); 291 --arc-color-bg-info-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 292 --arc-color-bg-info-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-700)); 293 --arc-color-bg-info-heavy: light-dark(var(--arc-color-light-purple-800), var(--arc-color-dark-purple-800)); 294 --arc-color-bg-brand-muted: light-dark(var(--arc-color-light-blue-50), var(--arc-color-dark-blue-50)); 295 --arc-color-bg-brand-subtle: light-dark(var(--arc-color-light-blue-100), var(--arc-color-dark-blue-100)); 296 --arc-color-bg-brand-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-400)); 297 --arc-color-bg-brand-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-600)); 298 --arc-color-bg-brand-heavy: light-dark(var(--arc-color-light-blue-800), var(--arc-color-dark-blue-800)); 299 --arc-color-bg-neutral-muted: light-dark(var(--arc-color-alpha-black-7), var(--arc-color-alpha-white-15)); 300 --arc-color-bg-neutral-subtle: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-25)); 301 --arc-color-bg-neutral-mid: light-dark(var(--arc-color-light-neutral-300), var(--arc-color-dark-neutral-400)); 302 --arc-color-bg-neutral-stark: light-dark(var(--arc-color-light-neutral-600), var(--arc-color-dark-neutral-600)); 303 --arc-color-bg-neutral-heavy: light-dark(var(--arc-color-light-neutral-800), var(--arc-color-dark-neutral-800)); 304 --arc-color-bg-orange-muted: light-dark(var(--arc-color-light-orange-50), var(--arc-color-dark-orange-50)); 305 --arc-color-bg-orange-subtle: light-dark(var(--arc-color-light-orange-100), var(--arc-color-dark-orange-100)); 306 --arc-color-bg-orange-mid: light-dark(var(--arc-color-light-orange-400), var(--arc-color-dark-orange-400)); 307 --arc-color-bg-orange-stark: light-dark(var(--arc-color-light-orange-600), var(--arc-color-dark-orange-600)); 308 --arc-color-bg-orange-heavy: light-dark(var(--arc-color-light-orange-800), var(--arc-color-dark-orange-800)); 309 --arc-color-bg-mint-muted: light-dark(var(--arc-color-light-mint-50), var(--arc-color-dark-mint-50)); 310 --arc-color-bg-mint-subtle: light-dark(var(--arc-color-light-mint-100), var(--arc-color-dark-mint-100)); 311 --arc-color-bg-mint-mid: light-dark(var(--arc-color-light-mint-400), var(--arc-color-dark-mint-400)); 312 --arc-color-bg-mint-stark: light-dark(var(--arc-color-light-mint-600), var(--arc-color-dark-mint-600)); 313 --arc-color-bg-mint-heavy: light-dark(var(--arc-color-light-mint-800), var(--arc-color-dark-mint-800)); 314 --arc-color-bg-maroon-muted: light-dark(var(--arc-color-light-maroon-50), var(--arc-color-dark-maroon-50)); 315 --arc-color-bg-maroon-subtle: light-dark(var(--arc-color-light-maroon-100), var(--arc-color-dark-maroon-100)); 316 --arc-color-bg-maroon-mid: light-dark(var(--arc-color-light-maroon-400), var(--arc-color-dark-maroon-400)); 317 --arc-color-bg-maroon-stark: light-dark(var(--arc-color-light-maroon-600), var(--arc-color-dark-maroon-700)); 318 --arc-color-bg-maroon-heavy: light-dark(var(--arc-color-light-maroon-800), var(--arc-color-dark-maroon-800)); 319 --arc-color-bg-blue-muted: light-dark(var(--arc-color-light-blue-50), var(--arc-color-dark-blue-50)); 320 --arc-color-bg-blue-subtle: light-dark(var(--arc-color-light-blue-100), var(--arc-color-dark-blue-100)); 321 --arc-color-bg-blue-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-400)); 322 --arc-color-bg-blue-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-600)); 323 --arc-color-bg-blue-heavy: light-dark(var(--arc-color-light-blue-800), var(--arc-color-dark-blue-800)); 324 --arc-color-bg-purple-muted: light-dark(var(--arc-color-light-purple-50), var(--arc-color-dark-purple-50)); 325 --arc-color-bg-purple-subtle: light-dark(var(--arc-color-light-purple-100), var(--arc-color-dark-purple-100)); 326 --arc-color-bg-purple-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 327 --arc-color-bg-purple-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-700)); 328 --arc-color-bg-purple-heavy: light-dark(var(--arc-color-light-purple-800), var(--arc-color-dark-purple-800)); 329 --arc-color-bg-green-muted: light-dark(var(--arc-color-light-green-50), var(--arc-color-dark-green-50)); 330 --arc-color-bg-green-subtle: light-dark(var(--arc-color-light-green-100), var(--arc-color-dark-green-100)); 331 --arc-color-bg-green-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 332 --arc-color-bg-green-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 333 --arc-color-bg-green-heavy: light-dark(var(--arc-color-light-green-800), var(--arc-color-dark-green-800)); 334 --arc-color-bg-yellow-muted: light-dark(var(--arc-color-light-yellow-50), var(--arc-color-dark-yellow-50)); 335 --arc-color-bg-yellow-subtle: light-dark(var(--arc-color-light-yellow-100), var(--arc-color-dark-yellow-100)); 336 --arc-color-bg-yellow-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 337 --arc-color-bg-yellow-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 338 --arc-color-bg-yellow-heavy: light-dark(var(--arc-color-light-yellow-700), var(--arc-color-dark-yellow-700)); 339 --arc-color-bg-red-muted: light-dark(var(--arc-color-light-red-50), var(--arc-color-dark-red-50)); 340 --arc-color-bg-red-subtle: light-dark(var(--arc-color-light-red-100), var(--arc-color-dark-red-100)); 341 --arc-color-bg-red-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-600)); 342 --arc-color-bg-red-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-700)); 343 --arc-color-bg-red-heavy: light-dark(var(--arc-color-light-red-800), var(--arc-color-dark-red-800)); 344 --arc-color-fg-primary: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 345 --arc-color-fg-secondary: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-dark-neutral-700)); 346 --arc-color-fg-on-hover-subtle: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 347 --arc-color-fg-on-hover-default: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 348 --arc-color-fg-on-hover-stark: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 349 --arc-color-fg-disabled: light-dark(var(--arc-color-alpha-black-40), var(--arc-color-alpha-white-40)); 350 --arc-color-fg-on-selected-subtle: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 351 --arc-color-fg-on-selected-default: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 352 --arc-color-fg-on-selected-stark: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 353 --arc-color-fg-on-theme-muted: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 354 --arc-color-fg-on-theme-subtle: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 355 --arc-color-fg-on-theme-mid: light-dark(var(--arc-color-light-neutral-100), var(--arc-color-dark-neutral-800)); 356 --arc-color-fg-on-theme-stark: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 357 --arc-color-fg-on-theme-heavy: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 358 --arc-color-fg-on-muted: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 359 --arc-color-fg-on-subtle: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 360 --arc-color-fg-on-mid: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 361 --arc-color-fg-on-stark: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 362 --arc-color-fg-on-heavy: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 363 --arc-color-fg-on-mono-inverse: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 364 --arc-color-fg-on-mono: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 365 --arc-color-fg-success-subtle: light-dark(var(--arc-color-light-green-300), var(--arc-color-dark-green-400)); 366 --arc-color-fg-success-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-600)); 367 --arc-color-fg-success-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-800)); 368 --arc-color-fg-warning-subtle: light-dark(var(--arc-color-light-yellow-300), var(--arc-color-dark-yellow-400)); 369 --arc-color-fg-warning-mid: light-dark(var(--arc-color-light-yellow-500), var(--arc-color-dark-yellow-600)); 370 --arc-color-fg-warning-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-800)); 371 --arc-color-fg-critical-subtle: light-dark(var(--arc-color-light-red-300), var(--arc-color-dark-red-500)); 372 --arc-color-fg-critical-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-700)); 373 --arc-color-fg-critical-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-800)); 374 --arc-color-fg-info-subtle: light-dark(var(--arc-color-light-purple-300), var(--arc-color-dark-purple-400)); 375 --arc-color-fg-info-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-600)); 376 --arc-color-fg-info-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-800)); 377 --arc-color-fg-brand-subtle: light-dark(var(--arc-color-light-blue-300), var(--arc-color-dark-blue-400)); 378 --arc-color-fg-brand-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-600)); 379 --arc-color-fg-brand-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-800)); 380 --arc-color-fg-orange-subtle: light-dark(var(--arc-color-light-orange-300), var(--arc-color-dark-orange-400)); 381 --arc-color-fg-orange-mid: light-dark(var(--arc-color-light-orange-400), var(--arc-color-dark-orange-600)); 382 --arc-color-fg-orange-stark: light-dark(var(--arc-color-light-orange-700), var(--arc-color-dark-orange-800)); 383 --arc-color-fg-mi
383nt-subtle: light-dark(var(--arc-color-light-mint-300), var(--arc-color-dark-mint-400)); 384 --arc-color-fg-mint-mid: light-dark(var(--arc-color-light-mint-500), var(--arc-color-dark-mint-600)); 385 --arc-color-fg-mint-stark: light-dark(var(--arc-color-light-mint-700), var(--arc-color-dark-mint-800)); 386 --arc-color-fg-maroon-subtle: light-dark(var(--arc-color-light-maroon-300), var(--arc-color-dark-maroon-400)); 387 --arc-color-fg-maroon-mid: light-dark(var(--arc-color-light-maroon-500), var(--arc-color-dark-maroon-600)); 388 --arc-color-fg-maroon-stark: light-dark(var(--arc-color-light-maroon-700), var(--arc-color-dark-maroon-800)); 389 --arc-color-fg-neutral-subtle: light-dark(var(--arc-color-light-neutral-300), var(--arc-color-dark-neutral-400)); 390 --arc-color-fg-neutral-mid: light-dark(var(--arc-color-light-neutral-500), var(--arc-color-dark-neutral-600)); 391 --arc-color-fg-neutral-stark: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-dark-neutral-800)); 392 --arc-color-fg-blue-subtle: light-dark(var(--arc-color-light-blue-300), var(--arc-color-dark-blue-400)); 393 --arc-color-fg-blue-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-600)); 394 --arc-color-fg-blue-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-800)); 395 --arc-color-fg-purple-subtle: light-dark(var(--arc-color-light-purple-300), var(--arc-color-dark-purple-400)); 396 --arc-color-fg-purple-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-600)); 397 --arc-color-fg-purple-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-800)); 398 --arc-color-fg-green-subtle: light-dark(var(--arc-color-light-green-300), var(--arc-color-dark-green-400)); 399 --arc-color-fg-green-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-600)); 400 --arc-color-fg-green-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-800)); 401 --arc-color-fg-yellow-subtle: light-dark(var(--arc-color-light-yellow-300), var(--arc-color-dark-yellow-400)); 402 --arc-color-fg-yellow-mid: light-dark(var(--arc-color-light-yellow-500), var(--arc-color-dark-yellow-600)); 403 --arc-color-fg-yellow-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-800)); 404 --arc-color-fg-red-subtle: light-dark(var(--arc-color-light-red-300), var(--arc-color-dark-red-500)); 405 --arc-color-fg-red-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-700)); 406 --arc-color-fg-red-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-800)); 407 --arc-color-fg-theme-muted: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-10)); 408 --arc-color-fg-theme-subtle: light-dark(var(--arc-color-alpha-black-25), var(--arc-color-alpha-white-25)); 409 --arc-color-fg-theme-mid: light-dark(var(--arc-color-light-neutral-500), var(--arc-color-dark-neutral-300)); 410 --arc-color-fg-theme-stark: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-alpha-white-50)); 411 --arc-color-fg-theme-heavy: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 412 --arc-color-border-muted: light-dark(var(--arc-color-alpha-black-3), var(--arc-color-alpha-white-5)); 413 --arc-color-border-subtle: light-dark(var(--arc-color-alpha-black-5), var(--arc-color-alpha-white-10)); 414 --arc-color-border-mid: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-20)); 415 --arc-color-border-stark: light-dark(var(--arc-color-alpha-black-30), var(--arc-color-alpha-white-30)); 416 --arc-color-border-on-stark: light-dark(var(--arc-color-light-neutral-500), var(--arc-color-dark-neutral-600)); 417 --arc-color-border-heavy: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 418 --arc-color-border-theme-heavy: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 419 --arc-color-border-selected: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-500)); 420 --arc-color-border-focus: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-700)); 421 --arc-color-border-success-subtle: light-dark(var(--arc-color-light-green-200), var(--arc-color-dark-green-300)); 422 --arc-color-border-success-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 423 --arc-color-border-success-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 424 --arc-color-border-warning-subtle: light-dark(var(--arc-color-light-yellow-200), var(--arc-color-dark-yellow-300)); 425 --arc-color-border-warning-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 426 --arc-color-border-warning-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 427 --arc-color-border-critical-subtle: light-dark(var(--arc-color-light-red-200), var(--arc-color-dark-red-300)); 428 --arc-color-border-critical-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-500)); 429 --arc-color-border-critical-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-800)); 430 --arc-color-border-info-subtle: light-dark(var(--arc-color-light-purple-200), var(--arc-color-dark-purple-300)); 431 --arc-color-border-info-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 432 --arc-color-border-info-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-600)); 433 --arc-color-border-brand-subtle: light-dark(var(--arc-color-light-blue-200), var(--arc-color-dark-blue-200)); 434 --arc-color-border-brand-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-600)); 435 --arc-color-border-brand-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-700)); 436 --arc-color-border-orange-subtle: light-dark(var(--arc-color-light-orange-200), var(--arc-color-dark-orange-200)); 437 --arc-color-border-orange-mid: light-dark(var(--arc-color-light-orange-400), var(--arc-color-dark-orange-400)); 438 --arc-color-border-orange-stark: light-dark(var(--arc-color-light-orange-600), var(--arc-color-dark-orange-600)); 439 --arc-color-border-mint-subtle: light-dark(var(--arc-color-light-mint-200), var(--arc-color-dark-mint-200)); 440 --arc-color-border-mint-mid: light-dark(var(--arc-color-light-mint-400), var(--arc-color-dark-mint-400)); 441 --arc-color-border-mint-stark: light-dark(var(--arc-color-light-mint-600), var(--arc-color-dark-mint-600)); 442 --arc-color-border-maroon-subtle: light-dark(var(--arc-color-light-maroon-200), var(--arc-color-dark-maroon-200)); 443 --arc-color-border-maroon-mid: light-dark(var(--arc-color-light-maroon-400), var(--arc-color-dark-maroon-400)); 444 --arc-color-border-maroon-stark: light-dark(var(--arc-color-light-maroon-600), var(--arc-color-dark-maroon-600)); 445 --arc-color-border-blue-subtle: light-dark(var(--arc-color-light-blue-200), var(--arc-color-dark-blue-200)); 446 --arc-color-border-blue-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-500)); 447 --arc-color-border-blue-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-600)); 448 --arc-color-border-purple-subtle: light-dark(var(--arc-color-light-purple-200), var(--arc-color-dark-purple-300)); 449 --arc-color-border-purple-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 450 --arc-color-border-purple-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-600)); 451 --arc-color-border-green-subtle: light-dark(var(--arc-color-light-green-200), var(--arc-color-dark-green-300)); 452 --arc-color-border-green-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 453 --arc-color-border-green-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 454 --arc-color-border-yellow-subtle: light-dark(var(--arc-color-light-yellow-200), var(--arc-color-dark-yellow-300)); 455 --arc-color-border-yellow-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 456 --arc-color-border-yellow-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 457 --arc-color-border-red-subtle: light-dark(var(--arc-color-light-red-200), var(--arc-color-dark-red-300)); 458 --arc-color-border-red-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-500)); 459 --arc-color-border-red-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-800)); 460 --arc-color-border-disabled: light-dark(var(--arc-color-alpha-black-20), var(--arc-color-alpha-white-20)); 461 --arc-color-border-theme-subtle: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-15)); 462 --arc-color-border-theme-mid: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-25)); 463 --arc-color-border-theme-stark: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-alpha-white-50)); 464 --arc-color-alpha-muted: light-dark(var(--arc-color-alpha-black-3), var(--arc-color-alpha-white-3)); 465 --arc-color-alpha-subtle: light-dark(var(--arc-color-alpha-black-7), var(--arc-color-alpha-white-15)); 466 --arc-color-alpha-mid: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-30)); 467 --arc-color-alpha-stark: light-dark(var(--arc-color-alpha-black-30), var(--arc-color-alpha-white-60)); 468 --arc-color-alpha-heavy: light-dark(var(--arc-color-alpha-black-60), var(--arc-color-alpha-white-70)); 469 } 470} 471/* 472 A NOTE ON USING ARC TOKENS (CSS VARIABLES) --------------------------\u2022 473 474 Tokens with \`--arc-internal-\` prefixes are internal only 475 - NOT FOR CONSUMER USE 476 - These are System/Internal things and are not intended to be 477 access or modified by consumers of the design system. 478 - Please reach out to #design-system in Slack for guidance or help, 479 or to request something new. 480 481
482 OVERRIDES, BE CAUTIOUS \u2022 These are available for acute adjustments, 483 but not needed in most cases. 484 ---------------------------------------------------------------------\u2022 485 --arc-font-size-base \u2022 Override if your app's \`rem\` size 486 isn't effectively 16px. For instance, 487 set to 1 if your \`rem\` is 10px. 488 489 --arc-font-variation-settings \u2022 Research \`font-variation-settings\` 490 before using this token. 491 492 --arc-font-size-mono \u2022 Controls size of monospace fonts. 493 --arc-line-height-title \u2022 Various text adjustment overrides... 494 --arc-line-height-heading 495 --arc-line-height-subheading 496 --arc-line-height-body 497 --arc-line-height-mono 498 --arc-letter-spacing-title 499 --arc-letter-spacing-heading 500 ---------------------------------------------------------------------\u2022 501*/ 502@layer arc-theme { 503 :root, 504 ::backdrop { 505 --arc-internal-font-size: var(--arc-font-size-base, 0.625); 506 --arc-internal-font-body: Inter, system-ui, sans-serif; 507 --arc-internal-font-expressive: "GT Walsheim", system-ui, sans-serif; 508 --arc-internal-font-mono: "Roboto Mono", monospace; 509 --arc-internal-font-size-mono: 0.875em; 510 --arc-internal-letter-spacing: -0.015em; 511 --arc-internal-font-vs: "opsz" 24; 512 --arc-font-family-expressive: var(--arc-internal-font-expressive); 513 --arc-font-family-title: var(--arc-internal-font-expressive); 514 --arc-font-family-heading: var(--arc-internal-font-expressive); 515 --arc-font-family-subheading: var(--arc-internal-font-body); 516 --arc-font-family-body: var(--arc-internal-font-body); 517 --arc-font-family-mono: var(--arc-internal-font-mono); 518 --arc-line-height-tight: 1.2; 519 --arc-line-height-standard: 1.4; 520 --arc-line-height-loose: 1.6; 521 --arc-line-height-title: var(--arc-line-height-tight); 522 --arc-line-height-heading: var(--arc-line-height-tight); 523 --arc-line-height-subheading: var(--arc-line-height-tight); 524 --arc-line-height-body: var(--arc-line-height-standard); 525 --arc-line-height-mono: var(--arc-line-height-standard); 526 --arc-letter-spacing-heading: var(--arc-internal-letter-spacing); 527 --arc-letter-spacing-title: var(--arc-internal-letter-spacing); 528 --arc-font-weight-400: 400; 529 --arc-font-weight-500: 500; 530 --arc-font-weight-600: 600; 531 --arc-font-weight-title: var(--arc-font-weight-600); 532 --arc-font-weight-heading: var(--arc-font-weight-600); 533 --arc-font-weight-subheading: var(--arc-font-weight-600); 534 --arc-font-weight-bold: var(--arc-font-weight-600); 535 --arc-font-weight-body: var(--arc-font-weight-400); 536 --arc-font-weight-normal: var(--arc-font-weight-400); 537 --arc-font-size-08: calc(0.8rem * var(--arc-internal-font-size)); 538 --arc-font-size-10: calc(1rem * var(--arc-internal-font-size)); 539 --arc-font-size-12: calc(1.2rem * var(--arc-internal-font-size)); 540 --arc-font-size-14: calc(1.4rem * var(--arc-internal-font-size)); 541 --arc-font-size-16: calc(1.6rem * var(--arc-internal-font-size)); 542 --arc-font-size-18: calc(1.8rem * var(--arc-internal-font-size)); 543 --arc-font-size-20: calc(2rem * var(--arc-internal-font-size)); 544 --arc-font-size-24: calc(2.4rem * var(--arc-internal-font-size)); 545 --arc-font-size-28: calc(2.8rem * var(--arc-internal-font-size)); 546 --arc-font-size-32: calc(3.2rem * var(--arc-internal-font-size)); 547 --arc-font-size-40: calc(4rem * var(--arc-internal-font-size)); 548 --arc-font-size-title-lg: var(--arc-font-size-40); 549 --arc-font-size-title-md: var(--arc-font-size-32); 550 --arc-font-size-title-sm: var(--arc-font-size-28); 551 --arc-font-size-heading-lg: var(--arc-font-size-24); 552 --arc-font-size-heading-md: var(--arc-font-size-20); 553 --arc-font-size-heading-sm: var(--arc-font-size-18); 554 --arc-font-size-subheading-lg: var(--arc-font-size-16); 555 --arc-font-size-subheading-md: var(--arc-font-size-14); 556 --arc-font-size-subheading-sm: var(--arc-font-size-12); 557 --arc-font-size-body-lg: var(--arc-font-size-16); 558 --arc-font-size-body-md: var(--arc-font-size-14); 559 --arc-font-size-body-sm: var(--arc-font-size-12); 560 --arc-font-size-body-xs: var(--arc-font-size-10); 561 --arc-font-size-mono-lg: var(--arc-font-size-14); 562 --arc-font-size-mono-md: var(--arc-font-size-12); 563 --arc-font-size-mono-sm: var(--arc-font-size-10); 564 } 565 [data-arc-theme~=font-family] { 566 font-family: var(--arc-font-family-body); 567 font-size: var(--arc-font-size-16); 568 font-weight: var(--arc-font-weight-body); 569 line-height: var(--arc-line-height-body, var(--arc-line-height-standard)); 570 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 571 } 572 [data-arc-theme~=font-family] :where(h1, h2, h3) { 573 font-family: var(--arc-font-family-heading); 574 font-weight: var(--arc-font-weight-heading); 575 letter-spacing: var(--arc-letter-spacing-heading); 576 line-height: var(--arc-internal-line-height, var(--arc-line-height-heading)); 577 } 578 [data-arc-theme~=font-family] :where(h4, h5, h6) { 579 font-family: var(--arc-font-family-subheading); 580 font-weight: var(--arc-font-weight-subheading); 581 line-height: var(--arc-internal-line-height, var(--arc-line-height-subheading)); 582 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 583 } 584 [data-arc-theme~=font-family] :where(h1) { 585 font-size: var(--arc-font-size-24); 586 } 587 [data-arc-theme~=font-family] :where(h2) { 588 font-size: var(--arc-font-size-20); 589 } 590 [data-arc-theme~=font-family] :where(h3) { 591 font-size: var(--arc-font-size-18); 592 } 593 [data-arc-theme~=font-family] :where(h4) { 594 font-size: var(--arc-font-size-16); 595 } 596 [data-arc-theme~=font-family] :where(h5) { 597 font-size: var(--arc-font-size-14); 598 } 599 [data-arc-theme~=font-family] :where(h6) { 600 font-size: var(--arc-font-size-12); 601 } 602 [data-arc-theme~=font-family] :where(b, strong) { 603 font-weight: var(--arc-font-weight-600); 604 } 605 [data-arc-theme~=font-family] :where(i, em) { 606 font-style: italic; 607 } 608 [data-arc-theme~=font-family] :where(u) { 609 text-decoration: underline; 610 } 611 [data-arc-theme~=font-family] :where(pre, code) { 612 font-family: var(--arc-font-family-mono); 613 font-size: var(--arc-font-size-mono, var(--arc-internal-font-size-mono)); 614 } 615} 616@layer arc-utils { 617 .arc-font-title-lg { 618 font-size: var(--arc-font-size-40); 619 } 620 .arc-font-title-md { 621 font-size: var(--arc-font-size-32); 622 } 623 .arc-font-title-sm { 624 font-size: var(--arc-font-size-28); 625 } 626 :is(.arc-font-title, .arc-font-title-lg, .arc-font-title-md, .arc-font-title-sm) { 627 font-family: var(--arc-font-family-title); 628 font-weight: var(--arc-font-weight-title); 629 letter-spacing: var(--arc-letter-spacing-title); 630 line-height: var(--arc-internal-line-height, var(--arc-line-height-title)); 631 } 632 .arc-font-heading-lg { 633 font-size: var(--arc-font-size-24); 634 } 635 .arc-font-heading-md { 636 font-size: var(--arc-font-size-20); 637 } 638 .arc-font-heading-sm { 639 font-size: var(--arc-font-size-18); 640 } 641 :is(.arc-font-heading, .arc-font-heading-lg, .arc-font-heading-md, .arc-font-heading-sm) { 642 font-family: var(--arc-font-family-heading); 643 font-weight: var(--arc-font-weight-heading); 644 letter-spacing: var(--arc-letter-spacing-heading); 645 line-height: var(--arc-internal-line-height, var(--arc-line-height-heading)); 646 } 647 .arc-font-subheading-lg { 648 font-size: var(--arc-font-size-16); 649 } 650 .arc-font-subheading-md { 651 font-size: var(--arc-font-size-14); 652 } 653 .arc-font-subheading-sm { 654 font-size: var(--arc-font-size-12); 655 } 656 :is(.arc-font-subheading, .arc-font-subheading-lg, .arc-font-subheading-md, .arc-font-subheading-sm) { 657 font-family: var(--arc-font-family-subheading); 658 font-weight: var(--arc-font-weight-subheading); 659 line-height: var(--arc-internal-line-height, var(--arc-line-height-subheading)); 660 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 661 } 662 .arc-font-body-lg { 663 font-size: var(--arc-font-size-16); 664 } 665 .arc-font-body-md { 666 font-size: var(--arc-font-size-14); 667 } 668 .arc-font-body-sm { 669 font-size: var(--arc-font-size-12); 670 } 671 /** @deprecated - 'xsm' is not a valid size value in our sizing names */ 672 :is(.arc-font-body-xsm), 673 :is(.arc-font-body-xs) { 674 font-size: var(--arc-font-size-10); 675 } 676 /** @deprecated - 'xsm' is not a valid size value in our sizing names */ 677 :is(.arc-font-body-xsm), 678 :is(.arc-font-body, .arc-font-body-lg, .arc-font-body-md, .arc-font-body-sm) { 679 font-family: var(--arc-font-family-body); 680 line-height: var(--arc-internal-line-height, var(--arc-line-height-body)); 681 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 682 } 683 .arc-font-mono-lg { 684 font-size: var(--arc-font-size-14); 685 } 686 .arc-font-mono-md { 687 font-size: var(--arc-font-size-12); 688 } 689 .arc-font-mono-sm { 690 font-size: var(--arc-font-size-10); 691 } 692 :is(.arc-font-mono, .arc-font-mono-lg, .arc-font-mono-md, .arc-font-mono-sm) { 693 font-family: var(--arc-font-family-mono); 694 line-height: var(--arc-internal-line-height, var(--arc-line-height-mono)); 695 } 696 .arc-line-height-loose { 697 --arc-internal-line-height: var(--arc-line-height-loose); 698 line-height: var(--arc-internal-line-height); 699 } 700 .arc-line-height-standard { 701 --arc-internal-line-height: var(--arc-line-height-standard); 702 line-height: var(--arc-internal-line-height); 703 } 704 .arc-line-height-tight { 705 --arc-internal-line-height: var(--arc-line-height-tight); 706 line-height: var(--arc-internal-line-height); 707 } 708} 709@layer arc-theme { 710 :root, 711 ::backdrop { 712 --arc-internal-space: 0.8rem * var(--arc-internal-font-size); 713 --arc-internal-size: 0.8rem * var(--arc-internal-font-size); 714 --arc-space-0: 0; 715 --arc-space-0-25: calc(0.25 * var(--arc-internal-space)); 716 --arc-space-0-5: calc(0.5 * var(--arc-internal-space)); 717 --arc-space-0-75: calc(0.75 * var(--arc-internal-space)); 718 --arc-space-1: calc(var(--arc-internal-space)); 719 --arc-space-1-25: calc(1.25 * var(--arc-internal-space)); 720 --arc-space-1-5: calc(1.5 * var(--arc-internal-space)); 721 --arc-space-2: calc(2 * var(--arc-internal-space)); 722 --arc-space-2-5: calc(2.5 * var(--arc-internal-space)); 723 --arc-space-3: calc(3 * var(--arc-internal-space)); 724 --arc-space-4: calc(4 * var(--arc-internal-space)); 725 --arc-space-5: calc(5 * var(--arc-internal-space)); 726 --arc-space-6: calc(6 * var(--arc-internal-space)); 727 --arc-space-7: calc(7 * var(--arc-internal-space)); 728 --arc-space-8: calc(8 * var(--arc-internal-space)); 729 --arc-space-9: calc(9 * var(--arc-internal-space)); 730 --arc-space-10: calc(10 * var(--arc-internal-space)); 731 --arc-space-11: calc(11 * var(--arc-internal-space)); 732 --arc-space-12: calc(12 * var(--arc-internal-space)); 733 --arc-size-0: 0; 734 --arc-size-0-25: calc(0.25 * var(--arc-internal-size)); 735 --arc-size-0-5: calc(0.5 * var(--arc-internal-size)); 736 --arc-size-0-75: calc(0.75 * var(--arc-internal-size)); 737 --arc-size-1: calc(var(--arc-internal-size)); 738 --arc-size-1-25: calc(1.25 * var(--arc-internal-size)); 739 --arc-size-1-5: calc(1.5 * var(--arc-internal-size)); 740 --arc-size-1-75: calc(1.75 * var(--arc-internal-size)); 741 --arc-size-2: calc(2 * var(--arc-internal-size)); 742 --arc-size-2-25: calc(2.25 * var(--arc-internal-size)); 743 --arc-size-2-5: calc(2.5 * var(--arc-internal-size)); 744 --arc-size-2-75: calc(2.75 * var(--arc-internal-size)); 745 --arc-size-3: calc(3 * var(--arc-internal-size)); 746 --arc-size-3-25: calc(3.25 * var(--arc-internal-size)); 747 --arc-size-3-5: calc(3.5 * var(--arc-internal-size)); 748 --arc-size-3-75: calc(3.75 * var(--arc-internal-size)); 749 --arc-size-4: calc(4 * var(--arc-internal-size)); 750 --arc-size-4-25: calc(4.25 * var(--arc-internal-size)); 751 --arc-size-4-5: calc(4.5 * var(--arc-internal-size)); 752 --arc-size-4-75: calc(4.75 * var(--arc-internal-size)); 753 --arc-size-5: calc(5 * var(--arc-internal-size)); 754 --arc-size-6: calc(6 * var(--arc-internal-size)); 755 --arc-size-7: calc(7 * var(--arc-internal-size)); 756 --arc-size-8: calc(8 * var(--arc-internal-size)); 757 --arc-size-9: calc(9 * var(--arc-internal-size)); 758 --arc-size-10: calc(10 * var(--arc-internal-size)); 759 --arc-size-11: calc(11 * var(--arc-internal-size)); 760 --arc-size-12: calc(12 * var(--arc-internal-size)); 761 --arc-size-13: calc(13 * var(--arc-internal-size)); 762 --arc-size-14: calc(14 * var(--arc-internal-size)); 763 --arc-size-15: calc(15 * var(--arc-internal-size)); 764 --arc-size-16: calc(16 * var(--arc-internal-size)); 765 --arc-size-17: calc(17 * var(--arc-internal-size)); 766 --arc-size-18: calc(18 * var(--arc-internal-size)); 767 --arc-size-19: calc(19 * var(--arc-internal-size)); 768 --arc-size-20: calc(20 * var(--arc-internal-size)); 769 --arc\u2022space\u202216m: min(-16px, -1rem); 770 --arc\u2022space\u202214m: min(-14px, -0.875rem); 771 --arc\u2022space\u202212m: min(-12px, -0.75rem); 772 --arc\u2022space\u202210m: min(-10px, -0.625rem); 773 --arc\u2022space\u20228m: min(-8px, -0.5rem); 774 --arc\u2022space\u20226m: min(-6px, -0.375rem); 775 --arc\u2022space\u20225m: min(-5px, -0.3125rem); 776 --arc\u2022space\u20224m: min(-4px, -0.25rem); 777 --arc\u2022space\u20223m: min(-3px, -0.1875rem);
778 --arc\u2022space\u20222m: min(-2px, -0.125rem); 779 --arc\u2022space\u20221m: min(-1px, -0.0625rem); 780 --arc\u2022space\u20220: 0px; 781 --arc\u2022space\u20221: max(1px, 0.0625rem); 782 --arc\u2022space\u20222: max(2px, 0.125rem); 783 --arc\u2022space\u20223: max(3px, 0.1875rem); 784 --arc\u2022space\u20224: max(4px, 0.25rem); 785 --arc\u2022space\u20225: max(5px, 0.3125rem); 786 --arc\u2022space\u20226: max(6px, 0.375rem); 787 --arc\u2022space\u20228: max(8px, 0.5rem); 788 --arc\u2022space\u202210: max(10px, 0.625rem); 789 --arc\u2022space\u202212: max(12px, 0.75rem); 790 --arc\u2022space\u202214: max(14px, 0.875rem); 791 --arc\u2022space\u202216: max(16px, 1rem); 792 --arc\u2022space\u202218: max(18px, 1.125rem); 793 --arc\u2022space\u202220: max(20px, 1.25rem); 794 --arc\u2022space\u202224: max(24px, 1.5rem); 795 --arc\u2022space\u202232: max(32px, 2rem); 796 --arc\u2022space\u202240: max(40px, 2.5rem); 797 --arc\u2022space\u202248: max(48px, 3rem); 798 --arc\u2022space\u202256: max(56px, 3.5rem); 799 --arc\u2022space\u202264: max(64px, 4rem); 800 --arc\u2022space\u202272: max(72px, 4.5rem); 801 --arc\u2022space\u202280: max(80px, 5rem); 802 --arc\u2022space\u202288: max(88px, 5.5rem); 803 --arc\u2022space\u202296: max(96px, 6rem); 804 --arc\u2022size\u202216m: min(-16px, -1rem); 805 --arc\u2022size\u202212m: min(-12px, -0.75rem); 806 --arc\u2022size\u202210m: min(-10px, -0.625rem); 807 --arc\u2022size\u20228m: min(-8px, -0.5rem); 808 --arc\u2022size\u20226m: min(-6px, -0.375rem); 809 --arc\u2022size\u20224m: min(-4px, -0.25rem); 810 --arc\u2022size\u20223m: min(-3px, -0.1875rem); 811 --arc\u2022size\u20222m: min(-2px, -0.125rem); 812 --arc\u2022size\u20221m: min(-1px, -0.0625rem); 813 --arc\u2022size\u20220: 0px; 814 --arc\u2022size\u20221: max(1px, 0.0625rem); 815 --arc\u2022size\u20222: max(2px, 0.125rem); 816 --arc\u2022size\u20223: max(3px, 0.1875rem); 817 --arc\u2022size\u20224: max(4px, 0.25rem); 818 --arc\u2022size\u20225: max(5px, 0.3125rem); 819 --arc\u2022size\u20226: max(6px, 0.375rem); 820 --arc\u2022size\u20228: max(8px, 0.5rem); 821 --arc\u2022size\u202210: max(10px, 0.625rem); 822 --arc\u2022size\u202212: max(12px, 0.75rem); 823 --arc\u2022size\u202214: max(14px, 0.875rem); 824 --arc\u2022size\u202216: max(16px, 1rem); 825 --arc\u2022size\u202218: max(18px, 1.125rem); 826 --arc\u2022size\u202220: max(20px, 1.25rem); 827 --arc\u2022size\u202222: max(22px, 1.375rem); 828 --arc\u2022size\u202224: max(24px, 1.5rem); 829 --arc\u2022size\u202226: max(26px, 1.625rem); 830 --arc\u2022size\u202228: max(28px, 1.75rem); 831 --arc\u2022size\u202230: max(30px, 1.875rem); 832 --arc\u2022size\u202232: max(32px, 2rem); 833 --arc\u2022size\u202234: max(34px, 2.125rem); 834 --arc\u2022size\u202236: max(36px, 2.25rem); 835 --arc\u2022size\u202238: max(38px, 2.375rem); 836 --arc\u2022size\u202240: max(40px, 2.5rem); 837 --arc\u2022size\u202242: max(42px, 2.625rem); 838 --arc\u2022size\u202244: max(44px, 2.75rem); 839 --arc\u2022size\u202246: max(46px, 2.875rem); 840 --arc\u2022size\u202248: max(48px, 3rem); 841 --arc\u2022size\u202250: max(50px, 3.125rem); 842 --arc\u2022size\u202252: max(52px, 3.25rem); 843 --arc\u2022size\u202254: max(54px, 3.375rem); 844 --arc\u2022size\u202256: max(56px, 3.5rem); 845 --arc\u2022size\u202258: max(58px, 3.625rem); 846 --arc\u2022size\u202260: max(60px, 3.75rem); 847 --arc\u2022size\u202264: max(64px, 4rem); 848 --arc\u2022size\u202268: max(68px, 4.25rem); 849 --arc\u2022size\u202272: max(72px, 4.5rem); 850 --arc\u2022size\u202276: max(76px, 4.75rem); 851 --arc\u2022size\u202280: max(80px, 5rem); 852 --arc\u2022size\u202288: max(88px, 5.5rem); 853 --arc\u2022size\u202296: max(96px, 6rem); 854 --arc\u2022size\u2022104: max(104px, 6.5rem); 855 --arc\u2022size\u2022112: max(112px, 7rem); 856 --arc\u2022size\u2022120: max(120px, 7.5rem); 857 --arc\u2022size\u2022128: max(128px, 8rem); 858 --arc\u2022size\u2022136: max(136px, 8.5rem); 859 --arc\u2022size\u2022144: max(144px, 9rem); 860 --arc\u2022size\u2022152: max(152px, 9.5rem); 861 --arc\u2022size\u2022160: max(160px, 10rem); 862 } 863} 864@layer arc-theme { 865 :root, 866 ::backdrop { 867 --arc-alpha-0: 0%; 868 --arc-alpha-3: 3%; 869 --arc-alpha-5: 5%; 870 --arc-alpha-10: 10%; 871 --arc-alpha-20: 20%; 872 --arc-alpha-25: 25%; 873 --arc-alpha-30: 30%; 874 --arc-alpha-40: 40%; 875 --arc-alpha-50: 50%; 876 --arc-alpha-60: 60%; 877 --arc-alpha-70: 70%; 878 --arc-alpha-80: 80%; 879 --arc-alpha-90: 90%; 880 --arc-alpha-95: 95%; 881 --arc-alpha-100: 100%; 882 --arc-border-radius-none: 0px; 883 --arc-border-radius-sm: max(2px, 0.125em); 884 --arc-border-radius-md: max(4px, 0.25em); 885 --arc-border-radius-lg: max(8px, 0.5em); 886 --arc-border-radius-xl: max(16px, 1em); 887 --arc-border-radius-circle: 50%; 888 --arc-border-radius-pill: 100vh; 889 --arc-border-width-none: 0px; 890 --arc-border-width-sm: max(1px, 0.0625em); 891 --arc-border-width-md: max(2px, 0.125em); 892 --arc-border-width-lg: max(3px, 0.1875em); 893 --arc-border-width-xl: max(4px, 0.25em); 894 /* dynamic shadow tokens */ 895 --arc-shadow-none: none; 896 --arc-shadow-sm: 0 0 max(4px, 0.25em) 0 var(--arc-color-shadow-sm); 897 --arc-shadow-md: 0 max(2px, 0.125em) max(6px, 0.375em) 0 var(--arc-color-shadow-md); 898 --arc-shadow-lg: 0 max(4px, 0.25em) max(24px, 1.5em) 0 var(--arc-color-shadow-lg); 899 --arc-shadow-xl: 0 max(12px, 0.75em) max(48px, 3em) 0 var(--arc-color-shadow-xl); 900 /* static tokens (primitive colors) */ 901 --arc-shadow-dark-none: none; 902 --arc-shadow-dark-sm: 0 0 max(4px, 0.25em) 0 var(--arc-color-alpha-black-60); 903 --arc-shadow-dark-md: 0 max(2px, 0.125em) max(6px, 0.375em) 0 var(--arc-color-alpha-black-50); 904 --arc-shadow-dark-lg: 0 max(6px, 0.375em) max(24px, 1.5em) 0 var(--arc-color-alpha-black-40); 905 --arc-shadow-dark-xl: 0 max(12px, 0.75em) max(48px, 3em) 0 var(--arc-color-alpha-black-40); 906 /* surface shadow tokens */ 907 --arc-surface-raised-shadow: var(--arc-shadow-md); 908 --arc-surface-floating-shadow: var(--arc-shadow-lg); 909 } 910} 911@layer arc-utils { 912 /* Gradients -----------------------------------------------------\u2022 */ 913 [arc-gradient] { 914 background-clip: text; 915 color: transparent; 916 } 917 [arc-gradient][arc-icon] { 918 height: var(--arc-icon-height, auto); 919 max-height: var(--arc-icon-max-height, none); 920 } 921 :is([arc-gradient], [arc-gradient=ai], [arc-gradient=ai-200]) { 922 background-image: var(--arc-gradient-ai-200); 923 } 924 [arc-gradient=ai-50] { 925 background-image: var(--arc-gradient-ai-50); 926 } 927 [arc-gradient=ai-100] { 928 background-image: var(--arc-gradient-ai-100); 929 } 930 [arc-gradient=ai-300] { 931 background-image: var(--arc-gradient-ai-300); 932 } 933 [arc-gradient=ai-400] { 934 background-image: var(--arc-gradient-ai-400); 935 } 936 [arc-gradient=ai-500] { 937 background-image: var(--arc-gradient-ai-500); 938 } 939 [arc-gradient=ai-600] { 940 background-image: var(--arc-gradient-ai-600); 941 } 942 /* Shadows -------------------------------------------------------\u2022 */ 943 [arc-shadow=sm] { 944 box-shadow: var(--arc-shadow-sm); 945 } 946 [arc-shadow=md] { 947 box-shadow: var(--arc-shadow-md); 948 } 949 [arc-shadow=lg] { 950 box-shadow: var(--arc-shadow-lg); 951 } 952 [arc-shadow=xl] { 953 box-shadow: var(--arc-shadow-xl); 954 } 955 /* Surfaces ------------------------------------------------------\u2022 */ 956 [arc-surface=primary] { 957 color: var(--arc-surface-primary-color, var(--arc-color-fg-primary)); 958 background: var(--arc-surface-primary-background, var(--arc-color-bg-primary)); 959 } 960 [arc-surface=secondary] { 961 color: var(--arc-surface-secondary-color, var(--arc-color-fg-primary)); 962 background: var(--arc-surface-secondary-background, var(--arc-color-bg-secondary)); 963 } 964 [arc-surface=inset] { 965 color: var(--arc-surface-inset-color, var(--arc-color-fg-primary)); 966 background: var(--arc-surface-inset-background, var(--arc-color-bg-tertiary)); 967 } 968 [arc-surface=raised] { 969 color: var(--arc-surface-raised-color, var(--arc-color-fg-primary)); 970 background: var(--arc-surface-raised-background, var(--arc-color-bg-primary));
971 box-shadow: var(--arc-surface-raised-box-shadow, var(--arc-surface-raised-shadow)); 972 z-index: var(--arc-surface-raised-z-index, 1); 973 } 974 [arc-surface=floating] { 975 color: var(--arc-surface-floating-color, var(--arc-color-fg-primary)); 976 background: var(--arc-surface-floating-background, var(--arc-color-bg-primary)); 977 box-shadow: var(--arc-surface-floating-box-shadow, var(--arc-surface-floating-shadow)); 978 z-index: var(--arc-surface-floating-z-index, 2); 979 } 980 /* Scheme (proximity via inheritance) ----------------------------\u2022 */ 981 :root:not([arc-scheme]) { 982 --arc\u2022color\u2022scheme: light; 983 --arc\u2022color\u2022scheme\u2022inverse: dark; 984 } 985 [arc-scheme=light] { 986 --arc\u2022color\u2022scheme: light; 987 --arc\u2022color\u2022scheme\u2022inverse: dark; 988 } 989 [arc-scheme=dark] { 990 --arc\u2022color\u2022scheme: dark; 991 --arc\u2022color\u2022scheme\u2022inverse: light; 992 } 993 [arc-scheme=inverse] { 994 --arc\u2022color\u2022scheme: var(--arc\u2022color\u2022scheme\u2022inverse); 995 } 996 :root:not([arc-scheme]), 997 [arc-scheme] { 998 color-scheme: var(--arc\u2022color\u2022scheme, light); 999 } 1000} 1001:root, 1002::backdrop { 1003 /* @deprecated background variables - please update all instances */ 1004 --arc-color-alpha-white-03: var(--arc-color-alpha-white-3); 1005 --arc-color-alpha-white-05: var(--arc-color-alpha-white-5); 1006 --arc-color-alpha-black-03: var(--arc-color-alpha-black-3); 1007 --arc-color-alpha-black-05: var(--arc-color-alpha-black-5); 1008 --arc-color-neutral-000: var(--arc-color-light-neutral-0); 1009 --arc-color-neutral-050: var(--arc-color-light-neutral-50); 1010 --arc-color-neutral-100: var(--arc-color-light-neutral-100); 1011 --arc-color-neutral-200: var(--arc-color-light-neutral-200); 1012 --arc-color-neutral-300: var(--arc-color-light-neutral-300); 1013 --arc-color-neutral-400: var(--arc-color-light-neutral-400); 1014 --arc-color-neutral-500: var(--arc-color-light-neutral-500); 1015 --arc-color-neutral-600: var(--arc-color-light-neutral-600); 1016 --arc-color-neutral-700: var(--arc-color-light-neutral-700); 1017 --arc-color-neutral-800: var(--arc-color-light-neutral-800); 1018 --arc-color-neutral-900: var(--arc-color-light-neutral-900); 1019 --arc-color-blue-050: var(--arc-color-light-blue-50); 1020 --arc-color-blue-100: var(--arc-color-light-blue-100); 1021 --arc-color-blue-200: var(--arc-color-light-blue-200); 1022 --arc-color-blue-300: var(--arc-color-light-blue-300); 1023 --arc-color-blue-400: var(--arc-color-light-blue-400); 1024 --arc-color-blue-500: var(--arc-color-light-blue-500); 1025 --arc-color-blue-600: var(--arc-color-light-blue-600); 1026 --arc-color-blue-700: var(--arc-color-light-blue-700); 1027 --arc-color-blue-800: var(--arc-color-light-blue-800); 1028 --arc-color-blue-900: var(--arc-color-light-blue-900); 1029 --arc-color-purple-050: var(--arc-color-light-purple-50); 1030 --arc-color-purple-100: var(--arc-color-light-purple-100); 1031 --arc-color-purple-200: var(--arc-color-light-purple-200); 1032 --arc-color-purple-300: var(--arc-color-light-purple-300); 1033 --arc-color-purple-400: var(--arc-color-light-purple-400); 1034 --arc-color-purple-500: var(--arc-color-light-purple-500); 1035 --arc-color-purple-600: var(--arc-color-light-purple-600); 1036 --arc-color-purple-700: var(--arc-color-light-purple-700); 1037 --arc-color-purple-800: var(--arc-color-light-purple-800); 1038 --arc-color-purple-900: var(--arc-color-light-purple-900); 1039 --arc-color-maroon-050: var(--arc-color-light-maroon-50); 1040 --arc-color-maroon-100: var(--arc-color-light-maroon-100); 1041 --arc-color-maroon-200: var(--arc-color-light-maroon-200); 1042 --arc-color-maroon-300: var(--arc-color-light-maroon-300); 1043 --arc-color-maroon-400: var(--arc-color-light-maroon-400); 1044 --arc-color-maroon-500: var(--arc-color-light-maroon-500); 1045 --arc-color-maroon-600: var(--arc-color-light-maroon-600); 1046 --arc-color-maroon-700: var(--arc-color-light-maroon-700); 1047 --arc-color-maroon-800: var(--arc-color-light-maroon-800); 1048 --arc-color-maroon-900: var(--arc-color-light-maroon-900); 1049 --arc-color-red-050: var(--arc-color-light-red-50); 1050 --arc-color-red-100: var(--arc-color-light-red-100); 1051 --arc-color-red-200: var(--arc-color-light-red-200); 1052 --arc-color-red-300: var(--arc-color-light-red-300); 1053 --arc-color-red-400: var(--arc-color-light-red-400); 1054 --arc-color-red-500: var(--arc-color-light-red-500); 1055 --arc-color-red-600: var(--arc-color-light-red-600); 1056 --arc-color-red-700: var(--arc-color-light-red-700); 1057 --arc-color-red-800: var(--arc-color-light-red-800); 1058 --arc-color-red-900: var(--arc-color-light-red-900); 1059 --arc-color-orange-050: var(--arc-color-light-orange-50); 1060 --arc-color-orange-100: var(--arc-color-light-orange-100); 1061 --arc-color-orange-200: var(--arc-color-light-orange-200); 1062 --arc-color-orange-300: var(--arc-color-light-orange-300); 1063 --arc-color-orange-400: var(--arc-color-light-orange-400); 1064 --arc-color-orange-500: var(--arc-color-light-orange-500); 1065 --arc-color-orange-600: var(--arc-color-light-orange-600); 1066 --arc-color-orange-700: var(--arc-color-light-orange-700); 1067 --arc-color-orange-800: var(--arc-color-light-orange-800); 1068 --arc-color-orange-900: var(--arc-color-light-orange-900); 1069 --arc-color-yellow-050: var(--arc-color-light-yellow-50); 1070 --arc-color-yellow-100: var(--arc-color-light-yellow-100); 1071 --arc-color-yellow-200: var(--arc-color-light-yellow-200); 1072 --arc-color-yellow-300: var(--arc-color-light-yellow-300); 1073 --arc-color-yellow-400: var(--arc-color-light-yellow-400); 1074 --arc-color-yellow-500: var(--arc-color-light-yellow-500); 1075 --arc-color-yellow-600: var(--arc-color-light-yellow-600); 1076 --arc-color-yellow-700: var(--arc-color-light-yellow-700); 1077 --arc-color-yellow-800: var(--arc-color-light-yellow-800); 1078 --arc-color-yellow-900: var(--arc-color-light-yellow-900); 1079 --arc-color-green-050: var(--arc-color-light-green-50); 1080 --arc-color-green-100: var(--arc-color-light-green-100); 1081 --arc-color-green-200: var(--arc-color-light-green-200); 1082 --arc-color-green-300: var(--arc-color-light-green-300); 1083 --arc-color-green-400: var(--arc-color-light-green-400); 1084 --arc-color-green-500: var(--arc-color-light-green-500); 1085 --arc-color-green-600: var(--arc-color-light-green-600); 1086 --arc-color-green-700: var(--arc-color-light-green-700); 1087 --arc-color-green-800: var(--arc-color-light-green-800); 1088 --arc-color-green-900: var(--arc-color-light-green-900); 1089 --arc-color-mint-050: var(--arc-color-light-mint-50); 1090 --arc-color-mint-100: var(--arc-color-light-mint-100); 1091 --arc-color-mint-200: var(--arc-color-light-mint-200); 1092 --arc-color-mint-300: var(--arc-color-light-mint-300); 1093 --arc-color-mint-400: var(--arc-color-light-mint-400); 1094 --arc-color-mint-500: var(--arc-color-light-mint-500); 1095 --arc-color-mint-600: var(--arc-color-light-mint-600); 1096 --arc-color-mint-700: var(--arc-color-light-mint-700); 1097 --arc-color-mint-800: var(--arc-color-light-mint-800); 1098 --arc-color-mint-900: var(--arc-color-light-mint-900); 1099 --arc-gradient-ai-050: var(--arc-gradient-ai-50); 1100 --arc-color-ai-purple-050: #fbf2ff; 1101 --arc-color-ai-purple-100: #efccff; 1102 --arc-color-ai-purple-200: #9c15ff; 1103 --arc-color-ai-purple-300: #680278; 1104 --arc-color-ai-purple-400: #5d3668; 1105 --arc-color-ai-purple-500: #37003f; 1106 --arc-color-ai-purple-600: #27002c; 1107 --arc-color-ai-blue-050: #f4fbff; 1108 --arc-color-ai-blue-100: #d2f1fe; 1109 --arc-color-ai-blue-200: #1eb4fb; 1110 --arc-color-ai-blue-300: #0179d0; 1111 --arc-color-ai-blue-400: #36648c; 1112 --arc-color-ai-blue-500: #004273; 1113 --arc-color-ai-blue-600: #012a48; 1114 /* @deprecated background variables - please update all instances */ 1115 --arc-color-background-primary: var(--arc-color-bg-primary); 1116 --arc-color-background-primary-hover: var(--arc-color-bg-hover-default); 1117 --arc-color-background-primary-selected-subtle: var(--arc-color-bg-selected-subtle); 1118 --arc-color-background-primary-selected: var(--arc-color-bg-selected-default); 1119 --arc-color-background-primary-selected-stark: var(--arc-color-bg-selected-stark); 1120 --arc-color-background-secondary: var(--arc-color-bg-secondary); 1121 --arc-color-background-secondary-hover: var(--arc-color-bg-hover-default); 1122 --arc-color-background-tertiary: var(--arc-color-bg-tertiary); 1123 --arc-color-background-inverse: var(--arc-color-light-neutral-1000); 1124 --arc-color-overlay-dark: var(--arc-color-overlay-stark); 1125 --arc-color-overlay-light: var(--arc-color-overlay-subtle); 1126 /* @deprecated foreground variables - please update all instances */ 1127 --arc-color-text-primary: var(--arc-color-fg-primary); 1128 --arc-color-icon-primary: var(--arc-color-fg-primary); 1129 --arc-color-text-secondary: var(--arc-color-fg-secondary); 1130 --arc-color-icon-secondary: var(--arc-color-fg-secondary); 1131 --arc-color-icon-primary-hover: var(--arc-color-fg-hover); 1132 --arc-color-text-primary-hover: var(--arc-color-fg-hover); 1133 --arc-color-text-secondary-hover: var(--arc-color-fg-hover-heavy); 1134 --arc-color-icon-secondary-hover: var(--arc-color-fg-hover-heavy); 1135 --arc-color-text-disabled: var(--arc-color-fg-disabled); 1136 --arc-color-icon-disabled: var(--arc-color-fg-disabled); 1137 --arc-color-text-inverse: var(--arc-color-dark-neutral-1000); 1138 --arc-color-icon-inverse: var(--arc-color-dark-neutral-1000); 1139 --arc-color-text-inverse-secondary: var(--arc-color-dark-neutral-700); 1140 --arc-color-icon-inverse-secondary: var(--arc-color-dark-neutral-700); 1141 --arc-color-text-inverse-hover: var(--arc-color-dark-neutral-700); 1142 --arc-color-icon-inverse-hover: var(--arc-color-dark-neutral-700); 1143 --arc-color-text-inverse-disabled: var(--arc-color-alpha-white-30); 1144 --arc-color-icon-inverse-disabled: var(--arc-color-alpha-white-30); 1145 --arc-color-text-info: var(--arc-color-fg-info-stark); 1146 --arc-color-icon-info: var(--arc-color-fg-info-stark); 1147 --arc-color-text-brand: var(--arc-color-fg-brand-stark); 1148 --arc-color-icon-brand: var(--arc-color-fg-brand-mid); 1149 --arc-color-text-success: var(--arc-color-fg-success-stark); 1150 --arc-color-icon-success: var(--arc-color-fg-success-stark); 1151 --arc-color-text-warning: var(--arc-color-fg-warning-stark); 1152 --arc-color-icon-warning: var(--arc-color-fg-warning-stark); 1153 --arc-color-text-critical: var(--arc-color-fg-critical-mid); 1154 --arc-color-icon-critical: var(--arc-color-fg-critical-mid); 1155 /* @deprecated border variable - please update all instances */ 1156 --arc-color-border-orange: var(--arc-color-border-orange-mid); 1157 --arc-color-border-mint: var(--arc-color-border-mint-mid); 1158 --arc-color-border-maroon: var(--arc-color-border-maroon-mid); 1159 --arc-color-border-standard: var(--arc-color-border-mid);
1160 --arc-color-border-full: var(--arc-color-border-heavy); 1161 --arc-color-border-focus-inverse: var(--arc-color-light-blue-300); 1162 --arc-border-width-standard: var(--arc-border-width-sm); 1163 /* @deprecated color variables - please update all instances */ 1164 --arc-color-info-light: var(--arc-color-bg-info-muted); 1165 --arc-color-info-medium: var(--arc-color-bg-info-subtle); 1166 --arc-color-info-root: var(--arc-color-bg-info-mid); 1167 --arc-color-info-dark: var(--arc-color-bg-info-stark); 1168 --arc-color-info-heavy: var(--arc-color-bg-info-heavy); 1169 --arc-color-border-info: var(--arc-color-border-info-mid); 1170 --arc-color-brand-light: var(--arc-color-bg-brand-muted); 1171 --arc-color-brand-medium: var(--arc-color-bg-brand-subtle); 1172 --arc-color-brand-root: var(--arc-color-bg-brand-mid); 1173 --arc-color-brand-dark: var(--arc-color-bg-brand-stark); 1174 --arc-color-brand-heavy: var(--arc-color-bg-brand-heavy); 1175 --arc-color-border-brand: var(--arc-color-border-brand-mid); 1176 --arc-color-success-light: var(--arc-color-bg-success-muted); 1177 --arc-color-success-medium: var(--arc-color-bg-success-subtle); 1178 --arc-color-success-root: var(--arc-color-bg-success-mid); 1179 --arc-color-success-dark: var(--arc-color-bg-success-stark); 1180 --arc-color-success-heavy: var(--arc-color-bg-success-heavy); 1181 --arc-color-border-success: var(--arc-color-border-success-mid); 1182 --arc-color-warning-light: var(--arc-color-bg-warning-muted); 1183 --arc-color-warning-medium: var(--arc-color-bg-warning-subtle); 1184 --arc-color-warning-root: var(--arc-color-bg-warning-mid); 1185 --arc-color-warning-dark: var(--arc-color-bg-warning-stark); 1186 --arc-color-warning-heavy: var(--arc-color-bg-warning-heavy); 1187 --arc-color-border-warning: var(--arc-color-border-warning-mid); 1188 --arc-color-critical-light: var(--arc-color-bg-critical-muted); 1189 --arc-color-critical-medium: var(--arc-color-bg-critical-subtle); 1190 --arc-color-critical-root: var(--arc-color-bg-critical-mid); 1191 --arc-color-critical-dark: var(--arc-color-bg-critical-stark); 1192 --arc-color-critical-heavy: var(--arc-color-bg-critical-heavy); 1193 --arc-color-border-critical: var(--arc-color-border-critical-mid); 1194 /** @deprecated - temporary shadow mappings */ 1195 --arc-shadow-light-none: var(--arc-shadow-none); 1196 --arc-shadow-light-sm: var(--arc-shadow-sm); 1197 --arc-shadow-light-md: var(--arc-shadow-md); 1198 --arc-shadow-light-lg: var(--arc-shadow-lg); 1199 --arc-shadow-light-xl: var(--arc-shadow-xl); 1200 /** @deprecated - old alpha leading zeros */ 1201 --arc-alpha-03: var(--arc-alpha-3); 1202 --arc-alpha-05: var(--arc-alpha-5); 1203} 1204 1205/*# sourceMappingURL=theme.css.map */ 1206`,Wt={};function H(a,r){if(typeof document<"u"&&r?.styleSheet){const e=Wt[a];Wt[a]=r.styleSheet,document.adoptedStyleSheets=[...document.adoptedStyleSheets.filter(o=>o!==e),r.styleSheet]}}function El(a){const r=Object.values(Wt),e=document.adoptedStyleSheets.filter(o=>r.includes(o));if(a.adoptedStyleSheets){const o=e.filter(t=>!a.adoptedStyleSheets.includes(t));a.adoptedStyleSheets=[...a.adoptedStyleSheets,...o]}}function Tl(a){if(typeof CSSStyleSheet<"u"){const r=new CSSStyleSheet;r.replaceSync(_l),a.adoptedStyleSheets&&(a.adoptedStyleSheets.includes(r)||(a.adoptedStyleSheets=[...a.adoptedStyleSheets,r]))}}const Il=a=>a?.trim().charAt(0)??void 0,jl=(a,r)=>{let e=0;const o=Math.min(a.length,50);for(let t=0;t<o;t+=1)e=(e+a.charCodeAt(t))%(r??33);return e},Ll=(a,r,e)=>r?.length?a?.trim()===""?e||r[0]:r[jl(a,r.length)]||e||r[0]:e,En=L(Za,["blue","orange","mint","red","yellow","green","maroon","purple"]),Rl=L(Za,["neutral","white","black"]),Bo=L(_r,["lg","md","sm","xs"]),Ml=[...Bo,"profile-sm","profile-md","profile-lg"],Bl=To,Pl=Re,Ol=Bo,Dl=Bo,Nl=Bo,x=i`--arcâ¢inputâ¢mask`,s=i`--arcâ¢size`,m=i`--arcâ¢space`,W=i`--arcâ¢avatar`,pr=i`${W}â¢chars`,Gt=i` 1207 1208 &[data-size=lg] { 1209 ${W}â¢fontâ¢size: var(${s}â¢16); 1210 ${W}â¢size: 2.5em; /* target: 40px @ 100% */ 1211 ${pr}â¢1: var(${s}â¢16); 1212 ${pr}â¢2: var(${s}â¢14); 1213 ${pr}â¢3: var(${s}â¢12); 1214 } 1215 1216 &:is([data-size=md], [data-size=inherit], :not([data-size])) { /* @default size */ 1217 ${W}â¢fontâ¢size: var(${s}â¢14); 1218 ${W}â¢size: 2.2857142857em; /* target: 32px @ 100% (32 / 14 * 1em) */ 1219 ${pr}â¢1: var(${s}â¢14); 1220 ${pr}â¢2: var(${s}â¢12); 1221 ${pr}â¢3: var(${s}â¢10); 1222 } 1223 1224 &[data-size=sm] { 1225 ${W}â¢fontâ¢size: var(${s}â¢12); 1226 ${W}â¢size: 2em; /* target: 24px @ 100% */ 1227 ${pr}â¢1: var(${s}â¢12); 1228 ${pr}â¢2: var(${s}â¢10); 1229 ${pr}â¢3: var(${s}â¢8); 1230 } 1231 1232 &[data-size=xs] { 1233 ${W}â¢fontâ¢size: var(${s}â¢10); 1234 ${W}â¢size: 2em; /* target: 20px @ 100% */ 1235 ${pr}â¢1: var(${s}â¢10); 1236 ${pr}â¢2: var(${s}â¢8); 1237 ${pr}â¢3: var(${s}â¢6); 1238 } 1239 1240`,Fl=i` 1241 1242 &[data-size=profile-lg] { 1243 ${W}â¢fontâ¢size: var(${s}â¢40); 1244 ${W}â¢size: 4em; 1245 } 1246 1247 &[data-size=profile-md] { 1248 ${W}â¢fontâ¢size: var(${s}â¢32); 1249 ${W}â¢size: 3em; 1250 } 1251 1252 &[data-size=profile-sm] { 1253 ${W}â¢fontâ¢size: var(${s}â¢28); 1254 ${W}â¢size: 2.2857142857em; /* target: 64px @ 100% (64 / 28 * 1em) */ 1255 } 1256 1257`,Tn=i` 1258 1259 [arc-avatar] { 1260 ${W}â¢fontâ¢size: inherit; 1261 ${W}â¢size: inherit; 1262 ${pr}â¢1: inherit; 1263 ${pr}â¢2: inherit; 1264 ${pr}â¢3: inherit; 1265 } 1266 1267`,oe=i`${W}â¢fg`,Pr=i`${W}â¢bg`,Hl=i` 1268@layer arc-components { 1269 1270 [arc-avatar] { 1271 /* Colors --------------------------------------------------------⢠*/ 1272 ${oe}: var(--arc-avatar-color, var(--arc-color-mono-white)); 1273 1274 &:has([data-color=blue]) { /* @default color */ 1275 ${Pr}: var(--arc-color-light-blue-400); 1276 } 1277 &:has([data-color=purple]) { 1278 ${Pr}: var(--arc-color-light-purple-400); 1279 } 1280 &:has([data-color=red]) { 1281 ${Pr}: var(--arc-color-light-red-400); 1282 } 1283 &:has([data-color=yellow]) { 1284 ${Pr}: var(--arc-color-light-yellow-400); 1285 } 1286 &:has([data-color=green]) { 1287 ${Pr}: var(--arc-color-light-green-400); 1288 }
1289 &:has([data-color=maroon]) { 1290 ${Pr}: var(--arc-color-light-maroon-400); 1291 } 1292 &:has([data-color=orange]) { 1293 ${Pr}: var(--arc-color-light-orange-400); 1294 } 1295 &:has([data-color=mint]) { 1296 ${Pr}: var(--arc-color-light-mint-400); 1297 } 1298 1299 /* RESERVED COLORS -----------------------------------------------⢠*/ 1300 &:has([data-color=black]) { 1301 ${oe}: light-dark(var(--arc-color-mono-white), var(--arc-color-mono-black)); 1302 ${Pr}: light-dark(var(--arc-color-mono-black), var(--arc-color-mono-white)); 1303 } 1304 1305 &:has([data-color=neutral]) { /* @default anonymous */ 1306 ${oe}: var(--arc-color-fg-secondary); 1307 ${Pr}: var(--arc-color-alpha-subtle); 1308 } 1309 1310 &:has([data-color=white]) { 1311 ${oe}: var(--arc-color-mono-black); 1312 ${Pr}: var(--arc-color-mono-white); 1313 } 1314 1315 /* SIZES ---------------------------------------------------------⢠*/ 1316 ${Gt} 1317 ${Fl} 1318 } 1319 1320 /* CORE AVATAR STYLES ----------------------------------------------⢠*/ 1321 [arc-avatar]:not([hidden]) { 1322 font-size: var(--arc-avatar-font-size, var(${W}â¢fontâ¢size)); 1323 1324 flex: none; 1325 align-self: center; 1326 1327 display: inline-flex; 1328 align-items: center; 1329 justify-content: center; 1330 width: var(--arc-avatar-size, var(${W}â¢size)); 1331 aspect-ratio: 1 / 1; 1332 line-height: normal; 1333 1334 text-align: center; 1335 position: relative; 1336 overflow: hidden; 1337 border-radius: var(--arc-border-radius-circle); 1338 1339 &[data-is-inactive] { 1340 opacity: var(--arc-alpha-50); 1341 } 1342 1343 [data-num-length] { 1344 --arc-button-font-size: var(${pr}â¢1); 1345 } 1346 1347 [data-num-length='2'] { 1348 --arc-button-font-size: var(${pr}â¢2); 1349 } 1350 1351 [data-num-length='3'] { 1352 --arc-button-font-size: var(${pr}â¢3); 1353 } 1354 1355 1356 /* INNER ELEMENTS ------------------------------------------------⢠*/ 1357 1358 [data-element=counter] { 1359 ${W}â¢pointerâ¢events: all; 1360 1361 /* Inter-Component Communication ⢠ArcButton --------------------⢠*/ 1362 --arc-button-width: 100%; 1363 --arc-button-height: auto; 1364 --arc-button-aspect-ratio: 1 /1; 1365 --arc-button-padding: 0; 1366 --arc-button-background: var(--arc-avatar-background, var(${Pr})); 1367 --arc-button-color: var(--arc-avatar-color, var(${oe})); 1368 1369 &:disabled { 1370 --arc-button-cursor: default; 1371 } 1372 } 1373 1374 [data-element=image] { 1375 object-fit: cover; 1376 1377 /* Hides problematic image */ 1378 &:is([data-not-loaded], [data-has-error]) { 1379 ${W}â¢visibility: hidden; 1380 } 1381 1382 /* Hides subsequent elements with valid image */ 1383 &:not([data-has-error]) ~ [data-element] { 1384 ${oe}: transparent; 1385 ${Pr}: none; 1386 } 1387 } 1388 1389 :is( 1390 [data-element=counter], 1391 [data-element=initial], 1392 [data-element=anonymous] 1393 ) { 1394 background: var(${Pr}); 1395 color: var(${oe}); 1396 } 1397 1398 :is([data-element=initial]) { 1399 font-size: var(--arc-avatar-initial-font-size, inherit); 1400 text-transform: var(--arc-avatar-text-transform, capitalize); 1401 } 1402 1403 [data-element] { 1404 flex: none; 1405 position: absolute; 1406 inset: 0; 1407 display: flex; 1408 align-items: center; 1409 justify-content: center; 1410 1411 width: 100%; 1412 height: 100%; 1413 1414 border-radius: inherit; 1415 font-weight: var(--arc-font-weight-600); 1416 visibility: var(${W}â¢visibility, unset); 1417 1418 transition-duration: 200ms; 1419 transition-behavior: allow-discrete; 1420 transition-timing-function: linear; 1421 transition-property: 1422 visibility, 1423 background-color, 1424 color; 1425 1426 pointer-events: var(${W}â¢pointerâ¢events, none); 1427 user-select: none; 1428 -webkit-user-select: none; 1429 } 1430 } 1431 1432} 1433`,Vl=({children:a,initial:r,color:e,...o})=>(0,c.jsx)("span",{...o,"data-element":"initial","data-color":e,children:a||r}),Ul=({isLoaded:a,hasError:r,onLoad:e,onError:o,...t})=>{const l=!a&&""||void 0,n=r&&""||void 0,h=!a||r||void 0;return(0,c.jsx)("img",{...t,hidden:h,"data-element":"image","data-not-loaded":l,"data-has-error":n,onLoad:e,onError:o})},Zt=a=>(0,c.jsx)("svg",{...a,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,c.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.2362 2V4.04215H3.7443V2H16.2362ZM13.8453 11.7538C13.8453 9.47528 12.1743 7.75773 9.96905 7.75773C7.79316 7.75773 6.15147 9.47528 6.15147 11.7538C6.15147 14.0323 7.7899 15.753 9.96905 15.753C12.1775 15.753 13.8453 14.0355 13.8453 11.7569V11.7538ZM9.96905 18C6.29153 18 3.5 15.3213 3.5 11.7538C3.5 8.20209 6.27524 5.50758 9.96905 5.49183C13.6922 5.49183 16.5 8.17057 16.5 11.738V17.6754H13.8485V16.3581C13.8485 16.3581 12.3925 18 9.97231 18H9.96905Z",fill:"var(--arc-color-logo-articulate, #000000)"})}),Kt=a=>(0,c.jsxs)("svg",{...a,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,c.jsx)("defs",{children:(0,c.jsxs)("linearGradient",{id:"ai_gradient",x1:"2",y1:"18",x2:"18",y2:"2",gradientUnits:"userSpaceOnUse",children:[(0,c.jsx)("stop",{stopColor:"var(--arc-color-logo-ai-purple, #9c15ff)"}),(0,c.jsx)("stop",{offset:"1",stopColor:"var(--arc-color-logo-ai-blue, #1eb4fb)"})]})}),(0,c.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM11.8524 12.87V8.17199H12.6444V12.87H11.8524ZM11.8524 7.28999V6.29999H12.6444V7.28999H11.8524ZM6.5 11.511C6.5 11.211 6.584 10.953 6.752 10.737C6.926 10.515 7.163 10.344 7.463 10.224C7.763 10.104 8.111 10.044 8.507 10.044C8.717 10.044 8.939 10.062 9.173 10.098C9.407 10.128 9.614 10.176 9.794 10.242V9.89999C9.794 9.53999 9.686 9.25799 9.47 9.05399C9.254 8.84399 8.948 8.73899 8.552 8.73899C8.294 8.73899 8.045 8.78699 7.805 8.88299C7.571 8.97299 7.322 9.10499 7.058 9.27899L6.77 8.72099C7.076 8.51099 7.382 8.35499 7.688 8.25299C7.994 8.14499 8.312 8.09099 8.642 8.09099C9.242 8.09099 9.716 8.25899 10.064 8.59499C10.412 8.92499 10.586 9.38699 10.586 9.98099V11.97C10.586 12.066 10.604 12.138 10.64 12.186C10.682 12.228 10.748 12.252 10.838 12.258V12.87C10.76 12.882 10.691 12.891 10.631 12.897C10.577 12.903 10.532 12.906 10.496 12.906C10.31 12.906 10.169 12.855 10.073 12.753C9.983 12.651 9.932 12.543 9.92 12.429L9.902 12.132C9.698 12.396 9.431 12.6 9.101 12.744C8.771 12.888 8.444 12.96 8.12 12.96C7.808 12.96 7.529 12.897 7.283 12.771C7.037 12.639 6.845 12.465 6.707 12.249C6.569 12.027 6.5 11.781 6.5 11.511ZM9.56 11.844C9.632 11.76 9.689 11.676 9.731 11.592C9.773
143311.502 9.794 11.427 9.794 11.367V10.782C9.608 10.71 9.413 10.656 9.209 10.62C9.005 10.578 8.804 10.557 8.606 10.557C8.204 10.557 7.877 10.638 7.625 10.8C7.379 10.956 7.256 11.172 7.256 11.448C7.256 11.598 7.295 11.745 7.373 11.889C7.457 12.027 7.577 12.141 7.733 12.231C7.895 12.321 8.093 12.366 8.327 12.366C8.573 12.366 8.807 12.318 9.029 12.222C9.251 12.12 9.428 11.994 9.56 11.844Z",fill:"url(#ai_gradient)"})]}),Yt=a=>(0,c.jsx)("svg",{...a,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,c.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10 18C5.582 18 2 14.418 2 10C2 5.582 5.582 2 10 2C14.418 2 18 5.582 18 10C18 14.418 14.418 18 10 18ZM10 17.272C14.016 17.272 17.272 14.016 17.272 10C17.272 5.984 14.016 2.728 10 2.728C5.984 2.728 2.728 5.984 2.728 10C2.728 14.016 5.984 17.272 10 17.272ZM11.3493 8.65067L13.3747 7.51C13.4276 7.48023 13.4874 7.46481 13.5481 7.46529C13.6088 7.46576 13.6683 7.48211 13.7207 7.51271C13.7732 7.54331 13.8167 7.58709 13.847 7.63971C13.8772 7.69233 13.8932 7.75196 13.8933 7.81267V12.14C13.8934 12.2014 13.8772 12.2616 13.8464 12.3147C13.8156 12.3678 13.7713 12.4118 13.7181 12.4423C13.6648 12.4727 13.6044 12.4886 13.5431 12.4882C13.4817 12.4878 13.4215 12.4712 13.3687 12.44L11.3433 11.2453C11.2911 11.2146 11.2479 11.1707 11.2178 11.1181C11.1878 11.0655 11.172 11.0059 11.172 10.9453V8.95333C11.172 8.828 11.24 8.712 11.3493 8.65067ZM7.20267 7.46333H9.93867C10.3227 7.46333 10.634 7.77467 10.634 8.15867V11.592C10.634 11.9767 10.3227 12.288 9.93867 12.288H7.202C7.0177 12.288 6.84094 12.2148 6.71056 12.0846C6.58018 11.9543 6.50684 11.7776 6.50667 11.5933V8.16C6.50667 7.77533 6.818 7.464 7.202 7.464L7.20267 7.46333Z",fill:"var(--arc-color-logo-peek, #497add)"})}),qt=a=>(0,c.jsx)("svg",{...a,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,c.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM11.7343 12.569C11.3803 12.569 11.0563 12.506 10.7623 12.38C10.4743 12.248 10.2223 12.071 10.0063 11.849C9.79627 11.621 9.63127 11.36 9.51127 11.066C9.39727 10.772 9.34027 10.46 9.34027 10.13C9.34027 9.68601 9.44227 9.28101 9.64627 8.91501C9.85027 8.54901 10.1323 8.25501 10.4923 8.03301C10.8583 7.81101 11.2753 7.70001 11.7433 7.70001C12.2173 7.70001 12.6283 7.81401 12.9763 8.04201C13.3303 8.26401 13.6033 8.55801 13.7953 8.92401C13.9933 9.28401 14.0923 9.67401 14.0923 10.094C14.0923 10.154 14.0893 10.214 14.0833 10.274C14.0833 10.328 14.0803 10.37 14.0743 10.4H10.1773C10.2013 10.706 10.2853 10.979 10.4293 11.219C10.5793 11.453 10.7713 11.639 11.0053 11.777C11.2393 11.909 11.4913 11.975 11.7613 11.975C12.0493 11.975 12.3193 11.903 12.5713 11.759C12.8293 11.615 13.0063 11.426 13.1023 11.192L13.7863 11.381C13.6843 11.609 13.5313 11.813 13.3273 11.993C13.1293 12.173 12.8923 12.314 12.6163 12.416C12.3463 12.518 12.0523 12.569 11.7343 12.569ZM10.1503 9.85101H13.3543C13.3303 9.54501 13.2433 9.27501 13.0933 9.04101C12.9433 8.80701 12.7513 8.62401 12.5173 8.49201C12.2833 8.36001 12.0253 8.29401 11.7433 8.29401C11.4673 8.29401 11.2123 8.36001 10.9783 8.49201C10.7443 8.62401 10.5523 8.80701 10.4023 9.04101C10.2583 9.27501 10.1743 9.54501 10.1503 9.85101ZM8.984 8.47401C8.588 8.48001 8.237 8.58201 7.931 8.78001C7.631 8.97201 7.418 9.23901 7.292 9.58101V12.479H6.5V7.78101H7.238V8.87001C7.4 8.54601 7.613 8.28501 7.877 8.08701C8.147 7.88301 8.429 7.76901 8.723 7.74501H8.876C8.918 7.74501 8.954 7.74801 8.984 7.75401V8.47401Z",fill:"var(--arc-color-logo-reach, #0081de)"})}),Jt=a=>(0,c.jsx)("svg",{...a,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,c.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM9.38402 8.46899C8.98802 8.47499 8.63702 8.57699 8.33102 8.77499C8.03102 8.96699 7.81802 9.23399 7.69202 9.57599V12.474H6.90002V7.77599H7.63802V8.86499C7.80002 8.54099 8.01302 8.27999 8.27702 8.08199C8.54702 7.87799 8.82902 7.76399 9.12302 7.73999H9.27602C9.31802 7.73999 9.35402 7.74299 9.38402 7.74899V8.46899ZM11.5195 12.474L9.67455 7.77599H10.5025L11.9785 11.718L13.4545 7.77599H14.2285L12.3835 12.474H11.5195Z",fill:"var(--arc-color-logo-review, #35b062)"})}),Xt=a=>(0,c.jsx)("svg",{...a,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,c.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10 18C5.582 18 2 14.418 2 10C2 5.582 5.582 2 10 2C14.418 2 18 5.582 18 10C18 14.418 14.418 18 10 18ZM10 17.272C14.016 17.272 17.272 14.016 17.272 10C17.272 5.984 14.016 2.728 10 2.728C5.984 2.728 2.728 5.984 2.728 10C2.728 14.016 5.984 17.272 10 17.272ZM9.29467 8.48267C8.90667 8.49467 8.564 8.59467 8.268 8.78267C7.97067 8.97067 7.76067 9.232 7.63733 9.56733V12.406H6.86133V7.804H7.584V8.87067C7.74267 8.55333 7.95133 8.296 8.21067 8.09933C8.46867 7.90267 8.74467 7.79267 9.03867 7.76867H9.18867C9.23 7.76867 9.26533 7.772 9.29467 7.77733V8.48267ZM11.6747 12.494C11.3035 12.4941 10.9347 12.4363 10.5813 12.3227C10.2233 12.208 9.91467 12.042 9.656 11.824L9.99067 11.304C10.2613 11.51 10.532 11.664 10.802 11.7667C11.0727 11.87 11.3573 11.9213 11.6573 11.9213C11.992 11.9213 12.258 11.8547 12.4553 11.7227C12.5492 11.6632 12.6258 11.5803 12.6776 11.482C12.7294 11.3838 12.7546 11.2737 12.7507 11.1627C12.7507 11.0513 12.724 10.956 12.6707 10.876C12.6092 10.7892 12.5278 10.7183 12.4333 10.6693C12.3044 10.6014 12.1682 10.5482
143312.0273 10.5107C11.8627 10.464 11.672 10.4133 11.454 10.3607C11.2142 10.3005 10.9763 10.2329 10.7407 10.158C10.566 10.1052 10.3997 10.028 10.2467 9.92867C10.1259 9.85011 10.0285 9.7405 9.96467 9.61133C9.90168 9.46686 9.87162 9.31019 9.87667 9.15267C9.87261 8.94053 9.91923 8.73049 10.0127 8.54C10.104 8.36067 10.2287 8.21133 10.388 8.09067C10.5561 7.96556 10.746 7.87287 10.948 7.81733C11.173 7.7542 11.4057 7.72301 11.6393 7.72467C11.986 7.72467 12.3093 7.78067 12.6093 7.892C12.9093 8.004 13.162 8.15067 13.3673 8.33267L13.0147 8.8C12.824 8.63151 12.6026 8.50136 12.3627 8.41667C12.1249 8.33193 11.8744 8.28864 11.622 8.28867C11.34 8.28867 11.1 8.34867 10.9033 8.46933C10.7067 8.59 10.608 8.78267 10.608 9.04733C10.608 9.15267 10.6273 9.24067 10.6653 9.31133C10.7106 9.38903 10.776 9.45306 10.8547 9.49667C10.9433 9.55 11.056 9.59667 11.1947 9.638C11.3327 9.67867 11.4987 9.72333 11.6927 9.77C11.998 9.84067 12.264 9.91267 12.4907 9.986C12.7167 10.0593 12.9047 10.146 13.0547 10.246C13.2047 10.346 13.316 10.4633 13.3893 10.5993C13.4627 10.734 13.5 10.8987 13.5 11.0927C13.5 11.5213 13.3353 11.8627 13.0067 12.1153C12.6767 12.368 12.2333 12.494 11.6747 12.494Z",fill:"var(--arc-color-logo-rise, #ff6600)"})}),Qt=a=>(0,c.jsx)("svg",{...a,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,c.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM11.2815 6.29999H12.0735V11.655C12.0735 11.913 12.1095 12.072 12.1815 12.132C12.2535 12.192 12.3405 12.222 12.4425 12.222C12.5685 12.222 12.6885 12.21 12.8025 12.186C12.9165 12.156 13.0125 12.126 13.0905 12.096L13.2165 12.744C13.0845 12.798 12.9285 12.843 12.7485 12.879C12.5685 12.915 12.4095 12.933 12.2715 12.933C11.9655 12.933 11.7225 12.846 11.5425 12.672C11.3685 12.498 11.2815 12.255 11.2815 11.943V6.29999ZM8.48 12.96C8.09 12.96 7.724 12.897 7.382 12.771C7.04 12.639 6.746 12.444 6.5 12.186L6.806 11.628C7.076 11.88 7.346 12.06 7.616 12.168C7.886 12.276 8.162 12.33 8.444 12.33C8.768 12.33 9.032 12.27 9.236 12.15C9.44 12.024 9.542 11.841 9.542 11.601C9.542 11.427 9.488 11.298 9.38 11.214C9.278 11.13 9.131 11.061 8.939 11.007C8.747 10.947 8.519 10.881 8.255 10.809C7.931 10.713 7.658 10.611 7.436 10.503C7.214 10.395 7.046 10.26 6.932 10.098C6.818 9.93599 6.761 9.73199 6.761 9.48599C6.761 9.18599 6.839 8.93399 6.995 8.72999C7.151 8.51999 7.364 8.36099 7.634 8.25299C7.91 8.14499 8.222 8.09099 8.57 8.09099C8.918 8.09099 9.233 8.14499 9.515 8.25299C9.797 8.36099 10.04 8.51999 10.244 8.72999L9.884 9.27899C9.698 9.08699 9.494 8.94599 9.272 8.85599C9.05 8.75999 8.801 8.71199 8.525 8.71199C8.363 8.71199 8.204 8.73299 8.048 8.77499C7.892 8.81099 7.763 8.87999 7.661 8.98199C7.559 9.07799 7.508 9.21599 7.508 9.39599C7.508 9.54599 7.547 9.66599 7.625 9.75599C7.709 9.83999 7.829 9.91199 7.985 9.97199C8.147 10.032 8.342 10.098 8.57 10.17C8.924 10.272 9.23 10.374 9.488 10.476C9.752 10.578 9.956 10.71 10.1 10.872C10.244 11.034 10.316 11.259 10.316 11.547C10.316 11.991 10.148 12.339 9.812 12.591C9.476 12.837 9.032 12.96 8.48 12.96Z",fill:"var(--arc-color-logo-storyline, #c560b3)"})}),rc=a=>(0,c.jsx)("svg",{...a,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 640 640",children:(0,c.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 87.3C191.5 87.3 87.3 191.5 87.3 320C87.3 448.5 191.5 552.7 320 552.7C448.5 552.7 552.7 448.5 552.7 320C552.7 191.5 448.5 87.3 320 87.3zM267.5 259C278.1 258.9 288.6 260.7 298.5 264.4C307.4 267.6 315.6 272.3 322.8 278.5L311.5 293.5C305.4 288.1 298.3 283.9 290.6 281.2C283 278.5 275 277.1 266.9 277.1C258.8 276.8 250.9 278.9 243.9 282.9C237.6 286.8 233.9 293.9 234.4 301.4C234.3 304.3 234.9 307.2 236.2 309.9C237.7 312.4 239.7 314.4 242.3 315.8C245.7 317.7 249.4 319.3 253.2 320.3C257.6 321.6 262.9 323 269.1 324.5C278.9 326.8 287.4 329.1 294.6 331.4C301 333.3 307 336.1 312.7 339.7C317.1 342.5 320.8 346.4 323.4 351C325.9 355.9 327.1 361.3 326.9 366.8C327.3 379.6 321.4 391.9 311.1 399.5C298.6 408.2 283.7 412.4 268.5 411.6C256.6 411.6 244.8 409.7 233.5 406.1C222.7 402.8 212.6 397.4 203.9 390.2L214.6 373.6C222.5 379.8 231.2 384.7 240.6 388.4C249.3 391.7 258.6 393.4 268 393.3C277 393.8 285.8 391.6 293.5 387C299.6 383.1 303.2 376.3 303 369.1C303.1 365.9 302.2 362.7 300.5 359.9C298.5 357.1 295.9 354.8 292.9 353.3C288.8 351.1 284.4 349.4 279.9 348.2C274.6 346.7 268.5 345.1 261.6 343.4C252.8 341.1 245.1 339 238.7 336.9C233.1 335.2 227.8 332.7 222.9 329.6C219 327.1 215.9 323.6 213.9 319.4C211.9 314.8 210.9 309.8 211.1 304.7C211 297.9 212.5 291.2 215.5 285.1C218.3 279.4 222.4 274.5 227.5 270.7C232.9 266.7 239 263.7 245.4 262C252.6 260 260.1 259 267.5 259zM432.5 401.5C431 402.3 429 403.1 426.6 404.2C424.2 405.3 421.4 406.3 418.3 407.3C415 408.4 411.6 409.2 408.1 409.8C404.3 410.5 400.5 410.8 396.7 410.8C388.3 411 380 408.4 373.3 403.3C366.4 397.6 362.7 388.9 363.4 380L363.4 281L343.4 281L343.4 261.5L363.4 261.5L363.4 212.4L388.2 212.4L388.2 261.5L421.2 261.5L421.2 281L388.2 281L388.2 372.4C388.2 376.9 390.1 381.3 393.6 384.2C396.8 386.7 400.8 388 404.9 387.9C409.5 388 414 387.1 418.3 385.5C421.2 384.4 424 383.2 426.6 381.7z",f
1433ill:"var(--arc-color-logo-studio, #dc424a)"})});var Wl;const Gl="fa-width-auto",In="fa-fw",Zl="arc-fw",jn="arc-aw",Kl=a=>typeof a=="number"?`calc(${a/10}rem * var(--arc-internal-font-size))`:a,Yl={"arc-svg logo-articulate":(0,c.jsx)(Zt,{}),"arc-svg product-ai":(0,c.jsx)(Kt,{}),"arc-svg product-peek":(0,c.jsx)(Yt,{}),"arc-svg product-reach":(0,c.jsx)(qt,{}),"arc-svg product-review":(0,c.jsx)(Jt,{}),"arc-svg product-rise":(0,c.jsx)(Xt,{}),"arc-svg product-storyline":(0,c.jsx)(Qt,{}),"arc-svg product-studio":(0,c.jsx)(rc,{})},Kv=a=>a&&a.length>0&&a?.includes("arc-svg")?Yl[a]:Wl("span",{className:a}),Ln=a=>{const r=a.includes(Gl),e=a.includes(In),o=a.includes(Zl),t=a.includes(jn);return{hasFaAutoWidth:r,hasFaFixedWidth:e,hasArcFixedWidth:o,hasArcAutoWidth:t}},Rn=a=>((0,y.isValidElement)(a)&&a.type===D?a.props.icon:a)??void 0,Mn=a=>{const r=Rn(a);if(typeof r!="string")return r;const{hasFaFixedWidth:e,hasArcFixedWidth:o,hasArcAutoWidth:t}=Ln(r);return!e&&!o&&!t?`${r} ${jn}`:r},ql=a=>{const r=Rn(a);if(typeof r!="string")return r;let e=r;const{hasArcFixedWidth:o,hasFaFixedWidth:t}=Ln(e);return o&&!t&&(e=`${e} ${In}`),e},Jl=i`--arcâ¢icon`,Sa=i`${Jl}â¢fg`,Xl=i` 1434@layer arc-components { 1435 1436[arc-icon] { 1437 ${Sa}: currentcolor; 1438 1439 color: var(--arc-icon-color, var(${Sa})); 1440 opacity: var(--arc-icon-opacity, 1); 1441 1442 &:not([hidden]) { 1443 /* hand-off to actual interior FontAwesome icon node */ 1444 --fa-display: var(--arc-icon-display, inline-flex); 1445 --fa-line-height: var(--arc-icon-fa-line-height, 1); 1446 1447 flex: none; 1448 align-self: var(--arc-icon-align-self, unset); 1449 display: var(--fa-display); 1450 align-items: center; 1451 justify-content: center; 1452 height: var(--arc-icon-height, 1lh); 1453 max-height: var(--arc-icon-max-height, 1lh); 1454 } 1455 1456 &:has(svg) { 1457 align-self: var(--arc-icon-svg-align-self, center); 1458 1459 svg { 1460 font-size: var(--arc-icon-size, 1em); 1461 width: 1em; 1462 height: 1em; 1463 fill: var(--arc-icon-color, var(${Sa})); 1464 } 1465 } 1466 1467 [class|=fa] { 1468 font-size: var(--arc-icon-size, 1em); 1469 align-items: center; 1470 justify-content: center; 1471 1472 /* fix for FontAwesome line-height oddities in certain cases */ 1473 line-height: normal !important; 1474 1475 &[class*='fa-stack-'] { 1476 font-size: var(--arc-icon-stack-size, inherit); 1477 } 1478 } 1479 1480 /* Explicit opt-in via Arcâs helper class */ 1481 .arc-aw { 1482 --fa-width: var(--arc-icon-fa-width, auto); 1483 } 1484} 1485 1486/* Some SVG icons are also already styled as [arc-icon] so we need to ignore the nested [arc-icon] styles */ 1487/* [arc-icon]:not([hidden]) > [arc-icon] { display: contents; } */ 1488 1489/* utility icon colorization */ 1490[arc-icon] { 1491 &[arc-icon-status=brand] { 1492 ${Sa}: var(--arc-color-fg-brand-mid); 1493 } 1494 1495 &[arc-icon-status=info] { 1496 ${Sa}: var(--arc-color-fg-info-mid); 1497 } 1498 1499 &[arc-icon-status=success] { 1500 ${Sa}: var(--arc-color-fg-success-mid); 1501 } 1502 1503 &[arc-icon-status=warning] { 1504 ${Sa}: var(--arc-color-fg-warning-mid); 1505 } 1506 1507 &[arc-icon-status=error] { 1508 ${Sa}: var(--arc-color-fg-critical-mid); 1509 } 1510 1511 &[arc-icon-status=processing] { 1512 ${Sa}: var(--arc-color-fg-brand-mid); 1513 } 1514 1515 &[arc-icon-status] { 1516 --fa-primary-color: var(--arc-icon-color, currentcolor); 1517 --fa-secondary-color: color-mix(in srgb, currentcolor 20%, transparent); 1518 --fa-secondary-opacity: 1; 1519 } 1520} 1521 1522} 1523`,Ql=a=>(0,c.jsx)(D,{...a,icon:"fa-kit fa-articulate arc-aw",color:a?.color||"var(--arc-color-logo-articulate, #000000)","aria-label":a?.["aria-label"]||"Articulate Logo"}),rs=a=>(0,c.jsx)(D,{...a,icon:"fa-kit fa-product-badge-ai arc-aw","aria-label":a?.["aria-label"]||"Articulate AI Logo",gradient:a?.gradient||"ai"}),as=a=>(0,c.jsx)(D,{...a,icon:"fa-kit fa-product-badge-peek arc-aw",color:a?.color||"var(--arc-color-logo-peek, #497add)","aria-label":a?.["aria-label"]||"Articulate Peek Logo"}),es=a=>(0,c.jsx)(D,{...a,icon:"fa-kit fa-product-badge-reach arc-aw",color:a?.color||"var(--arc-color-logo-reach, #0081de)","aria-label":a?.["aria-label"]||"Articulate Reach Logo"}),os=a=>(0,c.jsx)(D,{...a,icon:"fa-kit fa-product-badge-review arc-aw",color:a?.color||"var(--arc-color-logo-review, #35b062)","aria-label":a?.["aria-label"]||"Articulate Review Logo"}),ts=a=>(0,c.jsx)(D,{...a,icon:"fa-kit fa-product-badge-rise arc-aw",color:a?.color||"var(--arc-color-logo-rise, #ff6602)","aria-label":a?.["aria-label"]||"Articulate Rise Logo"}),cs=a=>(0,c.jsx)(D,{...a,icon:"fa-kit fa-product-badge-storyline arc-aw",color:a?.color||"var(--arc-color-logo-storyline, #c560b3)","aria-label":a?.["aria-label"]||"Articulate Storyline Logo"}),ns=a=>(0,c.jsx)(D,{...a,icon:"fa-kit fa-product-badge-studio arc-aw",color:a?.color||"var(--arc-color-logo-studio, #dc424a)","aria-label":a?.["aria-label"]||"Articulate Studio Logo"}),D=({children:a,icon:r="fa-regular fa-circle-dashed",color:e,size:o,style:t,gradient:l,...n})=>{const h={...t,"--arc-icon-size":Kl(o),"--arc-icon-color":e},d=!!(n["aria-label"]||n["aria-labelledby"]),v=ql(r),u=typeof v=="string"&&v.length>0?(0,c.jsx)("span",{className:v}):v;return(0,c.jsx)("span",{"aria-hidden":!d||void 0,...n,"arc-icon":"",style:h,"arc-gradient":l,children:a||u})};H("ArcIcon",Xl),D.Articulate=Ql,D.AI=rs,D.Peek=as,D.Reach=es,D.Review=os,D.Rise=ts,D.Storyline=cs,D.Studio=ns,D.SVGArticulate=Zt,D.SVGAI=Kt,D.SVGPeek=Yt,D.SVGReach=qt,D.SVGReview=Jt,D.SVGRise=Xt,D.SVGStoryline=Qt,D.SVGStudio=rc;const is=({children:a,icon:r,color:e,...o})=>(0,c.jsx)("span",{...o,"data-element":"anonymous","data-color":"neutral",children:a||(0,c.jsx)(D,{icon:r})}),Bn="blue",Pn="neutral",ls="fa-solid fa-user arc-aw",ac=(0,y.forwardRef)(({children:a,size:r,color:e,isActive:o=!0,isAnonymous:t,alt:l,src:n,name:h,email:d,...v},u)=>{const[p,g]=(0,y.useState)(!1),[f,k]=(0,y.useState)(!1),z=P=>{g(!0),k(!1),v.onLoad?.(P)},I=P=>{g(!1),k(!0),v.onError?.(P)},M=Il(h||d),_=!!M,E=t||(!p||f)&&!_,C=!E&&!!n&&!f||void 0,S=(E&&Pn||void 0)??(e||void 0)??Ll(String(d||h||void 0),En,Bn)??Bn,F={src:n,alt:l,isLoaded:p,hasError:f,onLoad:z,onError:I};return(0,y.useEffect)(()=>{E&&g(!1)},[E]),(0,c.jsx)("span",{...v,ref:u,"arc-avatar":"","data-is-inactive":!o||void 0,"data-size":r,"aria-label":(v.title??h??d)||void 0,children:a||(E?(0,c.jsx)(is,{icon:ls,color:Pn}
1523):(0,c.jsxs)(c.Fragment,{children:[C&&(0,c.jsx)(Ul,{...F}),_&&(0,c.jsx)(Vl,{initial:M,color:S})]}))})});H("ArcAvatar",Hl);const wr=i`${W}â¢text`,te=i`${W}â¢subtext`,be=i`${W}â¢gap`,ss=i` 1524@layer arc-components { 1525 1526 [arc-avatar-text] { 1527 ${wr}â¢fontâ¢size: var(${s}â¢14); 1528 ${te}â¢fontâ¢size: var(${s}â¢12); 1529 ${be}: var(${s}â¢8); 1530 1531 ${wr}â¢overflow: unset; 1532 ${wr}â¢textâ¢overflow: unset; 1533 ${wr}â¢whiteâ¢space: unset; 1534 1535 &[data-overflow=truncate] { 1536 ${wr}â¢overflow: hidden; 1537 ${wr}â¢textâ¢overflow: ellipsis; 1538 ${wr}â¢whiteâ¢space: nowrap; 1539 } 1540 1541 &:has([data-size=inherit]) { 1542 ${wr}â¢fontâ¢size: 1em; 1543 ${te}â¢fontâ¢size: 0.875em; 1544 ${be}: 0.5em; 1545 } 1546 1547 &:has([data-size=lg]) { 1548 ${wr}â¢fontâ¢size: var(--arc-font-size-14); 1549 ${te}â¢fontâ¢size: var(--arc-font-size-12); 1550 } 1551 1552 &:has([data-size=md]) { /* @default size */ 1553 ${wr}â¢fontâ¢size: var(--arc-font-size-14); 1554 ${te}â¢fontâ¢size: var(--arc-font-size-12); 1555 } 1556 1557 &:has([data-size=sm]) { 1558 ${wr}â¢fontâ¢size: var(--arc-font-size-14); 1559 ${te}â¢fontâ¢size: var(--arc-font-size-12); 1560 } 1561 1562 &:has([data-size=xs]) { 1563 ${wr}â¢fontâ¢size: var(--arc-font-size-12); 1564 ${te}â¢fontâ¢size: var(--arc-font-size-12); 1565 ${be}: var(--arc-space-0-75); 1566 } 1567 1568 &[data-gap=lg] { ${be}: var(${s}â¢12); } 1569 &[data-gap=sm] { ${be}: var(${s}â¢4); } 1570 } 1571 1572 [arc-avatar-text] { 1573 font-size: var(--arc-avatar-text-font-size, var(${wr}â¢fontâ¢size)); 1574 display: inline-flex; 1575 align-items: center; 1576 gap: var(${be}); 1577 line-height: normal; 1578 min-width: 0%; /* @note: allows truncation/ellipsis for [data-element=text] */ 1579 1580 &[is-strong] [data-element=text] { 1581 font-weight: var(--arc-avatar-text-font-weight, var(--arc-font-weight-bold)); 1582 1583 [data-element=subtext] { 1584 font-weight: var(--arc-avatar-text-subtext-font-weight, var(--arc-font-weight-normal)); 1585 } 1586 } 1587 1588 [data-element=text] { 1589 flex: 1; 1590 text-align: start; 1591 } 1592 1593 [data-element=subtext] { 1594 display: var(--arc-avatar-subtext-display, block); 1595 font-size: var(--arc-avatar-subtext-font-size, var(${te}â¢fontâ¢size)); 1596 1597 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 1598 color: var(--arc-avatar-subtext-color, color-mix(in srgb, currentcolor 61.2%, transparent)); 1599 } 1600 1601 :where([data-element=text], [data-element=subtext]) { 1602 overflow: var(${wr}â¢overflow); 1603 text-overflow: var(${wr}â¢textâ¢overflow); 1604 white-space: var(${wr}â¢whiteâ¢space); 1605 } 1606 } 1607 1608} 1609`,ds="Anonymous",ec=({children:a,avatar:r={},subtext:e,size:o,gapSize:t,overflow:l,isStrong:n,...h})=>{const d=r.anonymousName||ds,v=r.name||r.email||r.src,u=r.name||r.email,p=r.isAnonymous||!v,g=a||p?d:u,f=t!=="inherit"?t:void 0,k=l!=="inherit"?l:void 0;return(0,c.jsxs)("span",{...h,"arc-avatar-text":"","data-gap":f,"data-overflow":k,"is-strong":n?"":void 0,children:[(0,c.jsx)(ac,{...r,isAnonymous:p,size:o}),(0,c.jsxs)("span",{"data-element":"text",children:[g,e&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("br",{}),(0,c.jsx)("small",{"data-element":"subtext",children:e})]})]})]})};H("ArcAvatarText",ss);const hs=i` 1610@layer arc-components { 1611 1612 [arc-avatar-pile] { 1613 position: relative; 1614 display: inline-flex; 1615 align-items: center; 1616 gap: 0; 1617 1618 ${Gt} 1619 ${Tn} 1620 1621 /* Cutout (mask) a portion of subsequent avatars ---------------⢠*/ 1622 [arc-avatar]+[arc-avatar] { 1623 margin-left: -0.125em; 1624 1625 /* magic! */ 1626 mask: radial-gradient( 1627 50% 50% at -43% 50%, 1628 transparent 110%, 1629 black 110% 1630 ) padding-box; 1631 } 1632 1633 } 1634 1635} 1636`,vs=({size:a="md",...r})=>(0,c.jsx)("div",{...r,"arc-avatar-pile":"","data-size":a});H("ArcAvatarPile",hs);const Ue=a=>typeof a=="string"?a:typeof a=="number"?a.toString():Array.isArray(a)?a.map(Ue).join(""):(0,y.isValidElement)(a)?Ue(a.props.children):"",On={},us=(a="id")=>{const r=(On[a]??0)+1;return On[a]=r,`${a}-${r}`},Kr=(a,r="id")=>{const e=(0,y.useId)();return a??`${r}-${e}`},oc=[...Ka],tc=[...Da],gs=[...ve],Dn=L(lr,["common"]),ps=L(lr,["ai","brand"]),cc=["nw-corner","to
1636p-start","top-center","top-end","ne-corner","left-start","right-start","left-center","center","right-center","left-end","right-end","sw-corner","bottom-start","bottom-center","bottom-end","se-corner"],nc=["ignore","flip"],Nn=["compact","comfortable"],We=(a,r=1/0,e=" ")=>[...a].flat(r)?.filter(Boolean)?.join(e),Or={popover:oc[0],anchorAt:cc[13],boundary:nc[0],tryFallbacks:!1,variant:Dn[0],scheme:tc[0],density:Nn[0],isInverse:!1,hasTail:!1,tailSize:8,offset:0},ic=()=>typeof CSS>"u"||typeof CSS.supports!="function"?!1:CSS.supports("position-anchor","--anchor-name"),fs=()=>typeof CSS>"u"||typeof CSS.supports!="function"?!1:CSS.supports("container-type","anchored"),lc={canAnchor:ic(),canAnchoredContainers:fs()},Fn=["center","nw-corner","ne-corner","se-corner","sw-corner"],Hn=({canHaveTail:a,tailSize:r})=>{if(!a)return{cssTailVar:"",floatingTailPx:0};const e=Math.abs(Number(r||Or.tailSize)),o=e>0?e:Or.tailSize;return{cssTailVar:o===Or.tailSize?"":`${o}px`,floatingTailPx:o}},Po=typeof window>"u"?y.useEffect:y.useLayoutEffect,Vn=(a,r="toggle",e=document)=>{const o=e.getElementById(a);({toggle:()=>o?.togglePopover(),show:()=>o?.showPopover(),hide:()=>o?.hidePopover()})[r]()},Ge=new WeakMap,sc=a=>{const r=String(a??"").trim();if(r==="none")return"none";let e=r.replace(/[^\w-]/g,"-");for(;e.startsWith("-");)e=e.slice(1);for(;e.endsWith("-");)e=e.slice(0,-1);return e?`--${e}`:"--"},Ze=a=>{const r=sc(a);return r==="none"?null:r},Un=(a,r)=>{const e=Ze(r);if(!e)return()=>{};let o=Ge.get(a);return o||(o=new Set,Ge.set(a,o)),o.has(e)?()=>{}:(o.add(e),a.style.setProperty("anchor-name",We([...o],1/0,", ")),()=>{const t=Ge.get(a);if(t){if(t.delete(e),t.size===0){Ge.delete(a),a.style.removeProperty("anchor-name");return}a.style.setProperty("anchor-name",We([...t],1/0,", "))}})},Wn=a=>a==="start"||a==="end"?a:"center",ms=a=>{const r=a.split("-")[0];return r==="top"||r==="right"||r==="bottom"||r==="left"?r:null},Gn=a=>{const r=ms(a),e=Wn(a.split("-")[1]);switch(r){case"top":return{block:"start",inline:e};case"bottom":return{block:"end",inline:e};case"left":return{block:e,inline:"start"};case"right":return{block:e,inline:"end"};default:return{block:"center",inline:"center"}}},Zn=(a,r)=>a!=="center"&&r!=="center"&&a!==r,Kn=(a,r)=>
1636{const e=Gn(a),o=Gn(r),t=Zn(e.block,o.block),l=Zn(e.inline,o.inline);return t&&l?"flip-block-inline":t?"flip-block":l?"flip-inline":""},bs={...{"top-start":"top-start","top-end":"top-end","right-start":"right-start","right-end":"right-end","bottom-start":"bottom-start","bottom-end":"bottom-end","left-start":"left-start","left-end":"left-end"},...{"top-center":"top","right-center":"right","bottom-center":"bottom","left-center":"left",center:"bottom","nw-corner":"top-start","ne-corner":"top-end","sw-corner":"bottom-start","se-corner":"bottom-end"}},Yn=a=>{a.style.removeProperty("top"),a.style.removeProperty("left"),a.style.removeProperty("position"),a.style.removeProperty("margin"),delete a.dataset.fallbacks},$s=[{test:(a,r,e)=>a==="y"&&r.includes("top")&&e.includes("top"),value:-1},{test:(a,r,e)=>a==="y"&&r.includes("top")&&e.includes("bottom"),value:-1},{test:(a,r,e)=>a==="y"&&r.includes("bottom")&&e.includes("top"),value:1},{test:(a,r,e)=>a==="x"&&r.includes("left")&&e.includes("left"),value:-1},{test:(a,r,e)=>a==="x"&&r.includes("left")&&e.includes("right"),value:-1},{test:(a,r,e)=>a==="x"&&r.includes("right")&&e.includes("left"),value:1}],qn=(a,r,e)=>$s.find(o=>o.test(a,r,e))?.value||0,ys=({anchorEl:a,popoverEl:r,anchorAt:e,tryFallbacks:o,offsetPx:t,tailSizePx:l,hasTail:n,isOpen:h})=>{Po(()=>
1636{if(!(h&&!ic()&&!!a&&!!r)){r&&Yn(r);return}const v=a,u=r,p=bs[e];let g=!0,f;return(async()=>{try{const{autoUpdate:I,computePosition:M,flip:_,offset:E}=await Br.e("defaultVendors-node_modules_pnpm_floating-ui_dom_1_7_5_node_modules_floating-ui_dom_dist_floa-04d176").then(Br.bind(Br,40153));if(!g)return;const C=n?Math.max(0,l)*(Math.sqrt(2)/2):0,S=[E(t)];o&&S.push(_({fallbackStrategy:"bestFit"}));const F=async()=>{try{const P=await M(v,u,{placement:p,strategy:"fixed",middleware:S}),G=P.x+C*qn("x",P.placement,p),Z=P.y+C*qn("y",P.placement,p);if(u.style.left=`${G}px`,u.style.top=`${Z}px`,!n||!o){delete u.dataset.fallbacks;return}const or=Kn(p,P.placement);or?u.dataset.fallbacks=or:delete u.dataset.fallbacks}catch{}};f=I(v,u,F),await F()}catch{}})(),()=>{g=!1,f?.(),Yn(u)}},[e,a,n,h,t,r,l,o])},Oo=1,$e=2,xs=[{test:(a,r)=>r.top>=a.bottom+Oo,value:"bottom"},{test:(a,r)=>r.bottom<=a.top-Oo,value:"top"},{test:(a,r)=>r.left>=a.right+Oo,value:"right"},{test:(a,r)=>r.right<=a.left-Oo,value:"left"}],Ke=a=>{delete a.dataset.fallbacks};let dc;const ks=()=>(dc||(dc=Br.e("defaultVendors-node_modules_pnpm_floating-ui_dom_1_7_5_node_modules_floating-ui_dom_dist_floa-04d176").then(Br.bind(Br,40153))),dc),Do=a=>({x:a.left+a.width/2,y:a.top+a.height/2}),ws=(a,r,e,o)=>{const t=Do(r),l=Do(e);if(a==="top"||a==="bottom"){const v=Math.abs(o==="rtl"?e.right-r.right:e.left-r.left),u=Math.abs(o==="rtl"?e.left-r.left:e.right-r.right),p=Math.abs(l.x-t.x);return Math.abs(v-u)<=$e&&p<=$e||p+$e<Math.min(v,u)?"center":v<=u?"start":"end"}const n=Math.abs(e.top-r.top),h=Math.abs(e.bottom-r.bottom),d=Math.abs(l.y-t.y);return Math.abs(n-h)<=$e&&d<=$e||d+$e<Math.min(n,h)?"center":n<=h?"start":"end"},As=(a,r,e,o)=>{const t=xs.find(d=>d.test(r,e));let l;if(t)l=t.value;else{const d=Do(r),v=Do(e),u=v.y-d.y,p=v.x-d.x,g=Math.min(r.height,e.height)*.1;Math.abs(u)>g?l=u>=0?"bottom":"top":l=p>=0?"right":"left"}if(Wn(a.split("-")[1])==="center")return l;const h=ws(l,r,e,o);return`${l}-${h}`},zs=({anchorEl:a,popoverEl:r,anchorAt:e,tryFallbacks:o,isOpen:t,hasTail:l})=>{Po(()=>
1636{if(!r||!lc.canAnchor)return;if(!l||!o||!t||lc.canAnchoredContainers||!a){Ke(r);return}const n=e;if(n==="center"||n.includes("corner")){Ke(r);return}const h=a,d=r;let v=!0,u;const p=()=>{const f=h.getBoundingClientRect(),k=d.getBoundingClientRect(),z=getComputedStyle(h).direction==="rtl"?"rtl":"ltr",I=As(n,f,k,z),M=Kn(n,I);n===I?Ke(d):M?d.dataset.fallbacks=M:Ke(d)};return(async()=>{try{const{autoUpdate:k}=await ks();if(!v)return;u=k(h,d,p),p()}catch{}})(),()=>{v=!1,u?.(),Ke(d)}},[e,a,l,t,r,o])},No=a=>typeof a=="string",Jn=a=>a!==null&&typeof a=="object",Xn=(a,r=" ")=>a.split(r).map(e=>e.trim()).filter(Boolean),Cs=i` 1637@layer arc-components { 1638 1639 [arc-spinner] { 1640 flex: none; 1641 display: flex; 1642 1643 position: var(--arc-spinner-position, relative); 1644 inset: var(--arc-spinner-inset, 0); 1645 translate: var(--arc-spinner-translate, 0); 1646 width: var(--arc-spinner-size, 3em); 1647 1648 border-radius: var(--arc-border-radius-circle); 1649 aspect-ratio: 1 / 1; 1650 pointer-events: none; 1651 1652 [arc-spinner-circle] { 1653 fill: none; 1654 stroke: var(--arc-spinner-circle-color, currentcolor); 1655 opacity: var(--arc-spinner-circle-opacity, var(--arc-alpha-30)); 1656 } 1657 1658 [arc-spinner-progress] { 1659 fill: none; 1660 stroke: var(--arc-spinner-progress-color, var(--arc-color-fg-brand-mid)); 1661 stroke-dasharray: var(--arc-spinner-progress, 0.3334) 1; 1662 stroke-dashoffset: 0; 1663 stroke-linecap: round; 1664 opacity: var(--arc-spinner-progress-opacity, var(--arc-alpha-100)); 1665 animation: var(--arc-spinner-animation-duration, 743ms) arc-spinner-rotate linear infinite; 1666 transform-origin: 50% 50%; 1667 } 1668 } 1669 1670 @keyframes arc-spinner-rotate { 1671 to { 1672 transform: rotate3d(0, 0, 1, 360deg); 1673 } 1674 } 1675} 1676`,hc=(0,y.forwardRef)(({progress:a,...r},e)=>(0,c.jsxs)("svg",{...r,ref:e,viewBox:"0 0 100 100","arc-spinner":"",style:{"--arc-spinner-progress":a??""},children:[(0,c.jsx)("circle",{"arc-spinner-circle":"",cx:"50%",cy:"50%",r:"45%",strokeWidth:"12.5%",pathLength:"1"}),(0,c.jsx)("circle",{"arc-spinner-progress":"",cx:"50%",cy:"50%",r:"45%",strokeWidth:"12.5%",pathLength:"1"})]}));hc.displayName="ArcSpinner",H("ArcSpinner",Cs);const Ss=(...a)=>console.log(...a),Qn=(...a)=>console.warn(...a),_s=(...a)=>console.error(...a),ye=i`--arcâ¢iconâ¢text`,Ye=i`${ye}â¢fontâ¢size`,ri=i`${ye}â¢icon`,vc=i`${ye}â¢text`,ai=i`${ye}â¢subtext`,sa=i`${ye}â¢fg`,_a=i`${ye}â¢gap`,Fa=i`${ri}â¢size`,Fo=i`${ri}â¢verticalâ¢align`,qe=i`${vc}â¢overflow`,Ho=i`${vc}â¢textâ¢overflow`,Vo=i`${vc}â¢whiteâ¢space`,Uo=i`${ai}â¢fontâ¢size`,ei=i`${ai}â¢fg`,Es=i` 1677 1678 &[data-variant=inherit] { /* @default 'inherit' ⢠uses font/color props from context */ 1679 ${sa}: currentcolor; 1680 } 1681 1682 &[data-variant=primary] { 1683 ${sa}: var(--arc-color-fg-primary); 1684 } 1685 1686 &[data-variant=secondary] { 1687 ${sa}: var(--arc-color-fg-secondary); 1688 } 1689 1690 &[data-variant=inverse] { 1691 ${sa}: var(--arc-color-dark-neutral-1000); 1692 } 1693 1694 &[data-variant=brand] { 1695 ${sa}: var(--arc-color-fg-brand-stark); 1696 } 1697 1698 &[data-variant=info] { 1699 ${sa}: var(--arc-color-fg-info-stark); 1700 } 1701 1702 &[data-variant=success] { 1703 ${sa}: var(--arc-color-fg-success-stark); 1704 } 1705 1706 &[data-variant=warning] { 1707 ${sa}: var(--arc-color-fg-warning-stark); 1708 } 1709 1710 &[data-variant=critical] { 1711 ${sa}: var(--arc-color-fg-critical-mid); 1712 } 1713 1714`,Ts=i` 1715 1716 /* Overall Text Sizes */ 1717 1718 &[data-size=inherit] { /* @default 'inherit' ⢠uses font/size from context */ 1719 ${Ye}: 1em; 1720 ${Uo}: 0.75em; 1721 ${Fa}: 1em; 1722 ${_a}: 0.25em; /* 4px @ 100% */ 1723 } 1724 1725 &[data-size=md] { 1726 ${Ye}: var(--arc-font-size-14); 1727 ${Uo}: var(--arc-font-size-12); 1728 ${_a}: var(${m}â¢3); 1729 } 1730 1731 &[data-size=sm] { 1732 ${Ye}: var(--arc-font-size-12); 1733 ${Uo}: var(--arc-font-size-12); 1734 ${_a}: var(${m}â¢3); 1735 } 1736 1737 /* Gap Sizes */ 1738 1739 &[data-gap=lg] { ${_a}: var(${m}â¢12); } /* 12px @ 100% */ 1740 &[data-gap=md] { ${_a}: var(${m}â¢8); } /* 8px @ 100% */ 1741 &[data-gap=sm] { ${_a}: var(${m}â¢3); } /* 4px @ 100% */ 1742 1743 /* Icon Sizes */ 1744 1745 &[icon-size=xl] { ${Fa}: var(${s}â¢24); } 1746 &[icon-size=lg] { ${Fa}: var(${s}â¢20); } 1747 &[icon-size=md] { ${Fa}: var(${s}â¢16); } 1748 &[icon-size=sm] { ${Fa}: var(${s}â¢14); } 1749 &[icon-size=xs] { ${Fa}: var(${s}â¢12); } 1750`,Is=i` 1751 1752 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 1753 ${ei}: var(--arc-icon-text-subtext-color, color-mix(in srgb, currentcolor 61.2%, transparent)); 1754 1755 /* ArcIcon */ 1756 --arc-icon-color: var(--arc-icon-text-icon-color, var(${sa})); 1757 --arc-icon-size: var(--arc-icon-text-icon-size, var(${Fa})); 1758 --arc-icon-fa-line-height: normal; 1759 --arc-icon-align-self: normal; 1760 1761 &[data-layout=inline] { 1762 ${qe}: unset; 1763 ${Ho}: unset; 1764 ${Vo}: unset; 1765 1766 ${Fo}: calc((var(${Fa}) - var(${Ye})) / -2); 1767 1768 &:has(svg) { ${Fo}: text-bottom; } 1769 } 1770 1771 /* Text Overflows */ 1772 &[data-layout=gutter] { 1773 ${qe}: visible; 1774 ${Ho}: unset; 1775 ${Vo}: normal; 1776 1777 &[data-overflow=truncate] { 1778 ${qe}: hidden; 1779 ${Ho}: ellipsis; 1780 ${Vo}: nowrap; 1781 } 1782 } 1783 1784`,js=i` 1785@layer arc-components { 1786 1787 [arc-icon-text] { 1788 ${Es} 1789 ${Ts} 1790 ${Is} 1791 } 1792 1793 [arc-icon-text] { 1794 position: var(--arc-icon-text-position, relative); 1795 font-size: var(--arc-icon-text-font-size, var(${Ye})); 1796 color: var(--arc-icon-text-text-color, var(${sa})); 1797 line-height: var(--arc-icon-text-line-height, inherit); 1798 1799 [data-element=text], 1800 [data-element=subtext] { 1801 position: relative; 1802 hyphens: var(--arc-icon-text-hyphens, auto); 1803 } 1804 1805 &[is-strong] [data-element=text] {
1806 font-weight: var(--arc-icon-text-font-weight, var(--arc-font-weight-bold)); 1807 1808 [data-element=subtext] { 1809 font-weight: var(--arc-icon-text-subtext-font-weight, var(--arc-font-weight-normal)); 1810 } 1811 } 1812 1813 /* @default ⢠gutter layout */ 1814 &[data-layout=gutter] { 1815 display: inline-flex; 1816 align-items: var(--arc-icon-text-align-items, first baseline); 1817 gap: var(--arc-icon-text-gap, var(${_a})); 1818 1819 /* Truncation Support */ 1820 overflow: var(--arc-icon-text-overflow, var(${qe})); 1821 1822 &[is-flipped] { flex-direction: row-reverse; } 1823 1824 &:not(:has([arc-gradient])) [data-element=icon] { display: contents; } 1825 1826 [data-element=text] { 1827 flex: 1; 1828 min-width: 0%; 1829 } 1830 1831 [data-element=subtext] { 1832 display: var(--arc-icon-text-subtext-display, block); 1833 line-height: normal; 1834 font-size: var(--arc-icon-text-subtext-font-size, var(${Uo})); 1835 color: var(--arc-icon-text-subtext-color, var(${ei})); 1836 padding-block-start: var(--arc-icon-text-subtext-spacing, 0); 1837 } 1838 1839 :where([data-element=text], [data-element=subtext]) { 1840 overflow: var(--arc-icon-text-overflow, var(${qe})); 1841 text-overflow: var(--arc-icon-text-text-overflow, var(${Ho})); 1842 white-space: var(--arc-icon-text-white-space, var(${Vo})); 1843 } 1844 } 1845 1846 &[data-layout=inline] { 1847 display: inline; 1848 1849 [data-element=icon] { 1850 line-height: normal; 1851 vertical-align: var(--arc-icon-text-icon-vertical-align, var(${Fo})); 1852 } 1853 1854 [data-element=icon] + [data-element=text] { margin-inline-start: var(--arc-icon-text-gap, var(${_a})); } 1855 [data-element=text]:has(+ [data-element=icon]) { margin-inline-end: var(--arc-icon-text-gap, var(${_a})); } 1856 [data-element=subtext] { display: contents; } 1857 1858 &:has(svg) { 1859 ${Fo}: text-bottom; 1860 } 1861 } 1862 } 1863} 1864 1865`,Ls=L(lr,["inherit","primary","secondary","inverse","brand","info","success","warning","critical"]),Yr=({children:a,layout:r="gutter",size:e="inherit",variant:o="inherit",tag:t="span",icon:l,iconTooltip:n,text:h,subtext:d,gradient:v,overflow:u,iconSize:p,gapSize:g,isFlipped:f=!1,isStrong:k=!1,...z})=>{const I=a||h,M=!!l,_=!!I,E=r==="gutter",C=r==="inline",S=M&&(!f||E),F=M&&_&&f&&C,P=!!p&&p!=="inherit",G=P&&Ya.includes(p)?p:void 0,Z=P&&!Ya.includes(p)?p:void 0,or=g!=="inherit"?g:void 0,sr=u!=="inherit"?u:void 0,Q=Mn(l),dr=typeof Q=="string"?(0,c.jsx)(D,{icon:Q,size:Z,gradient:v}):Q,xr=n?(0,c.jsx)(bc,{text:n,children:dr}):dr;return(0,c.jsxs)(t,{...z,"arc-icon-text":"","data-variant":o,"data-layout":r,"data-overflow":sr,"data-size":e,"data-gap":or,"icon-size":G,"is-flipped":f?"":void 0,"is-strong":k?"":void 0,children:[S&&(0,c.jsx)("span",{"data-element":"icon",children:xr}),_&&(0,c.jsxs)("span",{"data-element":"text",children:[I,!!d&&(E?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("br",{}),(0,c.jsx)("small",{"data-element":"subtext",children:d})]}):(0,c.jsxs)(c.Fragment,{children:[" ",(0,c.jsx)("span",{"data-element":"subtext",children:d})]}))]}),F&&(0,c.jsx)("span",{"data-element":"icon",children:xr})]})};H("ArcIconText",js);const da={...Or,popover:oc[2],anchorAt:cc[2],boundary:nc[1],tryFallbacks:!0,scheme:tc[3],offset:4,isStrong:!0,hasTail:!0,isEnabled:!0},Wo=new WeakSet,Rs=100,Ms=100;let uc=!0,gc=null;const Bs=typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("selector(:focus-visible)"),Ps=a=>a instanceof Element?Bs?a.matches(":focus-visible")===!0:uc:!1,pc=new WeakMap,fc=new WeakMap,Go=(a,r)=>{const e=a.get(r);e!=null&&(clearTimeout(e),a.delete(r))},oi=(a,r,e,o)=>{const t=window.setTimeout(()=>{o(),a.delete(r)},e);a.set(r,t)},ti="[aria-describedby]",Os=a=>typeof a=="object"&&a!==null&&a.hasAttribute?.("popover")===!0,ci=a=>a instanceof HTMLElement&&a.getAttribute("role")==="tooltip"&&Os(a),Ds=a=>!!a&&(a.tagName==="LABEL"||a.hasAttribute("arc-label")),Ns=a=>a?.match(/\S+/g)??[],mc=(a,r)=>{const e=la(r??document.documentElement);if(!e)return null;const o=e.querySelector(`[aria-describedby~="${a}"]`);return o?o.closest("label,[arc-label]")??o:null},Fs=a=>{if(!(a instanceof Element))return null;const r=a.closest?.(ti);if(r){const o=r.getAttribute("aria-describedby")??"";if(o)return{anchor:r.closest?.("label,[arc-label]")??r,tooltipId:o}}let e=a;for(;e;){if(Ds(e)){const o=e.querySelector?.(ti),t=o?.getAttribute?.("aria-describedby")??"";if(o&&t)return{anchor:e,tooltipId:t}}e=e.parentElement}return null},Hs=a=>{if(!(a instanceof Element))return null;const r=a.closest?.('[role="tooltip"][popover]')??null;return r instanceof HTMLElement?r:null},Vs=a=>a?.id?mc(a.id,a):null,Us=a=>{const r=Hs(a),e=Fs(a);if(!e&&r){const d=Vs(r);
1865return!d||!r.id?null:{anchor:d,tooltip:r}}if(!e)return null;const{anchor:o,tooltipId:t}=e;if(!t)return null;const l=la(a);if(!l)return null;const n=Ns(t),h=r??n.map(d=>l.getElementById(d)).find(d=>ci(d))??null;return ci(h)?{anchor:o,tooltip:h}:null},Ws=(a,r,e)=>{const o=e instanceof Element?e:null;if(!o)return!1;const t=a===o||a.contains(o),l=r===o||r.contains(o);return t||l},Gs=(a,r)=>{if(Go(fc,a),Go(pc,a),!r){a.isConnected&&a.showPopover?.();return}oi(pc,a,Rs,()=>{a.isConnected&&a.showPopover?.()})},Zs=(a,r)=>{if(Go(pc,a),Go(fc,a),!r){a.isConnected&&a.hidePopover?.();return}oi(fc,a,Ms,()=>{a.isConnected&&a.hidePopover?.()})},Je=(a,r,e,o)=>{const t=Us(r);if(!t)return;const{anchor:l,tooltip:n}=t;if(a){Gs(n,o);return}Ws(l,n,e)||Zs(n,o)};let Zo=null,Ko=null,Yo=null,qo=null,Jo=null,Xo=null,xe=null;const ni=a=>{if(!a&&typeof document>"u")return;const r=a?la(a):document;if(!r||Wo.has(r))return;Xo=o=>{uc=!1,gc=o.target},xe=()=>{gc=null},Zo=o=>Je(!0,o.target,void 0,!0),Ko=o=>{Ps(o.target)&&Je(!0,o.target,void 0,!1)},Yo=o=>Je(!1,o.target,o.relatedTarget,!0),qo=o=>{const t=o.relatedTarget??gc;Je(!1,o.target,t,!1)},Jo=o=>{o.key==="Tab"&&(uc=!0),o.key==="Escape"&&Je(!1,o.target,void 0,!1)},[["pointerdown",Xo],["pointerup",xe],["pointercancel",xe],["pointerover",Zo],["focusin",Ko],["pointerout",Yo],["focusout",qo],["keydown",Jo]].forEach(([o,t])=>{r.addEventListener(o,t)}),Wo.add(r)},Ks=()=>{if(!Wo.has(document)||typeof document>"u")return;[["pointerdown",Xo],["pointerup",xe],["pointercancel",xe],["pointerover",Zo],["focusin",Ko],["pointerout",Yo],["focusout",qo],["keydown",Jo]].forEach(([r,e])=>{e&&document.removeEventListener(r,e)}),Zo=null,Ko=null,Yo=null,qo=null,Jo=null,Xo=null,xe=null,Wo.delete(document)},ha=i`--arcâ¢tooltip`,ii=i`${ha}â¢subtext`,li=i`${ha}â¢slot`,Ys=i` 1866@layer arc-components { 1867 [arc-tooltip] { 1868 ${ha}â¢width: max-content; 1869 ${ha}â¢maxâ¢width: 20em; 1870 ${ha}â¢fontâ¢size: var(${s}â¢12); 1871 ${ha}â¢padding: var(${m}â¢10); 1872 ${ii}â¢spacing: var(${m}â¢6); 1873 ${li}â¢marginâ¢top: var(${m}â¢8); 1874 1875 /* Communicates to Popover Engine ------------------------------⢠*/ 1876 --arc-popover-border-radius: var(--arc-border-radius-md); 1877 --arc-popover-min-width: auto; /** Ensure tooltip width is driven by content, not anchor width */ 1878 --arc-popover-width: var(--arc-tooltip-width, var(${ha}â¢width)); 1879 --arc-popover-max-width: var(--arc-tooltip-max-width, var(${ha}â¢maxâ¢width)); 1880 --arc-popover-border: var(--arc-tooltip-border, 0); 1881 --arc-popover-footer-flex-direction: var(--arc-tooltip-footer-flex-direction, row); 1882 --arc-popover-font-size: var(--arc-tooltip-font-size, var(${ha}â¢fontâ¢size)); 1883 --arc-popover-padding: var(--arc-tooltip-padding, var(${ha}â¢padding)); 1884 1885 /* Communicates to IconText ----------------------------------⢠*/ 1886 --arc-icon-text-subtext-font-size: var(--arc-tooltip-subtext-font-size, var(${ha}â¢fontâ¢size)); 1887 --arc-icon-text-hyphens: none; 1888 --arc-icon-text-line-height: var(--arc-line-height-tight); 1889 --arc-icon-text-subtext-spacing: var(--arc-tooltip-subtext-spacing, var(${ii}â¢spacing)); 1890 1891 [arc-tooltip-content] + [arc-tooltip-slot-content] { 1892 margin-top: var(--arc-tooltip-slot-margin-top, var(${li}â¢marginâ¢top)); 1893 } 1894 } 1895} 1896`,bc=(0,y.forwardRef)(({id:a,children:r,slot:e,isEnabled:o=da.isEnabled,popover:t=da.popover,variant:l=da.variant,anchorAt:n=da.anchorAt,alternateAnchor:h,boundary:d=da.boundary,tryFallbacks:v=da.tryFallbacks,hasTail:u=da.hasTail,offset:p=da.offset,scheme:g=da.scheme,isStrong:f=da.isStrong,text:k,subtext:z,icon:I,isFlipped:M,..._},E)=>{const C=Kr(a,"arc-tooltip"),S=(0,y.useRef)(null);(0,y.useImperativeHandle)(E,()=>S.current);const F=Q=>typeof Q=="object"&&Q!==null&&"tabIndex"in Q,P=r,G=!!h;let Z=null;(0,y.isValidElement)(P)?Z=o?(0,y.cloneElement)(P,{"aria-describedby":C,...F(P.props)&&P.props.tabIndex!=null?{}:{tabIndex:0}}):P:!G&&typeof console<"u"&&Qn("\u{1F6A8} ArcTooltip \u2022 expects a single ReactElement child as the trigger.");const or=(0,y.useMemo)(()=>()=>mc(C,S.current),[C]),sr=g==="auto"?void 0:g;return(0,y.useEffect)(()=>
1896{if(o)try{ni(S.current)}catch{}},[o]),(0,c.jsxs)(c.Fragment,{children:[Z,o&&(0,c.jsxs)(eo,{..._,"arc-tooltip":"",scheme:_?.isInverse?"inverse":sr,role:"tooltip",id:C,ref:S,popover:t,anchorAt:n,tryFallbacks:v||d==="flip",variant:l,hasTail:u,offset:p,hidePopoverButton:!0,alternateAnchor:h??or,tag:_?.tag??"span",contentTag:_?.contentTag??"span",children:[k&&(0,c.jsx)(Yr,{"arc-tooltip-content":"",text:k,subtext:z,icon:I,isFlipped:M,isStrong:f,size:"inherit",variant:"inherit"}),e&&(0,c.jsx)("span",{"arc-tooltip-slot-content":"",children:e})]})]})});H("ArcTooltip",Ys);const qs=L(Le,["circle","square","narrow"]),Js=L(_r,["xxl","xl","lg","md","sm"]),Xs=L(na,["hug","fill","icon"]),Qs=L(lr,["common","ai","critical","alpha"]),rd=[...Da],ad=[...zo],si=L(lr,["primary","secondary","tertiary","critical-primary","critical-secondary","ai-primary","ai-secondary","primary-inverse","secondary-inverse","tertiary-inverse"]),ed=L(Co,["primary","secondary","tertiary","plain","link-style"]),od=[...ve],td=i` 1897:root { 1898 --arc-button-critical-bg-hover: light-dark( 1899 color-mix(in srgb, var(--arc-color-light-red-600), transparent 90%), 1900 color-mix(in srgb, var(--arc-color-dark-red-700), transparent 75%) 1901 ); 1902 1903 /* common-secondary variant floating button */ 1904 --arc-button-common-secondary-floating-bg: var(--arc-color-bg-primary); 1905 --arc-button-common-secondary-floating-bg-hover: light-dark(var(--arc-color-light-neutral-100), var(--arc-color-dark-neutral-100)); 1906 --arc-button-common-secondary-floating-bg-active: light-dark(var(--arc-color-light-neutral-200), var(--arc-color-dark-neutral-200)); 1907 --arc-button-common-secondary-floating-bg-processing: var(--arc-color-bg-primary); 1908 --arc-button-common-secondary-floating-bg-disabled: var(--arc-color-bg-disabled); 1909 --arc-button-common-secondary-floating-bg-focus: var(--arc-color-bg-primary); 1910 1911 /* critical-secondary variant floating button */ 1912 --arc-button-critical-secondary-floating-bg: var(--arc-color-bg-primary); 1913 --arc-button-critical-secondary-floating-bg-hover: var(--arc-color-bg-critical-subtle); 1914 --arc-button-critical-secondary-floating-bg-active: var(--arc-color-bg-critical-muted); 1915 --arc-button-critical-secondary-floating-bg-processing: var(--arc-color-bg-primary); 1916 --arc-button-critical-secondary-floating-bg-disabled: var(--arc-color-bg-disabled); 1917 --arc-button-critical-secondary-floating-bg-focus: var(--arc-color-bg-primary); 1918 1919 /* ai-secondary variant floating button */ 1920 --arc-button-ai-secondary-floating-bg-processing: var(--arc-color-bg-primary); 1921 --arc-button-ai-secondary-floating-bg-disabled: var(--arc-color-bg-disabled); 1922 --arc-button-ai-secondary-floating-bg-focus: var(--arc-color-bg-primary); 1923} 1924`,cd=i` 1925:root { 1926 --arc-link-fg-hover-inverse: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 68.2%, transparent); 1927 --arc-link-fg-disabled-inverse: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 30%, transparent); 1928 --arc-link-focus-disabled-inverse: light-dark(var(--arc-color-light-blue-300), var(--arc-color-blue-600)); 1929} 1930`,nd=i` 1931:root { 1932 --arc-popover-ai-purple-50: light-dark(#fbf2ff, #210125); 1933 --arc-popover-ai-purple-200: light-dark(#9c15ff, #ad44cb); 1934 --arc-popover-ai-blue-50: light-dark(#f4fbff, #00223b); 1935 --arc-popover-ai-blue-200: light-dark(#1eb4fb, #169cfe); 1936} 1937`,$=i`--arcâ¢button`,w=i`${$}â¢fg`,b=i`${$}â¢bg`,B=i`${$}â¢edge`,Tr=i`${$}â¢border`,ke=i`${$}â¢outline`,U=i`${$}â¢spinner`,Ar=i`${$}â¢icon`,id=i` 1938 &[data-size=xxl] { 1939 ${$}â¢fontâ¢size: var(${s}â¢16); 1940 ${U}â¢size: var(${s}â¢32); 1941 ${Ar}â¢size: var(${s}â¢20); 1942 ${Ar}â¢sizeâ¢large: var(${s}â¢24); 1943 ${$}â¢height: var(${s}â¢56); 1944 ${$}â¢gap: var(${s}â¢10); 1945 ${$}â¢paddingâ¢inline: var(${s}â¢32); 1946 } 1947 1948 &[data-size=xl] { 1949 ${$}â¢fontâ¢size: var(${s}â¢14); 1950 ${U}â¢size: var(${s}â¢16); 1951 ${Ar}â¢size: var(${s}â¢16); 1952 ${Ar}â¢sizeâ¢large: var(${s}â¢20); 1953 ${$}â¢height: var(${s}â¢48); 1954 ${$}â¢gap: var(${s}â¢8); 1955 ${$}â¢paddingâ¢inline: var(${s}â¢32); 1956 } 1957 1958 &[data-size=lg] { /** @default */ 1959 ${$}â¢fontâ¢size: var(${s}â¢14); 1960 ${U}â¢size: var(${s}â¢16); 1961 ${Ar}â¢size: var(${s}â¢16); 1962 ${Ar}â¢sizeâ¢large: var(${s}â¢20); 1963 ${$}â¢height: var(${s}â¢40); 1964 ${$}â¢gap: var(${s}â¢8); 1965 ${$}â¢paddingâ¢inline: var(${s}â¢20); 1966 } 1967 1968 &[data-size=inherit] { 1969 ${$}â¢fontâ¢size: 1em; 1970 ${U}â¢size: 1em; 1971 ${Ar}â¢size: 1em; 1972 ${Ar}â¢sizeâ¢large: 1.25em; 1973 ${$}â¢gap: 0.5em; 1974 ${$}â¢paddingâ¢inline: 1em; 1975 } 1976 1977 &[data-size=md] { 1978 ${$}â¢fontâ¢size: var(${s}â¢14); 1979 ${U}â¢size: var(${s}â¢16); 1980 ${Ar}â¢size: var(${s}â¢14); 1981 ${Ar}â¢sizeâ¢large: var(${s}â¢20); 1982 ${$}â¢height: var(${s}â¢32); 1983 ${$}â¢gap: var(${s}â¢6); 1984 ${$}â¢paddingâ¢inline: var(${s}â¢16); 1985 } 1986 1987 &[data-size=sm] { 1988 ${$}â¢fontâ¢size: var(${s}â¢12); 1989 ${U}â¢size: var(${s}â¢14); 1990 ${Ar}â¢size: var(${s}â¢12); 1991 ${Ar}â¢sizeâ¢large: var(${s}â¢14); 1992 ${$}â¢height: var(${s}â¢24); 1993 ${$}â¢gap: var(${s}â¢4); 1994 ${$}â¢paddingâ¢inline: var(${s}â¢12); 1995 } 1996 1997 /* Custom buttons start out matching [data-size=lg] size */ 1998 &[arc-button=custom] { 1999 ${$}â¢fontâ¢size: var(${s}â¢14); 2000 ${U}â¢size: var(${s}â¢16); 2001 ${Ar}â¢size: var(${s}â¢16); 2002 ${Ar}â¢sizeâ¢large: var(${s}â¢20); 2003 ${$}â¢gap: var(${s}â¢8); 2004 ${$}â¢paddingâ¢inline: var(${s}â¢4); /* results in 24x24 for icon button @ 100% font size */ 2005 } 2006`,ld=i` 2007 &[data-layout=hug] { 2008 ${$}â¢width: auto; 2009 ${$}â¢contentâ¢width: fit-content; 2010 } 2011 2012 &[data-layout=fill] { 2013 ${$}â¢display: flex; 2014 ${$}â¢width: 100%; 2015 ${$}â¢contentâ¢width: 0; 2016 } 2017 2018 &[data-layout=icon] { 2019 ${$}â¢aspectâ¢ratio: 1 / 1; 2020 ${$}â¢flex: none; 2021 ${$}â¢minâ¢width: min-content; 2022 ${$}â¢maxâ¢width: none; 2023 ${$}â¢paddingâ¢inline: var(${s}â¢0); 2024 2025 &[data-shape=narrow] { 2026 ${$}â¢aspectâ¢ratio: auto; 2027 ${$}â¢paddingâ¢inline: var(${s}â¢2); 2028 } 2029 } 2030 2031`,sd=i` 2032 &:not([data-variant]) { /** @default - when no variant is set (i.e.: 'custom' buttons) */ 2033 ${w}: inherit; 2034 ${b}: transparent; 2035 ${B}: transparent; 2036 ${w}â¢disabled: var(--arc-color-fg-disabled); 2037 } 2038 2039 /** @default */ 2040 &:is( 2041 [data-variant=common], 2042 [data-variant=primary], 2043 [data-variant=primary-inverse] 2044 ) { 2045 ${w}: var(--arc-color-fg-on-theme-heavy); 2046 ${b}: var(--arc-color-bg-theme-heavy); 2047 ${B}: transparent; 2048 2049 ${w}â¢active: var(--arc-color-fg-on-theme-mid); 2050 ${w}â¢processing: var(--arc-color-fg-on-theme-stark); 2051 ${w}â¢disabled: var(--arc-color-fg-disabled); 2052 2053 ${b}â¢hover: var(--arc-color-bg-theme-stark); 2054 ${b}â¢active: var(--arc-color-bg-theme-mid); 2055 ${b}â¢processing: var(--arc-color-bg-theme-stark); 2056 ${b}â¢disabled: var(--arc-color-bg-disabled); 2057 2058 ${U}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2059 } 2060 2061 &[data-variant=secondary], &[data-variant=secondary-inverse] { /** @default - when icon-only */ 2062 ${w}: var(--arc-color-fg-primary); 2063 ${B}: var(--arc-color-border-theme-heavy); 2064 2065 ${w}â¢active: var(--arc-color-fg-secondary); 2066 ${w}â¢processing: var(--arc-color-fg-secondary); 2067 ${w}â¢disabled: var(--arc-color-fg-disabled); 2068 2069 ${B}â¢active: var(--arc-color-border-theme-mid); 2070 ${B}â¢processing: var(--arc-color-border-theme-subtle); 2071 ${B}â¢disabled: var(--arc-color-border-disabled); 2072 2073 &[data-layout=icon] { 2074 ${B}: var(--arc-color-border-mid); 2075 ${B}â¢hover: var(--arc-color-border-stark); 2076 ${B}â¢focus: var(--arc-color-border-mid); 2077 } 2078 2079 &[data-hierarchy=secondary] { 2080 ${b}: transparent; 2081 ${b}â¢hover: var(--arc-color-bg-neutral-muted); 2082 ${b}â¢active: var(--arc-color-bg-neutral-subtle); 2083 ${b}â¢processing: transparent; 2084 ${b}â¢disabled: transparent; 2085 ${b}â¢focus: var(--arc-color-alpha-white-3); 2086 } 2087 } 2088 2089 &[data-variant=secondary]:not([data-hierarchy=secondary]) { /** @deprecated */ 2090 ${b}: var(--arc-color-mono-white); 2091 ${b}â¢hover: linear-gradient(var(--arc-color-bg-neutral-muted) 0 0), var(--arc-color-mono-white); 2092 ${b}â¢active: linear-gradient(var(--arc-color-bg-neutral-subtle) 0 0), var(--arc-color-mono-white); 2093 ${b}â¢processing: var(--arc-color-mono-white); 2094 ${b}â¢disabled: var(--arc-color-mono-white); 2095 ${b}â¢focus: linear-gradient(var(--arc-color-alpha-white-3) 0 0), var(--arc-color-mono-white); 2096 } 2097 2098 &[data-variant=secondary-inverse]:not([data-hierarchy=secondary]) { /** @deprecated */ 2099 ${b}: var(--arc-color-mono-black); 2100 ${b}â¢hover: linear-gradient(var(--arc-color-bg-neutral-muted) 0 0), var(--arc-color-mono-black); 2101 ${b}â¢active: linear-gradient(var(--arc-color-bg-neutral-subtle) 0 0), var(--arc-color-mono-black); 2102 ${b}â¢processing: var(--arc-color-mono-black); 2103 ${b}â¢disabled: var(--arc-color-mono-black); 2104 ${b}â¢focus: linear-gradient(var(--arc-color-alpha-white-3) 0 0), var(--arc-color-mono-black); 2105 } 2106 2107 /* "floating" button mitigation */ 2108 &:is([data-variant=secondary], [data-variant=secondary-inverse])[arc-shadow] { 2109 ${b}: var(--arc-button-common-secondary-floating-bg); 2110 ${b}â¢hover: var(--arc-button-common-secondary-floating-bg-hover); 2111 ${b}â¢active: var(--arc-button-common-secondary-floating-bg-active); 2112 ${b}â¢processing: var(--arc-button-common-secondary-floating-bg-processing); 2113 ${b}â¢disabled: var(--arc-button-common-secondary-floating-bg-disabled); 2114 ${b}â¢focus: var(--arc-button-common-secondary-floating-bg-focus); 2115 } 2116 2117 &:is( 2118 [data-variant=tertiary], 2119 [data-variant=tertiary-inverse] 2120 ) { 2121 ${w}: var(--arc-color-fg-primary); 2122 ${b}: transparent; 2123 ${B}: transparent; 2124 2125 ${w}â¢active: var(--arc-color-fg-secondary); 2126 ${w}â¢processing: var(--arc-color-fg-secondary); 2127 ${w}â¢disabled: var(--arc-color-fg-disabled); 2128 2129 ${b}â¢hover: var(--arc-color-bg-neutral-muted); 2130 ${b}â¢focus: var(--arc-color-alpha-white-3); 2131 ${b}â¢active: var(--arc-color-bg-neutral-muted); 2132 ${b}â¢processing: var(--arc-color-bg-neutral-muted); 2133 } 2134 2135 &[data-hierarchy=plain] { 2136 ${w}: var(--arc-color-fg-primary); 2137 ${b}: transparent; 2138 ${B}: transparent; 2139 2140 ${w}â¢hover: var(--arc-color-alpha-heavy); 2141 ${w}â¢active: var(--arc-color-alpha-heavy); 2142 ${w}â¢processing: var(--arc-color-alpha-heavy); 2143 ${w}â¢disabled: var(--arc-color-fg-disabled); 2144 2145 ${b}â¢hover: transparent; 2146 ${b}â¢active: transparent; 2147 ${b}â¢processing: transparent; 2148 } 2149 2150`,dd=i` 2151 &[data-variant=ai-primary] { 2152 ${w}: var(--arc-color-fg-on-theme-stark); 2153 ${b}: var(--arc-gradient-ai-500) padding-box, var(--arc-gradient-ai-200) border-box; 2154 2155 ${U}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2156 2157 ${w}â¢active: var(--arc-color-fg-neutral-mid); 2158 ${w}â¢processing: var(--arc-color-fg-on-theme-heavy); 2159 ${w}â¢hover: var(--arc-color-fg-on-theme-heavy); 2160 2161 ${b}â¢hover: var(--arc-gradient-ai-400) padding-box, var(--arc-gradient-ai-200) border-box; 2162 ${b}â¢active: var(--arc-gradient-ai-600) padding-box, var(--arc-gradient-ai-200) border-box; 2163 ${b}â¢processing: var(--arc-gradient-ai-400) padding-box, var(--arc-gradient-ai-100) border-box; 2164 ${b}â¢disabled: var(--arc-color-bg-disabled); 2165 } 2166 2167 &[data-variant=ai-secondary] { 2168 ${w}: var(--arc-color-fg-primary); 2169 ${b}: linear-gradient(var(--arc-color-bg-primary) 0 0) padding-box, var(--arc-gradient-ai-200) border-box; 2170 2171 ${w}â¢active: var(--arc-color-fg-neutral-stark); 2172 ${w}â¢processing: var(--arc-color-fg-primary); 2173 2174 ${b}â¢hover: var(--arc-gradient-ai-50) padding-box, var(--arc-gradient-ai-300) border-box; 2175 ${b}â¢active: var(--arc-gradient-ai-50) padding-box, var(--arc-gradient-ai-100) border-box; 2176 ${b}â¢processing: var(--arc-gradient-ai-50) padding-box, var(--arc-gradient-ai-100) border-box; 2177 ${b}â¢disabled: var(--arc-color-bg-disabled); 2178 ${b}â¢focus: var(--arc-color-alpha-white-3); 2179 2180 /* "floating" button mitigation */ 2181 &[arc-shadow] { 2182 ${b}â¢processing: var(--arc-button-ai-secondary-floating-bg-processing); 2183 ${b}â¢disabled: var(--arc-button-ai-secondary-floating-bg-disabled); 2184 ${b}â¢focus: var(--arc-button-ai-secondary-floating-bg-focus); 2185 } 2186 } 2187 2188 &[data-variant^=ai-] { 2189 ${B}: transparent; 2190 2191 ${w}â¢disabled: var(--arc-color-fg-disabled); 2192 ${B}â¢disabled: var(--arc-color-border-disabled); 2193 } 2194 2195`,hd=i` 2196 &[data-variant=alpha-primary] { 2197 ${w}: var(--arc-color-mono-black); 2198 ${b}: var(--arc-color-mono-white); 2199 ${B}: transparent; 2200 2201 ${w}â¢focus: var(--arc-color-mono-black); 2202 ${w}â¢active: var(--arc-color-alpha-black-60); 2203 ${w}â¢processing: var(--arc-color-mono-black); 2204 ${w}â¢disabled: var(--arc-color-alpha-black-60); 2205 2206 ${b}â¢hover: var(--arc-color-alpha-white-70); 2207 ${b}â¢focus: var(--arc-color-mono-white); 2208 ${b}â¢active: var(--arc-color-alpha-white-40); 2209 ${b}â¢processing: var(--arc-color-alpha-white-40); 2210 ${b}â¢disabled: var(--arc-color-alpha-white-15); 2211 } 2212 2213 &[data-variant=alpha-secondary] { 2214 ${w}: var(--arc-color-alpha-white-95); 2215 ${b}: transparent; 2216 ${B}: var(--arc-color-alpha-white-80); 2217 2218 ${w}â¢active: var(--arc-color-alpha-white-80); 2219 ${w}â¢processing: var(--arc-color-alpha-white-95); 2220 ${w}â¢disabled: var(--arc-color-alpha-white-50); 2221 2222 ${b}â¢hover: var(--arc-color-alpha-white-20); 2223 ${b}â¢focus: var(--arc-color-alpha-white-3); 2224 ${b}â¢active: var(--arc-color-alpha-white-40); 2225 ${b}â¢processing: var(--arc-color-alpha-white-25); 2226 ${b}â¢disabled: transparent; 2227 2228 ${B}â¢hover: var(--arc-color-alpha-white-100); 2229 ${B}â¢focus: var(--arc-color-alpha-white-80); 2230 ${B}â¢active: var(--arc-color-alpha-white-50); 2231 ${B}â¢processing: transparent; 2232 ${B}â¢disabled: var(--arc-color-alpha-white-30); 2233 } 2234 2235 &[data-variant=alpha-tertiary] { 2236 ${w}: var(--arc-color-alpha-white-95); 2237 ${b}: transparent; 2238 ${B}: transparent; 2239 2240 ${w}â¢active: var(--arc-color-alpha-black-60); 2241 ${w}â¢processing: var(--arc-color-alpha-white-95); 2242 ${w}â¢disabled: var(--arc-color-alpha-white-50); 2243 2244 ${b}â¢hover: var(--arc-color-alpha-white-20); 2245 ${b}â¢focus: var(--arc-color-alpha-white-5); 2246 ${b}â¢active: var(--arc-color-alpha-white-40); 2247 ${b}â¢processing: var(--arc-color-alpha-white-20); 2248 ${b}â¢disabled: transparent; 2249 } 2250 2251 &:is( 2252 [data-variant=alpha-plain], 2253 [data-variant=alpha-link-style] 2254 ) { 2255 ${w}: var(--arc-color-alpha-white-95); 2256 ${b}: transparent; 2257 ${B}: transparent; 2258 2259 ${w}â¢hover: var(--arc-color-alpha-white-60); 2260 ${w}â¢active: var(--arc-color-alpha-white-40); 2261 ${w}â¢processing: var(--arc-color-alpha-white-95); 2262 ${w}â¢disabled: var(--arc-color-alpha-white-30); 2263 } 2264 2265 &[data-variant^=alpha-] { 2266 ${U}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2267 } 2268`,vd=i` 2269 &[data-variant=link-style] { 2270 ${w}: var(--arc-color-fg-primary); 2271 ${b}: transparent; 2272 ${B}: transparent; 2273 2274 ${w}â¢hover: var(--arc-color-alpha-heavy); 2275 ${w}â¢active: var(--arc-color-alpha-heavy); 2276 ${w}â¢processing: var(--arc-color-alpha-heavy); 2277 ${w}â¢disabled: var(--arc-color-fg-disabled); 2278 } 2279`,ud=i` 2280 &[data-variant=critical-primary] { 2281 ${w}: var(--arc-color-fg-on-stark); 2282 ${b}: var(--arc-color-bg-critical-stark); 2283 ${B}: transparent; 2284 2285 ${w}â¢active: var(--arc-color-fg-critical-subtle); 2286 ${w}â¢processing: var(--arc-color-fg-on-heavy); 2287 ${w}â¢disabled: var(--arc-color-fg-disabled); 2288 2289 ${b}
2289â¢hover: var(--arc-color-bg-critical-heavy); 2290 ${b}â¢active: var(--arc-color-bg-critical-heavy); 2291 ${b}â¢processing: var(--arc-color-bg-critical-heavy); 2292 ${b}â¢disabled: var(--arc-color-bg-disabled); 2293 2294 ${U}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2295 } 2296 2297 &[data-variant=critical-secondary] { 2298 ${w}: var(--arc-color-fg-critical-stark); 2299 ${b}: transparent; 2300 ${B}: var(--arc-color-border-critical-stark); 2301 2302 ${w}â¢active: var(--arc-color-fg-critical-subtle); 2303 ${w}â¢processing: var(--arc-color-fg-critical-stark); 2304 ${w}â¢disabled: var(--arc-color-fg-disabled); 2305 2306 ${b}â¢hover: var(--arc-button-critical-bg-hover); 2307 ${b}â¢focus: var(--arc-color-alpha-white-3); 2308 ${b}â¢active: var(--arc-color-bg-critical-muted); 2309 ${b}â¢disabled: transparent; 2310 2311 ${B}â¢active: var(--arc-color-border-critical-subtle); 2312 ${B}â¢processing: var(--arc-color-border-critical-stark); 2313 ${B}â¢disabled: var(--arc-color-border-disabled); 2314 2315 /* "floating" button mitigation */ 2316 &[arc-shadow] { 2317 ${b}: var(--arc-button-critical-secondary-floating-bg); 2318 ${b}â¢hover: var(--arc-button-critical-secondary-floating-bg-hover); 2319 ${b}â¢active: var(--arc-button-critical-secondary-floating-bg-active); 2320 ${b}â¢processing: var(--arc-button-critical-secondary-floating-bg-processing); 2321 ${b}â¢disabled: var(--arc-button-critical-secondary-floating-bg-disabled); 2322 ${b}â¢focus: var(--arc-button-critical-secondary-floating-bg-focus); 2323 } 2324 } 2325 2326 &[data-variant=critical-tertiary] { 2327 ${w}: var(--arc-color-fg-critical-stark); 2328 ${b}: transparent; 2329 ${B}: transparent; 2330 2331 ${w}â¢active: var(--arc-color-fg-critical-subtle); 2332 ${w}â¢processing: var(--arc-color-fg-critical-stark); 2333 ${w}â¢disabled: var(--arc-color-fg-disabled); 2334 2335 ${b}â¢hover: var(--arc-button-critical-bg-hover); 2336 ${b}â¢focus: var(--arc-color-alpha-white-3); 2337 ${b}â¢active: var(--arc-color-bg-critical-subtle); 2338 ${b}â¢processing: var(--arc-color-bg-critical-muted); 2339 ${b}â¢disabled: transparent; 2340 } 2341 2342 &:is( 2343 [data-variant=critical-plain], 2344 [data-variant=critical-link-style] 2345 ) { 2346 ${w}: var(--arc-color-fg-critical-stark); 2347 ${b}: transparent; 2348 ${B}: transparent; 2349 2350 ${w}â¢hover: var(--arc-color-fg-critical-mid); 2351 ${w}â¢active: var(--arc-color-fg-critical-subtle); 2352 ${w}â¢processing: var(--arc-color-fg-critical-stark); 2353 ${w}â¢disabled: var(--arc-color-fg-disabled); 2354 } 2355 2356`,gd=i` 2357 ${$}â¢color: var(${w}); 2358 ${$}â¢background: var(${b}); 2359 ${$}â¢fontâ¢weight: var(--arc-font-weight-600); 2360 ${$}â¢padding: 0 var(${$}â¢paddingâ¢inline); 2361 ${$}â¢contentâ¢opacity: 1; 2362 ${$}â¢cursor: var(--arc-button-cursor, pointer); 2363 ${$}â¢transition: 0.2s ease-out; 2364 2365 ${Tr}â¢color: var(${B}); 2366 ${Tr}: var(--arc-border-width-sm) solid var(${Tr}â¢color, transparent); 2367 2368 ${ke}: var(--arc-border-width-md) solid var(${ke}â¢color, transparent); 2369 ${ke}â¢offset: var(--arc-border-width-md); 2370 2371 /* spinner svg style controls */ 2372 ${U}â¢progressâ¢color: var(--arc-button-progress-color, var(--arc-color-mono-white, currentcolor)); 2373 ${U}â¢circleâ¢color: var(--arc-button-color, var(${U}â¢baseâ¢color, var(--arc-color-alpha-mid))); 2374 ${U}â¢circleâ¢opacity: var(--arc-alpha-100); 2375 2376 /* CONTEXT OVERRIDES */ 2377 &[arc-button=custom] { 2378 ${$}â¢fontâ¢weight: normal; 2379 } 2380 2381 &[data-variant^=ai-] { 2382 ${Tr}: var(--arc-border-width-md) solid var(${Tr}â¢color, transparent); 2383 } 2384 2385 &:is(:not([data-shape]), [data-shape=circle]) { 2386 ${Tr}â¢radius: var(--arc-border-radius-pill); 2387 } 2388 2389 &:is( 2390 [arc-button=custom], 2391 [data-layout=icon]:not([data-shape]), 2392 [data-shape=square], 2393 [data-shape=narrow] 2394 ) { 2395 ${Tr}â¢radius: var(--arc-border-radius-md); 2396 } 2397 2398 &:is( 2399 [arc-button=custom], 2400 [data-hierarchy=plain], 2401 [data-hierarchy=link-style] 2402 ) { 2403 ${$}â¢padding: unset; 2404 ${$}â¢height: unset; 2405 } 2406 2407 /* border-radius for plain and link-style informs focus state outline radius */ 2408 &:is( 2409 [data-hierarchy=plain], 2410 [data-hierarchy=link-style] 2411 ) { 2412 ${Tr}â¢radius: var(--arc-border-radius-sm); 2413 } 2414 2415 &[data-hierarchy=link-style] { 2416 ${$}â¢fontâ¢weight: inherit; 2417 ${$}â¢textâ¢decoration: none; 2418 2419 [arc-button-label] { 2420 text-decoration: var(--arc-link-text-decoration, underline); 2421 text-decoration-color: currentcolor; 2422 } 2423 2424 [arc-button-icon] { 2425 text-decoration: none; 2426 } 2427 } 2428 2429 /* Inter-Component Communication ---------------------------------⢠*/ 2430 2431 /** ArcIcon */ 2432 --arc-icon-fa-line-height: 1lh; 2433 --arc-icon-size: var(${Ar}â¢size); 2434 2435 &[has-large-icon] { 2436 --arc-icon-size: var(${Ar}â¢sizeâ¢large); 2437 } 2438 2439 /** ArcSpinner */ 2440 --arc-spinner-size: var(${U}â¢size); 2441 --arc-spinner-progress-color: var(${U}â¢progressâ¢color); 2442 --arc-spinner-circle-color: var(${U}â¢circleâ¢color); 2443 --arc-spinner-circle-opacity: var(${U}â¢circleâ¢opacity); 2444 --arc-spinner-position: var(${U}â¢position, absolute); 2445 --arc-spinner-inset: var(${U}â¢inset, 50% auto auto 50%); 2446 --arc-spinner-translate: var(${U}â¢translate, -50% -50%); 2447 2448`,pd=i` 2449 &:is(
2450 [is-processing], 2451 [is-processing-with-text], 2452 :has(input) 2453 ) { 2454 ${$}â¢position: relative; 2455 } 2456 2457 &[is-disabled] { 2458 ${$}â¢color: var(${w}â¢disabled, var(${w})); 2459 ${$}â¢background: var(${b}â¢disabled, var(${b})); 2460 ${Tr}â¢color: var(${B}â¢disabled, var(${B})); 2461 ${$}â¢opacity: var(--arc-button-disabled-opacity, unset); 2462 ${$}â¢cursor: var(--arc-button-disabled-cursor, not-allowed); 2463 } 2464 2465 &:not( 2466 [is-disabled], 2467 [is-processing], 2468 [is-processing-with-text] 2469 ) { 2470 &:where( 2471 :hover, 2472 [data-simulate=hover] 2473 ) { 2474 ${$}â¢color: var(${w}â¢hover, var(${w})); 2475 ${$}â¢background: var(${b}â¢hover, var(${b})); 2476 ${Tr}â¢color: var(${B}â¢hover, var(${B})); 2477 } 2478 2479 &:is( 2480 :active, 2481 [is-active], 2482 [data-simulate=active] 2483 ) { 2484 ${$}â¢color: var(${w}â¢active, var(${w})); 2485 ${$}â¢background: var(${b}â¢active, var(${b})); 2486 ${Tr}â¢color: var(${B}â¢active, var(${B})); 2487 } 2488 } 2489 2490 &[is-processing] { 2491 ${$}â¢contentâ¢visibility: hidden; 2492 ${$}â¢contentâ¢opacity: 0; 2493 2494 /* spinner svg position controls */ 2495 ${U}â¢position: absolute; 2496 ${U}â¢inset: 50% auto auto 50%; 2497 ${U}â¢translate: -50% -50%; 2498 } 2499 2500 &[is-processing-with-text] { 2501 ${$}â¢contentâ¢visibility: visible; 2502 2503 /* spinner svg position controls */ 2504 ${U}â¢position: relative; 2505 ${U}â¢inset: 0; 2506 ${U}â¢translate: 0; 2507 ${U}â¢size: 1lh; 2508 } 2509 2510 &:is( 2511 [is-processing], 2512 [is-processing-with-text] 2513 ) { 2514 ${$}â¢opacity: var(--arc-button-processing-opacity, unset); 2515 ${$}â¢cursor: var(--arc-button-processing-cursor, default); 2516 2517 ${$}â¢color: var(${w}â¢processing, var(${w})); 2518 ${$}â¢background: var(${b}â¢processing, var(${b})); 2519 ${Tr}â¢color: var(${B}â¢processing, var(${B})); 2520 2521 &:is( 2522 [data-variant*=secondary], 2523 [data-variant*=tertiary], 2524 [data-hierarchy=plain], 2525 [data-hierarchy=link-style], 2526 [arc-scheme=inverse]:not([data-variant*=primary]) 2527 ):not( 2528 [data-variant^=alpha-] 2529 ) { 2530 ${U}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2531 } 2532 } 2533 2534 &:is( 2535 :where(:focus, :focus-within):focus-visible, 2536 [data-simulate=focus] 2537 ) { 2538 ${$}â¢color: var(${w}â¢focus, var(${w})); 2539 ${$}â¢background: var(${b}â¢focus, var(${b})); 2540 ${Tr}â¢color: var(${B}â¢focus, var(${B})); 2541 ${ke}â¢color: var(--arc-button-outline-color, var(--arc-color-border-focus)); 2542 2543 * { 2544 outline: none; 2545 } 2546 } 2547 2548`,fd=i` 2549@layer arc-components { 2550 2551 /* Shared defaults from _Internal/Components.css.js */ 2552 ${td} 2553 2554 :where([arc-button]) { 2555 /* SIZES -------------------------------------------------------⢠*/ 2556 ${id} 2557 2558 /* LAYOUTS -----------------------------------------------------⢠*/ 2559 ${ld} 2560 2561 /* VARIANTS ----------------------------------------------------⢠*/ 2562 ${sd} 2563 ${vd} 2564 ${dd} 2565 ${hd} 2566 ${ud} 2567 2568 /* CORE VARIABLES ----------------------------------------------⢠*/ 2569 ${gd} 2570 ${pd} 2571 2572 /* CORE STYLES -------------------------------------------------⢠*/ 2573 appearance: none; 2574 cursor: var(--arc-button-cursor, var(${$}â¢cursor)); 2575 position: var(--arc-button-position, var(${$}â¢position, unset)); 2576 transition: var(--arc-button-transition, var(${$}â¢transition)); 2577 2578 /* FOOTPRINT */ 2579 2580 font: inherit; 2581 font-weight: var(--arc-button-font-weight, var(${$}â¢fontâ¢weight)); 2582 font-size: var(--arc-button-font-size, var(${$}â¢fontâ¢size, inherit)); 2583 padding: var(--arc-button-padding, var(${$}â¢padding)); 2584 2585 width: var(--arc-button-width, var(${$}â¢width, auto)); 2586 min-width: var(--arc-button-min-width, var(${$}â¢minâ¢width, unset)); 2587 max-width: var(--arc-button-max-width, var(${$}â¢maxâ¢width, 100%)); 2588 2589 height: var(--arc-button-height, var(${$}â¢height, auto)); 2590 min-height: var(--arc-button-min-height, var(${$}â¢minâ¢height, unset)); 2591 max-height: var(--arc-button-max-height, var(${$}â¢maxâ¢height, unset)); 2592 2593 aspect-ratio: var(--arc-button-aspect-ratio, var(${$}â¢aspectâ¢ratio, unset)); 2594 2595 /* VARIANT THEME APPLIED ---------------------------------------⢠*/ 2596 2597 color: var(--arc-button-color, var(${$}â¢color)); 2598 background: var(--arc-button-background, var(${$}â¢background)); 2599 border: var(--arc-button-border, var(${Tr})); 2600 border-radius: var(--arc-button-border-radius, var(${Tr}â¢radius)); 2601 2602 opacity: var(--arc-button-opacity, 1); 2603 2604 outline: var(--arc-button-outline, var(${ke})); 2605 outline-offset: var(--arc-button-outline-offset, var(${ke}â¢offset)); 2606 2607 &[href] { 2608 text-decoration: var(--arc-button-text-decoration, none); 2609 } 2610 2611 /* "floating" button mitigation */ 2612 &[arc-shadow] { 2613 backdrop-filter: blur(0.5em); 2614 } 2615 2616 /* INNER-ELEMENTS ----------------------------------------------⢠*/ 2617 [arc-button-content] { 2618 flex: 1; 2619 display: flex; 2620 align-items: var(--arc-button-align-items, center); 2621 justify-content: var(--arc-button-justify-content, center); 2622 gap: var(--arc-button-gap, var(${$}â¢gap)); 2623 2624 opacity: var(--arc-button-content-opacity, var(${$}â¢contentâ¢opacity)); 2625 visibility: var(--arc-button-content-visibility, var(${$}â¢contentâ¢visibility, inherit)); 2626 pointer-events: var(--arc-button-content-pointer-events, none); 2627 2628 width: var(--arc-button-content-width, var(${$}â¢contentâ¢width, auto)); 2629 max-width: var(--arc-button-content-max-width, 100%); 2630 overflow: var(--arc-button-content-overflow, visible); 2631 2632 transition: var(--arc-button-content-transition, var(${$}â¢transition)); 2633 2634 line-height: normal; 2635 user-select: none; 2636 } 2637 2638 [arc-button-label] { 2639 overflow: hidden; 2640 text-overflow: ellipsis; 2641 white-space: nowrap; 2642 max-width: 100%; 2643 opacity: var(--arc-button-label-opacity, var(${$}â¢opacity)); 2644 transition: var(--arc-button-label-transition, var(${$}â¢transition)); 2645 } 2646 2647 [arc-button-icon] { 2648 width: 1.25em; /** keeping for fontawesome v6 backward compatibility */ 2649 opacity: var(--arc-button-icon-opacity, var(${$}â¢opacity)); 2650 transition: var(--arc-button-icon-transition, var(${$}â¢transition)); 2651 } 2652 2653 input { 2654 position: absolute; 2655 opacity: 0; 2656 scale: 0.1; 2657 } 2658 } 2659
2660 [arc-button]:not([hidden]) { 2661 flex: var(--arc-button-flex, unset); 2662 display: var(--arc-button-display, var(${$}â¢display, inline-flex)); 2663 align-items: center; 2664 justify-content: center; 2665 } 2666 2667} 2668`,di=(0,c.jsx)(hc,{}),Ir=(0,y.forwardRef)(({children:a,disabled:r,...e},o)=>{const t=(0,y.useRef)(null),{iconEnd:l,iconStart:n,icon:h,text:d,isActive:v,isDisabled:u,isProcessing:p,isProcessingWithText:g,hasLargeIcon:f,tag:k,href:z,type:I,title:M,layout:_,shape:E,size:C="lg",variant:S="common",hierarchy:F="primary",isInverse:P=!1,scheme:G="auto",shadow:Z,_isCustom:or,...sr}=e,Q=k??(z?"a":"button"),dr=Q==="button"?I||"button":void 0,xr=_==="icon",vr=g||p||u||r,ea=sr?.["aria-disabled"]||vr||void 0,nr=!xr&&(a||d),Fr=g&&di||n||h,Hr=!xr&&(g&&!(n||h)?void 0:l),oa=(p||g&&xr)&&di,La=S&&si.includes(S),Ra=(()=>{if(La)return S;const Oa=F||"primary";if(S==="ai"){const Nv=["primary","secondary"].includes(Oa)?Oa:"primary";return`${S}-${Nv}`}return Oa==="link-style"?S==="critical"||S==="alpha"?`${S}-${Oa}`:"link-style":S==="common"?Oa:S==="alpha"||S==="critical"?`${S}-${Oa}`:S})(),ta=G==="auto"?void 0:G,V=Ra?.endsWith("-inverse")?"inverse":void 0,kr=P?"inverse":ta??V,ir=Z===!0?"lg":Z,{tooltip:Mr,...ka}=sr,wa=No(Mr)?Mr:void 0,Aa=e.tooltip??wa,Wa=!!Aa,Et=No(Aa)?{text:Aa}:Aa,ko=sr["aria-describedby"],de=(0,y.useRef)(void 0),tn=Kr(void 0,"arc-tooltip"),wo=e.id?`${e.id}-tooltip`:tn;Wa&&!de.current&&(de.current=wo);const cn=Wa?We([ko,de.current]):ko,{anchorName:nn,style:Tt,popoverTarget:Ga,popoverTargetAction:It,...ln}=ka,Ma=Ga?Ze(String(nn||e?.id)):void 0,Ba=Wa?Ze(String(wo)):void 0,Pa=Jn(Tt)?Tt:void 0,je=Pa&&"anchorName"in Pa&&Pa.anchorName,sn=[...(No(je)?Xn(je,", "):[]).map(Ze),...Ma?[Ma]:[],...Ba?[Ba]:[]],jt=We(sn,1/0,", "),Dv={...Pa??{},...jt?{anchorName:jt}:{}};let bl={popoverTarget:Ga||void 0,popoverTargetAction:It||void 0};return y.version.startsWith("18")&&(bl={popovertarget:Ga||void 0,popovertargetaction:It||void 0}),(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(Q,{...ln,...bl,ref:Oa=>{t.current=Oa,za(o,Oa)},"arc-button":or?"custom":"","arc-scheme":kr,"arc-shadow":ir||void 0,disabled:!z&&vr||void 0,href:z||void 0,title:Wa?void 0:M||void 0,type:dr,"data-layout":_,"data-shape":or?void 0:E,"data-size":or?void 0:C,"data-variant":or?void 0:Ra,"data-hierarchy":F||void 0,"has-large-icon":f?"":void 0,"is-active":v?"":void 0,"is-processing":p||g&&xr?"":void 0,"is-processing-with-text":g&&!xr?"":void 0,"is-disabled":vr||ea?"":void 0,"aria-disabled":ea,"aria-describedby":cn||void 0,style:Dv,children:[(0,c.jsxs)("span",{"arc-button-content":"",children:[Fr&&typeof Fr=="string"?(0,c.jsx)(D,{"arc-button-icon":"",icon:Fr}):Fr&&(0,c.jsx)("span",{"arc-button-icon":"",children:Fr}),!!nr&&(0,c.jsx)("span",{"arc-button-label":"",children:nr}),Hr&&typeof Hr=="string"?(0,c.jsx)(D,{"arc-button-icon":"",icon:Hr}):Hr&&(0,c.jsx)("span",{"arc-button-icon":"",children:Hr})]}),oa]}),Wa&&(0,c.jsx)(bc,{...Et,id:de.current,alternateAnchor:Et?.alternateAnchor??(()=>t.current),anchorName:Ba})]})});Ir.displayName="ArcButton",H("ArcButton",fd);const Xe=(0,y.forwardRef)((a,r)=>(0,c.jsx)(Ir,{...a,ref:r,"arc-popover-button":""})),hi=({isInverse:a=!1,isOpen:r,...e})=>(0,c.jsx)(Ir,{...e,icon:"fa-regular fa-xmark",text:"Dismiss",layout:"icon",shape:"square",size:"sm",variant:"common",hierarchy:"tertiary",isInverse:a,"arc-popover-dismiss":""}),md=({children:a,showDismiss:r,dismissProps:e,tag:o="header",...t})=>(0,c.jsxs)(o,{...t,"arc-popover-header":"",children:[a,r&&(0,c.jsx)(hi,{...e})]}),bd=({tag:a="article",...r})=>(0,c.jsx)(a,{...r,"arc-popover-body":""}),$d=({showDivider:a,tag:r="footer",...e})=>(0,c.jsx)(r,{...e,"arc-popover-footer":"","has-divider":a?"":void 0});Xe.displayName="ArcPopoverButton";const A=i`--arc-popover`,zr=i`--arcâ¢popover`,R=i`--arcâ¢trailâ¢mix`,$c=i`${zr}â¢radius`,yd=i`${zr}â¢content`,Qo=i`${zr}â¢outline`,jr=i`${zr}â¢offset`,rt=i`${zr}â¢header`,xd=i`${zr}â¢body`,vi=i`${zr}â¢divider`,at=i`${zr}â¢footer`,va=i`${zr}â¢tail`,K=i`${va}â¢top`,Y=i`${va}â¢left`,Qe=i`${va}â¢size`,Wr=i`${va}â¢x`,Gr=i`${va}â¢y`,et=i`${zr}â¢padding`,Lr=i`${zr}â¢margin`,we=i`${rt}â¢padding`,qr=i`${xd}â¢padding`,fa=i`${at}â¢padding`,ui=i`${zr}â¢fg`,ot=i`${zr}â¢bg`,tt=i`${yd}â¢bg`,ct=i`${va}â¢fillâ¢a`,nt=i`${va}â¢fillâ¢b`,it=i`${va}â¢edgeâ¢a`,lt=i`${va}â¢edgeâ¢b`,kd=i` 2669 2670 ${zr}â¢fallback: none; 2671 ${Qo}: var(${A}-outline-size, var(--arc-border-width-md)); 2672 ${$c}: var(${A}-border-radius, var(--arc-border-radius-lg)); 2673 ${jr}: var(${A}-offset, var(--jsâ¢offset, 0px)); 2674 2675 /* space & padding */ 2676 ${et}: var(${m}â¢14); 2677 2678 /* tail metrics - starts at defaults for anchor-at='bottom-start' */ 2679 ${R}: 47.5%; /* mix-ratio for tail to match gradient outline for: 'popover[variant=ai]' */ 2680 ${Wr}: var(${A}-tail-x, 1.75em); 2681 ${Gr}: var(${A}-tail-y, 1.125em); 2682 ${Qe}: 0px; 2683 2684 &:where([has-tail]) { 2685 ${Qe}: var(${A}-tail-size, var(--jsâ¢tail, 8px)); 2686 2687 /* offset calculation magic number - 'sqrt(2) / 2' for half of 45° rotated tailSize */ 2688 ${jr}: calc(var(${A}-offset, var(--jsâ¢offset, 0px)) + var(${Qe}) * (sqrt(2) / 2)); 2689 } 2690
2691 &:has([arc-popover-body]) { 2692 ${et}: 0; 2693 &:has([arc-popover-header]) { ${qr}â¢blockâ¢start: 0; } 2694 &:has([arc-popover-footer]:not([has-divider])) { ${qr}â¢blockâ¢end: 0; } 2695 } 2696 2697`,wd=i` 2698 2699 /* default variant: common */ 2700 &[variant] { 2701 ${ui}: var(--arc-color-fg-primary); 2702 ${ot}: var(${A}-background, var(--arc-color-bg-mono)) border-box; 2703 ${tt}: var(${A}-background, var(--arc-color-bg-mono)) padding-box; 2704 ${ct}: var(${A}-background, var(--arc-color-bg-mono)); 2705 ${nt}: var(${A}-background, var(--arc-color-bg-mono)); 2706 ${it}: var(${A}-background, var(--arc-color-bg-mono)); 2707 ${lt}: var(${A}-background, var(--arc-color-bg-mono)); 2708 ${zr}â¢shadow: var(--arc-shadow-lg); 2709 ${vi}â¢color: var(--arc-color-border-mid); 2710 } 2711 2712 &[variant=brand] { 2713 ${ot}: var(--arc-color-border-brand-mid) border-box; 2714 ${tt}: var(--arc-color-bg-brand-muted) padding-box; 2715 ${ct}: var(--arc-color-bg-brand-muted); 2716 ${nt}: var(--arc-color-bg-brand-muted); 2717 ${it}: var(--arc-color-border-brand-mid); 2718 ${lt}: var(--arc-color-border-brand-mid); 2719 } 2720 2721 &[variant=ai] { 2722 ${ot}: var(--arc-gradient-ai-200) border-box; 2723 ${tt}: var(--arc-gradient-ai-50) padding-box; 2724 ${ct}: var(${A}-ai-purple-50); 2725 ${nt}: var(${A}-ai-blue-50); 2726 ${it}: var(${A}-ai-purple-200); 2727 ${lt}: var(${A}-ai-blue-200); 2728 } 2729 2730`,Ad=i` 2731 2732 /* default density: compact */ 2733 &:not([density=comfortable]) { 2734 ${rt}â¢gap: var(${m}â¢12); 2735 ${we}â¢block: var(${m}â¢12); 2736 ${we}â¢inline: var(${m}â¢12); 2737 2738 ${qr}â¢block: var(${m}â¢12); 2739 ${qr}â¢inline: var(${m}â¢12); 2740 2741 ${at}â¢gap: var(${m}â¢12); 2742 ${fa}â¢inline: var(${m}â¢12); 2743 ${fa}â¢blockâ¢start: var(${m}â¢12); 2744 ${fa}â¢blockâ¢end: var(${m}â¢12); 2745 } 2746 2747 &[density=comfortable] { 2748 ${rt}â¢gap: var(${m}â¢18); 2749 ${we}â¢block: var(${m}â¢16); 2750 ${we}â¢inline: var(${m}â¢20); 2751 2752 ${qr}â¢block: var(${m}â¢20); 2753 ${qr}â¢inline: var(${m}â¢20); 2754 2755 ${at}â¢gap: var(${m}â¢18); 2756 ${fa}â¢inline: var(${m}â¢20); 2757 ${fa}â¢blockâ¢start: var(${m}â¢16); 2758 ${fa}â¢blockâ¢end: var(${m}â¢20); 2759 2760 &:not(:has([arc-popover-body])) { 2761 ${et}: var(${m}â¢20); 2762 } 2763 2764 [arc-popover-content] { 2765 font-size: var(${A}-font-size, var(${s}â¢14)); 2766 } 2767 } 2768 2769`,ro={TOP:i` 2770 &[anchor-at*='top-'] { 2771 ${Lr}: 0 0 var(${jr}) 0; 2772 ${K}: 100%; 2773 } 2774 &[anchor-at='top-start'] { 2775 position-area: block-start span-inline-end; 2776 ${R}: 95%; 2777 ${Y}: calc(0% + var(${Wr})); 2778 } 2779 &[anchor-at='top-center'] { 2780 position-area: block-start; 2781 ${R}: 75%; 2782 ${Y}: 50%; 2783 } 2784 &[anchor-at='top-end'] { 2785 position-area: block-start span-inline-start; 2786 ${R}: 53.5%; 2787 ${Y}: calc(100% - var(${Wr})); 2788 } 2789 `,RIGHT:i` 2790 &[anchor-at*='right-'] { 2791 ${Lr}: 0 0 0 var(${jr}); 2792 ${Y}: 0%; 2793 } 2794 &[anchor-at='right-start'] { 2795 position-area: inline-end span-block-end; 2796 ${R}: 53.5%; 2797 ${K}: calc(0% + var(${Gr})); 2798 } 2799 &[anchor-at='right-center'] { 2800 position-area: inline-end; 2801 ${R}: 75%; 2802 ${K}: 50%; 2803 } 2804 &[anchor-at='right-end'] { 2805 position-area: inline-end span-block-start; 2806 ${R}: 95%; 2807 ${K}: calc(100% - var(${Gr})); 2808 } 2809 `,BOTTOM:i` 2810 &[anchor-at*='bottom-'] { 2811 ${Lr}: var(${jr}) 0 0 0; 2812 ${K}: 0%; 2813 } 2814 &[anchor-at='bottom-end'] { 2815 position-area: block-end span-inline-start; 2816 ${R}: 5%; 2817 ${Y}: calc(100% - var(${Wr})); 2818 } 2819 &[anchor-at='bottom-center'] { 2820 position-area: block-end; 2821 ${R}: 25%; 2822 ${Y}: 50%; 2823 } 2824 &[anchor-at='bottom-start'] { 2825 position-area: block-end span-inline-end; 2826 ${R}: 47.5%; 2827 ${Y}: calc(0% + var(${Wr})); 2828 } 2829 `,LEFT:i` 2830 &[anchor-at*='left-'] { 2831 ${Lr}: 0 var(${jr}) 0 0; 2832 ${Y}: 100%; 2833 } 2834 &[anchor-at='left-end'] { 2835 position-area: inline-start span-block-start; 2836 ${R}: 47.5%; 2837 ${K}: calc(100% - var(${Gr})); 2838 } 2839 &[anchor-at='left-center'] { 2840 position-area: inline-start; 2841 ${R}: 25%; 2842 ${K}: 50%; 2843 } 2844 &[anchor-at='left-start'] { 2845 position-area: inline-start span-block-end; 2846 ${R}: 5%; 2847 ${K}: calc(0% + var(${Gr})); 2848 } 2849 `,CENTER_AND_CORNERS:i` 2850 &:is([anchor-at='center'], [anchor-at*='corner']) { ${va}â¢display: none; } 2851 &[anchor-at='center'] { position-area: center center; ${Lr}: 0; } 2852 &[anchor-at*='corner'] { ${Lr}: var(${jr}); } 2853 &[anchor-at='nw-corner'] { position-area: top left; } 2854 &[anchor-at='ne-corner'] { position-area: top right; } 2855 &[anchor-at='se-corner'] { position-area: bottom right; } 2856 &[anchor-at='sw-corner'] { position-area: bottom left; } 2857 `},Ae={FLIP_BLOCK:i` 2858 &[anchor-at*='top-'] { ${Lr}: 0 0 var(${jr}) 0; } 2859 &[anchor-at='top-start']::before { ${R}: 47.5%; ${K}: 0%; } 2860 &[anchor-at='top-center']::before { ${R}: 25%; ${K}: 0%; } 2861 &[anchor-at='top-end']::before { ${R}: 5%; ${K}: 0%; } 2862 2863 &[anchor-at='right-start']::before { ${R}: 95%; ${K}: calc(100% - var(${Gr})); } 2864 &[anchor-at='right-end']::before { ${R}: 53.5%; ${K}: calc(0% + var(${Gr})); } 2865 2866 &[anchor-at*='bottom-'] { ${Lr}: var(${jr}) 0 0 0; } 2867 &[anchor-at='bottom-end']::before { ${R}: 53.5%; ${K}: 100%; } 2868 &[anchor-at='bottom-center']::before { ${R}: 75%; ${K}: 100%; } 2869 &[anchor-at='bottom-start']::before { ${R}: 95%; ${K}: 100%; } 2870 2871 &[anchor-at='left-end']::before { ${R}: 5%; ${K}: calc(0% + var(${Gr})); } 2872 &[anchor-at='left-start']::before { ${R}: 47.5%; ${K}: calc(100% - var(${Gr})); } 2873 `,FLIP_INLINE:i` 2874 &[anchor-at='top-start']::before { ${R}: 53.5%; ${Y}: calc(100% - var(${Wr})); } 2875 &[anchor-at='top-end']::before { ${R}: 95%; ${Y}: calc(0% + var(${Wr})); } 2876 2877 &[anchor-at*='right-'] { ${Lr}: 0 var(${jr}) 0 0; } 2878 &[anchor-at='right-start']::before { ${R}: 5%; ${Y}: 100%; } 2879 &[anchor-at='right-center']::before { ${R}: 25%; ${Y}: 100%; } 2880 &[anchor-at='right-end']::before { ${R}: 47.5%; ${Y}: 100%; } 2881 2882 &[anchor-at='bottom-end']::before { ${R}: 47.5%; ${Y}: calc(0% + var(${Wr})); } 2883 &[anchor-at='bottom-start']::before { ${R}: 5%; ${Y}: calc(100% - var(${Wr})); } 2884 2885 &[anchor-at*='left-'] { ${Lr}: 0 0 0 var(${jr}); } 2886 &[anchor-at='left-end']::before { ${R}: 95%; ${Y}: 0%; } 2887 &[anchor-at='left-center']::before { ${R}: 75%; ${Y}: 0%; } 2888 &[anchor-at='left-start']::before { ${R}: 53.5%; ${Y}: 0%; } 2889 `,FLIP_BLOCK_INLINE:i` 2890 &[anchor-at*='top-'] { ${Lr}: 0 0 var(${jr}) 0; } 2891 &[anchor-at='top-start']::before { ${R}: 5%; ${K}: 0%; ${Y}: calc(100% - var(${Wr})); } 2892 &[anchor-at='top-end']::before { ${R}: 47.5%; ${K}: 0%; ${Y}: calc(0% + var(${Wr})); } 2893 2894 &[anchor-at*='right-'] { ${Lr}: 0 var(${jr}) 0 0; } 2895 &[anchor-at='right-start']::before { ${R}: 47.5%; ${K}: calc(100% - var(${Gr})); ${Y}: 100%; } 2896 &[anchor-at='right-end']::before { ${R}: 5%; ${K}: calc(0% + var(${Gr})); ${Y}: 100%; } 2897 2898 &[anchor-at*='bottom-'] { ${Lr}: var(${jr}) 0 0 0; } 2899 &[anchor-at='bottom-end']::before { ${R}: 95%; ${K}: 100%; ${Y}: calc(0% + var(${Wr})); } 2900 &[anchor-at='bottom-start']::before { ${R}: 53.5%; ${K}: 100%; ${Y}: calc(100% - var(${Wr})); } 2901 2902 &[anchor-at*='left-'] { ${Lr}: 0 0 0 var(${jr}); } 2903 &[anchor-at='left-end']::before { ${R}: 53.5%; ${K}: calc(0% + var(${Gr})); ${Y}: 0%; } 2904 &[anchor-at='left-start']::before { ${R}: 95%; ${K}: calc(100% - var(${Gr})); ${Y}: 0%; } 2905 `},zd=i` 2906 [arc-popover] { 2907 position: fixed; 2908 inset: auto; 2909 padding: 0; 2910 margin: var(${Lr}); 2911 2912 container-type: anchored; 2913 position-anchor: var(${A}-anchor-name, var(--jsâ¢anchor)); 2914 2915 ${ro.TOP} 2916 ${ro.RIGHT} 2917 ${ro.BOTTOM} 2918 ${ro.LEFT} 2919 ${ro.CENTER_AND_CORNERS} 2920 2921 &[try-fallbacks] { 2922 position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; 2923 } 2924 } 2925 2926 @supports (container-type: anchored) { 2927 @container anchored(fallback: flip-block) { 2928 [arc-popover][try-fallbacks][has-tail] { 2929 ${Ae.FLIP_BLOCK} 2930 } 2931 } 2932 2933 @container anchored(fallback: flip-inline) { 2934 [arc-popover][try-fallbacks][has-tail] { 2935 ${Ae.FLIP_INLINE} 2936 } 2937 } 2938 2939 @container anchored(fallback: flip-block flip-inline) { 2940 [arc-popover][try-fallbacks][has-tail] { 2941 ${Ae.FLIP_BLOCK_INLINE} 2942 } 2943 } 2944 } 2945 2946 /* @note â tail fallback mitigation */ 2947 @supports not (container-type: anchored) { 2948 /* @note â inline center anchor placement mitigation for Firefox */ 2949 [arc-popover] { 2950 &[anchor-at='right-center'] { 2951 position-area: inline-end center; 2952 } 2953 &[anchor-at='left-center'] { 2954 position-area: inline-start center; 2955 } 2956 } 2957 2958 [arc-popover][try-fallbacks][has-tail] { 2959 &[data-fallbacks='flip-block'] { 2960 ${Ae.FLIP_BLOCK} 2961 } 2962 &[data-fallbacks='flip-inline'] { 2963 ${Ae.FLIP_INLINE} 2964 } 2965 &[data-fallbacks='flip-block-inline'] { 2966 ${Ae.FLIP_BLOCK_INLINE} 2967 } 2968 } 2969 } 2970`,ce={BACKDROP:i` 2971 &::backdrop { 2972 background: var(${A}-backdrop, transparent); 2973 } 2974 `,DISMISS:i` 2975 [arc-popover-dismiss] { 2976 align-self: var(${A}-dismiss-align-self, auto); 2977 display: var(${A}-dismiss-display, inline-flex); 2978 align-items: var(${A}-dismiss-align-items, center); 2979 justify-content: var(${A}-dismiss-justify-content, center); 2980 margin: var(${A}-dismiss-margin, var(${m}â¢6m) var(${m}â¢0)); 2981 } 2982 2983 /* Header-less Popover: DismissButton typical starting spot */
2984 &:where(:not([arc-popover-header])) > [arc-popover-dismiss] { 2985 --arc-button-position: absolute; 2986 ${A}-dismiss-margin: 0; 2987 inset: var(${A}-dismiss-inset, 0.5em 0.5em auto auto); 2988 } 2989 `,HEADER:i` 2990 [arc-popover-header] { 2991 flex: var(${A}-header-flex, none); 2992 display: var(${A}-header-display, flex); 2993 justify-content: var(${A}-header-justify-content, space-between); 2994 align-items: var(${A}-header-align-items, baseline); 2995 gap: var(${A}-header-gap, var(${rt}â¢gap)); 2996 2997 padding: var(${A}-header-padding, 2998 var(${we}â¢block) 2999 var(${we}â¢inline) 3000 ); 3001 3002 color: var(${A}-header-color, inherit); 3003 background: var(${A}-header-background, none); 3004 3005 &:has([arc-popover-dismiss]) { 3006 padding-inline-end: var(${m}â¢12); 3007 } 3008 } 3009 `,CONTENT:i` 3010 [arc-popover-content] { 3011 flex: var(${A}-flex, 1); 3012 position: relative; 3013 display: var(${A}-content-display, flex); 3014 flex-direction: var(${A}-content-flex-direction, column); 3015 gap: var(${A}-content-gap, 0); 3016 3017 overflow: var(${A}-overflow, auto); 3018 overscroll-behavior: var(${A}-overscroll-behavior, contain); 3019 3020 color: var(${A}-color, var(${ui})); 3021 padding: var(${A}-padding, var(${et})); 3022 margin: var(${A}-margin, unset); 3023 background: var(${A}-content-background, var(${tt})); 3024 border-radius: calc(var(${$c}) - var(${Qo})); 3025 border: var(${A}-border, none); 3026 3027 height: var(${A}-height, auto); 3028 min-height: var(${A}-min-height, auto); 3029 max-height: var(${A}-max-height, 65vh); 3030 resize: var(${A}-resize, none); 3031 font-size: var(${A}-font-size, var(${s}â¢12)); 3032 } 3033 `,BODY:i` 3034 [arc-popover-body] { 3035 flex: var(${A}-body-flex, 1); 3036 display: var(${A}-body-display, block); 3037 flex-direction: var(${A}-body-flex-direction, unset); 3038 3039 padding: var(${A}-body-padding, 3040 var(${qr}â¢blockâ¢start, var(${qr}â¢block)) 3041 var(${qr}â¢inline) 3042 var(${qr}â¢blockâ¢end, var(${qr}â¢block)) 3043 var(${qr}â¢inline) 3044 ); 3045 } 3046 `,FOOTER:i` 3047 [arc-popover-footer] { 3048 flex: var(${A}-footer-flex, none); 3049 display: var(${A}-footer-display, flex); 3050 flex-direction: var(${A}-footer-flex-direction, row-reverse); 3051 justify-content: var(${A}-footer-justify-content, space-between); 3052 align-items: var(${A}-footer-align-items, center); 3053 gap: var(${A}-footer-gap, var(${at}â¢gap)); 3054 3055 padding: var(${A}-footer-padding, 3056 var(${fa}â¢blockâ¢start) 3057 var(${fa}â¢inline) 3058 var(${fa}â¢blockâ¢end) 3059 var(${fa}â¢inline) 3060 ); 3061 3062 background: var(${A}-footer-background, none); 3063 color: var(${A}-footer-color, inherit); 3064 3065 &:where([has-divider]) { 3066 border-top: var(${A}-footer-border-top, var(${m}â¢1) solid var(${vi}â¢color)); 3067 } 3068 } 3069 `,TAIL:i` 3070 &[has-tail]::before { 3071 content: ''; 3072 box-sizing: content-box; 3073 position: absolute; 3074 display: var(${va}â¢display, block); 3075 3076 inset: auto; 3077 top: var(${K}, auto); 3078 left: var(${Y}, auto); 3079 3080 translate: -50% -50%; 3081 rotate: 45deg; 3082 3083 width: var(${Qe}); 3084 height: var(${Qe}); 3085 border-radius: var(${s}â¢2); 3086 3087 background: color-mix(in srgb, 3088 var(${ct}) var(${R}), 3089 var(${nt}) clamp(0%, 100% - var(${R}), 100%) 3090 ); 3091 3092 border: var(${Qo}) solid color-mix(in srgb, 3093 var(${it}) var(${R}), 3094 var(${lt}) clamp(0%, 100% - var(${R}), 100%) 3095 ); 3096 } 3097 `},Cd=i` 3098 [arc-popover] { 3099 will-change: opacity; 3100 overflow: visible; /* For the tail â content overflow is set on '[arc-popover-content]' */ 3101 3102 font-size: var(${s}â¢16); /* This font-size is intended NOT to be altered; it is locked 3103 in as a reset for various popover calculations. The effective 3104 popover font size is set on '[arc-popover-content]'. */ 3105 3106 background: var(${A}-background, var(${ot})); 3107 border: var(${Qo}) solid transparent; 3108 border-radius: var(${$c}); 3109 box-shadow: var(${A}-shadow, var(${zr}â¢shadow)); 3110 width: var(${A}-width, auto); 3111 height: var(${A}-height, auto); 3112 min-width: var(${A}-min-width, auto); 3113 min-height: var(${A}
3113-min-height, auto); 3114 max-width: var(${A}-max-width, 100vw); 3115 max-height: var(${A}-max-height, 65vh); 3116 3117 ${ce.BACKDROP} 3118 ${ce.DISMISS} 3119 ${ce.HEADER} 3120 ${ce.CONTENT} 3121 ${ce.BODY} 3122 ${ce.FOOTER} 3123 ${ce.TAIL} 3124 } 3125`,ao={SETUP:kd,ANCHORS:zd,VARIANTS:wd,DENSITIES:Ad,ELEMENT:Cd},Sd=i` 3126@layer arc-components { 3127 3128 /* Shared defaults from _Internal/Components.css.js */ 3129 ${nd} 3130 3131 [arc-popover] { 3132 ${ao.SETUP} 3133 ${ao.VARIANTS} 3134 ${ao.DENSITIES} 3135 } 3136 3137 ${ao.ANCHORS} 3138 ${ao.ELEMENT} 3139 3140 /* POPOVER transition --------------------------------------------⢠*/ 3141 3142 [arc-popover] { 3143 transition-timing-function: ease-out; 3144 transition-duration: var(--arc-popover-transition-duration, 240ms); 3145 transition-property: display allow-discrete, opacity; 3146 3147 @supports (overlay: auto) { 3148 transition-behavior: allow-discrete; 3149 transition-property: display, overlay, opacity; 3150 } 3151 3152 opacity: 0; 3153 &:popover-open { opacity: 1; } 3154 3155 &::backdrop { transition: inherit; opacity: 0; } 3156 &:popover-open::backdrop { opacity: 1; } 3157 } 3158 3159 @starting-style { 3160 [arc-popover]:popover-open { opacity: 0; } 3161 [arc-popover]:popover-open::backdrop { opacity: 0; } 3162 } 3163} 3164 3165`,gi=(0,y.forwardRef)(({children:a,popover:r=Or.popover,anchorAt:e=Or.anchorAt,anchorName:o,anchorProps:t,alternateAnchorId:l,alternateAnchor:n,boundary:h=Or.boundary,tryFallbacks:d=Or.tryFallbacks,density:v=Or.density,variant:u=Or.variant,scheme:p=Or.scheme,isInverse:g,hasTail:f,tailSize:k=Or.tailSize,offset:z=Or.offset,hidePopoverButton:I,headerSlot:M,showDismiss:_,dismissProps:E,footerSlot:C,showFooterDivider:S,tag:F="div",contentTag:P="div",onToggle:G,...Z},or)=>{const sr=(0,y.useRef)(null),Q=(0,y.useRef)(null),dr=(0,y.useRef)(null),xr=(0,y.useRef)(G);(0,y.useImperativeHandle)(or,()=>Q.current);const[vr,ea]=(0,y.useState)(!1),nr=(0,y.useMemo)(()=>p==="auto"?void 0:g?"inverse":p,[g,p]),Fr=(0,y.useCallback)(()=>{if(typeof document>"u")return sr.current??null;const ir=la(sr.current)??document;return l?ir.getElementById(l):typeof n=="string"?ir.getElementById(n):n instanceof HTMLElement?n:typeof n=="function"?n():n&&typeof n=="object"&&"current"in n?n.current:sr.current??null},[n,l]),Hr=d||h==="flip",oa=!!f&&!Fn.includes(e),La=Hn({canHaveTail:oa,tailSize:k}),Ra=(0,y.useMemo)(()=>{const ir=o||l||(typeof n=="string"?n:void 0)||t?.id||Z.id||void 0;return sc(String(ir))},[o,t?.id,Z.id,n,l]),ta=(0,y.useMemo)(()=>({popoverTarget:Z.id,"aria-haspopup":!0,"aria-controls":Z.id,"aria-expanded":vr}),[Z.id,vr]),ca=(0,y.useMemo)(()=>({isOpen:vr,"aria-label":"Dismiss",...ta,...E}),[E,vr,ta]),V=(0,y.useMemo)(()=>({ref:sr,...ta,...t,tooltip:vr?void 0:t?.tooltip,anchorName:Ra||void 0}),[t,ta,Ra,vr]),kr=(0,y.useMemo)(()=>({"--js\u2022anchor":V?.anchorName||"","--js\u2022offset":Number(z)===0?"":`${z}px`,"--js\u2022tail":La.cssTailVar}),[V?.anchorName,z,La.cssTailVar]);return Po(()=>{const ir=Fr();if(dr.current=ir,!!ir)return Un(ir,V.anchorName)},[Fr,V.anchorName,vr]),(0,y.useEffect)(()=>{xr.current=G},[G]),(0,y.useEffect)(()=>{const ir=Q.current;if(!ir)return;const Mr=ka=>{const{newState:wa}=ka,xo=wa==="open";ea(xo),xo&&(dr.current=Fr()),xr.current?.(ka)};return ir.addEventListener("toggle",Mr),()=>ir.removeEventListener("toggle",Mr)},[Fr]),ys({anchorEl:dr.current,popoverEl:Q.current,anchorAt:e,tryFallbacks:Hr,offsetPx:Number(z)||0,tailSizePx:La.floatingTailPx,hasTail:oa,isOpen:vr}),zs({anchorEl:dr.current,popoverEl:Q.current,anchorAt:e,tryFallbacks:Hr,hasTail:oa,isOpen:vr}),(0,c.jsxs)(c.Fragment,{children:[!((l||n)&&I)&&(0,c.jsx)(Xe,{...V}),(0,c.jsxs)(F,{...Z,ref:Q,"arc-popover":"","arc-scheme":nr,"anchor-at":e,"try-fallbacks":Hr?"":void 0,popover:r,variant:u,density:v,"has-tail":oa?"":void 0,role:Z.role??"dialog",style:{...Z.style,...kr},children:[(0,c.jsxs)(P,{"arc-popover-content":"",children:[!!M&&(0,c.jsx)(md,{showDismiss:_,dismissProps:ca,children:M}),M||C?(0,c.jsx)(bd,{children:a}):a,!!C&&(0,c.jsx)($d,{showDivider:S,children:C})]}),_&&!M&&(0,c.jsx)(hi,{...ca})]})]})});gi.displayName="ArcPopover";const yc=gi;yc.handlePopover=Vn,yc.Button=Xe;const eo=yc;H("ArcPopover",Sd);const _d=i` 3166@layer arc-components { 3167 3168 [arc-avatar-overflow] { 3169 /* Inter-Component Communication ⢠ArcPopover ------------------⢠*/ 3170 --arc-popover-font-size: var(--arc-font-size-body-md); 3171 --arc-popover-translate: -100% 0.5em; 3172 --arc-popover-width: max-content; 3173 --arc-popover-max-width: 18em; 3174 --arc-popover-padding: 0; 3175 3176 /* For Neutral/Anonymous avatars -------------------------------⢠*/ 3177 [data-element=list] { 3178 margin: 0; 3179 padding: var(${s}â¢4) var(${s}â¢0); 3180 } 3181 3182 [data-element=list-item] { 3183 display: flex; 3184 align-items: center; 3185 gap: var(${s}â¢6); 3186 padding: var(${s}â¢4) var(${s}â¢8); 3187 } 3188 3189 ${Gt} 3190 ${Tn} 3191 } 3192 3193} 3194`,Ed=a=>(0,c.jsx)("ul",{...a,"data-element":"list"}),Td=a=>(0,c.jsx)("li",{...a,"data-element":"list-item"}),Id=({count:a,anchorId:r,overflowId:e,shouldShowOverflow:o,...t})=>(0,c.jsx)(ac,{title:`+${a}`,children:(0,c.jsx)(eo.Button,{...t,id:r,popoverTarget:e,text:`+${a}`,variant:"common",hierarchy:"primary",disabled:!o,"data-element":"counter","data-color":"black","data-num-length":a?.toString().length})}),jd=({children:a,id:r,size:e="sm",overflowCount:o=0,shouldShowOverflow:t=!1,anchorAt:l="bottom-end",tryFallbacks:n=!0,...h})=>{const d=Math.min(o,999),v=Kr(r,"arc-avatar-overflow"),u=(0,y.useMemo)(()=>`${v}-anchor`,[v]),p=(0,y.useMemo)(()=>y.Children.toArray(a),[a]);return(0,c.jsxs)(c.Fragment,{children:[d>0&&(0,c.jsx)(Id,{count:d,anchorId:u,overflowId:v,shouldShowOverflow:t}),t&&d>0&&(0,c.jsx)(eo,{...h,scheme:"inverse","arc-avatar-overflow":"",id:v,anchorAt:l,tryFallbacks:n,alternateAnchorId:u,hidePopoverButton:!0,variant:"common","data-size":e,children:(0,c.jsx)(Ed,{children:p.map((g,f)=>(0,c.jsx)(Td,{children:g},f))})})]})};H("ArcAvatarOverflow",_d);const pi=({fg:a,bg:r})=>i` 3195 &:has(>[data-color=mono-inverse]) { 3196 ${a}â¢high: var(--arc-color-fg-on-mono-inverse); 3197 ${r}â¢high: var(--arc-color-bg-mono-inverse); 3198 ${a}â¢low: var(--arc-color-fg-on-subtle); 3199 ${r}â¢low: var(--arc-color-bg-neutral-subtle); 3200 } 3201 3202 &:has(>[data-color=brand]) { 3203 ${a}â¢high: var(--arc-color-fg-on-stark); 3204 ${r}â¢high: var(--arc-color-bg-brand-stark); 3205 ${a}â¢low: var(--arc-color-fg-brand-stark); 3206 ${r}â¢low: var(--arc-color-bg-brand-subtle); 3207 } 3208 3209 &:has(>[data-color=mono]) { 3210 ${a}â¢high: var(--arc-color-fg-on-mono); 3211 ${r}â¢high: var(--arc-color-bg-mono); 3212 ${a}â¢low: var(--arc-color-fg-on-mono); 3213 ${r}â¢low: var(--arc-color-bg-mono); 3214 } 3215 3216 &:has(>[data-color=blue]) { 3217 ${a}â¢high: var(--arc-color-fg-on-stark); 3218 ${r}â¢high: var(--arc-color-bg-blue-stark); 3219 ${a}â¢low: var(--arc-color-fg-blue-stark); 3220 ${r}â¢low: var(--arc-color-bg-blue-subtle); 3221 } 3222 3223 &:has(>[data-color=neutral]) { 3224 ${a}â¢high: var(--arc-color-fg-on-heavy); 3225 ${r}â¢high: var(--arc-color-bg-neutral-heavy); 3226 ${a}â¢low: var(--arc-color-fg-neutral-stark); 3227 ${r}â¢low: var(--arc-color-bg-neutral-subtle); 3228 } 3229 3230 &:has(>[data-color=purple]) { 3231 ${a}â¢high: var(--arc-color-fg-on-stark); 3232 ${r}â¢high: var(--arc-color-bg-purple-stark); 3233 ${a}â¢low: var(--arc-color-fg-purple-stark); 3234 ${r}â¢low: var(--arc-color-bg-purple-subtle); 3235 } 3236 3237 &:has(>[data-color=green]) { 3238 ${a}â¢high: var(--arc-color-fg-on-stark); 3239 ${r}â¢high: var(--arc-color-bg-green-stark); 3240 ${a}â¢low: var(--arc-color-fg-green-stark); 3241 ${r}â¢low: var(--arc-color-bg-green-subtle); 3242 } 3243 3244 &:has(>[data-color=yellow]) { 3245 ${a}â¢high: var(--arc-color-fg-on-stark); 3246 ${r}â¢high: var(--arc-color-bg-yellow-stark); 3247 ${a}â¢low: var(--arc-color-fg-yellow-stark); 3248 ${r}â¢low: var(--arc-color-bg-yellow-subtle); 3249 } 3250 3251 &:has(>[data-color=red]) { 3252 ${a}â¢high: var(--arc-color-fg-on-stark); 3253 ${r}â¢high: var(--arc-color-bg-red-stark); 3254 ${a}â¢low: var(--arc-color-fg-red-stark); 3255 ${r}â¢low: var(--arc-color-bg-red-subtle); 3256 } 3257 3258 &:has(>
3258[data-color=maroon]) { 3259 ${a}â¢high: var(--arc-color-fg-on-stark); 3260 ${r}â¢high: var(--arc-color-bg-maroon-stark); 3261 ${a}â¢low: var(--arc-color-fg-maroon-stark); 3262 ${r}â¢low: var(--arc-color-bg-maroon-subtle); 3263 } 3264 3265 &:has(>[data-color=mint]) { 3266 ${a}â¢high: var(--arc-color-fg-on-stark); 3267 ${r}â¢high: var(--arc-color-bg-mint-stark); 3268 ${a}â¢low: var(--arc-color-fg-mint-stark); 3269 ${r}â¢low: var(--arc-color-bg-mint-subtle); 3270 } 3271 3272 &:has(>[data-color=orange]) { 3273 ${a}â¢high: var(--arc-color-fg-on-stark); 3274 ${r}â¢high: var(--arc-color-bg-orange-stark); 3275 ${a}â¢low: var(--arc-color-fg-orange-stark); 3276 ${r}â¢low: var(--arc-color-bg-orange-subtle); 3277 } 3278 3279 &:has(>[data-color=ai]) { 3280 ${a}â¢high: var(--arc-color-fg-on-heavy); 3281 ${r}â¢high: var(--arc-gradient-ai-300); 3282 ${a}â¢low: var(--arc-color-fg-on-subtle); 3283 ${r}â¢low: var(--arc-gradient-ai-100); 3284 } 3285 3286 &:has(>[data-color=overlay-light]) { 3287 ${a}â¢high: var(--arc-color-mono-black); 3288 ${r}â¢high: var(--arc-color-alpha-white-80); 3289 ${a}â¢low: var(--arc-color-alpha-heavy); 3290 ${r}â¢low: var(--arc-color-alpha-white-20); 3291 } 3292 3293 &:has(>[data-color=overlay-dark]) { 3294 ${a}â¢high: var(--arc-color-mono-white); 3295 ${r}â¢high: var(--arc-color-alpha-black-70); 3296 ${a}â¢low: var(--arc-color-mono-white); 3297 ${r}â¢low: var(--arc-color-alpha-black-40); 3298 } 3299`,fi=({fg:a,bg:r})=>i` 3300 &:has(>[data-contrast=high]) { 3301 ${a}: var(${a}â¢high); 3302 ${r}: var(${r}â¢high); 3303 } 3304 3305 &:has(>[data-contrast=low]) { 3306 ${a}: var(${a}â¢low); 3307 ${r}: var(${r}â¢low); 3308 } 3309`,T=i`--arcâ¢badge`,xc=i`${T}â¢fg`,kc=i`${T}â¢bg`,Ld=pi({fg:xc,bg:kc}),Rd=fi({fg:xc,bg:kc}),Md=i` 3310 &:has(>[data-size=lg]) { 3311 ${T}â¢fontâ¢size: var(${s}â¢14); 3312 ${T}â¢fontâ¢sizeâ¢caps: var(${s}â¢12); 3313 ${T}â¢size: var(${s}â¢24); 3314 ${T}â¢minâ¢size: var(${s}â¢30); 3315 ${T}â¢paddingâ¢inline: var(${s}â¢8); 3316 ${T}â¢borderâ¢radius: var(${s}â¢4); 3317 ${T}â¢gap: var(${s}â¢4); 3318 } 3319 3320 &:has(>[data-size=md]) { 3321 ${T}â¢fontâ¢size: var(${s}â¢12); 3322 ${T}â¢fontâ¢sizeâ¢caps: var(${s}â¢10); 3323 ${T}â¢size: var(${s}â¢20); 3324 ${T}â¢minâ¢size: var(${s}â¢24); 3325 ${T}â¢paddingâ¢inline: var(${s}â¢6); 3326 ${T}â¢borderâ¢radius: var(${s}â¢4); 3327 ${T}â¢gap: var(${s}â¢4); 3328 } 3329 3330 &:has(>[data-size=sm]) { 3331 ${T}â¢fontâ¢size: var(${s}â¢10); 3332 ${T}â¢fontâ¢sizeâ¢caps: var(${s}â¢8); 3333 ${T}â¢size: var(${s}â¢16); 3334 ${T}â¢minâ¢size: var(${s}â¢18); 3335 ${T}â¢paddingâ¢inline: var(${s}â¢4); 3336 ${T}â¢borderâ¢radius: var(${s}â¢4); 3337 ${T}â¢gap: var(${s}â¢4); 3338 } 3339 3340 /** @default ⢠relative equivalent of 'md' at 100% ⢠(16 x 75% = 12) */ 3341 &:has(>[data-size=inherit]) { 3342 ${T}â¢fontâ¢size: 1em; 3343 ${T}â¢fontâ¢sizeâ¢text: 0.75em; 3344 ${T}â¢fontâ¢sizeâ¢caps: 0.625em; 3345 ${T}â¢size: 1.25em; 3346 ${T}â¢minâ¢size: 1.5em; 3347 ${T}â¢paddingâ¢inline: 0.375em; 3348 ${T}â¢borderâ¢radius: 0.25em; 3349 ${T}â¢gap: 0.25em; 3350 } 3351`,Bd=i` 3352 &:has(>[data-layout=fill]) { 3353 ${T}â¢flex: auto; /* same as 1 (1 1 auto) but with clearer intent */ 3354 ${T}â¢display: flex; 3355 ${T}â¢minâ¢width: var(${T}â¢minâ¢size); 3356 3357 /* Inter-Component Communication ⢠ArcIconText -------------------⢠*/ 3358 --arc-icon-text-overflow: hidden; 3359 --arc-icon-text-white-space: nowrap; 3360 --arc-icon-text-text-overflow: ellipsis; 3361 } 3362 3363 &:has(>[data-layout=hug]) { 3364 ${T}â¢flex: none; /* same as 0 0 auto but with clearer intent */ 3365 ${T}â¢display: inline-flex; 3366 ${T}â¢minâ¢width: min-content; 3367 } 3368`,Pd=i` 3369@layer arc-components { 3370 3371 [arc-badge-wrapper] { 3372 ${Ld} 3373 ${Rd} 3374 ${Md} 3375 ${Bd} 3376 3377 /* Inter-Component Communication ⢠ArcIconText -------------------⢠*/ 3378 --arc-icon-text-align-items: center; 3379 --arc-icon-text-gap: var(${T}â¢gap); 3380 } 3381 3382 /* CORE ------------------------------------------------------------⢠*/ 3383 3384 [arc-badge-wrapper]:not([hidden]) { 3385 flex: var(--arc-badge-flex, var(${T}â¢flex, unset)); 3386 align-self: var(--arc-badge-align-self, flex-start); 3387 display: var(${T}â¢display, inline-flex); 3388 align-items: center; 3389 justify-content: center; 3390 height: 1lh; 3391 max-height: 1lh; 3392 vertical-align: bottom; 3393 3394 &:has(>[data-is-flexible]) { 3395 min-width: var(--arc-badge-min-width, var(${T}â¢minâ¢width)); 3396 } 3397 } 3398 3399 [arc-badge] { 3400 font-size: var(--arc-badge-font-size, var(${T}â¢fontâ¢size)); 3401 font-weight: var(--arc-font-weight-600); 3402 3403 flex: var(${T}â¢flex); 3404 display: var(${T}â¢display, inline-flex); 3405 align-items: center; 3406 justify-content: center; 3407 height: var(${T}â¢size); 3408 padding-inline: var(${T}â¢paddingâ¢inline); 3409 3410 overflow: hidden; 3411 white-space: nowrap; 3412 line-height: 2; 3413 3414 color: var(--arc-badge-color, var(${xc})); 3415 background: var(--arc-badge-background, var(${kc})); 3416 border-radius: var(${T}â¢borderâ¢radius); 3417 mix-blend-mode: var(--arc-badge-mix-blend-mode, unset); 3418 3419 :is([data-element=icon], [data-element=text]) { 3420 font-size: var(${T}â¢fontâ¢sizeâ¢text, 1em); 3421 } 3422 3423 &[data-is-uppercase] [data-element=text] { 3424 text-transform: uppercase; 3425 font-size: var(${T}â¢fontâ¢sizeâ¢caps); 3426 } 3427 } 3428 3429} 3430`,mi=["brand","blue","neutral","purple","green","yellow","red","orange","mint","maroon","mono","mono-inverse","ai","overlay-light","overlay-dark"],Od=["brand",...mi.filter(a=>a!=="brand")],Dd=["neutral",...mi.filter(a=>a!=="neutral")],Nd=Er(Za,Od),Fd=Er(Za,Dd),Hd=Er(_r,["inherit","lg","md","sm"]),Vd=Er(na,["hug","fill"]),Ud=["high","low"],Wd=Er(lr,["brand-blue","brand-black","neutral","info","success","warning","critical","ai","overlay-light","overlay-dark"]),Gd={"brand-blue":"brand","brand-black":"mono-inverse",neutral:"neutral",info:"purple",success:"green",warning:"yellow",critical:"red",ai:"ai","overlay-light":"overlay-light","overlay-dark":"overlay-dark"},Zd=({children:a,icon:r,text:e,isFlipped:o,isFlexible:t,isUppercase:l,color:n,variant:h,size:d="inherit",layout:v="hug",contrast:u="high",...p})=>{const g=n??Gd[h??"brand-blue"],f=a||(0,c.jsx)(Yr,{icon:r,text:e,isFlipped:o,layout:"gutter"}),k=v==="fill"&&t;return(0,c.jsx)("span",{...p,"arc-badge-wrapper":"",children:(0,c.jsx)("span",{"arc-badge":"","data-contrast":u,"data-color":g,"data-layout":v,"data-size":d,"data-is-flexible":k?"":void 0,"data-is-uppercase":l?"":void 0,children:f})})};H("ArcBadge",Pd);const ar=i`--arcâ¢badgeâ¢count`,wc=i`${ar}â¢fg`,Ac=i`${ar}â¢bg`,Kd=pi({fg:wc,bg:Ac}),Yd=fi({fg:wc,bg:Ac}),qd=i` 3431 &:has(>[data-size=lg]) { 3432 ${ar}â¢fontâ¢size: var(${s}â¢14); 3433 ${ar}â¢size: var(${s}â¢24); 3434 ${ar}â¢paddingâ¢inline: var(${s}â¢4); 3435 } 3436 3437 &:has(>[data-size=md]) { 3438 ${ar}â¢fontâ¢size: var(${s}â¢12); 3439 ${ar}â¢size: var(${s}â¢20); 3440 ${ar}â¢paddingâ¢inline: var(${s}â¢4); 3441 } 3442 3443 &:has(>[data-size=sm]) { 3444 ${ar}â¢fontâ¢size: var(${s}â¢10); 3445 ${ar}â¢size: var(${s}â¢16); 3446 ${ar}â¢paddingâ¢inline: var(${s}â¢4); 3447 } 3448 3449 &:has(>[data-size=inherit]) { /** @default ⢠scalable based on 'md' size */ 3450 ${ar}â¢fontâ¢size: 1em; 3451 ${ar}â¢fontâ¢sizeâ¢text: 0.75em; 3452 ${ar}â¢size: 1.25em; 3453 ${ar}â¢paddingâ¢inline: 0.25em; 3454 } 3455`,Jd=i` 3456 &:has(>[data-shape=square]) { 3457 ${ar}â¢borderâ¢radius: var(${s}â¢4); 3458 } 3459 3460 &:has(>[data-shape=circle]) { 3461 ${ar}â¢borderâ¢radius: var(--arc-border-radius-pill); 3462 } 3463`,Xd=i` 3464@layer arc-components { 3465 3466[arc-badge-count-wrapper] { 3467 ${Kd} 3468 ${Yd} 3469 ${qd} 3470 ${Jd} 3471} 3472 3473/* CORE ------------------------------------------------------------⢠*/ 3474 3475[arc-badge-count-wrapper]:not([hidden]) { 3476 flex: none; 3477 align-self: var(--arc-badge-count-align-self, flex-start); 3478 display: inline-flex; 3479 align-items: center; 3480 justify-content: center; 3481 height: 1lh; 3482 max-height: 1lh; 3483 vertical-align: bottom; 3484} 3485 3486[arc-badge-count] { 3487 font-size: var(--arc-badge-count-font-size, var(${ar}â¢fontâ¢size)); 3488 font-weight: var(--arc-font-weight-600); 3489 3490 flex: none; 3491 display: inline-flex; 3492 align-items: center; 3493 justify-content: center; 3494 height: var(${ar}â¢size); 3495 min-width: var(${ar}â¢size); 3496 padding-inline: var(${ar}â¢paddingâ¢inline); 3497 3498 white-space: nowrap; 3499 line-height: normal; 3500 3501 color: var(--arc-badge-count-color, var(${wc})); 3502 background: var(--arc-badge-count-background, var(${Ac})); 3503 border-radius: var(${ar}â¢borderâ¢radius); 3504 mix-blend-mode: var(--arc-badge-count-mix-blend-mode, unset); 3505 3506 [data-element=text] { 3507 font-size: var(${ar}â¢fontâ¢sizeâ¢text, 1em); 3508 } 3509} 3510 3511`,Qd=Er(_r,["inherit","lg","md","sm"]),rh=Er(lr,["neutral","brand","critical","warning","success","inverse"]),ah=["low","high"],eh=Er(Le,["square","circle"]),oh={neutral:"neutral",brand:"brand",critical:"red",warning:"yellow",success:"green",inverse:"mono"},th=({children:a,text:r,color:e,variant:o,contrast:t,size:l="inherit",shape:n="square",...h})=>{const d=a||(0,c.jsx)("span",{"data-element":"text",children:r}),v=e??oh[o??"neutral"],u=o==="critical"?"high":t??"low";return(0,c.jsx)("span",{...h,"arc-badge-count-wrapper":"",children:(0,c.jsx)("span",{"arc-badge-count":"","data-color":v,"data-contrast":u,"data-shape":n,"data-size":l,children:d})})};H("ArcBadgeCount",Xd);const Ea=i`--arcâ¢label`,oo=i`${Ea}â¢cursor`,to=i`${Ea}â¢opacity`,ch=i` 3512@layer arc-components { 3513 3514 [arc-label] { 3515 /* Inter-Component Communication -------------------------------⢠*/ 3516 /* also applies to nested ArcLabelContent */ 3517 ${to}: var(--arc-label-opacity, unset); 3518 ${to}â¢disabled: var(--arc-label-opacity-disabled, var(--arc-alpha-40)); 3519 3520 /* Internal STYLES ---------------------------------------------⢠*/ 3521 ${Ea}â¢display: var(--arc-label-display, inline-flex); 3522 ${Ea}â¢gap: var(--arc-label-gap, var(${s}â¢8)); 3523 ${Ea}â¢alignâ¢items: var(--arc-label-align-items, baseline); 3524 3525 ${oo}: var(--arc-label-cursor, pointer); 3526 ${oo}â¢disabled: var(--arc-label-cursor-disabled, not-allowed); 3527 3528 &:has(:disabled) { 3529 ${oo}: var(${oo}â¢disabled); 3530 ${to}: var(${to}â¢disabled); 3531 } 3532 3533 &[data-layout=fill] { 3534 ${Ea}â¢display: flex; 3535 } 3536 } 3537 3538 /* CORE STYLES ---------------------------------------------------⢠*/ 3539 [arc-label]:not([hidden]) { 3540 display: var(${Ea}â¢display); 3541 align-items: var(${Ea}â¢alignâ¢items); 3542 gap: var(${Ea}â¢gap); 3543 cursor: var(${oo}); 3544 } 3545 3546} 3547`,nh=L(na,["hug","fill"]),ne=({layout:a,...r})=>(0,c.jsx)("label",{...r,"arc-label":"","data-layout":a});H("ArcLabel",ch);const ih=i` 3548@layer arc-components { 3549 3550 [arc-label-content] { 3551 opacity: var(--arc-label-opacity, var(${to}, unset)); 3552 transition: var(--arc-label-transition, opacity 100ms ease-out); 3553 user-select: var(--arc-label-user-select, none); 3554 -webkit-user-select: var(--arc-label-user-select, none); 3555 } 3556 3557} 3558`,ie=a=>(0,c.jsx)("span",{...a,"arc-label-content":""});H("LabelContent",ih);const lh={checkbox:"checkbox",radio:"radio",switch:"radio"},co=({id:a,indeterminate:r,type:e,onChange:o,...t})=>{const l=e==="checkbox"&&!!r,n=(0,y.useRef)(null),h=Kr(a,`arc-${e}`),d=v=>u=>{if(!(u?.target instanceof HTMLInputElement))return;const p={checked:u?.target.checked,indeterminate:u?.target?.indeterminate,name:u?.target?.name,value:t?.value};v?.(p,u)};return(0,y.useEffect)(()=>{n.current?.type==="checkbox"&&(n.current.indeterminate=!!r)},[r]),(0,c.jsx)("input",{...t,id:h,ref:n,type:lh[e],"arc-input-type":e,"aria-disabled":t?.disabled||void 0,"data-is-disabled":t?.disabled||void 0,"data-is-checked":t?.checked||void 0,"data-is-indeterminate":l||void 0,onChange:d(o)})},sh=i` 3559@layer arc-components { 3560 3561 [arc-input-mask] { 3562 ${x}â¢borderâ¢width: var(--arc-border-width-sm); 3563 ${x}â¢border: var(${x}
3563â¢borderâ¢width) solid var(${x}â¢borderâ¢color); 3564 3565 /* Inter-Component Communication ---------------------------------⢠*/ 3566 3567 /* for: ArcIcon */ 3568 --arc-icon-size: var(${x}â¢iconâ¢size); /* ArcIcon */ 3569 3570 /* STATES --------------------------------------------------------⢠*/ 3571 3572 &:has(:disabled) { 3573 ${x}â¢cursor: not-allowed; 3574 } 3575 3576 &:has(:focus:focus-visible) { 3577 ${x}â¢outline: var(${x}â¢borderâ¢width) solid var(--arc-color-border-focus); 3578 } 3579 } 3580 3581 /* CORE STYLES -----------------------------------------------------⢠*/ 3582 3583 [arc-input-mask-wrapper] { 3584 align-self: normal; 3585 display: flex; 3586 align-items: center; 3587 justify-content: center; 3588 max-height: 1lh; 3589 } 3590 3591 [arc-input-mask] { 3592 position: relative; 3593 display: inline-flex; 3594 align-items: center; 3595 justify-content: center; 3596 width: var(${x}â¢width); 3597 height: var(${x}â¢height); 3598 opacity: var(${x}â¢opacity, var(--arc-alpha-100)); 3599 3600 color: var(${x}â¢color, transparent); 3601 background: var(${x}â¢background); 3602 border: var(${x}â¢border); 3603 border-radius: var(${x}â¢borderâ¢radius); 3604 translate: var(${x}â¢translate, unset); 3605 3606 outline: var(${x}â¢outline, none); 3607 outline-offset: var(${x}â¢borderâ¢width); 3608 3609 transition-duration: 100ms; 3610 transition-behavior: allow-discrete; 3611 transition-timing-function: ease-in-out; 3612 transition-property: 3613 opacity, 3614 background, 3615 color, 3616 border-color, 3617 outline; 3618 3619 [arc-input-type] { 3620 flex: none; 3621 outline: none; 3622 appearance: none; 3623 position: absolute; 3624 inset: calc(var(${x}â¢borderâ¢width) * -1); 3625 cursor: var(${x}â¢cursor, pointer); 3626 margin: 0; 3627 padding: 0; 3628 border: 0; 3629 z-index: var(${x}â¢zâ¢index, unset); 3630 } 3631 } 3632 3633} 3634`,st=({type:a,...r})=>(0,c.jsx)("span",{"arc-input-mask-wrapper":"",children:(0,c.jsx)("span",{...r,"arc-input-mask":a})});H("ArcBooleanInputMask",sh);const fr=i`--arcâ¢checkbox`,dh=i` 3635@layer arc-components { 3636 3637 [arc-checkbox] { 3638 /* SIZES -------------------------------------------------------⢠*/ 3639 &[data-size=inherit] { 3640 ${fr}â¢fontâ¢size: 1em; 3641 ${fr}â¢iconâ¢size: 0.625em; 3642 ${fr}â¢size: 1.125em; 3643 ${fr}â¢gap: 0.5em; 3644 } 3645 3646 &[data-size=md] { 3647 ${fr}â¢fontâ¢size: var(${s}â¢14); 3648 ${fr}â¢iconâ¢size: var(${s}â¢10); 3649 ${fr}â¢size: var(${s}â¢18); 3650 ${fr}â¢gap: var(${s}â¢8); 3651 } 3652 3653 &[data-size=sm] { 3654 ${fr}â¢fontâ¢size: var(${s}â¢12); 3655 ${fr}â¢iconâ¢size: var(${s}â¢10); 3656 ${fr}â¢size: var(${s}â¢16); 3657 ${fr}â¢gap: var(${s}â¢6); 3658 } 3659 3660 /* Inter-Component Communication -------------------------------⢠*/ 3661 /* for: ArcBooleanInputMask */ 3662 ${x}â¢borderâ¢radius: var(${s}â¢4); 3663 ${x}â¢size: var(${fr}â¢size); 3664 ${x}â¢iconâ¢size: var(${fr}â¢iconâ¢size); 3665 ${x}â¢width: var(${fr}â¢size); 3666 ${x}â¢height: var(${fr}â¢size); 3667 ${x}â¢translate: 0 var(${s}â¢1m);⢠3668 3669 /* for: ArcLabel */ 3670 --arc-label-gap: var(${fr}â¢gap); 3671 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask 3672 to stay inline with the label text 3673 regardless of applied line-height */ 3674 } 3675 3676 /* CORE STYLES ---------------------------------------------------⢠*/ 3677 [arc-checkbox]:not([hidden]) { 3678 font-size: var(${fr}â¢fontâ¢size); 3679 display: var(--arc-checkbox-display, inline-flex); 3680 min-height: 1lh; 3681 3682 /* UNCHECKED, NOT-DISABLED, +HOVER ⢠default state */ 3683 &:not(:has(:checked, :indeterminate)) { 3684 ${x}â¢color: transparent; 3685 ${x}â¢borderâ¢color: var(--arc-color-border-stark); 3686 ${x}â¢background: transparent; 3687 3688 &:hover { 3689 ${x}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 3690 ${x}â¢background: var(--arc-color-bg-theme-subtle); 3691 } 3692 3693 &:has(:disabled) { 3694 ${x}â¢borderâ¢color: var(--arc-color-border-disabled); 3695 ${x}â¢background: var(--arc-color-bg-disabled); 3696 } 3697 } 3698 3699 /* DISABLED */ 3700 &:has(:disabled) { 3701 color: var(--arc-color-fg-disabled); 3702 } 3703 3704 /* PRIMARY, +DISABLED */ 3705 &[data-variant=primary] { 3706 &:has(:checked, :indeterminate) { 3707 ${x}â¢color: var(--arc-color-fg-on-theme-heavy); 3708 ${x}â¢borderâ¢color: transparent; 3709 ${x}â¢background: var(--arc-color-bg-theme-heavy); 3710 3711 &:not(:has(:disabled)):hover { 3712 ${x}â¢color: var(--arc-color-fg-on-theme-stark); 3713 ${x}â¢background: var(--arc-color-bg-theme-stark); 3714 } 3715 3716 &:has(:disabled) { 3717 ${x}â¢color: var(--arc-color-fg-on-theme-mid); 3718 ${x}â¢background: var(--arc-color-bg-theme-mid); 3719 } 3720 } 3721 } 3722 3723 /* SECONDARY, +DISABLED */ 3724 &[data-variant=secondary] { 3725 &:has(:checked, :indeterminate) { 3726 ${x}â¢color: var(--arc-color-fg-theme-heavy); 3727 ${x}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 3728 ${x}â¢background: transparent; 3729 3730 &:not(:has(:disabled)):hover { 3731 ${x}â¢color: var(--arc-color-fg-theme-stark); 3732 ${x}â¢borderâ¢color: var(--arc-color-border-theme-stark); 3733 } 3734 3735 &:has(:disabled) { 3736 ${x}â¢color: var(--arc-color-fg-theme-subtle); 3737 ${x}â¢borderâ¢color: var(--arc-color-border-theme-mid); 3738 } 3739 } 3740 } 3741 } 3742 3743} 3744`,hh=L(na,["hug","fill"]),vh=L(_r,["inherit","md","sm"]),uh=L(lr,["primary","secondary"]),bi=({children:a,label:r,layout:e,size:o="md",variant:t="primary",useMask:l=!0,...n})=>{const{className:h,title:d,...v}=n,u={className:h,title:d},p=a??r,g=(0,c.jsx)(co,{...v,type:"checkbox"}),f=l&&(0,c.jsxs)(st,{type:"checkbox",children:[g,(0,c.jsx)(D,{icon:v?.indeterminate?"fa-solid fa-minus arc-fw":"fa-solid fa-check arc-fw"})]}),k=!!p&&(0,c.jsxs)(ne,{layout:e,children:[f||g,(0,c.jsx)(ie,{children:p})]});return(0,c.jsx)("span",{...u,"arc-checkbox":"","data-size":o,"data-variant":t,children:k||f||g})};H("ArcCheckbox",dh);const Jr=i`--arcâ¢cb`,er=i`${Jr}â¢o`,Xr=i`${er}â¢border`,zc=i`${er}â¢icon`,Cc=i`${er}â¢text`,gh=i` 3745@layer arc-components { 3746 3747 [arc-checkbox-bar] { 3748 ${Jr}â¢fontâ¢size: var(${s}â¢14); 3749 ${Jr}â¢borderâ¢radius: var(${s}â¢6); 3750 ${Jr}â¢background: var(--arc-color-alpha-black-0); 3751 ${Jr}â¢padding: 0px; 3752 ${Jr}â¢gap: var(${s}â¢2); 3753 3754 ${er}â¢color: var(--arc-color-fg-secondary); 3755 ${er}â¢background: var(--arc-color-alpha-white-0); 3756 3757 ${Xr}â¢color: var(--arc-color-alpha-black-0); 3758 ${Xr}â¢width: var(${s}â¢1); 3759 ${Xr}â¢radius: var(${s}â¢6);
3759 /* bar-radius minus bar-padding */ 3760 3761 /* SIZES -------------------------------------------------------- */ 3762 &[data-size=lg] { /* @default */ 3763 ${er}â¢size: var(${s}â¢40); 3764 ${er}â¢lineâ¢height: var(${s}â¢38); /* ⢠-2px to account for border-width (top/bottom) */ 3765 ${zc}â¢padding: var(${s}â¢8); 3766 ${Cc}â¢padding: var(${s}â¢12); 3767 } 3768 3769 &[data-size=md] { 3770 ${er}â¢size: var(${s}â¢32); 3771 ${er}â¢lineâ¢height: var(${s}â¢30); /* ⢠-2px to account for border-width (top/bottom) */ 3772 ${zc}â¢padding: var(${s}â¢6); 3773 ${Cc}â¢padding: var(${s}â¢8); 3774 } 3775 3776 /* Inter-Component Communication -------------------------------⢠*/ 3777 --arc-label-align-items: stretch; /* control ArcLabel's vertical footprint; 3778 allows long label text to wrap 3779 without compromising option's 3780 visual border */ 3781 3782 /* LAYOUTS ------------------------------------------------------ */ 3783 &[data-layout=hug] { /* @default */ 3784 ${Jr}â¢display: inline-flex; 3785 } 3786 3787 &[data-layout=fill] { 3788 ${Jr}â¢display: flex; 3789 } 3790 } 3791 3792 /* STATES --------------------------------------------------------- */ 3793 [arc-checkbox-bar-option] { 3794 &:not(:has(:disabled, :checked)) { 3795 &:hover { 3796 ${er}â¢color: var(--arc-color-fg-on-hover-default); 3797 ${er}â¢background: var(--arc-color-bg-hover-default); 3798 ${Xr}â¢color: var(--arc-color-alpha-black-0); 3799 } 3800 } 3801 3802 &:has(:checked) { 3803 ${er}â¢color: var(--arc-color-fg-primary); 3804 ${er}â¢background: var(--arc-color-bg-secondary); 3805 ${Xr}â¢color: var(--arc-color-alpha-black-0); 3806 ${er}â¢fontâ¢weight: var(--arc-font-weight-500); 3807 } 3808 3809 &:has(:disabled) { 3810 ${er}â¢color: var(--arc-color-fg-disabled); 3811 } 3812 3813 &:has(:focus-within:focus-visible) { 3814 ${er}â¢outline: var(${Xr}â¢width) solid var(--arc-color-border-focus); 3815 } 3816 } 3817 3818 /* CORE STYLES ---------------------------------------------------- */ 3819 [arc-checkbox-bar-option] { 3820 flex: 1 1 auto; 3821 display: flex; 3822 position: relative; 3823 } 3824 3825 [arc-checkbox-bar]:not([hidden]) { 3826 font-size: var(--arc-checkbox-bar-font-size, var(${Jr}â¢fontâ¢size)); 3827 display: var(${Jr}â¢display); 3828 gap: var(${Jr}â¢gap); 3829 background: var(${Jr}â¢background); 3830 border-radius: var(${Xr}â¢radius); 3831 padding: 0; 3832 margin: 0; 3833 3834 [arc-checkbox] { 3835 flex: 1; 3836 display: flex; 3837 justify-content: center; 3838 border-radius: var(${Xr}â¢radius); 3839 outline: var(${er}â¢outline, none); 3840 outline-offset: var(${Xr}â¢width); 3841 } 3842 3843 /* INPUT ELEMENT -----------------------------------------------⢠*/ 3844 [arc-input-type=checkbox] { 3845 position: absolute; 3846 appearance: none; 3847 pointer-events: none; 3848 opacity: 0; 3849 } 3850 3851 /* Inter-Component Communication -------------------------------⢠*/ 3852 [arc-label] { 3853 flex: 1; 3854 line-height: var(${er}â¢lineâ¢height); 3855 overflow: hidden; 3856 } 3857 3858 [arc-label-content] { 3859 flex: 1; 3860 display: flex; 3861 align-items: safe center; 3862 justify-content: center; 3863 3864 height: var(${er}â¢size); 3865 min-width: var(${er}â¢size); 3866 3867 border-radius: var(${Xr}â¢radius); 3868 border: var(${Xr}â¢width) solid var(${Xr}â¢color); 3869 background: var(${er}â¢background); 3870 color: var(${er}â¢color); 3871 font-weight: var(${er}â¢fontâ¢weight, unset); 3872 3873 transition-duration: 200ms; 3874 transition-timing-function: ease-out; 3875 transition-property: 3876 border, 3877 background, 3878 color, 3879 font-weight; 3880 3881 &:has([data-element=text]) { 3882 padding: 0 var(${Cc}â¢padding); 3883 } 3884 3885 &:not(:has([data-element=text])) { 3886 padding: 0 var(${zc}â¢padding); 3887 } 3888 } 3889 3890 [arc-icon-text] [data-element] { 3891 min-width: min-content; 3892 overflow: hidden; 3893 overflow-wrap: break-word; 3894 } 3895 } 3896 3897} 3898`,ph=L(na,["hug","fill"]),fh=L(_r,["lg","md"]),mh=({children:a,label:r,icon:e,...o})=>{const t=a||(0,c.jsx)(Yr,{icon:e,text:r});return(0,c.jsx)("li",{"arc-checkbox-bar-option":"","data-is-checked":o?.checked||void 0,children:(0,c.jsx)(bi,{...o,label:t,layout:"fill",useMask:!1})})},bh=({children:a,size:r="lg",layout:e="hug",...o})=>(0,c.jsx)("ul",{...o,"arc-checkbox-bar":"","data-size":r,"data-layout":e,role:"group",children:a});H("ArcCheckboxBar",gh);const $h=i`--arcâ¢menu`,Ha=i`${$h}â¢item`,yh=i` 3899@layer arc-components { 3900 3901 [arc-menu] { 3902 ${Ha}â¢gap: var(${s}â¢8); 3903 ${Ha}â¢fg: inherit; 3904 ${Ha}â¢bg: inherit; 3905 3906 font-size: var(--arc-menu-font-size, var(${s}â¢14)); 3907 list-style: none; 3908 line-height: normal; 3909 3910 display: var(--arc-menu-display, flex); 3911 flex-direction: var(--arc-menu-flex-direction, column); 3912 gap: var(--arc-menu-gap, var(${s}â¢2)); 3913 padding: var(--arc-menu-padding, var(${s}â¢2)); 3914 margin: var(--arc-menu-margin, 0); 3915 3916 outline: var(--arc-menu-outline, none); 3917 } 3918 3919 [arc-menu-item] { 3920 position: relative; 3921 display: var(--arc-menu-item-display, flex); 3922 flex-direction: var(--arc-menu-item-flex-direction, row); 3923 justify-content: var(--arc-menu-item-justify-content, space-between); 3924 align-items: var(--arc-menu-item-align-items, center); 3925 gap: var(--arc-menu-item-gap, var(${Ha}â¢gap)); 3926 3927 background: var(--arc-menu-item-background, var(${Ha}â¢bg)); 3928 color: var(--arc-menu-item-color, var(${Ha}â¢fg)); 3929 padding: var(--arc-menu-item-padding, var(${s}â¢0)); 3930 border-radius: var(--arc-menu-item-border-radius, var(--arc-border-radius-md)); 3931 cursor: var(--arc-menu-item-cursor, default); 3932 outline: var(--arc-menu-item-outline, none); 3933 3934 transition: var(--arc-menu-item-transition, 120ms ease-out); 3935 3936 &:has(> [arc-button=custom]:not([is-disabled])):hover { 3937 ${Ha}â¢bg: var(--arc-color-bg-hover-default); 3938 } 3939 3940 /* Communicates to ArcButton */ 3941 > [arc-button=custom] { 3942 --arc-button-flex: 1; 3943 --arc-button-font-size: 1em; 3944 --arc-button-border: none; 3945 --arc-button-outline-offset: var(${s}â¢2m); 3946 --arc-button-gap: var(--arc-menu-item-gap, var(${Ha}â¢gap)); 3947 --arc-button-transition: none; 3948 --arc-button-opacity: var(--arc-menu-item-opacity, unset); 3949 3950 :is([arc-button-label], [arc-button-content]) { 3951 display: contents; 3952 } 3953 } 3954 } 3955 3956`,xh=a=>[{test:()=>!!a.variant,value:a.variant},{test:()=>!!a.icon&&typeof a.subtext<"u",value:"icon-text-detail"},{test:()=>!!a.icon,value:"icon-text"},{test:()=>!!a.avatar&&typeof a.subtext<"u",value:"user-detail"},{test:()=>!!a.avatar,value:"user"},{test:()=>typeof a.subtext<"u",value:"text-detail"},{test:()=>!0,value:"text"}],kh={divider:"separator","section-label":"presentation","icon-text-detail":"menuitem","icon-text":"menuitem","user-detail":"menuitem",user:"menuitem","text-detail":"menuitem",text:"menuitem"},le={layout:"gutter",variant:"inherit",overflow:"truncate",gapSize:"md",size:"md"},wh=({icon:a,...r})=>
3956{const e=a&&typeof a=="string"?`${a.replace(" fa-fw","")} arc-fw`:a;return{divider:(0,c.jsx)("hr",{}),"section-label":(0,c.jsx)(Yr,{...r,...le,icon:e,size:"sm",isStrong:!0}),"icon-text":(0,c.jsx)(Yr,{...r,...le,icon:e}),"icon-text-detail":(0,c.jsx)(Yr,{...r,...le,icon:e,isStrong:!0}),text:(0,c.jsx)(Yr,{...r,...le}),"text-detail":(0,c.jsx)(Yr,{...r,...le,subtext:r.subtext??"sub",isStrong:!0}),user:(0,c.jsx)(ec,{...r,...le,size:"sm"}),"user-detail":(0,c.jsx)(ec,{...r,...le,size:"md",isStrong:!0})}},Ah=a=>a?.role??kh[no(a)]??"menuitem",no=a=>xh(a)?.find(({test:r})=>r())?.value??"text",$i=a=>r=>wh(r)[a],zh=(a,r,e,o)=>{let t=1,l=a;const n=d=>d>=e?0:d+1,h=d=>d<=0?e:d-1;for(;t<=e;){const d=n(l),v=h(l),u={previous:r==="previous"?v:l,actual:l,next:r==="next"?d:l}[r];if(o(u))return u;l=u,t+=1}return-1},Ch=({items:a,filterText:r,renderItem:e,isVisible:o,...t})=>{const l=(0,y.useRef)(null),n=(0,y.useRef)([]),[h,d]=(0,y.useState)(-1),[v,u]=(0,y.useState)(!1),[p,g]=(0,y.useState)(Math.max(a.length-1,0));(0,y.useEffect)(()=>{o&&l.current&&(n.current=Array.from(l.current.querySelectorAll("[arc-button=custom]")))},[o,a]);const f=(0,y.useCallback)(C=>n.current[C]||null,[]),k=(0,y.useCallback)((C,S)=>{const F=zh(C,S,p,f);d(F),f(F)?.focus()},[p,f]),z=(0,y.useCallback)((C,S)=>()=>{!v&&S&&k(C,"actual")},[v,k]),I={ArrowUp:C=>k(C,"previous"),ArrowDown:C=>k(C,"next"),Home:()=>k(0,"actual"),End:()=>k(p,"actual")},M=C=>S=>{Object.keys(I).includes(S.key)&&(u(!0),S.stopPropagation(),S.preventDefault(),I[S.key](C))},_=(0,y.useMemo)(()=>{const C=r?a.filter(S=>Object.values(S).some(F=>F===r)):a;return g(Math.max(C.length-1,0)),C},[a,r]),E=(0,y.useMemo)(()=>_.map(({itemId:C,role:S,...F},P)=>{const G=no(F)||"",Z=S||Ah(F)||"menuitem",or=P===h;return(0,c.jsx)("li",{"arc-menu-item":G,role:Z,onMouseEnter:z(P,!!F.onClick),children:e?.(F,P,{filterText:r,isCurrent:or})},C)}),[h,r,_,e,z]);return(0,y.useEffect)(()=>{o&&k(-1,"next")},[o,k]),(0,c.jsx)("ul",{...t,ref:l,"arc-menu":"",role:"menu",onKeyDown:M(h),onMouseLeave:()=>d(-1),onMouseMove:()=>u(!1),tabIndex:o?0:-1,children:E})};H("ArcMenu",yh);const yi=a=>{const{startSlot:r,endSlot:e,onClick:o,href:t,target:l,containerProps:n,isDisabled:h,"aria-disabled":d,tooltip:v,...u}=a,p=no(u),g=$i(p),f=d??h,k=p==="divider",z=t||o,I=!k,M=I&&r?"":void 0,_=I&&e?"":void 0,E=C=>{f||(C.currentTarget.closest("[arc-popover]")?.hidePopover(),o?.(C.nativeEvent))};return z?(0,c.jsxs)(Ir,{...n,tooltip:v,href:t,target:l,"aria-disabled":f?"true":void 0,_isCustom:!0,"arc-dropdown-item":p??"","has-start-slot":M,"has-end-slot":_,onClick:E,children:[I&&r,(0,c.jsx)(g,{...u,"is-item-content":"interactive"}),I&&e]}):(0,c.jsxs)("div",{...n,"arc-dropdown-item":p??"","has-start-slot":M,"has-end-slot":_,children:[I&&r,(0,c.jsx)(g,{...u,"is-item-content":"inert"}),I&&e]})},Sh=i`--arcâ¢dropdown`,_h=i`${Sh}â¢menu`,Cr=i`${_h}â¢item`,Eh=i` 3957@layer arc-components { 3958 3959 /* ITEM SETUP ----------------------------------------------------⢠*/ 3960 3961 [arc-dropdown-item] { 3962 ${Cr}â¢padding: var(${m}â¢8) var(${m}â¢12); 3963 ${Cr}â¢minâ¢height: var(${s}â¢36); 3964 ${Cr}â¢gap: var(${m}â¢8); 3965 3966 &[arc-dropdown-item=text-detail] { 3967 ${Cr}â¢minâ¢height: var(${s}â¢48); 3968 } 3969 3970 &[arc-dropdown-item=section-label] { 3971 ${Cr}â¢minâ¢height: var(${s}â¢32); 3972 } 3973 3974 &[arc-dropdown-item=user] { 3975 ${Cr}â¢minâ¢height: var(${s}â¢40); 3976 3977 &:not([has-start-slot]) { 3978 ${Cr}â¢padding: var(${m}â¢8) var(${m}â¢12) var(${m}â¢8) var(${m}â¢10); 3979 } 3980 } 3981 3982 &[arc-dropdown-item=user-detail] { 3983 ${Cr}â¢minâ¢height: var(${s}â¢48); 3984 3985 &:not([has-start-slot]) { 3986 ${Cr}â¢padding: var(${m}â¢8) var(${m}â¢12) var(${m}â¢8) var(${m}â¢6); 3987 } 3988 } 3989 3990 &[arc-dropdown-item=divider] { 3991 ${Cr}â¢minâ¢height: var(${s}â¢8); 3992 ${Cr}â¢padding: 0; 3993 3994 hr { 3995 flex: 1; 3996 border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 3997 height: 0; 3998 margin: 0; 3999 } 4000 } 4001 } 4002 4003 /* DROPDOWN ELEMENTS ---------------------------------------------⢠*/ 4004 4005 [arc-dropdown] { 4006 --arc-popover-width: var(--arc-dropdown-width, auto); 4007 --arc-popover-min-width: var(--arc-dropdown-min-width, 3em); 4008 --arc-popover-max-width: var(--arc-dropdown-max-width, 50em); 4009 --arc-popover-padding: var(--arc-dropdown-padding, 0); 4010 4011 --arc-menu-item-gap: var(${Cr}â¢gap); 4012 --arc-badge-align-self: center; 4013 --arc-badge-count-align-self: center; 4014 } 4015 4016 [arc-dropdown-item] { 4017 flex: 1; 4018 display: flex; 4019 align-items: center; 4020 gap: var(${Cr}â¢gap); 4021 text-align: start; 4022 min-height: var(${Cr}â¢minâ¢height); 4023 4024 &:not([arc-button]) { 4025 padding: var(${Cr}â¢padding); 4026 max-width: 100%; 4027 } 4028 4029 &[arc-button] { 4030 --arc-button-padding: var(${Cr}â¢padding); 4031 --arc-button-min-height: var(${s}â¢40); 4032 } 4033 4034 [is-item-content] { 4035 flex: 1; 4036 } 4037 } 4038 4039} 4040`,xi=(0,y.forwardRef)((a,r)=>(0,c.jsx)(Xe,{...a,ref:r,"arc-dropdown-menu-button":""})),Sc=a=>{const{items:r,renderItem:e,...o}=a,[t,l]=(0,y.useState)(!1),n=(0,y.useCallback)((...d)=>e?.(...d)||(0,c.jsx)(yi,{...d[0]}),[e]),h=d=>{l(d.newState==="open"),a?.onToggle?.(d)};return(0,c.jsx)(eo,{...o,"arc-dropdown":"",variant:"common",onToggle:h,children:(0,c.jsx)(Ch,{"arc-dropdown-menu":"",items:r??[],renderItem:n,isVisible:t})})};xi.displayName="ArcDropdownButton",Sc.Button=xi,Sc.Item=yi,H("ArcDropdownMenu",Eh);const Th=a=>(0,c.jsx)(Ir,{...a,layout:"icon",size:"md",variant:"common",hierarchy:"tertiary"}),dt=i`--arcâ¢link`,ma=i`${dt}â¢fg`,io=i`${ma}â¢hover`,lo=i`${ma}â¢disabled`,_c=i`${dt}â¢outline`,ki=i`${_c}â¢size`,Ec=i`${_c}â¢offset`,Ih=i`${dt}â¢cursor`,so=i`${dt}â¢focusâ¢color`,jh=i` 4041@layer arc-components { 4042${cd} 4043 4044[arc-link] { 4045 4046 /* VARIANTS ------------------------------------------------------⢠*/ 4047 4048 &[data-variant=inherit] { /* @default */ 4049 ${ma}: currentcolor; 4050 ${io}: color-mix(in srgb, currentcolor, transparent 38.75%); 4051 ${lo}: color-mix(in srgb, currentcolor, transparent 70%); 4052 4053 ${so}: var(--arc-color-border-focus); 4054 } 4055 4056 &[data-variant=primary] { 4057 ${ma}: var(--arc-color-fg-primary); 4058 ${io}: var(--arc-color-fg-secondary); 4059 ${lo}: var(--arc-color-fg-disabled); 4060 ${so}: var(--arc-color-border-focus); 4061 } 4062 4063 &[data-variant=secondary] { 4064 ${ma}: var(--arc-color-fg-secondary); 4065 ${io}: var(--arc-color-fg-primary); 4066 ${lo}: var(--arc-color-fg-disabled); 4067 ${so}: var(--arc-color-border-focus); 4068 } 4069 4070 /* @deprecated */ 4071 &[data-variant=inverse] { 4072 ${ma}: var(--arc-color-fg-on-mono-inverse); 4073 ${io}: var(--arc-link-fg-hover-inverse); 4074 ${lo}: var(--arc-link-fg-disabled-inverse); 4075 ${so}: var(--arc-link-focus-disabled-inverse); 4076 } 4077 4078 & { 4079 ${ki}: 0.125em; /* 2px */ 4080 ${Ec}: 0.0625em; /* 1px */ 4081 } 4082 4083 4084 /* STATES --------------------------------------------------------⢠*/ 4085 4086 &:not([data-is-disabled]):hover { 4087 ${ma}: var(--arc-link-color-hover, var(${io})); 4088 } 4089 4090 &:where(:focus, :focus-within):focus-visible { 4091 ${_c}: var(${ki}) solid var(--arc-link-color-focus, var(${so})); 4092 ${Ec}: var(${Ec}); 4093 4094 * { 4095 outline: none; 4096 } 4097 } 4098 4099 &[data-is-disabled] { 4100 ${ma}: var(--arc-link-color-disabled, var(${lo})); 4101 ${Ih}: not-allowed; 4102 } 4103 4104 4105 & { 4106 4107 /* Inter-Component Communication -------------------------------⢠*/ 4108 --arc-icon-color: var(--arc-link-color, var(${ma})); /** ArcIcon color */ 4109 4110 } 4111 4112} 4113 4114 4115/* CORE STYLES ------------------------------------------------------ */ 4116 4117[arc-link] { 4118 color: var(--arc-link-color, var(${ma})); 4119 border-radius: var(--arc-border-radius-sm); /* for focus outline */ 4120 text-decoration: var(--arc-link-text-decoration, underline); 4121 4122 [data-element=icon] { 4123 text-decoration: none; 4124 } 4125 4126 [data-element=text] { 4127 text-decoration: var(--arc-link-text-decoration, underline); 4128 text-decoration-color: currentcolor; 4129 } 4130} 4131 4132} 4133`,Lh=L(lr,["inherit","primary","secondary","inverse"]),Rh=({children:a,layout:r="gutter",size:e="inherit",variant:o="inherit",tag:t="a",href:l,icon:n,text:h,overflow:d,iconSize:v,gapSize:u,isFlipped:p,isDisabled:g,...f})=>
4133(0,c.jsx)(t,{...f,href:g?void 0:l,"arc-link":"","data-variant":o,"aria-disabled":g,"data-is-disabled":g?"":void 0,children:a||(0,c.jsx)(Yr,{icon:n,text:h,overflow:d,iconSize:v,gapSize:u,size:e,layout:r,isFlipped:p})});H("ArcLink",jh);const Mh=[...Da],Bh=L(lr,["common"]),Ph=L(lr,["common","critical"]),Oh=L(lr,["common","brand","info","success","warning","error","processing"]),Dh=["auto","dark","light","none"],Nh=["auto","all","top-bottom","left-right","left-right-top","left-right-bottom","top-bottom-left","top-bottom-right","none"],Fh=L(_r,["xl","lg","md","sm","custom","fullscreen"]),Hh=["cancel","escape","outside","button:dismiss","button:back","button:primary","button:secondary","button:tertiary","confirm:discard","confirm:cancel"],Vh=i`--arcâ¢buttonâ¢bar`,ho=i`${Vh}â¢axis`,Uh=i` 4134@layer arc-components { 4135 4136 [arc-button-bar=horizontal] { 4137 ${ho}: row; 4138 4139 &[is-flipped] { 4140 ${ho}: row-reverse; 4141 } 4142 } 4143 4144 [arc-button-bar=vertical] { 4145 ${ho}: column; 4146 4147 &[is-flipped] { 4148 ${ho}: column-reverse; 4149 } 4150 } 4151 4152 [arc-button-bar] { 4153 flex: var(--arc-button-bar-flex, 1); 4154 display: var(--arc-button-bar-display, flex); 4155 flex-direction: var(--arc-button-bar-flex-direction, var(${ho})); 4156 align-items: var(--arc-button-bar-align-items, center); 4157 justify-content: var(--arc-button-bar-justify-content, flex-end); 4158 gap: var(--arc-button-bar-gap, var(--arc-space-1)); 4159 padding: var(--arc-button-bar-padding, 0); 4160 margin: 0; 4161 } 4162 4163} 4164`,Tc=({children:a,...r})=>{const{Element:e="menu",orientation:o="horizontal",isFlipped:t=!1,...l}=r;return(0,c.jsx)(e,{...l,"arc-button-bar":o,"is-flipped":t?"":void 0,role:l.role??"group",children:a})};H("ArcButtonBar",Uh);const Ic=a=>a?.matches(":modal"),jc=(a,r)=>r.target===a,Wh=(a,r)=>r.clientX<a.left||r.clientX>a.right||r.clientY<a.top||r.clientY>a.bottom,vo=({modalRef:a,shouldConfirm:r,setIsConfirming:e,onCloseOverride:o=void 0})=>(t,l)=>n=>{if(n?.preventDefault?.(),n?.stopPropagation?.(),!a?.current){l?.(n);return}if(o){o(t,n,a.current),l?.(n);return}if(r&&t!=="confirm:discard"){e?.(!0);return}a.current?.close(t),e?.(!1),l?.(n)},Lc=({modalRef:a,shouldConfirm:r,setIsConfirming:e,onClose:o,onToggle:t})=>{(0,y.useEffect)(()=>{const l=a.current;if(!l)return;const n=d=>{Ic(l)&&jc(l,d)&&(r?(d.preventDefault(),d.stopPropagation(),e?.(!0)):o?.("outside",d))},h=d=>{jc(l,d)&&(e?.(!1),o?.(l.returnValue,d),t?.(!1,d))};return l.addEventListener("close",h),l.addEventListener("cancel",n),()=>{l.removeEventListener("close",h),l.removeEventListener("cancel",n)}},[a,r,e,o,t])},Rc=({modalRef:a,isOpen:r,isTopLayer:e})=>{(0,y.useEffect)(()=>{const o=a.current;o&&(r&&!o.open&&(e?o.showModal():o.show()),!r&&o.open&&o.close())},[r,e])},Mc=({modalRef:a,isOpen:r,autoFocusId:e})=>{(0,y.useEffect)(()=>{const o=a.current;if(!o||!e||!r)return;const t=o.querySelector(`#${e}`);if(!t||!(t instanceof HTMLElement))return;const l=setTimeout(()=>{t.focus()},0);return()=>clearTimeout(l)},[a,e,r])},wi=(a,r)=>(typeof a.composedPath=="function"?a.composedPath():[]).includes(r)||a.target instanceof Node&&r.contains(a.target),Ai=({modalRef:a,isOpen:r=!1,closeOnBackdrop:e=!1,attemptCloseModal:o})=>{(0,y.useEffect)(()=>{const t=a.current;if(!t||!r||!e||!Ic(t))return;let l=!1;const n=d=>{l=wi(d,t)},h=d=>{if(l||wi(d,t))return;const v=t.getBoundingClientRect();Wh(v,d)&&o("outside")(d)};return document.documentElement?.addEventListener("pointerdown",n,{capture:!0}),document.documentElement?.addEventListener("click",h,{capture:!0}),()=>{document.documentElement?.removeEventListener("pointerdown",n,{capture:!0}),document.documentElement?.removeEventListener("click",h,{capture:!0})}},[a,o,r,e])},zi=({modalRef:a,isOpen:r=!1,closeOnEsc:e=!1,closedBy:o="closerequest",attemptCloseModal:t})=>{(0,y.useEffect)(()=>{const l=a.current;if(!l||!r||!e||!Ic(l))return;const n=h=>{if(h.key==="Escape"&&jc(l,h)){if(o==="none"){h.stopPropagation(),h.preventDefault();return}t("escape")(h)}};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[a,t,r,e,o])},Bc=a=>(0,c.jsx)(Ir,{"aria-label":"Dismiss",text:"Dismiss",...a,variant:"common",hierarchy:"tertiary",icon:"fa-regular fa-xmark-large fa-fw",layout:"icon",shape:"square",size:"md"}),Pc=a=>(0,c.jsx)("div",{...a,"arc-modal-content":""}),Ci=({showDivider:a,...r})=>(0,c.jsx)("header",{...r,"arc-modal-header":"","has-divider":a?"":void 0}),Gh=({glyph:a,variant:r="common"})=>(0,c.jsx)(c.Fragment,{children:a&&(0,c.jsx)(D,{icon:a,"arc-modal-glyph":"","arc-icon-status":r})}),Oc=a=>{const{titleContent:r,TitleElement:e="h2",...o}=a;return(0,c.jsx)(c.Fragment,{children:r&&(0,c.jsx)(e,{...o,"arc-modal-title":"",children:typeof r=="string"?r:(0,c.jsx)(Yr,{...r})})})},Zh=({message:a,...r})=>(0,c.jsx)(c.Fragment,{children:a&&(0,c.jsx)("p",{...r,"arc-modal-message":"",children:a})}),Dc=({tag:a="section",padding:r,...e})=>(0,c.jsx)(a,{...e,"arc-modal-body":"","data-padding":r==="auto"?void 0:r}),Nc=({showDivider:a,...r})=>(0,c.jsx)("footer",{...r,"arc-modal-footer":"","has-divider":a?"":void 0}),Kh=a=>r=>{if(r.key==="Escape"){if(a==="none"){r.stopPropagation(),r.preventDefault();return}return"escape"}},j=i`--arcâ¢modal`,ze=i`${j}â¢layout`,Yh=i`${j}â¢header`,ht=i`${j}â¢body`,uo=i`${j}â¢footer`,Si=i`${j}â¢fg`,vt=i`${j}â¢bg`,ba=i`${j}â¢backdrop`,Sr=i`${j}â¢transition`,Ce=i`${Yh}â¢padding`,X=i`${ht}â¢padding`,Va=i`${uo}â¢padding`,qh=i` 4165 ${j}â¢fontâ¢size: var(${s}â¢14); 4166 ${j}â¢gap: var(${m}â¢16); 4167 4168 ${ze}â¢rows: auto 1fr auto; 4169 ${ze}â¢columns: auto; 4170 4171 &:not(:has([arc-modal-footer])):has([arc-modal-header]) { 4172 ${ze}â¢rows: auto 1fr; 4173 } 4174
4175 &:not(:has([arc-modal-header])):has([arc-modal-footer]) { 4176 ${ze}â¢rows: 1fr auto; 4177 } 4178 4179 &:not(:has([arc-modal-header])):not(:has([arc-modal-footer])) { 4180 ${ze}â¢rows: auto; 4181 } 4182 4183 ${Si}: var(--arc-color-fg-primary); 4184 ${vt}: var(--arc-color-bg-primary); 4185 ${j}â¢border: none; 4186 ${j}â¢borderâ¢radius: var(--arc-border-radius-lg); 4187 ${j}â¢divider: var(${s}â¢1) solid var(--arc-color-border-mid); 4188 4189 ${j}â¢maxâ¢width: calc(100vw - var(${m}â¢32)); 4190 ${j}â¢minâ¢width: unset; 4191 ${j}â¢width: auto; 4192 4193 ${j}â¢maxâ¢height: calc(100vh - var(${m}â¢32)); 4194 ${j}â¢minâ¢height: unset; 4195 ${j}â¢height: max-content; 4196 4197 ${Sr}â¢y: 1vh; 4198 ${Sr}â¢yâ¢start: 2.5vh; 4199 ${Sr}â¢scale: 1; 4200 ${Sr}â¢scaleâ¢start: 0.975; 4201 4202 ${ht}â¢textâ¢align: unset; 4203 ${uo}â¢justifyâ¢content: flex-end; 4204 4205 ${ba}â¢bg: var(--arc-color-overlay-stark); 4206 ${ba}â¢pointerâ¢events: none; 4207 ${ba}â¢cursor: default; 4208 4209 &:where([is-backdrop=light]) { 4210 ${ba}â¢bg: var(--arc-color-overlay-subtle); 4211 } 4212 4213 &:where([is-backdrop=dark]) { 4214 ${ba}â¢bg: var(--arc-color-overlay-stark); 4215 } 4216 4217 &:where([is-backdrop=none]) { 4218 ${ba}â¢bg: transparent; 4219 } 4220`,Jh=i` 4221 &[data-size=sm] { 4222 ${j}â¢width: 28em; 4223 } 4224 4225 &[data-size=md] { 4226 ${j}â¢width: 40em; 4227 } 4228 4229 &[data-size=lg] { 4230 ${j}â¢width: 50em; 4231 } 4232 4233 &[data-size=xl] { 4234 ${j}â¢width: 64em; 4235 } 4236 4237 &[data-size=custom] { 4238 ${j}â¢width: auto; 4239 ${j}â¢height: max-content; 4240 } 4241 4242 &[data-size=fullscreen] { 4243 ${j}â¢width: 100vw; 4244 ${j}â¢height: 100vh; 4245 ${j}â¢minâ¢width: 100vw; 4246 ${j}â¢minâ¢height: 100vh; 4247 ${j}â¢maxâ¢width: 100vw; 4248 ${j}â¢maxâ¢height: 100vh; 4249 ${j}â¢borderâ¢radius: var(--arc-border-radius-none); 4250 4251 ${Sr}â¢y: 0; 4252 ${Sr}â¢yâ¢start: 0; 4253 ${Sr}â¢scale: 1.125; 4254 ${Sr}â¢scaleâ¢start: 1.125; 4255 } 4256`,Xh=i` 4257 &[is-confirm] { 4258 ${uo}â¢justifyâ¢content: flex-end; 4259 4260 &[is-confirm=critical] [arc-modal-title] { 4261 --arc-icon-text-icon-color: var(--arc-color-fg-critical-mid); 4262 } 4263 } 4264 4265 &[is-alert] { 4266 ${ht}â¢textâ¢align: center; 4267 ${uo}â¢justifyâ¢content: center; 4268 4269 ${X}â¢blockâ¢start: var(${m}â¢40); 4270 ${X}â¢blockâ¢end: var(${m}â¢20); 4271 4272 ${Va}â¢blockâ¢start: var(${m}â¢12); 4273 ${Va}â¢blockâ¢end: var(${m}â¢40); 4274 4275 ${j}â¢glyphâ¢size: var(${s}â¢48); 4276 4277 [arc-modal-spinner] { 4278 --arc-spinner-circle-opacity: 9.8%; /* 9.8% = neutral-200 on white */ 4279 --arc-spinner-size: var(${j}â¢glyphâ¢size); 4280 } 4281 4282 [arc-modal-glyph] { 4283 --arc-icon-display: flex; 4284 --arc-icon-size: var(${j}â¢glyphâ¢size); 4285 --arc-icon-height: var(--arc-icon-size); 4286 --arc-icon-max-height: var(--arc-icon-size); 4287 } 4288 4289 [arc-modal-body] { 4290 display: flex; 4291 flex-direction: column; 4292 align-items: center; 4293 justify-content: center; 4294 gap: var(${m}â¢12); 4295 } 4296 } 4297 4298 &[is-top-layer] { 4299 inset: var(--arc-modal-inset, 50% auto auto 50%); 4300 translate: var(--arc-modal-translate, -50% -50%); 4301 4302 /* 4303 * ArcSelect Issue: 4304 * Avoid "translate"/"transform" on the <dialog> itself â Chrome misplaces 4305 * native base-select pickers (::picker(select)) when an ancestor is transformed. 4306 * 4307 * Center using inset+auto margins instead. Consumers can customize placement via 4308 * --arc-modal-inset / --arc-modal-margin. 4309 */ 4310 @supports (appearance: base-select) { 4311 &:has([arc-select]) { 4312 --arc-modal-inset: 0; 4313 --arc-modal-translate: none; 4314 margin: var(--arc-modal-margin, auto); 4315 } 4316 } 4317 } 4318 4319 &:not([is-top-layer]) { 4320 z-index: var(--arc-modal-z-index, 1000); 4321 } 4322`,Qh=i` 4323 [arc-modal-content] { 4324 &:has([arc-modal-header]) { 4325 ${X}â¢blockâ¢start: var(${m}â¢10); 4326 } 4327 4328 &:has([arc-modal-footer]) { 4329 ${X}â¢blockâ¢end: var(${m}â¢10); 4330 } 4331 4332 &:has([arc-modal-header][has-divider]) { 4333 ${Ce}â¢blockâ¢end: var(${m}â¢20); 4334 ${X}â¢blockâ¢start: var(${m}â¢20); 4335 } 4336 4337 &:has([arc-modal-footer][has-divider]) { 4338 ${X}â¢blockâ¢end: var(${m}â¢20); 4339 ${Va}â¢blockâ¢start: var(${m}â¢12); 4340 ${Va}â¢blockâ¢end: var(${m}â¢12); 4341 } 4342 4343 &:has([arc-modal-body][data-padding=top-bottom]) { 4344 ${X}â¢inlineâ¢start: 0; 4345 ${X}â¢inlineâ¢end: 0; 4346 } 4347 4348 &:has([arc-modal-body][data-padding=left-right]) { 4349 ${X}â¢blockâ¢start: 0; 4350 ${X}â¢blockâ¢end: 0; 4351 } 4352 4353 &:has([arc-modal-body][data-padding=left-right-top]) { 4354 ${X}â¢blockâ¢end: 0; 4355 } 4356 4357 &:has([arc-modal-body][data-padding=left-right-bottom]) { 4358 ${X}â¢blockâ¢start: 0; 4359 } 4360 4361 &:has([arc-modal-body][data-padding=top-bottom-left]) { 4362 ${X}â¢inlineâ¢end: 0; 4363 } 4364 4365 &:has([arc-modal-body][data-padding=top-bottom-right]) { 4366 ${X}â¢inlineâ¢start: 0; 4367 } 4368 4369 &:has([arc-modal-body][data-padding=all]) { 4370 ${X}â¢blockâ¢start: var(${m}â¢20); 4371 ${X}â¢inlineâ¢end: var(${m}â¢24); 4372 ${X}â¢blockâ¢end: var(${m}â¢20); 4373 ${X}â¢inlineâ¢start: var(${m}â¢24); 4374 } 4375 4376 &:has([arc-modal-go-back]) { 4377 ${Ce}â¢inlineâ¢start: var(${m}â¢20); 4378 } 4379 4380 ${Ce}: 4381 var(${m}â¢20) 4382 var(${m}â¢24) 4383 var(${Ce}â¢blockâ¢end, var(${m}â¢10)) 4384 var(${Ce}â¢inlineâ¢start, var(${m}â¢24)); 4385 4386 ${X}: 4387 var(${X}â¢blockâ¢start, var(${m}â¢20)) 4388 var(${X}â¢inlineâ¢end, var(${m}â¢24)) 4389 var(${X}â¢blockâ¢end, var(${m}â¢20)) 4390 var(${X}â¢inlineâ¢start, var(${m}â¢24)); 4391 4392 ${Va}: 4393 var(${Va}â¢blockâ¢start, var(${m}â¢10)) 4394 var(${m}â¢24) 4395 var(${Va}â¢blockâ¢end, var(${m}â¢20)) 4396 var(${m}â¢24); 4397 4398 &:has([arc-modal-body][data-padding=none]) { 4399 ${X}: 0; 4400 } 4401 } 4402`,r0=i` 4403 [arc-modal] { 4404 transition-behavior: allow-discrete, smooth; 4405 transition-duration: var(--arc-modal-transition-duration, 240ms); 4406 transition-property: display, opacity, transform; 4407 transition-timing-function: ease-out; 4408 4409 &::after { 4410 transition: inherit; 4411 } 4412 4413 &::backdrop { 4414 transition: inherit; 4415 } 4416 } 4417 4418 @supports (overlay: auto) { 4419 [arc-modal] { 4420 transition-behavior: allow-discrete; 4421 transition-property: display, overlay, opacity, transform; 4422 } 4423 } 4424`,a0=i` 4425 [arc-modal] { 4426 display: none; 4427 opacity: 0; 4428 transform: 4429 translateY(var(${Sr}â¢y)) 4430 scale(var(${Sr}â¢scale)); 4431 4432 &:has([arc-select]) { 4433 transform: none; 4434 } 4435 4436 /* ArcSelect Issue */ 4437 @supports (appearance: base-select) { 4438 &:has([arc-select]) { 4439 transform: none; 4440 } 4441 } 4442 4443 &::after { 4444 opacity: 0; 4445 } 4446 4447 &::backdrop { 4448 opacity: 0; 4449 } 4450 4451 &[open] { 4452 display: grid; 4453 opacity: 1; 4454 transform: 4455 translateY(0) 4456 scale(1); 4457 4458 /* ArcSelect Issue */ 4459 @supports (appearance: base-select) { 4460 &:has([arc-select]) { 4461 transform: none; 4462 } 4463 } 4464 } 4465 4466 &[open]::after { 4467 opacity: 1; 4468 } 4469 4470 &[open]::backdrop { 4471 opacity: 1; 4472 } 4473 } 4474 4475 @starting-style { 4476 [arc-modal][open] { 4477 opacity: 0; 4478 transform: 4479 translateY(var(${Sr}â¢yâ¢start)) 4480 scale(var(${Sr}â¢scaleâ¢start)); 4481 4482 /* ArcSelect Issue */ 4483 @supports (appearance: base-select) { 4484 &:has([arc-select]) { 4485 transform: none; 4486 } 4487 } 4488 } 4489 4490 [arc-modal][open]::after { 4491 opacity: 0; 4492 } 4493 4494 [arc-modal][open]::backdrop { 4495 opacity: 0; 4496 } 4497 } 4498`,Fc=i` 4499@layer arc-components { 4500 4501 /* SETUP ---------------------------------------------------------⢠*/ 4502 4503 [arc-modal] { 4504 ${qh} 4505 ${Jh} 4506 ${Xh} 4507 ${Qh} 4508 } 4509 4510 /* REDUCED MOTION ------------------------------------------------⢠*/ 4511 4512 @media (prefers-reduced-motion: reduce) { 4513 [arc-modal] { 4514 ${Sr}â¢y: 0; 4515 ${Sr}â¢scale: 1; 4516 ${Sr}â¢yâ¢start: 0; 4517 ${Sr}â¢scaleâ¢start: 1; 4518 } 4519 } 4520 4521 /* CORE ----------------------------------------------------------⢠*/ 4522 4523 [arc-modal] { 4524 will-change: opacity, transform; 4525 contain: layout style paint; 4526 4527 padding: 0; 4528 color: var(--arc-modal-color, var(${Si})); 4529 background: var(--arc-modal-background, var(${vt})); 4530 border: var(--arc-modal-border, var(${j}â¢border)); 4531 border-radius: var(--arc-modal-border-radius, var(${j}â¢borderâ¢radius)); 4532 box-shadow: var(--arc-modal-box-shadow, var(--arc-shadow-lg)); 4533 outline: var(--arc-modal-outline, none); 4534 4535 width: var(--arc-modal-width, var(${j}â¢width)); 4536 height: var(--arc-modal-height, var(${j}â¢height)); 4537 min-width: var(--arc-modal-min-width, var(${j}â¢minâ¢width)); 4538 min-height: var(--arc-modal-min-height, var(${j}â¢minâ¢height)); 4539 max-width: var(--arc-modal-max-width, var(${j}â¢maxâ¢width)); 4540 max-height: var(--arc-modal-max-height, var(${j}â¢maxâ¢height)); 4541 4542 &::backdrop { 4543 will-change: opacity; 4544 contain: layout style paint; 4545 4546 background: var(--arc-modal-backdrop-background, var(${ba}â¢bg)); 4547 pointer-events: var(${ba}â¢pointerâ¢events, none); 4548 cursor: var(${ba}â¢cursor, default); 4549 } 4550 4551 [arc-modal-content] { 4552 font-size: var(--arc-modal-font-size, var(${j}â¢fontâ¢size)); 4553 display: grid; 4554 grid-template-rows: var(--arc-modal-layout-rows, var(${ze}â¢rows)); 4555 grid-template-columns: var(--arc-modal-layout-columns, auto); 4556 overflow: hidden; 4557 position: relative; 4558 z-index: 1; 4559 4560 /* Force remove margin from controlled title and message elements */ 4561 :is([arc-modal-title], [arc-modal-message]) { margin: 0 !important; } 4562 } 4563 4564 [arc-modal-header] { 4565 position: relative; 4566 z-index: 1; 4567 4568 display: flex; 4569 align-items: var(--arc-modal-header-align-items, unset); 4570 justify-content: space-between; 4571 gap: var(--arc-modal-header-gap, var(${j}â¢gap)); 4572 4573 padding: var(${Ce}); 4574 background: var(--arc-modal-header-background, var(${vt})); 4575 max-width: 100%; 4576
4577 &:where([has-divider]) { 4578 border-bottom: var(--arc-modal-header-divider, var(${j}â¢divider)); 4579 } 4580 4581 :where([header-slot]) { 4582 display: flex; 4583 align-items: inherit; 4584 gap: inherit; 4585 } 4586 4587 :where([header-slot=content]) { 4588 flex: 1; 4589 align-self: flex-start; 4590 } 4591 4592 :where([header-slot=dismiss]) { 4593 margin: var(${m}â¢4m) var(${m}â¢8m) var(${m}â¢4m) var(${m}â¢4m); 4594 } 4595 4596 :where([header-slot=go-back]) { 4597 margin: var(${m}â¢4m) 0 var(${m}â¢4m) var(${m}â¢4m); 4598 } 4599 } 4600 4601 [arc-modal-title] { 4602 --arc-icon-text-gap: var(${m}â¢8); 4603 --arc-icon-text-line-height: normal; 4604 4605 [data-element=subtext] { 4606 font-family: var(--arc-font-family-body); 4607 font-weight: var(--arc-font-weight-body); 4608 font-size: var(--arc-font-size-body-md); 4609 color: inherit; 4610 margin-top: var(${m}â¢4); 4611 } 4612 } 4613 4614 [arc-modal-body] { 4615 padding: var(${X}); 4616 overflow: auto; 4617 overscroll-behavior: var(--arc-modal-overscroll-behavior, contain); 4618 min-height: var(--arc-modal-body-min-height, 3em); 4619 text-align: var(--arc-modal-body-text-align, var(${ht}â¢textâ¢align)); 4620 } 4621 4622 [arc-modal-footer] { 4623 position: relative; 4624 z-index: 1; 4625 4626 display: flex; 4627 flex-direction: var(--arc-modal-footer-flex-direction, unset); 4628 align-items: var(--arc-modal-footer-align-items, center); 4629 justify-content: var(--arc-modal-footer-justify-content, var(${uo}â¢justifyâ¢content)); 4630 gap: var(--arc-modal-footer-gap, var(${j}â¢gap)); 4631 4632 background: var(--arc-modal-footer-background, var(${vt})); 4633 padding: var(--arc-modal-footer-padding, var(${Va})); 4634 max-width: 100%; 4635 4636 &[has-divider] { 4637 border-top: var(--arc-modal-footer-divider, var(${j}â¢divider)); 4638 } 4639 4640 [footer-slot=content] { 4641 flex: var(--arc-modal-footer-content-flex, none); 4642 display: var(--arc-modal-footer-content-display, flex); 4643 gap: inherit; 4644 } 4645 } 4646 4647 [arc-modal-dismiss] { 4648 position: var(--arc-modal-dismiss-position, absolute); 4649 inset: var(--arc-modal-dismiss-inset, var(${m}â¢16) var(${m}â¢16) auto auto); 4650 width: var(--arc-modal-dismiss-width, auto); 4651 overflow: visible; 4652 z-index: 2; 4653 } 4654 4655 /* Nested confirm modal */ 4656 &:not([is-top-layer]):has([arc-modal][is-confirm][open])::after { 4657 content: ''; 4658 position: absolute; 4659 inset: 0; 4660 background: var(--arc-modal-backdrop-background, var(${ba}â¢bg)); 4661 z-index: var(--arc-modal-confirm-z-index, 2); 4662 } 4663 4664 /* Nested modals */ 4665 [arc-modal] { 4666 --arc-modal-min-width: var(--arc-modal-nested-min-width, none); 4667 --arc-modal-min-height: var(--arc-modal-nested-min-height, none); 4668 } 4669 4670 [arc-modal][is-alert] { 4671 --arc-modal-min-width: var(--arc-modal-nested-alert-min-width, none); 4672 --arc-modal-min-height: var(--arc-modal-nested-alert-min-height, none); 4673 } 4674 4675 [arc-modal][is-confirm] { 4676 --arc-modal-width: var(--arc-modal-confirm-width, 25em); 4677 --arc-modal-height: var(--arc-modal-confirm-height, auto); 4678 --arc-modal-min-width: var(--arc-modal-confirm-min-width, none); 4679 --arc-modal-min-height: var(--arc-modal-confirm-min-height, none); 4680 --arc-modal-max-width: var(--arc-modal-confirm-max-width, calc(100% - var(${m}â¢32))); 4681 --arc-button-bar-flex: none; 4682 4683 inset: var(--arc-modal-confirm-inset, 50% auto auto 50%); 4684 translate: var(--arc-modal-confirm-translate, -50% -50%); 4685 z-index: var(--arc-modal-confirm-z-index, 3); 4686 4687 /* ArcSelect Issue */ 4688 @supports (appearance: base-select) { 4689 &:has([arc-select]) { 4690 --arc-modal-confirm-inset: 0; 4691 --arc-modal-confirm-translate: none; 4692 margin: var(--arc-modal-confirm-margin, auto); 4693 } 4694 } 4695 } 4696 } 4697 4698 ${r0} 4699 ${a0} 4700`,Ua={variant:"common",backdropColor:"auto",message:"You have unsaved changes. Discard them?",onCloseOverride:void 0,isTopLayer:!0,isInverse:!1,scheme:"auto"},_i=({children:a,headerProps:r,bodyProps:e,footerProps:o,...t})=>{const l=(0,y.useRef)(null),{isOpen:n,autoFocusId:h,isTopLayer:d=Ua.isTopLayer,isInverse:v=Ua.isInverse,scheme:u=Ua.scheme,backdropColor:p=Ua.backdropColor,variant:g=Ua.variant,message:f=Ua.message,onCloseOverride:k=Ua.onCloseOverride,onConfirmDiscard:z,onConfirmCancel:I,...M}=t,{slotStart:_,TitleElement:E,titleContent:C,slotEnd:S,...F}=r||{},{primaryButton:P,secondaryButton:G,...Z}=o||{},or=!!(C||_||S),sr=u==="auto"?void 0:u,Q=!!k,dr=nr=>
4700Q?k?.("confirm:discard",nr,l.current??void 0):z?.("confirm:discard",nr),xr=nr=>Q?k?.("confirm:cancel",nr,l.current??void 0):I?.("confirm:cancel",nr);Lc({modalRef:l,onClose:k}),Rc({modalRef:l,isOpen:n,isTopLayer:d}),Mc({modalRef:l,isOpen:n,autoFocusId:h});const vr=nr=>{xr(nr),G?.onClick?.(nr)},ea=nr=>{dr(nr),P?.onClick?.(nr)};return(0,c.jsx)("dialog",{...M,ref:l,"arc-modal":"","arc-scheme":v?"inverse":sr,"is-confirm":g||"","is-inverse":v?"":void 0,"is-top-layer":d?"":void 0,"is-backdrop":p==="auto"?void 0:p,"data-size":"sm",closedby:"none",onKeyDown:Kh("none"),children:(0,c.jsxs)(Pc,{children:[or&&(0,c.jsxs)(Ci,{...F,children:[_&&(0,c.jsx)("div",{"header-slot":"start",children:_}),(0,c.jsx)("div",{"header-slot":"content",children:(0,c.jsx)(Oc,{TitleElement:E,titleContent:C})}),S&&(0,c.jsx)("div",{"header-slot":"end",children:S})]}),(0,c.jsx)(Dc,{...e,children:a||f&&(0,c.jsx)("p",{style:{margin:0},children:f})}),(0,c.jsx)(Nc,{...Z,children:(0,c.jsxs)(Tc,{children:[(0,c.jsx)(Ir,{...G,text:G?.text||"Cancel",variant:"common",hierarchy:"secondary",isInverse:v,onClick:vr}),(0,c.jsx)(Ir,{...P,text:P?.text||"Discard",variant:g??"common",hierarchy:"primary",isInverse:v,onClick:ea})]})})]})})};H("ArcModalConfirm",Fc);const Rr={size:"md",variant:"common",backdropColor:"auto",isTopLayer:!0,isInverse:!1,scheme:"auto",showDismiss:!0,closeOnEsc:!0,closeOnBackdrop:!1,hasConfirmFlow:!1,hasUnsavedChanges:!1,onCloseOverride:void 0,bypassConfirmWhen:{didPressEscapeKey:!1,didClickBackdrop:!1,didClickGoBackButton:!1,didClickDismissButton:!1,didClickPrimaryButton:!1,didClickSecondaryButton:!1,didClickTertiaryButton:!1},headerProps:{showDivider:!1},bodyProps:{padding:"auto"},footerProps:{showDivider:!1}},e0=({children:a,confirmProps:r,headerProps:e,bodyProps:o,dismissProps:t,footerProps:l,...n})=>{const h=(0,y.useRef)(null),[d,v]=(0,y.useState)(!1),{isOpen:u,autoFocusId:p,isTopLayer:g=Rr.isTopLayer,isInverse:f=Rr.isInverse,scheme:k=Rr.scheme,backdropColor:z=Rr.backdropColor,hasConfirmFlow:I=Rr.hasConfirmFlow,hasUnsavedChanges:M=Rr.hasUnsavedChanges,onCloseOverride:_=Rr.onCloseOverride,bypassConfirmWhen:E=Rr.bypassConfirmWhen??{},size:C=Rr.size,closeOnBackdrop:S=Rr.closeOnBackdrop,closeOnEsc:F=Rr.closeOnEsc,showDismiss:P=Rr.showDismiss,onActionError:G,onClose:Z,onToggle:or,width:sr,height:Q,style:dr,...xr}=n,{showGoBack:vr,goBackProps:ea,slotStart:nr,TitleElement:Fr,titleContent:Hr,slotEnd:oa,showDivider:La=Rr.headerProps?.showDivider,...Ra}=e??{},{slotStart:ta,primaryButton:ca,secondaryButton:V,tertiaryButton:kr,showDivider:ir=Rr.footerProps?.showDivider,...Mr}=l??{},ka=!!(vr||Hr||nr||oa),wa=!!(ca||V||kr),xo=!!(wa||ta),Aa=!!(I&&M),Wa=F?"closerequest":"none",Et=k==="auto"?void 0:k,{didPressEscapeKey:ko,didClickBackdrop:de,didClickGoBackButton:tn,didClickDismissButton:wo,didClickPrimaryButton:cn,didClickSecondaryButton:nn,didClickTertiaryButton:Tt}=E,Ga=vo({modalRef:h,shouldConfirm:Aa,setIsConfirming:v,onCloseOverride:_});Lc({modalRef:h,shouldConfirm:Aa,setIsConfirming:v,onClose:Z,onToggle:or}),Rc({modalRef:h,isOpen:u,isTopLayer:g}),Mc({modalRef:h,isOpen:u,autoFocusId:p}),Ai({modalRef:h,isOpen:u,closeOnBackdrop:S,attemptCloseModal:de?vo({modalRef:h,shouldConfirm:Aa&&!de,setIsConfirming:v}):Ga}),zi({modalRef:h,isOpen:u,closeOnEsc:F,closedBy:Wa,attemptCloseModal:ko?vo({modalRef:h,shouldConfirm:Aa&&!ko,setIsConfirming:v}):Ga});const It=()=>v(!1),ln=(Ba,Pa)=>Ga(Ba)(Pa),Ma=(Ba,Pa,je)=>async he=>{he?.preventDefault?.(),he?.stopPropagation?.();const sn=()=>Pa?vo({modalRef:h,shouldConfirm:Aa&&!Pa,setIsConfirming:v})(Ba,je?.onCloseCallback)(he):Ga(Ba,je?.onCloseCallback)(he);try{await je?.onClick?.(he),sn()}catch(jt){G?.(jt,{reason:Ba,event:he})}};return(0,c.jsxs)("dialog",{...xr,ref:h,"arc-modal":"","arc-scheme":f?"inverse":Et,"is-inverse":f?"":void 0,"is-top-layer":g?"":void 0,"is-backdrop":z==="auto"?void 0:z,"data-size":C,closedby:Wa,style:{"--arc-modal-width":sr??"","--arc-modal-height":Q??"",...dr},children:[!ka&&P&&(0,c.jsx)("div",{"arc-modal-dismiss":"",children:(0,c.jsx)(Bc,{...t,isInverse:f,onClick:Ma("button:dismiss",wo,t)})}
4700),(0,c.jsxs)(Pc,{inert:d?"":void 0,children:[ka&&(0,c.jsxs)(Ci,{...Ra,showDivider:La,children:[vr&&(0,c.jsx)("div",{"header-slot":"go-back",children:(0,c.jsx)(Ir,{"arc-modal-go-back":"",icon:"fa-regular fa-arrow-left fa-fw",text:"Go Back","aria-label":"Go Back",...ea,layout:"icon",size:"md",variant:"common",hierarchy:"secondary",isInverse:f,onClick:Ma("button:back",tn,ea)})}),nr&&(0,c.jsx)("div",{"header-slot":"start",children:nr}),(0,c.jsx)("div",{"header-slot":"content",children:(0,c.jsx)(Oc,{TitleElement:Fr,titleContent:Hr})}),oa&&(0,c.jsx)("div",{"header-slot":"end",children:oa}),P&&(0,c.jsx)("div",{"header-slot":"dismiss",children:(0,c.jsx)(Bc,{...t,isInverse:f,onClick:Ma("button:dismiss",wo,t)})})]}),(0,c.jsx)(Dc,{...o,children:a}),xo&&(0,c.jsxs)(Nc,{...Mr,showDivider:ir,children:[ta&&(0,c.jsx)("div",{"footer-slot":"content",children:ta}),wa&&(0,c.jsxs)(Tc,{children:[kr&&(0,c.jsx)(Ir,{...kr,text:kr?.text||"Button",isInverse:f,variant:"common",hierarchy:"tertiary",onClick:Ma("button:tertiary",Tt,kr)}),V&&(0,c.jsx)(Ir,{...V,text:V?.text||"Cancel",isInverse:f,variant:"common",hierarchy:"secondary",onClick:Ma("button:secondary",nn,V)}),ca&&(0,c.jsx)(Ir,{...ca,text:ca?.text||"Action",isInverse:f,variant:"common",hierarchy:"primary",onClick:Ma("button:primary",cn,ca)})]})]})]}),I&&(0,c.jsx)(_i,{isOpen:d,isInverse:f,isTopLayer:g,backdropColor:z,...r,onConfirmDiscard:ln,onConfirmCancel:It})]})};H("ArcModal",Fc);const Ta={variant:"common",backdropColor:"auto",showDismiss:!0,closeOnBackdrop:!1,closeOnEsc:!0,onCloseOverride:void 0,isTopLayer:!0,isInverse:!1,scheme:"auto"},o0={common:"fa-solid fa-cat-space",brand:"fa-kit fa-articulate",success:"fa-solid fa-badge-check",warning:"fa-solid fa-triangle-exclamation",error:"fa-duotone fa-light-emergency-on",info:"fa-solid fa-circle-info",processing:(0,c.jsx)(hc,{"arc-modal-spinner":""})},t0=({children:a,dismissProps:r,bodyProps:e,footerProps:o,...t})=>{const l=(0,y.useRef)(null),{isOpen:n,autoFocusId:h,isTopLayer:d=Ta.isTopLayer,isInverse:v=Ta.isInverse,scheme:u=Ta.scheme,backdropColor:p=Ta.backdropColor,closeOnBackdrop:g=Ta.closeOnBackdrop,closeOnEsc:f=Ta.closeOnEsc,variant:k=Ta.variant,icon:z,TitleElement:I,titleContent:M,message:_,showDismiss:E,onCloseOverride:C=Ta.onCloseOverride,onClose:S,onToggle:F,...P}=t,{primaryButton:G,...Z}=o??{},or=z||o0[k],sr=f?"closerequest":"none",Q=u==="auto"?void 0:u,dr=vo({modalRef:l,onCloseOverride:C});return Lc({modalRef:l,onClose:S,onToggle:F}),Rc({modalRef:l,isOpen:n,isTopLayer:d}),Mc({modalRef:l,isOpen:n,autoFocusId:h}),Ai({modalRef:l,isOpen:n,closeOnBackdrop:g,attemptCloseModal:dr}),zi({modalRef:l,isOpen:n,closeOnEsc:f,closedBy:sr,attemptCloseModal:dr}),(0,c.jsxs)("dialog",{...P,ref:l,"arc-modal":"","arc-scheme":v?"inverse":Q,"is-alert":k||"","is-inverse":v?"":void 0,"is-top-layer":d?"":void 0,"is-backdrop":p==="auto"?void 0:p,"data-size":"sm",closedby:sr,children:[E&&(0,c.jsx)("div",{"arc-modal-dismiss":"",children:(0,c.jsx)(Bc,{...r,isInverse:v,onClick:dr("button:dismiss",r?.onClick)})}),(0,c.jsxs)(Pc,{children:[(0,c.jsx)(Dc,{...e,children:a||(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(Gh,{glyph:or,variant:k}),(0,c.jsx)(Oc,{TitleElement:I,titleContent:M}),(0,c.jsx)(Zh,{message:_})]})}),(0,c.jsx)(Nc,{...Z,children:(0,c.jsx)(Tc,{orientation:"vertical",children:(0,c.jsx)(Ir,{...G,text:G?.text||"Close",variant:"common",hierarchy:"primary",isInverse:v,onClick:dr("button:primary",G?.onClick)})})})]})]})};H("ArcModalAlert",Fc);const mr=i`--arcâ¢radio`,c0=i` 4701@layer arc-components { 4702 4703 [arc-radio] { 4704 /* SIZES -------------------------------------------------------⢠*/ 4705 &[data-size=inherit] { 4706 ${mr}â¢fontâ¢size: 1em; 4707 ${mr}â¢iconâ¢size: 0.625em; 4708 ${mr}â¢size: 1.125em; 4709 ${mr}â¢gap: 0.5em; 4710 } 4711 4712 &[data-size=md] { 4713 ${mr}â¢fontâ¢size: var(${s}â¢14); 4714 ${mr}â¢iconâ¢size: var(${s}â¢10); 4715 ${mr}â¢size: var(${s}â¢18); 4716 ${mr}â¢gap: var(${s}â¢8); 4717 } 4718 4719 &[data-size=sm] { 4720 ${mr}â¢fontâ¢size: var(${s}â¢12); 4721 ${mr}â¢iconâ¢size: var(${s}â¢10); 4722 ${mr}â¢size: var(${s}â¢16); 4723 ${mr}â¢gap: var(${s}â¢6); 4724 } 4725 4726 /* Inter-Component Communication -------------------------------⢠*/ 4727 /* for: Setup defaults for ArcBooleanInputMask */ 4728 ${x}â¢borderâ¢radius: var(--arc-border-radius-circle); 4729 ${x}â¢size: var(${mr}â¢size); 4730 ${x}â¢iconâ¢size: var(${mr}â¢iconâ¢size); 4731 ${x}â¢width: var(${mr}â¢size); 4732 ${x}â¢height: var(${mr}â¢size); 4733 ${x}â¢translate: 0 var(${s}â¢1m); 4734 4735 /* for: ArcLabel */ 4736 --arc-label-gap: var(${mr}â¢gap); 4737 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask 4738 to stay inline with the label text 4739 regardless of applied line-height */ 4740 } 4741 4742 /* CORE STYLES ---------------------------------------------------⢠*/ 4743 [arc-radio]:not([hidden]) { 4744 font-size: var(${mr}â¢fontâ¢size); 4745 display: var(--arc-radio-display, inline-flex); 4746 min-height: 1lh; 4747 4748 /* UNCHECKED, NOT-DISABLED, +HOVER ⢠default state */ 4749 &:not(:has(:checked)) { 4750 ${x}â¢color: transparent; 4751 ${x}â¢background: transparent; 4752 ${x}â¢borderâ¢color: var(--arc-color-border-stark); 4753 4754 &:hover { 4755 ${x}â¢background: var(--arc-color-bg-theme-subtle); 4756 ${x}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 4757 } 4758 4759 &:has(:disabled) { 4760 ${x}â¢background: var(--arc-color-bg-disabled); 4761 ${x}â¢borderâ¢color: var(--arc-color-border-disabled); 4762 } 4763 } 4764 4765 /* DISABLED */ 4766 &:has(:disabled) { 4767 color: var(--arc-color-fg-disabled); 4768 } 4769 4770 /* CHECKED, ?NOT-DISABLED+HOVER, ?DISABLED */ 4771 &:has(:checked) { 4772 ${x}â¢color: var(--arc-color-fg-on-theme-heavy); 4773 ${x}â¢background: var(--arc-color-bg-theme-heavy); 4774 ${x}â¢borderâ¢color: transparent; 4775 4776 &:not(:has(:disabled)):hover { 4777 ${x}â¢background: var(--arc-color-bg-theme-stark); 4778 } 4779 4780 &:has(:disabled) { 4781 ${x}â¢color: var(--arc-color-fg-on-theme-mid); 4782 ${x}â¢background: var(--arc-color-bg-theme-mid); 4783 } 4784 } 4785 } 4786 4787} 4788`,n0=L(na,["hug","fill"]),i0=L(_r,["inherit","md","sm"]),Ei=({children:a,label:r,layout:e,size:o="md",useMask:t=!0,...l})=>{const{className:n,title:h,...d}=l,v={className:n,title:h},u=a??r,p=(0,c.jsx)(co,{...d,type:"radio"}),g=t&&(0,c.jsxs)(st,{type:"radio",children:[p,(0,c.jsx)(D,{icon:"fa-solid fa-circle-small arc-fw"})]}),f=!!u&&(0,c.jsxs)(ne,{layout:e,children:[g||p,(0,c.jsx)(ie,{children:u})]});return(0,c.jsx)("span",{...v,"arc-radio":"","data-size":o,children:f||g||p})};H("ArcRadio",c0);const Dr=i`--arcâ¢rb`,O=i`${Dr}â¢o`,l0=i` 4789@layer arc-components { 4790 4791 [arc-radio-bar] { 4792 ${Dr}â¢fontâ¢size: var(${s}â¢14); 4793 ${Dr}â¢borderâ¢radius: var(${s}â¢8); 4794 ${Dr}â¢background: var(--arc-color-bg-secondary); 4795 ${Dr}â¢padding: var(${s}â¢4); 4796 ${Dr}â¢gap: var(${s}â¢2); 4797 4798 ${O}â¢color: var(--arc-color-fg-secondary); 4799 ${O}â¢background: var(--arc-color-alpha-black-0); 4800 ${O}â¢borderâ¢color: var(--arc-color-alpha-black-0); 4801 ${O}â¢borderâ¢width: var(${s}â¢1); 4802 ${O}â¢borderâ¢radius: var(${s}â¢4);
4802 /* bar-radius minus bar-padding */ 4803 4804 /* SIZES -------------------------------------------------------⢠*/ 4805 &[data-size=lg] { /* @default */ 4806 ${O}â¢size: var(${s}â¢32); 4807 ${O}â¢lineâ¢height: var(${s}â¢30); /* ⢠-2px to account for border-width (top/bottom) */ 4808 ${O}â¢iconâ¢padding: var(${s}â¢8); 4809 ${O}â¢textâ¢padding: var(${s}â¢12); 4810 } 4811 4812 &[data-size=md] { 4813 ${O}â¢size: var(${s}â¢24); 4814 ${O}â¢lineâ¢height: var(${s}â¢22); /* ⢠-2px to account for border-width (top/bottom) */ 4815 ${O}â¢iconâ¢padding: var(${s}â¢6); 4816 ${O}â¢textâ¢padding: var(${s}â¢8); 4817 } 4818 4819 /* LAYOUTS -----------------------------------------------------⢠*/ 4820 &[data-layout=hug] { /** @default */ 4821 ${Dr}â¢display: inline-flex; 4822 } 4823 4824 &[data-layout=fill] { 4825 ${Dr}â¢display: flex; 4826 } 4827 } 4828 4829 [arc-radio-bar-option] { 4830 /* Inter-Component Communication -------------------------------⢠*/ 4831 --arc-label-align-items: stretch; /* control ArcLabel's vertical footprint; 4832 allows long label text to wrap 4833 without compromising option's 4834 visual border */ 4835 4836 4837 /* STATES ------------------------------------------------------⢠*/ 4838 &:not(:has(:disabled, :checked)) { 4839 &:hover { 4840 ${O}â¢color: var(--arc-color-fg-on-hover-default); 4841 ${O}â¢background: var(--arc-color-bg-hover-default); 4842 ${O}â¢borderâ¢color: var(--arc-color-border-stark); 4843 } 4844 } 4845 4846 &:has(:checked) { 4847 ${O}â¢color: var(--arc-color-mono-black); 4848 ${O}â¢background: var(--arc-color-mono-white); 4849 ${O}â¢borderâ¢color: var(--arc-color-border-stark); 4850 ${O}â¢fontâ¢weight: var(--arc-font-weight-500); 4851 } 4852 4853 &:has(:disabled) { 4854 ${O}â¢color: var(--arc-color-fg-disabled); 4855 } 4856 4857 4858 &:has(:focus-within:focus-visible) { 4859 ${O}â¢outline: var(${O}
4859â¢borderâ¢width) solid var(--arc-color-border-focus); 4860 } 4861 } 4862 4863 /* CORE STYLES ---------------------------------------------------⢠*/ 4864 [arc-radio-bar-option] { 4865 flex: 1 1 auto; 4866 display: flex; 4867 position: relative; 4868 } 4869 4870 [arc-radio-bar]:not([hidden]) { 4871 font-size: var(--arc-radio-bar-font-size, var(${Dr}â¢fontâ¢size)); 4872 display: var(${Dr}â¢display); 4873 gap: var(${Dr}â¢gap); 4874 border-radius: var(${Dr}â¢borderâ¢radius); 4875 background: var(${Dr}â¢background); 4876 padding: var(${Dr}â¢padding); 4877 margin: 0; 4878 4879 [arc-radio] { 4880 flex: 1; 4881 display: flex; 4882 justify-content: center; 4883 border-radius: var(${O}â¢borderâ¢radius); 4884 outline: var(${O}â¢outline, none); 4885 outline-offset: var(${O}â¢borderâ¢width); 4886 } 4887 4888 /* INPUT ELEMENT -----------------------------------------------⢠*/ 4889 [arc-input-type=radio] { 4890 position: absolute; 4891 appearance: none; 4892 pointer-events: none; 4893 opacity: 0; 4894 } 4895 4896 /* Inter-Component Communication -------------------------------⢠*/ 4897 [arc-label] { 4898 flex: 1; 4899 line-height: var(${O}â¢lineâ¢height); 4900 overflow: hidden; 4901 } 4902 4903 [arc-label-content] { 4904 flex: 1; 4905 display: flex; 4906 align-items: safe center; 4907 justify-content: center; 4908 4909 height: var(${O}â¢size); 4910 min-width: var(${O}â¢size); 4911 4912 border-radius: var(${O}â¢borderâ¢radius); 4913 border: var(${O}
4913â¢borderâ¢width) solid var(${O}â¢borderâ¢color); 4914 background: var(${O}â¢background); 4915 color: var(${O}â¢color); 4916 font-weight: var(${O}â¢fontâ¢weight, unset); 4917 4918 transition-duration: 200ms; 4919 transition-timing-function: ease-out; 4920 transition-property: 4921 border, 4922 background, 4923 color, 4924 font-weight; 4925 4926 &:has([data-element=text]) { 4927 padding: 0 var(${O}â¢textâ¢padding); 4928 } 4929 4930 &:not(:has([data-element=text])) { 4931 padding: 0 var(${O}â¢iconâ¢padding); 4932 } 4933 } 4934 4935 [arc-icon-text] [data-element] { 4936 min-width: min-content; 4937 overflow: hidden; 4938 overflow-wrap: break-word; 4939 } 4940 } 4941 4942} 4943`,s0=L(na,["hug","fill"]),d0=L(_r,["lg","md"]),h0=({children:a,label:r,icon:e,...o})=>{const t=a||(0,c.jsx)(Yr,{icon:e,text:r});return(0,c.jsx)("li",{"arc-radio-bar-option":"","data-is-checked":o?.checked||void 0,children:(0,c.jsx)(Ei,{...o,label:t,layout:"fill",useMask:!1})})},v0=({children:a,size:r="lg",layout:e="hug",...o})=>(0,c.jsx)("ul",{...o,"arc-radio-bar":"","data-size":r,"data-layout":e,role:"radiogroup",children:a});H("ArcRadioBar",l0);const Ti=L(na,["fill","hug"]),Ii=L(_r,["inherit","xl","lg","md"]),u0=L(lr,["outline","solid","plain"]),g0=Ti,p0=Ii,f0=L(lr,["outline","solid","plain"]),Se=a=>(0,c.jsx)(c.Fragment,{children:!!a.children&&(0,c.jsx)("span",{...a})}),m0=a=>(0,c.jsx)(c.Fragment,{children:!!a.children&&(0,c.jsx)("span",{...a})}),Hc=({children:a,...r})=>(0,c.jsx)(c.Fragment,{children:!!a&&(0,c.jsx)(ne,{...r,children:(0,c.jsx)(ie,{children:a})})}),b0=({children:a,layout:r,size:e,variant:o,tag:t="span",...l})=>(0,c.jsx)(t,{...l,"data-layout":r,"data-size":e,"data-variant":o,children:a}),$0=()=>(0,c.jsx)("span",{"input-element":"spacer"}),y0=a=>(0,c.jsx)(Se,{...a,"input-element":"header"}),x0=a=>(0,c.jsx)(Hc,{...a,"input-element":"header-label"}),k0=a=>(0,c.jsx)(Se,{...a,"input-element":"header-slot"}),w0=a=>(0,c.jsx)(Se,{...a,"input-element":"body"}),A0=a=>(0,c.jsx)(Hc,{...a,"input-element":"input-prefix"}),z0=a=>(0,c.jsx)(Hc,{...a,"input-element":"input-suffix"}),C0=a=>(0,c.jsx)(m0,{...a,"input-element":"input-action"}),S0=a=>(0,c.jsx)(Se,{...a,"input-element":"footer"}),_0=a=>(0,c.jsx)(Se,{...a,"input-element":"footer-caption"}),E0=a=>(0,c.jsx)(Se,{...a,"input-element":"footer-slot"}),T0=a=>r=>{if(!(r?.target instanceof HTMLInputElement))return;const e={name:r?.target?.name,value:r?.target?.value};a?.(e,r)},q=i`--arcâ¢input`,Ia=i`${q}â¢fg`,ut=i`${Ia}â¢disabled`,gt=i`${Ia}â¢readonly`,pt=i`${Ia}â¢invalid`,Qr=i`${q}â¢bg`,ft=i`${Qr}â¢hover`,mt=i`${Qr}â¢disabled`,bt=i`${Qr}â¢readonly`,$t=i`${Qr}â¢invalid`,I0=i`${q}â¢align`,ji=i`${I0}â¢items`,j0=i`${q}â¢flex`,L0=i`${j0}â¢direction`,Li=i`${q}â¢header`,yt=i`${Li}â¢labelâ¢color`,Ri=i`${Li}â¢slotâ¢color`,Mi=i`${q}â¢footer`,Vc=i`${Mi}â¢captionâ¢color`,Bi=i`${Mi}â¢slotâ¢color`,Uc=i`${q}â¢border`,Wc=i`${Uc}â¢radius`,R0=i`${Uc}â¢width`,ra=i`${Uc}â¢color`,Gc=i`${q}â¢outline`,Pi=i`${Gc}
4943â¢size`,Oi=i`${Gc}â¢offset`,Di=i`${Gc}â¢color`,go=i`${q}â¢height`,M0=i`${q}â¢padding`,xt=i`${M0}â¢inline`,Zc=i`${xt}â¢end`,Ni=i`${q}â¢slot`,Kc=i`${Ni}â¢gap`,Yc=i`${Ni}â¢fontâ¢size`,kt=i`${ra}â¢hover`,wt=i`${ra}â¢disabled`,qc=i`${ra}â¢readonly`,po=i`${ra}â¢invalid`,B0=i`${q}â¢actionâ¢maxâ¢height`,Fi=i`${q}â¢gap`,Jc=i`${q}â¢fontâ¢size`,P0=i` 4944@layer arc-components { 4945 4946/* --arc[-internal, -modifier, -computed] ⢠NOT FOR CONSUMER USE ---⢠*/ 4947 4948[arc-input] { 4949 4950 /* SIZES ---------------------------------------------------------⢠*/ 4951 4952 &[data-size=xl] { 4953 ${go}: var(${s}â¢48); 4954 ${Zc}: var(${m}â¢8); 4955 } 4956 4957 &:is([data-size=lg], [data-size=inherit]) { /* @default ⢠base size at 100% */ 4958 ${go}: var(${s}â¢40); 4959 } 4960 4961 &[data-size=md] { 4962 ${go}: var(${s}â¢32); 4963 ${Wc}: var(${s}â¢4); 4964 ${B0}: 80%; 4965 } 4966 4967 &:has(select) { 4968 ${xt}: 0; 4969 ${ji}: stretch; 4970 } 4971 4972 & { 4973 /* Defaults -------------------------⢠*/ 4974 ${Jc}: var(${s}â¢14); 4975 ${Yc}: var(${s}â¢12); 4976 4977 ${go}: var(${s}â¢40); /* default size */ 4978 ${Fi}: var(${m}â¢6); 4979 ${Kc}: var(${m}â¢4); 4980 ${xt}: var(${m}â¢12); 4981 ${Zc}: var(${m}â¢3); 4982 ${Wc}: var(${s}â¢8); 4983 ${R0}: var(${s}â¢1); 4984 ${Pi}: var(${s}â¢2); 4985 ${Oi}: var(${s}â¢1m); 4986 4987 /* Inter-Component Communication -------------------------------⢠*/ 4988 4989 --arc-label-cursor: var(${q}â¢cursor, inherit); /* ArcLabel ⢠cursor syncing */ 4990 4991 &[data-size=inherit] { 4992 ${Jc}: 0.875em; /* 14px at 100% */ 4993 ${Yc}: 0.75em; /* 12px at 100% */ 4994 } 4995 4996 &[data-size=md] { 4997 /* Inter-Component Communication -------------------------------⢠*/ 4998 --arc-button-border-radius: var(--arc-border-radius-sm); 4999 --arc-button-outline-offset: 0; 5000 --arc-button-font-size: 0.8em; /* ArcButton ⢠the input size 'md' needs 5001 a slightly smaller "input-action" button 5002 footprint; there's no direct access to 5003 ArcButton['size'] prop in this context */ 5004 } 5005 } 5006 5007 /* VARIANTS ------------------------------------------------------⢠*/ 5008 5009 & { 5010 ${Ia}: var(--arc-color-fg-primary); 5011 ${yt}: inherit; 5012 ${Ri}: var(--arc-color-fg-secondary); 5013 ${Vc}: var(--arc-color-fg-secondary); 5014 ${Bi}: var(--arc-color-fg-secondary); 5015 5016 &[data-variant=outline] { /* @default */ 5017 ${Qr}: var(--arc-color-bg-primary); 5018 ${ft}: var(--arc-color-bg-primary); 5019 ${ra}: var(--arc-color-border-stark); 5020 ${kt}: var(--arc-color-border-heavy); 5021 5022 ${ut}: var(--arc-color-fg-disabled); 5023 ${mt}: var(--arc-color-bg-secondary); 5024 ${wt}: var(--arc-color-border-mid); 5025 5026 ${gt}: var(--arc-color-fg-primary); 5027 ${bt}: var(--arc-color-bg-disabled); 5028 ${qc}: var(--arc-color-border-mid); 5029 5030 ${pt}: var(--arc-color-fg-critical-mid); 5031 ${$t}: var(--arc-color-bg-primary); 5032 ${po}: var(--arc-color-fg-critical-mid); 5033 } 5034 5035 &[data-variant=solid] { 5036 ${Qr}: var(--arc-color-bg-secondary); 5037 ${ft}: var(--arc-color-bg-hover-default); 5038 ${ra}: transparent; 5039 ${kt}: var(--arc-color-border-stark); 5040 5041 ${pt}: var(--arc-color-fg-critical-mid); 5042 ${$t}: var(--arc-color-bg-critical-muted); 5043 ${po}: transparent; 5044 5045 ${ut}: var(--arc-color-fg-disabled); 5046 ${mt}: var(--arc-color-bg-disabled); 5047 ${wt}: transparent; 5048 5049 ${gt}: var(--arc-color-fg-primary); 5050 ${bt}: var(--arc-color-bg-disabled); 5051 ${po}: var(--arc-color-fg-critical-mid); 5052 } 5053 5054 &[data-variant=plain] { 5055 ${Qr}: transparent; 5056 ${ft}: var(--arc-color-bg-hover-default); 5057 ${ra}: transparent; 5058 ${kt}: transparent; 5059 5060 ${pt}: var(--arc-color-fg-critical-mid); 5061 ${$t}: transparent; 5062 ${po}: var(--arc-color-fg-critical-mid); 5063 5064 ${ut}: var(--arc-color-fg-disabled); 5065 ${mt}: transparent; 5066 ${wt}: transparent; 5067 5068 ${gt}: var(--arc-color-fg-primary); 5069 ${bt}: var(--arc-color-bg-disabled); 5070 ${qc}: transparent; 5071 } 5072 } 5073 5074 /* STATES --------------------------------------------------------⢠*/ 5075 5076 &:not(:has( 5077 input:read-only, 5078 input:disabled, 5079 select[data-readonly], 5080 select:disabled 5081 )) { 5082 5083 &:has(select) { 5084 ${q}â¢cursor: pointer; 5085 } 5086 5087 &:is( 5088 :hover, 5089 [data-simulate=hover] 5090 ) { 5091 ${ra}: var(--arc-input-border-color-hover, var(${kt})); 5092 ${Qr}: var(--arc-input-background-hover, var(${ft})); 5093 } 5094 5095 &:has([input-element=body]) { 5096 &:is( 5097 :focus-within, 5098 [data-simulate=focus], 5099 [data-simulate=active], 5100 :has(:focus, :focus-visible, :active) 5101 ) { 5102 ${Di}: var(--arc-color-border-focus); 5103 } 5104 } 5105 } 5106 5107 &:has(input:read-only, select[data-readonly]) { 5108 ${q}â¢cursor: default; 5109 ${Ia}: var(${gt}); 5110 ${Qr}: var(${bt}); 5111 ${ra}: var(${qc}); 5112 } 5113 5114 &:has(input:disabled, select:disabled) { 5115 ${q}
5115â¢cursor: not-allowed; 5116 ${Ia}: var(${ut}); 5117 ${Qr}: var(${mt}); 5118 ${ra}: var(${wt}); 5119 ${yt}: var(--arc-color-fg-primary); 5120 } 5121 5122 &[data-simulate=invalid], 5123 &:has( 5124 input:user-invalid:not(:focus), 5125 select:user-invalid:not(:focus) 5126 ) { 5127 ${Qr}: var(${$t}); 5128 ${yt}: var(${Ia}); 5129 ${ra}: var(${po}); 5130 ${Vc}: var(${pt}); 5131 } 5132 5133 /* LAYOUTS -------------------------------------------------------⢠*/ 5134 5135 &[data-layout=fill] { /* @default */ 5136 ${q}â¢display: flex; 5137 } 5138 5139 &[data-layout=hug] { 5140 ${q}â¢display: inline-flex; 5141 } 5142 5143 & { 5144 ${q}â¢border: var(--arc-border-width-sm) solid var(${ra}); 5145 ${q}â¢outline: var(${Pi}) solid var(${Di}, transparent); 5146 } 5147} 5148 5149[arc-input]:not([hidden]) { 5150 display: var(${q}â¢display, flex); 5151 flex-direction: var(${L0}, column); 5152 gap: var(${Kc}); 5153 color: var(--arc-input-color, var(${Ia})); 5154 5155 :is([input-element=header], [input-element=footer]) { 5156 display: flex; 5157 justify-content: space-between; 5158 font-size: var(--arc-input-slot-font-size, var(${Yc})); 5159 gap: var(${Kc}); 5160 } 5161 5162 [input-element=spacer] { 5163 display: safe flex-end; 5164 } 5165 5166 [input-element=header] { 5167 align-items: safe flex-end; 5168 } 5169 5170 [input-element=header-label] { 5171 flex: 1; 5172 color: var(--arc-input-header-label-color, var(${yt})); 5173 font-weight: var(--arc-input-header-label-font-weight, var(--arc-font-weight-600)); 5174 } 5175 5176 [input-element=header-slot] { 5177 color: var(--arc-input-header-slot-color, var(${Ri})); 5178 min-width: var(--arc-input-header-slot-min-width, fit-content); 5179 } 5180 5181 [input-element=footer] { 5182 align-items: baseline; 5183 } 5184 5185 [input-element=footer-caption] { 5186 flex: 1; 5187 color: var(--arc-input-footer-caption-color, var(${Vc})); 5188 } 5189 5190 [input-element=footer-slot] { 5191 color: var(--arc-input-footer-slot-color, var(${Bi})); 5192 min-width: var(--arc-input-footer-slot-min-width, fit-content); 5193 } 5194 5195 [input-element=body] { 5196 flex: none; 5197 display: flex; 5198 align-items: var(${ji}, center); 5199 gap: var(--arc-input-gap, var(${Fi})); 5200 height: var(${go}); 5201 font-size: var(${Jc}); 5202 5203 color: var(--arc-input-color, var(${Ia})); 5204 background-color: var(--arc-input-background, var(${Qr})); 5205 border: var(--arc-input-border, var(${q}â¢border)); 5206 border-radius: var(--arc-input-border-radius, var(${Wc})); 5207 outline: var(${q}â¢outline, none); 5208 outline-offset: var(${Oi}); 5209 5210 transition-property: border, background, color, height; 5211 transition-duration: 200ms; 5212 transition-timing-function: ease-out; 5213 5214 cursor: var(${q}â¢cursor, unset); 5215 5216 padding-inline: var(--arc-input-padding-inline, var(${xt})); 5217 5218 &:has([input-element=input-action]) { 5219 padding-inline-end: var(${Zc}); 5220 } 5221 5222 input { 5223 cursor: inherit; 5224 appearance: none; 5225 align-self: stretch; 5226 flex: 1; 5227 font: inherit; 5228 color: inherit; 5229 border: var(--arc-border-width-sm) solid transparent; 5230 background: transparent; 5231 padding: 0; 5232 margin: 0; 5233 outline: none; 5234 line-height: normal; 5235 width: var(--arc-input-width, 100%); 5236 min-width: var(--arc-input-min-width, 1em); 5237 max-width: var(--arc-input-max-width, 100%); 5238 text-align: var(--arc-input-text-align, unset); 5239 } 5240 } 5241 5242 [input-element=input-prefix] { 5243 flex: none; 5244 } 5245 5246 [input-element=input-suffix] { 5247 flex: none; 5248 opacity: var(--arc-input-suffix-opacity, var(--arc-alpha-40)); 5249 } 5250 5251 [input-element=input] { 5252 flex: 1; 5253 display: flex; 5254 } 5255 5256 [input-element=input-action] { 5257 flex: none; 5258 cursor: inherit; 5259 align-self: stretch; 5260 display: flex; 5261 align-items: center; 5262 justify-content: center; 5263 5264 button { 5265 max-height: var(${q}â¢actionâ¢maxâ¢height, unset); 5266 } 5267 } 5268} 5269 5270} 5271`,O0={onChangeHandler:T0,Wrapper:b0,Spacer:$0,Header:y0,HeaderLabel:x0,HeaderSlot:k0,InputBody:w0,InputPrefix:A0,InputSuffix:z0,InputAction:C0,Footer:S0,FooterCaption:_0,FooterSlot:E0};H("ArcInput",P0);const rr=O0,Hi=i`--arcâ¢select`,Nr=i`${Hi}â¢picker`,Vi=i`${Nr}â¢fg`,Ui=i`${Nr}â¢bg`,Xc=i`${Hi}â¢option`,At=i`${Xc}â¢fg`,zt=i`${Xc}â¢bg`,_e=i`${Xc}â¢icon`,D0=i` 5272 ${Vi}: currentcolor; 5273 ${Ui}: var(--arc-color-bg-mono); 5274 5275 ${Nr}â¢width: auto; 5276 ${Nr}â¢minâ¢width: 3em; 5277 ${Nr}â¢borderâ¢radius: var(--arc-border-radius-lg); 5278 ${Nr}â¢shadow: var(--arc-shadow-lg); 5279 5280 ${At}: currentcolor; 5281 ${zt}: transparent; 5282 5283 ${_e}â¢display: none; 5284 ${_e}â¢color: var(${At}); 5285`,N0=i` 5286 &[data-layout=fill] { 5287 ${Nr}â¢width: 100%; /* fallback */ 5288 ${Nr}â¢width: anchor-size(inline); 5289 } 5290`,F0=i` 5291 [arc-select] ::picker(select) { 5292 transition-behavior: allow-discrete, smooth; 5293 transition-duration: var(--arc-select-transition-duration, 240ms); 5294 transition-property: display, opacity; 5295 transition-timing-function: ease-out; 5296 } 5297 5298 @supports (overlay: auto) { 5299 [arc-select] ::picker(select) { 5300 transition-behavior: allow-discrete; 5301 transition-property: display, overlay, opacity; 5302 } 5303 } 5304`,H0=i` 5305 [arc-select] { 5306 ::picker(select) { 5307 opacity: 0; 5308 } 5309 5310 ::picker(select):popover-open { 5311 opacity: 1; 5312 } 5313 } 5314 5315 @starting-style { 5316 [arc-select] ::picker(select):popover-open { 5317 opacity: 0; 5318 } 5319 } 5320`,V0=i` 5321@layer arc-components { 5322 5323 /* SETUP ---------------------------------------------------------⢠*/ 5324 5325 [arc-select] { 5326 ${D0} 5327 ${N0} 5328 } 5329 5330 /* CORE ----------------------------------------------------------⢠*/ 5331 5332 [arc-select] { 5333 select, 5334 ::picker(select) { 5335 appearance: base-select; 5336 } 5337 5338 ::picker(select) { 5339 flex: 1; 5340 display: var(${Nr}â¢display, none); 5341 flex-direction: column; 5342 gap: var(${m}â¢4); 5343 border: none; 5344 color: var(${Vi}); 5345 width: var(--arc-select-picker-width, var(${Nr}â¢width)); 5346 min-width: var(--arc-select-picker-min-width, var(${Nr}â¢minâ¢width)); 5347 margin: var(--arc-select-picker-margin, var(${m}â¢4) 0);
5348 padding: var(--arc-select-picker-padding, var(${m}â¢4)); 5349 background: var(--arc-select-picker-background, var(${Ui})); 5350 border-radius: var(--arc-select-picker-border-radius, var(${Nr}â¢borderâ¢radius)); 5351 box-shadow: var(--arc-select-picker-shadow, var(${Nr}â¢shadow)); 5352 } 5353 5354 ::picker(select):popover-open { 5355 ${Nr}â¢display: flex; 5356 } 5357 5358 /* Hide default picker icon */ 5359 ::picker-icon { 5360 display: none; 5361 } 5362 5363 select { 5364 flex: 1; 5365 align-items: center; 5366 font: inherit; 5367 color: inherit; 5368 background: transparent; 5369 border: none; 5370 padding: 0; 5371 margin: 0; 5372 padding-inline: var(${s}â¢12); 5373 } 5374 5375 [arc-select-button] { 5376 display: flex; 5377 align-items: center; 5378 gap: var(${m}â¢8); 5379 width: 100%; 5380 } 5381 5382 selectedcontent { 5383 /* Inter-Component Communication -----------------------------⢠*/ 5384 --arc-icon-text-font-weight: normal; 5385 --arc-icon-text-subtext-display: none; 5386 --arc-avatar-text-font-weight: normal; 5387 --arc-avatar-subtext-display: none; 5388 --arc-avatar-size: var(${s}â¢24); 5389 --arc-avatar-initial-font-size: var(${s}â¢12); 5390 5391 flex: 1; 5392 display: flex; 5393 align-items: center; 5394 width: 100%; 5395 min-width: 0; 5396 5397 [data-element=selected-icon] { 5398 display: none; 5399 } 5400 } 5401 5402 [arc-select-option] { 5403 flex: none; 5404 display: grid; 5405 grid-template-columns: 1fr auto; 5406 align-items: center; 5407 gap: var(${m}â¢8); 5408 width: 100%; 5409 min-width: 0; 5410 5411 color: var(${At}); 5412 background: var(--arc-select-option-background, var(${zt})); 5413 border-radius: var(--arc-select-option-border-radius, var(--arc-border-radius-md)); 5414 padding: var(--arc-select-option-padding, var(${m}â¢8)); 5415 5416 &::checkmark { 5417 display: none; 5418 } 5419 5420 &:hover { 5421 ${zt}: var(--arc-color-bg-hover-default); 5422 } 5423 5424 &:checked { 5425 ${zt}: var(--arc-color-bg-selected-default); 5426 ${_e}â¢display: flex; 5427 ${_e}â¢color: var(--arc-select-option-selected-icon-color, var(${At})); 5428 } 5429 5430 [data-element=selected-icon] { 5431 display: var(${_e}â¢display, none); 5432 color: var(${_e}â¢color, currentcolor); 5433 } 5434 } 5435 5436 @supports not (appearance: base-select) { 5437 select { 5438 appearance: none; 5439 background: transparent; 5440 outline: none; 5441 5442 /* caret */ 5443 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'><polyline points='1 1 10 10 19 1' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' /></svg>"); 5444 background-repeat: no-repeat; 5445 background-size: 0.75em; 5446 background-origin: padding-box; 5447 background-position: calc(100% - 1em) center; 5448 padding-inline-end: 3em; 5449 } 5450 } 5451 } 5452 5453 ${F0} 5454 ${H0} 5455 5456} 5457`,U0=(0,y.forwardRef)(({layout:a="hug",size:r="inherit",variant:e="outline",items:o,renderItem:t,headerLabel:l,headerSlot:n,footerCaption:h,footerSlot:d,readOnly:v,id:u,onChange:p,onBlur:g,onFocus:f,onKeyDown:k,onKeyUp:z,onInput:I,onInvalid:M,onClick:_,name:E,value:C,defaultValue:S,required:F,disabled:P,autoComplete:G,autoFocus:Z,form:or,...sr},Q)=>{const dr=Kr(u,"arc-select"),xr=e==="plain"&&a==="fill"?"hug":a,vr=P||void 0,ea=v||void 0,nr=F||void 0,Fr=!!(globalThis?.CSS&&typeof CSS.supports=="function"&&CSS.supports("appearance","base-select")),Hr=e!=="plain"&&!!(l||n),oa=e!=="plain"&&!!(h||d),La=o?.filter(V=>V?.variant!=="divider"&&V?.variant!=="section-label")??[],Ra=V=>{const kr=Mr=>typeof Mr=="string"&&Mr.trim().length>0;return[V?.text,V?.avatar?.name,V?.["aria-label"]].find(kr)??"Anonymous"},ta=(V,kr)=>{if(t)return t(V,kr);const ir=no(V),Mr=$i(ir),{itemId:ka,...wa}=V;return Mr(wa)},ca=ea&&(C!=null||S!=null)?String(C??S):void 0;return(0,c.jsxs)(rr.Wrapper,{...sr,"arc-select":"","arc-input":"select",layout:xr,size:r,variant:e,children:[Hr&&(0,c.jsxs)(rr.Header,{children:[(0,c.jsx)(rr.HeaderLabel,{htmlFor:dr,children:l}),!!n&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(rr.Spacer,{}),(0,c.jsx)(rr.HeaderSlot,{children:n})]})]}),(0,c.jsx)(rr.InputBody,{children:(0,c.jsxs)("select",{name:E,value:C,defaultValue:S,required:F,disabled:P,autoComplete:G,autoF
5457ocus:Z,form:or,ref:Q,id:dr,onChange:p,onBlur:g,onFocus:f,onKeyDown:k,onKeyUp:z,onInput:I,onInvalid:M,onClick:_,"aria-disabled":vr,"aria-required":nr,"data-readonly":ea,children:[(0,c.jsxs)("button",{children:[(0,c.jsx)("selectedcontent",{}),(0,c.jsx)("span",{"data-element":"picker-icon","aria-hidden":!0,children:(0,c.jsx)(D,{icon:"fa-regular fa-angle-down arc-fw"})})]}),La.map((V,kr)=>{const ir=V["aria-disabled"]===!0||V.disabled===!0,Mr=String(V?.value??V?.itemId??kr),ka=no(V),wa=Ra(V);return(0,c.jsx)("option",{value:Mr,disabled:ir||ca!==void 0&&Mr!==ca||void 0,"arc-select-option":"","arc-select-option-role":ka,children:Fr?(0,c.jsxs)(c.Fragment,{children:[ta(V,kr),(0,c.jsx)("span",{"data-element":"selected-icon","aria-hidden":!0,children:(0,c.jsx)(D,{icon:"fa-regular fa-check arc-fw"})})]}):wa},V.itemId??kr)})]})}),oa&&(0,c.jsxs)(rr.Footer,{children:[(0,c.jsx)(rr.FooterCaption,{children:h}),!!d&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(rr.Spacer,{}),(0,c.jsx)(rr.FooterSlot,{children:d})]})]})]})});H("ArcSelect",V0);const W0=L(_r,["inherit","md","sm"]),br={On:"on",Off:"off"},Ee={Before:"before",After:"after"},G0=({disabled:a,id:r,name:e,size:o="md",value:t,labelOff:l,labelOn:n,onChange:h,...d})=>{const v=Kr(e,"arc-switch-name"),u=Kr(r?`${r}-off`:void 0,"arc-switch-off"),p=Kr(r?`${r}-on`:void 0,"arc-switch-on"),g=_=>{if(_.code==="Space"){_.preventDefault(),_.stopPropagation();const E=t===br.On?br.Off:br.On;h?.({value:E},_)}},f=_=>{const E={on:Ue(n),off:Ue(l)};return E?.on&&E?.off?E[_]:!E?.on&&E?.off?`${E?.off}: ${_}`:E?.on&&!E?.off?`${E?.on}: ${_}`:E[_]},k=(0,c.jsxs)(st,{type:"switch",onKeyDown:g,children:[(0,c.jsx)(co,{type:"switch",name:v,id:u,value:br.Off,checked:t===br.Off,disabled:a,"aria-label":f(br.Off)?.trim(),onChange:h}),(0,c.jsx)(co,{type:"switch",name:v,id:p,value:br.On,checked:t===br.On,disabled:a,"aria-label":f(br.On)?.trim(),onChange:h}),(0,c.jsx)("span",{"data-element":"mask"})]}),z=!n&&t===br.Off?p:u,I=!l&&t===br.On?u:p,M=!!(n||l)&&(0,c.jsxs)(c.Fragment,{children:[!!l&&(0,c.jsx)(ne,{htmlFor:z,"arc-switch-label":n?br.Off:"",children:(0,c.jsx)(ie,{children:l})}),k,!!n&&(0,c.jsx)(ne,{htmlFor:I,"arc-switch-label":l?br.On:"",children:(0,c.jsx)(ie,{children:n})})]});return(0,c.jsx)("span",{...d,"arc-switch":"","data-state":t,"data-size":o,role:"radiogroup",children:M||k})},ur=i`--arcâ¢switch`,J=i`${ur}â¢knob`,Z0=i` 5458@layer arc-components { 5459 5460 [arc-switch] { 5461 ${ur}â¢background: var(--arc-color-alpha-white-100); 5462 ${J}â¢shadow: var(--arc-shadow-md); 5463 5464 &:has(:disabled) { 5465 ${ur}â¢background: var(--arc-color-alpha-white-70); 5466 ${J}â¢shadow: var(--arc-shadow-none); 5467 5468 [arc-switch-label] { 5469 --arc-label-cursor: not-allowed; 5470 --arc-label-opacity: var(--arc-alpha-60); 5471 } 5472 } 5473 5474 /* Uses Neutral-ish Colors */ 5475 &[data-state=off] { 5476 ${x}â¢background: var(--arc-color-bg-neutral-subtle); 5477 ${x}â¢borderâ¢color: var(--arc-color-border-stark); 5478 ${J}â¢borderâ¢color: var(--arc-color-border-on-stark); 5479 ${J}â¢color: var(--arc-color-fg-on-heavy); 5480 5481 &:not(:has(:disabled)):hover { 5482 ${x}â¢borderâ¢color: var(--arc-color-border-heavy); 5483 ${J}â¢borderâ¢color: var(--arc-color-border-heavy); 5484 } 5485 5486 &:has(:disabled) { 5487 ${x}â¢background: var(--arc-color-bg-disabled); 5488 ${x}â¢borderâ¢color: var(--arc-color-border-disabled); 5489 ${J}â¢borderâ¢color: var(--arc-color-border-on-stark); 5490 ${J}â¢color: var(--arc-color-bg-tertiary); 5491 } 5492 } 5493 5494 /* Uses Theme Colors */ 5495 &[data-state=on] { 5496 ${x}â¢background: var(--arc-color-bg-theme-heavy); 5497 ${x}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 5498 ${J}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 5499 ${J}â¢color: var(--arc-color-fg-on-theme-heavy); 5500 5501 &:not(:has(:disabled)):hover { 5502 ${x}â¢opacity: var(--arc-alpha-60); 5503 } 5504 5505 &:has(:disabled) { 5506 ${x}â¢opacity: var(--arc-alpha-30); 5507 } 5508 } 5509 5510 /* SIZES ------------------------------------------------------⢠*/ 5511 &[data-size=inherit] { 5512 ${ur}â¢fontâ¢size: 1em; 5513 ${ur}â¢width: 2.5em; 5514 ${ur}â¢height: 1.5em; 5515 ${ur}â¢gap: 0.5em; 5516 ${J}â¢size: 1.5em; 5517 ${J}â¢xâ¢shift: 0.25em; 5518 } 5519 5520 &[data-size=md] { /* @default */ 5521 ${ur}â¢fontâ¢size: var(${s}â¢14); 5522 ${ur}â¢width: var(${s}â¢40); 5523 ${ur}â¢height: var(${s}â¢24); 5524 ${ur}â¢gap: var(${s}â¢8); 5525 ${J}â¢xâ¢shift: var(${s}â¢4); 5526 ${J}â¢size: var(${s}â¢24); 5527 } 5528 5529 &[data-size=sm] { 5530 ${ur}â¢fontâ¢size: var(${s}â¢12); 5531 ${ur}â¢width: var(${s}â¢30); 5532 ${ur}â¢height: var(${s}â¢14); 5533 ${ur}â¢gap: var(${s}â¢8); 5534 ${J}â¢xâ¢shift: var(${s}â¢1); 5535 ${J}â¢size: var(${s}â¢16); 5536 } 5537 5538 /* Inter-Component Communication -------------------------------⢠*/ 5539 /* for: Setup defaults for ArcBooleanInputMask */ 5540 ${x}â¢borderâ¢radius: var(--arc-border-radius-pill); 5541 ${x}â¢width: var(${ur}â¢width); 5542 ${x}â¢height: var(${ur}â¢height); 5543 ${x}â¢xâ¢shift: var(${J}â¢xâ¢shift); 5544 ${x}â¢size: var(${J}â¢size); 5545 5546 /* for: ArcLabel */ 5547 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask to 5548 stay inline with the label text 5549 regardless of applied line-height */ 5550 5551 /* KNOB PLACEMENT ----------------------------------------------⢠*/ 5552 &[data-state=off] { 5553 ${J}â¢translate: calc(-100% + var(${J}â¢xâ¢shift)) -50%; 5554 } 5555 5556 &[data-state=on] { 5557 ${J}â¢translate: calc(0% - var(${J}â¢xâ¢shift)) -50%; 5558 } 5559 } 5560 5561 /* CORE STYLES ---------------------------------------------------⢠*/ 5562 [arc-switch]:not([hidden]) { 5563 font-size: var(--arc-switch-font-size, var(${ur}â¢fontâ¢size)); 5564 display: var(--arc-switch-display, inline-flex); 5565 align-items: var(--arc-switch-align-items, center); 5566 gap: var(--arc-switch-gap, var(${ur}â¢gap)); 5567 user-select: none; 5568 5569 [arc-switch-label] { 5570 font-size: inherit; 5571 hyphens: auto; 5572 } 5573
5574 [arc-input-type=switch]:where(:not(:checked)) { 5575 ${x}â¢zâ¢index: 1; 5576 } 5577 5578 [arc-input-mask-wrapper] { 5579 height: 1.25em; 5580 } 5581 5582 /* the knob */ 5583 [data-element=mask] { 5584 position: absolute; 5585 top: 50%; 5586 left: 50%; 5587 translate: var(${J}â¢translate); 5588 5589 display: inline-flex; 5590 width: var(${J}â¢size); 5591 height: var(${J}â¢size); 5592 5593 transition-duration: 100ms; 5594 transition-behavior: allow-discrete; 5595 transition-timing-function: ease-in-out; 5596 transition-property: 5597 opacity, 5598 background, 5599 color, 5600 border-color, 5601 outline, 5602 translate; 5603 5604 background: var(${J}â¢color); 5605 box-shadow: var(${J}â¢shadow); 5606 border: var(${x}â¢borderâ¢width) solid var(${J}â¢borderâ¢color); 5607 border-radius: var(--arc-border-radius-circle); 5608 pointer-events: none; 5609 } 5610 } 5611 5612} 5613`,K0=({disabled:a,id:r,name:e,size:o="md",value:t,label:l,labelPosition:n=Ee.After,onChange:h,labelOff:d,labelOn:v,...u})=>{const p=Kr(e,"arc-switch-name"),g=Kr(r,"arc-switch"),f=(I,M)=>{const _=I.checked?br.On:br.Off;h?.({...I,value:_},M)};!l&&(v||d)&&(l=v||d,n=v?Ee.After:Ee.Before);const k=(0,c.jsxs)(st,{type:"checkbox",children:[(0,c.jsx)(co,{type:"checkbox",name:p,id:g,checked:t===br.On,disabled:a,role:"switch","aria-checked":t===br.On,"aria-label":l?void 0:"Toggle switch",tabIndex:0,onChange:f}),(0,c.jsx)("span",{"data-element":"mask","aria-hidden":"true",tabIndex:-1})]}),z=(0,c.jsx)(ne,{htmlFor:g,"arc-switch-label":n,children:(0,c.jsx)(ie,{children:l})});return d&&v?(0,c.jsx)(G0,{...u,disabled:a,id:r,name:e,labelOff:d,labelOn:v,size:o,value:t,onChange:h}):(0,c.jsxs)("span",{...u,"arc-switch":"","data-state":t,"data-size":o,"data-label-position":n,role:"presentation","aria-live":"off",children:[l&&n===Ee.Before&&z,k,l&&n===Ee.After&&z]})};H("ArcSwitch",Z0);const Y0=["title","heading","subheading","body"],Wi=["h1","h2","h3","h4","h5","h6"],Gi=["code","div","li","p","pre","span"],Zi=[...Wi,...Gi],q0=[...Da],J0=["title-inherit","title-lg","title-md","title-sm"],X0=["heading-inherit","heading-lg","heading-md","heading-sm"],Q0=["subheading-inherit","subheading-lg","subheading-md","subheading-sm"],rv=L(lr,["inherit","primary","primary-inverse"]),av=["body-inherit","body-lg","body-md","body-sm","body-xs"],ev=Er(lr,["inherit","primary","secondary","primary-inverse","secondary-inverse","critical","warning","success","info"]),ov=L(So,["inherit","start","center","justify","end"]),tv=L(_o,["inherit","loose","standard","tight"]),cv={h1:"title",h2:"heading",h3:"heading",h4:"subheading",h5:"subheading",h6:"subheading",p:"body",span:"body",div:"body",code:"body",pre:"body",li:"body"},nv=a=>{const{align:r,lineHeight:e,size:o,variant:t,scheme:l="auto",isMonospace:n,tag:h,...d}=a,v=cv?.[h]??"body",u=o?.includes("inherit")?o?.split("-")?.[0]:o,p=t?.endsWith("-inverse");let g;return l!=="auto"?g=l:p&&(g=void 0),{...d,"arc-text":u||v,"arc-scheme":g,"data-is-monospace":n?"":void 0,"data-align":r?.includes("inherit")?void 0:r,"data-variant":t?.includes("inherit")?void 0:t,"data-line-height":e?.includes("inherit")?void 0:e}},ja=i`--arcâ¢text`,Qc=i`${ja}â¢font`,Te=i`${ja}â¢align`,$a=i`${ja}fg`,Ki=i`${ja}â¢flex`,Yi=i`${ja}â¢hyphens`,fo=i`${ja}â¢letterspacing`,ya=i`${ja}â¢lineheight`,qi=i`${ja}â¢opacity`,Ji=i`${ja}â¢whitespace`,se=i`${Qc}â¢family`,hr=i`${Qc}â¢size`,Ie=i`${Qc}â¢weight`,iv=i` 5614@layer arc-components { 5615 5616[arc-text] { 5617 /* SETUP ---------------------------------------------------------⢠*/ 5618 ${Te}: unset; 5619 ${$a}: unset; 5620 ${Ki}: unset; 5621 ${Yi}: auto; 5622 ${fo}: unset; 5623 ${ya}: unset; 5624 ${qi}: unset; 5625 ${Ji}: unset; 5626 5627 ${se}: unset; 5628 ${hr}: unset; 5629 ${Ie}: unset; 5630 5631 /* LINE HEIGHT ---------------------------------------------------⢠*/ 5632 5633 &[data-line-height=standard] { 5634 ${ya}: var(--arc-line-height-standard); 5635 } 5636 5637 &[data-line-height=loose] { 5638 ${ya}: var(--arc-line-height-loose); 5639 } 5640 5641 &[data-line-height=tight] { 5642 ${ya}: var(--arc-line-height-tight); 5643 } 5644 5645 /* ALIGNMENT -----------------------------------------------------⢠*/ 5646 5647 &[data-align=start] { 5648 ${Te}
5648: start; 5649 } 5650 5651 &[data-align=center] { 5652 ${Te}: center; 5653 } 5654 5655 &[data-align=justify] { 5656 ${Te}: justify; 5657 } 5658 5659 &[data-align=end] { 5660 ${Te}: end; 5661 } 5662 5663 /* VARIANTS ------------------------------------------------------⢠*/ 5664 5665 &[data-variant=primary] { 5666 ${$a}: var(--arc-color-fg-primary); 5667 } 5668 5669 /* @deprecated */ 5670 &[data-variant=primary-inverse] { 5671 ${$a}: var(--arc-color-fg-on-mono-inverse); 5672 } 5673 5674 &[data-variant=secondary] { 5675 ${$a}: var(--arc-color-fg-secondary); 5676 } 5677 5678 /* @deprecated - 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 5679 &[data-variant=secondary-inverse] { 5680 ${$a}: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 61.2%, transparent); 5681 } 5682 5683 &[data-variant=critical] { 5684 ${$a}: var(--arc-color-fg-critical-mid); 5685 } 5686 5687 &[data-variant=warning] { 5688 ${$a}: var(--arc-color-fg-warning-stark); 5689 } 5690 5691 &[data-variant=success] { 5692 ${$a}: var(--arc-color-fg-success-stark); 5693 } 5694 5695 &[data-variant=info] { 5696 ${$a}: var(--arc-color-fg-info-stark); 5697 } 5698 5699} 5700 5701/* FONT PROPERTIES -------------------------------------------------⢠*/ 5702 5703[arc-text^=title] { 5704 ${se}: var(--arc-font-family-title); 5705 ${Ie}: var(--arc-font-weight-title); 5706 ${fo}: var(--arc-letter-spacing-title); 5707 ${ya}: var(--arc-line-height-title); 5708 5709 ${hr}: 2em; /* @default title ⢠32÷16*1em ⢠same as 'title-md' @ 100% */ 5710 5711 &:where([arc-text*=-lg]) { 5712 ${hr}: var(--arc-font-size-title-lg); 5713 } 5714 5715 &:where([arc-text*=-md]) { 5716 ${hr}: var(--arc-font-size-title-md); 5717 } 5718 5719 &:where([arc-text*=-sm]) { 5720 ${hr}: var(--arc-font-size-title-sm); 5721 } 5722} 5723 5724[arc-text^=heading] { 5725 ${se}: var(--arc-font-family-heading); 5726 ${Ie}: var(--arc-font-weight-heading); 5727 ${fo}: var(--arc-letter-spacing-heading); 5728 ${ya}: var(--arc-line-height-heading); 5729 5730 ${hr}: 1.25em; /* @default heading ⢠20÷16*1em ⢠same as 'heading-md' @ 100% */ 5731 5732 &:where([arc-text*=-lg]) { 5733 ${hr}: var(--arc-font-size-heading-lg); 5734 } 5735 5736 &:where([arc-text*=-md]) { 5737 ${hr}: var(--arc-font-size-heading-md); 5738 } 5739 5740 &:where([arc-text*=-sm]) { 5741 ${hr}: var(--arc-font-size-heading-sm); 5742 } 5743} 5744 5745[arc-text^=subheading] { 5746 ${se}: var(--arc-font-family-subheading); 5747 ${Ie}: var(--arc-font-weight-subheading); 5748 ${fo}: unset; 5749 ${ya}: var(--arc-line-height-subheading); 5750 5751 ${hr}: 0.875em; /* @default subheading ⢠14÷16*1em ⢠same as 'subheading-md' @ 100% */ 5752 5753 &:where([arc-text*=-lg]) { 5754 ${hr}: var(--arc-font-size-subheading-lg); 5755 } 5756 5757 &:where([arc-text*=-md]) { 5758 ${hr}: var(--arc-font-size-subheading-md); 5759 } 5760 5761 &:where([arc-text*=-sm]) { 5762 ${hr}: var(--arc-font-size-subheading-sm); 5763 } 5764} 5765 5766[arc-text^=body] { 5767 ${se}: var(--arc-font-family-body); 5768 ${Ie}: var(--arc-font-weight-body); 5769 ${ya}: var(--arc-line-height-body); 5770 ${hr}: 0.875em; /* @default body ⢠14÷16*1em ⢠same as 'body-md' @ 100% */ 5771 5772 &:where([arc-text*=-lg]) { 5773 ${hr}: var(--arc-font-size-body-lg); 5774 } 5775 5776 &:where([arc-text*=-md]) { 5777 ${hr}: var(--arc-font-size-body-md); 5778 } 5779 5780 &:where([arc-text*=-sm]) { 5781 ${hr}: var(--arc-font-size-body-sm); 5782 } 5783 5784 &:where([arc-text*=-xs]) { 5785 ${hr}: var(--arc-font-size-body-xs); 5786 } 5787} 5788 5789[arc-text]:where(pre, code) { 5790 ${hr}: 1em; 5791} 5792 5793[arc-text]:where(pre, code, [data-is-monospace]) { 5794 ${se}: var(--arc-font-family-mono); 5795 ${ya}: var(--arc-line-height-mono); 5796} 5797 5798 5799/* CORE STYLES -----------------------------------------------------⢠*/ 5800 5801[arc-text] { 5802 /* conveniences for element properties */ 5803 flex: var(--arc-text-flex, var(${Ki})); 5804 hyphens: var(--arc-text-hyphens, var(${Yi})); /* not unset as fallback so text-breaks by default */ 5805 opacity: var(--arc-text-opacity, var(${qi})); 5806 text-align: var(--arc-text-align, var(${Te})); 5807 white-space: var(--arc-text-white-space, var(${Ji})); 5808 5809 color: var(--arc-text-color, var(${$a})); 5810 5811 font-size: var(--arc-text-font-size, var(${hr})); 5812 font-family: var(--arc-text-font-family, var(${se})); 5813 font-weight: var(--arc-text-font-weight, var(${Ie})); 5814 line-height: var(--arc-text-line-height, var(${ya})); 5815 letter-spacing: var(--arc-text-letter-spacing, var(${fo})); 5816 5817 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 5818} 5819 5820} 5821`,lv=a=>(0,y.forwardRef)((r,e)=>(0,y.createElement)(a,{...nv({...r,tag:a}),ref:e})),sv=[...Zi].reduce((a,r)=>({...a,[r]:lv(r)}),{});H("Arc",iv);const dv=Ti,hv=Ii,vv=L(u0,["outline","solid"]),uv=["text","number","password","email","url"],gv=(0,y.forwardRef)(({layout:a="hug",size:r="inherit",variant:e="outline",inputProps:o,headerLabel:t,headerSlot:l,inputPrefix:n,inputAction:h,inputSuffix:d,footerCaption:v,footerSlot:u,...p},g)=>{const{id:f,onChange:k,...z}=o,I=z?.type||"text",M=z?.disabled||void 0,_=z?.readOnly||void 0,E=z?.required||void 0,C=!!(t||l),S=!!(v||u);
5821return(0,c.jsxs)(rr.Wrapper,{...p,"arc-text-input":"","arc-input":I,layout:a,size:r,variant:e,children:[C&&(0,c.jsxs)(rr.Header,{children:[(0,c.jsx)(rr.HeaderLabel,{htmlFor:f,children:t}),!!l&&(0,c.jsx)(rr.Spacer,{}),(0,c.jsx)(rr.HeaderSlot,{children:l})]}),(0,c.jsxs)(rr.InputBody,{children:[(0,c.jsx)(rr.InputPrefix,{htmlFor:f,children:n}),(0,c.jsx)("input",{...z,ref:g,id:f,"arc-input-type":I,onChange:rr.onChangeHandler(k),"aria-disabled":M,"aria-readonly":_,"aria-required":E}),(0,c.jsx)(rr.InputSuffix,{htmlFor:f,children:d}),(0,c.jsx)(rr.InputAction,{children:h})]}),S&&(0,c.jsxs)(rr.Footer,{children:[(0,c.jsx)(rr.FooterCaption,{children:v}),!!u&&(0,c.jsx)(rr.Spacer,{}),(0,c.jsx)(rr.FooterSlot,{children:u})]})]})}),pv=L(lr,["common","ai","critical"]),Xi=[...Da],Qi=["default","success","warning","error"],rl=L(_r,["inherit","md"]),al=L(lr,["common"]),el=[...Ka],fv=[...ve],ol=["top-left","top-center","top-right","center","bottom-left","bottom-center","bottom-right"],mv=pv.filter(a=>a!=="critical"),tl={size:rl[1],variant:al[0],scheme:Xi[2],popover:el[2],placement:ol[4],severity:Qi[0],showDismiss:!0},cl=(a,r="toggle")=>{const e=document.getElementById(a);({toggle:()=>e?.togglePopover(),show:()=>e?.showPopover(),hide:()=>e?.hidePopover()})[r]()},nl=i`--arcâ¢progress`,bv=i`${nl}â¢bar`,$v=i`${nl}â¢value`,il=i`${bv}â¢bg`,mo=i`${$v}â¢bg`,yv=i` 5822@layer arc-components { 5823[arc-progress-bar] { 5824 ${il}: var(--arc-color-alpha-subtle); 5825 ${mo}: var(--arc-color-bg-brand-stark); 5826 5827 &[data-variant=ai] { 5828 /* @note - arc-gradient-ai-200 is not a horizontal gradient, and the light/dark values are not correct for this case */ 5829 ${mo}: linear-gradient(to right, #9c15ff, #1eb4fb); 5830 } 5831 5832 &[data-variant=critical] { 5833 ${mo}: var(--arc-color-bg-critical-mid); 5834 } 5835} 5836 5837[arc-progress-bar] { 5838 appearance: none; 5839 width: 100%; 5840 height: var(${s}â¢8); 5841 5842 /* firefox needs these at this level, other browsers can use these too */ 5843 background: var(--arc-progress-bar-background, var(${il})); 5844 border-radius: var(--arc-border-radius-pill); 5845 border: none; 5846 5847 /* turn off the default bar background for other browsers */ 5848 &::-webkit-progress-bar { background: none; } 5849 5850 /* firefox's progress-value bar */ 5851 &::-moz-progress-bar { 5852 border-radius: var(--arc-border-radius-pill); 5853 background: var(--arc-progress-bar-value-background, var(${mo})); 5854 } 5855 5856 /* all the others' progress-value bar */ 5857 &::-webkit-progress-value { 5858 border-radius: var(--arc-border-radius-pill); 5859 background: var(--arc-progress-bar-value-background, var(${mo})); 5860 } 5861} 5862 5863} 5864`,xv=({progress:a=0,variant:r="common",...e})=>(0,c.jsxs)("progress",{...e,"arc-progress-bar":"","data-variant":r,value:a,max:e.max||100,"aria-valuenow":a,"aria-valuemax":e.max||100,children:[a,"% "]});H("ArcProgressBar",yv);const xa=i`--arcâ¢toast`,Ct=i`${xa}â¢content`,ll=i`${xa}â¢color`,sl=i`${xa}â¢background`,bo=i`${xa}â¢iconâ¢color`,$o=i`${xa}â¢transition`,kv=i` 5865@layer arc-components { 5866 5867 [arc-toast] { 5868 ${Ct}â¢gap: var(${m}â¢2); 5869 ${$o}â¢duration: 300ms; 5870 ${bo}: currentcolor; 5871 5872 /* SIZES -------------------------------------------------------⢠*/ 5873 &[data-size=md] { /* @default */ 5874 ${xa}â¢fontâ¢size: var(${s}â¢16); 5875 ${Ct}â¢fontâ¢size: var(${s}â¢14); 5876 } 5877 5878 &[data-size=inherit] { 5879 ${xa}â¢fontâ¢size: 1em; 5880 ${Ct}â¢fontâ¢size: 0.875em; 5881 } 5882 5883 /* STATES ------------------------------------------------------⢠*/ 5884 &[data-severity=error] { 5885 ${bo}: var(--arc-color-fg-critical-mid); 5886 } 5887 5888 &[data-severity=success] { 5889 ${bo}: var(--arc-color-fg-success-mid); 5890 } 5891 5892 &[data-severity=warning] { 5893 ${bo}: var(--arc-color-fg-warning-mid); 5894 } 5895 5896 /* VARIANTS ----------------------------------------------------⢠*/ 5897 &[data-variant=common] { /* @default */ 5898 ${sl}: var(--arc-color-bg-mono); 5899 ${ll}: var(--arc-color-fg-primary); 5900 } 5901 5902 /* PLACEMENTS --------------------------------------------------⢠*/ 5903 &[data-placement*=top-] { inset-block-start: var(--arc-toast-inset-block-start, 0); } 5904 &[data-placement*=bottom-] { inset-block-end: var(--arc-toast-inset-block-end, 0); } 5905 &[data-placement*=-left] { inset-inline-start: var(--arc-toast-inset-inline-start, 0); } 5906 &[data-placement*=-right] { inset-inline-end: var(--arc-toast-inset-inline-end, 0); } 5907 &[data-placement*=-center] { inset-inline-start: var(--arc-toast-inset-inline-start, 50%); translate: -50% 0; } 5908 &[data-placement=center] { inset: var(--arc-toast-inset, 0); margin: var(--arc-toast-offset, auto); } 5909 } 5910 5911 /* CORE STYLES ---------------------------------------------------⢠*/ 5912 [arc-toast] { 5913 inset: var(--arc-toast-inset, auto); 5914 margin: var(--arc-toast-offset, var(${m}â¢16)); /* @note: '-offset' here is legacy variable name */ 5915 align-items: center; 5916 5917 font-size: var(${xa}â¢fontâ¢size); /* @note: see [arc-toast-content] for actual font-size via the [data-size] attribute */ 5918 5919 color: var(--arc-toast-color, var(${ll})); 5920 background-color: var(--arc-toast-background, var(${sl})); 5921 border-radius: var(--arc-toast-border-radius, var(--arc-border-radius-lg)); 5922 padding: var(--arc-toast-padding, var(${m}â¢12) var(${m}â¢12) var(${m}â¢12) var(${m}â¢16)); 5923 box-shadow: var(--arc-shadow-lg); 5924 border: none; 5925 5926 max-width: var(--arc-toast-max-width, 40em); 5927 min-width: var(--arc-toast-min-width, 12em); 5928 min-height: var(--arc-toast-min-height, var(${xa}â¢minâ¢height, 3.5em)); 5929 5930 &:has([arc-toast-heading] + [arc-toast-subtext]) { 5931 ${xa}â¢minâ¢height: 5em; 5932 } 5933 5934 [arc-toast-content-grid] { 5935 flex: 1; 5936 display: grid; 5937 grid-template-columns: 1fr auto; 5938 gap: var(${m}â¢8) var(${m}â¢16); 5939 } 5940 5941 [arc-toast-body] { 5942 display: flex; 5943 align-items: baseline; 5944 gap: var(${m}â¢8); 5945 padding: var(${m}â¢4) 0; /* vertical padding to align with action button text */ 5946 min-width: 14em; 5947 5948 p { 5949 margin: 0; 5950 } 5951 } 5952 5953 [arc-toast-icon] { 5954 --arc-icon-color: var(--arc-toast-icon-color, var(${bo}
5954)); 5955 5956 height: 1lh; 5957 padding: 0 var(${m}â¢2); 5958 } 5959 5960 [arc-toast-content] { 5961 flex: 1; 5962 5963 font-size: var(--arc-toast-font-size, var(${Ct}â¢fontâ¢size)); 5964 line-height: var(--arc-line-height-loose); 5965 hyphens: auto; 5966 5967 display: block; 5968 5969 &:has([arc-toast-heading] + [arc-toast-subtext]) { 5970 display: flex; 5971 flex-direction: column; 5972 gap: var(${m}â¢2); 5973 } 5974 } 5975 5976 [arc-toast-actions] { 5977 align-self: baseline; 5978 5979 display: flex; 5980 align-items: center; 5981 gap: 0.5em; 5982 } 5983 5984 [arc-toast-progress-bar] { 5985 grid-column: 1 / -1; 5986 } 5987 } 5988 5989 /* POPOVER + state -----------------------------------------------⢠*/ 5990 5991 [arc-toast] { 5992 opacity: 0; 5993 content-visibility: hidden; 5994 transition: 5995 display var(${$o}â¢duration) allow-discrete, 5996 overlay var(${$o}â¢duration) allow-discrete, 5997 content-visibility var(${$o}â¢duration) allow-discrete, 5998 opacity var(${$o}â¢duration); 5999 } 6000 6001 [arc-toast]:popover-open { 6002 display: flex; 6003 opacity: 1; 6004 content-visibility: visible; 6005 } 6006 6007 @starting-style { 6008 [arc-toast]:popover-open { 6009 opacity: 0; 6010 content-visibility: hidden; 6011 } 6012 } 6013} 6014`,dl=({id:a,children:r,icon:e,heading:o,subtext:t,dismissProps:l,showDismiss:n=!0,onClose:h,actionSlot:d,size:v="md",variant:u="common",scheme:p=tl.scheme,placement:g="bottom-left",getToastId:f,progressBarProps:k,severity:z,...I})=>{const M=()=>{h?.()},_=p==="auto"?void 0:p,E=!!d||n,C=Kr(a,"arc-toast"),{variant:S,hierarchy:F,...P}=l||{};(0,y.useEffect)(()=>{f?.(C)},[f,C]);const G=Mn(e);return(0,c.jsx)("div",{...I,"arc-toast":"","arc-scheme":_,"data-size":v,"data-variant":u,"data-placement":g,"data-severity":z||void 0,id:C,children:(0,c.jsxs)("div",{"arc-toast-content-grid":"",children:[(0,c.jsxs)("div",{"arc-toast-body":"",children:[e&&(0,c.jsx)(D,{icon:G,"arc-toast-icon":""}),(0,c.jsx)("div",{"arc-toast-content":"",children:r||(0,c.jsxs)(c.Fragment,{children:[o&&(0,c.jsx)("header",{"arc-toast-heading":"",children:(0,c.jsx)("strong",{children:o})}),t&&(0,c.jsx)("p",{"arc-toast-subtext":"",children:t})]})})]}),E&&(0,c.jsxs)("div",{"arc-toast-actions":"",children:[d,n&&(0,c.jsx)(Ir,{icon:"fa-regular fa-xmark-large",layout:"icon",variant:"common",hierarchy:"tertiary",size:"md",shape:"square","aria-label":"Dismiss",...P,popoverTarget:C,onClick:M})]}),k&&(0,c.jsx)(xv,{...k,variant:z==="error"?"critical":k.variant,"arc-toast-progress-bar":""})]})})};dl.handleToast=cl,H("ArcToast",kv);var Xv=Br(71695),$r,cr,Zr,ua,wv,hl;function Av(a=!1){if(typeof a!="boolean")throw new Error("defaultValue must be `true` or `false`");const[r,e]=$r(a),o=cr(()=>{e(!0)},[]),t=cr(()=>{e(!1)},[]),l=cr(()=>{e(n=>!n)},[]);return{value:r,setValue:e,setTrue:o,setFalse:t,toggle:l}}var ga=typeof window<"u"?y.useLayoutEffect:y.useEffect;function aa(a,r,e,o){const t=(0,y.useRef)(r);ga(()=>{t.current=r},[r]),(0,y.useEffect)(()=>{const l=e?.current??window;if(!(l&&l.addEventListener))return;const n=h=>{t.current(h)};return l.addEventListener(a,n,o),()=>{l.removeEventListener(a,n,o)}},[a,e,o])}function Qv(a){aa("click",r=>{a(r)})}function ru(){const[a,r]=$r(null),e=cr(async o=>{if(!navigator?.clipboard)return console.warn("Clipboard not supported"),!1;try{return await navigator.clipboard.writeText(o),r(o),!0}catch(t){return console.warn("Copy failed",t),r(null),!1}},[]);return[a,e]}function zv(a){const[r,e]=$r(a??0),o=cr(()=>{e(n=>n+1)},[]),t=cr(()=>{e(n=>n-1)},[]),l=cr(()=>{e(a??0)},[a]);return{count:r,increment:o,decrement:t,reset:l,setCount:e}}function Cv(a,r){const e=Zr(a);ga(()=>{e.current=a},[a]),ua(()=>{if(r===null)return;const o=setInterval(()=>{e.current()},r);return()=>{clearInterval(o)}},[r])}function au({countStart:a,countStop:r=0,intervalMs:e=1e3,isIncrement:o=!1}){const{count:t,increment:l,decrement:n,reset:h}=zv(a),{value:d,setTrue:v,setFalse:u}=Av(!1),p=cr(()=>{u(),h()},[u,h]),g=cr(()=>{if(t===r){u();return}o?l():n()},[t,r,n,l,o,u]);return Cv(g,d?e:null),[t,{startCountdown:v,stopCountdown:u,resetCountdown:p}]}function St(a){const r=(0,y.useRef)(()=>{throw new Error("Cannot call an event handler while rendering.")});return ga(()=>{r.current=a},[a]),(0,y.useCallback)((...e)=>{var o;return(o=r.current)==null?void 0:o.call(r,...e)},[r])}var rn=typeof window>"u";function an(a,r,e={}){const{initializeWithValue:o=!0}=e,t=(0,y.useCallback)(g=>e.serializer?e.serializer(g):JSON.stringify(g),[e]),l=(0,y.useCallback)(g=>{if(e.deserializer)return e.deserializer(g);if(g==="undefined")return;const f=r instanceof Function?r():r;let k;try{k=JSON.parse(g)}catch(z){return console.error("Error parsing JSON:",z),f}return k},[e,r]),n=(0,y.useCallback)(()=>{const g=r instanceof Function?r():r;if(rn)return g;try{const f=window.localStorage.getItem(a);return f?l(f):g}catch(f){return console.warn(`Error reading localStorage key \u201C${a}
6014\u201D:`,f),g}},[r,a,l]),[h,d]=(0,y.useState)(()=>o?n():r instanceof Function?r():r),v=St(g=>{rn&&console.warn(`Tried setting localStorage key \u201C${a}\u201D even though environment is not a client`);try{const f=g instanceof Function?g(n()):g;window.localStorage.setItem(a,t(f)),d(f),window.dispatchEvent(new StorageEvent("local-storage",{key:a}))}catch(f){console.warn(`Error setting localStorage key \u201C${a}\u201D:`,f)}}),u=St(()=>{rn&&console.warn(`Tried removing localStorage key \u201C${a}\u201D even though environment is not a client`);const g=r instanceof Function?r():r;window.localStorage.removeItem(a),d(g),window.dispatchEvent(new StorageEvent("local-storage",{key:a}))});(0,y.useEffect)(()=>{d(n())},[a]);const p=(0,y.useCallback)(g=>{g.key&&g.key!==a||d(n())},[a,n]);return aa("storage",p),aa("local-storage",p),[h,v,u]}var Sv=typeof window>"u";function vl(a,{defaultValue:r=!1,initializeWithValue:e=!0}={}){const o=h=>Sv?r:window.matchMedia(h).matches,[t,l]=$r(()=>e?o(a):r);function n(){l(o(a))}return ga(()=>{const h=window.matchMedia(a);return n(),h.addListener?h.addListener(n):h.addEventListener("change",n),()=>{h.removeListener?h.removeListener(n):h.removeEventListener("change",n)}},[a]),t}var _v="(prefers-color-scheme: dark)",Ev="usehooks-ts-dark-mode";function eu(a={}){const{defaultValue:r,localStorageKey:e=Ev,initializeWithValue:o=!0}=a,t=vl(_v,{initializeWithValue:o,defaultValue:r}),[l,n]=an(e,r??t??!1,{initializeWithValue:o});return ga(()=>{t!==l&&n(t)},[t]),{isDarkMode:l,toggle:()=>{n(h=>!h)},enable:()=>{n(!0)},disable:()=>{n(!1)},set:h=>{n(h)}}}function ul(a){const r=Zr(a);r.current=a,ua(()=>()=>{r.current()},[])}function en(a,r=500,e){const o=Zr();ul(()=>{o.current&&o.current.cancel()});const t=wv(()=>{const l=hl(a,r,e),n=(...h)=>l(...h);return n.cancel=()=>{l.cancel()},n.isPending=()=>!!o.current,n.flush=()=>l.flush(),n},[a,r,e]);return ua(()=>{o.current=hl(a,r,e)},[a,r,e]),t}function ou(a,r,e){const o=e?.equalityFn??((v,u)=>v===u),t=a instanceof Function?a():a,[l,n]=$r(t),h=Zr(t),d=en(n,r,e);return o(h.current,t)||(d(t),h.current=t),[l,d]}function tu(a,r={}){const{preserveTitleOnUnmount:e=!0}=r,o=Zr(null);ga(()=>{o.current=window.document.title},[]),ga(()=>{window.document.title=a},[a]),ul(()=>{!e&&o.current&&(window.document.title=o.current)})}function cu(a){const[r,e]=$r(!1),o=()=>{e(!0)},t=()=>{e(!1)};return aa("mouseenter",o,a),aa("mouseleave",t,a),r}function nu({threshold:a=0,root:r=null,rootMargin:e="0%",freezeOnceVisible:o=!1,initialIsIntersecting:t=!1,onChange:l}={}){var n;const[h,d]=$r(null),[v,u]=$r(()=>({isIntersecting:t,entry:void 0})),p=Zr();p.current=l;const g=((n=v.entry)==null?void 0:n.isIntersecting)&&o;ua(()=>{if(!h||!("IntersectionObserver"in window)||g)return;let z;const I=new IntersectionObserver(M=>{const _=Array.isArray(I.thresholds)?I.thresholds:[I.thresholds];M.forEach(E=>{const C=E.isIntersecting&&_.some(S=>E.intersectionRatio>=S);u({isIntersecting:C,entry:E}),p.current&&p.current(C,E),C&&o&&z&&(z(),z=void 0)})},{threshold:a,root:r,rootMargin:e});return I.observe(h),()=>{I.disconnect()}},[h,JSON.stringify(a),r,e,g,o]);const f=Zr(null);ua(()=>{var z;!h&&((z=v.entry)!=null&&z.target)&&!o&&!g&&f.current!==v.entry.target&&(f.current=v.entry.target,u({isIntersecting:t,entry:void 0}))},[h,v.entry,o,g,t]);const k=[d,!!v.isIntersecting,v.entry];return k.ref=k[0],k.isIntersecting=k[1],k.entry=k[2],k}function iu(){const[a,r]=$r(!1);return ua(()=>{r(!0)},[]),a}function Tv(){const a=Zr(!1);return ua(()=>(a.current=!0,()=>{a.current=!1}),[]),cr(()=>a.current,[])}function lu(a=new Map){const[r,e]=$r(new Map(a)),o={set:cr((t,l)=>{e(n=>{const h=new Map(n);return h.set(t,l),h})},[]),setAll:cr(t=>{e(()=>new Map(t))},[]),remove:cr(t=>{e(l=>{const n=new Map(l);return n.delete(t),n})},[]),reset:cr(()=>{e(()=>new Map)},[])};return[r,o]}function su(a,r,e="mousedown",o={}){aa(e,t=>{const l=t.target;if(!l||!l.isConnected)return;(Array.isArray(a)?a.filter(h=>!!h.current).every(h=>h.current&&!h.current.contains(l)):a.current&&!a.current.contains(l))&&r(t)},void 0,o)}var gl=typeof window>"u";function du(a,r={}){let{initializeWithValue:e=!0}=r;gl&&(e=!1);const o=cr(d=>{if(r.deserializer)return r.deserializer(d);if(d==="undefined")return;let v;try{v=JSON.parse(d)}catch(u){return console.error("Error parsing JSON:",u),null}return v},[r]),t=cr(()=>{if(gl)return null;try{const d=window.localStorage.getItem(a);return d?o(d):null}catch(d){return console.warn(`Error reading localStorage key \u201C${a}
6014\u201D:`,d),null}},[a,o]),[l,n]=$r(()=>{if(e)return t()});ua(()=>{n(t())},[a]);const h=cr(d=>{d.key&&d.key!==a||n(t())},[a,t]);return aa("storage",h),aa("local-storage",h),l}var pl={width:void 0,height:void 0};function hu(a){const{ref:r,box:e="content-box"}=a,[{width:o,height:t},l]=$r(pl),n=Tv(),h=Zr({...pl}),d=Zr(void 0);return d.current=a.onResize,ua(()=>{if(!r.current||typeof window>"u"||!("ResizeObserver"in window))return;const v=new ResizeObserver(([u])=>{const p=e==="border-box"?"borderBoxSize":e==="device-pixel-content-box"?"devicePixelContentBoxSize":"contentBoxSize",g=fl(u,p,"inlineSize"),f=fl(u,p,"blockSize");if(h.current.width!==g||h.current.height!==f){const z={width:g,height:f};h.current.width=g,h.current.height=f,d.current?d.current(z):n()&&l(z)}});return v.observe(r.current,{box:e}),()=>{v.disconnect()}},[e,r,n]),{width:o,height:t}}function fl(a,r,e){return a[r]?Array.isArray(a[r])?a[r][0][e]:a[r][e]:r==="contentBoxSize"?a.contentRect[e==="inlineSize"?"width":"height"]:void 0}var ml=typeof window>"u";function vu(a={}){let{initializeWithValue:r=!0}=a;ml&&(r=!1);const e=()=>{if(!ml)return window.screen},[o,t]=$r(()=>{if(r)return e()}),l=en(t,a.debounceDelay);function n(){const h=e(),d=a.debounceDelay?l:t;if(h){const{width:v,height:u,availHeight:p,availWidth:g,colorDepth:f,orientation:k,pixelDepth:z}=h;d({width:v,height:u,availHeight:p,availWidth:g,colorDepth:f,orientation:k,pixelDepth:z})}}return aa("resize",n),ga(()=>{n()},[]),o}var _t=new Map;function Iv(a){const r=document.querySelector(`script[src="${a}"]`),e=r?.getAttribute("data-status");return{node:r,status:e}}function uu(a,r){const[e,o]=$r(()=>!a||r?.shouldPreventLoad?"idle":typeof window>"u"?"loading":_t.get(a)??"loading");return ua(()=>{if(!a||r?.shouldPreventLoad)return;const t=_t.get(a);if(t==="ready"||t==="error"){o(t);return}const l=Iv(a);let n=l.node;if(n)o(l.status??t??"loading");else{n=document.createElement("script"),n.src=a,n.async=!0,r?.id&&(n.id=r.id),n.setAttribute("data-status","loading"),document.body.appendChild(n);const d=v=>{const u=v.type==="load"?"ready":"error";n?.setAttribute("data-status",u)};n.addEventListener("load",d),n.addEventListener("error",d)}const h=d=>{const v=d.type==="load"?"ready":"error";o(v),_t.set(a,v)};return n.addEventListener("load",h),n.addEventListener("error",h),()=>{n&&(n.removeEventListener("load",h),n.removeEventListener("error",h)),n&&r?.removeOnUnmount&&(n.remove(),_t.delete(a))}},[a,r?.shouldPreventLoad,r?.removeOnUnmount,r?.id]),e}var jv=typeof window>"u";function gu(a={}){const{autoLock:r=!0,lockTarget:e,widthReflow:o=!0}=a,[t,l]=$r(!1),n=Zr(null),h=Zr(null),d=()=>{if(n.current){const{overflow:u,paddingRight:p}=n.current.style;if(h.current={overflow:u,paddingRight:p},o){const g=n.current===document.body?window.innerWidth:n.current.offsetWidth,f=parseInt(window.getComputedStyle(n.current).paddingRight,10)||0,k=g-n.current.scrollWidth;n.current.style.paddingRight=`${k+f}px`}n.current.style.overflow="hidden",l(!0)}},v=()=>{n.current&&h.current&&(n.current.style.overflow=h.current.overflow,o&&(n.current.style.paddingRight=h.current.paddingRight)),l(!1)};return ga(()=>
6014{if(!jv)return e&&(n.current=typeof e=="string"?document.querySelector(e):e),n.current||(n.current=document.body),r&&d(),()=>{v()}},[r,e,o]),{isLocked:t,lock:d,unlock:v}}var on=typeof window>"u";function Lv(a,r,e={}){const{initializeWithValue:o=!0}=e,t=(0,y.useCallback)(g=>e.serializer?e.serializer(g):JSON.stringify(g),[e]),l=(0,y.useCallback)(g=>{if(e.deserializer)return e.deserializer(g);if(g==="undefined")return;const f=r instanceof Function?r():r;let k;try{k=JSON.parse(g)}catch(z){return console.error("Error parsing JSON:",z),f}return k},[e,r]),n=(0,y.useCallback)(()=>{const g=r instanceof Function?r():r;if(on)return g;try{const f=window.sessionStorage.getItem(a);return f?l(f):g}catch(f){return console.warn(`Error reading sessionStorage key \u201C${a}\u201D:`,f),g}},[r,a,l]),[h,d]=(0,y.useState)(()=>o?n():r instanceof Function?r():r),v=St(g=>{on&&console.warn(`Tried setting sessionStorage key \u201C${a}\u201D even though environment is not a client`);try{const f=g instanceof Function?g(n()):g;window.sessionStorage.setItem(a,t(f)),d(f),window.dispatchEvent(new StorageEvent("session-storage",{key:a}))}catch(f){console.warn(`Error setting sessionStorage key \u201C${a}\u201D:`,f)}}),u=St(()=>{on&&console.warn(`Tried removing sessionStorage key \u201C${a}\u201D even though environment is not a client`);const g=r instanceof Function?r():r;window.sessionStorage.removeItem(a),d(g),window.dispatchEvent(new StorageEvent("session-storage",{key:a}))});(0,y.useEffect)(()=>{d(n())},[a]);const p=(0,y.useCallback)(g=>{g.key&&g.key!==a||d(n())},[a,n]);return aa("storage",p),aa("session-storage",p),[h,v,u]}function pu(a){const[r,e]=$r(1),o=r+1<=a,t=r-1>0,l=cr(v=>{const u=v instanceof Function?v(r):v;if(u>=1&&u<=a){e(u);return}throw new Error("Step not valid")},[a,r]),n=cr(()=>{o&&e(v=>v+1)},[o]),h=cr(()=>{t&&e(v=>v-1)},[t]),d=cr(()=>{e(1)},[]);return[r,{goToNextStep:n,goToPrevStep:h,canGoToNextStep:o,canGoToPrevStep:t,setStep:l,reset:d}]}var Rv="(prefers-color-scheme: dark)",Mv="usehooks-ts-ternary-dark-mode";function fu({defaultValue:a="system",localStorageKey:r=Mv,initializeWithValue:e=!0}={}){const o=vl(Rv,{initializeWithValue:e}),[t,l]=an(r,a,{initializeWithValue:e});return{isDarkMode:t==="dark"||t==="system"&&o,ternaryDarkMode:t,setTernaryDarkMode:l,toggleTernaryDarkMode:()=>{const d=["light","system","dark"];l(v=>{const u=(d.indexOf(v)+1)%d.length;return d[u]})}}}function mu(a,r){const e=Zr(a);ga(()=>{e.current=a},[a]),ua(()=>{if(!r&&r!==0)return;const o=setTimeout(()=>{e.current()},r);return()=>{clearTimeout(o)}},[r])}function bu(a){const[r,e]=$r(!!a),o=cr(()=>{e(t=>!t)},[]);return[r,o,e]}var Bv=typeof window>"u";function $u(a={}){let{initializeWithValue:r=!0}=a;Bv&&(r=!1);const[e,o]=$r(()=>r?{width:window.innerWidth,height:window.innerHeight}:{width:void 0,height:void 0}),t=en(o,a.debounceDelay);function l(){(a.debounceDelay?t:o)({width:window.innerWidth,height:window.innerHeight})}return aa("resize",l),ga(()=>{l()},[]),e}var yo;(function(a){a.None="none",a.Persistent="localStorage",a.Temporary="sessionStorage"})(yo||(yo={}));const Pv=(a,r,e)=>{const[o,t]=(0,y.useState)(r),[l,n]=Lv(a,r),[h,d]=an(a,r);return e===yo.Temporary?[l,n]:e===yo.Persistent?[h,d]:[o,t]},Ov=()=>typeof DOMRect<"u"?new DOMRect:{x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0,toJSON:()=>({x:0,y:0,width:0,height:0,top:0,right:0,bottom:0,left:0})}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.