vendor: 5,517 bytes, line 1
1(globalThis.wpRiseJsonp=globalThis.wpRiseJsonp||[]).push([["defaultVendors-node_modules_pnpm_articulate_design-system_1_22_0__articulate_design-system-to-32e01d"],{98998(Hi){var wt="Expected a function",sa=NaN,re="[object Symbol]",Ct=/^\s+|\s+$/g,Wn=/^[-+]0x[0-9a-f]+$/i,Co=/^0b[01]+$/i,zr=/^0o[0-7]+$/i,At=parseInt,Ia=typeof globalThis=="object"&&globalThis&&globalThis.Object===Object&&globalThis,St=typeof self=="object"&&self&&self.Object===Object&&self,zt=Ia||St||Function("return this")(),aa=Object.prototype,Se=aa.toString,Et=Math.max,Kn=Math.min,ze=function(){return zt.Date.now()};function Ye(lr,Vr,ja){var ge,q,Kr,La,va,pa,_e=0,Tt=!1,Ra=!1,n=!0;if(typeof lr!="function")throw new TypeError(wt);Vr=Ao(Vr)||0,Ee(ja)&&(Tt=!!ja.leading,Ra="maxWait"in ja,Kr=Ra?Et(Ao(ja.maxWait)||0,Vr):Kr,n="trailing"in ja?!!ja.trailing:n);function h(Er){var Ha=ge,Ie=q;return ge=q=void 0,_e=Er,La=lr.apply(Ie,Ha),La}function qe(Er){return _e=Er,va=setTimeout(Te,Vr),Tt?h(Er):La}function So(Er){var Ha=Er-pa,Ie=Er-_e,It=Vr-Ha;return Ra?Kn(It,Kr-Ie):It}function Ze(Er){var Ha=Er-pa,Ie=Er-_e;return pa===void 0||Ha>=Vr||Ha<0||Ra&&Ie>=Kr}function Te(){var Er=ze();if(Ze(Er))return zo(Er);va=setTimeout(Te,So(Er))}function zo(Er){return va=void 0,n&&ge?h(Er):(ge=q=void 0,La)}function Yn(){va!==void 0&&clearTimeout(va),_e=0,ge=pa=q=va=void 0}function s(){return va===void 0?La:zo(ze())}function Eo(){var Er=ze(),Ha=Ze(Er);if(ge=arguments,q=this,pa=Er,Ha){if(va===void 0)return qe(pa);if(Ra)return va=setTimeout(Te,Vr),h(pa)}return va===void 0&&(va=setTimeout(Te,Vr)),La}return Eo.cancel=Yn,Eo.flush=s,Eo}function Ee(lr){var Vr=typeof lr;return!!lr&&(Vr=="object"||Vr=="function")}function _t(lr){return!!lr&&typeof lr=="object"}function Gn(lr){return typeof lr=="symbol"||_t(lr)&&Se.call(lr)==re}function Ao(lr){if(typeof lr=="number")return lr;if(Gn(lr))return sa;if(Ee(lr)){var Vr=typeof lr.valueOf=="function"?lr.valueOf():lr;lr=Ee(Vr)?Vr+"":Vr}if(typeof lr!="string")return lr===0?lr:+lr;lr=lr.replace(Ct,"");var ja=Co.test(lr);return ja||zr.test(lr)?At(lr.slice(2),ja?2:8):Wn.test(lr)?sa:+lr}Hi.exports=Ye},50650(Hi,wt,sa){"use strict";sa.r(wt),sa.d(wt,{Arc:()=>Rf,ArcAbstractFlexLayouts:()=>Vr,ArcAbstractGapSizes:()=>_t,ArcAbstractIconSizes:()=>Ee,ArcAbstractOrientations:()=>ja,ArcAbstractPopoverActions:()=>Ye,ArcAbstractPopoverModes:()=>ze,ArcAbstractTextLayouts:()=>lr,ArcAbstractTextOverflows:()=>Ao,ArcAbstractTextSizes:()=>Gn,ArcAvatar:()=>vc,ArcAvatarColors:()=>is,ArcAvatarColorsReserved:()=>gu,ArcAvatarOverflow:()=>g0,ArcAvatarOverflowSizes:()=>$u,ArcAvatarPile:()=>Wu,ArcAvatarPileSizes:()=>bu,ArcAvatarSizes:()=>vu,ArcAvatarText:()=>pc,ArcAvatarTextGapSizes:()=>pu,ArcAvatarTextOverflows:()=>fu,ArcAvatarTextSizes:()=>mu,ArcBadge:()=>E0,ArcBadgeColors:()=>x0,ArcBadgeContrasts:()=>A0,ArcBadgeCount:()=>O0,ArcBadgeCountColors:()=>k0,ArcBadgeCountContrasts:()=>M0,ArcBadgeCountShapes:()=>B0,ArcBadgeCountSizes:()=>R0,ArcBadgeCountVariants:()=>P0,ArcBadgeLayouts:()=>C0,ArcBadgeSizes:()=>w0,ArcBadgeVariants:()=>S0,ArcBanner:()=>eg,ArcBannerActionPlacements:()=>Z0,ArcBannerAlignments:()=>X0,ArcBannerDefaults:()=>fe,ArcBannerDensities:()=>Y0,ArcBannerLayouts:()=>q0,ArcBannerSchemes:()=>J0,ArcBannerVariants:()=>rg,ArcButton:()=>kr,ArcButtonDeprecatedVariants:()=>Hs,ArcButtonHierarchies:()=>Ph,ArcButtonLayouts:()=>Ih,ArcButtonPopoverActions:()=>Mh,ArcButtonSchemes:()=>Lh,ArcButtonShadows:()=>Rh,ArcButtonShapes:()=>_h,ArcButtonSizes:()=>Th,ArcButtonVariants:()=>jh,ArcCheckbox:()=>Qs,ArcCheckboxBar:()=>fg,ArcCheckboxBarLayouts:()=>gg,ArcCheckboxBarOption:()=>pg,ArcCheckboxBarSizes:()=>vg,ArcCheckboxLayouts:()=>lg,ArcCheckboxSizes:()=>dg,ArcCheckboxVariants:()=>ug,ArcColorAllTools:()=>rl,ArcColorPalette:()=>yn,ArcColorPaletteAddFlows:()=>$g,ArcColorPicker:()=>Ve,ArcColorPickerDefaults:()=>$e,ArcColorPickerModes:()=>mg,ArcColorSimpleTools:()=>al,ArcColorSwatch:()=>ii,ArcColorSwatchKinds:()=>bg,ArcColorValueFormats:()=>Uf,ArcDropdownMenu:()=>ki,ArcIcon:()=>cr,ArcIconText:()=>Yr,ArcIconTextVariants:()=>hh,ArcInputAction:()=>cd,ArcLabel:()=>me,ArcLabelContent:()=>Oe,ArcLabelLayouts:()=>tg,ArcLink:()=>ip,ArcLinkVariants:()=>cp,ArcModal:()=>Ep,ArcModalAlert:()=>Tp,ArcModalAlertDefaults:()=>se,ArcModalAlertVariants:()=>up,ArcModalBackdropColors:()=>hp,ArcModalBodyPaddings:()=>gp,ArcModalCloseReasons:()=>pp,ArcModalCommonDefaults:()=>ia,ArcModalCommonVariants:()=>lp,ArcModalConfirm:()=>gd,ArcModalConfirmDefaults:()=>we,ArcModalConfirmVariants:()=>dp,ArcModalSchemes:()=>sp,ArcModalSizes:()=>vp,ArcPopover:()=>te,ArcPopoverActions:()=>Gu,ArcPopoverAnchors:()=>bc,ArcPopoverBoundaries:()=>$c,ArcPopoverButton:()=>Wo,ArcPopoverDefaults:()=>da,ArcPopoverDensities:()=>ms,ArcPopoverModes:()=>fc,ArcPopoverSchemes:()=>mc,ArcPopoverVariants:()=>fs,ArcPopoverVariantsWithOutline:()=>Yu,ArcRadio:()=>vd,ArcRadioBar:()=>Dp,ArcRadioBarLayouts:()=>Pp,ArcRadioBarOption:()=>Bp,ArcRadioBarSizes:()=>Mp,ArcRadioLayouts:()=>jp,ArcRadioSizes:()=>Lp,ArcSearch:()=>wd,ArcSearchLayouts:()=>rf,ArcSearchSizes:()=>af,ArcSearchVariants:()=>ef,ArcSelect:()=>pf,ArcSelectLayouts:()=>cf,ArcSelectSizes:()=>sf,ArcSelectVariants:()=>lf,ArcSwitch:()=>$f,ArcSwitchLabelPositions:()=>$o,ArcSwitchSizes:()=>ff,ArcSwitchStates:()=>Hr,ArcSystemAIGradients:()=>Et,ArcSystemAlignments:()=>St,ArcSystemColors:()=>Se,ArcSystemGradients:()=>Kn,ArcSystemHierarchies:()=>At,ArcSystemLayouts:()=>Ia,ArcSystemLineHeights:()=>zt,ArcSystemSchemes:()=>re,ArcSystemShadows:()=>Ct,ArcSystemShapes:()=>Co,ArcSystemSizes:()=>aa,ArcSystemSurfaces:()=>
1Wn,ArcSystemVariants:()=>zr,ArcTextAlignments:()=>Ef,ArcTextBodyElements:()=>jd,ArcTextBodySizes:()=>Sf,ArcTextBodyVariants:()=>zf,ArcTextElements:()=>Ld,ArcTextHeadingElements:()=>Id,ArcTextHeadingSizes:()=>wf,ArcTextHeadingVariants:()=>Af,ArcTextInput:()=>jn,ArcTextInputLayouts:()=>Rv,ArcTextInputSizes:()=>Pv,ArcTextInputTypes:()=>Bv,ArcTextInputVariants:()=>Mv,ArcTextKinds:()=>yf,ArcTextLineHeights:()=>_f,ArcTextSchemes:()=>xf,ArcTextSubheadingSizes:()=>Cf,ArcTextTitleSizes:()=>kf,ArcToast:()=>Zd,ArcToastDefaults:()=>Ud,ArcToastPlacements:()=>Vd,ArcToastPopoverActions:()=>Mf,ArcToastPopoverModes:()=>Hd,ArcToastProgressBarVariants:()=>Bf,ArcToastSchemes:()=>Dd,ArcToastSeverities:()=>Od,ArcToastSizes:()=>Fd,ArcToastVariants:()=>Nd,ArcTooltip:()=>Jt,ArcTooltipDefaults:()=>Ma,SVGLogoArticulate:()=>nc,SVGLogoProductAI:()=>cc,SVGLogoProductPeek:()=>ic,SVGLogoProductReach:()=>sc,SVGLogoProductReview:()=>lc,SVGLogoProductRise:()=>dc,SVGLogoProductStoryline:()=>uc,SVGLogoProductStudio:()=>hc,StorageType:()=>kt,adoptStyles:()=>ir,adoptThemeTokens:()=>lu,anchorNameRegistry:()=>Bo,assignRef:()=>La,bindDelegatedEvents:()=>Os,canonicalizeToHsv:()=>mn,clamp:()=>va,clampIt:()=>G,colorValueEquals:()=>bn,compositeRgbaOver:()=>dl,createEmptyRect:()=>Wf,css:()=>s,cssFeatures:()=>xc,didElementRectChange:()=>Tt,extractTextFromReactNode:()=>Po,formatAlphaCss:()=>pn,formatAlphaPercent:()=>go,formatAnchorName:()=>kc,getArcColorAs:()=>bl,getArcColorData:()=>He,getArcColorParts:()=>ml,getArcColorValue:()=>$l,getArcContrastColor:()=>ni,getColorName:()=>fn,getCssColor:()=>$a,getPlainLabel:()=>Ed,getPreferredAnchorForTooltipId:()=>Tc,getSelectedColorMeta:()=>ci,getShadowRootOrDocument:()=>Ra,handlePopover:()=>ys,handleToast:()=>Wd,hasBaseSelectSupport:()=>Cd,hasEmptyValueOption:()=>zd,hasMatchingColorValue:()=>ti,hasNativeAnchorPositioning:()=>yc,hslToRgbaData:()=>nl,hsvDeltaOK:()=>Jc,hsvToRgbaData:()=>Oa,isDifferent:()=>pa,isGroupLegendItem:()=>Ad,isHexLike:()=>hl,isHsvLike:()=>vl,isObject:()=>Es,isRgbaLike:()=>gl,isSame:()=>_e,isSelectGroup:()=>Nn,isSelectedColorMatch:()=>xl,isString:()=>Ot,joinArray:()=>Mo,logError:()=>ih,logMessage:()=>ch,logSkippedTopLevelItem:()=>Sd,logWarning:()=>Ts,makeHtmlId:()=>Ku,makeRandomColor:()=>yl,mapDeprecated:()=>ge,noTailAnchors:()=>bs,normalizeAnchorName:()=>Do,normalizeByte:()=>Wr,normalizeColorValue:()=>vo,normalizeHue:()=>ol,normalizeUnit:()=>tl,oklchToRgbaData:()=>sl,parseAlphaInput:()=>pl,parseByte:()=>rt,parseCssColorToRgba:()=>_r,parseHexStringToRgba:()=>ul,pickFromList:()=>q,pickFromListByKeys:()=>Kr,relativeLuminance:()=>ll,renderableOption:()=>bo,resolveTailMetrics:()=>$s,rgbaBytesEqual:()=>Zc,rgbaDeltaOK:()=>vn,rgbaEchoDeltaOK:()=>Xc,rgbaToHslData:()=>cl,rgbaToHsvData:()=>at,rgbaToOklchData:()=>il,roundIt:()=>gn,shareAdoptedStyles:()=>su,snapIt:()=>el,splitString:()=>_s,syncAnchorName:()=>xs,toHEX:()=>Sa,toHSL:()=>ei,toLinearChannel:()=>Fe,toOKLCH:()=>oi,toRGB:()=>Ne,unbindDelegatedEvents:()=>zh,useIsoLayoutEffect:()=>Mt,useStableId:()=>Ir,useStorage:()=>Vf});const re=["auto","light","dark","inverse"],Ct=["none","sm","md","lg","xl"],Wn=["primary","secondary","inset","raised","floating"],Co=["circle","square","narrow"],zr=["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"],At=["primary","secondary","tertiary","plain","link-style"],Ia=["hug","fill","icon","gutter","inline"],St=["inherit","start","left","justify","center","between","around","evenly","stretch","end","right"],zt=["inherit","tight","standard","loose"],aa=["inherit","xxl","xl","lg","md","sm","xs","xxs","custom","fullscreen"],Se=["blue","orange","mint","red","yellow","green","maroon","purple","neutral","white","black","mono","mono-inverse","overlay-light","overlay-dark","ai","brand"],Et=["ai","ai-50","ai-100","ai-200","ai-300","ai-400","ai-500","ai-600"],Kn=[...Et],ze=["","auto","manual"],Ye=["toggle","show","hide"],Ee=["inherit","xl","lg","md","sm","xs"],_t=["inherit","lg","md","sm"],Gn=["inherit","md","sm"],Ao=["inherit","wrap","truncate"],lr=["gutter","inline"],Vr=["hug","fill"],ja=["horizontal","vertical"],ge=(r,a)=>a[r]||r,q=(r,a)=>r.filter(e=>a.includes(e)),Kr=(r,a)=>a.filter(e=>r.includes(e)),La=(r,a)=>
vendor: 10,763 bytes, lines 1-15
1{r&&(typeof r=="function"?r(a):r.current=a)},va=(r,a=0,e=100)=>Math.min(Math.max(r,a),e),pa=(r,a)=>r!==a,_e=(r,a)=>r===a,Tt=({a:r,b:a})=>pa(r?.top,a?.top)||pa(r?.left,a?.left)||pa(r?.width,a?.width)||pa(r?.height,a?.height);function Ra(r){if(!(r instanceof Node))return null;const a=r.getRootNode();return a instanceof ShadowRoot||a instanceof Document?a:null}var n=sa(1463),h=sa(9608);/** 2 * @license 3 * Copyright 2019 Google LLC 4 * SPDX-License-Identifier: BSD-3-Clause 5 */const qe=globalThis,So=qe.ShadowRoot&&(qe.ShadyCSS===void 0||qe.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Ze=Symbol(),Te=new WeakMap;class zo{constructor(a,e,o){if(this._$cssResult$=!0,o!==Ze)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=a,this.t=e}get styleSheet(){let a=this.o;const e=this.t;if(So&&a===void 0){const o=e!==void 0&&e.length===1;o&&(a=Te.get(e)),a===void 0&&((this.o=a=new CSSStyleSheet).replaceSync(this.cssText),o&&Te.set(e,a))}return a}toString(){return this.cssText}}const Yn=r=>new zo(typeof r=="string"?r:r+"",void 0,Ze),s=(r,...a)=>{const e=r.length===1?r[0]:a.reduce(((o,t,i)=>o+(c=>{if(c._$cssResult$===!0)return c.cssText;if(typeof c=="number")return c;throw Error("Value passed to 'css' function must be a 'css' function result: "+c+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(t)+r[i+1]),r[0]);return new zo(e,r,Ze)},Eo=(r,a)=>{if(So)r.adoptedStyleSheets=a.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const e of a){const o=document.createElement("style"),t=qe.litNonce;t!==void 0&&o.setAttribute("nonce",t),o.textContent=e.cssText,r.appendChild(o)}},Er=So?r=>r:r=>r instanceof CSSStyleSheet?(a=>{let e="";for(const o of a.cssRules)e+=o.cssText;return Yn(e)})(r):r;/** 6 * @license 7 * Copyright 2017 Google LLC 8 * SPDX-License-Identifier: BSD-3-Clause 9 */const{is:Ha,defineProperty:Ie,getOwnPropertyDescriptor:It,getOwnPropertyNames:Jd,getOwnPropertySymbols:Qd,getPrototypeOf:ru}=Object,jt=globalThis,Vi=jt.trustedTypes,au=Vi?Vi.emptyScript:"",eu=jt.reactiveElementPolyfillSupport,_o=(r,a)=>r,qn={toAttribute(r,a){switch(a){case Boolean:r=r?au:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,a){let e=r;switch(a){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r)}catch{e=null}}return e}},Ui=(r,a)=>!Ha(r,a),Wi={attribute:!0,type:String,converter:qn,reflect:!1,useDefault:!1,hasChanged:Ui};Symbol.metadata??=Symbol("metadata"),jt.litPropertyMetadata??=new WeakMap;class Xe extends HTMLElement{static addInitializer(a){this._$Ei(),(this.l??=[]).push(a)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(a,e=Wi){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(a)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(a,e),!e.noAccessor){const o=Symbol(),t=this.getPropertyDescriptor(a,o,e);t!==void 0&&Ie(this.prototype,a,t)}}static getPropertyDescriptor(a,e,o){const{get:t,set:i}=It(this.prototype,a)??{get(){return this[e]},set(c){this[e]=c}};return{get:t,set(c){const l=t?.call(this);i?.call(this,c),this.requestUpdate(a,l,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(a){return this.elementProperties.get(a)??Wi}static _$Ei(){if(this.hasOwnProperty(_o("elementProperties")))return;const a=ru(this);a.finalize(),a.l!==void 0&&(this.l=[...a.l]),this.elementProperties=new Map(a.elementProperties)}static finalize(){if(this.hasOwnProperty(_o("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(_o("properties"))){const e=this.properties,o=[...Jd(e),...Qd(e)];for(const t of o)this.createProperty(t,e[t])}const a=this[Symbol.metadata];if(a!==null){const e=litPropertyMetadata.get(a);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(a){const e=[];if(Array.isArray(a)){const o=new Set(a.flat(1/0).reverse());for(const t of o)e.unshift(Er(t))}else a!==void 0&&e.push(Er(a));return e}static _$Eu(a,e){const o=e.attribute;return o===!1?void 0:typeof o=="string"?o:typeof a=="string"?a.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((a=>this.enableUpdating=a)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((a=>a(this)))}addController(a){(this._$EO??=new Set).add(a),this.renderRoot!==void 0&&this.isConnected&&a.hostConnected?.()}removeController(a){this._$EO?.delete(a)}_$E_(){const a=new Map,e=this.constructor.elementProperties;for(const o of e.keys())this.hasOwnProperty(o)&&(a.set(o,this[o]),delete this[o]);a.size>0&&(this._$Ep=a)}createRenderRoot(){const a=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Eo(a,this.constructor.elementStyles),a}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((a=>a.hostConnected?.()))}enableUpdating(a){}disconnectedCallback(){this._$EO?.forEach((a=>a.hostDisconnected?.()))}attributeChangedCallback(a,e,o){this._$AK(a,o)}_$ET(a,e){const o=this.constructor.elementProperties.get(a),t=this.constructor._$Eu(a,o);if(t!==void 0&&o.reflect===!0){const i=(o.converter?.toAttribute!==void 0?o.converter:qn).toAttribute(e,o.type);this._$Em=a,i==null?this.removeAttribute(t):this.setAttribute(t,i),this._$Em=null}}_$AK(a,e){const o=this.constructor,t=o._$Eh.get(a);if(t!==void 0&&this._$Em!==t){const i=o.getPropertyOptions(t),c=typeof i.converter=="function"?{fromAttribute:i.converter}:i.converter?.fromAttribute!==void 0?i.converter:qn;this._$Em=t;const l=c.fromAttribute(e,i.type);this[t]=l??this._$Ej?.get(t)??l,this._$Em=null}}requestUpdate(a,e,o){if(a!==void 0){const t=this.constructor,i=this[a];if(o??=t.getPropertyOptions(a),!((o.hasChanged??Ui)(i,e)||o.useDefault&&o.reflect&&i===this._$Ej?.get(a)&&!this.hasAttribute(t._$Eu(a,o))))return;this.C(a,e,o)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(a,e,{useDefault:o,reflect:t,wrapped:i},c){o&&!(this._$Ej??=new Map).has(a)&&(this._$Ej.set(a,c??e??this[a]),i!==!0||c!==void 0)||(this._$AL.has(a)||(this.hasUpdated||o||(e=void 0),this._$AL.set(a,e)),t===!0&&this._$Em!==a&&(this._$Eq??=new Set).add(a))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const a=this.scheduleUpdate();return a!=null&&await a,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,i]of this._$Ep)this[t]=i;this._$Ep=void 0}const o=this.constructor.elementProperties;if(o.size>0)for(const[t,i]of o){const{wrapped:c}=i,l=this[t];c!==!0||this._$AL.has(t)||l===void 0||this.C(t,void 0,i,l)}}let a=!1;const e=this._$AL;try{a=this.shouldUpdate(e),a?(this.willUpdate(e),this._$EO?.forEach((o=>o.hostUpdate?.())),this.update(e)):this._$EM()}catch(o){throw a=!1,this._$EM(),o}a&&this._$AE(e)}willUpdate(a){}_$AE(a){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(a)),this.updated(a)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(a){return!0}update(a){this._$Eq&&=this._$Eq.forEach((e=>this._$ET(e,this[e]))),this._$EM()}updated(a){}firstUpdated(a){}}Xe.elementStyles=[],Xe.shadowRootOptions={mode:"open"},Xe[_o("elementProperties")]=new Map,Xe[_o("finalized")]=new Map,eu?.({ReactiveElement:Xe}),(jt.reactiveElementVersions??=[]).push("2.1.1");/** 10 * @license 11 * Copyright 2017 Google LLC 12 * SPDX-License-Identifier: BSD-3-Clause 13 */const Zn=globalThis,Lt=Zn.trustedTypes,Ki=Lt?Lt.createPolicy("lit-html",{createHTML:r=>r}):void 0,Xn="$lit$",ae=`lit$${Math.random().toFixed(9).slice(2)}$`,Jn="?"+ae,ou=`<${Jn}>`,je=document,To=()=>je.createComment(""),Io=r=>r===null||typeof r!="object"&&typeof r!="function",Qn=Array.isArray,Gi=r=>Qn(r)||typeof r?.[Symbol.iterator]=="function",rc=`[ 14\f\r]`,jo=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Yi=/-->/g,qi=/>/g,Le=RegExp(`>|${rc}(?:([^\\s"'>=/]+)(${rc}*=${rc}*(?:[^ 15\f\r"'\`<>=]|("|')|))|$)`,"g"),Zi=/'/g,Xi=/"/g,Ji=/^(?:script|style|textarea|title)$/i,ac=r=>(a,...e)=>({_$litType$:r,strings:a,values:e}),Gf=ac(1),Yf=ac(2),qf=ac(3),Je=Symbol.for("lit-noChange"),Br=Symbol.for("lit-nothing"),Qi=new WeakMap,Re=je.createTreeWalker(je,129);function rs(r,a){if(!Qn(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return Ki!==void 0?Ki.createHTML(a):a}const as=(r,a)=>{const e=r.length-1,o=[];let t,i=a===2?"<svg>":a===3?"<math>":"",c=jo;for(let l=0;l<e;l++){const d=r[l];let u,g,p=-1,v=0;for(;v<d.length&&(c.lastIndex=v,g=c.exec(d),g!==null);)v=c.lastIndex,c===jo?g[1]==="!--"?c=Yi:g[1]!==void 0?c=qi:g[2]!==void 0?(Ji.test(g[2])&&(t=RegExp("</"+g[2],"g")),c=Le):g[3]!==void 0&&(c=Le):c===Le?g[0]===">"?(c=t??jo,p=-1):g[1]===void 0?p=-2:(p=c.lastIndex-g[2].length,u=g[1],c=g[3]===void 0?Le:g[3]==='"'?Xi:Zi):c===Xi||c===Zi?c=Le:c===Yi||c===qi?c=jo:(c=Le,t=void 0);const m=c===Le&&r[l+1].startsWith("/>")?" ":"";i+=c===jo?d+ou:p>=0?(o.push(u),d.slice(0,p)+Xn+d.slice(p)+ae+m):d+ae+(p===-2?l:m)}return[rs(r,i+(r[e]||"<?>")+(a===2?"</svg>":a===3?"</math>":"")),o]};class Lo{constructor({strings:a,_$litType$:e},o){let t;this.parts=[];let i=0,c=0;const l=a.length-1,d=this.parts,[u,g]=as(a,e);if(this.el=Lo.createElement(u,o),Re.currentNode=this.el.content,e===2||e===3){const p=this.el.content.firstChild;p.replaceWith(...p.childNodes)}for(;(t=Re.nextNode())!==null&&d.length<l;){if(t.nodeType===1){if(t.hasAttributes())for(const p of t.getAttributeNames())if(p.endsWith(Xn)){const v=g[c++],m=t.getAttribute(p).split(ae),b=/([.?@])?(.*)/.exec(v);d.push({type:1,index:i,name:b[2],strings:m,ctor:b[1]==="."?os:b[1]==="?"?ts:b[1]==="@"?ns:Ro}),t.removeAttribute(p)}else p.startsWith(ae)&&(d.push({type:6,index:i}),t.removeAttribute(p));if(Ji.test(t.tagName)){const p=t.textContent.split(ae),v=p.length-1;if(v>0){t.textContent=Lt?Lt.emptyScript:"";for(let m=0;m<v;m++)t.append(p[m],To()),Re.nextNode(),d.push({type:2,index:++i});t.append(p[v],To())}}}else if(t.nodeType===8)if(t.data===Jn)d.push({type:2,index:i});else{let p=-1;for(;(p=t.data.indexOf(ae,p+1))!==-1;)d.push({type:7,index:i}),p+=ae.length-1}i++}}static createElement(a,e){const o=je.createElement("template");return o.innerHTML=a,o}}function Pe(r,a,e=r,o){if(a===Je)return a;
vendor: 4,337 bytes, line 15
15let t=o!==void 0?e._$Co?.[o]:e._$Cl;const i=Io(a)?void 0:a._$litDirective$;return t?.constructor!==i&&(t?._$AO?.(!1),i===void 0?t=void 0:(t=new i(r),t._$AT(r,e,o)),o!==void 0?(e._$Co??=[])[o]=t:e._$Cl=t),t!==void 0&&(a=Pe(r,t._$AS(r,a.values),t,o)),a}class es{constructor(a,e){this._$AV=[],this._$AN=void 0,this._$AD=a,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(a){const{el:{content:e},parts:o}=this._$AD,t=(a?.creationScope??je).importNode(e,!0);Re.currentNode=t;let i=Re.nextNode(),c=0,l=0,d=o[0];for(;d!==void 0;){if(c===d.index){let u;d.type===2?u=new Qe(i,i.nextSibling,this,a):d.type===1?u=new d.ctor(i,d.name,d.strings,this,a):d.type===6&&(u=new cs(i,this,a)),this._$AV.push(u),d=o[++l]}c!==d?.index&&(i=Re.nextNode(),c++)}return Re.currentNode=je,t}p(a){let e=0;for(const o of this._$AV)o!==void 0&&(o.strings!==void 0?(o._$AI(a,o,e),e+=o.strings.length-2):o._$AI(a[e])),e++}}class Qe{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(a,e,o,t){this.type=2,this._$AH=Br,this._$AN=void 0,this._$AA=a,this._$AB=e,this._$AM=o,this.options=t,this._$Cv=t?.isConnected??!0}get parentNode(){let a=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&a?.nodeType===11&&(a=e.parentNode),a}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(a,e=this){a=Pe(this,a,e),Io(a)?a===Br||a==null||a===""?(this._$AH!==Br&&this._$AR(),this._$AH=Br):a!==this._$AH&&a!==Je&&this._(a):a._$litType$!==void 0?this.$(a):a.nodeType!==void 0?this.T(a):Gi(a)?this.k(a):this._(a)}O(a){return this._$AA.parentNode.insertBefore(a,this._$AB)}T(a){this._$AH!==a&&(this._$AR(),this._$AH=this.O(a))}_(a){this._$AH!==Br&&Io(this._$AH)?this._$AA.nextSibling.data=a:this.T(je.createTextNode(a)),this._$AH=a}$(a){const{values:e,_$litType$:o}=a,t=typeof o=="number"?this._$AC(a):(o.el===void 0&&(o.el=Lo.createElement(rs(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===t)this._$AH.p(e);else{const i=new es(t,this),c=i.u(this.options);i.p(e),this.T(c),this._$AH=i}}_$AC(a){let e=Qi.get(a.strings);return e===void 0&&Qi.set(a.strings,e=new Lo(a)),e}k(a){Qn(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,t=0;for(const i of a)t===e.length?e.push(o=new Qe(this.O(To()),this.O(To()),this,this.options)):o=e[t],o._$AI(i),t++;t<e.length&&(this._$AR(o&&o._$AB.nextSibling,t),e.length=t)}_$AR(a=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);a!==this._$AB;){const o=a.nextSibling;a.remove(),a=o}}setConnected(a){this._$AM===void 0&&(this._$Cv=a,this._$AP?.(a))}}class Ro{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(a,e,o,t,i){this.type=1,this._$AH=Br,this._$AN=void 0,this.element=a,this.name=e,this._$AM=t,this.options=i,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=Br}_$AI(a,e=this,o,t){const i=this.strings;let c=!1;if(i===void 0)a=Pe(this,a,e,0),c=!Io(a)||a!==this._$AH&&a!==Je,c&&(this._$AH=a);else{const l=a;let d,u;for(a=i[0],d=0;d<i.length-1;d++)u=Pe(this,l[o+d],e,d),u===Je&&(u=this._$AH[d]),c||=!Io(u)||u!==this._$AH[d],u===Br?a=Br:a!==Br&&(a+=(u??"")+i[d+1]),this._$AH[d]=u}c&&!t&&this.j(a)}j(a){a===Br?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,a??"")}}class os extends Ro{constructor(){super(...arguments),this.type=3}j(a){this.element[this.name]=a===Br?void 0:a}}class ts extends Ro{constructor(){super(...arguments),this.type=4}j(a){this.element.toggleAttribute(this.name,!!a&&a!==Br)}}class ns extends Ro{constructor(a,e,o,t,i){super(a,e,o,t,i),this.type=5}_$AI(a,e=this){if((a=Pe(this,a,e,0)??Br)===Je)return;const o=this._$AH,t=a===Br&&o!==Br||a.capture!==o.capture||a.once!==o.once||a.passive!==o.passive,i=a!==Br&&(o===Br||t);t&&this.element.removeEventListener(this.name,this,o),i&&this.element.addEventListener(this.name,this,a),this._$AH=a}handleEvent(a){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,a):this._$AH.handleEvent(a)}}class cs{constructor(a,e,o){this.element=a,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(a){Pe(this,a)}}const Zf={M:Xn,P:ae,A:Jn,C:1,L:as,R:es,D:Gi,V:Pe,I:Qe,H:Ro,N:ts,U:ns,B:os,F:cs},tu=Zn.litHtmlPolyfillSupport;tu?.(Lo,Qe),(Zn.litHtmlVersions??=[]).push("3.3.1");const nu=(r,a,e)=>{const o=e?.renderBefore??a;
vendor: 16,384 bytes, lines 15-295
15let t=o._$litPart$;if(t===void 0){const i=e?.renderBefore??null;o._$litPart$=t=new Qe(a.insertBefore(To(),i),i,void 0,e??{})}return t._$AI(r),t};/** 16 * @license 17 * Copyright 2017 Google LLC 18 * SPDX-License-Identifier: BSD-3-Clause 19 */const ec=globalThis;class Rt extends Xe{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const a=super.createRenderRoot();return this.renderOptions.renderBefore??=a.firstChild,a}update(a){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(a),this._$Do=nu(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return Je}}Rt._$litElement$=!0,Rt.finalized=!0,ec.litElementHydrateSupport?.({LitElement:Rt});const cu=ec.litElementPolyfillSupport;cu?.({LitElement:Rt});const Xf={_$AK:(r,a,e)=>{r._$AK(a,e)},_$AL:r=>r._$AL};(ec.litElementVersions??=[]).push("4.2.1");const iu=`@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 255 / 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
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-mint-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-15), 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-
440color-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 *
766var(--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`,oc={};function ir(r,a){if(typeof document<"u"&&a?.styleSheet){const e=oc[r];oc[r]=a.styleSheet,document.adoptedStyleSheets=[...document.adoptedStyleSheets.filter(o=>o!==e),a.styleSheet]}}function su(r){const a=Object.values(oc),e=document.adoptedStyleSheets.filter(o=>a.includes(o));if(r.adoptedStyleSheets){const o=e.filter(t=>!r.adoptedStyleSheets.includes(t));r.adoptedStyleSheets=[...r.adoptedStyleSheets,...o]}}function lu(r){if(typeof CSSStyleSheet<"u"){const a=new CSSStyleSheet;a.replaceSync(iu),r.adoptedStyleSheets&&(r.adoptedStyleSheets.includes(a)||(r.adoptedStyleSheets=[...r.adoptedStyleSheets,a]))}}const du=r=>r?.trim().charAt(0)??void 0,uu=(r,a)=>{let e=0;const o=Math.min(r.length,50);for(let t=0;t<o;t+=1)e=(e+r.charCodeAt(t))%(a??33);return e},hu=(r,a,e)=>a?.length?r?.trim()===""?e||a[0]:a[uu(r,a.length)]||e||a[0]:e,is=q(Se,["blue","orange","mint","red","yellow","green","maroon","purple"]),gu=q(Se,["neutral","white","black"]),Pt=q(aa,["lg","md","sm","xs"]),vu=[...Pt,"profile-sm","profile-md","profile-lg"],pu=_t,fu=Ao,mu=Pt,bu=Pt,$u=Pt,I=s`--arcâ¢inputâ¢mask`,f=s`--arcâ¢size`,E=s`--arcâ¢space`,vr=s`--arcâ¢avatar`,Dr=s`${vr}â¢chars`,tc=s` 1207 1208 &[data-size=lg] { 1209 ${vr}â¢fontâ¢size: var(${f}â¢16); 1210 ${vr}â¢size: 2.5em; /* target: 40px @ 100% */ 1211 ${Dr}â¢1: var(${f}â¢16); 1212 ${Dr}â¢2: var(${f}â¢14); 1213 ${Dr}â¢3: var(${f}â¢12); 1214 } 1215 1216 &:is([data-size=md], [data-size=inherit], :not([data-size])) { /* @default size */ 1217 ${vr}â¢fontâ¢size: var(${f}â¢14); 1218 ${vr}â¢size: 2.2857142857em; /* target: 32px @ 100% (32 / 14 * 1em) */ 1219 ${Dr}â¢1: var(${f}â¢14); 1220 ${Dr}â¢2: var(${f}â¢12); 1221 ${Dr}â¢3: var(${f}â¢10); 1222 } 1223 1224 &[data-size=sm] { 1225 ${vr}â¢fontâ¢size: var(${f}â¢12); 1226 ${vr}â¢size: 2em; /* target: 24px @ 100% */ 1227 ${Dr}â¢1: var(${f}â¢12); 1228 ${Dr}â¢2: var(${f}â¢10); 1229 ${Dr}â¢3: var(${f}â¢8); 1230 } 1231 1232 &[data-size=xs] { 1233 ${vr}â¢fontâ¢size: var(${f}â¢10); 1234 ${vr}â¢size: 2em; /* target: 20px @ 100% */ 1235 ${Dr}â¢1: var(${f}â¢10); 1236 ${Dr}â¢2: var(${f}â¢8); 1237 ${Dr}â¢3: var(${f}â¢6); 1238 } 1239 1240`,yu=s` 1241 1242 &[data-size=profile-lg] { 1243 ${vr}â¢fontâ¢size: var(${f}â¢40); 1244 ${vr}â¢size: 4em; 1245 } 1246 1247 &[data-size=profile-md] { 1248 ${vr}â¢fontâ¢size: var(${f}â¢32); 1249 ${vr}â¢size: 3em; 1250 } 1251 1252 &[data-size=profile-sm] { 1253 ${vr}â¢fontâ¢size: var(${f}â¢28); 1254 ${vr}â¢size: 2.2857142857em; /* target: 64px @ 100% (64 / 28 * 1em) */ 1255 } 1256 1257`,ss=s` 1258 1259 [arc-avatar] { 1260 ${vr}â¢fontâ¢size: inherit; 1261 ${vr}â¢size: inherit; 1262 ${Dr}â¢1: inherit; 1263 ${Dr}â¢2: inherit; 1264 ${Dr}â¢3: inherit; 1265 } 1266 1267`,Me=s`${vr}â¢fg`,la=s`${vr}â¢bg`,xu=s` 1268@layer arc-components { 1269 1270 [arc-avatar] { 1271 /* Colors --------------------------------------------------------⢠*/ 1272 ${Me}: var(--arc-avatar-color, var(--arc-color-mono-white)); 1273 1274 &:has([data-color=blue]) { /* @default color */ 1275 ${la}: var(--arc-color-light-blue-400); 1276 } 1277 &:has([data-color=purple]) { 1278 ${la}: var(--arc-color-light-purple-400); 1279 } 1280 &:has([data-color=red]) { 1281 ${la}: var(--arc-color-light-red-400); 1282 } 1283 &:has([data-color=yellow]) { 1284 ${la}: var(--arc-color-light-yellow-400); 1285 } 1286 &:has([data-color=green]) { 1287 ${la}: var(--arc-color-light-green-400); 1288 }
1289 &:has([data-color=maroon]) { 1290 ${la}: var(--arc-color-light-maroon-400); 1291 } 1292 &:has([data-color=orange]) { 1293 ${la}: var(--arc-color-light-orange-400); 1294 } 1295 &:has([data-color=mint]) { 1296 ${la}: var(--arc-color-light-mint-400); 1297 } 1298 1299 /* RESERVED COLORS -----------------------------------------------⢠*/ 1300 &:has([data-color=black]) { 1301 ${Me}: light-dark(var(--arc-color-mono-white), var(--arc-color-mono-black)); 1302 ${la}: light-dark(var(--arc-color-mono-black), var(--arc-color-mono-white)); 1303 } 1304 1305 &:has([data-color=neutral]) { /* @default anonymous */ 1306 ${Me}: var(--arc-color-fg-secondary); 1307 ${la}: var(--arc-color-alpha-subtle); 1308 } 1309 1310 &:has([data-color=white]) { 1311 ${Me}: var(--arc-color-mono-black); 1312 ${la}: var(--arc-color-mono-white); 1313 } 1314 1315 /* SIZES ---------------------------------------------------------⢠*/ 1316 ${tc} 1317 ${yu} 1318 } 1319 1320 /* CORE AVATAR STYLES ----------------------------------------------⢠*/ 1321 [arc-avatar]:not([hidden]) { 1322 font-size: var(--arc-avatar-font-size, var(${vr}â¢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(${vr}â¢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(${Dr}â¢1); 1345 } 1346 1347 [data-num-length='2'] { 1348 --arc-button-font-size: var(${Dr}â¢2); 1349 } 1350 1351 [data-num-length='3'] { 1352 --arc-button-font-size: var(${Dr}â¢3); 1353 } 1354 1355 1356 /* INNER ELEMENTS ------------------------------------------------⢠*/ 1357 1358 [data-element=counter] { 1359 ${vr}â¢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(${la})); 1367 --arc-button-color: var(--arc-avatar-color, var(${Me})); 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 ${vr}â¢visibility: hidden; 1380 } 1381 1382 /* Hides subsequent elements with valid image */ 1383 &:not([data-has-error]) ~ [data-element] { 1384 ${Me}: transparent; 1385 ${la}: none; 1386 } 1387 } 1388 1389 :is( 1390 [data-element=counter], 1391 [data-element=initial], 1392 [data-element=anonymous] 1393 ) { 1394 background: var(${la}); 1395 color: var(${Me}); 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(${vr}â¢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(${vr}â¢pointerâ¢events, none); 1427 user-select: none; 1428 -webkit-user-select: none; 1429 } 1430 } 1431 1432} 1433`,ku=({children:r,initial:a,color:e,...o})=>(0,n.jsx)("span",{...o,"data-element":"initial","data-color":e,children:r||a}),wu=({isLoaded:r,hasError:a,onLoad:e,onError:o,...t})=>{const i=!r&&""||void 0,c=a&&""||void 0,l=!r||a||void 0;return(0,n.jsx)("img",{...t,hidden:l,"data-element":"image","data-not-loaded":i,"data-has-error":c,onLoad:e,onError:o})},nc=r=>(0,n.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,n.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)"})}),cc=r=>(0,n.jsxs)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,n.jsx)("defs",{children:(0,n.jsxs)("linearGradient",{id:"ai_gradient",x1:"2",y1:"18",x2:"18",y2:"2",gradientUnits:"userSpaceOnUse",children:[(0,n.jsx)("stop",{stopColor:"var(--arc-color-logo-ai-purple, #9c15ff)"}),(0,n.jsx)("stop",{offset:"1",stopColor:"var(--arc-color-logo-ai-blue, #1eb4fb)"})]})}),(0,n.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)"})]}),ic=r=>(0,n.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,n.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)"})}),sc=r=>(0,n.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,n.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)"})}),lc=r=>(0,n.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,n.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)"})}),dc=r=>(0,n.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,n.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)"})}),uc=r=>(0,n.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,n.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)"})}),hc=r=>(0,n.jsx)("svg",{...r,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 640 640",children:(0,n.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 Cu;const Au="fa-width-auto",ls="fa-fw",Su="arc-fw",ds="arc-aw",zu=r=>typeof r=="number"?`calc(${r/10}rem * var(--arc-internal-font-size))`:r,Eu={"arc-svg logo-articulate":(0,n.jsx)(nc,{}),"arc-svg product-ai":(0,n.jsx)(cc,{}),"arc-svg product-peek":(0,n.jsx)(ic,{}),"arc-svg product-reach":(0,n.jsx)(sc,{}),"arc-svg product-review":(0,n.jsx)(lc,{}),"arc-svg product-rise":(0,n.jsx)(dc,{}),"arc-svg product-storyline":(0,n.jsx)(uc,{}),"arc-svg product-studio":(0,n.jsx)(hc,{})},rm=r=>r&&r.length>0&&r?.includes("arc-svg")?Eu[r]:Cu("span",{className:r}),us=r=>{const a=r.includes(Au),e=r.includes(ls),o=r.includes(Su),t=r.includes(ds);return{hasFaAutoWidth:a,hasFaFixedWidth:e,hasArcFixedWidth:o,hasArcAutoWidth:t}},hs=r=>((0,h.isValidElement)(r)&&r.type===cr?r.props.icon:r)??void 0,gc=r=>{const a=hs(r);if(typeof a!="string")return a;const{hasFaFixedWidth:e,hasArcFixedWidth:o,hasArcAutoWidth:t}=us(a);return!e&&!o&&!t?`${a} ${ds}`:a},_u=r=>{const a=hs(r);if(typeof a!="string")return a;let e=a;const{hasArcFixedWidth:o,hasFaFixedWidth:t}=us(e);return o&&!t&&(e=`${e} ${ls}`),e},Tu=s`--arcâ¢icon`,ee=s`${Tu}â¢fg`,Iu=s` 1434@layer arc-components { 1435 1436[arc-icon] { 1437 ${ee}: currentcolor; 1438 1439 color: var(--arc-icon-color, var(${ee})); 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(${ee})); 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 &[arc-icon-status=announcement] { 1493 ${ee}: var(--arc-color-fg-brand-mid); 1494 } 1495 1496 &[arc-icon-status=info] { 1497 ${ee}: var(--arc-color-fg-info-mid); 1498 } 1499 1500 &[arc-icon-status=success] { 1501 ${ee}: var(--arc-color-fg-success-mid); 1502 } 1503 1504 &[arc-icon-status=warning] { 1505 ${ee}: var(--arc-color-fg-warning-mid); 1506 } 1507 1508 &[arc-icon-status=error], 1509 &[arc-icon-status=critical] { 1510 ${ee}: var(--arc-color-fg-critical-mid); 1511 } 1512 1513 &[arc-icon-status=processing] { 1514 ${ee}: var(--arc-color-fg-brand-mid); 1515 } 1516 1517 &[arc-icon-status] { 1518 --fa-primary-color: var(--arc-icon-color, currentcolor); 1519 --fa-secondary-color: color-mix(in srgb, currentcolor 20%, transparent); 1520 --fa-secondary-opacity: 1; 1521 } 1522} 1523 1524} 1525`,ju=r=>(0,n.jsx)(cr,{...r,icon:"fa-kit fa-articulate arc-aw",color:r?.color||"var(--arc-color-logo-articulate, #000000)","aria-label":r?.["aria-label"]||"Articulate Logo"}),Lu=r=>(0,n.jsx)(cr,{...r,icon:"fa-kit fa-product-badge-ai arc-aw","aria-label":r?.["aria-label"]||"Articulate AI Logo",gradient:r?.gradient||"ai"}),Ru=r=>(0,n.jsx)(cr,{...r,icon:"fa-kit fa-product-badge-peek arc-aw",color:r?.color||"var(--arc-color-logo-peek, #497add)","aria-label":r?.["aria-label"]||"Articulate Peek Logo"}),Pu=r=>(0,n.jsx)(cr,{...r,icon:"fa-kit fa-product-badge-reach arc-aw",color:r?.color||"var(--arc-color-logo-reach, #0081de)","aria-label":r?.["aria-label"]||"Articulate Reach Logo"}),Mu=r=>(0,n.jsx)(cr,{...r,icon:"fa-kit fa-product-badge-review arc-aw",color:r?.color||"var(--arc-color-logo-review, #35b062)","aria-label":r?.["aria-label"]||"Articulate Review Logo"}),Bu=r=>(0,n.jsx)(cr,{...r,icon:"fa-kit fa-product-badge-rise arc-aw",color:r?.color||"var(--arc-color-logo-rise, #ff6602)","aria-label":r?.["aria-label"]||"Articulate Rise Logo"}),Du=r=>(0,n.jsx)(cr,{...r,icon:"fa-kit fa-product-badge-storyline arc-aw",color:r?.color||"var(--arc-color-logo-storyline, #c560b3)","aria-label":r?.["aria-label"]||"Articulate Storyline Logo"}),Ou=r=>(0,n.jsx)(cr,{...r,icon:"fa-kit fa-product-badge-studio arc-aw",color:r?.color||"var(--arc-color-logo-studio, #dc424a)","aria-label":r?.["aria-label"]||"Articulate Studio Logo"}),cr=({children:r,icon:a="fa-regular fa-circle-dashed",color:e,size:o,style:t,gradient:i,...c})=>{const l={...t,"--arc-icon-size":zu(o),"--arc-icon-color":e},d=!!(c["aria-label"]||c["aria-labelledby"]),u=_u(a),g=typeof u=="string"&&u.length>0?(0,n.jsx)("span",{className:u}):u;return(0,n.jsx)("span",{"aria-hidden":!d||void 0,...c,"arc-icon":"",style:l,"arc-gradient":i,children:r||g})};ir("ArcIcon",Iu),cr.Articulate=ju,cr.AI=Lu,cr.Peek=Ru,cr.Reach=Pu,cr.Review=Mu,cr.Rise=Bu,cr.Storyline=Du,cr.Studio=Ou,cr.SVGArticulate=nc,cr.SVGAI=cc,cr.SVGPeek=ic,cr.SVGReach=sc,cr.SVGReview=lc,cr.SVGRise=dc,cr.SVGStoryline=uc,cr.SVGStudio=hc;const Fu=({children:r,icon:a,color:e,...o})=>(0,n.jsx)("span",{...o,"data-element":"anonymous","data-color":"neutral",children:r||(0,n.jsx)(cr,{icon:a})}),gs="blue",vs="neutral",Nu="fa-solid fa-user arc-aw",vc=(0,h.forwardRef)(({children:r,size:a,c
1525olor:e,isActive:o=!0,isAnonymous:t,alt:i,src:c,name:l,email:d,...u},g)=>{const[p,v]=(0,h.useState)(!1),[m,b]=(0,h.useState)(!1),$=B=>{v(!0),b(!1),u.onLoad?.(B)},k=B=>{v(!1),b(!0),u.onError?.(B)},_=du(l||d),y=!!_,z=t||(!p||m)&&!y,x=!z&&!!c&&!m||void 0,S=(z&&vs||void 0)??(e||void 0)??hu(String(d||l||void 0),is,gs)??gs,D={src:c,alt:i,isLoaded:p,hasError:m,onLoad:$,onError:k};return(0,h.useEffect)(()=>{z&&v(!1)},[z]),(0,n.jsx)("span",{...u,ref:g,"arc-avatar":"","data-is-inactive":!o||void 0,"data-size":a,"aria-label":(u.title??l??d)||void 0,children:r||(z?(0,n.jsx)(Fu,{icon:Nu,color:vs}):(0,n.jsxs)(n.Fragment,{children:[x&&(0,n.jsx)(wu,{...D}),y&&(0,n.jsx)(ku,{initial:_,color:S})]}))})});ir("ArcAvatar",xu);const Gr=s`${vr}â¢text`,Be=s`${vr}â¢subtext`,ro=s`${vr}â¢gap`,Hu=s` 1526@layer arc-components { 1527 1528 [arc-avatar-text] { 1529 ${Gr}â¢fontâ¢size: var(${f}â¢14); 1530 ${Be}â¢fontâ¢size: var(${f}â¢12); 1531 ${ro}: var(${f}â¢8); 1532 1533 ${Gr}â¢overflow: unset; 1534 ${Gr}â¢textâ¢overflow: unset; 1535 ${Gr}â¢whiteâ¢space: unset; 1536 1537 &[data-overflow=truncate] { 1538 ${Gr}â¢overflow: hidden; 1539 ${Gr}â¢textâ¢overflow: ellipsis; 1540 ${Gr}â¢whiteâ¢space: nowrap; 1541 } 1542 1543 &:has([data-size=inherit]) { 1544 ${Gr}â¢fontâ¢size: 1em; 1545 ${Be}â¢fontâ¢size: 0.875em; 1546 ${ro}: 0.5em; 1547 } 1548 1549 &:has([data-size=lg]) { 1550 ${Gr}â¢fontâ¢size: var(--arc-font-size-14); 1551 ${Be}â¢fontâ¢size: var(--arc-font-size-12); 1552 } 1553 1554 &:has([data-size=md]) { /* @default size */ 1555 ${Gr}â¢fontâ¢size: var(--arc-font-size-14); 1556 ${Be}â¢fontâ¢size: var(--arc-font-size-12); 1557 } 1558 1559 &:has([data-size=sm]) { 1560 ${Gr}â¢fontâ¢size: var(--arc-font-size-14); 1561 ${Be}â¢fontâ¢size: var(--arc-font-size-12); 1562 } 1563 1564 &:has([data-size=xs]) { 1565 ${Gr}â¢fontâ¢size: var(--arc-font-size-12); 1566 ${Be}â¢fontâ¢size: var(--arc-font-size-12); 1567 ${ro}: var(--arc-space-0-75); 1568 } 1569 1570 &[data-gap=lg] { ${ro}: var(${f}â¢12); } 1571 &[data-gap=sm] { ${ro}: var(${f}â¢4); } 1572 } 1573 1574 [arc-avatar-text] { 1575 font-size: var(--arc-avatar-text-font-size, var(${Gr}â¢fontâ¢size)); 1576 display: inline-flex; 1577 align-items: center; 1578 gap: var(${ro}); 1579 line-height: normal; 1580 min-width: 0%; /* @note: allows truncation/ellipsis for [data-element=text] */ 1581 1582 &[is-strong] [data-element=text] { 1583 font-weight: var(--arc-avatar-text-font-weight, var(--arc-font-weight-bold)); 1584 1585 [data-element=subtext] { 1586 font-weight: var(--arc-avatar-text-subtext-font-weight, var(--arc-font-weight-normal)); 1587 } 1588 } 1589 1590 [data-element=text] { 1591 flex: 1; 1592 text-align: start; 1593 } 1594 1595 [data-element=subtext] { 1596 display: var(--arc-avatar-subtext-display, block); 1597 font-size: var(--arc-avatar-subtext-font-size, var(${Be}â¢fontâ¢size)); 1598 1599 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 1600 color: var(--arc-avatar-subtext-color, color-mix(in srgb, currentcolor 61.2%, transparent)); 1601 } 1602 1603 :where([data-element=text], [data-element=subtext]) { 1604 overflow: var(${Gr}â¢overflow); 1605 text-overflow: var(${Gr}â¢textâ¢overflow); 1606 white-space: var(${Gr}â¢whiteâ¢space); 1607 } 1608 } 1609 1610} 1611`,Vu="Anonymous",pc=({children:r,avatar:a={},subtext:e,size:o,gapSize:t,overflow:i,isStrong:c,...l})=>{const d=a.anonymousName||Vu,u=a.name||a.email||a.src,g=a.name||a.email,p=a.isAnonymous||!u,v=r||p?d:g,m=t!=="inherit"?t:void 0,b=i!=="inherit"?i:void 0;return(0,n.jsxs)("span",{...l,"arc-avatar-text":"","data-gap":m,"data-overflow":b,"is-strong":c?"":void 0,children:[(0,n.jsx)(vc,{...a,isAnonymous:p,size:o}),(0,n.jsxs)("span",{"data-element":"text",children:[v,e&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("br",{}),(0,n.jsx)("small",{"data-element":"subtext",children:e})]})]})]})};ir("ArcAvatarText",Hu);const Uu=s` 1612@layer arc-components { 1613 1614 [arc-avatar-pile] { 1615 position: relative; 1616 display: inline-flex; 1617 align-items: center; 1618 gap: 0; 1619 1620 ${tc} 1621 ${ss} 1622 1623 /* Cutout (mask) a portion of subsequent avatars ---------------⢠*/ 1624 [arc-avatar]+[arc-avatar] { 1625 margin-left: -0.125em; 1626 1627 /* magic! */ 1628 mask: radial-gradient( 1629 50% 50% at -43% 50%, 1630 transparent 110%, 1631 black 110% 1632 ) padding-box; 1633 } 1634 1635 } 1636 1637} 1638`,Wu=({size:r="md",...a})=>(0,n.jsx)("div",{...a,"arc-avatar-pile":"","data-size":r});ir("ArcAvatarPile",Uu);const Po=r=>typeof r=="string"?r:typeof r=="number"?r.toString():Array.isArray(r)?r.map(Po).join(""):(0,h.isValidElement)(r)?Po(r.props.children):"",ps={},Ku=(r="id")=>{const a=(ps[r]??0)+1;return ps[r]=a,`${r}-${a}`},Ir=(r,a="id")=>{const e=(0,h.useId)();return r??`${a}-${e}`},fc=[...ze],mc=[...re],Gu=[...Ye],fs=q(zr,["common"]),Yu=q(zr,["ai","brand"]),bc=["nw-corner","to
1638p-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"],$c=["ignore","flip"],ms=["compact","comfortable"],Mo=(r,a=1/0,e=" ")=>[...r].flat(a)?.filter(Boolean)?.join(e),da={popover:fc[0],anchorAt:bc[13],boundary:$c[0],tryFallbacks:!1,variant:fs[0],scheme:mc[0],density:ms[0],isInverse:!1,hasTail:!1,tailSize:8,offset:0},yc=()=>typeof CSS>"u"||typeof CSS.supports!="function"?!1:CSS.supports("position-anchor","--anchor-name"),qu=()=>typeof CSS>"u"||typeof CSS.supports!="function"?!1:CSS.supports("container-type","anchored"),xc={canAnchor:yc(),canAnchoredContainers:qu()},bs=["center","nw-corner","ne-corner","se-corner","sw-corner"],$s=({canHaveTail:r,tailSize:a})=>{if(!r)return{cssTailVar:"",floatingTailPx:0};const e=Math.abs(Number(a||da.tailSize)),o=e>0?e:da.tailSize;return{cssTailVar:o===da.tailSize?"":`${o}px`,floatingTailPx:o}},Mt=typeof window>"u"?h.useEffect:h.useLayoutEffect,ys=(r,a="toggle",e=document)=>{const o=e.getElementById(r);({toggle:()=>o?.togglePopover(),show:()=>o?.showPopover(),hide:()=>o?.hidePopover()})[a]()},Bo=new WeakMap,kc=r=>{const a=String(r??"").trim();if(a==="none")return"none";let e=a.replace(/[^\w-]/g,"-");for(;e.startsWith("-");)e=e.slice(1);for(;e.endsWith("-");)e=e.slice(0,-1);return e?`--${e}`:"--"},Do=r=>{const a=kc(r);return a==="none"?null:a},xs=(r,a)=>{const e=Do(a);if(!e)return()=>{};let o=Bo.get(r);return o||(o=new Set,Bo.set(r,o)),o.has(e)?()=>{}:(o.add(e),r.style.setProperty("anchor-name",Mo([...o],1/0,", ")),()=>{const t=Bo.get(r);if(t){if(t.delete(e),t.size===0){Bo.delete(r),r.style.removeProperty("anchor-name");return}r.style.setProperty("anchor-name",Mo([...t],1/0,", "))}})},ks=r=>r==="start"||r==="end"?r:"center",Zu=r=>{const a=r.split("-")[0];return a==="top"||a==="right"||a==="bottom"||a==="left"?a:null},ws=r=>{const a=Zu(r),e=ks(r.split("-")[1]);switch(a){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"}}},Cs=(r,a)=>r!=="center"&&a!=="center"&&r!==a,As=(r,a)=>{const e=ws(r),o=ws(a),t=Cs(e.block,o.block),i=Cs(e.inline,o.inline);return t&&i?"flip-block-inline":t?"flip-block":i?"flip-inline":""},Xu={...{"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"}},Ss=r=>{r.style.removeProperty("top"),r.style.removeProperty("left"),r.style.removeProperty("position"),r.style.removeProperty("margin"),delete r.dataset.fallbacks},Ju=[{test:(r,a,e)=>r==="y"&&a.includes("top")&&e.includes("top"),value:-1},{test:(r,a,e)=>r==="y"&&a.includes("top")&&e.includes("bottom"),value:-1},{test:(r,a,e)=>r==="y"&&a.includes("bottom")&&e.includes("top"),value:1},{test:(r,a,e)=>r==="x"&&a.includes("left")&&e.includes("left"),value:-1},{test:(r,a,e)=>r==="x"&&a.includes("left")&&e.includes("right"),value:-1},{test:(r,a,e)=>r==="x"&&a.includes("right")&&e.includes("left"),value:1}],zs=(r,a,e)=>Ju.find(o=>o.test(r,a,e))?.value||0,Qu=({anchorEl:r,popoverEl:a,anchorAt:e,tryFallbacks:o,offsetPx:t,tailSizePx:i,hasTail:c,isOpen:l})=>{Mt(()=>{if(!(l&&!yc()&&!!r&&!!a)){a&&Ss(a);return}const u=r,g=a,p=Xu[e];let v=!0,m;return(async()=>{try{const{autoUpdate:k,computePosition:_,flip:y,offset:z}=await sa.e("defaultVendors-node_modules_pnpm_floating-ui_dom_1_7_5_node_modules_floating-ui_dom_dist_floa-04d176").then(sa.bind(sa,40153));if(!v)return;const x=c?Math.max(0,i)*(Math.sqrt(2)/2):0,S=[z(t)];o&&S.push(y({fallbackStrategy:"bestFit"}));const D=async()=>{try{const B=await _(u,g,{placement:p,strategy:"fixed",middleware:S}),F=B.x+x*zs("x",B.placement,p),T=B.y+x*zs("y",B.placement,p);if(g.style.left=`${F}px`,g.style.top=`${T}px`,!c||!o){delete g.dataset.fallbacks;return}const C=As(p,B.placement);C?g.dataset.fallbacks=C:delete g.dataset.fallbacks}catch{}};m=k(u,g,D),await D()}catch{}})(),()=>{v=!1,m?.(),Ss(g)}},[e,r,c,l,t,a,i,o])},Bt=1,ao=2,rh=[{test:(r,a)=>a.top>=r.bottom+Bt,value:"bottom"},{test:(r,a)=>a.bottom<=r.top-Bt,value:"top"},{test:(r,a)=>a.left>=r.right+Bt,value:"right"},{test:(r,a)=>a.right<=r.left-Bt,value:"left"}],Oo=r=>{delete r.dataset.fallbacks};let wc;const ah=()=>(wc||(wc=sa.e("defaultVendors-node_modules_pnpm_floating-ui_dom_1_7_5_node_modules_floating-ui_dom_dist_floa-04d176").then(sa.bind(sa,40153))),wc),Dt=r=>
1638({x:r.left+r.width/2,y:r.top+r.height/2}),eh=(r,a,e,o)=>{const t=Dt(a),i=Dt(e);if(r==="top"||r==="bottom"){const u=Math.abs(o==="rtl"?e.right-a.right:e.left-a.left),g=Math.abs(o==="rtl"?e.left-a.left:e.right-a.right),p=Math.abs(i.x-t.x);return Math.abs(u-g)<=ao&&p<=ao||p+ao<Math.min(u,g)?"center":u<=g?"start":"end"}const c=Math.abs(e.top-a.top),l=Math.abs(e.bottom-a.bottom),d=Math.abs(i.y-t.y);return Math.abs(c-l)<=ao&&d<=ao||d+ao<Math.min(c,l)?"center":c<=l?"start":"end"},oh=(r,a,e,o)=>{const t=rh.find(d=>d.test(a,e));let i;if(t)i=t.value;else{const d=Dt(a),u=Dt(e),g=u.y-d.y,p=u.x-d.x,v=Math.min(a.height,e.height)*.1;Math.abs(g)>v?i=g>=0?"bottom":"top":i=p>=0?"right":"left"}if(ks(r.split("-")[1])==="center")return i;const l=eh(i,a,e,o);return`${i}-${l}`},th=({anchorEl:r,popoverEl:a,anchorAt:e,tryFallbacks:o,isOpen:t,hasTail:i})=>{Mt(()=>{if(!a||!xc.canAnchor)return;if(!i||!o||!t||xc.canAnchoredContainers||!r){Oo(a);return}const c=e;if(c==="center"||c.includes("corner")){Oo(a);return}const l=r,d=a;let u=!0,g;const p=()=>{const m=l.getBoundingClientRect(),b=d.getBoundingClientRect(),$=getComputedStyle(l).direction==="rtl"?"rtl":"ltr",k=oh(c,m,b,$),_=As(c,k);c===k?Oo(d):_?d.dataset.fallbacks=_:Oo(d)};return(async()=>{try{const{autoUpdate:b}=await ah();if(!u)return;g=b(l,d,p),p()}catch{}})(),()=>{u=!1,g?.(),Oo(d)}},[e,r,i,t,a,o])},Ot=r=>typeof r=="string",Es=r=>r!==null&&typeof r=="object",_s=(r,a=" ")=>r.split(a).map(e=>e.trim()).filter(Boolean),nh=s` 1639@layer arc-components { 1640 1641 [arc-spinner] { 1642 flex: none; 1643 display: flex; 1644 1645 position: var(--arc-spinner-position, relative); 1646 inset: var(--arc-spinner-inset, 0); 1647 translate: var(--arc-spinner-translate, 0); 1648 width: var(--arc-spinner-size, 3em); 1649 1650 border-radius: var(--arc-border-radius-circle); 1651 aspect-ratio: 1 / 1; 1652 pointer-events: none; 1653 1654 [arc-spinner-circle] { 1655 fill: none; 1656 stroke: var(--arc-spinner-circle-color, currentcolor); 1657 opacity: var(--arc-spinner-circle-opacity, var(--arc-alpha-30)); 1658 } 1659 1660 [arc-spinner-progress] { 1661 fill: none; 1662 stroke: var(--arc-spinner-progress-color, var(--arc-color-fg-brand-mid)); 1663 stroke-dasharray: var(--arc-spinner-progress, 0.3334) 1; 1664 stroke-dashoffset: 0; 1665 stroke-linecap: round; 1666 opacity: var(--arc-spinner-progress-opacity, var(--arc-alpha-100)); 1667 animation: var(--arc-spinner-animation-duration, 743ms) arc-spinner-rotate linear infinite; 1668 transform-origin: 50% 50%; 1669 } 1670 } 1671 1672 @keyframes arc-spinner-rotate { 1673 to { 1674 transform: rotate3d(0, 0, 1, 360deg); 1675 } 1676 } 1677} 1678`,Cc=(0,h.forwardRef)(({progress:r,...a},e)=>(0,n.jsxs)("svg",{...a,ref:e,viewBox:"0 0 100 100","arc-spinner":"",style:{"--arc-spinner-progress":r??""},children:[(0,n.jsx)("circle",{"arc-spinner-circle":"",cx:"50%",cy:"50%",r:"45%",strokeWidth:"12.5%",pathLength:"1"}),(0,n.jsx)("circle",{"arc-spinner-progress":"",cx:"50%",cy:"50%",r:"45%",strokeWidth:"12.5%",pathLength:"1"})]}));Cc.displayName="ArcSpinner",ir("ArcSpinner",nh);const ch=(...r)=>console.log(...r),Ts=(...r)=>console.warn(...r),ih=(...r)=>console.error(...r),eo=s`--arcâ¢iconâ¢text`,Fo=s`${eo}â¢fontâ¢size`,Is=s`${eo}â¢icon`,Ac=s`${eo}â¢text`,js=s`${eo}â¢subtext`,Pa=s`${eo}â¢fg`,oe=s`${eo}â¢gap`,ve=s`${Is}â¢size`,Ft=s`${Is}â¢verticalâ¢align`,No=s`${Ac}â¢overflow`,Nt=s`${Ac}â¢textâ¢overflow`,Ht=s`${Ac}â¢whiteâ¢space`,Vt=s`${js}â¢fontâ¢size`,Ls=s`${js}â¢fg`,sh=s` 1679 1680 &[data-variant=inherit] { /* @default 'inherit' ⢠uses font/color props from context */ 1681 ${Pa}: currentcolor; 1682 } 1683 1684 &[data-variant=primary] { 1685 ${Pa}: var(--arc-color-fg-primary); 1686 } 1687 1688 &[data-variant=secondary] { 1689 ${Pa}: var(--arc-color-fg-secondary); 1690 } 1691 1692 &[data-variant=inverse] { 1693 ${Pa}: var(--arc-color-dark-neutral-1000); 1694 } 1695 1696 &[data-variant=brand] { 1697 ${Pa}: var(--arc-color-fg-brand-stark); 1698 } 1699 1700 &[data-variant=info] { 1701 ${Pa}: var(--arc-color-fg-info-stark); 1702 } 1703 1704 &[data-variant=success] { 1705 ${Pa}: var(--arc-color-fg-success-stark); 1706 } 1707 1708 &[data-variant=warning] { 1709 ${Pa}: var(--arc-color-fg-warning-stark); 1710 } 1711 1712 &[data-variant=critical] { 1713 ${Pa}: var(--arc-color-fg-critical-mid); 1714 } 1715 1716`,lh=s` 1717 1718 /* Overall Text Sizes */ 1719 1720 &[data-size=inherit] { /* @default 'inherit' ⢠uses font/size from context */ 1721 ${Fo}: 1em; 1722 ${Vt}: 0.75em; 1723 ${ve}: 1em; 1724 ${oe}: 0.25em; /* 4px @ 100% */ 1725 } 1726 1727 &[data-size=md] { 1728 ${Fo}: var(--arc-font-size-14); 1729 ${Vt}: var(--arc-font-size-12); 1730 ${oe}: var(${E}â¢3); 1731 } 1732 1733 &[data-size=sm] { 1734 ${Fo}: var(--arc-font-size-12); 1735 ${Vt}: var(--arc-font-size-12); 1736 ${oe}: var(${E}â¢3); 1737 } 1738 1739 /* Gap Sizes */ 1740 1741 &[data-gap=lg] { ${oe}: var(${E}â¢12); } /* 12px @ 100% */ 1742 &[data-gap=md] { ${oe}: var(${E}â¢8); } /* 8px @ 100% */ 1743 &[data-gap=sm] { ${oe}: var(${E}â¢3); } /* 4px @ 100% */ 1744 1745 /* Icon Sizes */ 1746 1747 &[icon-size=xl] { ${ve}: var(${f}â¢24); } 1748 &[icon-size=lg] { ${ve}: var(${f}â¢20); } 1749 &[icon-size=md] { ${ve}: var(${f}â¢16); } 1750 &[icon-size=sm] { ${ve}: var(${f}â¢14); } 1751 &[icon-size=xs] { ${ve}: var(${f}â¢12); } 1752`,dh=s` 1753 1754 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 1755 ${Ls}: var(--arc-icon-text-subtext-color, color-mix(in srgb, currentcolor 61.2%, transparent)); 1756 1757 /* ArcIcon */ 1758 --arc-icon-color: var(--arc-icon-text-icon-color, var(${Pa})); 1759 --arc-icon-size: var(--arc-icon-text-icon-size, var(${ve})); 1760 --arc-icon-fa-line-height: normal; 1761 --arc-icon-align-self: normal; 1762 1763 &[data-layout=inline] { 1764 ${No}: unset; 1765 ${Nt}: unset; 1766 ${Ht}: unset; 1767 1768 ${Ft}: calc((var(${ve}) - var(${Fo})) / -2); 1769 1770 &:has(svg) { ${Ft}: text-bottom; } 1771 } 1772 1773 /* Text Overflows */ 1774 &[data-layout=gutter] { 1775 ${No}: visible; 1776 ${Nt}: unset; 1777 ${Ht}: normal; 1778 1779 &[data-overflow=truncate] { 1780 ${No}: hidden; 1781 ${Nt}: ellipsis; 1782 ${Ht}: nowrap; 1783 } 1784 } 1785 1786`,uh=s` 1787@layer arc-components { 1788 1789 [arc-icon-text] { 1790 ${sh} 1791 ${lh} 1792 ${dh} 1793 } 1794 1795 [arc-icon-text] { 1796 position: var(--arc-icon-text-position, relative); 1797 font-size: var(--arc-icon-text-font-size, var(${Fo})); 1798 color: var(--arc-icon-text-text-color, var(${Pa})); 1799 line-height: var(--arc-icon-text-line-height, inherit); 1800 1801 [data-element=text], 1802 [data-element=subtext] { 1803 position: relative; 1804 hyphens: var(--arc-icon-text-hyphens, auto); 1805 } 1806 1807 &[is-strong] [data-element=text] {
1808 font-weight: var(--arc-icon-text-font-weight, var(--arc-font-weight-bold)); 1809 1810 [data-element=subtext] { 1811 font-weight: var(--arc-icon-text-subtext-font-weight, var(--arc-font-weight-normal)); 1812 } 1813 } 1814 1815 /* @default ⢠gutter layout */ 1816 &[data-layout=gutter] { 1817 display: inline-flex; 1818 align-items: var(--arc-icon-text-align-items, first baseline); 1819 gap: var(--arc-icon-text-gap, var(${oe})); 1820 1821 /* Truncation Support */ 1822 overflow: var(--arc-icon-text-overflow, var(${No})); 1823 1824 &[is-flipped] { flex-direction: row-reverse; } 1825 1826 &:not(:has([arc-gradient])) [data-element=icon] { display: contents; } 1827 1828 [data-element=text] { 1829 flex: 1; 1830 min-width: 0%; 1831 } 1832 1833 [data-element=subtext] { 1834 display: var(--arc-icon-text-subtext-display, block); 1835 line-height: normal; 1836 font-size: var(--arc-icon-text-subtext-font-size, var(${Vt})); 1837 color: var(--arc-icon-text-subtext-color, var(${Ls})); 1838 padding-block-start: var(--arc-icon-text-subtext-spacing, 0); 1839 } 1840 1841 :where([data-element=text], [data-element=subtext]) { 1842 overflow: var(--arc-icon-text-overflow, var(${No})); 1843 text-overflow: var(--arc-icon-text-text-overflow, var(${Nt})); 1844 white-space: var(--arc-icon-text-white-space, var(${Ht})); 1845 } 1846 } 1847 1848 &[data-layout=inline] { 1849 display: inline; 1850 1851 [data-element=icon] { 1852 line-height: normal; 1853 vertical-align: var(--arc-icon-text-icon-vertical-align, var(${Ft})); 1854 } 1855 1856 [data-element=icon] + [data-element=text] { margin-inline-start: var(--arc-icon-text-gap, var(${oe})); } 1857 [data-element=text]:has(+ [data-element=icon]) { margin-inline-end: var(--arc-icon-text-gap, var(${oe})); } 1858 [data-element=subtext] { display: contents; } 1859 1860 &:has(svg) { 1861 ${Ft}: text-bottom; 1862 } 1863 } 1864 } 1865} 1866 1867`,hh=q(zr,["inherit","primary","secondary","inverse","brand","info","success","warning","critical"]),Yr=({children:r,layout:a="gutter",size:e="inherit",variant:o="inherit",tag:t="span",icon:i,iconTooltip:c,text:l,subtext:d,gradient:u,overflow:g,iconSize:p,gapSize:v,isFlipped:m=!1,isStrong:b=!1,...$})=>{const k=r||l,_=!!i,y=!!k,z=a==="gutter",x=a==="inline",S=_&&(!m||z),D=_&&y&&m&&x,B=!!p&&p!=="inherit",F=B&&Ee.includes(p)?p:void 0,T=B&&!Ee.includes(p)?p:void 0,C=v!=="inherit"?v:void 0,W=g!=="inherit"?g:void 0,H=gc(i),ar=typeof H=="string"?(0,n.jsx)(cr,{icon:H,size:T,gradient:u}):H,K=c?(0,n.jsx)(Jt,{text:c,children:ar}):ar;return(0,n.jsxs)(t,{...$,"arc-icon-text":"","data-variant":o,"data-layout":a,"data-overflow":W,"data-size":e,"data-gap":C,"icon-size":F,"is-flipped":m?"":void 0,"is-strong":b?"":void 0,children:[S&&(0,n.jsx)("span",{"data-element":"icon",children:K}),y&&(0,n.jsxs)("span",{"data-element":"text",children:[k,!!d&&(z?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("br",{}),(0,n.jsx)("small",{"data-element":"subtext",children:d})]}):(0,n.jsxs)(n.Fragment,{children:[" ",(0,n.jsx)("span",{"data-element":"subtext",children:d})]}))]}),D&&(0,n.jsx)("span",{"data-element":"icon",children:K})]})};ir("ArcIconText",uh);const Ma={...da,popover:fc[2],anchorAt:bc[2],boundary:$c[1],tryFallbacks:!0,scheme:mc[3],offset:4,isStrong:!0,hasTail:!0,isEnabled:!0},Ut=new WeakSet,gh=100,vh=100;let Sc=!0,zc=null;const ph=typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("selector(:focus-visible)"),fh=r=>r instanceof Element?ph?r.matches(":focus-visible")===!0:Sc:!1,Ec=new WeakMap,_c=new WeakMap,Ho=new Set,Wt=(r,a)=>{const e=r.get(a);e!=null&&(clearTimeout(e),r.delete(a))},Rs=(r,a,e,o)=>{const t=window.setTimeout(()=>{o(),r.delete(a)},e);r.set(a,t)},Ps="[aria-describedby]",mh=r=>typeof r=="object"&&r!==null&&r.hasAttribute?.("popover")===!0,Ms=r=>r instanceof HTMLElement&&r.getAttribute("role")==="tooltip"&&mh(r),bh=r=>!!r&&(r.tagName==="LABEL"||r.hasAttribute("arc-label")),$h=r=>r?.match(/\S+/g)??[],Tc=(r,a)=>{const e=Ra(a??document.documentElement);if(!e)return null;const o=e.querySelector(`[aria-describedby~="${r}"]`);return o?o.closest("label,[arc-label]")??o:null},yh=r=>{if(!(r instanceof Element))return null;const a=r.closest?.(Ps);if(a){const o=a.getAttribute("aria-describedby")??"";if(o)return{anchor:a.closest?.("label,[arc-label]")??a,tooltipId:o}}let e=r;
1867for(;e;){if(bh(e)){const o=e.querySelector?.(Ps),t=o?.getAttribute?.("aria-describedby")??"";if(o&&t)return{anchor:e,tooltipId:t}}e=e.parentElement}return null},xh=r=>{if(!(r instanceof Element))return null;const a=r.closest?.('[role="tooltip"][popover]')??null;return a instanceof HTMLElement?a:null},kh=r=>r?.id?Tc(r.id,r):null,wh=r=>{const a=xh(r),e=yh(r);if(!e&&a){const d=kh(a);return!d||!a.id?null:{anchor:d,tooltip:a}}if(!e)return null;const{anchor:o,tooltipId:t}=e;if(!t)return null;const i=Ra(r);if(!i)return null;const c=$h(t),l=a??c.map(d=>i.getElementById(d)).find(d=>Ms(d))??null;return Ms(l)?{anchor:o,tooltip:l}:null},Ch=(r,a,e)=>{const o=e instanceof Element?e:null;if(!o)return!1;const t=r===o||r.contains(o),i=a===o||a.contains(o);return t||i},Bs=r=>{r.isConnected&&(r.showPopover?.(),Ho.add(r))},Ds=r=>{r.isConnected&&(r.hidePopover?.(),Ho.delete(r))},Ah=(r,a)=>{if(Wt(_c,r),Wt(Ec,r),!a){Bs(r);return}Rs(Ec,r,gh,()=>Bs(r))},Ic=(r,a)=>{if(Wt(Ec,r),Wt(_c,r),!a){Ds(r);return}Rs(_c,r,vh,()=>Ds(r))},Sh=()=>{Ho.forEach(r=>{Ic(r,!1)})},Vo=(r,a,e,o)=>{const t=wh(a);if(!t)return;const{anchor:i,tooltip:c}=t;if(r){Ah(c,o);return}Ch(i,c,e)||Ic(c,o)};let Kt=null,Gt=null,Yt=null,qt=null,Zt=null,Xt=null,oo=null,Uo=null;const Os=r=>{if(!r&&typeof document>"u")return;const a=r?Ra(r):document;if(!a||Ut.has(a))return;Xt=o=>{Sc=!1,zc=o.target},oo=()=>{zc=null},Kt=o=>Vo(!0,o.target,void 0,!0),Yt=o=>Vo(!1,o.target,o.relatedTarget,!0),Gt=o=>{fh(o.target)&&Vo(!0,o.target,void 0,!1)},qt=o=>{const t=o.relatedTarget??zc;Vo(!1,o.target,t,!1)},Zt=o=>{o.key==="Tab"&&(Sc=!0),o.key==="Escape"&&(Ho.size>0&&o.preventDefault(),Vo(!1,o.target,void 0,!1),Ho.forEach(t=>Ic(t,!1)))},Uo=o=>{if(o.newState!=="open")return;const{target:t}=o;if(t instanceof HTMLElement&&t.getAttribute("role")!=="tooltip"&&t.getAttribute("popover")!=="manual"){try{if(!t.matches("[popover]:popover-open"))return}catch{return}Sh()}},[["pointerdown",Xt],["pointerup",oo],["pointercancel",oo],["pointerover",Kt],["focusin",Gt],["pointerout",Yt],["focusout",qt],["keydown",Zt]].forEach(([o,t])=>{a.addEventListener(o,t)}),a.addEventListener("toggle",Uo,!0),Ut.add(a)},zh=()=>{if(!Ut.has(document)||typeof document>"u")return;[["pointerdown",Xt],["pointerup",oo],["pointercancel",oo],["pointerover",Kt],["focusin",Gt],["pointerout",Yt],["focusout",qt],["keydown",Zt]].forEach(([a,e])=>{e&&document.removeEventListener(a,e)}),Uo&&document.removeEventListener("toggle",Uo,!0),Kt=null,Gt=null,Yt=null,qt=null,Zt=null,Xt=null,oo=null,Uo=null,Ut.delete(document)},Ba=s`--arcâ¢tooltip`,Fs=s`${Ba}â¢subtext`,Ns=s`${Ba}â¢slot`,Eh=s` 1868@layer arc-components { 1869 [arc-tooltip] { 1870 ${Ba}â¢width: max-content; 1871 ${Ba}â¢maxâ¢width: 20em; 1872 ${Ba}â¢fontâ¢size: var(${f}â¢12); 1873 ${Ba}â¢padding: var(${E}â¢10); 1874 ${Fs}â¢spacing: var(${E}â¢6); 1875 ${Ns}â¢marginâ¢top: var(${E}â¢8); 1876 1877 /* Communicates to Popover Engine ------------------------------⢠*/ 1878 --arc-popover-overflow: var(--arc-tooltip-overflow, clip); 1879 --arc-popover-border-radius: var(--arc-border-radius-md); 1880 --arc-popover-min-width: auto; /** Ensure tooltip width is driven by content, not anchor width */ 1881 --arc-popover-width: var(--arc-tooltip-width, var(${Ba}â¢width)); 1882 --arc-popover-max-width: var(--arc-tooltip-max-width, var(${Ba}â¢maxâ¢width)); 1883 --arc-popover-border: var(--arc-tooltip-border, 0); 1884 --arc-popover-footer-flex-direction: var(--arc-tooltip-footer-flex-direction, row); 1885 --arc-popover-font-size: var(--arc-tooltip-font-size, var(${Ba}â¢fontâ¢size)); 1886 --arc-popover-padding: var(--arc-tooltip-padding, var(${Ba}â¢padding)); 1887 --arc-popover-tail-x: var(--arc-tooltip-tail-x, 1.125em); 1888 --arc-popover-tail-y: var(--arc-tooltip-tail-y, 1.125em); 1889 1890 /* Communicates to IconText ----------------------------------⢠*/ 1891 --arc-icon-text-subtext-font-size: var(--arc-tooltip-subtext-font-size, var(${Ba}â¢fontâ¢size)); 1892 --arc-icon-text-hyphens: none; 1893 --arc-icon-text-line-height: var(--arc-line-height-tight); 1894 --arc-icon-text-subtext-spacing: var(--arc-tooltip-subtext-spacing, var(${Fs}â¢spacing)); 1895 1896 [arc-tooltip-content] + [arc-tooltip-slot-content] { 1897 margin-top: var(--arc-tooltip-slot-margin-top, var(${Ns}â¢marginâ¢top)); 1898 } 1899 } 1900} 1901`,Jt=(0,h.forwardRef)(({id:r,children:a,slot:e,isEnabled:o=Ma.isEnabled,popover:t=Ma.popover,variant:i=Ma.variant,anchorAt:c=Ma.anchorAt,alternateAnchor:l,boundary:d=Ma.boundary,tryFallbacks:u=Ma.tr
1901yFallbacks,hasTail:g=Ma.hasTail,offset:p=Ma.offset,scheme:v=Ma.scheme,isStrong:m=Ma.isStrong,text:b,subtext:$,icon:k,isFlipped:_,...y},z)=>{const x=Ir(r,"arc-tooltip"),S=(0,h.useRef)(null);(0,h.useImperativeHandle)(z,()=>S.current);const D=H=>typeof H=="object"&&H!==null&&"tabIndex"in H,B=a,F=!!l;let T=null;(0,h.isValidElement)(B)?T=o?(0,h.cloneElement)(B,{"aria-describedby":x,...D(B.props)&&B.props.tabIndex!=null?{}:{tabIndex:0}}):B:!F&&typeof console<"u"&&Ts("\u{1F6A8} ArcTooltip \u2022 expects a single ReactElement child as the trigger.");const C=(0,h.useMemo)(()=>()=>Tc(x,S.current),[x]),W=v==="auto"?void 0:v;return(0,h.useEffect)(()=>{if(o)try{Os(S.current)}catch{}},[o]),(0,n.jsxs)(n.Fragment,{children:[T,o&&(0,n.jsxs)(te,{...y,"arc-tooltip":"",scheme:y?.isInverse?"inverse":W,role:"tooltip",id:x,ref:S,popover:t,anchorAt:c,tryFallbacks:u??d==="flip",variant:i,hasTail:g,offset:p,hidePopoverButton:!0,alternateAnchor:l??C,tag:y?.tag??"span",contentTag:y?.contentTag??"span",children:[b&&(0,n.jsx)(Yr,{"arc-tooltip-content":"",text:b,subtext:$,icon:k,isFlipped:_,isStrong:m,size:"inherit",variant:"inherit"}),e&&(0,n.jsx)("span",{"arc-tooltip-slot-content":"",children:e})]})]})});ir("ArcTooltip",Eh);const _h=q(Co,["circle","square","narrow"]),Th=q(aa,["xxl","xl","lg","md","sm"]),Ih=q(Ia,["hug","fill","icon"]),jh=q(zr,["common","ai","critical","alpha"]),Lh=[...re],Rh=[...Ct],Hs=q(zr,["primary","secondary","tertiary","critical-primary","critical-secondary","ai-primary","ai-secondary","primary-inverse","secondary-inverse","tertiary-inverse"]),Ph=q(At,["primary","secondary","tertiary","plain","link-style"]),Mh=[...Ye],Bh=s` 1902:root { 1903 --arc-button-critical-bg-hover: light-dark( 1904 color-mix(in srgb, var(--arc-color-light-red-600), transparent 90%), 1905 color-mix(in srgb, var(--arc-color-dark-red-700), transparent 75%) 1906 ); 1907 1908 /* common-secondary variant floating button */ 1909 --arc-button-common-secondary-floating-bg: var(--arc-color-bg-primary); 1910 --arc-button-common-secondary-floating-bg-hover: light-dark(var(--arc-color-light-neutral-100), var(--arc-color-dark-neutral-100)); 1911 --arc-button-common-secondary-floating-bg-active: light-dark(var(--arc-color-light-neutral-200), var(--arc-color-dark-neutral-200)); 1912 --arc-button-common-secondary-floating-bg-processing: var(--arc-color-bg-primary); 1913 --arc-button-common-secondary-floating-bg-disabled: var(--arc-color-bg-disabled); 1914 --arc-button-common-secondary-floating-bg-focus: var(--arc-color-bg-primary); 1915 1916 /* critical-secondary variant floating button */ 1917 --arc-button-critical-secondary-floating-bg: var(--arc-color-bg-primary); 1918 --arc-button-critical-secondary-floating-bg-hover: var(--arc-color-bg-critical-subtle); 1919 --arc-button-critical-secondary-floating-bg-active: var(--arc-color-bg-critical-muted); 1920 --arc-button-critical-secondary-floating-bg-processing: var(--arc-color-bg-primary); 1921 --arc-button-critical-secondary-floating-bg-disabled: var(--arc-color-bg-disabled); 1922 --arc-button-critical-secondary-floating-bg-focus: var(--arc-color-bg-primary); 1923 1924 /* ai-secondary variant floating button */ 1925 --arc-button-ai-secondary-floating-bg-processing: var(--arc-color-bg-primary); 1926 --arc-button-ai-secondary-floating-bg-disabled: var(--arc-color-bg-disabled); 1927 --arc-button-ai-secondary-floating-bg-focus: var(--arc-color-bg-primary); 1928} 1929`,Dh=s` 1930:root { 1931 --arc-link-fg-hover-inverse: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 68.2%, transparent); 1932 --arc-link-fg-disabled-inverse: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 30%, transparent); 1933 --arc-link-focus-disabled-inverse: light-dark(var(--arc-color-light-blue-300), var(--arc-color-blue-600)); 1934} 1935`,Oh=s` 1936:root { 1937 --arc-popover-ai-purple-50: light-dark(#fbf2ff, #210125); 1938 --arc-popover-ai-purple-200: light-dark(#9c15ff, #ad44cb); 1939 --arc-popover-ai-blue-50: light-dark(#f4fbff, #00223b); 1940 --arc-popover-ai-blue-200: light-dark(#1eb4fb, #169cfe); 1941} 1942`,Fh=s` 1943:root { 1944 --arc-banner-gradient-ai-50: linear-gradient(60deg, light-dark(#fbf2ff, #210125), light-dark(#f4fbff, #00223b)); 1945 --arc-banner-gradient-ai-100: linear-gradient(60deg, light-dark(#efccff, #540160), light-dark(#d2f1fe, #02497d)); 1946 --arc-banner-gradient-ai-300: linear-gradient(60deg, light-dark(#680278, #ad44cb), light-dark(#0179d0, #71bdfe)); 1947} 1948`,A=s`--arcâ¢button`,R=s`${A}â¢fg`,w=s`${A}â¢bg`,tr=s`${A}â¢edge`,ea=s`${A}â¢border`,to=s`${A}â¢outline`,ur=s`${A}â¢spinner`,qr=s`${A}â¢icon`,Nh=s` 1949 &[data-size=xxl] { 1950 ${A}â¢fontâ¢size: var(${f}â¢16); 1951 ${ur}â¢size: var(${f}â¢32); 1952 ${qr}â¢size: var(${f}â¢20); 1953 ${qr}â¢sizeâ¢large: var(${f}â¢24); 1954 ${A}â¢height: var(${f}â¢56); 1955 ${A}â¢gap: var(${f}â¢10); 1956 ${A}â¢paddingâ¢inline: var(${f}â¢32); 1957 } 1958 1959 &[data-size=xl] { 1960 ${A}â¢fontâ¢size: var(${f}â¢14); 1961 ${ur}â¢size: var(${f}â¢16); 1962 ${qr}â¢size: var(${f}â¢16); 1963 ${qr}â¢sizeâ¢large: var(${f}â¢20); 1964 ${A}â¢height: var(${f}â¢48); 1965 ${A}â¢gap: var(${f}â¢8); 1966 ${A}â¢paddingâ¢inline: var(${f}â¢32); 1967 } 1968 1969 &[data-size=lg] { /** @default */ 1970 ${A}â¢fontâ¢size: var(${f}â¢14); 1971 ${ur}â¢size: var(${f}â¢16); 1972 ${qr}â¢size: var(${f}â¢16); 1973 ${qr}â¢sizeâ¢large: var(${f}â¢20); 1974 ${A}â¢height: var(${f}â¢40); 1975 ${A}â¢gap: var(${f}â¢8); 1976 ${A}â¢paddingâ¢inline: var(${f}â¢20); 1977 } 1978 1979 &[data-size=inherit] { 1980 ${A}â¢fontâ¢size: 1em; 1981 ${ur}â¢size: 1em; 1982 ${qr}â¢size: 1em; 1983 ${qr}â¢sizeâ¢large: 1.25em; 1984 ${A}â¢gap: 0.5em; 1985 ${A}â¢paddingâ¢inline: 1em; 1986 } 1987 1988 &[data-size=md] { 1989 ${A}â¢fontâ¢size: var(${f}â¢14); 1990 ${ur}â¢size: var(${f}â¢16); 1991 ${qr}â¢size: var(${f}â¢14); 1992 ${qr}â¢sizeâ¢large: var(${f}â¢20); 1993 ${A}â¢height: var(${f}â¢32); 1994 ${A}â¢gap: var(${f}â¢6); 1995 ${A}â¢paddingâ¢inline: var(${f}â¢16); 1996 } 1997 1998 &[data-size=sm] { 1999 ${A}â¢fontâ¢size: var(${f}â¢12); 2000 ${ur}â¢size: var(${f}â¢14); 2001 ${qr}â¢size: var(${f}â¢12); 2002 ${qr}â¢sizeâ¢large: var(${f}â¢14); 2003 ${A}â¢height: var(${f}â¢24); 2004 ${A}â¢gap: var(${f}â¢4); 2005 ${A}â¢paddingâ¢inline: var(${f}â¢12); 2006 } 2007 2008 /* Custom buttons start out matching [data-size=lg] size */ 2009 &[arc-button=custom] { 2010 ${A}â¢fontâ¢size: var(${f}â¢14); 2011 ${ur}â¢size: var(${f}â¢16); 2012 ${qr}â¢size: var(${f}â¢16); 2013 ${qr}â¢sizeâ¢large: var(${f}â¢20); 2014 ${A}â¢gap: var(${f}â¢8); 2015 ${A}â¢paddingâ¢inline: var(${f}â¢4); /* results in 24x24 for icon button @ 100% font size */ 2016 } 2017`,Hh=s` 2018 &[data-layout=hug] { 2019 ${A}â¢width: auto; 2020 ${A}â¢contentâ¢width: fit-content; 2021 } 2022 2023 &[data-layout=fill] { 2024 ${A}â¢display: flex; 2025 ${A}â¢width: 100%; 2026 ${A}â¢contentâ¢width: 0; 2027 } 2028 2029 &[data-layout=icon] { 2030 ${A}â¢aspectâ¢ratio: 1 / 1; 2031 ${A}â¢flex: none; 2032 ${A}â¢minâ¢width: min-content; 2033 ${A}â¢maxâ¢width: none; 2034 ${A}â¢paddingâ¢inline: var(${f}â¢0); 2035 2036 &[data-shape=narrow] { 2037 ${A}â¢aspectâ¢ratio: auto; 2038 ${A}â¢paddingâ¢inline: var(${f}â¢2); 2039 } 2040 } 2041 2042`,Vh=s` 2043 &:not([data-variant]) { /** @default - when no variant is set (i.e.: 'custom' buttons) */ 2044 ${R}: inherit; 2045 ${w}: transparent; 2046 ${tr}: transparent; 2047 ${R}â¢disabled: var(--arc-color-fg-disabled); 2048 } 2049 2050 /** @default */ 2051 &:is( 2052 [data-variant=common], 2053 [data-variant=primary], 2054 [data-variant=primary-inverse] 2055 ) { 2056 ${R}: var(--arc-color-fg-on-theme-heavy); 2057 ${w}: var(--arc-color-bg-theme-heavy); 2058 ${tr}: transparent; 2059 2060 ${R}â¢active: var(--arc-color-fg-on-theme-mid); 2061 ${R}â¢processing: var(--arc-color-fg-on-theme-stark); 2062 ${R}â¢disabled: var(--arc-color-fg-disabled); 2063 2064 ${w}â¢hover: var(--arc-color-bg-theme-stark); 2065 ${w}â¢active: var(--arc-color-bg-theme-mid); 2066 ${w}â¢processing: var(--arc-color-bg-theme-stark); 2067 ${w}â¢disabled: var(--arc-color-bg-disabled); 2068 2069 ${ur}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2070 } 2071 2072 &[data-variant=secondary], &[data-variant=secondary-inverse] { /** @default - when icon-only */ 2073 ${R}: var(--arc-color-fg-primary); 2074 ${tr}: var(--arc-color-border-theme-heavy); 2075 2076 ${R}â¢active: var(--arc-color-fg-secondary); 2077 ${R}â¢processing: var(--arc-color-fg-secondary); 2078 ${R}â¢disabled: var(--arc-color-fg-disabled); 2079 2080 ${tr}â¢active: var(--arc-color-border-theme-mid); 2081 ${tr}â¢processing: var(--arc-color-border-theme-subtle); 2082 ${tr}â¢disabled: var(--arc-color-border-disabled); 2083 2084 &[data-layout=icon] { 2085 ${tr}: var(--arc-color-border-mid); 2086 ${tr}â¢hover: var(--arc-color-border-stark); 2087 ${tr}â¢focus: var(--arc-color-border-mid); 2088 } 2089 2090 &[data-hierarchy=secondary] { 2091 ${w}: transparent; 2092 ${w}â¢hover: var(--arc-color-bg-neutral-muted); 2093 ${w}â¢active: var(--arc-color-bg-neutral-subtle); 2094 ${w}â¢processing: transparent; 2095 ${w}â¢disabled: transparent; 2096 ${w}â¢focus: var(--arc-color-alpha-white-3); 2097 } 2098 } 2099 2100 &[data-variant=secondary]:not([data-hierarchy=secondary]) { /** @deprecated */ 2101 ${w}: var(--arc-color-mono-white); 2102 ${w}â¢hover: linear-gradient(var(--arc-color-bg-neutral-muted) 0 0), var(--arc-color-mono-white); 2103 ${w}â¢active: linear-gradient(var(--arc-color-bg-neutral-subtle) 0 0), var(--arc-color-mono-white); 2104 ${w}â¢processing: var(--arc-color-mono-white); 2105 ${w}â¢disabled: var(--arc-color-mono-white); 2106 ${w}â¢focus: linear-gradient(var(--arc-color-alpha-white-3) 0 0), var(--arc-color-mono-white); 2107 } 2108 2109 &[data-variant=secondary-inverse]:not([data-hierarchy=secondary]) { /** @deprecated */ 2110 ${w}: var(--arc-color-mono-black); 2111 ${w}â¢hover: linear-gradient(var(--arc-color-bg-neutral-muted) 0 0), var(--arc-color-mono-black); 2112 ${w}â¢active: linear-gradient(var(--arc-color-bg-neutral-subtle) 0 0), var(--arc-color-mono-black); 2113 ${w}â¢processing: var(--arc-color-mono-black); 2114 ${w}â¢disabled: var(--arc-color-mono-black); 2115 ${w}â¢focus: linear-gradient(var(--arc-color-alpha-white-3) 0 0), var(--arc-color-mono-black); 2116 } 2117 2118 /* "floating" button mitigation */ 2119 &:is([data-variant=secondary], [data-variant=secondary-inverse])[arc-shadow] { 2120 ${w}: var(--arc-button-common-secondary-floating-bg); 2121 ${w}â¢hover: var(--arc-button-common-secondary-floating-bg-hover); 2122 ${w}â¢active: var(--arc-button-common-secondary-floating-bg-active); 2123 ${w}â¢processing: var(--arc-button-common-secondary-floating-bg-processing); 2124 ${w}â¢disabled: var(--arc-button-common-secondary-floating-bg-disabled); 2125 ${w}â¢focus: var(--arc-button-common-secondary-floating-bg-focus); 2126 } 2127 2128 &:is( 2129 [data-variant=tertiary], 2130 [data-variant=tertiary-inverse] 2131 ) { 2132 ${R}: var(--arc-color-fg-primary); 2133 ${w}: transparent; 2134 ${tr}: transparent; 2135 2136 ${R}â¢active: var(--arc-color-fg-secondary); 2137 ${R}â¢processing: var(--arc-color-fg-secondary); 2138 ${R}â¢disabled: var(--arc-color-fg-disabled); 2139 2140 ${w}â¢hover: var(--arc-color-bg-neutral-muted); 2141 ${w}â¢focus: var(--arc-color-alpha-white-3); 2142 ${w}â¢active: var(--arc-color-bg-neutral-muted); 2143 ${w}â¢processing: var(--arc-color-bg-neutral-muted); 2144 } 2145 2146 &[data-hierarchy=plain] { 2147 ${R}: var(--arc-color-fg-primary); 2148 ${w}: transparent; 2149 ${tr}: transparent; 2150 2151 ${R}â¢hover: var(--arc-color-alpha-heavy); 2152 ${R}â¢active: var(--arc-color-alpha-heavy); 2153 ${R}â¢processing: var(--arc-color-alpha-heavy); 2154 ${R}â¢disabled: var(--arc-color-fg-disabled); 2155 2156 ${w}â¢hover: transparent; 2157 ${w}â¢active: transparent; 2158 ${w}â¢processing: transparent; 2159 } 2160
2161`,Uh=s` 2162 &[data-variant=ai-primary] { 2163 ${R}: var(--arc-color-fg-on-theme-stark); 2164 ${w}: var(--arc-gradient-ai-500) padding-box, var(--arc-gradient-ai-200) border-box; 2165 2166 ${ur}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2167 2168 ${R}â¢active: var(--arc-color-fg-neutral-mid); 2169 ${R}â¢processing: var(--arc-color-fg-on-theme-heavy); 2170 ${R}â¢hover: var(--arc-color-fg-on-theme-heavy); 2171 2172 ${w}â¢hover: var(--arc-gradient-ai-400) padding-box, var(--arc-gradient-ai-200) border-box; 2173 ${w}â¢active: var(--arc-gradient-ai-600) padding-box, var(--arc-gradient-ai-200) border-box; 2174 ${w}â¢processing: var(--arc-gradient-ai-400) padding-box, var(--arc-gradient-ai-100) border-box; 2175 ${w}â¢disabled: var(--arc-color-bg-disabled); 2176 } 2177 2178 &[data-variant=ai-secondary] { 2179 ${R}: var(--arc-color-fg-primary); 2180 ${w}: linear-gradient(var(--arc-color-bg-primary) 0 0) padding-box, var(--arc-gradient-ai-200) border-box; 2181 2182 ${R}â¢active: var(--arc-color-fg-neutral-stark); 2183 ${R}â¢processing: var(--arc-color-fg-primary); 2184 2185 ${w}â¢hover: var(--arc-gradient-ai-50) padding-box, var(--arc-gradient-ai-300) border-box; 2186 ${w}â¢active: var(--arc-gradient-ai-50) padding-box, var(--arc-gradient-ai-100) border-box; 2187 ${w}â¢processing: var(--arc-gradient-ai-50) padding-box, var(--arc-gradient-ai-100) border-box; 2188 ${w}â¢disabled: var(--arc-color-bg-disabled); 2189 ${w}â¢focus: var(--arc-color-alpha-white-3); 2190 2191 /* "floating" button mitigation */ 2192 &[arc-shadow] { 2193 ${w}â¢processing: var(--arc-button-ai-secondary-floating-bg-processing); 2194 ${w}â¢disabled: var(--arc-button-ai-secondary-floating-bg-disabled); 2195 ${w}â¢focus: var(--arc-button-ai-secondary-floating-bg-focus); 2196 } 2197 } 2198 2199 &[data-variant^=ai-] { 2200 ${tr}: transparent; 2201 2202 ${R}â¢disabled: var(--arc-color-fg-disabled); 2203 ${tr}â¢disabled: var(--arc-color-border-disabled); 2204 } 2205 2206`,Wh=s` 2207 &[data-variant=alpha-primary] { 2208 ${R}: var(--arc-color-mono-black); 2209 ${w}: var(--arc-color-mono-white); 2210 ${tr}: transparent; 2211 2212 ${R}â¢focus: var(--arc-color-mono-black); 2213 ${R}â¢active: var(--arc-color-alpha-black-60); 2214 ${R}â¢processing: var(--arc-color-mono-black); 2215 ${R}â¢disabled: var(--arc-color-alpha-black-60); 2216 2217 ${w}â¢hover: var(--arc-color-alpha-white-70); 2218 ${w}â¢focus: var(--arc-color-mono-white); 2219 ${w}â¢active: var(--arc-color-alpha-white-40); 2220 ${w}â¢processing: var(--arc-color-alpha-white-40); 2221 ${w}â¢disabled: var(--arc-color-alpha-white-15); 2222 } 2223 2224 &[data-variant=alpha-secondary] { 2225 ${R}: var(--arc-color-alpha-white-95); 2226 ${w}: transparent; 2227 ${tr}: var(--arc-color-alpha-white-80); 2228 2229 ${R}â¢active: var(--arc-color-alpha-white-80); 2230 ${R}â¢processing: var(--arc-color-alpha-white-95); 2231 ${R}â¢disabled: var(--arc-color-alpha-white-50); 2232 2233 ${w}â¢hover: var(--arc-color-alpha-white-20); 2234 ${w}â¢focus: var(--arc-color-alpha-white-3); 2235 ${w}â¢active: var(--arc-color-alpha-white-40); 2236 ${w}â¢processing: var(--arc-color-alpha-white-25); 2237 ${w}â¢disabled: transparent; 2238 2239 ${tr}â¢hover: var(--arc-color-alpha-white-100); 2240 ${tr}â¢focus: var(--arc-color-alpha-white-80); 2241 ${tr}â¢active: var(--arc-color-alpha-white-50); 2242 ${tr}â¢processing: transparent; 2243 ${tr}â¢disabled: var(--arc-color-alpha-white-30); 2244 } 2245 2246 &[data-variant=alpha-tertiary] { 2247 ${R}: var(--arc-color-alpha-white-95); 2248 ${w}: transparent; 2249 ${tr}: transparent; 2250 2251 ${R}â¢active: var(--arc-color-alpha-black-60); 2252 ${R}â¢processing: var(--arc-color-alpha-white-95); 2253 ${R}â¢disabled: var(--arc-color-alpha-white-50); 2254 2255 ${w}â¢hover: var(--arc-color-alpha-white-20); 2256 ${w}â¢focus: var(--arc-color-alpha-white-5); 2257 ${w}â¢active: var(--arc-color-alpha-white-40); 2258 ${w}â¢processing: var(--arc-color-alpha-white-20); 2259 ${w}â¢disabled: transparent; 2260 } 2261 2262 &:is( 2263 [data-variant=alpha-plain], 2264 [data-variant=alpha-link-style] 2265 ) { 2266 ${R}: var(--arc-color-alpha-white-95); 2267 ${w}: transparent; 2268 ${tr}: transparent; 2269 2270 ${R}â¢hover: var(--arc-color-alpha-white-60); 2271 ${R}â¢active: var(--arc-color-alpha-white-40); 2272 ${R}â¢processing: var(--arc-color-alpha-white-95); 2273 ${R}â¢disabled: var(--arc-color-alpha-white-30); 2274 } 2275 2276 &[data-variant^=alpha-] { 2277 ${ur}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2278 } 2279`,Kh=s` 2280 &[data-variant=link-style] { 2281 ${R}: var(--arc-color-fg-primary); 2282 ${w}: transparent; 2283 ${tr}: transparent; 2284 2285 ${R}â¢hover: var(--arc-color-alpha-heavy); 2286 ${R}â¢active: var(--arc-color-alpha-heavy); 2287 ${R}â¢processing: var(--arc-color-alpha-heavy); 2288 ${R}â¢disabled: var(--arc-color-fg-disabled); 2289 } 2290`,Gh=s` 2291 &[data-variant=critical-primary] { 2292 ${R}: var(--arc-color-fg-on-stark); 2293 ${w}: var(--arc-color-bg-critical-stark); 2294 ${tr}: transparent; 2295 2296 ${R}â¢active: var(--arc-color-fg-critical-subtle); 2297 ${R}â¢processing: var(--arc-color-fg-on-heavy); 2298 ${R}â¢disabled: var(--arc-color-fg-disabled); 2299 2300 ${w}
2300â¢hover: var(--arc-color-bg-critical-heavy); 2301 ${w}â¢active: var(--arc-color-bg-critical-heavy); 2302 ${w}â¢processing: var(--arc-color-bg-critical-heavy); 2303 ${w}â¢disabled: var(--arc-color-bg-disabled); 2304 2305 ${ur}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2306 } 2307 2308 &[data-variant=critical-secondary] { 2309 ${R}: var(--arc-color-fg-critical-stark); 2310 ${w}: transparent; 2311 ${tr}: var(--arc-color-border-critical-stark); 2312 2313 ${R}â¢active: var(--arc-color-fg-critical-subtle); 2314 ${R}â¢processing: var(--arc-color-fg-critical-stark); 2315 ${R}â¢disabled: var(--arc-color-fg-disabled); 2316 2317 ${w}â¢hover: var(--arc-button-critical-bg-hover); 2318 ${w}â¢focus: var(--arc-color-alpha-white-3); 2319 ${w}â¢active: var(--arc-color-bg-critical-muted); 2320 ${w}â¢disabled: transparent; 2321 2322 ${tr}â¢active: var(--arc-color-border-critical-subtle); 2323 ${tr}â¢processing: var(--arc-color-border-critical-stark); 2324 ${tr}â¢disabled: var(--arc-color-border-disabled); 2325 2326 /* "floating" button mitigation */ 2327 &[arc-shadow] { 2328 ${w}: var(--arc-button-critical-secondary-floating-bg); 2329 ${w}â¢hover: var(--arc-button-critical-secondary-floating-bg-hover); 2330 ${w}â¢active: var(--arc-button-critical-secondary-floating-bg-active); 2331 ${w}â¢processing: var(--arc-button-critical-secondary-floating-bg-processing); 2332 ${w}â¢disabled: var(--arc-button-critical-secondary-floating-bg-disabled); 2333 ${w}â¢focus: var(--arc-button-critical-secondary-floating-bg-focus); 2334 } 2335 } 2336 2337 &[data-variant=critical-tertiary] { 2338 ${R}: var(--arc-color-fg-critical-stark); 2339 ${w}: transparent; 2340 ${tr}: transparent; 2341 2342 ${R}â¢active: var(--arc-color-fg-critical-subtle); 2343 ${R}â¢processing: var(--arc-color-fg-critical-stark); 2344 ${R}â¢disabled: var(--arc-color-fg-disabled); 2345 2346 ${w}â¢hover: var(--arc-button-critical-bg-hover); 2347 ${w}â¢focus: var(--arc-color-alpha-white-3); 2348 ${w}â¢active: var(--arc-color-bg-critical-subtle); 2349 ${w}â¢processing: var(--arc-color-bg-critical-muted); 2350 ${w}â¢disabled: transparent; 2351 } 2352 2353 &:is( 2354 [data-variant=critical-plain], 2355 [data-variant=critical-link-style] 2356 ) { 2357 ${R}: var(--arc-color-fg-critical-stark); 2358 ${w}: transparent; 2359 ${tr}: transparent; 2360 2361 ${R}â¢hover: var(--arc-color-fg-critical-mid); 2362 ${R}â¢active: var(--arc-color-fg-critical-subtle); 2363 ${R}â¢processing: var(--arc-color-fg-critical-stark); 2364 ${R}â¢disabled: var(--arc-color-fg-disabled); 2365 } 2366 2367`,Yh=s` 2368 ${A}â¢color: var(${R}); 2369 ${A}â¢background: var(${w}); 2370 ${A}â¢fontâ¢weight: var(--arc-font-weight-600); 2371 ${A}â¢padding: 0 var(${A}â¢paddingâ¢inline); 2372 ${A}â¢contentâ¢opacity: 1; 2373 ${A}â¢cursor: var(--arc-button-cursor, pointer); 2374 ${A}â¢transition: 0.2s ease-out; 2375 2376 ${ea}â¢color: var(${tr}); 2377 ${ea}: var(--arc-border-width-sm) solid var(${ea}â¢color, transparent); 2378 2379 ${to}: var(--arc-border-width-md) solid var(${to}â¢color, transparent); 2380 ${to}â¢offset: var(--arc-border-width-md); 2381 2382 /* spinner svg style controls */ 2383 ${ur}â¢progressâ¢color: var(--arc-button-progress-color, var(--arc-color-mono-white, currentcolor)); 2384 ${ur}â¢circleâ¢color: var(--arc-button-color, var(${ur}â¢baseâ¢color, var(--arc-color-alpha-mid))); 2385 ${ur}â¢circleâ¢opacity: var(--arc-alpha-100); 2386 2387 /* CONTEXT OVERRIDES */ 2388 &[arc-button=custom] { 2389 ${A}â¢fontâ¢weight: normal; 2390 } 2391 2392 &[data-variant^=ai-] { 2393 ${ea}: var(--arc-border-width-md) solid var(${ea}â¢color, transparent); 2394 } 2395 2396 &:is(:not([data-shape]), [data-shape=circle]) { 2397 ${ea}â¢radius: var(--arc-border-radius-pill); 2398 } 2399 2400 &:is( 2401 [arc-button=custom], 2402 [data-layout=icon]:not([data-shape]), 2403 [data-shape=square], 2404 [data-shape=narrow] 2405 ) { 2406 ${ea}â¢radius: var(--arc-border-radius-md); 2407 } 2408 2409 &:is( 2410 [arc-button=custom], 2411 [data-hierarchy=plain], 2412 [data-hierarchy=link-style] 2413 ) { 2414 ${A}â¢padding: unset; 2415 ${A}â¢height: unset; 2416 } 2417 2418 /* border-radius for plain and link-style informs focus state outline radius */ 2419 &:is( 2420 [data-hierarchy=plain], 2421 [data-hierarchy=link-style] 2422 ) { 2423 ${ea}â¢radius: var(--arc-border-radius-sm); 2424 } 2425 2426 &[data-hierarchy=link-style] { 2427 ${A}â¢fontâ¢weight: inherit; 2428 ${A}â¢textâ¢decoration: none; 2429 2430 [arc-button-label] { 2431 text-decoration: var(--arc-link-text-decoration, underline); 2432 text-decoration-color: currentcolor; 2433 } 2434 2435 [arc-button-icon] { 2436 text-decoration: none; 2437 } 2438 } 2439 2440 /* Inter-Component Communication ---------------------------------⢠*/ 2441 2442 /** ArcIcon */ 2443 --arc-icon-fa-line-height: 1lh; 2444 --arc-icon-size: var(${qr}â¢size); 2445 2446 &[has-large-icon] { 2447 --arc-icon-size: var(${qr}â¢sizeâ¢large); 2448 } 2449 2450 /** ArcSpinner */ 2451 --arc-spinner-size: var(${ur}â¢size); 2452 --arc-spinner-progress-color: var(${ur}â¢progressâ¢color); 2453 --arc-spinner-circle-color: var(${ur}â¢circleâ¢color); 2454 --arc-spinner-circle-opacity: var(${ur}â¢circleâ¢opacity); 2455 --arc-spinner-position: var(${ur}â¢position, absolute); 2456 --arc-spinner-inset: var(${ur}â¢inset, 50% auto auto 50%); 2457 --arc-spinner-translate: var(${ur}â¢translate, -50% -50%); 2458 2459`,qh=s` 2460 &:is(
2461 [is-processing], 2462 [is-processing-with-text], 2463 :has(input) 2464 ) { 2465 ${A}â¢position: relative; 2466 } 2467 2468 &[is-disabled] { 2469 ${A}â¢color: var(${R}â¢disabled, var(${R})); 2470 ${A}â¢background: var(${w}â¢disabled, var(${w})); 2471 ${ea}â¢color: var(${tr}â¢disabled, var(${tr})); 2472 ${A}â¢opacity: var(--arc-button-disabled-opacity, unset); 2473 ${A}â¢cursor: var(--arc-button-disabled-cursor, not-allowed); 2474 } 2475 2476 &:not( 2477 [is-disabled], 2478 [is-processing], 2479 [is-processing-with-text] 2480 ) { 2481 &:where( 2482 :hover, 2483 [data-simulate=hover] 2484 ) { 2485 ${A}â¢color: var(${R}â¢hover, var(${R})); 2486 ${A}â¢background: var(${w}â¢hover, var(${w})); 2487 ${ea}â¢color: var(${tr}â¢hover, var(${tr})); 2488 } 2489 2490 &:is( 2491 :active, 2492 [is-active], 2493 [data-simulate=active] 2494 ) { 2495 ${A}â¢color: var(${R}â¢active, var(${R})); 2496 ${A}â¢background: var(${w}â¢active, var(${w})); 2497 ${ea}â¢color: var(${tr}â¢active, var(${tr})); 2498 } 2499 } 2500 2501 &[is-processing] { 2502 ${A}â¢contentâ¢visibility: hidden; 2503 ${A}â¢contentâ¢opacity: 0; 2504 2505 /* spinner svg position controls */ 2506 ${ur}â¢position: absolute; 2507 ${ur}â¢inset: 50% auto auto 50%; 2508 ${ur}â¢translate: -50% -50%; 2509 } 2510 2511 &[is-processing-with-text] { 2512 ${A}â¢contentâ¢visibility: visible; 2513 2514 /* spinner svg position controls */ 2515 ${ur}â¢position: relative; 2516 ${ur}â¢inset: 0; 2517 ${ur}â¢translate: 0; 2518 ${ur}â¢size: 1lh; 2519 } 2520 2521 &:is( 2522 [is-processing], 2523 [is-processing-with-text] 2524 ) { 2525 ${A}â¢opacity: var(--arc-button-processing-opacity, unset); 2526 ${A}â¢cursor: var(--arc-button-processing-cursor, default); 2527 2528 ${A}â¢color: var(${R}â¢processing, var(${R})); 2529 ${A}â¢background: var(${w}â¢processing, var(${w})); 2530 ${ea}â¢color: var(${tr}â¢processing, var(${tr})); 2531 2532 &:is( 2533 [data-variant*=secondary], 2534 [data-variant*=tertiary], 2535 [data-hierarchy=plain], 2536 [data-hierarchy=link-style], 2537 [arc-scheme=inverse]:not([data-variant*=primary]) 2538 ):not( 2539 [data-variant^=alpha-] 2540 ) { 2541 ${ur}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2542 } 2543 } 2544 2545 &:is( 2546 :where(:focus, :focus-within):focus-visible, 2547 [data-simulate=focus] 2548 ) { 2549 ${A}â¢color: var(${R}â¢focus, var(${R})); 2550 ${A}â¢background: var(${w}â¢focus, var(${w})); 2551 ${ea}â¢color: var(${tr}â¢focus, var(${tr})); 2552 ${to}â¢color: var(--arc-button-outline-color, var(--arc-color-border-focus)); 2553 2554 * { 2555 outline: none; 2556 } 2557 } 2558 2559`,Zh=s` 2560@layer arc-components { 2561 2562 /* Shared defaults from _Internal/Components.css.js */ 2563 ${Bh} 2564 2565 :where([arc-button]) { 2566 /* SIZES -------------------------------------------------------⢠*/ 2567 ${Nh} 2568 2569 /* LAYOUTS -----------------------------------------------------⢠*/ 2570 ${Hh} 2571 2572 /* VARIANTS ----------------------------------------------------⢠*/ 2573 ${Vh} 2574 ${Kh} 2575 ${Uh} 2576 ${Wh} 2577 ${Gh} 2578 2579 /* CORE VARIABLES ----------------------------------------------⢠*/ 2580 ${Yh} 2581 ${qh} 2582 2583 /* CORE STYLES -------------------------------------------------⢠*/ 2584 appearance: none; 2585 cursor: var(--arc-button-cursor, var(${A}â¢cursor)); 2586 position: var(--arc-button-position, var(${A}â¢position, unset)); 2587 transition: var(--arc-button-transition, var(${A}â¢transition)); 2588 2589 /* FOOTPRINT */ 2590 2591 font: inherit; 2592 font-weight: var(--arc-button-font-weight, var(${A}â¢fontâ¢weight)); 2593 font-size: var(--arc-button-font-size, var(${A}â¢fontâ¢size, inherit)); 2594 padding: var(--arc-button-padding, var(${A}â¢padding)); 2595 2596 width: var(--arc-button-width, var(${A}â¢width, auto)); 2597 min-width: var(--arc-button-min-width, var(${A}â¢minâ¢width, unset)); 2598 max-width: var(--arc-button-max-width, var(${A}â¢maxâ¢width, 100%)); 2599 2600 height: var(--arc-button-height, var(${A}â¢height, auto)); 2601 min-height: var(--arc-button-min-height, var(${A}â¢minâ¢height, unset)); 2602 max-height: var(--arc-button-max-height, var(${A}â¢maxâ¢height, unset)); 2603 2604 aspect-ratio: var(--arc-button-aspect-ratio, var(${A}â¢aspectâ¢ratio, unset)); 2605 2606 /* VARIANT THEME APPLIED ---------------------------------------⢠*/ 2607 2608 color: var(--arc-button-color, var(${A}â¢color)); 2609 background: var(--arc-button-background, var(${A}â¢background)); 2610 border: var(--arc-button-border, var(${ea})); 2611 border-radius: var(--arc-button-border-radius, var(${ea}â¢radius)); 2612 2613 opacity: var(--arc-button-opacity, 1); 2614 2615 outline: var(--arc-button-outline, var(${to})); 2616 outline-offset: var(--arc-button-outline-offset, var(${to}â¢offset)); 2617 2618 &[href] { 2619 text-decoration: var(--arc-button-text-decoration, none); 2620 } 2621 2622 /* shadow concession for buttons not already using 'arc-shadow' util */ 2623 &:not([arc-shadow]) {
2624 box-shadow: var(--arc-button-box-shadow, unset); 2625 } 2626 2627 /* "floating" button mitigation */ 2628 &[arc-shadow] { 2629 backdrop-filter: blur(0.5em); 2630 } 2631 2632 /* INNER-ELEMENTS ----------------------------------------------⢠*/ 2633 [arc-button-content] { 2634 flex: 1; 2635 display: flex; 2636 align-items: var(--arc-button-align-items, center); 2637 justify-content: var(--arc-button-justify-content, center); 2638 gap: var(--arc-button-gap, var(${A}â¢gap)); 2639 2640 opacity: var(--arc-button-content-opacity, var(${A}â¢contentâ¢opacity)); 2641 visibility: var(--arc-button-content-visibility, var(${A}â¢contentâ¢visibility, inherit)); 2642 pointer-events: var(--arc-button-content-pointer-events, none); 2643 2644 width: var(--arc-button-content-width, var(${A}â¢contentâ¢width, auto)); 2645 max-width: var(--arc-button-content-max-width, 100%); 2646 overflow: var(--arc-button-content-overflow, visible); 2647 2648 transition: var(--arc-button-content-transition, var(${A}â¢transition)); 2649 2650 line-height: normal; 2651 user-select: none; 2652 } 2653 2654 [arc-button-label] { 2655 overflow: hidden; 2656 text-overflow: ellipsis; 2657 white-space: nowrap; 2658 max-width: 100%; 2659 opacity: var(--arc-button-label-opacity, var(${A}â¢opacity)); 2660 transition: var(--arc-button-label-transition, var(${A}â¢transition)); 2661 } 2662 2663 [arc-button-icon] { 2664 width: 1.25em; /** keeping for fontawesome v6 backward compatibility */ 2665 opacity: var(--arc-button-icon-opacity, var(${A}â¢opacity)); 2666 transition: var(--arc-button-icon-transition, var(${A}â¢transition)); 2667 } 2668 2669 input { 2670 position: absolute; 2671 opacity: 0; 2672 scale: 0.1; 2673 } 2674 } 2675 2676 [arc-button]:not([hidden]) { 2677 flex: var(--arc-button-flex, unset); 2678 display: var(--arc-button-display, var(${A}â¢display, inline-flex)); 2679 align-items: center; 2680 justify-content: center; 2681 } 2682 2683} 2684`,Vs=(0,n.jsx)(Cc,{}),kr=(0,h.forwardRef)(({children:r,disabled:a,...e},o)=>{const t=(0,h.useRef)(null),{iconEnd:i,iconStart:c,icon:l,text:d,isActive:u,isDisabled:g,isProcessing:p,isProcessingWithText:v,hasLargeIcon:m,tag:b,href:$,type:k,title:_,layout:y,shape:z,size:x="lg",variant:S="common",hierarchy:D="primary",isInverse:B=!1,scheme:F="auto",shadow:T,_isCustom:C,...W}=e,H=b??($?"a":"button"),ar=H==="button"?k||"button":void 0,K=y==="icon",or=v||p||g||a,nr=W?.["aria-disabled"]||or||void 0,gr=!K&&(r||d),M=v&&Vs||c||l,O=!K&&(v&&!(c||l)?void 0:i),N=(p||v&&K)&&Vs,L=S&&Hs.includes(S),Z=(()=>
2684{if(L)return S;const he=D||"primary";if(S==="ai"){const Kf=["primary","secondary"].includes(he)?he:"primary";return`${S}-${Kf}`}return he==="link-style"?S==="critical"||S==="alpha"?`${S}-${he}`:"link-style":S==="common"?he:S==="alpha"||S==="critical"?`${S}-${he}`:S})(),X=F==="auto"?void 0:F,dr=Z?.endsWith("-inverse")?"inverse":void 0,j=B?"inverse":X??dr,er=T===!0?"lg":T,{tooltip:pr,...xr}=W,Jr=Ot(pr)?pr:void 0,xa=e.tooltip??Jr,V=!!xa,Lr=Ot(xa)?{text:xa}:xa,hr=W["aria-describedby"],Mr=(0,h.useRef)(void 0),Ta=Ir(void 0,"arc-tooltip"),Ce=e.id?`${e.id}-tooltip`:Ta;V&&!Mr.current&&(Mr.current=Ce);const ue=V?Mo([hr,Mr.current]):hr,{anchorName:Vn,style:ko,popoverTarget:Ge,popoverTargetAction:Ja,...Q}=xr,Sr=Ge?Do(String(Vn||e?.id)):void 0,Qr=V?Do(String(Ce)):void 0,ra=Es(ko)?ko:void 0,Qa=ra&&"anchorName"in ra&&ra.anchorName,Ae=[...(Ot(Qa)?_s(Qa,", "):[]).map(Do),...Sr?[Sr]:[],...Qr?[Qr]:[]],Un=Mo(Ae,1/0,", "),Ni={...ra??{},...Un?{anchorName:Un}:{}};let Xd={popoverTarget:Ge||void 0,popoverTargetAction:Ja||void 0};return h.version.startsWith("18")&&(Xd={popovertarget:Ge||void 0,popovertargetaction:Ja||void 0}),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(H,{...Q,...Xd,ref:he=>{t.current=he,La(o,he)},"arc-button":C?"custom":"","arc-scheme":j,"arc-shadow":er||void 0,disabled:!$&&or||void 0,href:$||void 0,title:V?void 0:_||void 0,type:ar,"data-layout":y,"data-shape":C?void 0:z,"data-size":C?void 0:x,"data-variant":C?void 0:Z,"data-hierarchy":D||void 0,"has-large-icon":m?"":void 0,"is-active":u?"":void 0,"is-processing":p||v&&K?"":void 0,"is-processing-with-text":v&&!K?"":void 0,"is-disabled":or||nr?"":void 0,"aria-disabled":nr,"aria-describedby":ue||void 0,style:Ni,children:[(0,n.jsxs)("span",{"arc-button-content":"",children:[M&&typeof M=="string"?(0,n.jsx)(cr,{"arc-button-icon":"",icon:M}):M&&(0,n.jsx)("span",{"arc-button-icon":"",children:M}),!!gr&&(0,n.jsx)("span",{"arc-button-label":"",children:gr}),O&&typeof O=="string"?(0,n.jsx)(cr,{"arc-button-icon":"",icon:O}):O&&(0,n.jsx)("span",{"arc-button-icon":"",children:O})]}),N]}),V&&(0,n.jsx)(Jt,{...Lr,id:Mr.current,alternateAnchor:Lr?.alternateAnchor??(()=>t.current),anchorName:Qr})]})});kr.displayName="ArcButton",ir("ArcButton",Zh);const Wo=(0,h.forwardRef)((r,a)=>(0,n.jsx)(kr,{...r,ref:a,"arc-popover-button":""})),Us=({isInverse:r=!1,isOpen:a,...e})=>(0,n.jsx)(kr,{icon:"fa-regular fa-xmark",text:"Dismiss",...e,layout:"icon",shape:"square",size:"sm",variant:"common",hierarchy:"tertiary",isInverse:r,"arc-popover-dismiss":""}),Xh=({isInverse:r=!1,...a})=>(0,n.jsx)(kr,{icon:"fa-regular fa-arrow-left",text:"Go Back",...a,layout:"icon",shape:"square",size:"sm",variant:"common",hierarchy:"tertiary",isInverse:r,"arc-popover-go-back":""}),Jh=({children:r,isSticky:a,showDivider:e,showDismiss:o,dismissProps:t,showGoBack:i,goBackProps:c,headerSlotEnd:l,tag:d="header",...u})=>(0,n.jsx)(d,{...u,"arc-popover-header":"","has-divider":e?"":void 0,"is-sticky":a?"":void 0,children:(0,n.jsxs)("div",{"arc-popover-display":"",children:[(0,n.jsxs)("div",{"arc-popover-header-slot":"start",children:[i&&(0,n.jsx)(Xh,{...c}),r]}),(0,n.jsxs)("div",{"arc-popover-header-slot":"end",children:[l,o&&(0,n.jsx)(Us,{...t})]})]})}),Qh=({children:r,tag:a="article",...e})=>(0,n.jsx)(a,{...e,"arc-popover-body":"",children:(0,n.jsx)("div",{"arc-popover-display":"",children:r})}),r0=({children:r,isSticky:a,showDivider:e,tag:o="footer",...t})=>(0,n.jsx)(o,{...t,"arc-popover-footer":"","has-divider":e?"":void 0,"is-sticky":a?"":void 0,children:(0,n.jsx)("div",{"arc-popover-display":"",children:r})});Wo.displayName="ArcPopoverButton";const P=s`--arc-popover`,Ur=s`--arcâ¢popover`,rr=s`--arcâ¢trailâ¢mix`,jc=s`${Ur}â¢radius`,a0=s`${Ur}â¢content`,Qt=s`${Ur}â¢outline`,oa=s`${Ur}â¢offset`,Va=s`${Ur}â¢header`,e0=s`${Ur}â¢body`,Lc=s`${Ur}â¢divider`,rn=s`${Ur}â¢footer`,Da=s`${Ur}â¢tail`,fr=s`${Da}â¢top`,mr=s`${Da}â¢left`,Ko=s`${Da}â¢size`,fa=s`${Da}â¢x`,ma=s`${Da}â¢y`,Rc=s`${Ur}â¢fontâ¢size`,an=s`${Ur}â¢padding`,ta=s`${Ur}â¢margin`,no=s`${Va}â¢padding`,ka=s`${e0}â¢padding`,Ua=s`${rn}â¢padding`,Ws=s`${Ur}â¢fg`,en=s`${Ur}â¢bg`,on=s`${a0}â¢bg`,tn=s`${Da}â¢fillâ¢a`,nn=s`${Da}â¢fillâ¢b`,cn=s`${Da}â¢edgeâ¢a`,sn=s`${Da}â¢edgeâ¢b`,o0=s` 2685 2686 ${Ur}â¢fallback: none; 2687 ${Qt}: var(${P}-outline-size, var(--arc-border-width-md)); 2688 ${jc}: var(${P}-border-radius, var(--arc-border-radius-lg)); 2689 ${oa}: var(${P}-offset, var(--jsâ¢offset, 0px)); 2690 2691 /* space & padding */ 2692 ${an}: 0.875em; 2693 2694 /* tail metrics - starts at defaults for anchor-at='bottom-start' */ 2695 ${rr}: 47.5%; /* mix-ratio for tail to match gradient outline for: 'popover[variant=ai]' */ 2696 ${fa}: var(${P}-tail-x, 1.75em); 2697 ${ma}: var(${P}-tail-y, 1.125em); 2698 ${Ko}
2698: 0px; 2699 2700 &:where([has-tail]) { 2701 ${Ko}: var(${P}-tail-size, var(--jsâ¢tail, 8px)); 2702 2703 /* offset calculation magic number - 'sqrt(2) / 2' for half of 45° rotated tailSize */ 2704 ${oa}: calc(var(${P}-offset, var(--jsâ¢offset, 0px)) + var(${Ko}) * (sqrt(2) / 2)); 2705 } 2706 2707 &:has([arc-popover-body]) { 2708 ${an}: 0; 2709 &:has([arc-popover-header]:not([has-divider])) { ${ka}â¢blockâ¢start: 0; } 2710 &:has([arc-popover-footer]:not([has-divider])) { ${ka}â¢blockâ¢end: 0; } 2711 } 2712 2713`,t0=s` 2714 2715 /* default variant: common */ 2716 &[variant] { 2717 ${Ws}: var(--arc-color-fg-primary); 2718 ${en}: var(${P}-background, var(--arc-color-bg-mono)) border-box; 2719 ${on}: var(${P}-background, var(--arc-color-bg-mono)) padding-box; 2720 ${tn}: var(${P}-background, var(--arc-color-bg-mono)); 2721 ${nn}: var(${P}-background, var(--arc-color-bg-mono)); 2722 ${cn}: var(${P}-background, var(--arc-color-bg-mono)); 2723 ${sn}: var(${P}-background, var(--arc-color-bg-mono)); 2724 ${Ur}â¢shadow: var(--arc-shadow-lg); 2725 ${Lc}: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 2726 } 2727 2728 &[variant=brand] { 2729 ${en}: var(--arc-color-border-brand-mid) border-box; 2730 ${on}: var(--arc-color-bg-brand-muted) padding-box; 2731 ${tn}: var(--arc-color-bg-brand-muted); 2732 ${nn}: var(--arc-color-bg-brand-muted); 2733 ${cn}: var(--arc-color-border-brand-mid); 2734 ${sn}: var(--arc-color-border-brand-mid); 2735 } 2736 2737 &[variant=ai] { 2738 ${en}: var(--arc-gradient-ai-200) border-box; 2739 ${on}: var(--arc-gradient-ai-50) padding-box; 2740 ${tn}: var(${P}-ai-purple-50); 2741 ${nn}: var(${P}-ai-blue-50); 2742 ${cn}: var(${P}-ai-purple-200); 2743 ${sn}: var(${P}-ai-blue-200); 2744 } 2745 2746`,n0=s` 2747 2748 /* default density: compact */ 2749 &:not([density=comfortable]) { 2750 ${Rc}: 0.75em; 2751 ${Va}â¢gap: 0.75em; 2752 ${no}â¢block: 0.75em; 2753 ${no}â¢inline: 0.75em; 2754 2755 ${ka}â¢block: 0.75em; 2756 ${ka}â¢inline: 0.75em; 2757 2758 ${rn}â¢gap: 0.75em; 2759 ${Ua}â¢inline: 0.75em; 2760 ${Ua}â¢blockâ¢start: 0.75em; 2761 ${Ua}â¢blockâ¢end: 0.75em; 2762 } 2763 2764 &[density=comfortable] { 2765 ${Rc}: 0.875em; 2766 ${Va}â¢gap: 1.125em; 2767 ${no}â¢block: 1em; 2768 ${no}â¢inline: 1.25em; 2769 2770 ${ka}â¢block: 1.25em; 2771 ${ka}â¢inline: 1.25em; 2772 2773 ${rn}â¢gap: 1.125em; 2774 ${Ua}â¢inline: 1.25em; 2775 ${Ua}â¢blockâ¢start: 1em; 2776 ${Ua}â¢blockâ¢end: 1.25em; 2777 2778 &:not(:has([arc-popover-body])) { 2779 ${an}: 1.25em; 2780 } 2781 } 2782 2783`,Go={TOP:s` 2784 &[anchor-at*='top-'] { 2785 ${ta}: 0 0 var(${oa}) 0; 2786 ${fr}: 100%; 2787 } 2788 &[anchor-at='top-start'] { 2789 position-area: block-start span-inline-end; 2790 ${rr}: 95%; 2791 ${mr}: calc(0% + var(${fa})); 2792 } 2793 &[anchor-at='top-center'] { 2794 position-area: block-start; 2795 ${rr}: 75%; 2796 ${mr}: 50%; 2797 } 2798 &[anchor-at='top-end'] { 2799 position-area: block-start span-inline-start; 2800 ${rr}: 53.5%; 2801 ${mr}: calc(100% - var(${fa})); 2802 } 2803 `,RIGHT:s` 2804 &[anchor-at*='right-'] { 2805 ${ta}: 0 0 0 var(${oa}); 2806 ${mr}: 0%; 2807 } 2808 &[anchor-at='right-start'] { 2809 position-area: inline-end span-block-end; 2810 ${rr}: 53.5%; 2811 ${fr}: calc(0% + var(${ma})); 2812 } 2813 &[anchor-at='right-center'] { 2814 position-area: inline-end; 2815 ${rr}: 75%; 2816 ${fr}: 50%; 2817 } 2818 &[anchor-at='right-end'] { 2819 position-area: inline-end span-block-start; 2820 ${rr}: 95%; 2821 ${fr}: calc(100% - var(${ma})); 2822 } 2823 `,BOTTOM:s` 2824 &[anchor-at*='bottom-'] { 2825 ${ta}: var(${oa}) 0 0 0; 2826 ${fr}: 0%; 2827 } 2828 &[anchor-at='bottom-end'] { 2829 position-area: block-end span-inline-start; 2830 ${rr}: 5%; 2831 ${mr}: calc(100% - var(${fa})); 2832 } 2833 &[anchor-at='bottom-center'] { 2834 position-area: block-end; 2835 ${rr}: 25%; 2836 ${mr}: 50%; 2837 } 2838 &[anchor-at='bottom-start'] { 2839 position-area: block-end span-inline-end; 2840 ${rr}: 47.5%; 2841 ${mr}: calc(0% + var(${fa})); 2842 } 2843 `,LEFT:s` 2844 &[anchor-at*='left-'] { 2845 ${ta}: 0 var(${oa}) 0 0; 2846 ${mr}: 100%; 2847 } 2848 &[anchor-at='left-end'] { 2849 position-area: inline-start span-block-start; 2850 ${rr}: 47.5%; 2851 ${fr}: calc(100% - var(${ma})); 2852 } 2853 &[anchor-at='left-center'] { 2854 position-area: inline-start; 2855 ${rr}: 25%; 2856 ${fr}: 50%; 2857 } 2858 &[anchor-at='left-start'] { 2859 position-area: inline-start span-block-end; 2860 ${rr}: 5%; 2861 ${fr}: calc(0% + var(${ma})); 2862 } 2863 `,CENTER_AND_CORNERS:s` 2864 &:is([anchor-at='center'], [anchor-at*='corner']) { ${Da}â¢display: none; } 2865 &[anchor-at='center'] { position-area: center center; ${ta}: 0; } 2866 &[anchor-at*='corner'] { ${ta}: var(${oa}); } 2867 &[anchor-at='nw-corner'] { position-area: top left; } 2868 &[anchor-at='ne-corner'] { position-area: top right; } 2869 &[anchor-at='se-corner'] { position-area: bottom right; } 2870 &[anchor-at='sw-corner'] { position-area: bottom left; } 2871 `},co={FLIP_BLOCK:s` 2872 &[anchor-at*='top-'] { ${ta}: 0 0 var(${oa}) 0; } 2873 &[anchor-at='top-start']::before { ${rr}: 47.5%; ${fr}: 0%; } 2874 &[anchor-at='top-center']::before { ${rr}: 25%; ${fr}: 0%; } 2875 &[anchor-at='top-end']::before { ${rr}: 5%; ${fr}: 0%; } 2876 2877 &[anchor-at='right-start']::before { ${rr}: 95%; ${fr}: calc(100% - var(${ma})); } 2878 &[anchor-at='right-end']::before { ${rr}: 53.5%; ${fr}: calc(0% + var(${ma})); } 2879 2880 &[anchor-at*='bottom-'] { ${ta}: var(${oa}) 0 0 0; } 2881 &[anchor-at='bottom-end']::before { ${rr}: 53.5%; ${fr}: 100%; } 2882 &[anchor-at='bottom-center']::before { ${rr}: 75%; ${fr}: 100%; } 2883 &[anchor-at='bottom-start']::before { ${rr}: 95%; ${fr}: 100%; } 2884 2885 &[anchor-at='left-end']::before { ${rr}: 5%; ${fr}: calc(0% + var(${ma})); } 2886 &[anchor-at='left-start']::before { ${rr}: 47.5%; ${fr}: calc(100% - var(${ma})); } 2887 `,FLIP_INLINE:s` 2888 &[anchor-at='top-start']::before { ${rr}: 53.5%; ${mr}: calc(100% - var(${fa})); } 2889 &[anchor-at='top-end']::before { ${rr}: 95%; ${mr}: calc(0% + var(${fa})); } 2890 2891 &[anchor-at*='right-'] { ${ta}: 0 var(${oa}) 0 0; } 2892 &[anchor-at='right-start']::before { ${rr}: 5%; ${mr}: 100%; } 2893 &[anchor-at='right-center']::before { ${rr}: 25%; ${mr}: 100%; } 2894 &[anchor-at='right-end']::before { ${rr}: 47.5%; ${mr}: 100%; } 2895 2896 &[anchor-at='bottom-end']::before { ${rr}: 47.5%; ${mr}: calc(0% + var(${fa})); } 2897 &[anchor-at='bottom-start']::before { ${rr}: 5%; ${mr}: calc(100% - var(${fa})); } 2898 2899 &[anchor-at*='left-'] { ${ta}: 0 0 0 var(${oa}); } 2900 &[anchor-at='left-end']::before { ${rr}: 95%; ${mr}: 0%; } 2901 &[anchor-at='left-center']::before { ${rr}: 75%; ${mr}: 0%; } 2902 &[anchor-at='left-start']::before { ${rr}: 53.5%; ${mr}: 0%; } 2903 `,FLIP_BLOCK_INLINE:s` 2904 &[anchor-at*='top-'] { ${ta}: 0 0 var(${oa}) 0; } 2905 &[anchor-at='top-start']::before { ${rr}: 5%; ${fr}: 0%; ${mr}: calc(100% - var(${fa})); } 2906 &[anchor-at='top-end']::before { ${rr}: 47.5%; ${fr}: 0%; ${mr}: calc(0% + var(${fa})); } 2907 2908 &[anchor-at*='right-'] { ${ta}: 0 var(${oa}) 0 0; } 2909 &[anchor-at='right-start']::before { ${rr}: 47.5%; ${fr}: calc(100% - var(${ma})); ${mr}: 100%; } 2910 &[anchor-at='right-end']::before { ${rr}: 5%; ${fr}: calc(0% + var(${ma})); ${mr}: 100%; } 2911 2912 &[anchor-at*='bottom-'] { ${ta}: var(${oa}) 0 0 0; } 2913 &[anchor-at='bottom-end']::before { ${rr}: 95%; ${fr}: 100%; ${mr}: calc(0% + var(${fa})); } 2914 &[anchor-at='bottom-start']::before { ${rr}: 53.5%; ${fr}: 100%; ${mr}: calc(100% - var(${fa})); } 2915 2916 &[anchor-at*='left-'] { ${ta}: 0 0 0 var(${oa}); } 2917 &[anchor-at='left-end']::before { ${rr}: 53.5%; ${fr}: calc(0% + var(${ma})); ${mr}: 0%; } 2918 &[anchor-at='left-start']::before { ${rr}: 95%; ${fr}: calc(100% - var(${ma})); ${mr}: 0%; } 2919 `},c0=s` 2920 [arc-popover] { 2921 position: fixed; 2922 inset: auto; 2923 padding: 0; 2924 margin: var(${ta}); 2925 2926 container-type: anchored; 2927 position-anchor: var(${P}-anchor-name, var(--jsâ¢anchor)); 2928 2929 ${Go.TOP} 2930 ${Go.RIGHT} 2931 ${Go.BOTTOM} 2932 ${Go.LEFT} 2933 ${Go.CENTER_AND_CORNERS} 2934 2935 &[try-fallbacks] { 2936 position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; 2937 } 2938 } 2939 2940 @supports (container-type: anchored) { 2941 @container anchored(fallback: flip-block) { 2942 [arc-popover][try-fallbacks][has-tail] { 2943 ${co.FLIP_BLOCK} 2944 } 2945 } 2946 2947 @container anchored(fallback: flip-inline) { 2948 [arc-popover][try-fallbacks][has-tail] { 2949 ${co.FLIP_INLINE} 2950 } 2951 } 2952 2953 @container anchored(fallback: flip-block flip-inline) { 2954 [arc-popover][try-fallbacks][has-tail] { 2955 ${co.FLIP_BLOCK_INLINE} 2956 } 2957 } 2958 } 2959 2960 /* @note â tail fallback mitigation */ 2961 @supports not (container-type: anchored) { 2962 /* @note â inline center anchor placement mitigation for Firefox */ 2963 [arc-popover] { 2964 &[anchor-at='right-center'] { 2965 position-area: inline-end center; 2966 } 2967 &[anchor-at='left-center'] { 2968 position-area: inline-start center; 2969 } 2970 } 2971 2972 [arc-popover][try-fallbacks][has-tail] { 2973 &[data-fallbacks='flip-block'] { 2974 ${co.FLIP_BLOCK} 2975 } 2976 &[data-fallbacks='flip-inline'] { 2977 ${co.FLIP_INLINE} 2978 } 2979 &[data-fallbacks='flip-block-inline'] { 2980 ${co.FLIP_BLOCK_INLINE} 2981 } 2982 } 2983 } 2984`,io={BACKDROP:s` 2985 [arc-popover]::backdrop { 2986 background: var(${P}-backdrop, transparent); 2987 } 2988 `,CONTENT:s` 2989 [arc-popover-content] { 2990 flex: var(${P}-flex, 1); 2991 position: relative; 2992 display: var(${P}-content-display, flex); 2993 flex-direction: var(${P}-content-flex-direction, column); 2994 gap: var(${P}-content-gap, 0); 2995 2996 overflow: var(${P}-overflow, auto); 2997 overscroll-behavior: var(${P}-overscroll-behavior, contain); 2998 2999 color: var(${P}-color, var(${Ws})); 3000 padding: var(${P}-padding, var(${an})); 3001 margin: var(${P}-margin, unset); 3002 background: var(${P}-content-background, var(${on})); 3003 border-radius: calc(var(${jc}) - var(${Qt})); 3004 border: var(${P}-border, none); 3005 3006 height: var(${P}-height, auto); 3007 min-height: var(${P}-min-height, auto); 3008 max-height: var(${P}-max-height, 65vh); 3009 resize: var(${P}-resize, none); 3010 } 3011 `,HEADER:s` 3012 [arc-popover-header] { 3013 flex: var(${P}-header-flex, none); 3014 display: var(${P}-header-display, flex); 3015 justify-content: var(${P}-header-justify-content, space-between); 3016 align-items: var(${P}-header-align-items, baseline); 3017 gap: var(${P}-header-gap, var(${Va}â¢gap)); 3018 3019 padding: var(${P}-header-padding, 3020 var(${no}â¢block) 3021 var(${no}â¢inline) 3022 ); 3023 3024 color: var(${P}-header-color, inherit); 3025 background: var(${P}-header-background, none); 3026 3027 &[is-sticky] { 3028 position: sticky; 3029 z-index: var(${P}-header-z-index, 2); 3030 top: var(${P}-header-top, 0); 3031 } 3032
3033 &:has([arc-popover-go-back]) { 3034 padding-inline-start: 0.875em; 3035 } 3036 3037 &:has([arc-popover-dismiss]) { 3038 padding-inline-end: 0.875em; 3039 } 3040 3041 &:where([has-divider]) { 3042 border-bottom: var(${P}-header-border-bottom, var(${Lc})); 3043 } 3044 3045 :where([arc-button]) { 3046 margin: var(${P}-header-button-margin, -0.5em); 3047 } 3048 } 3049 3050 [arc-popover-header-slot='start'] { 3051 ${Va}â¢slotâ¢flex: 1; 3052 ${Va}â¢slotâ¢gap: 1em; 3053 } 3054 3055 [arc-popover-header-slot='end'] { 3056 ${Va}â¢slotâ¢flex: none; 3057 ${Va}â¢slotâ¢gap: 1.5em; 3058 } 3059 3060 [arc-popover-header-slot] { 3061 min-width: 0%; 3062 flex: var(${Va}â¢slotâ¢flex); 3063 display: var(${P}-header-display, flex); 3064 justify-content: var(${P}-header-justify-content, unset); 3065 align-items: var(${P}-header-align-items, baseline); 3066 gap: var(${P}-header-slot-gap, var(${Va}â¢slotâ¢gap)); 3067 } 3068 3069 /* Header-less Popover: DismissButton typical starting spot */ 3070 [arc-popover]:not([arc-popover-header]) > [arc-popover-dismiss] { 3071 --arc-button-position: absolute; 3072 inset: var(${P}-dismiss-inset, 0.5em 0.5em auto auto); 3073 margin: var(${P}-dismiss-margin, 0); 3074 } 3075 `,BODY:s` 3076 [arc-popover-body] { 3077 flex: var(${P}-body-flex, 1); 3078 display: var(${P}-body-display, block); 3079 flex-direction: var(${P}-body-flex-direction, unset); 3080 3081 padding: var(${P}-body-padding, 3082 var(${ka}â¢blockâ¢start, var(${ka}â¢block)) 3083 var(${ka}â¢inline) 3084 var(${ka}â¢blockâ¢end, var(${ka}â¢block)) 3085 var(${ka}â¢inline) 3086 ); 3087 } 3088 `,FOOTER:s` 3089 [arc-popover-footer] { 3090 flex: var(${P}-footer-flex, none); 3091 display: var(${P}-footer-display, flex); 3092 flex-direction: var(${P}-footer-flex-direction, row-reverse); 3093 justify-content: var(${P}-footer-justify-content, space-between); 3094 align-items: var(${P}-footer-align-items, center); 3095 gap: var(${P}-footer-gap, var(${rn}â¢gap)); 3096 3097 padding: var(${P}-footer-padding, 3098 var(${Ua}â¢blockâ¢start) 3099 var(${Ua}â¢inline) 3100 var(${Ua}â¢blockâ¢end) 3101 var(${Ua}â¢inline) 3102 ); 3103 3104 background: var(${P}-footer-background, none); 3105 color: var(${P}-footer-color, inherit); 3106 3107 &[is-sticky] { 3108 position: sticky; 3109 z-index: var(${P}-footer-z-index, 2); 3110 bottom: var(${P}-footer-bottom, 0); 3111 } 3112 3113 &:where([has-divider]) { 3114 border-top: var(${P}-footer-border-top, var(${Lc})); 3115 } 3116 } 3117 `,TAIL:s` 3118 [arc-popover][has-tail]::before { 3119 content: ''; 3120 box-sizing: content-box; 3121 position: absolute; 3122 display: var(${Da}â¢display, block); 3123 3124 inset: auto; 3125 top: var(${fr}, auto); 3126 left: var(${mr}, auto); 3127 3128 translate: -50% -50%; 3129 rotate: 45deg; 3130 3131 width: var(${Ko}); 3132 height: var(${Ko}); 3133 border-radius: 0.125em; 3134 3135 background: color-mix(in srgb, 3136 var(${tn}) var(${rr}), 3137 var(${nn}) clamp(0%, 100% - var(${rr}), 100%) 3138 ); 3139 3140 border: var(${Qt}) solid color-mix(in srgb, 3141 var(${cn}) var(${rr}), 3142 var(${sn}) clamp(0%, 100% - var(${rr}), 100%) 3143 ); 3144 } 3145 `},i0=s` 3146 [arc-popover] { 3147 will-change: opacity; 3148 overflow: visible; /* For the tail â content overflow is set on '[arc-popover-content]' */ 3149 3150 /* @note â this line-height magic number fixes asymmetrical outline/border issues with certain placements 3151 on low DPI displays. It's based on the default (--arc-line-height-standard) of 1.4 */ 3152 line-height: var(${P}-line-height, 1.395); 3153 3154 /* @note â this font-size is intended NOT to be altered; it is locked in as a reset (browser baseline) 3155 for various popover calculations. The effective popover font size is set on '[arc-popover-display]'. */ 3156 font-size: initial; 3157 3158 background: var(${P}-background, var(${en})); 3159 border: var(${Qt}) solid transparent; 3160 border-radius: var(${jc}); 3161 box-shadow: var(${P}-shadow, var(${Ur}â¢shadow)); 3162 width: var(${P}-width, auto); 3163 height: var(${P}-height, auto); 3164 min-width: var(${P}-min-width, auto); 3165 min-height: var(${P}-min-height, auto); 3166 max-width: var(${P}-max-width, 100vw); 3167 max-height: var(${P}-max-height, 65vh); 3168 } 3169 3170 /* @note â font-size control for header|footer|body padding c
3170alculations */ 3171 [arc-popover-display] { 3172 display: contents; 3173 font-size: var(${P}-font-size, var(${Rc})); 3174 } 3175 3176 ${io.CONTENT} 3177 ${io.HEADER} 3178 ${io.BODY} 3179 ${io.FOOTER} 3180 ${io.TAIL} 3181 ${io.BACKDROP} 3182`,Yo={SETUP:o0,ANCHORS:c0,VARIANTS:t0,DENSITIES:n0,ELEMENT:i0},s0=s` 3183@layer arc-components { 3184 3185 /* Shared defaults from _Internal/Components.css.js */ 3186 ${Oh} 3187 3188 [arc-popover] { 3189 ${Yo.SETUP} 3190 ${Yo.VARIANTS} 3191 ${Yo.DENSITIES} 3192 } 3193 3194 ${Yo.ANCHORS} 3195 ${Yo.ELEMENT} 3196 3197 /* POPOVER transition --------------------------------------------⢠*/ 3198 3199 [arc-popover] { 3200 transition-timing-function: ease-out; 3201 transition-duration: var(--arc-popover-transition-duration, 240ms); 3202 transition-property: display allow-discrete, opacity; 3203 3204 @supports (overlay: auto) { 3205 transition-behavior: allow-discrete; 3206 transition-property: display, overlay, opacity; 3207 } 3208 3209 opacity: 0; 3210 &:popover-open { opacity: 1; } 3211 3212 &::backdrop { transition: inherit; opacity: 0; } 3213 &:popover-open::backdrop { opacity: 1; } 3214 } 3215 3216 @starting-style { 3217 [arc-popover]:popover-open { opacity: 0; } 3218 [arc-popover]:popover-open::backdrop { opacity: 0; } 3219 } 3220} 3221 3222`,Ks=(0,h.forwardRef)(({children:r,popover:a=da.popover,anchorAt:e=da.anchorAt,anchorName:o,anchorProps:t,alternateAnchorId:i,alternateAnchor:c,boundary:l=da.boundary,tryFallbacks:d=da.tryFallbacks,density:u=da.density,variant:g=da.variant,scheme:p=da.scheme,isInverse:v,hasTail:m,tailSize:b=da.tailSize,offset:$=da.offset,hidePopoverButton:k,headerSlot:_,showHeaderDivider:y,isHeaderSticky:z,showDismiss:x,dismissProps:S,showGoBack:D,goBackProps:B,headerSlotEnd:F,footerSlot:T,isFooterSticky:C,show
3222FooterDivider:W,tag:H="div",contentTag:ar="div",onToggle:K,...or},nr)=>{const gr=(0,h.useRef)(null),M=(0,h.useRef)(null),O=(0,h.useRef)(null),N=(0,h.useRef)(K);(0,h.useImperativeHandle)(nr,()=>M.current);const[L,Z]=(0,h.useState)(!1),X=(0,h.useMemo)(()=>p==="auto"?void 0:v?"inverse":p,[v,p]),J=(0,h.useCallback)(()=>{if(typeof document>"u")return gr.current??null;const hr=Ra(gr.current)??document;return i?hr.getElementById(i):typeof c=="string"?hr.getElementById(c):c instanceof HTMLElement?c:typeof c=="function"?c():c&&typeof c=="object"&&"current"in c?c.current:gr.current??null},[c,i]),dr=d||l==="flip",j=!!m&&!bs.includes(e),er=$s({canHaveTail:j,tailSize:b}),pr=(0,h.useMemo)(()=>{const hr=o||i||(typeof c=="string"?c:void 0)||t?.id||or.id||void 0;return kc(String(hr))},[o,t?.id,or.id,c,i]),xr=(0,h.useMemo)(()=>({popoverTarget:or.id,"aria-haspopup":!0,"aria-controls":or.id,"aria-expanded":L}),[or.id,L]),Jr=(0,h.useMemo)(()=>({isOpen:L,"aria-label":"Dismiss",...xr,...S}),[S,L,xr]),ga=(0,h.useMemo)(()=>({ref:gr,...xr,...t,tooltip:L?void 0:t?.tooltip,anchorName:pr||""}),[t,xr,pr,L]),xa=(0,h.useMemo)(()=>({"--js\u2022anchor":ga?.anchorName||"","--js\u2022offset":Number($)===0?"":`${$}px`,"--js\u2022tail":er.cssTailVar}),[ga?.anchorName,$,er.cssTailVar]);Mt(()=>{const hr=J();if(O.current=hr,!!hr)return xs(hr,ga.anchorName)},[J,ga.anchorName,L]),(0,h.useEffect)(()=>{N.current=K},[K]),(0,h.useEffect)(()=>{const hr=M.current;if(!hr)return;const Mr=Ta=>{const{newState:Ce}=Ta,ue=Ce==="open";Z(ue),ue&&(O.current=J()),N.current?.(Ta)};return hr.addEventListener("toggle",Mr),()=>hr.removeEventListener("toggle",Mr)},[J]),Qu({anchorEl:O.current,popoverEl:M.current,anchorAt:e,tryFallbacks:dr,offsetPx:Number($)||0,tailSizePx:er.floatingTailPx,hasTail:j,isOpen:L}),th({anchorEl:O.current,popoverEl:M.current,anchorAt:e,tryFallbacks:dr,hasTail:j,isOpen:L});const V=!!(_||D||F),Lr=!!T;return(0,n.jsxs)(n.Fragment,{children:[!((i||c)&&k)&&(0,n.jsx)(Wo,{...ga}),(0,n.jsxs)(H,{...or,ref:M,"arc-popover":"","arc-scheme":X,"anchor-at":e,"try-fallbacks":dr?"":void 0,popover:a,variant:g,density:u,"has-tail":j?"":void 0,role:or.role??"dialog",style:{...or.style,...xa},children:[(0,n.jsxs)(ar,{"arc-popover-content":"",children:[V&&(0,n.jsx)(Jh,{showDivider:y,showGoBack:D,goBackProps:B,headerSlotEnd:F,showDismiss:x,dismissProps:Jr,isSticky:z,children:_}),V||Lr?(0,n.jsx)(Qh,{children:r}):(0,n.jsx)(ar,{"arc-popover-display":"",children:r}),Lr&&(0,n.jsx)(r0,{showDivider:W,isSticky:C,children:T})]}),x&&!V&&(0,n.jsx)(Us,{...Jr})]})]})});Ks.displayName="ArcPopover";const Pc=Ks;Pc.handlePopover=ys,Pc.Button=Wo;const te=Pc;ir("ArcPopover",s0);const l0=s` 3223@layer arc-components { 3224 3225 [arc-avatar-overflow] { 3226 /* Inter-Component Communication ⢠ArcPopover ------------------⢠*/ 3227 --arc-popover-font-size: var(--arc-font-size-body-md); 3228 --arc-popover-translate: -100% 0.5em; 3229 --arc-popover-width: max-content; 3230 --arc-popover-max-width: 18em; 3231 --arc-popover-padding: 0; 3232 3233 /* For Neutral/Anonymous avatars -------------------------------⢠*/ 3234 [data-element=list] { 3235 margin: 0; 3236 padding: var(${f}â¢4) var(${f}â¢0); 3237 } 3238 3239 [data-element=list-item] { 3240 display: flex; 3241 align-items: center; 3242 gap: var(${f}â¢6); 3243 padding: var(${f}â¢4) var(${f}â¢8); 3244 } 3245 3246 ${tc} 3247 ${ss} 3248 } 3249 3250} 3251`,d0=r=>(0,n.jsx)("ul",{...r,"data-element":"list"}),u0=r=>(0,n.jsx)("li",{...r,"data-element":"list-item"}),h0=({count:r,anchorId:a,overflowId:e,shouldShowOverflow:o,...t})=>(0,n.jsx)(vc,{title:`+${r}`,children:(0,n.jsx)(te.Button,{...t,id:a,popoverTarget:e,text:`+${r}`,variant:"common",hierarchy:"primary",disabled:!o,"data-element":"counter","data-color":"black","data-num-length":r?.toString().length})}),g0=({children:r,id:a,size:e="sm",overflowCount:o=0,shouldShowOverflow:t=!1,anchorAt:i="bottom-end",tryFallbacks:c=!0,...l})=>{const d=Math.min(o,999),u=Ir(a,"arc-avatar-overflow"),g=(0,h.useMemo)(()=>`${u}-anchor`,[u]),p=(0,h.useMemo)(()=>h.Children.toArray(r),[r]);return(0,n.jsxs)(n.Fragment,{children:[d>0&&(0,n.jsx)(h0,{count:d,anchorId:g,overflowId:u,shouldShowOverflow:t}),t&&d>0&&(0,n.jsx)(te,{...l,scheme:"inverse","arc-avatar-overflow":"",id:u,anchorAt:i,tryFallbacks:c,alternateAnchorId:g,hidePopoverButton:!0,variant:"common","data-size":e,children:(0,n.jsx)(d0,{children:p.map((v,m)=>(0,n.jsx)(u0,{children:v},m))})})]})};ir("ArcAvatarOverflow",l0);const Gs=({fg:r,bg:a})=>s` 3252 &:has(>[data-color=mono-inverse]) { 3253 ${r}â¢high: var(--arc-color-fg-on-mono-inverse); 3254 ${a}â¢high: var(--arc-color-bg-mono-inverse); 3255 ${r}â¢low: var(--arc-color-fg-on-subtle); 3256 ${a}â¢low: var(--arc-color-bg-neutral-subtle); 3257 } 3258 3259 &:has(>[data-color=brand]) { 3260 ${r}â¢high: var(--arc-color-fg-on-stark); 3261 ${a}â¢high: var(--arc-color-bg-brand-stark); 3262 ${r}â¢low: var(--arc-color-fg-brand-stark); 3263 ${a}â¢low: var(--arc-color-bg-brand-subtle); 3264 } 3265 3266 &:has(>[data-color=mono]) { 3267 ${r}â¢high: var(--arc-color-fg-on-mono); 3268 ${a}â¢high: var(--arc-color-bg-mono); 3269 ${r}â¢low: var(--arc-color-fg-on-mono); 3270 ${a}â¢low: var(--arc-color-bg-mono); 3271 } 3272 3273 &:has(>[data-color=blue]) { 3274 ${r}â¢high: var(--arc-color-fg-on-stark); 3275 ${a}â¢high: var(--arc-color-bg-blue-stark); 3276 ${r}â¢low: var(--arc-color-fg-blue-stark); 3277 ${a}â¢low: var(--arc-color-bg-blue-subtle); 3278 } 3279 3280 &:has(>[data-color=neutral]) { 3281 ${r}â¢high: var(--arc-color-fg-on-heavy); 3282 ${a}â¢high: var(--arc-color-bg-neutral-heavy); 3283 ${r}â¢low: var(--arc-color-fg-neutral-stark); 3284 ${a}â¢low: var(--arc-color-bg-neutral-subtle); 3285 } 3286 3287 &:has(>[data-color=purple]) { 3288 ${r}â¢high: var(--arc-color-fg-on-stark); 3289 ${a}â¢high: var(--arc-color-bg-purple-stark); 3290 ${r}â¢low: var(--arc-color-fg-purple-stark); 3291 ${a}â¢low: var(--arc-color-bg-purple-subtle); 3292 } 3293 3294 &:has(>[data-color=green]) { 3295 ${r}â¢high: var(--arc-color-fg-on-stark); 3296 ${a}â¢high: var(--arc-color-bg-green-stark); 3297 ${r}â¢low: var(--arc-color-fg-green-stark); 3298 ${a}â¢low: var(--arc-color-bg-green-subtle); 3299 } 3300 3301 &:has(>[data-color=yellow]) { 3302 ${r}â¢high: var(--arc-color-fg-on-stark); 3303 ${a}â¢high: var(--arc-color-bg-yellow-stark); 3304 ${r}â¢low: var(--arc-color-fg-yellow-stark); 3305 ${a}â¢low: var(--arc-color-bg-yellow-subtle); 3306 } 3307 3308 &:has(>[data-color=red]) { 3309 ${r}â¢high: var(--arc-color-fg-on-stark); 3310 ${a}â¢high: var(--arc-color-bg-red-stark); 3311 ${r}â¢low: var(--arc-color-fg-red-stark); 3312 ${a}â¢low: var(--arc-color-bg-red-subtle); 3313 } 3314 3315 &:has(>
3315[data-color=maroon]) { 3316 ${r}â¢high: var(--arc-color-fg-on-stark); 3317 ${a}â¢high: var(--arc-color-bg-maroon-stark); 3318 ${r}â¢low: var(--arc-color-fg-maroon-stark); 3319 ${a}â¢low: var(--arc-color-bg-maroon-subtle); 3320 } 3321 3322 &:has(>[data-color=mint]) { 3323 ${r}â¢high: var(--arc-color-fg-on-stark); 3324 ${a}â¢high: var(--arc-color-bg-mint-stark); 3325 ${r}â¢low: var(--arc-color-fg-mint-stark); 3326 ${a}â¢low: var(--arc-color-bg-mint-subtle); 3327 } 3328 3329 &:has(>[data-color=orange]) { 3330 ${r}â¢high: var(--arc-color-fg-on-stark); 3331 ${a}â¢high: var(--arc-color-bg-orange-stark); 3332 ${r}â¢low: var(--arc-color-fg-orange-stark); 3333 ${a}â¢low: var(--arc-color-bg-orange-subtle); 3334 } 3335 3336 &:has(>[data-color=ai]) { 3337 ${r}â¢high: var(--arc-color-fg-on-heavy); 3338 ${a}â¢high: var(--arc-gradient-ai-300); 3339 ${r}â¢low: var(--arc-color-fg-on-subtle); 3340 ${a}â¢low: var(--arc-gradient-ai-100); 3341 } 3342 3343 &:has(>[data-color=overlay-light]) { 3344 ${r}â¢high: var(--arc-color-mono-black); 3345 ${a}â¢high: var(--arc-color-alpha-white-80); 3346 ${r}â¢low: var(--arc-color-alpha-heavy); 3347 ${a}â¢low: var(--arc-color-alpha-white-20); 3348 } 3349 3350 &:has(>[data-color=overlay-dark]) { 3351 ${r}â¢high: var(--arc-color-mono-white); 3352 ${a}â¢high: var(--arc-color-alpha-black-70); 3353 ${r}â¢low: var(--arc-color-mono-white); 3354 ${a}â¢low: var(--arc-color-alpha-black-40); 3355 } 3356`,Ys=({fg:r,bg:a})=>s` 3357 &:has(>[data-contrast=high]) { 3358 ${r}: var(${r}â¢high); 3359 ${a}: var(${a}â¢high); 3360 } 3361 3362 &:has(>[data-contrast=low]) { 3363 ${r}: var(${r}â¢low); 3364 ${a}: var(${a}â¢low); 3365 } 3366`,U=s`--arcâ¢badge`,Mc=s`${U}â¢fg`,Bc=s`${U}â¢bg`,v0=Gs({fg:Mc,bg:Bc}),p0=Ys({fg:Mc,bg:Bc}),f0=s` 3367 &:has(>[data-size=lg]) { 3368 ${U}â¢fontâ¢size: var(${f}â¢14); 3369 ${U}â¢fontâ¢sizeâ¢caps: var(${f}â¢12); 3370 ${U}â¢size: var(${f}â¢24); 3371 ${U}â¢minâ¢size: var(${f}â¢30); 3372 ${U}â¢paddingâ¢inline: var(${f}â¢8); 3373 ${U}â¢borderâ¢radius: var(${f}â¢4); 3374 ${U}â¢gap: var(${f}â¢4); 3375 } 3376 3377 &:has(>[data-size=md]) { 3378 ${U}â¢fontâ¢size: var(${f}â¢12); 3379 ${U}â¢fontâ¢sizeâ¢caps: var(${f}â¢10); 3380 ${U}â¢size: var(${f}â¢20); 3381 ${U}â¢minâ¢size: var(${f}â¢24); 3382 ${U}â¢paddingâ¢inline: var(${f}â¢6); 3383 ${U}â¢borderâ¢radius: var(${f}â¢4); 3384 ${U}â¢gap: var(${f}â¢4); 3385 } 3386 3387 &:has(>[data-size=sm]) { 3388 ${U}â¢fontâ¢size: var(${f}â¢10); 3389 ${U}â¢fontâ¢sizeâ¢caps: var(${f}â¢8); 3390 ${U}â¢size: var(${f}â¢16); 3391 ${U}â¢minâ¢size: var(${f}â¢18); 3392 ${U}â¢paddingâ¢inline: var(${f}â¢4); 3393 ${U}â¢borderâ¢radius: var(${f}â¢4); 3394 ${U}â¢gap: var(${f}â¢4); 3395 } 3396 3397 /** @default ⢠relative equivalent of 'md' at 100% ⢠(16 x 75% = 12) */ 3398 &:has(>[data-size=inherit]) { 3399 ${U}â¢fontâ¢size: 1em; 3400 ${U}â¢fontâ¢sizeâ¢text: 0.75em; 3401 ${U}â¢fontâ¢sizeâ¢caps: 0.625em; 3402 ${U}â¢size: 1.25em; 3403 ${U}â¢minâ¢size: 1.5em; 3404 ${U}â¢paddingâ¢inline: 0.375em; 3405 ${U}â¢borderâ¢radius: 0.25em; 3406 ${U}â¢gap: 0.25em; 3407 } 3408`,m0=s` 3409 &:has(>[data-layout=fill]) { 3410 ${U}â¢flex: auto; /* same as 1 (1 1 auto) but with clearer intent */ 3411 ${U}â¢display: flex; 3412 ${U}â¢minâ¢width: var(${U}â¢minâ¢size); 3413 3414 /* Inter-Component Communication ⢠ArcIconText -------------------⢠*/ 3415 --arc-icon-text-overflow: hidden; 3416 --arc-icon-text-white-space: nowrap; 3417 --arc-icon-text-text-overflow: ellipsis; 3418 } 3419 3420 &:has(>[data-layout=hug]) { 3421 ${U}â¢flex: none; /* same as 0 0 auto but with clearer intent */ 3422 ${U}â¢display: inline-flex; 3423 ${U}â¢minâ¢width: min-content; 3424 } 3425`,b0=s` 3426@layer arc-components { 3427 3428 [arc-badge-wrapper] { 3429 ${v0} 3430 ${p0} 3431 ${f0} 3432 ${m0} 3433 3434 /* Inter-Component Communication ⢠ArcIconText -------------------⢠*/ 3435 --arc-icon-text-align-items: center; 3436 --arc-icon-text-gap: var(${U}â¢gap); 3437 } 3438 3439 /* CORE ------------------------------------------------------------⢠*/ 3440 3441 [arc-badge-wrapper]:not([hidden]) { 3442 flex: var(--arc-badge-flex, var(${U}â¢flex, unset)); 3443 align-self: var(--arc-badge-align-self, flex-start); 3444 display: var(${U}â¢display, inline-flex); 3445 align-items: center; 3446 justify-content: center; 3447 height: 1lh; 3448 max-height: 1lh; 3449 vertical-align: bottom; 3450 3451 &:has(>[data-is-flexible]) { 3452 min-width: var(--arc-badge-min-width, var(${U}â¢minâ¢width)); 3453 } 3454 } 3455 3456 [arc-badge] { 3457 font-size: var(--arc-badge-font-size, var(${U}â¢fontâ¢size)); 3458 font-weight: var(--arc-font-weight-600); 3459 3460 flex: var(${U}â¢flex); 3461 display: var(${U}â¢display, inline-flex); 3462 align-items: center; 3463 justify-content: center; 3464 height: var(${U}â¢size); 3465 padding-inline: var(${U}â¢paddingâ¢inline); 3466 3467 overflow: hidden; 3468 white-space: nowrap; 3469 line-height: 2; 3470 3471 color: var(--arc-badge-color, var(${Mc})); 3472 background: var(--arc-badge-background, var(${Bc})); 3473 border-radius: var(${U}â¢borderâ¢radius); 3474 mix-blend-mode: var(--arc-badge-mix-blend-mode, unset); 3475 3476 :is([data-element=icon], [data-element=text]) { 3477 font-size: var(${U}â¢fontâ¢sizeâ¢text, 1em); 3478 } 3479 3480 &[data-is-uppercase] [data-element=text] { 3481 text-transform: uppercase; 3482 font-size: var(${U}â¢fontâ¢sizeâ¢caps); 3483 } 3484 } 3485 3486} 3487`,qs=["brand","blue","neutral","purple","green","yellow","red","orange","mint","maroon","mono","mono-inverse","ai","overlay-light","overlay-dark"],$0=["brand",...qs.filter(r=>r!=="brand")],y0=["neutral",...qs.filter(r=>r!=="neutral")],x0=Kr(Se,$0),k0=Kr(Se,y0),w0=Kr(aa,["inherit","lg","md","sm"]),C0=Kr(Ia,["hug","fill"]),A0=["high","low"],S0=Kr(zr,["brand-blue","brand-black","neutral","info","success","warning","critical","ai","overlay-light","overlay-dark"]),z0={"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"},E0=({children:r,icon:a,text:e,isFlipped:o,isFlexible:t,isUppercase:i,color:c,variant:l,size:d="inherit",layout:u="hug",contrast:g="high",...p})=>{const v=c??z0[l??"brand-blue"],m=r||(0,n.jsx)(Yr,{icon:a,text:e,isFlipped:o,layout:"gutter"}),b=u==="fill"&&t;return(0,n.jsx)("span",{...p,"arc-badge-wrapper":"",children:(0,n.jsx)("span",{"arc-badge":"","data-contrast":g,"data-color":v,"data-layout":u,"data-size":d,"data-is-flexible":b?"":void 0,"data-is-uppercase":i?"":void 0,children:m})})};ir("ArcBadge",b0);const wr=s`--arcâ¢badgeâ¢count`,Dc=s`${wr}â¢fg`,Oc=s`${wr}â¢bg`,_0=Gs({fg:Dc,bg:Oc}),T0=Ys({fg:Dc,bg:Oc}),I0=s` 3488 &:has(>[data-size=lg]) { 3489 ${wr}â¢fontâ¢size: var(${f}â¢14); 3490 ${wr}â¢size: var(${f}â¢24); 3491 ${wr}â¢paddingâ¢inline: var(${f}â¢4); 3492 } 3493 3494 &:has(>[data-size=md]) { 3495 ${wr}â¢fontâ¢size: var(${f}â¢12); 3496 ${wr}â¢size: var(${f}â¢20); 3497 ${wr}â¢paddingâ¢inline: var(${f}â¢4); 3498 } 3499 3500 &:has(>[data-size=sm]) { 3501 ${wr}â¢fontâ¢size: var(${f}â¢10); 3502 ${wr}â¢size: var(${f}â¢16); 3503 ${wr}â¢paddingâ¢inline: var(${f}â¢4); 3504 } 3505 3506 &:has(>[data-size=inherit]) { /** @default ⢠scalable based on 'md' size */ 3507 ${wr}â¢fontâ¢size: 1em; 3508 ${wr}â¢fontâ¢sizeâ¢text: 0.75em; 3509 ${wr}â¢size: 1.25em; 3510 ${wr}â¢paddingâ¢inline: 0.25em; 3511 } 3512`,j0=s` 3513 &:has(>[data-shape=square]) { 3514 ${wr}â¢borderâ¢radius: var(${f}â¢4); 3515 } 3516 3517 &:has(>[data-shape=circle]) { 3518 ${wr}â¢borderâ¢radius: var(--arc-border-radius-pill); 3519 } 3520`,L0=s` 3521@layer arc-components { 3522 3523[arc-badge-count-wrapper] { 3524 ${_0} 3525 ${T0} 3526 ${I0} 3527 ${j0} 3528} 3529 3530/* CORE ------------------------------------------------------------⢠*/ 3531 3532[arc-badge-count-wrapper]:not([hidden]) { 3533 flex: none; 3534 align-self: var(--arc-badge-count-align-self, flex-start); 3535 display: inline-flex; 3536 align-items: center; 3537 justify-content: center; 3538 height: 1lh; 3539 max-height: 1lh; 3540 vertical-align: bottom; 3541} 3542 3543[arc-badge-count] { 3544 font-size: var(--arc-badge-count-font-size, var(${wr}â¢fontâ¢size)); 3545 font-weight: var(--arc-font-weight-600); 3546 3547 flex: none; 3548 display: inline-flex; 3549 align-items: center; 3550 justify-content: center; 3551 height: var(${wr}â¢size); 3552 min-width: var(${wr}â¢size); 3553 padding-inline: var(${wr}â¢paddingâ¢inline); 3554 3555 white-space: nowrap; 3556 line-height: normal; 3557 3558 color: var(--arc-badge-count-color, var(${Dc})); 3559 background: var(--arc-badge-count-background, var(${Oc})); 3560 border-radius: var(${wr}â¢borderâ¢radius); 3561 mix-blend-mode: var(--arc-badge-count-mix-blend-mode, unset); 3562 3563 [data-element=text] { 3564 font-size: var(${wr}â¢fontâ¢sizeâ¢text, 1em); 3565 } 3566} 3567 3568`,R0=Kr(aa,["inherit","lg","md","sm"]),P0=Kr(zr,["neutral","brand","critical","warning","success","inverse"]),M0=["low","high"],B0=Kr(Co,["square","circle"]),D0={neutral:"neutral",brand:"brand",critical:"red",warning:"yellow",success:"green",inverse:"mono"},O0=({children:r,text:a,color:e,variant:o,contrast:t,size:i="inherit",shape:c="square",...l})=>{const d=r||(0,n.jsx)("span",{"data-element":"text",children:a}),u=e??D0[o??"neutral"],g=o==="critical"?"high":t??"low";return(0,n.jsx)("span",{...l,"arc-badge-count-wrapper":"",children:(0,n.jsx)("span",{"arc-badge-count":"","data-color":u,"data-contrast":g,"data-shape":c,"data-size":i,children:d})})};ir("ArcBadgeCount",L0);const wa=s`--arcâ¢banner`,na=s`${wa}â¢bg`,Zr=s`${wa}â¢fg`,ba=s`${wa}â¢columns`,ne=s`${wa}â¢border`,Fc=s`${wa}â¢borderâ¢radius`,qo=s`${wa}â¢padding`,De=s`${wa}â¢minâ¢height`,ln=s`${wa}â¢body`,so=s`${ln}â¢fontâ¢size`,dn=s`${ln}â¢gap`,Zs=s`${ln}â¢flexâ¢direction`,Xs=s`${ln}â¢minâ¢width`,Nc=s`${wa}â¢icon`,lo=s`${Nc}â¢fontâ¢size`,Hc=s`${Nc}â¢padding`,pe=s`${Nc}â¢color`,Js=s`${wa}â¢action`,Vc=s`${Js}â¢justify`,Uc=s`${Js}â¢gap`,Zo=s`${wa}â¢columnâ¢gap`,Wc=s`${wa}â¢rowâ¢gap`,F0=s` 3569 &:where([variant=ai]) { 3570 ${Zr}: var(--arc-color-fg-primary); 3571 /* Note: uses components-specific gradient style from: bannerStyles import */ 3572 ${na}: var(--arc-banner-gradient-ai-50) padding-box, var(--arc-banner-gradient-ai-100) border-box; 3573 ${ne}: var(--arc-border-width-sm) solid transparent; 3574 } 3575 3576 &:where([variant=announcement]) { 3577 ${Zr}: var(--arc-color-fg-primary); 3578 ${pe}: var(--arc-color-fg-brand-mid); 3579 ${na}: var(--arc-color-bg-blue-muted); 3580 ${ne}: var(--arc-border-width-sm) solid var(--arc-color-border-blue-subtle); 3581 } 3582 3583 &:where([variant=critical]) { 3584 ${Zr}: var(--arc-color-fg-primary); 3585 ${pe}: var(--arc-color-fg-critical-mid); 3586 ${na}: var(--arc-color-bg-critical-muted); 3587 ${ne}: var(--arc-border-width-sm) solid var(--arc-color-border-critical-subtle); 3588 } 3589
3590 &:where([variant=info]) { 3591 ${Zr}: var(--arc-color-fg-primary); 3592 ${pe}: var(--arc-color-fg-info-mid); 3593 ${na}: var(--arc-color-bg-info-muted); 3594 ${ne}: var(--arc-border-width-sm) solid var(--arc-color-border-info-subtle); 3595 } 3596 3597 &:where([variant=neutral]) { 3598 ${Zr}: var(--arc-color-fg-secondary); 3599 ${pe}: var(--arc-color-fg-secondary); 3600 ${na}: var(--arc-color-alpha-muted); 3601 ${ne}: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 3602 } 3603 3604 &:where([variant=success]) { 3605 ${Zr}: var(--arc-color-fg-primary); 3606 ${pe}: var(--arc-color-fg-success-mid); 3607 ${na}: var(--arc-color-bg-success-muted); 3608 ${ne}: var(--arc-border-width-sm) solid var(--arc-color-border-success-subtle); 3609 } 3610 3611 &:where([variant=warning]) { 3612 ${Zr}: var(--arc-color-fg-primary); 3613 ${pe}: var(--arc-color-fg-warning-mid); 3614 ${na}: var(--arc-color-bg-warning-muted); 3615 ${ne}: var(--arc-border-width-sm) solid var(--arc-color-border-warning-subtle); 3616 } 3617`,N0=s` 3618 &:where([variant=ai]) { 3619 ${Zr}: var(--arc-color-fg-on-stark); 3620 /* Note: uses components-specific gradient style from: bannerStyles import */ 3621 ${na}: var(--arc-banner-gradient-ai-300); 3622 } 3623 3624 &:where([variant=announcement]) { 3625 ${Zr}: var(--arc-color-fg-on-stark); 3626 ${na}: var(--arc-color-bg-blue-stark); 3627 } 3628 3629 &:where([variant=critical]) { 3630 ${Zr}: var(--arc-color-fg-on-stark); 3631 ${na}: var(--arc-color-bg-critical-mid); 3632 } 3633 3634 &:where([variant=info]) { 3635 ${Zr}: var(--arc-color-fg-on-stark); 3636 ${na}: var(--arc-color-bg-info-stark); 3637 } 3638 3639 &:where([variant=neutral]) { 3640 ${Zr}: var(--arc-color-fg-on-stark); 3641 ${na}: var(--arc-color-bg-neutral-stark); 3642 } 3643 3644 &:where([variant=success]) { 3645 ${Zr}: var(--arc-color-fg-on-stark); 3646 ${na}: var(--arc-color-bg-success-stark); 3647 } 3648 3649 &:where([variant=warning]) { 3650 ${Zr}: var(--arc-color-fg-on-mid); 3651 ${na}: var(--arc-color-bg-warning-mid); 3652 } 3653`,H0=s` 3654 ${dn}: 0.375em; 3655 ${Zs}: column; 3656 ${Xs}: 7em; 3657 ${Uc}: 0.75em; 3658 ${Zo}: 0.75em; 3659 ${Wc}: 0.75em; 3660 3661 /* INSET SETUP ---------------------------------------------------⢠*/ 3662 3663 &[layout=inset] { 3664 ${F0} 3665 3666 ${qo}: 0 0.75em 0 1em; 3667 ${Fc}: var(--arc-border-radius-lg); 3668 ${dn}: 0.125em; 3669 ${Hc}: 0.0625em; 3670 ${Zo}: 0.625em; 3671 3672 ${De}: 5em; 3673 3674 &:where([density=comfortable]) { 3675 &:not(:has([arc-banner-actions], [arc-banner-dismiss]))) { 3676 ${De}: 4.75em; 3677 } 3678 &:has([arc-banner-heading]):not(:has([arc-banner-message])), 3679 &:has([arc-banner-message]):not(:has([arc-banner-heading])), 3680 &:not(:has([arc-banner-message], [arc-banner-heading])) { 3681 ${De}: 3.5em; 3682 ${Wc}: 0.25em; 3683 3684 &:has([arc-banner-actions]) { 3685 ${De}: 3.75em; 3686 } 3687 } 3688 } 3689 3690 &[action-placement=bottom] { 3691 ${Vc}: flex-start; 3692 3693 &[density=compact] { 3694 ${qo}: 0 0.25em 0 0.5em; 3695 } 3696 } 3697 3698 &[density=compact]:where([action-placement=inline]) { 3699 line-height: normal; 3700 3701 [arc-banner-grid] { 3702 font-size: var(${so}); 3703 } 3704 } 3705 } 3706 3707 /* BLEED SETUP ---------------------------------------------------⢠*/ 3708 3709 &[layout=bleed] { 3710 ${N0} 3711 3712 ${De}: 4em; 3713 ${qo}: 0 0.75em 0 1em; 3714 ${ne}: none; 3715 ${Fc}: 0; 3716 ${dn}: 0.125em; 3717 ${Zo}: 1em; 3718 ${Vc}: flex-end; 3719 ${Hc}: 0.125em; 3720 3721 &[density=compact], 3722 &[alignment=center] { 3723 ${lo}: 1.125em; 3724 line-height: normal; 3725 3726 [arc-banner-grid] { 3727 font-size: var(${so}); 3728 } 3729 } 3730 } 3731 3732 /* DENSITIES -----------------------------------------------------⢠*/ 3733 3734 &[density=comfortable] { 3735 ${lo}: 1em; 3736 ${so}: 0.875em; 3737 } 3738 3739 &[density=compact] { 3740 ${De}: 2em; 3741 ${qo}: 0 0.25em 0 0.5em; 3742 ${so}: 0.75em; 3743 ${Uc}: 0.5em; 3744 ${Zo}: 0.5em; 3745 3746 &[action-placement=inline] { 3747 ${lo}: 1em; 3748 } 3749 3750 &[action-placement=bottom] { 3751 ${lo}: 0.875em; 3752 } 3753 3754 [arc-banner-grid] { 3755 align-self: center; 3756 } 3757 } 3758 3759 /* Inter-component communication ⢠ArcIcon/ArcIconText/ArcLink ---⢠*/ 3760 3761 &[layout=inset] { 3762 &[density=compact]:where([action-placement=inline]) { 3763 --arc-icon-text-icon-color: var(--arc-banner-icon-color, var(${pe})); 3764 --arc-icon-text-gap: 0.375em; 3765 } 3766 3767 [arc-banner-icon] { 3768 --arc-icon-color: var(--arc-banner-icon-color, var(${pe})); 3769 } 3770 } 3771 3772 &[layout=bleed] { 3773 &:where([density=compact], [alignment=center]) { 3774 --arc-icon-text-gap: 0.375em; 3775 } 3776 3777 &[alignment=center] [arc-banner-grid] { 3778 --arc-icon-height: 100%; 3779 --arc-icon-max-height: 100%; 3780 --arc-icon-text-icon-size: var(${lo}); 3781 } 3782 } 3783 3784 &[density=compact] [arc-banner-body] { 3785 --arc-icon-height: 100%; 3786 --arc-icon-max-height: 100%; 3787 --arc-icon-text-icon-size: 1.125em; 3788 } 3789 3790`,V0=s` 3791 &[layout=inset] { 3792 [arc-banner-grid] { 3793 margin-block: 0.75em; 3794 } 3795 3796 &[density=compact] { 3797 &[action-placement=bottom] { 3798 [arc-banner-grid] { 3799 margin-block: 0.25em 0.625em; 3800 } 3801 } 3802 3803 &:not([action-placement=bottom]) { 3804 [arc-banner-grid] { 3805 margin-block: 0.25em; 3806 line-height: normal; 3807 } 3808 3809 [arc-banner-icon], 3810 [arc-banner-body] { 3811 align-self: center; 3812 } 3813 } 3814 } 3815 3816 &[action-placement=bottom] { 3817 [arc-banner-actions] { grid-row: 2; }
3818 &:has([arc-banner-icon]) [arc-banner-actions] { grid-column: 2 / -1; } 3819 &:not(:has([arc-banner-icon])) [arc-banner-actions] { grid-column: 1 / -1; } 3820 } 3821 } 3822`,U0=s` 3823 &[layout=bleed] { 3824 &[density=compact] { 3825 [arc-banner-grid] { 3826 margin-block: 0.25em; 3827 } 3828 } 3829 3830 [arc-banner-grid] { 3831 margin-block: 0.5em; 3832 align-self: center; 3833 align-items: center; 3834 } 3835 3836 &[alignment=center] { 3837 [arc-banner-grid] { 3838 font-size: var(${so}); 3839 place-items: center; 3840 line-height: normal; 3841 } 3842 } 3843 } 3844`,W0=s` 3845 &:where([action-placement=inline]) { 3846 align-items: flex-start; 3847 3848 &[density=compact] { 3849 ${ba}: 1fr auto auto; 3850 3851 &:not(:has([arc-banner-actions])):has([arc-banner-dismiss]), 3852 &:not(:has([arc-banner-dismiss])):has([arc-banner-actions]) { 3853 ${ba}: 1fr auto; 3854 } 3855 } 3856 3857 &[density=comfortable] { 3858 ${ba}: auto 1fr auto auto; 3859 3860 &:has([arc-banner-icon]):has([arc-banner-actions]):not(:has([arc-banner-dismiss])), 3861 &:has([arc-banner-icon]):has([arc-banner-dismiss]):not(:has([arc-banner-actions])) { 3862 ${ba}: auto 1fr auto; 3863 } 3864 3865 &:not(:has([arc-banner-icon])):has([arc-banner-actions]):has([arc-banner-dismiss]) { 3866 ${ba}: 1fr auto auto; 3867 } 3868 3869 &:has([arc-banner-icon]):not(:has([arc-banner-actions])):not(:has([arc-banner-dismiss])) { 3870 ${ba}: auto 1fr; 3871 } 3872 &:not(:has([arc-banner-icon])):has([arc-banner-actions]):not(:has([arc-banner-dismiss])), 3873 &:not(:has([arc-banner-icon])):has([arc-banner-dismiss]):not(:has([arc-banner-actions])) { 3874 ${ba}: 1fr auto; 3875 } 3876 } 3877 3878 &:not(:has([arc-banner-icon], [arc-banner-dismiss], [arc-banner-actions])) { 3879 ${ba}: 1fr; 3880 } 3881 } 3882 3883 &:where([action-placement=bottom]) { 3884 ${ba}: auto 1fr auto; 3885 3886 &:not(:has([arc-banner-icon])) { 3887 ${ba}: 1fr auto; 3888 } 3889 3890 &:not(:has([arc-banner-dismiss])) { 3891 ${ba}: auto 1fr; 3892 } 3893 3894 &:not(:has([arc-banner-icon])):not(:has([arc-banner-dismiss])) { 3895 ${ba}: 1fr; 3896 } 3897 } 3898`,K0=s` 3899 width: var(--arc-banner-width, 100%); 3900 max-width: 100%; 3901 border: var(--arc-banner-border, var(${ne})); 3902 background: var(--arc-banner-background, var(${na})); 3903 border-radius: var(--arc-banner-border-radius, var(${Fc})); 3904 padding: var(--arc-banner-padding, var(${qo})); 3905 min-height: var(--arc-banner-min-height, var(${De}, auto)); 3906 font-size: var(--arc-banner-font-size, initial); 3907 line-height: var(--arc-line-height-loose); 3908 overflow: var(--arc-banner-overflow, unset); 3909 3910 &:not([hidden]) { 3911 display: flex; 3912 align-items: center; 3913 } 3914 3915 ${W0} 3916 3917 [arc-banner-grid] { 3918 color: var(--arc-banner-color, var(${Zr})); 3919 flex: 1; 3920 3921 display: grid; 3922 align-items: baseline; 3923 grid-template-columns: var(${ba}); 3924 column-gap: var(${Zo}); 3925 row-gap: var(${Wc}); 3926 } 3927 3928 [arc-banner-body] { 3929 color: var(--arc-banner-color, var(${Zr})); 3930 flex: 1; 3931 min-width: var(--arc-banner-body-min-width, var(${Xs})); 3932 3933 display: flex; 3934 flex-direction: var(${Zs}); 3935 gap: var(${dn}); 3936 } 3937 3938 [arc-banner-icon] { 3939 font-size: var(${lo}); 3940 padding-inline: var(${Hc}); 3941 } 3942 3943 [arc-banner-heading], 3944 [arc-banner-message] { 3945 flex: none; 3946 } 3947 3948 [arc-banner-heading], 3949 [arc-banner-message], 3950 [arc-banner-actions] { 3951 font-size: var(${so}); 3952 margin: 0; 3953 } 3954 3955 [arc-banner-actions] { 3956 display: flex; 3957 flex-flow: row wrap; 3958 align-items: flex-start; 3959 justify-content: var(--arc-banner-action-justify, var(${Vc})); 3960 gap: var(--arc-banner-action-gap, var(${Uc})); 3961 } 3962 3963`,G0=s` 3964@layer arc-components { 3965 ${Fh} 3966 3967 [arc-banner] { 3968 /* CORE VARIABLES -----------------------------------------------⢠*/ 3969 ${H0} 3970 3971 /* CORE STYLES --------------------------------------------------⢠*/ 3972 ${K0} 3973 3974 /* INSET LAYOUT -------------------------------------------------⢠*/ 3975 ${V0} 3976 3977 /* BLEED LAYOUT -------------------------------------------------⢠*/ 3978 ${U0} 3979 } 3980 3981} 3982`,Y0=["comfortable","compact"],q0=["inset","bleed"],Z0=["inline","bottom"],X0=["left","center"],J0=[...re],Q0=[...zr,"announcement"],rg=Kr(Q0,["ai","announcement","critical","info","neutral","success","warning"]),fe={layout:"inset",variant:"neutral",density:"comfortable",actionPlacement:"inline",alignment:"left",showDismiss:!0},ag=r=>r==="critical"||r==="warning"?"alert":"status",eg=({children:r,id:a,icon:e,dismissProps:o,heading:t,density:i=fe.density,layout:c=fe.layout,actionPlacement:l=fe.actionPlacement,alignment:d=fe.alignment,actionSlot:u,showDismiss:g=fe.showDismiss,message:p,variant:v=fe.variant,onClose:m,...b})=>{const $=Ir(a,"arc-banner"),k=gc(e),_=d==="center",y=c==="bleed",z=c==="inset",x=i==="compact",S=l==="inline",D=!!k,F=z&&v==="ai"?"ai-200":void 0,T={variant:v,layout:c,density:i,alignment:d,"action-placement":l},C=()=>(0,n.jsx)(cr,{icon:k,gradient:F}),W=()=>(0,n.jsx)(n.Fragment,{children:!!u&&(0,n.jsx)("span",{"arc-banner-actions":"",children:u})}),H=()=>(0,n.jsx)("div",{"arc-banner-dismiss":"",children:(0,n.jsx)(kr,{icon:"fa-regular fa-xmark-large",layout:"icon",variant:z||y&&v==="warning"?"common":"alpha",hierarchy:"tertiary",shape:"square","aria-label":"Dismiss",size:x?"sm":"md",...o,onClick:or=>{o?.onClick?.(or),m?.()}})}),ar=({showActions:or=!0})=>(0,n.jsx)("div",{"arc-banner-body":"",children:r||(0,n.jsxs)(Yr,{icon:(0,n.jsx)(C,{}),children:[!!t&&(0,n.jsx)("strong",{children:t})," ",p," ",or&&u]})}),K=()=>(0,n.jsxs)(n.Fragment,{children:[D&&(0,n.jsx)("span",{"arc-banner-icon":"",children:(0,n.jsx)(C,{})}),(0,n.jsx)("div",{"arc-banner-body":"",children:r||(0,n.jsxs)(n.Fragment,{children:[t&&(0,n.jsx)("strong",{"arc-banner-heading":"",children:t}),p&&(0,n.jsx)("span",{"arc-banner-message":"",children:p})]})})]});return(0,n.jsx)("div",{role:ag(v??fe.variant),...b,...T,"arc-banner":"",id:$,children:(0,n.jsxs)("div",{"arc-banner-grid":"",children:[_?(0,n.jsx)(ar,{}):(0,n.jsxs)(n.Fragment,{children:[x&&S?(0,n.jsx)(ar,{showActions:!1}):(0,n.jsx)(K,{}),(0,n.jsx)(W,{})]}),g&&(0,n.jsx)(H,{})]})})};ir("ArcBanner",G0);const ce=s`--arcâ¢label`,Xo=s`${ce}â¢cursor`,Jo=s`${ce}â¢opacity`,og=s` 3983@layer arc-components { 3984 3985 [arc-label] { 3986 /* Inter-Component Communication -------------------------------⢠*/ 3987 /* also applies to nested ArcLabelContent */ 3988 ${Jo}: var(--arc-label-opacity, unset); 3989 ${Jo}â¢disabled: var(--arc-label-opacity-disabled, var(--arc-alpha-40)); 3990 3991 /* Internal STYLES ---------------------------------------------⢠*/ 3992 ${ce}â¢display: var(--arc-label-display, inline-flex); 3993 ${ce}â¢gap: var(--arc-label-gap, var(${f}â¢8)); 3994 ${ce}â¢alignâ¢items: var(--arc-label-align-items, baseline); 3995 3996 ${Xo}: var(--arc-label-cursor, pointer); 3997 ${Xo}â¢disabled: var(--arc-label-cursor-disabled, not-allowed); 3998 3999 &:has(:disabled) { 4000 ${Xo}: var(${Xo}â¢disabled); 4001 ${Jo}: var(${Jo}â¢disabled); 4002 } 4003 4004 &[data-layout=fill] { 4005 ${ce}â¢display: flex; 4006 } 4007 } 4008 4009 /* CORE STYLES ---------------------------------------------------⢠*/ 4010 [arc-label]:not([hidden]) { 4011 display: var(${ce}â¢display); 4012 align-items: var(${ce}â¢alignâ¢items); 4013 gap: var(${ce}â¢gap); 4014 cursor: var(${Xo}); 4015 } 4016 4017} 4018`,tg=q(Ia,["hug","fill"]),me=({layout:r,...a})=>(0,n.jsx)("label",{...a,"arc-label":"","data-layout":r});ir("ArcLabel",og);const ng=s` 4019@layer arc-components { 4020 4021 [arc-label-content] { 4022 opacity: var(--arc-label-opacity, var(${Jo}, unset)); 4023 transition: var(--arc-label-transition, opacity 100ms ease-out); 4024 user-select: var(--arc-label-user-select, none); 4025 -webkit-user-select: var(--arc-label-user-select, none); 4026 } 4027 4028} 4029`,Oe=r=>(0,n.jsx)("span",{...r,"arc-label-content":""});ir("LabelContent",ng);const cg={checkbox:"checkbox",radio:"radio",switch:"radio"},Qo=({id:r,indeterminate:a,type:e,onChange:o,...t})=>{const i=e==="checkbox"&&!!a,c=(0,h.useRef)(null),l=Ir(r,`arc-${e}`),d=u=>g=>{if(!(g?.target instanceof HTMLInputElement))return;const p={checked:g?.target.checked,indeterminate:g?.target?.indeterminate,name:g?.target?.name,value:t?.value};u?.(p,g)};return(0,h.useEffect)(()=>{c.current?.type==="checkbox"&&(c.current.indeterminate=!!a)},[a]),(0,n.jsx)("input",{...t,id:l,ref:c,type:cg[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":i||void 0,onChange:d(o)})},ig=s` 4030@layer arc-components { 4031 4032 [arc-input-mask] { 4033 ${I}â¢borderâ¢width: var(--arc-border-width-sm); 4034 ${I}â¢border: var(${I}
4034â¢borderâ¢width) solid var(${I}â¢borderâ¢color); 4035 4036 /* Inter-Component Communication ---------------------------------⢠*/ 4037 4038 /* for: ArcIcon */ 4039 --arc-icon-size: var(${I}â¢iconâ¢size); /* ArcIcon */ 4040 4041 /* STATES --------------------------------------------------------⢠*/ 4042 4043 &:has(:disabled) { 4044 ${I}â¢cursor: not-allowed; 4045 } 4046 4047 &:has(:focus:focus-visible) { 4048 ${I}â¢outline: var(${I}â¢borderâ¢width) solid var(--arc-color-border-focus); 4049 } 4050 } 4051 4052 /* CORE STYLES -----------------------------------------------------⢠*/ 4053 4054 [arc-input-mask-wrapper] { 4055 align-self: normal; 4056 display: flex; 4057 align-items: center; 4058 justify-content: center; 4059 max-height: 1lh; 4060 } 4061 4062 [arc-input-mask] { 4063 position: relative; 4064 display: inline-flex; 4065 align-items: center; 4066 justify-content: center; 4067 width: var(${I}â¢width); 4068 height: var(${I}â¢height); 4069 opacity: var(${I}â¢opacity, var(--arc-alpha-100)); 4070 4071 color: var(${I}â¢color, transparent); 4072 background: var(${I}â¢background); 4073 border: var(${I}â¢border); 4074 border-radius: var(${I}â¢borderâ¢radius); 4075 translate: var(${I}â¢translate, unset); 4076 4077 outline: var(${I}â¢outline, none); 4078 outline-offset: var(${I}â¢borderâ¢width); 4079 4080 transition-duration: 100ms; 4081 transition-behavior: allow-discrete; 4082 transition-timing-function: ease-in-out; 4083 transition-property: 4084 opacity, 4085 background, 4086 color, 4087 border-color, 4088 outline; 4089 4090 [arc-input-type] { 4091 flex: none; 4092 outline: none; 4093 appearance: none; 4094 position: absolute; 4095 inset: calc(var(${I}â¢borderâ¢width) * -1); 4096 cursor: var(${I}â¢cursor, pointer); 4097 margin: 0; 4098 padding: 0; 4099 border: 0; 4100 z-index: var(${I}â¢zâ¢index, unset); 4101 } 4102 } 4103 4104} 4105`,un=({type:r,...a})=>(0,n.jsx)("span",{"arc-input-mask-wrapper":"",children:(0,n.jsx)("span",{...a,"arc-input-mask":r})});ir("ArcBooleanInputMask",ig);const Or=s`--arcâ¢checkbox`,sg=s` 4106@layer arc-components { 4107 4108 [arc-checkbox] { 4109 /* SIZES -------------------------------------------------------⢠*/ 4110 &[data-size=inherit] { 4111 ${Or}â¢fontâ¢size: 1em; 4112 ${Or}â¢iconâ¢size: 0.625em; 4113 ${Or}â¢size: 1.125em; 4114 ${Or}â¢gap: 0.5em; 4115 } 4116 4117 &[data-size=md] { 4118 ${Or}â¢fontâ¢size: var(${f}â¢14); 4119 ${Or}â¢iconâ¢size: var(${f}â¢10); 4120 ${Or}â¢size: var(${f}â¢18); 4121 ${Or}â¢gap: var(${f}â¢8); 4122 } 4123 4124 &[data-size=sm] { 4125 ${Or}â¢fontâ¢size: var(${f}â¢12); 4126 ${Or}â¢iconâ¢size: var(${f}â¢10); 4127 ${Or}â¢size: var(${f}â¢16); 4128 ${Or}â¢gap: var(${f}â¢6); 4129 } 4130 4131 /* Inter-Component Communication -------------------------------⢠*/ 4132 /* for: ArcBooleanInputMask */ 4133 ${I}â¢borderâ¢radius: var(${f}â¢4); 4134 ${I}â¢size: var(${Or}â¢size); 4135 ${I}â¢iconâ¢size: var(${Or}â¢iconâ¢size); 4136 ${I}â¢width: var(${Or}â¢size); 4137 ${I}â¢height: var(${Or}â¢size); 4138 ${I}â¢translate: 0 var(${f}â¢1m);⢠4139 4140 /* for: ArcLabel */ 4141 --arc-label-gap: var(${Or}â¢gap); 4142 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask 4143 to stay inline with the label text 4144 regardless of applied line-height */ 4145 } 4146 4147 /* CORE STYLES ---------------------------------------------------⢠*/ 4148 [arc-checkbox]:not([hidden]) { 4149 font-size: var(${Or}â¢fontâ¢size); 4150 display: var(--arc-checkbox-display, inline-flex); 4151 min-height: 1lh; 4152 4153 /* UNCHECKED, NOT-DISABLED, +HOVER ⢠default state */ 4154 &:not(:has(:checked, :indeterminate)) { 4155 ${I}â¢color: transparent; 4156 ${I}â¢borderâ¢color: var(--arc-color-border-stark); 4157 ${I}â¢background: transparent; 4158 4159 &:hover { 4160 ${I}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 4161 ${I}â¢background: var(--arc-color-bg-theme-subtle); 4162 } 4163 4164 &:has(:disabled) { 4165 ${I}â¢borderâ¢color: var(--arc-color-border-disabled); 4166 ${I}â¢background: var(--arc-color-bg-disabled); 4167 } 4168 } 4169 4170 /* DISABLED */ 4171 &:has(:disabled) { 4172 color: var(--arc-color-fg-disabled); 4173 } 4174 4175 /* PRIMARY, +DISABLED */ 4176 &[data-variant=primary] { 4177 &:has(:checked, :indeterminate) { 4178 ${I}â¢color: var(--arc-color-fg-on-theme-heavy); 4179 ${I}â¢borderâ¢color: transparent; 4180 ${I}â¢background: var(--arc-color-bg-theme-heavy); 4181 4182 &:not(:has(:disabled)):hover { 4183 ${I}â¢color: var(--arc-color-fg-on-theme-stark); 4184 ${I}â¢background: var(--arc-color-bg-theme-stark); 4185 } 4186 4187 &:has(:disabled) { 4188 ${I}â¢color: var(--arc-color-fg-on-theme-mid); 4189 ${I}â¢background: var(--arc-color-bg-theme-mid); 4190 } 4191 } 4192 } 4193 4194 /* SECONDARY, +DISABLED */ 4195 &[data-variant=secondary] { 4196 &:has(:checked, :indeterminate) { 4197 ${I}â¢color: var(--arc-color-fg-theme-heavy); 4198 ${I}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 4199 ${I}â¢background: transparent; 4200 4201 &:not(:has(:disabled)):hover { 4202 ${I}â¢color: var(--arc-color-fg-theme-stark); 4203 ${I}â¢borderâ¢color: var(--arc-color-border-theme-stark); 4204 } 4205 4206 &:has(:disabled) { 4207 ${I}â¢color: var(--arc-color-fg-theme-subtle); 4208 ${I}â¢borderâ¢color: var(--arc-color-border-theme-mid); 4209 } 4210 } 4211 } 4212 } 4213 4214} 4215`,lg=q(Ia,["hug","fill"]),dg=q(aa,["inherit","md","sm"]),ug=q(zr,["primary","secondary"]),Qs=({children:r,label:a,layout:e,size:o="md",variant:t="primary",useMask:i=!0,...c})=>{const{className:l,title:d,...u}=c,g={className:l,title:d},p=r??a,v=(0,n.jsx)(Qo,{...u,type:"checkbox"}),m=i&&(0,n.jsxs)(un,{type:"checkbox",children:[v,(0,n.jsx)(cr,{icon:u?.indeterminate?"fa-solid fa-minus arc-fw":"fa-solid fa-check arc-fw"})]}),b=!!p&&(0,n.jsxs)(me,{layout:e,children:[m||v,(0,n.jsx)(Oe,{children:p})]});return(0,n.jsx)("span",{...g,"arc-checkbox":"","data-size":o,"data-variant":t,children:b||m||v})};ir("ArcCheckbox",sg);const Ca=s`--arcâ¢cb`,Cr=s`${Ca}â¢o`,Aa=s`${Cr}â¢border`,Kc=s`${Cr}â¢icon`,Gc=s`${Cr}â¢text`,hg=s` 4216@layer arc-components { 4217 4218 [arc-checkbox-bar] { 4219 ${Ca}â¢fontâ¢size: var(${f}â¢14); 4220 ${Ca}â¢borderâ¢radius: var(${f}â¢6); 4221 ${Ca}â¢background: var(--arc-color-alpha-black-0); 4222 ${Ca}â¢padding: 0px; 4223 ${Ca}â¢gap: var(${f}â¢2); 4224 4225 ${Cr}â¢color: var(--arc-color-fg-secondary); 4226 ${Cr}â¢background: var(--arc-color-alpha-white-0); 4227 4228 ${Aa}â¢color: var(--arc-color-alpha-black-0); 4229 ${Aa}â¢width: var(${f}â¢1); 4230 ${Aa}â¢radius: var(${f}â¢6);
4230 /* bar-radius minus bar-padding */ 4231 4232 /* SIZES -------------------------------------------------------- */ 4233 &[data-size=lg] { /* @default */ 4234 ${Cr}â¢size: var(${f}â¢40); 4235 ${Cr}â¢lineâ¢height: var(${f}â¢38); /* ⢠-2px to account for border-width (top/bottom) */ 4236 ${Kc}â¢padding: var(${f}â¢8); 4237 ${Gc}â¢padding: var(${f}â¢12); 4238 } 4239 4240 &[data-size=md] { 4241 ${Cr}â¢size: var(${f}â¢32); 4242 ${Cr}â¢lineâ¢height: var(${f}â¢30); /* ⢠-2px to account for border-width (top/bottom) */ 4243 ${Kc}â¢padding: var(${f}â¢6); 4244 ${Gc}â¢padding: var(${f}â¢8); 4245 } 4246 4247 /* Inter-Component Communication -------------------------------⢠*/ 4248 --arc-label-align-items: stretch; /* control ArcLabel's vertical footprint; 4249 allows long label text to wrap 4250 without compromising option's 4251 visual border */ 4252 4253 /* LAYOUTS ------------------------------------------------------ */ 4254 &[data-layout=hug] { /* @default */ 4255 ${Ca}â¢display: inline-flex; 4256 } 4257 4258 &[data-layout=fill] { 4259 ${Ca}â¢display: flex; 4260 } 4261 } 4262 4263 /* STATES --------------------------------------------------------- */ 4264 [arc-checkbox-bar-option] { 4265 &:not(:has(:disabled, :checked)) { 4266 &:hover { 4267 ${Cr}â¢color: var(--arc-color-fg-on-hover-default); 4268 ${Cr}â¢background: var(--arc-color-bg-hover-default); 4269 ${Aa}â¢color: var(--arc-color-alpha-black-0); 4270 } 4271 } 4272 4273 &:has(:checked) { 4274 ${Cr}â¢color: var(--arc-color-fg-primary); 4275 ${Cr}â¢background: var(--arc-color-bg-secondary); 4276 ${Aa}â¢color: var(--arc-color-alpha-black-0); 4277 ${Cr}â¢fontâ¢weight: var(--arc-font-weight-500); 4278 } 4279 4280 &:has(:disabled) { 4281 ${Cr}â¢color: var(--arc-color-fg-disabled); 4282 } 4283 4284 &:has(:focus-within:focus-visible) { 4285 ${Cr}â¢outline: var(${Aa}â¢width) solid var(--arc-color-border-focus); 4286 } 4287 } 4288 4289 /* CORE STYLES ---------------------------------------------------- */ 4290 [arc-checkbox-bar-option] { 4291 flex: 1 1 auto; 4292 display: flex; 4293 position: relative; 4294 } 4295 4296 [arc-checkbox-bar]:not([hidden]) { 4297 font-size: var(--arc-checkbox-bar-font-size, var(${Ca}â¢fontâ¢size)); 4298 display: var(${Ca}â¢display); 4299 gap: var(${Ca}â¢gap); 4300 background: var(${Ca}â¢background); 4301 border-radius: var(${Aa}â¢radius); 4302 padding: 0; 4303 margin: 0; 4304 4305 [arc-checkbox] { 4306 flex: 1; 4307 display: flex; 4308 justify-content: center; 4309 border-radius: var(${Aa}â¢radius); 4310 outline: var(${Cr}â¢outline, none); 4311 outline-offset: var(${Aa}â¢width); 4312 } 4313 4314 /* INPUT ELEMENT -----------------------------------------------⢠*/ 4315 [arc-input-type=checkbox] { 4316 position: absolute; 4317 appearance: none; 4318 pointer-events: none; 4319 opacity: 0; 4320 } 4321 4322 /* Inter-Component Communication -------------------------------⢠*/ 4323 [arc-label] { 4324 flex: 1; 4325 line-height: var(${Cr}â¢lineâ¢height); 4326 overflow: hidden; 4327 } 4328 4329 [arc-label-content] { 4330 flex: 1; 4331 display: flex; 4332 align-items: safe center; 4333 justify-content: center; 4334 4335 height: var(${Cr}â¢size); 4336 min-width: var(${Cr}â¢size); 4337 4338 border-radius: var(${Aa}â¢radius); 4339 border: var(${Aa}â¢width) solid var(${Aa}â¢color); 4340 background: var(${Cr}â¢background); 4341 color: var(${Cr}â¢color); 4342 font-weight: var(${Cr}â¢fontâ¢weight, unset); 4343 4344 transition-duration: 200ms; 4345 transition-timing-function: ease-out; 4346 transition-property: 4347 border, 4348 background, 4349 color, 4350 font-weight; 4351 4352 &:has([data-element=text]) { 4353 padding: 0 var(${Gc}â¢padding); 4354 } 4355 4356 &:not(:has([data-element=text])) { 4357 padding: 0 var(${Kc}â¢padding); 4358 } 4359 } 4360 4361 [arc-icon-text] [data-element] { 4362 min-width: min-content; 4363 overflow: hidden; 4364 overflow-wrap: break-word; 4365 } 4366 } 4367 4368} 4369`,gg=q(Ia,["hug","fill"]),vg=q(aa,["lg","md"]),pg=({children:r,label:a,icon:e,...o})=>{const t=r||(0,n.jsx)(Yr,{icon:e,text:a});return(0,n.jsx)("li",{"arc-checkbox-bar-option":"","data-is-checked":o?.checked||void 0,children:(0,n.jsx)(Qs,{...o,label:t,layout:"fill",useMask:!1})})},fg=({children:r,size:a="lg",layout:e="hug",...o})=>(0,n.jsx)("ul",{...o,"arc-checkbox-bar":"","data-size":a,"data-layout":e,role:"group",children:r});ir("ArcCheckboxBar",hg);const mg=["normal","simple","add"],bg=["swatch","color-stop","thumbnail"],$g=["standalone","embedded"],rl=["color-field","eye-dropper","hue-slider","alpha-slider","alpha-input","hex-input","palettes"],al=["eye-dropper","alpha-slider","hex-input","palettes"],yg=1e-10,Yc=1e-6,hn=1e-4,G=(r,a,e)=>Math.min(e,Math.max(a,r)),gn=(r,a)=>{const e=10**a;return Math.round(r*e)/e},el=(r,a=Yc)=>Math.abs(r)<a?0:Math.abs(1-r)<a?1:r,rt=r=>parseInt(r,16),Wr=r=>
4369G(gn(r,0),0,255),ol=r=>gn((r%360+360)%360,2),tl=(r,a)=>el(gn(G(r,0,1),a)),Oa=r=>{const a=(r.h%360+360)%360,e=G(r.s,0,1),o=G(r.v,0,1),t=G(r.a,0,1),i=o*e,c=i*(1-Math.abs(a/60%2-1)),l=o-i;let d=0,u=0,g=0;return a<60?[d,u,g]=[i,c,0]:a<120?[d,u,g]=[c,i,0]:a<180?[d,u,g]=[0,i,c]:a<240?[d,u,g]=[0,c,i]:a<300?[d,u,g]=[c,0,i]:[d,u,g]=[i,0,c],{r:(d+l)*255,g:(u+l)*255,b:(g+l)*255,a:t}},at=(r,a)=>{const e=G(r.r,0,255)/255,o=G(r.g,0,255)/255,t=G(r.b,0,255)/255,i=Math.max(e,o,t),c=Math.min(e,o,t),l=i-c,d=i===0?0:l/i,u=i;let g=a??0;return l>yg?(i===e?g=60*((o-t)/l%6):i===o?g=60*((t-e)/l+2):g=60*((e-o)/l+4),g<0&&(g+=360)):g=(g%360+360)%360,{h:g,s:d,v:u,a:G(r.a,0,1)}},nl=r=>{const a=(r.h%360+360)%360,{s:e}=r,{l:o}=r,t=(1-Math.abs(2*o-1))*e,i=t*(1-Math.abs(a/60%2-1)),c=o-t/2;let l=0,d=0,u=0;return a<60?[l,d,u]=[t,i,0]:a<120?[l,d,u]=[i,t,0]:a<180?[l,d,u]=[0,t,i]:a<240?[l,d,u]=[0,i,t]:a<300?[l,d,u]=[i,0,t]:[l,d,u]=[t,0,i],{r:(l+c)*255,g:(d+c)*255,b:(u+c)*255,a:r.a}},cl=r=>{const a=r.r/255,e=r.g/255,o=r.b/255,t=Math.max(a,e,o),i=Math.min(a,e,o),c=t-i;let l=0;c!==0&&(t===a?l=60*((e-o)/c%6):t===e?l=60*((o-a)/c+2):l=60*((a-e)/c+4)),l<0&&(l+=360);const d=(t+i)/2,u=c===0?0:c/(1-Math.abs(2*d-1));return{h:l,s:u,l:d,a:r.a}},il=r=>{const a=Fe(r.r),e=Fe(r.g),o=Fe(r.b),t=.4122214708*a+.5363325363*e+.0514459929*o,i=.2119034982*a+.6806995451*e+.1073969566*o,c=.0883024619*a+.2817188376*e+.6299787005*o,l=Math.cbrt(t),d=Math.cbrt(i),u=Math.cbrt(c),g=.2104542553*l+.793617785*d-.0040720468*u,p=1.9779984951*l-2.428592205*d+.4505937099*u,v=.0259040371*l+.7827717662*d-.808675766*u,m=Math.sqrt(p*p+v*v);let b=Math.atan2(v,p)*180/Math.PI;return b<0&&(b+=360),{L:G(g,0,1),C:m,h:b,a:G(r.a,0,1)}},sl=r=>{const a=G(r.L,0,1),e=r.h*Math.PI/180,o=r.C*Math.cos(e),t=r.C*Math.sin(e),i=a+.3963377774*o+.2158037573*t,c=a-.1055613458*o-.0638541728*t,l=a-.0894841775*o-1.291485548*t,d=i*i*i,u=c*c*c,g=l*l*l,p=4.0767416621*d-3.3077115913*u+.2309699292*g,v=-1.2684380046*d+2.6097574011*u-.3413193965*g,m=-.0041960863*d-.7034186147*u+1.707614701*g,b=$=>{const k=$<=.0031308?$*12.92:1.055*$**.4166666666666667-.055;return Math.round(G(k,0,1)*255)};return{r:b(p),g:b(v),b:b(m),a:G(r.a,0,1)}},Fe=r=>{const a=Wr(r)/255;return a<=.04045?a/12.92:((a+.055)/1.055)**2.4},ll=r=>{const a=Fe(r.r),e=Fe(r.g),o=Fe(r.b);return .2126*a+.7152*e+.0722*o},dl=(r,a)=>{const e=r.a+a.a*(1-r.a);if(e<=0)return{r:0,g:0,b:0,a:0};const o=r.a/e,t=a.a*(1-r.a)/e;return{r:Wr(r.r*o+a.r*t),g:Wr(r.g*o+a.g*t),b:Wr(r.b*o+a.b*t),a:tl(e,2)}},et=(r,a,e,o)=>{const t=o?o(r):r,i=o?o(a):a;return Math.abs(t-i)<=e},uo=(r,a,e)=>et(r,a,e,Math.round),qc=(r,a,e)=>et(r,a,e),vn=(r,a)=>!a||!r?!1:uo(r.r,a.r,1)&&uo(r.g,a.g,1)&&uo(r.b,a.b,1)&&qc(r.a,a.a,1/255+Yc),Zc=(r,a)=>!r||!a?!1:Wr(r.r)===Wr(a.r)&&Wr(r.g)===Wr(a.g)&&Wr(r.b)===Wr(a.b)&&Math.abs(r.a-a.a)<Yc,Xc=(r,a)=>!a||!r?!1:uo(r.r,a.r,3)&&uo(r.g,a.g,3)&&uo(r.b,a.b,3)&&qc(r.a,a.a,.02),Jc=(r,a)=>et(r.h,a.h,hn)&&et(r.s,a.s,hn)&&et(r.v,a.v,hn)&&qc(r.a,a.a,hn),xg=/^[0-9a-f]+$/i,kg=500,ho=new Map,Qc=r=>({...r}),wg=(r,a)=>{if(ho.size>=kg){const e=ho.keys().next().value;e&&ho.delete(e)}ho.set(r,a?Qc(a):null)},Cg=r=>r.split("").map(a=>a+a).join(""),ul=r=>{const a=r.trim().toLowerCase().replace(/^#/,"");if(![3,4,6,8].includes(a.length))return null;const e=a.length<=4?Cg(a):a;if(!xg.test(e))return null;const o=rt(e.slice(0,2)),t=rt(e.slice(2,4)),i=rt(e.slice(4,6)),c=e.length===8?rt(e.slice(6,8))/255:1;return[o,t,i,c].some(l=>Number.isNaN(l))?null:{r:o,g:t,b:i,a:G(c,0,1)}},Wa=r=>{const a=Number(r.trim());return Number.isFinite(a)?a:null},ri=r=>{const a=r.trim();if(a.endsWith("%")){const o=Wa(a.slice(0,-1));return o==null?null:G(o/100*255,0,255)}const e=Wa(a);return e==null?null:G(e,0,255)},ot=r=>{const a=r.trim();if(a.endsWith("%")){const o=Wa(a.slice(0,-1));return o==null?null:G(o/100,0,1)}const e=Wa(a);return e==null?null:G(e,0,1)},ai=(r,a)=>{const o=r.trim().toLowerCase().match(a);if(!o)return null;const t=o[1].trim(),[i,c]=t.split("/").map(u=>u.trim()),l=i.includes(",")?i.split(",").map(u=>u.trim()):i.split(/\s+/).filter(Boolean),d=c&&c.length?c:null;return{body:t,channels:l,alphaPart:d}},Ag=r=>{const a=ai(r,/^rgba?\((.*)\)$/);if(!a)return null;const{body:e,channels:o,alphaPart:t}=a;if(o.length!==3)return null;const i=ri(o[0]),c=ri(o[1]),l=ri(o[2]);if(i==null||c==null||l==null)return null;let d=1;if(t){const u=ot(t);if(u==null)return null;d=u}else{const u=e.includes(",")?e.split(",").map(g=>g.trim()):null;if(u&&u.length===4){const g=ot(u[3]);if(g==null)return null;d=g}}return{r:i,g:c,b:l,a:d}},Sg=r=>{const a=ai(r,/^hsla?\((.*)\)$/);if(!a)return null;const{body:e,channels:o,alphaPart:t}=a;if(o.length!==3)return null;const i=p=>Number(p.replace("deg","").trim()),c=p=>{if(!p.endsWith("%"))return null;const v=Wa(p.slice(0,-1));return v==null?null:v/100},l=i(o[0]),d=c(o[1]),u=c(o[2]);if(!Number.isFinite(l)||d==null||u==null)return null;let g=1;if(t){const p=ot(t);if(p==null)return null;g=p}else{const p=e.includes(",")?e.split(",").map(v=>v.trim()):null;if(p&&p.length===4){const v=ot(p[3]);if(v==null)return null;g=v}}return nl({h:l,s:d,l:u,a:g})},zg=r=>{const a=ai(r,/^oklch\((.*)\)$/);if(!a)return null;const{channels:e,alphaPart:o}=a;if(e.length!==3)return null;const t=g=>{const p=g.trim();if(p.endsWith("%")){const m=Wa(p.slice(0,-1));return m!=null?G(m/100,0,1):null}const v=Wa(p);return v!=null?G(v,0,1):null},i=g=>{const p=g.trim();if(p.endsWith("%")){const m=Wa(p.slice(0,-1));return m!=null&&m>=0?m/100*.4:null}const v=Wa(p);return v!=null&&v>=0?v:null},c=t(e[0]),l=i(e[1]),d=Wa(e[2].trim());if(c==null||l==null||d==null||!Number.isFinite(d))return null;let u=1;if(o){const g=ot(o);if(g==null)return null;u=g}return sl({L:c,C:l,h:d,a:u})},_r=r=>{if(!r||typeof r!="string")return null;const a=r.toLowerCase().trim();if(ho.has(a)){const o=ho.get(a);return o?Qc(o):null}let e=null;return a.startsWith("#")?e=ul(a):a.startsWith("rgb")?e=Ag(a):a.startsWith("hsl")?e=Sg(a):a.startsWith("oklch")&&(e=zg(a)),wg(a,e),e?Qc(e):null},hl=r=>{if(!r||typeof r!="string")return!1;const a=r.trim().toLowerCase();return/^#?[0-9A-F-a-f]{3,4}$/.test(a)||/^#?[0-9A-F-a-f]{6}([0-9A-F-a-f]{2})?$/.test(a)},gl=r=>{if(!r||typeof r!="object")return!1;const a=r;return typeof a.r=="number"&&typeof a.g=="number"&&typeof a.b=="number"&&typeof a.a=="number"},vl=r=>{if(!r||typeof r!="object")return!1;const a=r;return typeof a.h=="number"&&typeof a.s=="number"&&typeof a.v=="number"&&typeof a.a=="number"},go=r=>String(Math.round(G(r,0,1)*100)),pl=r=>{const a=r.trim();if(!a)return null;if(a.endsWith("%")){const o=Number(a.slice(0,-1).trim());return Number.isFinite(o)?G(o/100,0,1):null}if(a.startsWith(".")||a.includes(".")){const o=Number(a);return Number.isFinite(o)?G(o,0,1):null}const e=Number(a);return Number.isFinite(e)?G(e/100,0,1):null},pn=r=>G(Number(r.toFixed(2)),0,1).toString(),Sa=(r,a=!1)=>{const e=l=>
4369G(Math.round(l),0,255).toString(16).padStart(2,"0"),o=e(r.r),t=e(r.g),i=e(r.b),c=e(G(r.a,0,1)*255);return a?`#${o}${t}${i}${c}`:`#${o}${t}${i}`},ei=r=>{const a=cl(r),e=Math.round(a.h),o=Math.round(a.s*100),t=Math.round(a.l*100);return`hsl(${e} ${o}% ${t}% / ${pn(G(a.a,0,1))})`},Ne=r=>{const a=G(Math.round(r.r),0,255),e=G(Math.round(r.g),0,255),o=G(Math.round(r.b),0,255),t=G(r.a,0,1);return t<1?`rgb(${a} ${e} ${o} / ${pn(t)})`:`rgb(${a} ${e} ${o})`},oi=r=>{const a=il(r),e=Math.round(a.L*1e3)/10,o=Math.round(a.C/.4*1e3)/10,t=Math.round(a.h),i=G(a.a,0,1);return i<1?`oklch(${e}% ${o}% ${t} / ${pn(i)})`:`oklch(${e}% ${o}% ${t})`},fl={auto:r=>r.a<1?Ne(r):Sa({...r,a:1},!1),hex:r=>Sa({...r,a:1},!1),hexa:r=>Sa(r,!0),rgb:r=>Ne(r),hsl:r=>ei(r),oklch:r=>oi(r)},Eg=(r,a)=>(fl[r]??fl.hex)(a),$a=r=>typeof r=="string"?r:r.color,fn=(r,a)=>typeof r!="string"&&r.name?r.name:a??void 0,ml=r=>{const a=$a(r),e=_r(a),o=!!e&&e.a<1&&e.a>.01,t=!!e&&e.a===0;return{cssColor:a,rgba:e,isTranslucent:o,isTransparent:t,opaqueHex:e?Sa({...e,a:1},!1):null}},mn=(r,a)=>{if(vl(r))return r;const e=(gl(r)?r:null)??_r(r)??_r(a)??{r:0,g:0,b:0,a:1};return at(e)},He=(r,a)=>{const e=a?.fallbackHex??"#000000",o=a?.format??"hex",t=mn(r,e),i={h:(t.h%360+360)%360,s:G(t.s,0,1),v:G(t.v,0,1),a:G(t.a,0,1)},c=Oa(i),l={r:Wr(c.r),g:Wr(c.g),b:Wr(c.b),a:i.a},d=Eg(o,l);let u,g,p,v,m;const b=l.a<1?"rgb":"hex",$=l.a<1?Ne(l):Sa({...l,a:1},!1);return{format:o,value:d,alpha:l.a,autoFormat:b,autoValue:$,hsv:i,rgba:l,get hex(){return u??=Sa({...l,a:1},!1)},get hexa(){return g??=Sa(l,!0)},get rgb(){return p??=Ne(l)},get hsl(){return v??=ei(l)},get oklch(){return m??=oi(l)}}},bl=(r,a)=>({...He(r.hsv,{format:a}),name:r.name}),$l=(r,a)=>({color:$a(r),name:fn(r,a)}),yl=r=>({color:`#${`00${Math.floor(Math.random()*16777216).toString(16)}`.slice(-6)}`,name:r}),vo=r=>$a(r).trim().toLowerCase(),bn=(r,a)=>{if(vo(r)===vo(a))return!0;const e=_r($a(r)),o=_r($a(a));return!!e&&!!o&&vn(e,o)},ti=(r,a,e)=>{const o=e?.skipIndex;return r.some((t,i)=>i!==o?bn(t,a):!1)},_g=r=>{let a=null;try{a=r?document.documentElement?.querySelector?.(r):document.documentElement}catch{return null}if(a==null)return null;const e=window.getComputedStyle(a);return _r(e?.backgroundColor)},ni=(r,a)=>{const e=_r($a(r));if(!e)return a?.useScheme?"auto":"inherit";const{darkColor:o,lightColor:t,contrastBias:i,bgColor:c,bgElement:l}=a??{},d=a?.useScheme?"light":o??"#000000",u=a?.useScheme?"dark":t??"#ffffff",g=G(i??-4,-7,7);let p=e;if(e.a<1){const $=_r(c??""),k=$?null:_g(l);p=dl(e,$??k??{r:255,g:255,b:255,a:1})}const v=ll(p),m=(v+.05)/.05,b=1.05/(v+.05);return m+g>=b?d:u},ci=r=>r==null?null:{comparisonKey:vo(r),selectedRgba:_r($a(r))},xl=(r,a)=>{if(!a)return!1;if(vo(r)===a.comparisonKey)return!0;if(!a.selectedRgba)return!1;const e=_r($a(r));return!!e&&vn(e,a.selectedRgba)},Tg=s`--arcâ¢buttonâ¢bar`,tt=s`${Tg}â¢axis`,Ig=s` 4370@layer arc-components { 4371 4372 [arc-button-bar=horizontal] { 4373 ${tt}: row; 4374 4375 &[is-flipped] { 4376 ${tt}: row-reverse; 4377 } 4378 } 4379 4380 [arc-button-bar=vertical] { 4381 ${tt}: column; 4382 4383 &[is-flipped] { 4384 ${tt}: column-reverse; 4385 } 4386 } 4387 4388 [arc-button-bar] { 4389 flex: var(--arc-button-bar-flex, 1); 4390 display: var(--arc-button-bar-display, flex); 4391 flex-direction: var(--arc-button-bar-flex-direction, var(${tt})); 4392 align-items: var(--arc-button-bar-align-items, center); 4393 justify-content: var(--arc-button-bar-justify-content, flex-end); 4394 gap: var(--arc-button-bar-gap, var(${E}â¢8)); 4395 padding: var(--arc-button-bar-padding, 0); 4396 margin: 0; 4397 } 4398 4399} 4400`,$n=({children:r,...a})=>{const{Element:e="menu",orientation:o="horizontal",isFlipped:t=!1,...i}=a;return(0,n.jsx)(e,{...i,"arc-button-bar":o,"is-flipped":t?"":void 0,role:i.role??"group",children:r})};ir("ArcButtonBar",Ig);const jg=({activeColor:r})=>{const[a,e]=(0,h.useState)(r),o=r!=null,t=o?r:a;(0,h.useEffect)(()=>{r!=null&&e(r)},[r]);const i=(0,h.useCallback)(c=>{o||e(c)},[o]);return{isSelectionControlled:o,activeSelectedColor:t,setUncontrolledSelectedColor:e,selectColor:i}},kl=(r,a)=>ti(r,a)?r:[...r,a],wl=(r,a)=>{const e=kl(r.colors??[],a);return e===r.colors?r:{...r,colors:e}},Cl=(r,a)=>{const e=r.colors??[],o=e.filter(t=>!bn(t,a));return o.length===e.length?r:{...r,colors:o}},Al=(r,a,e)=>r.map(o=>o.id===a.id?wl(o,e):o),Sl=(r,a,e)=>r.map(o=>o.id===a.id?Cl(o,e):o),Lg=(r,a,e)=>{if(Array.isArray(r)){if(e===void 0)throw new TypeError("ArcColorPalette.addColor: pass (palettes, palette, color) when the first argument is an array.");return Al(r,a,e)}return wl(r,a)},Rg=(r,a,e)=>{if(Array.isArray(r)){if(e===void 0)throw new TypeError("ArcColorPalette.removeColor: pass (palettes, palette, color) when the first argument is an array.");return Sl(r,a,e)}return Cl(r,a)},Pg=(r,a,e)=>{const o=r.find(t=>
4400t.id===a);return o?Al(r,o,e):r},Mg=(r,a,e)=>{const o=r.find(t=>t.id===a);return o?Sl(r,o,e):r},Bg=({palette:r,isSelectionControlled:a,onAddColor:e,emitColorChange:o,setLocalColors:t,setUncontrolledSelectedColor:i,initialColorValue:c,shouldOpenPopover:l=!0,notifyAddColorToggle:d,showPopover:u,hidePopover:g})=>{const p=(0,h.useCallback)(()=>c??yl(),[c]),[v,m]=(0,h.useState)(null),[b,$]=(0,h.useState)(p),k=(0,h.useCallback)(()=>{m(null),$(p())},[p]),_=(0,h.useCallback)(T=>{t(C=>kl(C,T))},[t]),y=(0,h.useCallback)((T,C)=>{e?.(r,T,C),o(T),a||i(T)},[o,a,e,r,i]),z=(0,h.useCallback)((T,C)=>{_(T),y(T,C??void 0)},[_,y]),x=(0,h.useCallback)(()=>{if(v!=null)return;const T=p();let C=-1;t(W=>(C=W.length,[...W,T])),m(C),$(T),d?.(!0),l&&u()},[v,p,d,t,l,u]),S=(0,h.useCallback)(T=>{v!=null&&$(T)},[v]),D=(0,h.useCallback)(T=>{T?.preventDefault(),T?.stopPropagation(),v!=null&&t(C=>C.filter((W,H)=>H!==v)),k(),d?.(!1),l&&g()},[v,g,d,k,t,l]),B=(0,h.useCallback)((T,C)=>{const H=(or=>typeof or?.preventDefault=="function")(T)?T:C;if(H?.preventDefault(),H?.stopPropagation(),v==null||b==null){d?.(!1),l&&g();return}const K=(r.colors??[]).map((or,nr)=>nr===v?b:or);t(K),y(b,H??void 0),k(),d?.(!1),l&&g()},[v,b,y,g,d,r.colors,k,t,l]),F=(0,h.useCallback)((T,C)=>{C?.preventDefault(),C?.stopPropagation(),z(T,C??void 0)},[z]);return{draftColorIndex:v,draftColorValue:b,startAddDraft:x,updateDraftColor:S,cancelDraftColor:D,saveDraftColor:B,saveCurrentColor:F}},ya=s`--arc-popover`,po=s`--arcâ¢colorâ¢picker`,jr=s`${po}â¢thumb`,nt=s`${po}â¢tools`,Ka=s`${po}â¢dropper`,zl=s` 4401 background-image: 4402 linear-gradient( 4403 to right, 4404 transparent, 4405 var(--jsâ¢hex, transparent) 4406 ), 4407 conic-gradient( 4408 var(--arc-color-alpha-subtle) 0 25%, 4409 var(--arc-color-alpha-muted) 0 50%, 4410 var(--arc-color-alpha-subtle) 0 75%, 4411 var(--arc-color-alpha-muted) 0 100% 4412 ); 4413 4414 background-size: 100% 100%, 1em 1em; 4415 background-position: 50% 50%, 50% 50%; 4416`,El={POPOVER:s` 4417 /* Inter-Component Communication: ArcPopover */ 4418 ${ya}-width: 14em; /* 224px */ 4419 ${ya}-min-width: 10.5em; /* 140px */ 4420 ${ya}-max-width: 15.75em; /* 252px */ 4421 ${ya}-line-height: normal; /* @note â allows elements to resolve to design-spec heights */ 4422 ${ya}-outline-size: 0px; /* @note â default outline-size causes divider lines to not extend to the edges of the popover shell. */ 4423 ${ya}-padding: 0; 4424 4425 ${ya}-header-padding: 0.75em 1em; 4426 ${ya}-header-background: var(--arc-color-bg-mono); 4427 ${ya}-header-align-items: center; 4428 4429 ${ya}-body-padding: 0; 4430 4431 ${ya}-footer-padding: 1em; 4432 ${ya}-footer-background: var(--arc-color-bg-mono); 4433 4434 4435 /* Inter-Component Communication: ArcButtonBar via ArcPopoverFooter */ 4436 [arc-popover-footer]:has([arc-button-bar]) { 4437 --arc-button-bar-justify-content: stretch; 4438 --arc-button-flex: 1; 4439 } 4440 4441 &:has([arc-color-picker=simple]) { 4442 ${ya}-width: 12.25em; /* 196px */ 4443 } 4444 `,PICKER:s` 4445 ${jr}â¢shadow: 0 0 0 0.25em var(--arc-color-alpha-white-95), 0 0 0.375em 0.1875em var(--arc-color-alpha-black-30); 4446 ${jr}â¢size: 0.625em; 4447 ${jr}â¢transition: 200ms ease-out; 4448 4449 ${po}â¢padding: 1em; 4450 &[is-inline] { ${po}â¢padding: 0; } 4451 4452 &[arc-color-picker=simple] { 4453 ${Ka}â¢alignâ¢self: end; 4454 ${nt}â¢gap: 1em 0.5em; 4455 4456 [arc-color-slider] { 4457 grid-column: 1 / -1; 4458 } 4459 } 4460 4461 [arc-color-input=hex] { 4462 --arc-input-prefix-opacity: var(--arc-alpha-40); 4463 --arc-input-suffix-opacity: var(--arc-alpha-100); 4464 } 4465 4466 /* This font-size is intended for various scaling calculations. */ 4467 font-size: initial; 4468 position: relative; 4469 display: flex; 4470 flex-direction: column; 4471 z-index: 1; 4472 4473 -webkit-user-select: none; 4474 user-select: none; 4475 4476 /* Inter-Component Communication: ArcInput & ArcLabel ⢠font-size reset for input labels */ 4477 --arc-input-padding-inline: max(6px, 0.375em); 4478 `},Dg=s` 4479 4480 [arc-color-field] { 4481 display: grid; 4482 gap: 0.5em; 4483 } 4484 4485 [arc-color-surface=field] { 4486 position: relative; 4487 width: 100%; 4488 aspect-ratio: 1 / 1; 4489 4490 -webkit-user-select: none; 4491 user-select: none; 4492 touch-action: none; 4493 cursor: pointer; 4494 4495 border-radius: var(--arc-border-radius-md); 4496 background: var(--arc-color-bg-mono); 4497 4498 &:focus:focus-visible { 4499 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4500 outline-offset: 0.25em; 4501 } 4502 4503 &::after { 4504 box-sizing: border-box; 4505 content: ''; 4506 position: absolute; 4507 top: 0; 4508 left: 0; 4509 width: 100%; 4510 height: 100%; 4511 border-radius: inherit; 4512 border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 4513 pointer-events: none; 4514 z-index: 2; 4515 } 4516 } 4517 4518 [arc-color-field-canvas] { 4519 position: absolute; 4520 inset: 0; 4521 width: 100%; 4522 height: 100%; 4523 display: block; 4524 border-radius: inherit; 4525 pointer-events: none; 4526 } 4527 4528 [arc-color-field-slice] { 4529 position: absolute; 4530 pointer-events: none; 4531 z-index: 3; 4532 border-radius: var(--arc-border-radius-pill); 4533 transition: left var(${jr}â¢transition), top var(${jr}â¢transition); 4534 } 4535 4536 [arc-color-field][sr-focus] [has-focus] { 4537 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4538 outline-offset: 0.25em; 4539 } 4540 4541 /* Saturation axis at current Value */ 4542 [arc-color-field-slice=saturation] { 4543 inset: calc(var(--jsâ¢v) * 100%) 0 auto 0; 4544 height: var(--arc-border-width-md); 4545 } 4546 4547 /* Value axis at current Saturation */ 4548 [arc-color-field-slice=value] { 4549 inset: 0 auto 0 calc(var(--jsâ¢s) * 100%); 4550 width: var(--arc-border-width-md); 4551 } 4552 4553 [arc-color-field-thumb] { 4554 position: absolute; 4555 left: calc(var(--jsâ¢s) * 100%); 4556 top: calc(var(--jsâ¢v) * 100%); 4557 transform: translate(-50%, -50%); 4558 width: var(${jr}â¢size); 4559 height: var(${jr}â¢size); 4560 border: 0; 4561 border-radius: var(--arc-border-radius-circle); 4562 box-shadow: var(${jr}â¢shadow); 4563 background: var(--jsâ¢rgb); 4564 z-index: 4; 4565 transition: 4566 background var(${jr}â¢transition), 4567 left var(${jr}â¢transition), 4568 top var(${jr}â¢transition); 4569 } 4570 4571 @media (prefers-reduced-motion: reduce) { 4572 [arc-color-field-thumb], 4573 [arc-color-field-slice] { 4574 transition: none; 4575 } 4576 } 4577 4578 [arc-color-field][is-interacting] { 4579 [arc-color-field-thumb], 4580 [arc-color-field-slice] { 4581 transition: none; 4582 } 4583 } 4584 4585 /* Visually hidden but usable (so SR users can access them) */ 4586 [arc-color-field-sr] { 4587 position: absolute; 4588 width: 1px; 4589 height: 1px; 4590 padding: 0; 4591 margin: -1px; 4592 overflow: hidden; 4593 clip: rect(0, 0, 0, 0); 4594 white-space: nowrap; 4595 border: 0; 4596 } 4597 4598 [arc-color-field-sr-slider] { 4599 display: block; 4600 } 4601 4602`,Og=s` 4603 4604 [arc-color-slider] { 4605 display: grid; 4606 gap: 0.375em; 4607 4608 [arc-label] { 4609 font-size: 0.75em; 4610 } 4611 4612 [arc-color-surface] { 4613 position: relative; 4614 display: flex; 4615 border-radius: var(--arc-border-radius-pill); 4616 height: 0.875em; 4617 align-items: center; 4618 4619 &[arc-color-surface=hue] { 4620 ${jr}â¢bg: var(--jsâ¢hue); 4621 4622 background-image: 4623 linear-gradient( 4624 to right, 4625 #f00 0%, 4626 #ff0 16.66%, 4627 #0f0 33.33%, 4628 #0ff 50%, 4629 #00f 66.66%, 4630 #f0f 83.33%, 4631 #f00 100% 4632 ); 4633 } 4634 4635 &[arc-color-surface=alpha] { 4636 ${jr}â¢bg: var(--jsâ¢rgb); 4637 ${zl} 4638 } 4639 4640 &:has(input[type=range]:focus:focus-visible) { 4641 ::-webkit-slider-thumb { 4642 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4643 outline-offset: 0.4em; 4644 } 4645 4646 ::-moz-range-thumb { 4647 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4648 outline-offset: 0.4em; 4649 } 4650 } 4651 } 4652 4653 input[type=range] { 4654 width: 100%; 4655 height: 100%; 4656 margin: 0; 4657 padding: 0; 4658 background: transparent; 4659 appearance: none; 4660 outline: none; 4661 cursor: pointer; 4662 font: inherit; 4663 4664 /* Track */ 4665 &::-webkit-slider-runnable-track { display: flex; align-items: center; } 4666 &::-moz-range-track { display: flex; align-items: center; } 4667 4668 /* Thumb */ 4669 &::-webkit-slider-thumb { 4670 appearance: none; 4671 width: var(${jr}â¢size); 4672 height: var(${jr}â¢size); 4673 border: 0; 4674 border-radius: var(--arc-border-radius-circle); 4675 box-shadow: var(${jr}â¢shadow); 4676 background: var(${jr}â¢bg); 4677 } 4678 4679 &::-moz-range-thumb { 4680 appearance: none; 4681 width: var(${jr}â¢size); 4682 height: var(${jr}â¢size); 4683 border: 0; 4684 border-radius: var(--arc-border-radius-circle); 4685 box-shadow: var(${jr}â¢shadow); 4686 background: var(${jr}â¢bg); 4687 } 4688 } 4689 } 4690 4691`,_l=s`3.75em`,Fg=s` 4692 4693 [arc-color-inputs] { 4694 display: grid; 4695 gap: 0.5em; 4696 grid-template-columns: 1fr ${_l}; 4697 align-items: end; 4698 4699 &:not(:has([arc-color-input=hex])) { 4700 grid-template-columns: ${_l} 1fr; 4701 } 4702 4703 [arc-color-input=alpha] { 4704 --arc-input-text-align: end; 4705 } 4706 4707 [arc-color-input=hex] { 4708 --arc-icon-color: var(--arc-color-fg-critical-mid); 4709 } 4710 4711 ::-webkit-inner-spin-button { 4712 appearance: none; 4713 } 4714 4715 input[type=number] { 4716 appearance: textfield; 4717 } 4718 } 4719 4720`,Ng=s` 4721 4722 &[arc-color-picker=simple]:has([arc-color-palettes]) [arc-color-tools] { 4723 padding-top: 0; 4724 } 4725 4726 [arc-color-tools] { 4727 display: grid; 4728 gap: var(${nt}â¢gap, 0.5em); 4729 grid-template-columns: var(${nt}â¢columns, auto 1fr); 4730 } 4731 4732 [arc-color-tools=simple] {
4733 &:has([arc-color-input=hex]):not(:has([arc-color-eye-dropper])) { 4734 ${nt}â¢columns: 1fr 2em; 4735 } 4736 } 4737 4738 :is([arc-color-field], [arc-color-inputs]) { 4739 grid-column: 1 / -1; 4740 } 4741 4742 [arc-color-eye-dropper] { 4743 align-self: var(${Ka}â¢alignâ¢self, center); 4744 justify-self: var(${Ka}â¢justifyâ¢self, center); 4745 } 4746 4747 [arc-color-sliders] { 4748 grid-column: 1 / -1; 4749 4750 display: grid; 4751 gap: 0.25em; 4752 grid-template-columns: auto; 4753 align-self: center; 4754 } 4755 4756 [arc-color-eye-dropper] + [arc-color-sliders] { 4757 grid-column: 2; 4758 } 4759 4760 /* Finding a good place for the eye dropper in some cases */ 4761 &:has([arc-color-input=hex]):not(:has([arc-color-input=alpha], [arc-color-sliders])), 4762 &:has([arc-color-input=alpha]):not(:has([arc-color-input=hex], [arc-color-sliders])) { 4763 ${Ka}â¢alignâ¢self: end; 4764 ${Ka}â¢justifyâ¢self: end; 4765 4766 &:has([arc-color-eye-dropper]) [arc-color-inputs] { display: contents; } 4767 4768 &:not(:has([arc-color-field])) { ${Ka}â¢row: 1; } 4769 4770 &:not(:has([arc-color-input=hex])) { 4771 ${Ka}â¢justifyâ¢self: start; 4772 ${nt}â¢columns: 1fr auto; 4773 ${Ka}â¢column: 1; 4774 } 4775 4776 [arc-color-eye-dropper] { 4777 grid-column: var(${Ka}â¢column, 2); 4778 grid-row: var(${Ka}â¢row, 2); 4779 } 4780 4781 [arc-color-sliders] { grid-column: 1 / -1; } 4782 } 4783 4784 ${Dg} 4785 ${Og} 4786 ${Fg} 4787 4788`,Hg=s` 4789@layer arc-components { 4790 4791 [arc-color-picker-wrapper] { 4792 ${El.POPOVER} 4793 } 4794 4795 [arc-color-picker] { 4796 ${El.PICKER} 4797 4798 [arc-color-picker-section] { 4799 padding: var(${po}â¢padding); 4800 4801 &:has(+[arc-color-picker-section]) { padding-bottom: 1em; } 4802 +[arc-color-picker-section] { padding-top: 1em; } 4803 4804 &[has-divider=top] { border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); } 4805 &[has-divider=bottom] { border-bottom: var(--arc-border-width-sm) solid var(--arc-color-border-mid); } 4806 } 4807 4808 ${Ng} 4809 4810 [arc-color-palettes] { 4811 display: flex; 4812 flex-direction: column; 4813 gap: 1em; 4814 } 4815 4816 [arc-color-picker-section=footer] { 4817 position: sticky; 4818 bottom: 0; 4819 border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 4820 background: var(--arc-color-bg-mono); 4821 z-index: 2; 4822 } 4823 4824 [arc-color-picker-button-bar] * { 4825 flex: 1; 4826 } 4827 } 4828 4829} 4830`,ca=s`--arcâ¢colorâ¢chip`,Vg=s` 4831@layer arc-components { 4832 4833 [arc-color-chip=add-color] { 4834 ${ca}â¢radius: var(--arc-border-radius-circle); 4835 ${ca}â¢width: var(${f}â¢24); 4836 ${ca}â¢height: var(${f}â¢24); 4837 } 4838 4839 [arc-color-chip=swatch] { 4840 ${ca}â¢radius: var(--arc-border-radius-circle); 4841 ${ca}â¢width: var(${f}â¢24); 4842 ${ca}â¢height: var(${f}â¢24); 4843 } 4844 4845 [arc-color-chip=color-stop] { 4846 ${ca}â¢radius: var(--arc-border-radius-md); 4847 ${ca}â¢width: var(${f}â¢24); 4848 ${ca}â¢height: var(${f}â¢24); 4849 } 4850 4851 [arc-color-chip=thumbnail] { 4852 ${ca}â¢radius: var(--arc-border-radius-md); 4853 ${ca}â¢width: var(${f}â¢28); 4854 ${ca}â¢height: var(${f}â¢42); 4855 } 4856 4857 [arc-color-chip] { 4858 --arc-button-position: relative; 4859 --arc-button-background: var(--jsâ¢color); 4860 --arc-button-color: var(--jsâ¢fg, transparent); 4861 --arc-button-width: var(${ca}â¢width); 4862 --arc-button-height: var(${ca}â¢height); 4863 --arc-button-border-radius: var(${ca}â¢radius); 4864 --arc-button-border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 4865 --arc-button-outline-offset: var(--arc-border-width-sm); 4866 --arc-icon-size: var(${f}â¢10); 4867 4868 &[is-transparent] { 4869 --arc-button-background: unset; 4870 ${zl} 4871 } 4872 4873 &[is-translucent] { 4874 --arc-button-background: 4875 var(--jsâ¢color) 4876 linear-gradient( 4877 to right, 4878 var(--jsâ¢hex), 4879 var(--jsâ¢hex) 50%, 4880 transparent 50%, 4881 transparent 4882 ) border-box; 4883 4884 &::after { 4885 content: ''; 4886 position: absolute; 4887 inset: 0 auto 0 50%; 4888 translate: -100% 0; 4889 width: var(--arc-border-width-sm); 4890 background: var(--arc-color-border-mid); 4891 pointer-events: none; 4892 z-index: 1; 4893 } 4894 } 4895 4896 &[is-selected] { 4897 --arc-button-border: var(--arc-border-width-sm) solid var(--arc-color-border-heavy
4897); 4898 --arc-button-box-shadow: 0 0 0 var(--arc-border-width-md) var(--arc-color-fg-on-mono-inverse) inset; 4899 } 4900 4901 &[is-draft] { 4902 --arc-button-outline: var(--arc-border-width-md) dotted color-mix(in srgb, transparent 35%, var(--arc-color-border-focus) 65%); 4903 } 4904 4905 &[is-control] { 4906 --arc-button-background: var(--arc-color-alpha-muted); 4907 --arc-button-color: inherit; 4908 } 4909 } 4910 4911} 4912`,Tl=(0,h.memo)(({color:r,name:a,kind:e,isDraft:o,isSelected:t,contrastBias:i,contrastBgColor:c,canRemoveColor:l,icon:d,text:u,tooltip:g,onClick:p,style:v,...m})=>{const{cssColor:b,isTranslucent:$,isTransparent:k,opaqueHex:_}=(0,h.useMemo)(()=>ml(r??""),[r]),y=fn(r??"",a),z=u??y??b,x=(0,h.useMemo)(()=>ni(b,{contrastBias:i,bgColor:c}),[b,i,c]),[S,D]=(0,h.useState)(!1),[B,F]=(0,h.useState)(!1),[T,C]=(0,h.useState)(!1),[W,H]=(0,h.useState)(!1),[ar,K]=(0,h.useState)(!1);(0,h.useEffect)(()=>{const j=xr=>{(xr.metaKey||xr.key==="Meta")&&(D(!0),C(!0))},er=xr=>{const Jr=xr.metaKey;D(Jr),C(Jr)},pr=()=>{D(!1),C(!1)};return window.addEventListener("keydown",j),window.addEventListener("keyup",er),window.addEventListener("blur",pr),()=>{window.removeEventListener("keydown",j),window.removeEventListener("keyup",er),window.removeEventListener("blur",pr)}},[]);const nr=e==="swatch"&&!!l&&(W&&S||(S||T)&&B),gr=nr||ar,M=gr?"fa-regular fa-xmark":d??"fa-solid fa-check",O=gr?"Remove color":g??y??(hl(b)?b.toUpperCase():b);(0,h.useEffect)(()=>{nr&&K(!0)},[nr]),(0,h.useEffect)(()=>{!nr&&t&&!o&&K(!1)},[o,nr,t]);const N=(0,h.useCallback)(j=>{const er=nr||j.metaKey?"remove":"select",pr={...He(b,{format:"auto",fallbackHex:b}),name:y};p?.({colorData:pr,action:er,source:e,shouldClosePicker:!1},j)},[nr,p,b,y,e]),L=(0,h.useCallback)(j=>{j.preventDefault(),j.stopPropagation(),N(j)},[N]),Z=(0,h.useCallback)(j=>{j.metaKey&&(j.preventDefault(),j.stopPropagation(),N(j))},[N]),X=(0,h.useCallback)(j=>{const er=j.propertyName??"";!(er==="color"||er.includes("color"))||nr||K(!1)},[nr]),J=(0,h.useCallback)(j=>{j.key!=="Enter"||!nr||(j.preventDefault(),j.stopPropagation(),j.currentTarget.click())},[nr]),dr=(0,h.useMemo)(()=>({...v??{},"--js\u2022hex":k?"transparent":$&&(_??b)||"","--js\u2022color":b,"--js\u2022fg":t&&!o||nr?x:""}),[v,k,$,_,b,t,o,nr,x]);return(0,n.jsx)(kr,{...m,_isCustom:!0,"arc-color-chip":e,layout:"icon",shape:"circle",size:"sm",hierarchy:"secondary",tooltip:O,text:z,icon:M,"is-draft":o?"":void 0,"is-selected":!o&&t?"":void 0,"is-translucent":$?"":void 0,"is-transparent":k?"":void 0,style:dr,onClick:L,onContextMenu:Z,onMouseEnter:j=>{F(!0),C(j.metaKey)},onMouseMove:j=>{C(j.metaKey)},onMouseLeave:()=>{F(!1),C(!1),K(!1)},onFocus:()=>H(!0),onBlur:()=>{H(!1),K(!1)},onKeyDown:J,onTransitionEnd:X})});Tl.displayName="ArcColorSwatch";const ii=Tl;ii.getColorData=He,ir("ArcColorSwatch",Vg);const Ug=s` 4913@layer arc-components { 4914 4915 [arc-color-palette] { 4916 display: flex; 4917 flex-direction: column; 4918 gap: var(${E}â¢8); 4919 4920 [arc-color-palette-header] { 4921 display: flex; 4922 flex-direction: column; 4923 gap: var(${E}â¢4); 4924 font-size: var(${f}â¢12); 4925 4926 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 4927 small { opacity: 0.612; } 4928 } 4929 4930 [arc-color-palette-set] { 4931 display: flex; 4932 flex-wrap: wrap; 4933 gap: var(${E}â¢4); 4934 max-width: calc((var(${f}â¢24) + var(${E}â¢4)) * 7 + var(${E}â¢24)); 4935 } 4936 4937 [arc-color-palette-picker] { 4938 display: grid; 4939 gap: var(${E}â¢8); 4940 padding-top: var(${E}â¢8); 4941 border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 4942 } 4943 4944 [arc-color-palette-inputs] { 4945 display: grid; 4946 gap: var(${E}â¢8); 4947 grid-template-columns: auto auto; 4948 align-items: end; 4949 } 4950 4951 [arc-color-palette-actions] { 4952 display: flex; 4953 justify-content: flex-end; 4954 gap: var(${E}â¢8); 4955 } 4956 4957 [arc-add-color] { 4958 --arc-icon-size: var(${f}â¢10); 4959 } 4960 } 4961 4962} 4963`,yn=({children:r,id:a,heading:e,showHeading:o=!0,colors:t=[],activeColor:i,format:c=$e.format,canAddColor:l=!1,canRemoveColor:d=!1,contrastBgColor:u,addColorFlow:g="standalone",sharedSwatchProps:p,onSwatchClick:v,onAddColor:m,onRemoveColor:b,onColorChange:$,onAddColorToggle:k,..._})=>{const y=g==="embedded",z=Ir(void 0,"add-color-anchor"),x=Ir(void 0,"add-color-popover"),[S,D]=(0,h.useState)(t),[B,F]=(0,h.useState)(!1),{isSelectionControlled:T,activeSelectedColor:C,setUncontrolledSelectedColor:W,selectColor:H}=jg({activeColor:i}),ar=(0,h.useMemo)(()=>ci(C),[C]),K=(0,h.useMemo)(()=>S.map(Q=>({normalized:vo(Q),rgba:_r($a(Q))}
4963)),[S]),or=(0,h.useMemo)(()=>K.map(Q=>ar?Q.normalized===ar.comparisonKey?!0:!!ar.selectedRgba&&!!Q.rgba&&vn(Q.rgba,ar.selectedRgba):!1),[K,ar]),nr=(0,h.useMemo)(()=>or.some(Boolean),[or]),gr=!y&&nr?void 0:C;(0,h.useEffect)(()=>{D(t)},[t]);const M=(0,h.useCallback)(Q=>{if(typeof Q=="object"&&Q!==null&&"hsv"in Q){$?.(Q);return}const Sr=$a(Q),Qr=fn(Q),ra=He(Sr,{format:c});$?.({...ra,name:Qr})},[$,c]),O=(0,h.useCallback)(Q=>{F(Q),k?.(a,Q)},[a,k]),N=(0,h.useCallback)(()=>te?.handlePopover?.(x,"show"),[x]),L=(0,h.useCallback)(()=>te?.handlePopover?.(x,"hide"),[x]),Z=(0,h.useMemo)(()=>({id:a,heading:e,showHeading:o,colors:S,activeColor:i,format:c,canAddColor:l,canRemoveColor:d,contrastBgColor:u,addColorFlow:g,sharedSwatchProps:p,onSwatchClick:v,onAddColor:m,onRemoveColor:b,onColorChange:$,onAddColorToggle:k}),[a,e,o,S,i,c,l,d,u,g,p,v,m,b,$,k]),{draftColorIndex:X,draftColorValue:J,startAddDraft:dr,updateDraftColor:j,cancelDraftColor:er,saveDraftColor:pr,saveCurrentColor:xr}=Bg({palette:Z,isSelectionControlled:T,onAddColor:m,emitColorChange:M,setLocalColors:D,setUncontrolledSelectedColor:W,initialColorValue:gr,shouldOpenPopover:!y,notifyAddColorToggle:O,showPopover:N,hidePopover:L}),Jr=(0,h.useMemo)(()=>S.map((Q,Sr)=>X===Sr&&J!=null?J:Q),[X,J,S]),ga=(0,h.useMemo)(()=>{if(X==null||J==null||ar==null||X<0||X>=or.length)return or;const Q=[...or];return Q[X]=xl(J,ar),Q},[or,X,J,ar]),xa=(0,h.useMemo)(()=>ci(J),[J]),V=(0,h.useMemo)(()=>X==null||xa==null?!1:ti(S,J,{skipIndex:X}),[X,xa,J,S]),Lr=(0,h.useCallback)((Q,Sr)=>{if(!Q?.colorData)return;
4963const Qr={color:Q.colorData.value,name:Q.colorData.name};if(Q.action==="remove"&&d){D(ra=>{const Qa=ra.filter(wo=>!bn(wo,Qr));return Qa.length===ra.length?ra:Qa}),b?.(Z,Qr,Sr);return}H(Qr),v?.({...Q,source:"swatch",shouldClosePicker:!1},Sr),M(Q.colorData)},[d,M,b,v,Z,H]),hr=(0,h.useCallback)(Q=>X===Q&&J!=null,[X,J]);(0,h.useEffect)(()=>{!y||X==null||C==null||j(C)},[C,X,y,j]);const Mr=(0,h.useCallback)(Q=>{const Sr=Q?.newState==="open";F(Sr),k?.(a,Sr)},[a,k]),Ta=(0,h.useCallback)(Q=>{const Sr=C??$e.color;xr(Sr,Q)},[C,xr]),Ce=(0,h.useCallback)(Q=>{Q.key!=="Escape"||!B||er(Q)},[er,B]),ue=!C||y&&!B&&nr,ko=y&&B?"Cancel":y?"Add Current Color":"Add Color",Ge=y||!B;let Ja=Ta;return y||(Ja=B?er:dr),(0,n.jsxs)("div",{..._,"arc-color-palette":a,"is-adding-color":B?"":void 0,children:[o&&e&&(0,n.jsx)("header",{"arc-color-palette-header":"",children:typeof e=="string"?(0,n.jsx)("strong",{children:e}):(0,n.jsx)(Yr,{...e,layout:"inline",isStrong:!0})}),(0,n.jsxs)("div",{"arc-color-palette-set":"",id:z,children:[Jr?.map((Q,Sr)=>(0,h.createElement)(ii,{...p,key:`${$a(Q)}-${Sr}`,color:Q,kind:"swatch",isDraft:hr(Sr),isSelected:ga[Sr],canRemoveColor:d&&!(y&&hr(Sr)),contrastBgColor:u,tooltip:y&&hr(Sr)?"Save Color":void 0,onClick:y&&hr(Sr)?pr:Lr})),l&&Ge&&(0,n.jsx)(kr,{"arc-add-color":"",popoverTarget:x,icon:"fa-regular fa-plus",layout:"icon",shape:"circle",size:"sm",hierarchy:"secondary",tooltip:ko,onClick:Ja,isDisabled:ue})]}),l&&!y&&(0,n.jsx)(Ve,{mode:"add",heading:"",color:J??$e.color,format:c,onChange:Q=>j(Q.value),popoverProps:{id:x,popover:"manual",anchorAt:"right-center",alternateAnchorId:z,hidePopoverButton:!0,tryFallbacks:!0,hasTail:!0,onToggle:Mr,onKeyDown:Ce,footerSlot:(0,n.jsxs)($n,{"arc-color-picker-button-bar":"",children:[(0,n.jsx)(kr,{"arc-color-picker-button":"cancel",text:"Cancel",hierarchy:"secondary",size:"sm",onClick:er}),(0,n.jsx)(kr,{"arc-color-picker-button":"save",text:"Save",size:"sm",onClick:pr,isDisabled:V})]})}}),r&&(0,n.jsx)("footer",{"arc-color-palette-footer":"",children:r})]})};yn.addColor=Lg,yn.removeColor=Rg,ir("ArcColorPalette",Ug);const Wg=(0,h.memo)(function({palette:a,canAddColor:e,canRemoveColor:o,activePaletteColor:t,contrastBgColor:i,onSwatchClick:c,onAddColor:l,onRemoveColor:d}){const u=(0,h.useCallback)((g,p)=>{c(g,p,a.id)},[a.id,c]);return(0,n.jsx)(yn,{...a,canAddColor:e??a.canAddColor,canRemoveColor:o,addColorFlow:"embedded",activeColor:t,contrastBgColor:i,onAddColor:l,onRemoveColor:d,onSwatchClick:u})}),Il=({palettes:r=[],canAddColor:a,canRemoveColor:e,activePaletteColor:o,contrastBgColor:t,selectedNameRef:i,hsvRef:c,popoverId:l,onAddColor:d,onRemoveColor:u,commitLocalHsv:g,...p})=>{const v=(0,h.useRef)(r);v.current=r;const m=(0,h.useCallback)(($,k,_)=>{const y=v.current.find(x=>x.id===_);if(!y)return;if(k?.preventDefault(),k?.stopPropagation(),$?.action==="remove"&&(e??y.canRemoveColor)){y.onSwatchClick?.($,k);return}$?.colorData&&(i.current=$.colorData.name,g($.colorData.hsv));try{y.onSwatchClick?.($,k)}catch{}if(($?.shouldClosePicker??!0)&&l)try{te.handlePopover(l,"hide")}catch{}},[e,g,l,i]),b=(0,h.useCallback)(($,k,_)=>{d?.($,k,_)},[d]);return r.length?(0,n.jsx)("div",{...p,"arc-color-palettes":"","arc-color-picker-section":"palettes",children:r.map($=>(0,n.jsx)(Wg,{palette:$,canAddColor:a,canRemoveColor:!!(e??$.canRemoveColor),activePaletteColor:o,contrastBgColor:t,onSwatchClick:m,onAddColor:b,onRemoveColor:u},$.id))}):null},jl=1,Ll="Please enter six hex digits \u2192 A1B2C3",Kg="Use six hex digits (RGB only). Opacity is not editable in this picker.",Gg=/^[0-9A-Fa-f]{3}$/,Yg=/^[0-9A-Fa-f]{4}$/,qg="[0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8}",Zg="[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}",Xg=0,Jg=255,be=r=>r.replace(/#/g,"").trim(),Rl=r=>r.length===3?`${r[0]}${r[0]}${r[1]}${r[1]}${r[2]}${r[2]}`:r,ct=r=>Sa({...r,a:1},!1).replace(/^#/,""),Qg=r=>Math.min(Jg,Math.max(Xg,Math.round(r))),Pl=r=>{if(Gg.test(r))return{kind:"three",expanded:Rl(r)};if(Yg.test(r)){const a=_r(`#${r}`);if(a)return{kind:"four",shorthand:r,expanded:ct(a),alphaPercent:Math.round(a.a*100)}}return null},rv=r=>r?.kind==="three"?`Please enter six hex digits \u2192 ${r.expanded.toUpperCase()}.`:r?.kind==="four"?`Change to \u2192 #${r.expanded.toUpperCase()} at ${r.alphaPercent}% opacity?`:Ll,av=(r,a,e)=>{const o=be(r),t=Pl(o),i=o.length>0&&(!e&&o.length===8||!a&&o.length!==6&&o.length!==8||_r(`#${o}`)===null),l=!a&&o.length>0&&o.length!==6&&o.length!==8||!e&&o.length===8?rv(t):Ll,d=!e&&o.length===8?Kg:l;let u="Apply expanded six-digit hex";return t?.kind==="four"?u=`Apply #${t.expanded.toUpperCase()} and ${t.alphaPercent}% opacity`:t?.kind==="three"&&(u=`Apply expanded hex ${t.expanded.toUpperCase()}`),{isInvalid:i,errorAid:{tooltip:d,ariaLabel:u,fix:t}}},Ml=(r,a,e)=>{const o=_r(`#${r}`);o&&(a(r,{applyHexAlpha:!0}),e(ct(o)))},ev=(r,a,e,o)=>{if(a){Ml(r,e,o);return}const t=_r(`#${r}`);if(t){const i=ct(t);o(i),e(i)}},ov=(r,a,e,o)=>{if(a)Ml(r,e,o);else{const t=r.slice(0,6);o(t),e(t)}},tv=(r,a,e,o)=>{r.kind==="three"?(e(r.expanded),a(r.expanded)):o?(a(r.shorthand,{applyHexAlpha:!0}),e(r.expanded)):(e(r.expanded),a(r.expanded))},nv=r=>{const a=be(r);return a.length>6?a.slice(0,6):r},cv=(r,a,e,o,t)=>{const i=_r(`#${r}`)??a,c={...i,[e]:Qg(i[e]+o*t)};return ct(c)},iv=(r,a,e,o)=>{if(!e&&(r.length===8||o?.applyHexAlpha===!0))return!1;if(!a&&r.length>0){const t=r.length===6||r.length===8,i=o?.applyHexAlpha===!0&&r.length===4;if(!t&&!i)return!1}return!0},sv=(r,a,e)=>{const o=_r(`#${r}`);return o?e?.applyHexAlpha===!0&&(r.length===4||r.length===8)?o:{...o,a:a.a}:null},fo=r=>(0,n.jsx)(n.Fragment,{children:!!r.children&&(0,n.jsx)("span",{...r})}),lv=r=>(0,n.jsx)(n.Fragment,{children:!!r.children&&(0,n.jsx)("span",{...r})}),si=({children:r,...a})=>(0,n.jsx)(n.Fragment,{children:!!r&&(0,n.jsx)(me,{...a,children:(0,n.jsx)(Oe,{children:r})})}),dv=({children:r,layout:a,size:e,variant:o,tag:t="span",...i})=>
4963(0,n.jsx)(t,{...i,"data-layout":a,"data-size":e,"data-variant":o,children:r}),uv=()=>(0,n.jsx)("span",{"input-element":"spacer"}),hv=r=>(0,n.jsx)(fo,{...r,"input-element":"header"}),gv=r=>(0,n.jsx)(si,{...r,"input-element":"header-label"}),vv=r=>(0,n.jsx)(fo,{...r,"input-element":"header-slot"}),pv=r=>(0,n.jsx)(fo,{...r,"input-element":"body"}),fv=r=>(0,n.jsx)(si,{...r,"input-element":"input-prefix"}),mv=r=>(0,n.jsx)(si,{...r,"input-element":"input-suffix"}),bv=r=>(0,n.jsx)(lv,{...r,"input-element":"input-action"}),$v=r=>(0,n.jsx)(fo,{...r,"input-element":"footer"}),yv=r=>(0,n.jsx)(fo,{...r,"input-element":"footer-caption"}),xv=r=>(0,n.jsx)(fo,{...r,"input-element":"footer-slot"}),kv=r=>a=>{if(!(a?.target instanceof HTMLInputElement))return;const e={name:a?.target?.name,value:a?.target?.value};r?.(e,a)},br=s`--arcâ¢input`,ie=s`${br}â¢fg`,xn=s`${ie}â¢disabled`,kn=s`${ie}â¢readonly`,wn=s`${ie}â¢invalid`,za=s`${br}â¢bg`,Cn=s`${za}â¢hover`,An=s`${za}â¢disabled`,Sn=s`${za}â¢readonly`,zn=s`${za}â¢invalid`,wv=s`${br}â¢align`,Bl=s`${wv}â¢items`,Cv=s`${br}â¢flex`,Av=s`${Cv}â¢direction`,Dl=s`${br}
4963â¢header`,En=s`${Dl}â¢labelâ¢color`,Ol=s`${Dl}â¢slotâ¢color`,Fl=s`${br}â¢footer`,li=s`${Fl}â¢captionâ¢color`,Nl=s`${Fl}â¢slotâ¢color`,di=s`${br}â¢border`,ui=s`${di}â¢radius`,Sv=s`${di}â¢width`,Ea=s`${di}â¢color`,hi=s`${br}â¢outline`,Hl=s`${hi}â¢size`,Vl=s`${hi}â¢offset`,Ul=s`${hi}â¢color`,it=s`${br}â¢height`,zv=s`${br}â¢padding`,_n=s`${zv}â¢inline`,gi=s`${_n}â¢end`,Wl=s`${br}â¢slot`,vi=s`${Wl}â¢gap`,pi=s`${Wl}â¢fontâ¢size`,Tn=s`${Ea}â¢hover`,In=s`${Ea}â¢disabled`,fi=s`${Ea}â¢readonly`,st=s`${Ea}â¢invalid`,Ev=s`${br}â¢actionâ¢maxâ¢height`,Kl=s`${br}â¢gap`,mi=s`${br}â¢fontâ¢size`,_v=s` 4964@layer arc-components { 4965 4966/* --arc[-internal, -modifier, -computed] ⢠NOT FOR CONSUMER USE ---⢠*/ 4967 4968[arc-input] { 4969 4970 /* SIZES ---------------------------------------------------------⢠*/ 4971 4972 &[data-size=xl] { 4973 ${it}: var(${f}â¢48); 4974 ${gi}: var(${E}â¢8); 4975 } 4976 4977 &:is([data-size=lg], [data-size=inherit]) { /* @default ⢠base size at 100% */ 4978 ${it}: var(${f}â¢40); 4979 } 4980 4981 &[data-size=md] { 4982 ${it}: var(${f}â¢32); 4983 ${ui}: var(${f}â¢4); 4984 ${Ev}: 80%; 4985 } 4986 4987 &:has(select) { 4988 ${_n}: 0; 4989 ${Bl}: stretch; 4990 } 4991 4992 & { 4993 /* Defaults -------------------------⢠*/ 4994 ${mi}: var(${f}â¢14); 4995 ${pi}: var(${f}â¢12); 4996 4997 ${it}: var(${f}â¢40); /* default size */ 4998 ${Kl}: var(${E}â¢6); 4999 ${vi}: var(${E}â¢4); 5000 ${_n}: var(${E}â¢12); 5001 ${gi}: var(${E}â¢3); 5002 ${ui}: var(${f}â¢8); 5003 ${Sv}: var(${f}â¢1); 5004 ${Hl}: var(${f}â¢2); 5005 ${Vl}: var(${f}â¢1m); 5006 5007 /* Inter-Component Communication -------------------------------⢠*/ 5008 5009 --arc-label-cursor: var(${br}â¢cursor, inherit); /* ArcLabel ⢠cursor syncing */ 5010 5011 &[data-size=inherit] { 5012 ${mi}: 0.875em; /* 14px at 100% */ 5013 ${pi}: 0.75em; /* 12px at 100% */ 5014 } 5015 5016 &[data-size=md] { 5017 /* Inter-Component Communication -------------------------------⢠*/ 5018 --arc-button-border-radius: var(--arc-border-radius-sm); 5019 --arc-button-outline-offset: 0; 5020 --arc-button-font-size: 0.8em; /* ArcButton ⢠the input size 'md' needs 5021 a slightly smaller "input-action" button 5022 footprint; there's no direct access to 5023 ArcButton['size'] prop in this context */ 5024 } 5025 } 5026 5027 /* VARIANTS ------------------------------------------------------⢠*/ 5028 5029 & { 5030 ${ie}: var(--arc-color-fg-primary); 5031 ${En}: inherit; 5032 ${Ol}: var(--arc-color-fg-secondary); 5033 ${li}: var(--arc-color-fg-secondary); 5034 ${Nl}: var(--arc-color-fg-secondary); 5035 5036 &[data-variant=outline] { /* @default */ 5037 ${za}: var(--arc-color-bg-primary); 5038 ${Cn}: var(--arc-color-bg-primary); 5039 ${Ea}: var(--arc-color-border-mid); 5040 ${Tn}: var(--arc-color-border-heavy); 5041 5042 ${xn}: var(--arc-color-fg-disabled); 5043 ${An}: var(--arc-color-bg-secondary); 5044 ${In}: var(--arc-color-border-mid); 5045 5046 ${kn}: var(--arc-color-fg-primary); 5047 ${Sn}: var(--arc-color-bg-disabled); 5048 ${fi}: var(--arc-color-border-mid); 5049 5050 ${wn}: var(--arc-color-fg-critical-mid); 5051 ${zn}: var(--arc-color-bg-primary); 5052 ${st}: var(--arc-color-fg-critical-mid); 5053 } 5054 5055 &[data-variant=solid] { 5056 ${za}: var(--arc-color-bg-secondary); 5057 ${Cn}: var(--arc-color-bg-hover-default); 5058 ${Ea}: transparent; 5059 ${Tn}: var(--arc-color-border-stark); 5060 5061 ${wn}: var(--arc-color-fg-critical-mid); 5062 ${zn}: var(--arc-color-bg-critical-muted); 5063 ${st}: transparent; 5064 5065 ${xn}: var(--arc-color-fg-disabled); 5066 ${An}: var(--arc-color-bg-disabled); 5067 ${In}: transparent; 5068 5069 ${kn}: var(--arc-color-fg-primary); 5070 ${Sn}: var(--arc-color-bg-disabled); 5071 ${st}: var(--arc-color-fg-critical-mid); 5072 } 5073 5074 &[data-variant=plain] { 5075 ${za}: transparent; 5076 ${Cn}: var(--arc-color-bg-hover-default); 5077 ${Ea}: transparent; 5078 ${Tn}: transparent; 5079 5080 ${wn}: var(--arc-color-fg-critical-mid); 5081 ${zn}: transparent; 5082 ${st}: var(--arc-color-fg-critical-mid); 5083 5084 ${xn}: var(--arc-color-fg-disabled); 5085 ${An}: transparent; 5086 ${In}: transparent; 5087 5088 ${kn}
5088: var(--arc-color-fg-primary); 5089 ${Sn}: var(--arc-color-bg-disabled); 5090 ${fi}: transparent; 5091 } 5092 } 5093 5094 /* STATES --------------------------------------------------------⢠*/ 5095 5096 &:not(:has( 5097 input:read-only, 5098 input:disabled, 5099 select[data-readonly], 5100 select:disabled 5101 )) { 5102 5103 &:has(select) { 5104 ${br}â¢cursor: pointer; 5105 } 5106 5107 &:is( 5108 :hover, 5109 [data-simulate=hover] 5110 ) { 5111 ${Ea}: var(--arc-input-border-color-hover, var(${Tn})); 5112 ${za}: var(--arc-input-background-hover, var(${Cn})); 5113 } 5114 5115 &:has([input-element=body]) { 5116 &:is( 5117 :focus-within, 5118 [data-simulate=focus], 5119 [data-simulate=active], 5120 :has(:focus, :focus-visible, :active) 5121 ) { 5122 ${Ul}: var(--arc-color-border-focus); 5123 } 5124 } 5125 } 5126 5127 &:has(input:read-only, select[data-readonly]) { 5128 ${br}â¢cursor: default; 5129 ${ie}: var(${kn}); 5130 ${za}: var(${Sn}); 5131 ${Ea}: var(${fi}); 5132 } 5133 5134 &:has(input:disabled, select:disabled) { 5135 ${br}â¢cursor: not-allowed; 5136 ${ie}: var(${xn}); 5137 ${za}: var(${An}); 5138 ${Ea}: var(${In}); 5139 ${En}: var(--arc-color-fg-primary); 5140 } 5141 5142 &[data-simulate=invalid], 5143 &:has( 5144 input:user-invalid:not(:focus), 5145 select:user-invalid:not(:focus) 5146 ) { 5147 ${za}: var(${zn}); 5148 ${En}: var(${ie}); 5149 ${Ea}: var(${st}); 5150 ${li}: var(${wn}); 5151 } 5152 5153 /* LAYOUTS -------------------------------------------------------⢠*/ 5154 5155 &[data-layout=fill] { /* @default */ 5156 ${br}â¢display: flex; 5157 } 5158 5159 &[data-layout=hug] { 5160 ${br}â¢display: inline-flex; 5161 } 5162 5163 & { 5164 ${br}â¢border: var(--arc-border-width-sm) solid var(${Ea}); 5165 ${br}â¢outline: var(${Hl}) solid var(${Ul}, transparent); 5166 } 5167} 5168 5169[arc-input]:not([hidden]) { 5170 display: var(${br}â¢display, flex); 5171 flex-direction: var(${Av}, column); 5172 gap: var(${vi}); 5173 color: var(--arc-input-color, var(${ie})); 5174 5175 :is([input-element=header], [input-element=footer]) { 5176 display: flex; 5177 justify-content: space-between; 5178 font-size: var(--arc-input-slot-font-size, var(${pi})); 5179 gap: var(${vi}); 5180 } 5181 5182 [input-element=spacer] { 5183 display: safe flex-end; 5184 } 5185 5186 [input-element=header] { 5187 align-items: safe flex-end; 5188 } 5189 5190 [input-element=header-label] { 5191 flex: 1; 5192 color: var(--arc-input-header-label-color, var(${En})); 5193 font-weight: var(--arc-input-header-label-font-weight, var(--arc-font-weight-600)); 5194 } 5195 5196 [input-element=header-slot] { 5197 color: var(--arc-input-header-slot-color, var(${Ol})); 5198 min-width: var(--arc-input-header-slot-min-width, fit-content); 5199 } 5200 5201 [input-element=footer] { 5202 align-items: baseline; 5203 } 5204 5205 [input-element=footer-caption] { 5206 flex: 1; 5207 color: var(--arc-input-footer-caption-color, var(${li})); 5208 } 5209 5210 [input-element=footer-slot] { 5211 color: var(--arc-input-footer-slot-color, var(${Nl})); 5212 min-width: var(--arc-input-footer-slot-min-width, fit-content); 5213 } 5214 5215 [input-element=body] { 5216 flex: none; 5217 display: flex; 5218 align-items: var(${Bl}, center); 5219 gap: var(--arc-input-gap, var(${Kl})); 5220 height: var(${it}); 5221 font-size: var(${mi}); 5222 5223 color: var(--arc-input-color, var(${ie})); 5224 background-color: var(--arc-input-background, var(${za})); 5225 border: var(--arc-input-border, var(${br}â¢border)); 5226 border-radius: var(--arc-input-border-radius, var(${ui})); 5227 outline: var(${br}â¢outline, none); 5228 outline-offset: var(${Vl}); 5229 5230 transition-property: border, background, color, height; 5231 transition-duration: 200ms; 5232 transition-timing-function: ease-out; 5233 5234 cursor: var(${br}â¢cursor, unset); 5235 5236 padding-inline: var(--arc-input-padding-inline, var(${_n})); 5237 5238 &:has([input-element=input-action]) { 5239 padding-inline-end: var(${gi}); 5240 } 5241 5242 input { 5243 cursor: inherit; 5244 appearance: none; 5245 align-self: stretch; 5246 flex: 1; 5247 font: inherit; 5248 color: inherit; 5249 border: var(--arc-border-width-sm) solid transparent; 5250 background: transparent; 5251 padding: 0; 5252 margin: 0; 5253 outline: none; 5254 line-height: normal; 5255 width: var(--arc-input-width, 100%); 5256 min-width: var(--arc-input-min-width, 1em); 5257 max-width: var(--arc-input-max-width, 100%); 5258 text-align: var(--arc-input-text-align, unset); 5259 5260 &[arc-input-type=search]::-webkit-search-cancel-button { 5261 appearance: none; 5262 display: none; 5263 } 5264 } 5265 } 5266 5267 [input-element=input-prefix] { 5268 flex: none; 5269 opacity: var(--arc-input-prefix-opacity, unset); 5270 } 5271 5272 [input-element=input-suffix] { 5273 flex: none; 5274 opacity: var(--arc-input-suffix-opacity, var(--arc-alpha-40)); 5275 } 5276 5277 [input-element=input] { 5278 flex: 1; 5279 display: flex; 5280 } 5281 5282 [input-element=input-action] { 5283 flex: none; 5284 cursor: inherit;
5285 align-self: stretch; 5286 display: flex; 5287 align-items: center; 5288 justify-content: center; 5289 5290 button { 5291 max-height: var(${br}â¢actionâ¢maxâ¢height, unset); 5292 } 5293 } 5294} 5295 5296} 5297`,Tv={onChangeHandler:kv,Wrapper:dv,Spacer:uv,Header:hv,HeaderLabel:gv,HeaderSlot:vv,InputBody:pv,InputPrefix:fv,InputSuffix:mv,InputAction:bv,Footer:$v,FooterCaption:yv,FooterSlot:xv};ir("ArcInput",_v);const Ar=Tv,Iv="[input-element=body]",jv=100;function Lv({inputRef:r,onChange:a,enabled:e,deltaPerStep:o=jv}){const t=(0,h.useRef)(a);t.current=a,(0,h.useEffect)(()=>{if(!e||o<=0)return;let i=0;const c=()=>r.current,l=()=>{const b=c()?.closest(Iv);return b instanceof HTMLElement?b:null},d=(m,b)=>{const $=t.current;if(!$)return;const k={name:m.name,value:b};$(k,{target:m,currentTarget:m})},u=()=>{i=0},g=m=>{const b=c();if(!b||document.activeElement!==b||b.type!=="number"||b.disabled||b.readOnly)return;m.preventDefault(),m.stopPropagation();const $=Number(b.step)||1,k=Number(b.min),_=Number(b.max),y=Number.isFinite(k)?k:void 0,z=Number.isFinite(_)?_:void 0;let x=Number(b.value);if(!Number.isFinite(x))return;i+=m.deltaY;const S=o,D=()=>{const T=Math.max(y??-1/0,x-$);return T===x?!1:(x=T,d(b,String(T)),!0)},B=()=>{const T=Math.min(z??1/0,x+$);return T===x?!1:(x=T,d(b,String(T)),!0)};for(;i>=S;){if(!D()){i=0;break}i-=S}for(;i<=-S;){if(!B()){i=0;break}i+=S}},p=l(),v=c();if(!(!p||!v||v.type!=="number"))return v.addEventListener("blur",u),p.addEventListener("wheel",g,{passive:!1}),()=>{v.removeEventListener("blur",u),p.removeEventListener("wheel",g)}},[e,o,r])}const bi=q(Ia,["fill","hug"]),$i=q(aa,["inherit","xl","lg","md"]),Gl=q(zr,["outline","solid","plain"]),Rv=bi,Pv=$i,Mv=q(Gl,["outline","solid"]),Bv=["text","number","password","email","url"],jn=(0,h.forwardRef)(({layout:r="hug",size:a="inherit",variant:e="outline",inputProps:o,headerLabel:t,headerSlot:i,inputPrefix:c,inputAction:l,inputSuffix:d,footerCaption:u,footerSlot:g,numberInputWheel:p,...v},m)=>{const{id:b,onChange:$,...k}=o,_="arc-search"in v,y=_?"search":k?.type||"text",z=k?.disabled||void 0,x=k?.readOnly||void 0,S=k?.required||void 0,D=!!(t||i),B=!!(u||g),F=(0,h.useRef)(null),T=(0,h.useCallback)(C=>{F.current=C,La(m,C)},[m]);return Lv({inputRef:F,onChange:$,enabled:y==="number"&&p!==!1,...typeof p=="object"&&typeof p.deltaPerStep=="number"&&{deltaPerStep:p.deltaPerStep}}),(0,n.jsxs)(Ar.Wrapper,{...v,"arc-text-input":"","arc-input":y,layout:r,size:a,variant:e,children:[D&&(0,n.jsxs)(Ar.Header,{children:[(0,n.jsx)(Ar.HeaderLabel,{htmlFor:b,children:t}),!!i&&(0,n.jsx)(Ar.Spacer,{}),(0,n.jsx)(Ar.HeaderSlot,{children:i})]}),(0,n.jsxs)(Ar.InputBody,{children:[(0,n.jsx)(Ar.InputPrefix,{htmlFor:b,children:c}),(0,n.jsx)("input",{...k,..._?{type:y}:{},ref:T,id:b,"arc-input-type":y,onChange:Ar.onChangeHandler($),"aria-disabled":z,"aria-readonly":x,"aria-required":S}),(0,n.jsx)(Ar.InputSuffix,{htmlFor:b,children:d}),(0,n.jsx)(Ar.InputAction,{children:l})]}),B&&(0,n.jsxs)(Ar.Footer,{children:[(0,n.jsx)(Ar.FooterCaption,{children:u}),!!g&&(0,n.jsx)(Ar.Spacer,{}),(0,n.jsx)(Ar.FooterSlot,{children:g})]})]})}),Yl=({commitDraft:r,setIsEditing:a,onRevert:e})=>{const o=(0,h.useCallback)(()=>{a(!0)},[a]),t=(0,h.useCallback)(()=>{a(!1),r()},[a,r]),i=(0,h.useCallback)(c=>{if(c.key==="Enter"){c.preventDefault(),a(!1),r(),c.currentTarget.blur();return}c.key==="Escape"&&(c.preventDefault(),a(!1),e(),c.currentTarget.blur())},[a,r,e]);return{onFocus:o,onBlur:t,onKeyDown:i}},ql=({hsv:r,draftValue:a,label:e="Hex",showLabel:o=!0,setIsEditing:t,commitDraft:i,setDraftValue:c,expandHexShorthand:l=!1,hasAlphaTools:d=!0})=>{const u=Ir(void 0,"hex-input"),g=(0,h.useRef)(null),p=ct(Oa(r)),[v,m]=(0,h.useState)(!1),{isInvalid:b,errorAid:$}=(0,h.useMemo)(()=>av(a,l,d),[a,l,d]),{onFocus:k,onBlur:_,onKeyDown:y}=Yl({commitDraft:i,setIsEditing:t,onRevert:()=>c(p)}),z=(0,h.useCallback)(()=>{m(!0);const C=be(a);if(C.length===8){ov(C,d,i,c),_();return}if(l&&C.length===3){const W=Rl(C);c(W),i(W),t(!1),_();return}l&&C.length===4&&ev(C,d,i,c),_()},[a,l,d,c,i,t,_]),x=(0,h.useCallback)(C=>{if(C.key!=="ArrowUp"&&C.key!=="ArrowDown")return;const W=C.key==="ArrowUp"?jl:-jl,H=C.altKey?"r":C.metaKey?"g":"b",ar=C.shiftKey?16:1,K=cv(be(a),Oa(r),H,W,ar);c(K),i(K),C.preventDefault()},[a,r,c,i]),S=(0,h.useCallback)(C=>{if(x(C),!C.defaultPrevented){if(C.key==="Enter"){C.preventDefault(),t(!1),C.currentTarget.blur();return}C.key==="Escape"&&y(C)}},[x,t,y]),D=({value:C})=>{const W=C??"",H=d?W:nv(W);c(H),i(H)},B=b&&v,F=B?$.tooltip:void 0,T=(0,h.useCallback)(()=>{const C=Pl(be(a));C&&tv(C,i,c,d),queueMicrotask(()=>{g.current?.focus()})},[a,i,c,d]);
5297return(0,n.jsx)(jn,{ref:g,"arc-color-input":"hex",size:"md",variant:"solid",headerLabel:o?e:void 0,inputPrefix:"#",inputAction:B?(0,n.jsx)(kr,{layout:"icon",icon:"fa-solid fa-exclamation-circle",variant:"tertiary",tooltip:$.tooltip,"aria-label":$.ariaLabel,onClick:T}):void 0,inputProps:{id:u,placeholder:"...",value:a,pattern:d?qg:Zg,maxLength:d?8:6,title:F,"aria-invalid":B?!0:void 0,style:{textTransform:"uppercase",letterSpacing:"0.0625ch"},onFocus:k,onBlur:z,onKeyDown:S,onChange:D}})},yi=typeof window<"u"&&"EyeDropper"in window&&typeof window.EyeDropper=="function",Zl=yi?window.EyeDropper:void 0,Xl=Zl?new Zl:void 0,Jl=({onColorPicked:r,...a})=>{const[e,o]=(0,h.useState)(!1),t=async()=>{if(!(!yi||!Xl||e)){o(!0);try{const{sRGBHex:i}=await Xl.open();if(typeof r=="function"){const c=Oa(mn(i,"#000000"));r(Sa({...c,a:1},!1))}else console.warn("EyeDropper: onColorPicked prop was not provided")}catch(i){i instanceof DOMException&&i.name==="AbortError"||console.error("EyeDropper failed:",i)}finally{o(!1)}}};return yi?(0,n.jsx)("div",{"arc-color-eye-dropper":"",children:(0,n.jsx)(kr,{...a,onClick:t,layout:"icon",shape:"square",size:"md",variant:"common",hierarchy:"tertiary",icon:"fa-regular fa-eye-dropper",text:"Dropper",tooltip:"Pick a color"})}):null},xi=({id:r,kind:a,label:e,value:o,max:t,min:i=0,step:c=1,isDisabled:l=!1,showLabel:d=!1,showTooltip:u=!1,tooltipText:g,onChange:p})=>{const v=Ir(void 0,r),m=t>1&&Number.isInteger(c)&&c>=1?Math.round(o):o,b=G(m,i,t),$=b.toFixed(c.toString().split(".")[1]?.length??0),k=(0,h.useRef)(null),_=t-i,z=`${(_<=0?0:(b-i)/_)*100}%`,x=D=>{const B=D.currentTarget.valueAsNumber,F=Number.isFinite(B)?B:i;p(G(F,i,t))},S=(0,n.jsx)("input",{id:v,type:"range",min:i,max:t,step:c,value:$,disabled:l??void 0,onChange:x,"aria-label":e});return(0,n.jsxs)("div",{"arc-color-slider":a,"data-disabled":l??void 0,children:[d&&!!e&&(0,n.jsx)(me,{htmlFor:v,children:(0,n.jsx)("strong",{children:e})}),(0,n.jsx)("div",{"arc-color-surface":a,children:u?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("span",{ref:k,"aria-hidden":!0,style:{position:"absolute",left:z,top:"50%",transform:"translate(-50%, -50%)",width:1,height:1,pointerEvents:"none"}}),(0,n.jsx)(Jt,{alternateAnchor:k,text:g??$,scheme:"light",isStrong:!1,hasTail:!1,offset:11,children:S})]}):S})]})},Dv=196.6,Ov=(r,a)=>{const e=r.getContext("2d",{alpha:!1});if(!e)return;const{width:o,height:t}=r;if(!o||!t)return;const i=e.createImageData(o,t),c=i.data;let l=0;for(let d=0;d<t;d+=1){const u=1-(t<=1?0:d/(t-1));for(let g=0;g<o;g+=1){const p=o<=1?0:g/(o-1),v=Oa({h:a,s:p,v:u,a:1});c[l++]=Wr(v.r),c[l++]=Wr(v.g),c[l++]=Wr(v.b),c[l++]=255}}e.putImageData(i,0,0)},Fv=({value:r,label:a="Color Saturation and Value",step:e=.01,stepLarge:o=.1,isDisabled:t=!1,showLabel:i=!1,onChange:c})=>{const l=Ir(void 0,"color-field"),d=(0,h.useRef)(null),u=(0,h.useRef)(null),g=(0,h.useRef)(null),p=(0,h.useRef)(null),v=(0,h.useRef)(null),m=(0,h.useRef)(null),b=(0,h.useRef)(null),[$,k]=(0,h.useState)(!1),[_,y]=(0,h.useState)(null),z=G(r.saturation,0,1),x=G(r.value,0,1),S=Math.round(z*100),D=Math.round(x*100),B=(0,h.useMemo)(()=>{const M=r.hue;return typeof M=="number"&&Number.isFinite(M)?M:Dv},[r.hue]),F=(0,h.useMemo)(()=>ol(B),[B]),T=(0,h.useCallback)((M,O)=>{c({hue:B,saturation:G(M,0,1),value:G(O,0,1)})},[B,c]),C=(0,h.useCallback)((M,O,N)=>{const L=G((M-N.left)/N.width,0,1),Z=G((O-N.top)/N.height,0,1);T(L,1-Z)},[T]),W=(0,h.useCallback)(M=>{if(t)return;const{clientX:O,clientY:N,pointerId:L,currentTarget:Z}=M,X=Z.getBoundingClientRect();p.current=L,g.current=X,v.current={clientX:O,clientY:N},m.current=null,b.current=null,Z.focus(),Z.setPointerCapture(L),k(!0),C(O,N,X)},[t,C]),H=(0,h.useCallback)(M=>{if(t)return;const{clientX:O,clientY:N,currentTarget:L,pointerId:Z}=M;if(p.current!==Z)return;const X=g.current??L.getBoundingClientRect();if(M.shiftKey){const J=v.current;if(J){if(m.current===null){const pr=Math.abs(O-J.clientX),xr=Math.abs(N-J.clientY);m.current=pr>=xr?"s":"v",b.current={clientX:O,clientY:N}}const dr=b.current??J,j=m.current==="s"?O:dr.clientX,er=m.current==="v"?N:dr.clientY;C(j,er,X);return}}else m.current=null,b.current=null;C(O,N,X)},[t,C]),ar=(0,h.useCallback)(()=>{p.current=null,g.current=null,v.current=null,m.current=null,b.current=null,k(!1)},[]),K=(0,h.useCallback)(M=>
5297{if(t)return;const O=M.shiftKey?o:e;let N=z,L=x;switch(M.key){case"ArrowLeft":N=z-O;break;case"ArrowRight":N=z+O;break;case"ArrowUp":L=x+O;break;case"ArrowDown":L=x-O;break;case"Home":N=0,L=1;break;case"End":N=1,L=0;break;default:return}M.preventDefault(),T(N,L)},[t,e,o,T,z,x]),or=(0,h.useCallback)(M=>{if(t||!M.key.startsWith("Arrow"))return;const O=M.shiftKey?o:e,N=M.key==="ArrowLeft"||M.key==="ArrowDown"?-O:O;M.preventDefault(),T(z+N,x)},[t,e,o,T,z,x]),nr=(0,h.useCallback)(M=>{if(t||!M.key.startsWith("Arrow"))return;const O=M.shiftKey?o:e,N=M.key==="ArrowLeft"||M.key==="ArrowDown"?-O:O;M.preventDefault(),T(z,x+N)},[t,e,o,T,z,x]),gr=(0,h.useMemo)(()=>({"--js\u2022s":String(z),"--js\u2022v":String(1-x)}),[z,x]);return(0,h.useLayoutEffect)(()=>{const M=d.current,O=u.current;if(!M||!O)return;const N=()=>{const X=M.getBoundingClientRect(),J=Math.max(1,Math.round(X.width)),dr=Math.max(1,Math.round(X.height)),j=typeof window>"u"?1:Math.max(window.devicePixelRatio||1,1),er=Math.max(1,Math.round(J*j)),pr=Math.max(1,Math.round(dr*j));O.width!==er&&(O.width=er),O.height!==pr&&(O.height=pr),Ov(O,F)};N();const L=new ResizeObserver(()=>{N()});L.observe(M);const Z=()=>{N()};return O.addEventListener("contextrestored",Z),()=>{L.disconnect(),O.removeEventListener("contextrestored",Z)}},[F]),(0,n.jsxs)("div",{"arc-color-field":"","is-disabled":t?"":void 0,"is-interacting":$?"":void 0,"sr-focus":_??void 0,children:[i&&!!a&&(0,n.jsx)("label",{htmlFor:l,children:a}),(0,n.jsxs)("div",{id:l,ref:d,"arc-color-surface":"field",style:gr,tabIndex:t?-1:0,role:"application","aria-label":a,"aria-describedby":`${l}-readout`,onPointerDown:W,onPointerMove:H,onPointerUp:ar,onPointerCancel:ar,onKeyDown:K,children:[(0,n.jsx)("canvas",{ref:u,"arc-color-field-canvas":"","aria-hidden":"true"}),(0,n.jsx)("div",{"arc-color-field-thumb":"","aria-hidden":"true"}),(0,n.jsx)("div",{"arc-color-field-slice":"saturation","has-focus":_==="saturation"?"":void 0,"aria-hidden":"true"}),(0,n.jsx)("div",{"arc-color-field-slice":"value","has-focus":_==="value"?"":void 0,"aria-hidden":"true"})]}),(0,n.jsxs)("div",{"arc-color-field-sr":"","aria-hidden":!1,children:[(0,n.jsx)("div",{"arc-color-field-sr-slider":"saturation",role:"slider",tabIndex:t?-1:0,"aria-label":"Saturation","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":S,onKeyDown:or,onFocus:()=>y("saturation"),onBlur:()=>y(null)}),(0,n.jsx)("div",{"arc-color-field-sr-slider":"value",role:"slider",tabIndex:t?-1:0,"aria-label":"Value","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":D,onKeyDown:nr,onFocus:()=>y("value"),onBlur:()=>y(null)})]}),(0,n.jsxs)("div",{id:`${l}-readout`,"arc-color-field-readout":"","arc-color-field-sr":"",children:["Saturation ",S,"%. Value ",D,"%."]})]})},Nv=({hsv:r,draftValue:a,label:e="Opacity",showLabel:o=!1,setIsEditing:t,commitDraft:i,setDraftValue:c})=>{const l=Ir(void 0,"alpha-input"),{onFocus:d,onBlur:u,onKeyDown:g}=Yl({commitDraft:i,setIsEditing:t,onRevert:()=>c(go(r.a))}),p=({value:v})=>{const m=String(v??1);c(m),i(m)};return(0,n.jsx)(jn,{"arc-color-input":"alpha",size:"md",variant:"solid",inputSuffix:"%",headerLabel:o?e:void 0,numberInputWheel:{deltaPerStep:24},inputProps:{id:l,"aria-label":e,placeholder:"...",value:a,type:"number",min:0,max:100,step:1,onFocus:d,onBlur:u,onKeyDown:g,onChange:p}})},Ql=r=>Sa({...r,a:1},!1).replace(/^#/,""),Hv=()=>typeof window<"u"&&"EyeDropper"in window,rd=({color:r,hsv:a,isSimpleMode:e,selectedNameRef:o,hsvRef:t,commitLocalHsv:i,tools:c,expandHexShorthand:l,...d})=>{const u=(0,h.useRef)(!1),[g,p]=(0,h.useState)(()=>{const L=_r($a(r));return L?Ql(L):"000000"}),[v,m]=(0,h.useState)(go(a.a)),[b,$]=(0,h.useState)(!1),k=(0,h.useCallback)(L=>{o.current=void 0;const X={...t.current,...L};i(X)},[i,t,o]),_=(0,h.useCallback)(L=>k({s:L.saturation,v:L.value}),[k]),y=L=>{const Z=mn(L,"#000000");i(Z)},z=(0,h.useMemo)(()=>!c||c.includes("color-field"),[c]),x=(0,h.useMemo)(()=>!c||c.includes("hue-slider"),[c]),S=(0,h.useMemo)(()=>!c||c.includes("alpha-slider"),[c]),D=(0,h.useMemo)(()=>!c||c.includes("hex-input"),[c]),B=(0,h.useMemo)(()=>!c||c.includes("alpha-input"),[c]),F=(0,h.useMemo)(()=>!c||c.includes("eye-dropper")&&Hv(),[c]),T=(0,h.useMemo)(()=>S||B,[S,B]),C=(L,Z)=>{o.current=void 0;const X=be(L??g);
5297if(!iv(X,l??!1,T,Z))return;const J=Oa(t.current),dr=sv(X,J,Z);if(!dr||Zc(dr,J))return;const j=at(dr,t.current.h);i(j)},W=L=>{o.current=void 0;const Z=pl(L??v);Z!=null&&(k({a:Z}),m(go(Z)))},H=(0,h.useCallback)(L=>{p(be(L))},[]),ar=(0,h.useCallback)(L=>{m(L)},[]),K=(0,h.useCallback)(L=>{u.current=L},[]),or=(0,h.useCallback)(L=>{$(L),L&&m(go(t.current.a))},[t]);(0,h.useEffect)(()=>{if(u.current)return;const L=Oa(a),Z=Ql(L);p(X=>{if(X===Z)return X;if(!l){const J=be(X);if(J.length===3||J.length===4||J.length===8){const dr=_r(`#${J}`);if(dr){const j={...dr,a:L.a};if(Zc(j,L))return X}}}return Z})},[a,l]);const nr=(0,h.useMemo)(()=>b?v:go(a.a),[b,v,a.a]),gr=(0,h.useMemo)(()=>({hue:a.h,saturation:a.s,value:a.v}),[a]),M=(0,h.useMemo)(()=>G(Math.round(a.a*100),0,100),[a.a]),O=(0,h.useMemo)(()=>`${M.toString()}%`,[M]),N=(0,h.useMemo)(()=>`${Math.round(a.h).toString()}\xB0`,[a.h]);return(0,n.jsx)("div",{...d,"arc-color-tools":e?"simple":"","arc-color-picker-section":"tools",children:e?(0,n.jsxs)(n.Fragment,{children:[D&&(0,n.jsx)(ql,{hsv:a,draftValue:g,setIsEditing:K,commitDraft:C,setDraftValue:H,expandHexShorthand:l,hasAlphaTools:T}),F&&(0,n.jsx)(Jl,{onColorPicked:y}),S&&(0,n.jsx)(xi,{kind:"alpha",value:M,min:0,max:100,step:1,id:"alpha-slider",label:"Opacity",showLabel:!0,showTooltip:!0,tooltipText:O,onChange:L=>k({a:L/100})})]}):(0,n.jsxs)(n.Fragment,{children:[z&&(0,n.jsx)(Fv,{value:gr,onChange:_}),F&&(0,n.jsx)(Jl,{onColorPicked:y}),(x||S)&&(0,n.jsxs)("div",{"arc-color-sliders":"",children:[x&&(0,n.jsx)(xi,{kind:"hue",value:a.h,min:0,max:360,step:1,id:"hue-slider",label:"Hue",showLabel:!1,showTooltip:!0,tooltipText:`Hue: ${N}`,onChange:L=>k({h:L})}),S&&(0,n.jsx)(xi,{kind:"alpha",value:M,min:0,max:100,step:1,id:"alpha-slider",label:"Opacity",showLabel:!1,showTooltip:!0,tooltipText:`Opacity: ${O}`,onChange:L=>k({a:L/100})})]}),(D||B)&&(0,n.jsxs)("div",{"arc-color-inputs":"",children:[D&&(0,n.jsx)(ql,{hsv:a,draftValue:g,setIsEditing:K,commitDraft:C,setDraftValue:H,expandHexShorthand:l,hasAlphaTools:T}),B&&(0,n.jsx)(Nv,{hsv:a,showLabel:!D,draftValue:nr,setIsEditing:or,commitDraft:W,setDraftValue:ar})]})]})})},ad=({heading:r,showGoBack:a,goBackProps:e,...o})=>(0,n.jsx)(te,{...o,variant:"common","arc-color-picker-wrapper":"",showGoBack:a,goBackProps:e,headerSlot:!!r&&(0,n.jsx)(Yr,{...typeof r=="string"?{text:r}:r,"arc-color-picker-heading":"",overflow:"truncate",isStrong:!0})});ad.displayName="ArcColorPickerWrapper";const $e={mode:"normal",color:"#05aff0",format:"auto",heading:"Color",palettes:[]},Vv={icon:"fa-regular fa-paint-brush",text:"Color Picker",layout:"icon",shape:"circle",size:"md"},Uv=(r,a)=>r===void 0?!0:a?r.includes("hex-input")||r.includes("eye-dropper")||r.includes("alpha-slider"):r.includes("color-field")||r.includes("eye-dropper")||r.includes("hue-slider")||r.includes("alpha-slider")||r.includes("hex-input")||r.includes("alpha-input"),Ve=({children:r,mode:a=$e.mode,color:e=$e.color,format:o=$e.format,heading:t=$e.heading,tools:i,omitTools:c,isInline:l=!1,showGoBack:d=!1,goBackProps:u,palettes:g,popoverProps:p,onChange:v,onAddColor:m,onRemoveColor:b,expandHexShorthand:$,...k})=>{const _=(0,h.useMemo)(()=>$l(e).color,[e]),y=Ir(p?.id??void 0,"color-picker"),z=(0,h.useMemo)(()=>a==="simple",[a]),[x,S]=(0,h.useState)(()=>{const j=_r(_);return j?at(j):{h:0,s:0,v:0,a:1}}),D=(0,h.useRef)(x),B=(0,h.useRef)(_),F=(0,h.useRef)(null),T=(0,h.useRef)(void 0);(0,h.useEffect)(()=>{D.current=x},[x]);const C=(0,h.useCallback)(j=>{if(v)try{const er=He(j,{format:o});B.current=er.value,F.current=er.rgba,v({...er,name:T.current})}catch{}},[v,o]),W=(0,h.useCallback)(j=>{Jc(j,D.current)||(D.current=j,S(j),C(j))},[C]),H=(0,h.useMemo)(()=>{const j=z?"":"manual";return p?.popover??j},[p?.popover,z]),ar=(0,h.useMemo)(()=>{const j=Oa(x);return{"--js\u2022hue":`hsl(${x.h} 100% 50%)`,"--js\u2022hex":Sa({...j,a:1},!1),"--js\u2022rgb":Ne(j)}},[x]),K=(0,h.useMemo)(()=>Ne(Oa(x)),[x]),or=(0,h.useMemo)(()=>g?.map(j=>({...j,canAddColor:!1,canRemoveColor:!1}))??[],[g]),nr=(0,h.useRef)(null),gr=(0,h.useCallback)(()=>{const j=nr.current;if(!j)return;const er=z?'button[arc-color-chip="swatch"]:not(:disabled)':'[arc-color-surface="field"]';j.querySelector(er)?.focus()},[z]),M=p?.onToggle,O=(0,h.useCallback)(j=>{j?.newState==="open"&&setTimeout(gr,0),M?.(j)},[gr,M]);(0,h.useEffect)(()=>
5297{if(_!==B.current){B.current=_;try{const j=_r(_)??{r:0,g:0,b:0,a:1},er=F.current;if(er&&Xc(j,er))return;const pr=Oa(D.current);if(Xc(j,pr))return;T.current=void 0;const xr=at(j,D.current.h);if(Jc(xr,D.current))return;D.current=xr,S(xr)}catch{}}},[_]);const N=(0,h.useMemo)(()=>{const j=i===void 0?[...z?al:rl]:[...i];if(!c?.length)return j;const er=new Set(c);return j.filter(pr=>!er.has(pr))},[i,z,c]),L=(0,h.useMemo)(()=>Uv(N,z),[N,z]),Z=(0,h.useMemo)(()=>N.includes("palettes"),[N]),X=(0,n.jsxs)("div",{...k,ref:nr,"arc-color-picker":z?"simple":"","is-inline":l?"":void 0,style:ar,children:[z?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(Il,{palettes:Z?or:void 0,activePaletteColor:K,commitLocalHsv:W,selectedNameRef:T,hsvRef:D,popoverId:y,onAddColor:m??(()=>{}),onRemoveColor:b}),L&&(0,n.jsx)(rd,{color:_,hsv:x,hsvRef:D,selectedNameRef:T,commitLocalHsv:W,isSimpleMode:z,tools:N,expandHexShorthand:$})]}):(0,n.jsxs)(n.Fragment,{children:[L&&(0,n.jsx)(rd,{color:_,hsv:x,selectedNameRef:T,hsvRef:D,commitLocalHsv:W,tools:N,expandHexShorthand:$}),(0,n.jsx)(Il,{palettes:Z?g:void 0,activePaletteColor:K,commitLocalHsv:W,selectedNameRef:T,hsvRef:D,popoverId:y,onAddColor:m??(()=>{}),onRemoveColor:b,"has-divider":L?"top":void 0})]}),r&&(0,n.jsx)("div",{"arc-color-picker-section":"footer",children:r})]});if(l)return X;const J=p?.anchorProps??Vv,dr=z?{...p,anchorAt:p?.anchorAt??"bottom-center",showDismiss:!1,hasTail:!0}:{...p,heading:t??void 0,showGoBack:d??void 0,goBackProps:u??void 0,showHeaderDivider:!0,showFooterDivider:!0,isHeaderSticky:!0,isFooterSticky:!0};return(0,n.jsx)(ad,{...dr,popover:H,anchorProps:J,id:y,onToggle:O,children:X})};Ve.getColorAs=bl,Ve.getColorData=He,Ve.getContrastColor=ni,Ve.addColor=Pg,Ve.removeColor=Mg,ir("ArcColorPicker",Hg);const Wv=s`--arcâ¢menu`,ye=s`${Wv}â¢item`,Kv=s` 5298@layer arc-components { 5299 5300 [arc-menu] { 5301 ${ye}â¢gap: var(${f}â¢8); 5302 ${ye}â¢fg: inherit; 5303 ${ye}â¢bg: inherit; 5304 5305 font-size: var(--arc-menu-font-size, var(${f}â¢14)); 5306 list-style: none; 5307 line-height: normal; 5308 5309 display: var(--arc-menu-display, flex); 5310 flex-direction: var(--arc-menu-flex-direction, column); 5311 gap: var(--arc-menu-gap, var(${f}â¢2)); 5312 padding: var(--arc-menu-padding, var(${f}â¢2)); 5313 margin: var(--arc-menu-margin, 0); 5314 5315 outline: var(--arc-menu-outline, none); 5316 } 5317 5318 [arc-menu-item] { 5319 position: relative; 5320 display: var(--arc-menu-item-display, flex); 5321 flex-direction: var(--arc-menu-item-flex-direction, row); 5322 justify-content: var(--arc-menu-item-justify-content, space-between); 5323 align-items: var(--arc-menu-item-align-items, center); 5324 gap: var(--arc-menu-item-gap, var(${ye}â¢gap)); 5325 5326 background: var(--arc-menu-item-background, var(${ye}â¢bg)); 5327 color: var(--arc-menu-item-color, var(${ye}â¢fg)); 5328 padding: var(--arc-menu-item-padding, var(${f}â¢0)); 5329 border-radius: var(--arc-menu-item-border-radius, var(--arc-border-radius-md)); 5330 cursor: var(--arc-menu-item-cursor, default); 5331 outline: var(--arc-menu-item-outline, none); 5332 5333 transition: var(--arc-menu-item-transition, 120ms ease-out); 5334 5335 &:has(> [arc-button=custom]:not([is-disabled])):hover { 5336 ${ye}â¢bg: var(--arc-color-bg-hover-default); 5337 } 5338 5339 /* Communicates to ArcButton */ 5340 > [arc-button=custom] { 5341 --arc-button-flex: 1; 5342 --arc-button-font-size: 1em; 5343 --arc-button-border: none; 5344 --arc-button-outline-offset: var(${f}â¢2m); 5345 --arc-button-gap: var(--arc-menu-item-gap, var(${ye}â¢gap)); 5346 --arc-button-transition: none; 5347 --arc-button-opacity: var(--arc-menu-item-opacity, unset); 5348 5349 :is([arc-button-label], [arc-button-content]) { 5350 display: contents; 5351 } 5352 } 5353 } 5354 5355`;var Gv;const Yv=r=>[{test:()=>!!r.variant,value:r.variant},{test:()=>!!r.icon&&typeof r.subtext<"u",value:"icon-text-detail"},{test:()=>!!r.icon,value:"icon-text"},{test:()=>!!r.avatar&&typeof r.subtext<"u",value:"user-detail"},{test:()=>!!r.avatar,value:"user"},{test:()=>typeof r.subtext<"u",value:"text-detail"},{test:()=>!0,value:"text"}],qv={divider:"separator","section-label":"presentation","icon-text-detail":"menuitem","icon-text":"menuitem","user-detail":"menuitem",user:"menuitem","text-detail":"menuitem",text:"menuitem"},Ue={layout:"gutter",variant:"inherit",overflow:"truncate",gapSize:"md",size:"md"},Zv=({icon:r,onClick:a,...e})=>({icon:r&&typeof r=="string"?`${r.replace(" fa-fw","")} arc-fw`:r,itemProps:e}),ed=(r,a)=>{const{icon:e,itemProps:o}=Zv(a);switch(r){case"divider":return(0,n.jsx)("hr",{});case"section-label":return(0,n.jsx)(Yr,{...o,...Ue,icon:e,size:"sm",isStrong:!0});case"icon-text":return(0,n.jsx)(Yr,{...o,...Ue,icon:e});case"icon-text-detail":return(0,n.jsx)(Yr,{...o,...Ue,icon:e,isStrong:!0});case"text":return(0,n.jsx)(Yr,{...o,...Ue});case"text-detail":return(0,n.jsx)(Yr,{...o,...Ue,subtext:o.subtext??"sub",isStrong:!0});case"user":return(0,n.jsx)(pc,{...o,...Ue,size:"sm"});case"user-detail":return(0,n.jsx)(pc,{...o,...Ue,size:"md",isStrong:!0});default:return r}},tm=r=>Object.fromEntries(Gv.map(a=>[a,ed(a,r)])),Xv=(r,a,e,o)=>{if(o||e==="divider"||!!!(a.href||a.onClick))return;r.currentTarget.closest("[arc-popover]")?.hidePopover?.()},Jv=r=>r?.role??qv[Ln(r)]??"menuitem",Ln=r=>
5355Yv(r)?.find(({test:a})=>a())?.value??"text",od=r=>a=>ed(r,a),Qv=(r,a,e,o)=>{let t=1,i=r;const c=d=>d>=e?0:d+1,l=d=>d<=0?e:d-1;for(;t<=e;){const d=c(i),u=l(i),g={previous:a==="previous"?u:i,actual:i,next:a==="next"?d:i}[a];if(o(g))return g;i=g,t+=1}return-1},rp=({items:r,filterText:a,renderItem:e,isVisible:o,keepMenuOpen:t,...i})=>{const c=(0,h.useRef)(null),l=(0,h.useRef)([]),[d,u]=(0,h.useState)(-1),[g,p]=(0,h.useState)(!1);(0,h.useEffect)(()=>{o&&c.current&&(l.current=Array.from(c.current.querySelectorAll("[arc-button=custom]")))},[o,r]);const v=(0,h.useCallback)(x=>l.current[x]||null,[]),m=(0,h.useMemo)(()=>a?r.filter(x=>Object.values(x).some(S=>S===a)):r,[r,a]),b=Math.max(m.length-1,0),$=(0,h.useCallback)((x,S)=>{const D=Qv(x,S,b,v);u(D),v(D)?.focus()},[b,v]),k=(0,h.useCallback)((x,S)=>()=>{!g&&S&&$(x,"actual")},[g,$]),_={ArrowUp:x=>$(x,"previous"),ArrowDown:x=>$(x,"next"),Home:()=>$(0,"actual"),End:()=>$(b,"actual")},y=x=>S=>{Object.keys(_).includes(S.key)&&(p(!0),S.stopPropagation(),S.preventDefault(),_[S.key](x))},z=(0,h.useMemo)(()=>m.map((x,S)=>{const{itemId:D,role:B,keepMenuOpen:F,...T}=x,C=Ln(x)||"",W=B||Jv(x)||"menuitem",H=S===d;return(0,n.jsx)("li",{"arc-menu-item":C,role:W,onMouseEnter:k(S,!!(x.href||x.onClick)),onClick:ar=>Xv(ar,x,C,F??t),children:e?.(T,S,{filterText:a,isCurrent:H,itemId:D,role:B,keepMenuOpen:F??t})},D??S)}),[d,a,m,t,e,k]);return(0,h.useEffect)(()=>{o&&$(-1,"next")},[o,$]),(0,n.jsx)("ul",{...i,ref:c,"arc-menu":"",role:"menu",onKeyDown:y(d),onMouseLeave:()=>u(-1),onMouseMove:()=>p(!1),tabIndex:o?0:-1,children:z})};ir("ArcMenu",Kv);const td=r=>{const{startSlot:a,endSlot:e,onClick:o,href:t,target:i,containerProps:c,isDisabled:l,"aria-disabled":d,tooltip:u,...g}=r,p=Ln(g),v=(0,h.useMemo)(()=>od(p),[p]),m=d??l,b=p==="divider",$=!!(t||o),k=!b,_=k&&a?"":void 0,y=k&&e?"":void 0,z=(0,h.useMemo)(()=>({...c,onClick:o,tooltip:u,href:t,target:i}),[c,o,u,t,i]),x=(0,h.useMemo)(()=>({...c}),[c]);return $?(0,n.jsxs)(kr,{...z,"aria-disabled":m?"true":void 0,isDisabled:!!m,_isCustom:!0,"arc-dropdown-item":p??"","has-start-slot":_,"has-end-slot":y,children:[k&&a,(0,n.jsx)(v,{...g,"is-item-content":"interactive"}),k&&e]}):(0,n.jsxs)("div",{...x,"arc-dropdown-item":p??"","has-start-slot":_,"has-end-slot":y,children:[k&&a,(0,n.jsx)(v,{...g,"is-item-content":"inert"}),k&&e]})},ap=s`--arcâ¢dropdown`,ep=s`${ap}â¢menu`,Xr=s`${ep}â¢item`,op=s` 5356@layer arc-components { 5357 5358 /* ITEM SETUP ----------------------------------------------------⢠*/ 5359 5360 [arc-dropdown-item] { 5361 ${Xr}â¢padding: var(${E}â¢8) var(${E}â¢12); 5362 ${Xr}â¢minâ¢height: var(${f}â¢36); 5363 ${Xr}â¢gap: var(${E}â¢8); 5364 5365 &[arc-dropdown-item=text-detail] { 5366 ${Xr}â¢minâ¢height: var(${f}â¢48); 5367 } 5368 5369 &[arc-dropdown-item=section-label] { 5370 ${Xr}â¢minâ¢height: var(${f}â¢32); 5371 } 5372 5373 &[arc-dropdown-item=user] { 5374 ${Xr}â¢minâ¢height: var(${f}â¢40); 5375 5376 &:not([has-start-slot]) { 5377 ${Xr}â¢padding: var(${E}â¢8) var(${E}â¢12) var(${E}â¢8) var(${E}â¢10); 5378 } 5379 } 5380 5381 &[arc-dropdown-item=user-detail] { 5382 ${Xr}â¢minâ¢height: var(${f}â¢48); 5383 5384 &:not([has-start-slot]) { 5385 ${Xr}â¢padding: var(${E}â¢8) var(${E}â¢12) var(${E}â¢8) var(${E}â¢6); 5386 } 5387 } 5388 5389 &[arc-dropdown-item=divider] { 5390 ${Xr}â¢minâ¢height: var(${f}â¢8); 5391 ${Xr}â¢padding: 0; 5392 5393 hr { 5394 flex: 1; 5395 border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5396 height: 0; 5397 margin: 0; 5398 } 5399 } 5400 } 5401 5402 /* DROPDOWN ELEMENTS ---------------------------------------------⢠*/ 5403 5404 [arc-dropdown] { 5405 --arc-popover-width: var(--arc-dropdown-width, auto); 5406 --arc-popover-min-width: var(--arc-dropdown-min-width, 3em); 5407 --arc-popover-max-width: var(--arc-dropdown-max-width, 50em); 5408 --arc-popover-padding: var(--arc-dropdown-padding, 0); 5409 5410 --arc-menu-item-gap: var(${Xr}â¢gap); 5411 --arc-badge-align-self: center; 5412 --arc-badge-count-align-self: center; 5413 } 5414 5415 [arc-dropdown-item] { 5416 flex: 1; 5417 display: flex; 5418 align-items: center; 5419 gap: var(${Xr}â¢gap); 5420 text-align: start; 5421 min-height: var(${Xr}â¢minâ¢height); 5422 5423 &:not([arc-button]) { 5424 padding: var(${Xr}â¢padding); 5425 max-width: 100%; 5426 } 5427 5428 &[arc-button] { 5429 --arc-button-padding: var(${Xr}â¢padding); 5430 --arc-button-min-height: var(${f}â¢40); 5431 } 5432 5433 [is-item-content] { 5434 flex: 1; 5435 } 5436 } 5437 5438} 5439`,nd=(0,h.forwardRef)((r,a)=>(0,n.jsx)(Wo,{...r,ref:a,"arc-dropdown-menu-button":""})),ki=r=>{const{items:a,renderItem:e,keepMenuOpen:o,...t}=r,[i,c]=(0,h.useState)(!1),l=(0,h.useCallback)((...u)=>{const[g]=u;return e?.(...u)??(0,n.jsx)(td,{...g})},[e]),d=u=>{c(u.newState==="open"),r?.onToggle?.(u)};return(0,n.jsx)(te,{...t,"arc-dropdown":"",variant:"common",onToggle:d,children:(0,n.jsx)(rp,{"arc-dropdown-menu":"",items:a??[],renderItem:l,isVisible:i,keepMenuOpen:o})})};nd.displayName="ArcDropdownButton",ki.Button=nd,ki.Item=td,ir("ArcDropdownMenu",op);const cd=r=>(0,n.jsx)(kr,{...r,layout:"icon",size:"md",variant:"common",hierarchy:"tertiary"}),Rn=s`--arcâ¢link`,Ga=s`${Rn}â¢fg`,lt=s`${Ga}â¢hover`,dt=s`${Ga}â¢disabled`,wi=s`${Rn}â¢outline`,id=s`${wi}â¢size`,Ci=s`${wi}â¢offset`,tp=s`${Rn}â¢cursor`,ut=s`${Rn}â¢focusâ¢color`,np=s` 5440@layer arc-components { 5441${Dh} 5442 5443[arc-link] { 5444 5445 /* VARIANTS ------------------------------------------------------⢠*/ 5446 5447 &[data-variant=inherit] { /* @default */ 5448 ${Ga}: currentcolor; 5449 ${lt}: color-mix(in srgb, currentcolor, transparent 38.75%); 5450 ${dt}: color-mix(in srgb, currentcolor, transparent 70%); 5451 5452 ${ut}: var(--arc-color-border-focus); 5453 } 5454 5455 &[data-variant=primary] { 5456 ${Ga}: var(--arc-color-fg-primary); 5457 ${lt}: var(--arc-color-fg-secondary); 5458 ${dt}: var(--arc-color-fg-disabled); 5459 ${ut}: var(--arc-color-border-focus); 5460 } 5461 5462 &[data-variant=secondary] { 5463 ${Ga}: var(--arc-color-fg-secondary); 5464 ${lt}: var(--arc-color-fg-primary); 5465 ${dt}: var(--arc-color-fg-disabled); 5466 ${ut}: var(--arc-color-border-focus); 5467 } 5468 5469 /* @deprecated */ 5470 &[data-variant=inverse] { 5471 ${Ga}: var(--arc-color-fg-on-mono-inverse); 5472 ${lt}: var(--arc-link-fg-hover-inverse); 5473 ${dt}: var(--arc-link-fg-disabled-inverse); 5474 ${ut}: var(--arc-link-focus-disabled-inverse); 5475 } 5476 5477 & { 5478 ${id}: 0.125em; /* 2px */ 5479 ${Ci}: 0.0625em; /* 1px */ 5480 } 5481 5482 5483 /* STATES --------------------------------------------------------⢠*/ 5484 5485 &:not([data-is-disabled]):hover { 5486 ${Ga}: var(--arc-link-color-hover, var(${lt})); 5487 } 5488 5489 &:where(:focus, :focus-within):focus-visible { 5490 ${wi}: var(${id}) solid var(--arc-link-color-focus, var(${ut})); 5491 ${Ci}: var(${Ci}); 5492 5493 * { 5494 outline: none; 5495 } 5496 } 5497 5498 &[data-is-disabled] { 5499 ${Ga}: var(--arc-link-color-disabled, var(${dt})); 5500 ${tp}: not-allowed; 5501 } 5502 5503 5504 & { 5505 5506 /* Inter-Component Communication -------------------------------⢠*/ 5507 --arc-icon-color: var(--arc-link-color, var(${Ga})); /** ArcIcon color */ 5508 5509 } 5510 5511} 5512 5513 5514/* CORE STYLES ------------------------------------------------------ */ 5515 5516[arc-link] { 5517 color: var(--arc-link-color, var(${Ga})); 5518 border-radius: var(--arc-border-radius-sm); /* for focus outline */ 5519 text-decoration: var(--arc-link-text-decoration, underline); 5520 5521 [data-element=icon] { 5522 text-decoration: none; 5523 } 5524 5525 [data-element=text] { 5526 text-decoration: var(--arc-link-text-decoration, underline); 5527 text-decoration-color: currentcolor; 5528 } 5529} 5530 5531} 5532`,cp=q(zr,["inherit","primary","secondary","inverse"]),ip=({children:r,layout:a="gutter",size:e="inherit",variant:o="inherit",tag:t="a",href:i,icon:c,text:l,overflow:d,iconSize:u,gapSize:g,isFlipped:p,isDisabled:v,...m})=>
5532(0,n.jsx)(t,{...m,href:v?void 0:i,"arc-link":"","data-variant":o,"aria-disabled":v,"data-is-disabled":v?"":void 0,children:r||(0,n.jsx)(Yr,{icon:c,text:l,overflow:d,iconSize:u,gapSize:g,size:e,layout:a,isFlipped:p})});ir("ArcLink",np);const sp=[...re],lp=q(zr,["common"]),dp=q(zr,["common","critical"]),up=q(zr,["common","brand","info","success","warning","error","processing"]),hp=["auto","dark","light","none"],gp=["auto","all","top-bottom","left-right","left-right-top","left-right-bottom","top-bottom-left","top-bottom-right","none"],vp=q(aa,["xl","lg","md","sm","custom","fullscreen"]),pp=["cancel","escape","outside","button:dismiss","button:back","button:primary","button:secondary","button:tertiary","confirm:discard","confirm:cancel"],Ai=r=>r?.matches(":modal"),Si=(r,a)=>a.target===r,fp=(r,a)=>a.clientX<r.left||a.clientX>r.right||a.clientY<r.top||a.clientY>r.bottom,ht=({modalRef:r,shouldConfirm:a,setIsConfirming:e,onCloseOverride:o=void 0})=>(t,i)=>c=>{if(c?.preventDefault?.(),c?.stopPropagation?.(),!r?.current){i?.(c);return}if(o){o(t,c,r.current),i?.(c);return}if(a&&t!=="confirm:discard"){e?.(!0);return}r.current?.close(t),e?.(!1),i?.(c)},zi=({modalRef:r,shouldConfirm:a,setIsConfirming:e,onClose:o,onToggle:t})=>{(0,h.useEffect)(()=>{const i=r.current;if(!i)return;const c=d=>{Ai(i)&&Si(i,d)&&(a?(d.preventDefault(),d.stopPropagation(),e?.(!0)):o?.("outside",d))},l=d=>{Si(i,d)&&(e?.(!1),o?.(i.returnValue,d),t?.(!1,d))};return i.addEventListener("close",l),i.addEventListener("cancel",c),()=>{i.removeEventListener("close",l),i.removeEventListener("cancel",c)}},[r,a,e,o,t])},Ei=({modalRef:r,isOpen:a,isTopLayer:e})=>{(0,h.useEffect)(()=>{const o=r.current;o&&(a&&!o.open&&(e?o.showModal():o.show()),!a&&o.open&&o.close())},[a,e])},_i=({modalRef:r,isOpen:a,autoFocusId:e})=>{(0,h.useEffect)(()=>{const o=r.current;if(!o||!e||!a)return;const t=o.querySelector(`#${e}`);if(!t||!(t instanceof HTMLElement))return;const i=setTimeout(()=>{t.focus()},0);return()=>clearTimeout(i)},[r,e,a])},sd=(r,a)=>(typeof r.composedPath=="function"?r.composedPath():[]).includes(a)||r.target instanceof Node&&a.contains(r.target),ld=({modalRef:r,isOpen:a=!1,closeOnBackdrop:e=!1,attemptCloseModal:o})=>{(0,h.useEffect)(()=>{const t=r.current;if(!t||!a||!e||!Ai(t))return;let i=!1;const c=d=>{i=sd(d,t)},l=d=>{if(i||sd(d,t))return;const u=t.getBoundingClientRect();fp(u,d)&&o("outside")(d)};return document.documentElement?.addEventListener("pointerdown",c,{capture:!0}),document.documentElement?.addEventListener("click",l,{capture:!0}),()=>{document.documentElement?.removeEventListener("pointerdown",c,{capture:!0}),document.documentElement?.removeEventListener("click",l,{capture:!0})}},[r,o,a,e])},dd=({modalRef:r,isOpen:a=!1,closeOnEsc:e=!1,closedBy:o="closerequest",attemptCloseModal:t})=>{(0,h.useEffect)(()=>{const i=r.current;if(!i||!a||!e||!Ai(i))return;const c=l=>{if(l.key==="Escape"&&Si(i,l)){if(o==="none"){l.stopPropagation(),l.preventDefault();return}t("escape")(l)}};return document.addEventListener("keydown",c),()=>document.removeEventListener("keydown",c)},[r,t,a,e,o])},Ti=r=>(0,n.jsx)(kr,{"aria-label":"Dismiss",text:"Dismiss",...r,variant:"common",hierarchy:"tertiary",icon:"fa-regular fa-xmark-large",layout:"icon",shape:"square",size:"md"}),mp=r=>(0,n.jsx)(kr,{"arc-modal-go-back":"","aria-label":"Go Back",text:"Go Back",...r,variant:"common",hierarchy:"secondary",icon:"fa-regular fa-arrow-left",layout:"icon",shape:"square",size:"md"}),Pn=(0,h.forwardRef)(({inert:r,...a},e)=>(0,n.jsx)("div",{...a,ref:e,"arc-modal-content":"",inert:r}));Pn.displayName="ModalContent";const ud=({showDivider:r,...a})=>(0,n.jsx)("header",{...a,"arc-modal-header":"","has-divider":r?"":void 0}),bp=({glyph:r,variant:a="common"})=>(0,n.jsx)(n.Fragment,{children:r&&(0,n.jsx)(cr,{icon:r,"arc-modal-glyph":"","arc-icon-status":a})}),Ii=r=>{const{titleContent:a,TitleElement:e="h2",...o}=r;return(0,n.jsx)(n.Fragment,{children:a&&(0,n.jsx)(e,{...o,"arc-modal-title":"",children:typeof a=="string"?a:(0,n.jsx)(Yr,{...a})})})},$p=({message:r,...a})=>(0,n.jsx)(n.Fragment,{children:r&&(0,n.jsx)("p",{...a,"arc-modal-message":"",children:r})}),ji=({tag:r="section",padding:a,...e})=>(0,n.jsx)(r,{...e,"arc-modal-body":"","data-padding":a==="auto"?void 0:a}),Li=({showDivider:r,...a})=>(0,n.jsx)("footer",{...a,"arc-modal-footer":"","has-divider":r?"":void 0}),yp=r=>a=>{if(a.key==="Escape"){if(r==="none"){a.stopPropagation(),a.preventDefault();return}return"escape"}},Y=s`--arcâ¢modal`,gt=s`${Y}â¢layout`,xp=s`${Y}â¢header`,Mn=s`${Y}â¢body`,vt=s`${Y}â¢footer`,hd=s`${Y}â¢fg`,Bn=s`${Y}â¢bg`,Ya=s`${Y}
5532â¢backdrop`,xe=s`${Y}â¢scale`,mo=s`${xp}â¢padding`,yr=s`${Mn}â¢padding`,ke=s`${vt}â¢padding`,kp=s` 5533 ${Y}â¢fontâ¢size: var(${f}â¢14); 5534 ${Y}â¢gap: var(${E}â¢16); 5535 5536 ${gt}â¢rows: auto 1fr auto; 5537 ${gt}â¢columns: auto; 5538 5539 &:not(:has([arc-modal-footer])):has([arc-modal-header]) { 5540 ${gt}â¢rows: auto 1fr; 5541 } 5542 5543 &:not(:has([arc-modal-header])):has([arc-modal-footer]) { 5544 ${gt}â¢rows: 1fr auto; 5545 } 5546 5547 &:not(:has([arc-modal-header])):not(:has([arc-modal-footer])) { 5548 ${gt}â¢rows: auto; 5549 } 5550 5551 ${hd}: var(--arc-color-fg-primary); 5552 ${Bn}: var(--arc-color-bg-primary); 5553 ${Y}â¢border: none; 5554 ${Y}â¢borderâ¢radius: var(--arc-border-radius-lg); 5555 ${Y}â¢divider: var(${f}â¢1) solid var(--arc-color-border-mid); 5556 5557 ${Y}â¢maxâ¢width: calc(100vw - var(${E}â¢32)); 5558 ${Y}â¢minâ¢width: unset; 5559 ${Y}â¢width: auto; 5560 5561 ${Y}â¢maxâ¢height: calc(100vh - var(${E}â¢32)); 5562 ${Y}â¢minâ¢height: unset; 5563 ${Y}â¢height: max-content; 5564 5565 ${xe}: 1; 5566 ${xe}â¢start: 0.95; 5567 5568 ${Mn}â¢textâ¢align: unset; 5569 ${vt}â¢justifyâ¢content: flex-end; 5570 5571 ${Ya}â¢bg: var(--arc-color-overlay-stark); 5572 ${Ya}â¢pointerâ¢events: none; 5573 ${Ya}â¢cursor: default; 5574 5575 &:where([is-backdrop=light]) { 5576 ${Ya}â¢bg: var(--arc-color-overlay-subtle); 5577 } 5578 5579 &:where([is-backdrop=dark]) { 5580 ${Ya}â¢bg: var(--arc-color-overlay-stark); 5581 } 5582 5583 &:where([is-backdrop=none]) { 5584 ${Ya}â¢bg: transparent; 5585 } 5586`,wp=s` 5587 &[data-size=sm] { 5588 ${Y}â¢width: 28em; 5589 } 5590 5591 &[data-size=md] { 5592 ${Y}â¢width: 40em; 5593 } 5594 5595 &[data-size=lg] { 5596 ${Y}â¢width: 50em; 5597 } 5598 5599 &[data-size=xl] { 5600 ${Y}â¢width: 64em; 5601 } 5602 5603 &[data-size=custom] { 5604 ${Y}â¢width: auto; 5605 ${Y}â¢height: max-content; 5606 } 5607 5608 &[data-size=fullscreen] { 5609 ${Y}â¢width: 100vw; 5610 ${Y}â¢height: 100vh; 5611 ${Y}â¢minâ¢width: 100vw; 5612 ${Y}â¢minâ¢height: 100vh; 5613 ${Y}â¢maxâ¢width: 100vw; 5614 ${Y}â¢maxâ¢height: 100vh; 5615 ${Y}â¢borderâ¢radius: var(--arc-border-radius-none); 5616 5617 ${xe}: 1; 5618 ${xe}â¢start: 1.125; 5619 } 5620`,Cp=s` 5621 &[is-confirm] { 5622 ${vt}â¢justifyâ¢content: flex-end; 5623 5624 &[is-confirm=critical] [arc-modal-title] { 5625 --arc-icon-text-icon-color: var(--arc-color-fg-critical-mid); 5626 } 5627 } 5628 5629 &[is-alert] { 5630 ${Mn}â¢textâ¢align: center; 5631 ${vt}â¢justifyâ¢content: center; 5632 5633 ${yr}â¢blockâ¢start: var(${E}â¢40); 5634 ${yr}â¢blockâ¢end: var(${E}â¢20); 5635 5636 ${ke}â¢blockâ¢start: var(${E}â¢12); 5637 ${ke}â¢blockâ¢end: var(${E}â¢40); 5638 5639 ${Y}â¢glyphâ¢size: var(${f}â¢48); 5640 5641 [arc-modal-spinner] { 5642 --arc-spinner-circle-opacity: 9.8%; /* 9.8% = neutral-200 on white */ 5643 --arc-spinner-size: var(${Y}â¢glyphâ¢size); 5644 } 5645 5646 [arc-modal-glyph] { 5647 --arc-icon-display: flex; 5648 --arc-icon-size: var(${Y}â¢glyphâ¢size); 5649 --arc-icon-height: var(--arc-icon-size); 5650 --arc-icon-max-height: var(--arc-icon-size); 5651 } 5652 5653 [arc-modal-body] { 5654 display: flex; 5655 flex-direction: column; 5656 align-items: center; 5657 justify-content: center; 5658 gap: var(${E}â¢12); 5659 } 5660 } 5661 5662 &:not([is-top-layer]) { 5663 z-index: var(--arc-modal-z-index, 1000); 5664 } 5665`,Ap=s` 5666 [arc-modal-content] { 5667 &:has([arc-modal-header]) { 5668 ${yr}â¢blockâ¢start: var(${E}â¢10); 5669 } 5670 5671 &:has([arc-modal-footer]) { 5672 ${yr}â¢blockâ¢end: var(${E}â¢10); 5673 } 5674 5675 &:has([arc-modal-header][has-divider]) { 5676 ${mo}â¢blockâ¢end: var(${E}â¢20); 5677 ${yr}â¢blockâ¢start: var(${E}â¢20); 5678 } 5679 5680 &:has([arc-modal-footer][has-divider]) { 5681 ${yr}â¢blockâ¢end: var(${E}â¢20); 5682 ${ke}â¢blockâ¢start: var(${E}â¢12); 5683 ${ke}â¢blockâ¢end: var(${E}â¢12); 5684 } 5685 5686 &:has([arc-modal-body][data-padding=top-bottom]) { 5687 ${yr}â¢inlineâ¢start: 0; 5688 ${yr}â¢inlineâ¢end: 0; 5689 } 5690 5691 &:has([arc-modal-body][data-padding=left-right]) { 5692 ${yr}â¢blockâ¢start: 0; 5693 ${yr}â¢blockâ¢end: 0; 5694 } 5695 5696 &:has([arc-modal-body][data-padding=left-right-top]) { 5697 ${yr}â¢blockâ¢end: 0; 5698 } 5699 5700 &:has([arc-modal-body][data-padding=left-right-bottom]) { 5701 ${yr}â¢blockâ¢start: 0; 5702 } 5703 5704 &:has([arc-modal-body][data-padding=top-bottom-left]) { 5705 ${yr}â¢inlineâ¢end: 0; 5706 } 5707 5708 &:has([arc-modal-body][data-padding=top-bottom-right]) { 5709 ${yr}â¢inlineâ¢start: 0; 5710 } 5711 5712 &:has([arc-modal-body][data-padding=all]) { 5713 ${yr}â¢blockâ¢start: var(${E}â¢20); 5714 ${yr}â¢inlineâ¢end: var(${E}â¢24); 5715 ${yr}â¢blockâ¢end: var(${E}â¢20); 5716 ${yr}â¢inlineâ¢start: var(${E}â¢24); 5717 } 5718 5719 &:has([arc-modal-go-back]) { 5720 ${mo}â¢inlineâ¢start: var(${E}â¢20); 5721 } 5722 5723 ${mo}: 5724 var(${E}â¢20) 5725 var(${E}â¢24) 5726 var(${mo}â¢blockâ¢end, var(${E}â¢10)) 5727 var(${mo}â¢inlineâ¢start, var(${E}â¢24)); 5728 5729 ${yr}: 5730 var(${yr}â¢blockâ¢start, var(${E}â¢20)) 5731 var(${yr}â¢inlineâ¢end, var(${E}â¢24)) 5732 var(${yr}â¢blockâ¢end, var(${E}â¢20)) 5733 var(${yr}â¢inlineâ¢start, var(${E}â¢24)); 5734 5735 ${ke}: 5736 var(${ke}â¢blockâ¢start, var(${E}â¢10)) 5737 var(${E}â¢24) 5738 var(${ke}â¢blockâ¢end, var(${E}â¢20)) 5739 var(${E}â¢24); 5740 5741 &:has([arc-modal-body][data-padding=none]) { 5742 ${yr}: 0; 5743 } 5744 } 5745`,Sp=s` 5746 [arc-modal] { 5747 transition-behavior: allow-discrete, smooth; 5748 transition-duration: var(--arc-modal-transition-duration, 240ms); 5749 transition-property: display, opacity, scale; 5750 transition-timing-function: ease-out; 5751 5752 &::after { 5753 transition: inherit; 5754 } 5755 5756 &::backdrop { 5757 transition: inherit; 5758 } 5759 } 5760 5761 @supports (overlay: auto) { 5762 [arc-modal] { 5763 transition-behavior: allow-discrete; 5764 transition-property: display, overlay, opacity, scale; 5765 } 5766 } 5767`,zp=s` 5768 [arc-modal] { 5769 opacity: 0; 5770 scale: var(--arc-modal-scale, var(${xe})); 5771 5772 &::after { 5773 opacity: 0; 5774 } 5775 5776 &::backdrop { 5777 opacity: 0; 5778 } 5779 5780 &[open] { 5781 display: flex; 5782 flex-direction: column; 5783 opacity: 1; 5784 } 5785 5786 &[open]::after { 5787 opacity: 1; 5788 } 5789 5790 &[open]::backdrop { 5791 opacity: 1; 5792 } 5793 } 5794 5795 @starting-style { 5796 [arc-modal][open] { 5797 opacity: 0; 5798 scale: var(--arc-modal-scale-start, var(${xe}â¢start)); 5799 } 5800 5801 [arc-modal][open]::after { 5802 opacity: 0; 5803 } 5804 5805 [arc-modal][open]::backdrop { 5806 opacity: 0; 5807 } 5808 } 5809`,Ri=s` 5810@layer arc-components { 5811 5812 /* SETUP ---------------------------------------------------------⢠*/ 5813 5814 [arc-modal] { 5815 ${kp} 5816 ${wp} 5817 ${Cp} 5818 ${Ap} 5819 } 5820 5821 /* REDUCED MOTION ------------------------------------------------⢠*/ 5822 5823 @media (prefers-reduced-motion: reduce) { 5824 [arc-modal] { 5825 ${xe}: 1; 5826 ${xe}â¢start: 1; 5827 } 5828 } 5829 5830 /* CORE ----------------------------------------------------------⢠*/ 5831 5832 [arc-modal] { 5833 will-change: opacity, scale; 5834 contain: layout style paint; 5835 5836 inset: var(--arc-modal-inset, 0); 5837 translate: var(--arc-modal-translate, none); 5838 margin: var(--arc-modal-margin, auto); 5839 5840 padding: 0; 5841 color: var(--arc-modal-color, var(${hd})); 5842 background: var(--arc-modal-background, var(${Bn})); 5843 border: var(--arc-modal-border, var(${Y}â¢border)); 5844 border-radius: var(--arc-modal-border-radius, var(${Y}â¢borderâ¢radius)); 5845 box-shadow: var(--arc-modal-box-shadow, var(--arc-shadow-lg)); 5846 outline: var(--arc-modal-outline, none); 5847 5848 width: var(--arc-modal-width, var(${Y}â¢width)); 5849 height: var(--arc-modal-height, var(${Y}â¢height)); 5850 min-width: var(--arc-modal-min-width, var(${Y}â¢minâ¢width)); 5851 min-height: var(--arc-modal-min-height, var(${Y}â¢minâ¢height)); 5852 max-width: var(--arc-modal-max-width, var(${Y}â¢maxâ¢width)); 5853 max-height: var(--arc-modal-max-height, var(${Y}â¢maxâ¢height)); 5854 5855 &::backdrop { 5856 will-change: opacity; 5857 contain: layout style paint; 5858 5859 background: var(--arc-modal-backdrop-background, var(${Ya}â¢bg)); 5860 pointer-events: var(${Ya}â¢pointerâ¢events, none); 5861 cursor: var(${Ya}â¢cursor, default); 5862 } 5863 5864 [arc-modal-content] { 5865 font-size: var(--arc-modal-font-size, var(${Y}â¢fontâ¢size)); 5866 flex: 1 1 min-content; 5867 display: flex; 5868 flex-direction: column; 5869 overflow: hidden; 5870 position: relative; 5871 z-index: 1; 5872 5873 /* Force remove margin from controlled title and message elements */ 5874 :is([arc-modal-title], [arc-modal-message]) { margin: 0 !important; } 5875 } 5876 5877 [arc-modal-header] { 5878 flex: none; 5879 position: relative; 5880 z-index: 1; 5881 5882 display: flex; 5883 align-items: var(--arc-modal-header-align-items, unset); 5884 justify-content: space-between; 5885 gap: var(--arc-modal-header-gap, var(${Y}â¢gap)); 5886 5887 padding: var(${mo}); 5888 background: var(--arc-modal-header-background, var(${Bn})); 5889 max-width: 100%; 5890
5891 &:where([has-divider]) { 5892 border-bottom: var(--arc-modal-header-divider, var(${Y}â¢divider)); 5893 } 5894 5895 :where([header-slot]) { 5896 display: flex; 5897 align-items: inherit; 5898 gap: inherit; 5899 } 5900 5901 :where([header-slot=content]) { 5902 flex: 1; 5903 align-self: flex-start; 5904 } 5905 5906 :where([header-slot=dismiss]) { 5907 margin: var(${E}â¢4m) var(${E}â¢8m) var(${E}â¢4m) var(${E}â¢4m); 5908 } 5909 5910 :where([header-slot=go-back]) { 5911 margin: var(${E}â¢4m) 0 var(${E}â¢4m) var(${E}â¢4m); 5912 } 5913 } 5914 5915 [arc-modal-title] { 5916 --arc-icon-text-gap: var(${E}â¢8); 5917 --arc-icon-text-line-height: normal; 5918 5919 [data-element=subtext] { 5920 font-family: var(--arc-font-family-body); 5921 font-weight: var(--arc-font-weight-body); 5922 font-size: var(--arc-font-size-body-md); 5923 color: inherit; 5924 margin-top: var(${E}â¢4); 5925 } 5926 } 5927 5928 [arc-modal-body] { 5929 flex: 1; 5930 padding: var(${yr}); 5931 overflow: auto; 5932 overscroll-behavior: var(--arc-modal-overscroll-behavior, contain); 5933 min-height: var(--arc-modal-body-min-height, 3em); 5934 text-align: var(--arc-modal-body-text-align, var(${Mn}â¢textâ¢align)); 5935 } 5936 5937 [arc-modal-footer] { 5938 flex: none; 5939 position: relative; 5940 z-index: 1; 5941 5942 display: flex; 5943 flex-direction: var(--arc-modal-footer-flex-direction, unset); 5944 align-items: var(--arc-modal-footer-align-items, center); 5945 justify-content: var(--arc-modal-footer-justify-content, var(${vt}â¢justifyâ¢content)); 5946 gap: var(--arc-modal-footer-gap, var(${Y}â¢gap)); 5947 5948 background: var(--arc-modal-footer-background, var(${Bn})); 5949 padding: var(--arc-modal-footer-padding, var(${ke})); 5950 max-width: 100%; 5951 5952 &[has-divider] { 5953 border-top: var(--arc-modal-footer-divider, var(${Y}â¢divider)); 5954 } 5955 5956 [footer-slot=content] { 5957 flex: var(--arc-modal-footer-content-flex, none); 5958 display: var(--arc-modal-footer-content-display, flex); 5959 gap: inherit; 5960 } 5961 } 5962 5963 [arc-modal-dismiss] { 5964 position: var(--arc-modal-dismiss-position, absolute); 5965 inset: var(--arc-modal-dismiss-inset, var(${E}â¢16) var(${E}â¢16) auto auto); 5966 width: var(--arc-modal-dismiss-width, auto); 5967 overflow: visible; 5968 z-index: 2; 5969 } 5970 5971 /* Nested confirm modal */ 5972 &:not([is-top-layer]):has([arc-modal][is-confirm][open])::after { 5973 content: ''; 5974 position: absolute; 5975 inset: 0; 5976 background: var(--arc-modal-backdrop-background, var(${Ya}â¢bg)); 5977 z-index: var(--arc-modal-confirm-z-index, 2); 5978 } 5979 5980 /* Nested modals */ 5981 [arc-modal] { 5982 --arc-modal-min-width: var(--arc-modal-nested-min-width, none); 5983 --arc-modal-min-height: var(--arc-modal-nested-min-height, none); 5984 } 5985 5986 [arc-modal][is-alert] { 5987 --arc-modal-min-width: var(--arc-modal-nested-alert-min-width, none); 5988 --arc-modal-min-height: var(--arc-modal-nested-alert-min-height, none); 5989 } 5990 5991 [arc-modal][is-confirm] { 5992 --arc-modal-width: var(--arc-modal-confirm-width, 25em); 5993 --arc-modal-height: var(--arc-modal-confirm-height, max-content); 5994 --arc-modal-min-width: var(--arc-modal-confirm-min-width, none); 5995 --arc-modal-min-height: var(--arc-modal-confirm-min-height, none); 5996 --arc-modal-max-width: var(--arc-modal-confirm-max-width, calc(100% - var(${E}â¢32))); 5997 --arc-button-bar-flex: none; 5998 5999 z-index: var(--arc-modal-confirm-z-index, 3); 6000 6001 inset: var(--arc-modal-confirm-inset, 0); 6002 translate: var(--arc-modal-confirm-translate, none); 6003 margin: var(--arc-modal-confirm-margin, auto); 6004 } 6005 } 6006 6007 ${Sp} 6008 ${zp} 6009`,we={variant:"common",backdropColor:"auto",message:"You have unsaved changes. Discard them?",onCloseOverride:void 0,isTopLayer:!0,isInverse:!1,scheme:"auto"},gd=({children:r,headerProps:a,bodyProps:e,footerProps:o,...t})=>{const i=(0,h.useRef)(null),{isOpen:c,autoFocusId:l,isTopLayer:d=we.isTopLayer,isInverse:u=we.isInverse,scheme:g=we.scheme,backdropColor:p=we.backdropColor,variant:v=we.variant,message:m=we.message,onCloseOverride:b=we.onCloseOverride,onConfirmDiscard:$,onConfirmCancel:k,contentRef:_,...y}=t,{slotStart:z,TitleElement:x,titleContent:S,slotEnd:D,...B}=a||{},{primaryButton:F,secondaryButton:T,...C}=o||{},W=!!(S||z||D),H=g==="auto"?void 0:g,ar=!!b,K=M=>ar?b?.("confirm:discard",M,i.current??void 0):$?.("confirm:discard",M),or=M=>ar?b?.("confirm:cancel",M,i.current??void 0):k?.("confirm:cancel",M);zi({modalRef:i,onClose:b}),Ei({modalRef:i,isOpen:c,isTopLayer:d}),_i({modalRef:i,isOpen:c,autoFocusId:l});const nr=M=>{or(M),T?.onClick?.(M)},gr=M=>{K(M),F?.onClick?.(M)};return(0,n.jsx)("dialog",{...y,ref:i,"arc-modal":"","arc-scheme":u?"inverse":H,"is-confirm":v||"","is-inverse":u?"":void 0,"is-top-layer":
6009d?"":void 0,"is-backdrop":p==="auto"?void 0:p,"data-size":"sm",closedby:"none",onKeyDown:yp("none"),children:(0,n.jsxs)(Pn,{ref:_,children:[W&&(0,n.jsxs)(ud,{...B,children:[z&&(0,n.jsx)("div",{"header-slot":"start",children:z}),(0,n.jsx)("div",{"header-slot":"content",children:(0,n.jsx)(Ii,{TitleElement:x,titleContent:S})}),D&&(0,n.jsx)("div",{"header-slot":"end",children:D})]}),(0,n.jsx)(ji,{...e,children:r||m&&(0,n.jsx)("p",{style:{margin:0},children:m})}),(0,n.jsx)(Li,{...C,children:(0,n.jsxs)($n,{children:[(0,n.jsx)(kr,{...T,text:T?.text||"Cancel",variant:"common",hierarchy:"secondary",isInverse:u,onClick:nr}),(0,n.jsx)(kr,{...F,text:F?.text||"Discard",variant:v??"common",hierarchy:"primary",isInverse:u,onClick:gr})]})})]})})};ir("ArcModalConfirm",Ri);const ia={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}},Ep=({children:r,confirmProps:a,headerProps:e,bodyProps:o,dismissProps:t,footerProps:i,...c})=>{const l=(0,h.useRef)(null),[d,u]=(0,h.useState)(!1),{isOpen:g,autoFocusId:p,isTopLayer:v=ia.isTopLayer,isInverse:m=ia.isInverse,scheme:b=ia.scheme,backdropColor:$=ia.backdropColor,hasConfirmFlow:k=ia.hasConfirmFlow,hasUnsavedChanges:_=ia.hasUnsavedChanges,onCloseOverride:y=ia.onCloseOverride,bypassConfirmWhen:z=ia.bypassConfirmWhen??{},size:x=ia.size,closeOnBackdrop:S=ia.closeOnBackdrop,closeOnEsc:D=ia.closeOnEsc,showDismiss:B=ia.showDismiss,onActionError:F,onClose:T,onToggle:C,width:W,height:H,style:ar,contentRef:K,...or}=c,{showGoBack:nr,goBackProps:gr,slotStart:M,TitleElement:O,titleContent:N,slotEnd:L,showDivider:Z=ia.headerProps?.showDivider,...X}=e??{},{slotStart:J,primaryButton:dr,secondaryButton:j,tertiaryButton:er,showDivider:pr=ia.footerProps?.showDivider,...xr}=i??{},Jr=!!(nr||N||M||L),ga=!!(dr||j||er),xa=!!(ga||J),V=!!(k&&_),Lr=D?"closerequest":"none",hr=b==="auto"?void 0:b,{didPressEscapeKey:Mr,didClickBackdrop:Ta,didClickGoBackButton:Ce,didClickDismissButton:ue,didClickPrimaryButton:Vn,didClickSecondaryButton:ko,didClickTertiaryButton:Ge}=z,Ja=ht({modalRef:l,shouldConfirm:V,setIsConfirming:u,onCloseOverride:y});zi({modalRef:l,shouldConfirm:V,setIsConfirming:u,onClose:T,onToggle:C}),Ei({modalRef:l,isOpen:g,isTopLayer:v}),_i({modalRef:l,isOpen:g,autoFocusId:p}),ld({modalRef:l,isOpen:g,closeOnBackdrop:S,attemptCloseModal:Ta?ht({modalRef:l,shouldConfirm:V&&!Ta,setIsConfirming:u}):Ja}),dd({modalRef:l,isOpen:g,closeOnEsc:D,closedBy:Lr,attemptCloseModal:Mr?ht({modalRef:l,shouldConfirm:V&&!Mr,setIsConfirming:u}):Ja});const Q=()=>u(!1),Sr=(ra,Qa)=>Ja(ra)(Qa),Qr=(ra,Qa,wo)=>async Ae=>{Ae?.preventDefault?.(),Ae?.stopPropagation?.();const Un=()=>Qa?ht({modalRef:l,shouldConfirm:V&&!Qa,setIsConfirming:u})(ra,wo?.onCloseCallback)(Ae):Ja(ra,wo?.onCloseCallback)(Ae);try{await wo?.onClick?.(Ae),Un()}catch(Ni){F?.(Ni,{reason:ra,event:Ae})}};return(0,n.jsxs)("dialog",{...or,ref:l,"arc-modal":"","arc-scheme":m?"inverse":hr,"is-inverse":m?"":void 0,"is-top-layer":v?"":void 0,"is-backdrop":$==="auto"?void 0:$,"data-size":x,closedby:Lr,style:{"--arc-modal-width":W??"","--arc-modal-height":H??"",...ar},children:[!Jr&&B&&(0,n.jsx)("div",{"arc-modal-dismiss":"",children:(0,n.jsx)(Ti,{...t,isInverse:m,onClick:Qr("button:dismiss",ue,t)})}),(0,n.jsxs)(Pn,{ref:K,inert:d?"":void 0,children:[Jr&&(0,n.jsxs)(ud,{...X,showDivider:Z,children:[nr&&(0,n.jsx)("div",{"header-slot":"go-back",children:(0,n.jsx)(mp,{...gr,isInverse:m,onClick:Qr("button:back",Ce,gr)})}),M&&(0,n.jsx)("div",{"header-slot":"start",children:M}),(0,n.jsx)("div",{"header-slot":"content",children:(0,n.jsx)(Ii,{TitleElement:O,titleContent:N})}),L&&(0,n.jsx)("div",{"header-slot":"end",children:L}),B&&(0,n.jsx)("div",{"header-slot":"dismiss",children:(0,n.jsx)(Ti,{...t,isInverse:m,onClick:Qr("button:dismiss",ue,t)})})]}),(0,n.jsx)(ji,{...o,children:r}),xa&&(0,n.jsxs)(Li,{...xr,showDivider:pr,children:[J&&(0,n.jsx)("div",{"footer-slot":"content",children:J}),ga&&(0,n.jsxs)($n,{children:[er&&(0,n.jsx)(kr,{...er,text:er?.text||"Button",isInverse:m,variant:"common",hierarchy:"tertiary",onClick:Qr("button:tertiary",Ge,er)}),j&&(0,n.jsx)(kr,{...j,text:j?.text||"Cancel",isInverse:m,variant:"common",hierarchy:"secondary",onClick:Qr("button:secondary",ko,j)}),dr&&(0,n.jsx)(kr,{...dr,text:dr?.text||"Action",isInverse:m,variant:"common",hierarchy:"primary",onClick:Qr("button:primary",Vn,dr)})]})]})]}
6009),k&&(0,n.jsx)(gd,{isOpen:d,isInverse:m,isTopLayer:v,backdropColor:$,...a,onConfirmDiscard:Sr,onConfirmCancel:Q})]})};ir("ArcModal",Ri);const se={variant:"common",backdropColor:"auto",showDismiss:!0,closeOnBackdrop:!1,closeOnEsc:!0,onCloseOverride:void 0,isTopLayer:!0,isInverse:!1,scheme:"auto"},_p={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-solid fa-do-not-enter",info:"fa-solid fa-circle-info",processing:(0,n.jsx)(Cc,{"arc-modal-spinner":""})},Tp=({children:r,dismissProps:a,bodyProps:e,footerProps:o,...t})=>{const i=(0,h.useRef)(null),{isOpen:c,autoFocusId:l,isTopLayer:d=se.isTopLayer,isInverse:u=se.isInverse,scheme:g=se.scheme,backdropColor:p=se.backdropColor,closeOnBackdrop:v=se.closeOnBackdrop,closeOnEsc:m=se.closeOnEsc,variant:b=se.variant,icon:$,TitleElement:k,titleContent:_,message:y,showDismiss:z,onCloseOverride:x=se.onCloseOverride,onClose:S,onToggle:D,contentRef:B,...F}=t,{primaryButton:T,...C}=o??{},W=$||_p[b],H=m?"closerequest":"none",ar=g==="auto"?void 0:g,K=ht({modalRef:i,onCloseOverride:x});return zi({modalRef:i,onClose:S,onToggle:D}),Ei({modalRef:i,isOpen:c,isTopLayer:d}),_i({modalRef:i,isOpen:c,autoFocusId:l}),ld({modalRef:i,isOpen:c,closeOnBackdrop:v,attemptCloseModal:K}),dd({modalRef:i,isOpen:c,closeOnEsc:m,closedBy:H,attemptCloseModal:K}),(0,n.jsxs)("dialog",{...F,ref:i,"arc-modal":"","arc-scheme":u?"inverse":ar,"is-alert":b||"","is-inverse":u?"":void 0,"is-top-layer":d?"":void 0,"is-backdrop":p==="auto"?void 0:p,"data-size":"sm",closedby:H,children:[z&&(0,n.jsx)("div",{"arc-modal-dismiss":"",children:(0,n.jsx)(Ti,{...a,isInverse:u,onClick:K("button:dismiss",a?.onClick)})}),(0,n.jsxs)(Pn,{ref:B,children:[(0,n.jsx)(ji,{...e,children:r||(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(bp,{glyph:W,variant:b}),(0,n.jsx)(Ii,{TitleElement:k,titleContent:_}),(0,n.jsx)($p,{message:y})]})}),(0,n.jsx)(Li,{...C,children:(0,n.jsx)($n,{orientation:"vertical",children:(0,n.jsx)(kr,{...T,text:T?.text||"Close",variant:"common",hierarchy:"primary",isInverse:u,onClick:K("button:primary",T?.onClick)})})})]})]})};ir("ArcModalAlert",Ri);const Fr=s`--arcâ¢radio`,Ip=s` 6010@layer arc-components { 6011 6012 [arc-radio] { 6013 /* SIZES -------------------------------------------------------⢠*/ 6014 &[data-size=inherit] { 6015 ${Fr}â¢fontâ¢size: 1em; 6016 ${Fr}â¢iconâ¢size: 0.625em; 6017 ${Fr}â¢size: 1.125em; 6018 ${Fr}â¢gap: 0.5em; 6019 } 6020 6021 &[data-size=md] { 6022 ${Fr}â¢fontâ¢size: var(${f}â¢14); 6023 ${Fr}â¢iconâ¢size: var(${f}â¢10); 6024 ${Fr}â¢size: var(${f}â¢18); 6025 ${Fr}â¢gap: var(${f}â¢8); 6026 } 6027 6028 &[data-size=sm] { 6029 ${Fr}â¢fontâ¢size: var(${f}â¢12); 6030 ${Fr}â¢iconâ¢size: var(${f}â¢10); 6031 ${Fr}â¢size: var(${f}â¢16); 6032 ${Fr}â¢gap: var(${f}â¢6); 6033 } 6034 6035 /* Inter-Component Communication -------------------------------⢠*/ 6036 /* for: Setup defaults for ArcBooleanInputMask */ 6037 ${I}â¢borderâ¢radius: var(--arc-border-radius-circle); 6038 ${I}â¢size: var(${Fr}â¢size); 6039 ${I}â¢iconâ¢size: var(${Fr}â¢iconâ¢size); 6040 ${I}â¢width: var(${Fr}â¢size); 6041 ${I}â¢height: var(${Fr}â¢size); 6042 ${I}â¢translate: 0 var(${f}â¢1m); 6043 6044 /* for: ArcLabel */ 6045 --arc-label-gap: var(${Fr}â¢gap); 6046 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask 6047 to stay inline with the label text 6048 regardless of applied line-height */ 6049 } 6050 6051 /* CORE STYLES ---------------------------------------------------⢠*/ 6052 [arc-radio]:not([hidden]) { 6053 font-size: var(${Fr}â¢fontâ¢size); 6054 display: var(--arc-radio-display, inline-flex); 6055 min-height: 1lh; 6056 6057 /* UNCHECKED, NOT-DISABLED, +HOVER ⢠default state */ 6058 &:not(:has(:checked)) { 6059 ${I}â¢color: transparent; 6060 ${I}â¢background: transparent; 6061 ${I}â¢borderâ¢color: var(--arc-color-border-stark); 6062 6063 &:hover { 6064 ${I}â¢background: var(--arc-color-bg-theme-subtle); 6065 ${I}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 6066 } 6067 6068 &:has(:disabled) { 6069 ${I}â¢background: var(--arc-color-bg-disabled); 6070 ${I}â¢borderâ¢color: var(--arc-color-border-disabled); 6071 } 6072 } 6073 6074 /* DISABLED */ 6075 &:has(:disabled) { 6076 color: var(--arc-color-fg-disabled); 6077 } 6078 6079 /* CHECKED, ?NOT-DISABLED+HOVER, ?DISABLED */ 6080 &:has(:checked) { 6081 ${I}â¢color: var(--arc-color-fg-on-theme-heavy); 6082 ${I}â¢background: var(--arc-color-bg-theme-heavy); 6083 ${I}â¢borderâ¢color: transparent; 6084 6085 &:not(:has(:disabled)):hover { 6086 ${I}â¢background: var(--arc-color-bg-theme-stark); 6087 } 6088 6089 &:has(:disabled) { 6090 ${I}â¢color: var(--arc-color-fg-on-theme-mid); 6091 ${I}â¢background: var(--arc-color-bg-theme-mid); 6092 } 6093 } 6094 } 6095 6096} 6097`,jp=q(Ia,["hug","fill"]),Lp=q(aa,["inherit","md","sm"]),vd=({children:r,label:a,layout:e,size:o="md",useMask:t=!0,...i})=>{const{className:c,title:l,...d}=i,u={className:c,title:l},g=r??a,p=(0,n.jsx)(Qo,{...d,type:"radio"}),v=t&&(0,n.jsxs)(un,{type:"radio",children:[p,(0,n.jsx)(cr,{icon:"fa-solid fa-circle-small arc-fw"})]}),m=!!g&&(0,n.jsxs)(me,{layout:e,children:[v||p,(0,n.jsx)(Oe,{children:g})]});return(0,n.jsx)("span",{...u,"arc-radio":"","data-size":o,children:m||v||p})};ir("ArcRadio",Ip);const ua=s`--arcâ¢rb`,sr=s`${ua}â¢o`,Rp=s` 6098@layer arc-components { 6099 6100 [arc-radio-bar] { 6101 ${ua}â¢fontâ¢size: var(${f}â¢14); 6102 ${ua}â¢borderâ¢radius: var(${f}â¢8); 6103 ${ua}â¢background: var(--arc-color-bg-secondary); 6104 ${ua}â¢padding: var(${f}â¢4); 6105 ${ua}â¢gap: var(${f}â¢2); 6106 6107 ${sr}â¢color: var(--arc-color-fg-secondary); 6108 ${sr}â¢background: var(--arc-color-alpha-black-0); 6109 ${sr}â¢borderâ¢color: var(--arc-color-alpha-black-0); 6110 ${sr}â¢borderâ¢width: var(${f}â¢1); 6111 ${sr}â¢borderâ¢radius: var(${f}â¢4);
6111 /* bar-radius minus bar-padding */ 6112 6113 /* SIZES -------------------------------------------------------⢠*/ 6114 &[data-size=lg] { /* @default */ 6115 ${sr}â¢size: var(${f}â¢32); 6116 ${sr}â¢lineâ¢height: var(${f}â¢30); /* ⢠-2px to account for border-width (top/bottom) */ 6117 ${sr}â¢iconâ¢padding: var(${f}â¢8); 6118 ${sr}â¢textâ¢padding: var(${f}â¢12); 6119 } 6120 6121 &[data-size=md] { 6122 ${sr}â¢size: var(${f}â¢24); 6123 ${sr}â¢lineâ¢height: var(${f}â¢22); /* ⢠-2px to account for border-width (top/bottom) */ 6124 ${sr}â¢iconâ¢padding: var(${f}â¢6); 6125 ${sr}â¢textâ¢padding: var(${f}â¢8); 6126 } 6127 6128 /* LAYOUTS -----------------------------------------------------⢠*/ 6129 &[data-layout=hug] { /** @default */ 6130 ${ua}â¢display: inline-flex; 6131 } 6132 6133 &[data-layout=fill] { 6134 ${ua}â¢display: flex; 6135 } 6136 } 6137 6138 [arc-radio-bar-option] { 6139 /* Inter-Component Communication -------------------------------⢠*/ 6140 --arc-label-align-items: stretch; /* control ArcLabel's vertical footprint; 6141 allows long label text to wrap 6142 without compromising option's 6143 visual border */ 6144 6145 6146 /* STATES ------------------------------------------------------⢠*/ 6147 &:not(:has(:disabled, :checked)) { 6148 &:hover { 6149 ${sr}â¢color: var(--arc-color-fg-on-hover-default); 6150 ${sr}â¢background: var(--arc-color-bg-hover-default); 6151 ${sr}â¢borderâ¢color: var(--arc-color-border-stark); 6152 } 6153 } 6154 6155 &:has(:checked) { 6156 ${sr}â¢color: var(--arc-color-mono-black); 6157 ${sr}â¢background: var(--arc-color-mono-white); 6158 ${sr}â¢borderâ¢color: var(--arc-color-border-stark); 6159 ${sr}â¢fontâ¢weight: var(--arc-font-weight-500); 6160 } 6161 6162 &:has(:disabled) { 6163 ${sr}â¢color: var(--arc-color-fg-disabled); 6164 } 6165 6166 6167 &:has(:focus-within:focus-visible) { 6168 ${sr}â¢outline: var(${sr}
6168â¢borderâ¢width) solid var(--arc-color-border-focus); 6169 } 6170 } 6171 6172 /* CORE STYLES ---------------------------------------------------⢠*/ 6173 [arc-radio-bar-option] { 6174 flex: 1 1 auto; 6175 display: flex; 6176 position: relative; 6177 } 6178 6179 [arc-radio-bar]:not([hidden]) { 6180 font-size: var(--arc-radio-bar-font-size, var(${ua}â¢fontâ¢size)); 6181 display: var(${ua}â¢display); 6182 gap: var(${ua}â¢gap); 6183 border-radius: var(${ua}â¢borderâ¢radius); 6184 background: var(${ua}â¢background); 6185 padding: var(${ua}â¢padding); 6186 margin: 0; 6187 6188 [arc-radio] { 6189 flex: 1; 6190 display: flex; 6191 justify-content: center; 6192 border-radius: var(${sr}â¢borderâ¢radius); 6193 outline: var(${sr}â¢outline, none); 6194 outline-offset: var(${sr}â¢borderâ¢width); 6195 } 6196 6197 /* INPUT ELEMENT -----------------------------------------------⢠*/ 6198 [arc-input-type=radio] { 6199 position: absolute; 6200 appearance: none; 6201 pointer-events: none; 6202 opacity: 0; 6203 } 6204 6205 /* Inter-Component Communication -------------------------------⢠*/ 6206 [arc-label] { 6207 flex: 1; 6208 line-height: var(${sr}â¢lineâ¢height); 6209 overflow: hidden; 6210 } 6211 6212 [arc-label-content] { 6213 flex: 1; 6214 display: flex; 6215 align-items: safe center; 6216 justify-content: center; 6217 6218 height: var(${sr}â¢size); 6219 min-width: var(${sr}â¢size); 6220 6221 border-radius: var(${sr}â¢borderâ¢radius); 6222 border: var(${sr}
6222â¢borderâ¢width) solid var(${sr}â¢borderâ¢color); 6223 background: var(${sr}â¢background); 6224 color: var(${sr}â¢color); 6225 font-weight: var(${sr}â¢fontâ¢weight, unset); 6226 6227 transition-duration: 200ms; 6228 transition-timing-function: ease-out; 6229 transition-property: 6230 border, 6231 background, 6232 color, 6233 font-weight; 6234 6235 &:has([data-element=text]) { 6236 padding: 0 var(${sr}â¢textâ¢padding); 6237 } 6238 6239 &:not(:has([data-element=text])) { 6240 padding: 0 var(${sr}â¢iconâ¢padding); 6241 } 6242 } 6243 6244 [arc-icon-text] [data-element] { 6245 min-width: min-content; 6246 overflow: hidden; 6247 overflow-wrap: break-word; 6248 } 6249 } 6250 6251} 6252`,Pp=q(Ia,["hug","fill"]),Mp=q(aa,["lg","md"]),Bp=({children:r,label:a,icon:e,...o})=>{const t=r||(0,n.jsx)(Yr,{icon:e,text:a});return(0,n.jsx)("li",{"arc-radio-bar-option":"","data-is-checked":o?.checked||void 0,children:(0,n.jsx)(vd,{...o,label:t,layout:"fill",useMask:!1})})},Dp=({children:r,size:a="lg",layout:e="hug",...o})=>(0,n.jsx)("ul",{...o,"arc-radio-bar":"","data-size":a,"data-layout":e,role:"radiogroup",children:r});ir("ArcRadioBar",Rp);var pd=sa(98998),Nr,Tr,Fa,le;function Op(r=!1){if(typeof r!="boolean")throw new Error("defaultValue must be `true` or `false`");const[a,e]=Nr(r),o=Tr(()=>{e(!0)},[]),t=Tr(()=>{e(!1)},[]),i=Tr(()=>{e(c=>!c)},[]);return{value:a,setValue:e,setTrue:o,setFalse:t,toggle:i}}var Na=typeof window<"u"?h.useLayoutEffect:h.useEffect;function _a(r,a,e,o){const t=(0,h.useRef)(a);Na(()=>{t.current=a},[a]),(0,h.useEffect)(()=>{const i=e?.current??window;if(!(i&&i.addEventListener))return;const c=l=>{t.current(l)};return i.addEventListener(r,c,o),()=>{i.removeEventListener(r,c,o)}},[r,e,o])}function nm(r){_a("click",a=>{r(a)})}function cm(){const[r,a]=Nr(null),e=Tr(async o=>{if(!navigator?.clipboard)return console.warn("Clipboard not supported"),!1;try{return await navigator.clipboard.writeText(o),a(o),!0}catch(t){return console.warn("Copy failed",t),a(null),!1}},[]);return[r,e]}function Fp(r){const[a,e]=Nr(r??0),o=Tr(()=>{e(c=>c+1)},[]),t=Tr(()=>{e(c=>c-1)},[]),i=Tr(()=>{e(r??0)},[r]);return{count:a,increment:o,decrement:t,reset:i,setCount:e}}function Np(r,a){const e=Fa(r);Na(()=>{e.current=r},[r]),le(()=>{if(a===null)return;const o=setInterval(()=>{e.current()},a);return()=>{clearInterval(o)}},[a])}function im({countStart:r,countStop:a=0,intervalMs:e=1e3,isIncrement:o=!1}){const{count:t,increment:i,decrement:c,reset:l}=Fp(r),{value:d,setTrue:u,setFalse:g}=Op(!1),p=Tr(()=>{g(),l()},[g,l]),v=Tr(()=>{if(t===a){g();return}o?i():c()},[t,a,c,i,o,g]);return Np(v,d?e:null),[t,{startCountdown:u,stopCountdown:g,resetCountdown:p}]}function Dn(r){const a=(0,h.useRef)(()=>{throw new Error("Cannot call an event handler while rendering.")});return Na(()=>{a.current=r},[r]),(0,h.useCallback)((...e)=>{var o;return(o=a.current)==null?void 0:o.call(a,...e)},[a])}var Pi=typeof window>"u";function Mi(r,a,e={}){const{initializeWithValue:o=!0}=e,t=(0,h.useCallback)(v=>e.serializer?e.serializer(v):JSON.stringify(v),[e]),i=(0,h.useCallback)(v=>{if(e.deserializer)return e.deserializer(v);if(v==="undefined")return;const m=a instanceof Function?a():a;let b;try{b=JSON.parse(v)}catch($){return console.error("Error parsing JSON:",$),m}return b},[e,a]),c=(0,h.useCallback)(()=>{const v=a instanceof Function?a():a;if(Pi)return v;try{const m=window.localStorage.getItem(r);return m?i(m):v}catch(m){return console.warn(`Error reading localStorage key \u201C${r}\u201D:`,m),v}},[a,r,i]),[l,d]=(0,h.useState)(()=>o?c():a instanceof Function?a():a),u=Dn(v=>{Pi&&console.warn(`Tried setting localStorage key \u201C${r}\u201D even though environment is not a client`);try{const m=v instanceof Function?v(c()):v;window.localStorage.setItem(r,t(m)),d(m),window.dispatchEvent(new StorageEvent("local-storage",{key:r}))}catch(m){console.warn(`Error setting localStorage key \u201C${r}\u201D:`,m)}}),g=Dn(()=>{Pi&&console.warn(`Tried removing localStorage key \u201C${r}\u201D even though environment is not a client`);const v=a instanceof Function?a():a;window.localStorage.removeItem(r),d(v),window.dispatchEvent(new StorageEvent("local-storage",{key:r}))});(0,h.useEffect)(()=>{d(c())},[r]);const p=(0,h.useCallback)(v=>{v.key&&v.key!==r||d(c())},[r,c]);return _a("storage",p),_a("local-storage",p),[l,u,g]}var Hp=typeof window>"u";function fd(r,{defaultValue:a=!1,initializeWithValue:e=!0}={}){const o=l=>Hp?a:window.matchMedia(l).matches,[t,i]=Nr(()=>e?o(r):a);function c(){i(o(r))}return Na(()=>{const l=window.matchMedia(r);return c(),l.addListener?l.addListener(c):l.addEventListener("change",c),()=>{l.removeListener?l.removeListener(c):l.removeEventListener("change",c)}},[r]),t}var Vp="(prefers-color-scheme: dark)",Up="usehooks-ts-dark-mode";function sm(r={}){const{defaultValue:a,localStorageKey:e=Up,initializeWithValue:o=!0}=r,t=fd(Vp,{initializeWithValue:o,defaultValue:a}),[i,c]=Mi(e,a??t??!1,{initializeWithValue:o});return Na(()=>{t!==i&&c(t)},[t]),{isDarkMode:i,toggle:()=>{c(l=>!l)},enable:()=>{c(!0)},disable:()=>{c(!1)},set:l=>{c(l)}}}function md(r){const a=(0,h.useRef)(r);a.current=r,(0,h.useEffect)(()=>()=>{a.current()},[])}function On(r,a=500,e){const o=(0,h.useRef)();md(()=>{o.current&&o.current.cancel()});const t=(0,h.useMemo)(()=>{const i=pd(r,a,e),c=(...l)=>i(...l);return c.cancel=()=>{i.cancel()},c.isPending=()=>!!o.current,c.flush=()=>i.flush(),c},[r,a,e]);return(0,h.useEffect)(()=>{o.current=pd(r,a,e)},[r,a,e]),t}function lm(r,a,e){const o=e?.equalityFn??((u,g)=>u===g),t=r instanceof Function?r():r,[i,c]=Nr(t),l=Fa(t),d=On(c,a,e);return o(l.current,t)||(d(t),l.current=t),[i,d]}function dm(r,a={}){const{preserveTitleOnUnmount:e=!0}=a,o=Fa(null);Na(()=>{o.current=window.document.title},[]),Na(()=>{window.document.title=r},[r]),md(()=>{!e&&o.current&&(window.document.title=o.current)})}function um(r){const[a,e]=Nr(!1),o=()=>{e(!0)},t=()=>{e(!1)};return _a("mouseenter",o,r),_a("mouseleave",t,r),a}function hm({threshold:r=0,root:a=null,rootMargin:e="0%",freezeOnceVisible:o=!1,initialIsIntersecting:t=!1,onChange:i}={}){var c;const[l,d]=Nr(null),[u,g]=Nr(()=>({isIntersecting:t,entry:void 0})),p=Fa();p.current=i;const v=((c=u.entry)==null?void 0:c.isIntersecting)&&o;le(()=>{if(!l||!("IntersectionObserver"in window)||v)return;let $;const k=new IntersectionObserver(_=>{const y=Array.isArray(k.thresholds)?k.thresholds:[k.thresholds];_.forEach(z=>{const x=z.isIntersecting&&y.some(S=>z.intersectionRatio>=S);g({isIntersecting:x,entry:z}),p.current&&p.current(x,z),x&&o&&$&&($(),$=void 0)})},{threshold:r,root:a,rootMargin:e});return k.observe(l),()=>{k.disconnect()}},[l,JSON.stringify(r),a,e,v,o]);const m=Fa(null);le(()=>{var $;!l&&(($=u.entry)!=null&&$.target)&&!o&&!v&&m.current!==u.entry.target&&(m.current=u.entry.target,g({isIntersecting:t,entry:void 0}))},[l,u.entry,o,v,t]);const b=[d,!!u.isIntersecting,u.entry];return b.ref=b[0],b.isIntersecting=b[1],b.entry=b[2],b}function gm(){const[r,a]=Nr(!1);return le(()=>{a(!0)},[]),r}function Wp(){const r=Fa(!1);return le(()=>(r.current=!0,()=>{r.current=!1}),[]),Tr(()=>r.current,[])}function vm(r=new Map){const[a,e]=Nr(new Map(r)),o={set:Tr((t,i)=>{e(c=>{const l=new Map(c);return l.set(t,i),l})},[]),setAll:Tr(t=>{e(()=>new Map(t))},[]),remove:Tr(t=>{e(i=>{const c=new Map(i);return c.delete(t),c})},[]),reset:Tr(()=>{e(()=>new Map)},[])};return[a,o]}function pm(r,a,e="mousedown",o={}){_a(e,t=>{const i=t.target;if(!i||!i.isConnected)return;(Array.isArray(r)?r.filter(l=>!!l.current).every(l=>l.current&&!l.current.contains(i)):r.current&&!r.current.contains(i))&&a(t)},void 0,o)}var bd=typeof window>"u";function fm(r,a={}){let{initializeWithValue:e=!0}=a;bd&&(e=!1);const o=Tr(d=>{if(a.deserializer)return a.deserializer(d);if(d==="undefined")return;let u;
6252try{u=JSON.parse(d)}catch(g){return console.error("Error parsing JSON:",g),null}return u},[a]),t=Tr(()=>{if(bd)return null;try{const d=window.localStorage.getItem(r);return d?o(d):null}catch(d){return console.warn(`Error reading localStorage key \u201C${r}\u201D:`,d),null}},[r,o]),[i,c]=Nr(()=>{if(e)return t()});le(()=>{c(t())},[r]);const l=Tr(d=>{d.key&&d.key!==r||c(t())},[r,t]);return _a("storage",l),_a("local-storage",l),i}var $d={width:void 0,height:void 0};function mm(r){const{ref:a,box:e="content-box"}=r,[{width:o,height:t},i]=Nr($d),c=Wp(),l=Fa({...$d}),d=Fa(void 0);return d.current=r.onResize,le(()=>{if(!a.current||typeof window>"u"||!("ResizeObserver"in window))return;const u=new ResizeObserver(([g])=>{const p=e==="border-box"?"borderBoxSize":e==="device-pixel-content-box"?"devicePixelContentBoxSize":"contentBoxSize",v=yd(g,p,"inlineSize"),m=yd(g,p,"blockSize");if(l.current.width!==v||l.current.height!==m){const $={width:v,height:m};l.current.width=v,l.current.height=m,d.current?d.current($):c()&&i($)}});return u.observe(a.current,{box:e}),()=>{u.disconnect()}},[e,a,c]),{width:o,height:t}}function yd(r,a,e){return r[a]?Array.isArray(r[a])?r[a][0][e]:r[a][e]:a==="contentBoxSize"?r.contentRect[e==="inlineSize"?"width":"height"]:void 0}var xd=typeof window>"u";function bm(r={}){let{initializeWithValue:a=!0}=r;xd&&(a=!1);const e=()=>
6252{if(!xd)return window.screen},[o,t]=Nr(()=>{if(a)return e()}),i=On(t,r.debounceDelay);function c(){const l=e(),d=r.debounceDelay?i:t;if(l){const{width:u,height:g,availHeight:p,availWidth:v,colorDepth:m,orientation:b,pixelDepth:$}=l;d({width:u,height:g,availHeight:p,availWidth:v,colorDepth:m,orientation:b,pixelDepth:$})}}return _a("resize",c),Na(()=>{c()},[]),o}var Fn=new Map;function Kp(r){const a=document.querySelector(`script[src="${r}"]`),e=a?.getAttribute("data-status");return{node:a,status:e}}function $m(r,a){const[e,o]=Nr(()=>!r||a?.shouldPreventLoad?"idle":typeof window>"u"?"loading":Fn.get(r)??"loading");return le(()=>{if(!r||a?.shouldPreventLoad)return;const t=Fn.get(r);if(t==="ready"||t==="error"){o(t);return}const i=Kp(r);let c=i.node;if(c)o(i.status??t??"loading");else{c=document.createElement("script"),c.src=r,c.async=!0,a?.id&&(c.id=a.id),c.setAttribute("data-status","loading"),document.body.appendChild(c);const d=u=>{const g=u.type==="load"?"ready":"error";c?.setAttribute("data-status",g)};c.addEventListener("load",d),c.addEventListener("error",d)}const l=d=>{const u=d.type==="load"?"ready":"error";o(u),Fn.set(r,u)};return c.addEventListener("load",l),c.addEventListener("error",l),()=>{c&&(c.removeEventListener("load",l),c.removeEventListener("error",l)),c&&a?.removeOnUnmount&&(c.remove(),Fn.delete(r))}},[r,a?.shouldPreventLoad,a?.removeOnUnmount,a?.id]),e}var Gp=typeof window>"u";function ym(r={}){const{autoLock:a=!0,lockTarget:e,widthReflow:o=!0}=r,[t,i]=Nr(!1),c=Fa(null),l=Fa(null),d=()=>{if(c.current){const{overflow:g,paddingRight:p}=c.current.style;if(l.current={overflow:g,paddingRight:p},o){const v=c.current===document.body?window.innerWidth:c.current.offsetWidth,m=parseInt(window.getComputedStyle(c.current).paddingRight,10)||0,b=v-c.current.scrollWidth;c.current.style.paddingRight=`${b+m}px`}c.current.style.overflow="hidden",i(!0)}},u=()=>{c.current&&l.current&&(c.current.style.overflow=l.current.overflow,o&&(c.current.style.paddingRight=l.current.paddingRight)),i(!1)};return Na(()=>{if(!Gp)return e&&(c.current=typeof e=="string"?document.querySelector(e):e),c.current||(c.current=document.body),a&&d(),()=>{u()}},[a,e,o]),{isLocked:t,lock:d,unlock:u}}var Bi=typeof window>"u";function Yp(r,a,e={}){const{initializeWithValue:o=!0}=e,t=(0,h.useCallback)(v=>e.serializer?e.serializer(v):JSON.stringify(v),[e]),i=(0,h.useCallback)(v=>{if(e.deserializer)return e.deserializer(v);if(v==="undefined")return;const m=a instanceof Function?a():a;let b;try{b=JSON.parse(v)}catch($){return console.error("Error parsing JSON:",$),m}return b},[e,a]),c=(0,h.useCallback)(()=>{const v=a instanceof Function?a():a;if(Bi)return v;try{const m=window.sessionStorage.getItem(r);return m?i(m):v}catch(m){return console.warn(`Error reading sessionStorage key \u201C${r}\u201D:`,m),v}},[a,r,i]),[l,d]=(0,h.useState)(()=>o?c():a instanceof Function?a():a),u=Dn(v=>{Bi&&console.warn(`Tried setting sessionStorage key \u201C${r}\u201D even though environment is not a client`);try{const m=v instanceof Function?v(c()):v;window.sessionStorage.setItem(r,t(m)),d(m),window.dispatchEvent(new StorageEvent("session-storage",{key:r}))}catch(m){console.warn(`Error setting sessionStorage key \u201C${r}\u201D:`,m)}}),g=Dn(()=>{Bi&&console.warn(`Tried removing sessionStorage key \u201C${r}\u201D even though environment is not a client`);const v=a instanceof Function?a():a;window.sessionStorage.removeItem(r),d(v),window.dispatchEvent(new StorageEvent("session-storage",{key:r}))});(0,h.useEffect)(()=>{d(c())},[r]);const p=(0,h.useCallback)(v=>{v.key&&v.key!==r||d(c())},[r,c]);return _a("storage",p),_a("session-storage",p),[l,u,g]}function xm(r){const[a,e]=Nr(1),o=a+1<=r,t=a-1>0,i=Tr(u=>{const g=u instanceof Function?u(a):u;if(g>=1&&g<=r){e(g);return}throw new Error("Step not valid")},[r,a]),c=Tr(()=>{o&&e(u=>u+1)},[o]),l=Tr(()=>{t&&e(u=>u-1)},[t]),d=Tr(()=>{e(1)},[]);return[a,{goToNextStep:c,goToPrevStep:l,canGoToNextStep:o,canGoToPrevStep:t,setStep:i,reset:d}]}var qp="(prefers-color-scheme: dark)",Zp="usehooks-ts-ternary-dark-mode";function km({defaultValue:r="system",localStorageKey:a=Zp,initializeWithValue:e=!0}={}){const o=fd(qp,{initializeWithValue:e}),[t,i]=Mi(a,r,{initializeWithValue:e});return{isDarkMode:t==="dark"||t==="system"&&o,ternaryDarkMode:t,setTernaryDarkMode:i,toggleTernaryDarkMode:()=>{const d=["light","system","dark"];i(u=>{const g=(d.indexOf(u)+1)%d.length;return d[g]})}}}function wm(r,a){const e=Fa(r);Na(()=>{e.current=r},[r]),le(()=>{if(!a&&a!==0)return;const o=setTimeout(()=>{e.current()},a);return()=>{clearTimeout(o)}},[a])}function Cm(r){const[a,e]=Nr(!!r),o=Tr(()=>{e(t=>!t)},[]);return[a,o,e]}var Xp=typeof window>"u";function Am(r={}){let{initializeWithValue:a=!0}=r;Xp&&(a=!1);const[e,o]=Nr(()=>a?{width:window.innerWidth,height:window.innerHeight}:{width:void 0,height:void 0}),t=On(o,r.debounceDelay);function i(){(r.debounceDelay?t:o)({width:window.innerWidth,height:window.innerHeight})}return _a("resize",i),Na(()=>{i()},[]),e}const Jp=(r,a)=>{const e=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set;e?e.call(r,a):r.value=a,r.dispatchEvent(new Event("input",{bubbles:!0}))},Qp=({defaultValue:r="",value:a,debounceMs:e,inputElementRef:o,onClear:t,onKeyDown:i,onSearch:c})=>{const l=a!==void 0,d=c!==void 0&&e!==void 0,[u,g]=(0,h.useState)(r),p=l?a??"":u,v=(0,h.useRef)(!1),m=On(y=>{c?.(y)},e??0),b=(0,h.useCallback)(()=>{m.cancel()},[m]),$=(0,h.useCallback)(y=>{l||g(y)},[l]);(0,h.useEffect)(()=>b,[b]),(0,h.useEffect)(()=>
6252{if(d){if(!v.current){v.current=!0;return}b(),m(p)}},[b,m,p,d]);const k=(0,h.useCallback)(()=>{b();const y=o.current;if(y){Jp(y,""),t?.(),y.focus();return}l||g(""),t?.()},[b,o,l,t]),_=(0,h.useCallback)(y=>{i?.(y),!(y.defaultPrevented||y.key!=="Enter"||!c)&&(b(),c(p))},[b,i,c,p]);return{resolvedValue:p,handleValueChange:$,handleClear:k,handleKeyDown:_}},rf=bi,af=$i,ef=q(Gl,["outline","solid"]),kd="Search",of="Clear search",Di={layout:"hug",size:"inherit",variant:"outline"},tf=({canClear:r,isDisabled:a,onClear:e})=>{if(r)return(0,n.jsx)(cd,{"aria-label":of,disabled:a,icon:"fa-regular fa-xmark",onClick:e})},nf=({ariaLabel:r,ariaLabelledBy:a,headerLabel:e})=>r??(!e&&!a?kd:void 0),wd=(0,h.forwardRef)(({debounceMs:r,inputProps:a,layout:e=Di.layout,onClear:o,onSearch:t,size:i=Di.size,variant:c=Di.variant,headerLabel:l,headerSlot:d,footerCaption:u,footerSlot:g,onChange:p,...v},m)=>{const{id:b,value:$,defaultValue:k="",onChange:_,onKeyDown:y,placeholder:z=kd,disabled:x,readOnly:S,required:D,"aria-label":B,"aria-labelledby":F,...T}=a,C=Ir(b,"arc-search"),W=(0,h.useRef)(null),{resolvedValue:H,handleValueChange:ar,handleClear:K,handleKeyDown:or}=Qp({defaultValue:k,value:$,debounceMs:r,inputElementRef:W,onClear:o,onKeyDown:y,onSearch:t}),nr=!x&&!S&&H.length>0,gr=nf({ariaLabel:B,ariaLabelledBy:F,headerLabel:l}),M=tf({canClear:nr,isDisabled:x,onClear:K}),O=L=>{W.current=L,La(m,L)},N=(L,Z)=>{ar(Z.target.value),_?.(L,Z)};return(0,n.jsx)(jn,{...v,"arc-search":"",layout:e,size:i,variant:c,ref:O,onChange:p,headerLabel:l,headerSlot:d,inputPrefix:(0,n.jsx)(cr,{icon:"fa-regular fa-search"}),inputAction:M,footerCaption:u,footerSlot:g,inputProps:{...T,id:C,value:H,disabled:x,placeholder:z,readOnly:S,required:D,onChange:N,onKeyDown:or,"aria-disabled":x||void 0,"aria-label":gr,"aria-labelledby":F,"aria-readonly":S||void 0,"aria-required":D||void 0}})});wd.displayName="ArcSearch";const cf=bi,sf=$i,lf=q(zr,["outline","solid","plain"]),Cd=()=>typeof globalThis?.CSS?.supports=="function"&&globalThis.CSS.supports("appearance","base-select"),Nn=r=>Array.isArray(r.options),bo=r=>{const a=r?.variant;return a!=="divider"&&a!=="section-label"},Ad=r=>r?.variant==="section-label"&&!!(r.text||r.icon),Sd=r=>{},zd=(r=[])=>r.flatMap(a=>Nn(a)?a.options:[a]).some(a=>bo(a)&&a.value===""),Ed=r=>{const a=t=>typeof t=="string"&&t.trim().length>0,e=t=>{if(typeof t!="object"||t===null)return;const{name:i}=t;return a(i)?i:void 0};return[r?.text,e(r?.avatar),r?.["aria-label"]].find(a)??"Anonymous"},pt=s`--arcâ¢select`,ha=s`${pt}â¢picker`,_d=s`${ha}â¢fg`,Td=s`${ha}â¢bg`,Oi=s`${pt}â¢option`,ft=s`${Oi}â¢fg`,mt=s`${Oi}â¢bg`,We=s`${Oi}â¢icon`,df=s` 6253 ${_d}: currentcolor; 6254 ${Td}: var(--arc-color-bg-mono); 6255 ${pt}â¢placeholderâ¢fg: var(--arc-select-placeholder-color, var(--arc-color-fg-secondary)); 6256 6257 ${ha}â¢width: auto; 6258 ${ha}â¢minâ¢width: 3em; 6259 ${ha}â¢borderâ¢radius: var(--arc-border-radius-lg); 6260 ${ha}â¢shadow: var(--arc-shadow-lg); 6261 6262 ${ft}: currentcolor; 6263 ${mt}: transparent; 6264 6265 ${We}â¢display: none; 6266 ${We}â¢color: var(${ft}); 6267`,uf=s` 6268 &[data-layout=fill] { 6269 ${ha}â¢width: 100%; /* fallback */ 6270 ${ha}â¢width: anchor-size(inline); 6271 } 6272`,hf=s` 6273 [arc-select] ::picker(select) { 6274 transition-behavior: allow-discrete, smooth; 6275 transition-duration: var(--arc-select-transition-duration, 240ms); 6276 transition-property: display, opacity; 6277 transition-timing-function: ease-out; 6278 } 6279 6280 @supports (overlay: auto) { 6281 [arc-select] ::picker(select) { 6282 transition-behavior: allow-discrete; 6283 transition-property: display, overlay, opacity; 6284 } 6285 } 6286`,gf=s` 6287 [arc-select] { 6288 ::picker(select) { 6289 opacity: 0; 6290 } 6291 6292 ::picker(select):popover-open { 6293 opacity: 1; 6294 } 6295 } 6296 6297 @starting-style { 6298 [arc-select] ::picker(select):popover-open { 6299 opacity: 0; 6300 } 6301 } 6302`,vf=s` 6303@layer arc-components { 6304 6305 /* SETUP ---------------------------------------------------------⢠*/ 6306 6307 [arc-select] { 6308 ${df} 6309 ${uf} 6310 } 6311 6312 /* CORE ----------------------------------------------------------⢠*/ 6313 6314 [arc-select] { 6315 select, 6316 ::picker(select) { 6317 appearance: base-select; 6318 } 6319 6320 ::picker(select) { 6321 flex: 1; 6322 display: var(${ha}â¢display, none); 6323 flex-direction: column; 6324 gap: var(${E}â¢4); 6325 border: none; 6326 color: var(${_d}); 6327 width: var(--arc-select-picker-width, var(${ha}â¢width)); 6328 min-width: var(--arc-select-picker-min-width, var(${ha}â¢minâ¢width)); 6329 margin: var(--arc-select-picker-margin, var(${E}â¢4) 0);
6330 padding: var(--arc-select-picker-padding, var(${E}â¢4)); 6331 background: var(--arc-select-picker-background, var(${Td})); 6332 border-radius: var(--arc-select-picker-border-radius, var(${ha}â¢borderâ¢radius)); 6333 box-shadow: var(--arc-select-picker-shadow, var(${ha}â¢shadow)); 6334 } 6335 6336 ::picker(select):popover-open { 6337 ${ha}â¢display: flex; 6338 } 6339 6340 /* Hide default picker icon */ 6341 ::picker-icon { 6342 display: none; 6343 } 6344 6345 select { 6346 flex: 1; 6347 align-items: center; 6348 font: inherit; 6349 color: inherit; 6350 background: transparent; 6351 border: none; 6352 padding: 0; 6353 margin: 0; 6354 padding-inline: var(${f}â¢12); 6355 max-width: var(--arc-select-max-width, var(--jsâ¢maxâ¢width, none)); 6356 } 6357 6358 [arc-select-button] { 6359 display: flex; 6360 align-items: center; 6361 gap: var(${E}â¢8); 6362 width: 100%; 6363 } 6364 6365 [arc-select-placeholder] { 6366 flex: 1; 6367 color: var(${pt}â¢placeholderâ¢fg); 6368 } 6369 6370 selectedcontent { 6371 /* Inter-Component Communication -----------------------------⢠*/ 6372 --arc-icon-text-font-weight: normal; 6373 --arc-icon-text-subtext-display: none; 6374 --arc-avatar-text-font-weight: normal; 6375 --arc-avatar-subtext-display: none; 6376 --arc-avatar-size: var(${f}â¢24); 6377 --arc-avatar-initial-font-size: var(${f}â¢12); 6378 6379 flex: 1; 6380 display: flex; 6381 align-items: center; 6382 width: 100%; 6383 min-width: 0; 6384 6385 [arc-select-icon=selected] { 6386 display: none; 6387 } 6388 } 6389 6390 /* Hide the cloned <selectedcontent> when the placeholder span drives the trigger. */ 6391 select[data-placeholder] selectedcontent { 6392 display: none; 6393 } 6394 6395 [arc-select-option-group-legend] { 6396 font-size: var(${f}â¢12); 6397 font-weight: var(--arc-font-weight-600); 6398 color: var(--arc-select-legend-color, var(--arc-color-fg-secondary)); 6399 padding: var(--arc-select-legend-padding, var(${E}â¢8)); 6400 cursor: default; 6401 } 6402 6403 /* Separator above each legend after the first optgroup. */ 6404 optgroup ~ optgroup [arc-select-option-group-legend] { 6405 border-top: var(${f}â¢1) solid var(--arc-color-border-mid); 6406 margin-top: var(${E}â¢4); 6407 } 6408 6409 [arc-select-option] { 6410 flex: none; 6411 display: grid; 6412 grid-template-columns: 1fr auto; 6413 align-items: center; 6414 gap: var(${E}â¢8); 6415 width: 100%; 6416 min-width: 0; 6417 color: var(${ft}); 6418 background: var(--arc-select-option-background, var(${mt})); 6419 border-radius: var(--arc-select-option-border-radius, var(--arc-border-radius-md)); 6420 padding: var(--arc-select-option-padding, var(${E}â¢8)); 6421 6422 &::checkmark { 6423 display: none; 6424 } 6425 6426 &:disabled { 6427 ${ft}: var(--arc-color-fg-disabled); 6428 ${mt}: transparent; 6429 ${We}â¢display: none; 6430 cursor: var(--arc-select-disabled-cursor, not-allowed); 6431 } 6432 6433 &:not(:disabled):hover { 6434 ${mt}: var(--arc-color-bg-hover-default); 6435 } 6436 6437 &:not(:disabled):checked { 6438 ${mt}: var(--arc-color-bg-selected-default); 6439 ${We}â¢display: flex; 6440 ${We}â¢color: var(--arc-select-option-selected-icon-color, var(${ft})); 6441 } 6442 6443 [arc-select-icon=selected] { 6444 display: var(${We}â¢display, none); 6445 color: var(${We}â¢color, currentcolor); 6446 } 6447 } 6448 6449 @supports not (appearance: base-select) { 6450 select { 6451 appearance: none; 6452 background: transparent; 6453 outline: none; 6454 6455 /* caret */ 6456 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>"); 6457 background-repeat: no-repeat; 6458 background-size: 0.75em; 6459 background-origin: padding-box; 6460 background-position: calc(100% - 1em) center; 6461 padding-inline-end: 3em; 6462 } 6463 6464 select[data-placeholder] { 6465 color: var(${pt}â¢placeholderâ¢fg); 6466 } 6467 } 6468 } 6469 6470 ${hf} 6471 ${gf} 6472 6473} 6474`,pf=(0,h.forwardRef)(({layout:r="hug",size:a="inherit",variant:e="outline",tag:o="span",items:t,placeholder:i,renderItem:c,headerLabel:l,headerSlot:d,footerCaption:u,footerSlot:g,id:p,value:v,defaultValue:m,required:b,disabled:$,readOnly:k,maxWidth:_,inputProps:y,...z},x)=>
6474{const{name:S,onBlur:D,onChange:B,onFocus:F,onInput:T,"aria-describedby":C,"aria-label":W,"aria-labelledby":H,...ar}=z,K=Ir(p,"arc-select"),or=e==="plain"&&r==="fill"?"hug":r,nr=$||void 0,gr=k||void 0,M=b||void 0,O=Cd(),N=e!=="plain"&&!!(l||d),L=e!=="plain"&&!!(u||g),Z=typeof i=="string"&&i.length>0&&!zd(t),X=m??(Z?"":void 0),J=v??X,dr=Z&&J==="",j=O&&Z&&J==="",er=gr&&J!=null?String(J):void 0,pr=t.flatMap(V=>Nn(V)?V.options.filter(bo):bo(V)?[V]:(Sd(V),[])),xr=new Map(pr.map((V,Lr)=>[V,Lr])),Jr=V=>{const{itemId:Lr,...hr}=V,Mr=od(Ln(V));return(0,n.jsx)(Mr,{...hr})},ga=V=>{const Lr=xr.get(V)??0,hr=V["aria-disabled"]===!0||V.disabled===!0,Mr=typeof V.itemId=="string"&&V.itemId.length>0?V.itemId:Lr,Ta=String(V?.value??V?.itemId??Lr);return(0,n.jsx)("option",{value:Ta,disabled:hr||er!==void 0&&Ta!==er||void 0,"arc-select-option":"",children:O?(0,n.jsxs)(n.Fragment,{children:[c?c(V,Lr):Jr(V),(0,n.jsx)("span",{"arc-select-icon":"selected","aria-hidden":!0,children:(0,n.jsx)(cr,{icon:"fa-regular fa-check arc-fw"})})]}):Ed(V)},Mr)},xa=(V,Lr)=>{const hr=V.options.filter(bo);if(hr.length===0)return null;const Mr=V.options.find(Ad);return(0,n.jsxs)("optgroup",{label:V.label,disabled:V.disabled||void 0,children:[O&&Mr&&(0,n.jsx)("legend",{"arc-select-option-group-legend":"",children:Jr(Mr)}),hr.map(ga)]},V.itemId??`${V.label}-${Lr}`)};return(0,n.jsxs)(o,{...ar,"arc-select":"","arc-input":"select","data-layout":or,"data-size":a,"data-variant":e,children:[N&&(0,n.jsxs)(Ar.Header,{children:[(0,n.jsx)(Ar.HeaderLabel,{htmlFor:K,children:l}),!!d&&(0,n.jsx)(Ar.Spacer,{}),(0,n.jsx)(Ar.HeaderSlot,{children:d})]}),(0,n.jsx)(Ar.InputBody,{children:(0,n.jsxs)("select",{...y,name:y?.name??S,onBlur:y?.onBlur??D,onChange:y?.onChange??B,onFocus:y?.onFocus??F,onInput:y?.onInput??T,"aria-describedby":y?.["aria-describedby"]??C,"aria-label":y?.["aria-label"]??W,"aria-labelledby":y?.["aria-labelledby"]??H,value:v,defaultValue:v==null?X:void 0,required:b,disabled:$,ref:x,id:K,"aria-disabled":nr,"aria-required":M,"data-readonly":gr,"data-placeholder":dr||void 0,style:{..._?{"--js\u2022max\u2022width":_}:{},...y?.style},children:[(0,n.jsxs)("button",{"arc-select-button":"",children:[j&&(0,n.jsx)(Yr,{"arc-select-placeholder":"",text:i,overflow:"truncate"}),(0,n.jsx)("selectedcontent",{}),(0,n.jsx)("span",{"aria-hidden":!0,children:(0,n.jsx)(cr,{icon:"fa-regular fa-angle-down arc-fw"})})]}),Z&&(0,n.jsx)("option",{value:"",disabled:!0,hidden:!0,children:i}),t.map((V,Lr)=>Nn(V)?xa(V,Lr):bo(V)?ga(V):null)]})}),L&&(0,n.jsxs)(Ar.Footer,{children:[(0,n.jsx)(Ar.FooterCaption,{children:u}),!!g&&(0,n.jsx)(Ar.Spacer,{}),(0,n.jsx)(Ar.FooterSlot,{children:g})]})]})});ir("ArcSelect",vf);
6474const ff=q(aa,["inherit","md","sm"]),Hr={On:"on",Off:"off"},$o={Before:"before",After:"after"},mf=({disabled:r,id:a,name:e,size:o="md",value:t,labelOff:i,labelOn:c,onChange:l,...d})=>{const u=Ir(e,"arc-switch-name"),g=Ir(a?`${a}-off`:void 0,"arc-switch-off"),p=Ir(a?`${a}-on`:void 0,"arc-switch-on"),v=y=>{if(y.code==="Space"){y.preventDefault(),y.stopPropagation();const z=t===Hr.On?Hr.Off:Hr.On;l?.({value:z},y)}},m=y=>{const z={on:Po(c),off:Po(i)};return z?.on&&z?.off?z[y]:!z?.on&&z?.off?`${z?.off}: ${y}`:z?.on&&!z?.off?`${z?.on}: ${y}`:z[y]},b=(0,n.jsxs)(un,{type:"switch",onKeyDown:v,children:[(0,n.jsx)(Qo,{type:"switch",name:u,id:g,value:Hr.Off,checked:t===Hr.Off,disabled:r,"aria-label":m(Hr.Off)?.trim(),onChange:l}),(0,n.jsx)(Qo,{type:"switch",name:u,id:p,value:Hr.On,checked:t===Hr.On,disabled:r,"aria-label":m(Hr.On)?.trim(),onChange:l}),(0,n.jsx)("span",{"data-element":"mask"})]}),$=!c&&t===Hr.Off?p:g,k=!i&&t===Hr.On?g:p,_=!!(c||i)&&(0,n.jsxs)(n.Fragment,{children:[!!i&&(0,n.jsx)(me,{htmlFor:$,"arc-switch-label":c?Hr.Off:"",children:(0,n.jsx)(Oe,{children:i})}),b,!!c&&(0,n.jsx)(me,{htmlFor:k,"arc-switch-label":i?Hr.On:"",children:(0,n.jsx)(Oe,{children:c})})]});return(0,n.jsx)("span",{...d,"arc-switch":"","data-state":t,"data-size":o,role:"radiogroup",children:_||b})},Pr=s`--arcâ¢switch`,$r=s`${Pr}â¢knob`,bf=s` 6475@layer arc-components { 6476 6477 [arc-switch] { 6478 ${Pr}â¢background: var(--arc-color-alpha-white-100); 6479 ${$r}â¢shadow: var(--arc-shadow-md); 6480 6481 &:has(:disabled) { 6482 ${Pr}â¢background: var(--arc-color-alpha-white-70); 6483 ${$r}â¢shadow: var(--arc-shadow-none); 6484 6485 [arc-switch-label] { 6486 --arc-label-cursor: not-allowed; 6487 --arc-label-opacity: var(--arc-alpha-60); 6488 } 6489 } 6490 6491 /* Uses Neutral-ish Colors */ 6492 &[data-state=off] { 6493 ${I}â¢background: var(--arc-color-bg-neutral-subtle); 6494 ${I}â¢borderâ¢color: var(--arc-color-border-stark); 6495 ${$r}â¢borderâ¢color: var(--arc-color-border-on-stark); 6496 ${$r}â¢color: var(--arc-color-fg-on-heavy); 6497 6498 &:not(:has(:disabled)):hover { 6499 ${I}â¢borderâ¢color: var(--arc-color-border-heavy); 6500 ${$r}â¢borderâ¢color: var(--arc-color-border-heavy); 6501 } 6502 6503 &:has(:disabled) { 6504 ${I}â¢background: var(--arc-color-bg-disabled); 6505 ${I}â¢borderâ¢color: var(--arc-color-border-disabled); 6506 ${$r}â¢borderâ¢color: var(--arc-color-border-on-stark); 6507 ${$r}â¢color: var(--arc-color-bg-tertiary); 6508 } 6509 } 6510 6511 /* Uses Theme Colors */ 6512 &[data-state=on] { 6513 ${I}â¢background: var(--arc-color-bg-theme-heavy); 6514 ${I}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 6515 ${$r}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 6516 ${$r}â¢color: var(--arc-color-fg-on-theme-heavy); 6517 6518 &:not(:has(:disabled)):hover { 6519 ${I}â¢opacity: var(--arc-alpha-60); 6520 } 6521 6522 &:has(:disabled) { 6523 ${I}â¢opacity: var(--arc-alpha-30); 6524 } 6525 } 6526 6527 /* SIZES ------------------------------------------------------⢠*/ 6528 &[data-size=inherit] { 6529 ${Pr}â¢fontâ¢size: 1em; 6530 ${Pr}â¢width: 2.5em; 6531 ${Pr}â¢height: 1.5em; 6532 ${Pr}â¢gap: 0.5em; 6533 ${$r}â¢size: 1.5em; 6534 ${$r}â¢xâ¢shift: 0.25em; 6535 } 6536 6537 &[data-size=md] { /* @default */ 6538 ${Pr}â¢fontâ¢size: var(${f}â¢14); 6539 ${Pr}â¢width: var(${f}â¢40); 6540 ${Pr}â¢height: var(${f}â¢24); 6541 ${Pr}â¢gap: var(${f}â¢8); 6542 ${$r}â¢xâ¢shift: var(${f}â¢4); 6543 ${$r}â¢size: var(${f}â¢24); 6544 } 6545 6546 &[data-size=sm] { 6547 ${Pr}â¢fontâ¢size: var(${f}â¢12); 6548 ${Pr}â¢width: var(${f}â¢30); 6549 ${Pr}â¢height: var(${f}â¢14); 6550 ${Pr}â¢gap: var(${f}â¢8); 6551 ${$r}â¢xâ¢shift: var(${f}â¢1); 6552 ${$r}â¢size: var(${f}â¢16); 6553 } 6554 6555 /* Inter-Component Communication -------------------------------⢠*/ 6556 /* for: Setup defaults for ArcBooleanInputMask */ 6557 ${I}â¢borderâ¢radius: var(--arc-border-radius-pill); 6558 ${I}â¢width: var(${Pr}â¢width); 6559 ${I}â¢height: var(${Pr}â¢height); 6560 ${I}â¢xâ¢shift: var(${$r}â¢xâ¢shift); 6561 ${I}â¢size: var(${$r}â¢size); 6562 6563 /* for: ArcLabel */ 6564 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask to 6565 stay inline with the label text 6566 regardless of applied line-height */ 6567 6568 /* KNOB PLACEMENT ----------------------------------------------⢠*/ 6569 &[data-state=off] { 6570 ${$r}â¢translate: calc(-100% + var(${$r}â¢xâ¢shift)) -50%; 6571 } 6572 6573 &[data-state=on] { 6574 ${$r}â¢translate: calc(0% - var(${$r}â¢xâ¢shift)) -50%; 6575 } 6576 } 6577 6578 /* CORE STYLES ---------------------------------------------------⢠*/ 6579 [arc-switch]:not([hidden]) { 6580 font-size: var(--arc-switch-font-size, var(${Pr}â¢fontâ¢size)); 6581 display: var(--arc-switch-display, inline-flex); 6582 align-items: var(--arc-switch-align-items, center); 6583 gap: var(--arc-switch-gap, var(${Pr}â¢gap)); 6584 user-select: none; 6585 6586 [arc-switch-label] { 6587 font-size: inherit; 6588 hyphens: auto; 6589 } 6590
6591 [arc-input-type=switch]:where(:not(:checked)) { 6592 ${I}â¢zâ¢index: 1; 6593 } 6594 6595 [arc-input-mask-wrapper] { 6596 height: 1.25em; 6597 } 6598 6599 /* the knob */ 6600 [data-element=mask] { 6601 position: absolute; 6602 top: 50%; 6603 left: 50%; 6604 translate: var(${$r}â¢translate); 6605 6606 display: inline-flex; 6607 width: var(${$r}â¢size); 6608 height: var(${$r}â¢size); 6609 6610 transition-duration: 100ms; 6611 transition-behavior: allow-discrete; 6612 transition-timing-function: ease-in-out; 6613 transition-property: 6614 opacity, 6615 background, 6616 color, 6617 border-color, 6618 outline, 6619 translate; 6620 6621 background: var(${$r}â¢color); 6622 box-shadow: var(${$r}â¢shadow); 6623 border: var(${I}â¢borderâ¢width) solid var(${$r}â¢borderâ¢color); 6624 border-radius: var(--arc-border-radius-circle); 6625 pointer-events: none; 6626 } 6627 } 6628 6629} 6630`,$f=({disabled:r,id:a,name:e,size:o="md",value:t,label:i,labelPosition:c=$o.After,onChange:l,labelOff:d,labelOn:u,...g})=>{const p=Ir(e,"arc-switch-name"),v=Ir(a,"arc-switch"),m=(k,_)=>{const y=k.checked?Hr.On:Hr.Off;l?.({...k,value:y},_)};!i&&(u||d)&&(i=u||d,c=u?$o.After:$o.Before);const b=(0,n.jsxs)(un,{type:"checkbox",children:[(0,n.jsx)(Qo,{type:"checkbox",name:p,id:v,checked:t===Hr.On,disabled:r,role:"switch","aria-checked":t===Hr.On,"aria-label":i?void 0:"Toggle switch",tabIndex:0,onChange:m}),(0,n.jsx)("span",{"data-element":"mask","aria-hidden":"true",tabIndex:-1})]}),$=(0,n.jsx)(me,{htmlFor:v,"arc-switch-label":c,children:(0,n.jsx)(Oe,{children:i})});return d&&u?(0,n.jsx)(mf,{...g,disabled:r,id:a,name:e,labelOff:d,labelOn:u,size:o,value:t,onChange:l}):(0,n.jsxs)("span",{...g,"arc-switch":"","data-state":t,"data-size":o,"data-label-position":c,role:"presentation","aria-live":"off",children:[i&&c===$o.Before&&$,b,i&&c===$o.After&&$]})};ir("ArcSwitch",bf);const yf=["title","heading","subheading","body"],Id=["h1","h2","h3","h4","h5","h6"],jd=["code","div","li","p","pre","span"],Ld=[...Id,...jd],xf=[...re],kf=["title-inherit","title-lg","title-md","title-sm"],wf=["heading-inherit","heading-lg","heading-md","heading-sm"],Cf=["subheading-inherit","subheading-lg","subheading-md","subheading-sm"],Af=q(zr,["inherit","primary","primary-inverse"]),Sf=["body-inherit","body-lg","body-md","body-sm","body-xs"],zf=Kr(zr,["inherit","primary","secondary","primary-inverse","secondary-inverse","critical","warning","success","info"]),Ef=q(St,["inherit","start","center","justify","end"]),_f=q(zt,["inherit","loose","standard","tight"]),Tf={h1:"title",h2:"heading",h3:"heading",h4:"subheading",h5:"subheading",h6:"subheading",p:"body",span:"body",div:"body",code:"body",pre:"body",li:"body"},If=r=>{const{align:a,lineHeight:e,size:o,variant:t,scheme:i="auto",isMonospace:c,tag:l,...d}=r,u=Tf?.[l]??"body",g=o?.includes("inherit")?o?.split("-")?.[0]:o,p=t?.endsWith("-inverse");let v;return i!=="auto"?v=i:p&&(v=void 0),{...d,"arc-text":g||u,"arc-scheme":v,"data-is-monospace":c?"":void 0,"data-align":a?.includes("inherit")?void 0:a,"data-variant":t?.includes("inherit")?void 0:t,"data-line-height":e?.includes("inherit")?void 0:e}},de=s`--arcâ¢text`,Fi=s`${de}â¢font`,yo=s`${de}â¢align`,qa=s`${de}fg`,Rd=s`${de}â¢flex`,Pd=s`${de}â¢hyphens`,bt=s`${de}â¢letterspacing`,Za=s`${de}â¢lineheight`,Md=s`${de}â¢opacity`,Bd=s`${de}â¢whitespace`,Ke=s`${Fi}â¢family`,Rr=s`${Fi}â¢size`,xo=s`${Fi}â¢weight`,jf=s` 6631@layer arc-components { 6632 6633[arc-text] { 6634 /* SETUP ---------------------------------------------------------⢠*/ 6635 ${yo}: unset; 6636 ${qa}: unset; 6637 ${Rd}: unset; 6638 ${Pd}: auto; 6639 ${bt}: unset; 6640 ${Za}: unset; 6641 ${Md}: unset; 6642 ${Bd}: unset; 6643 6644 ${Ke}: unset; 6645 ${Rr}: unset; 6646 ${xo}: unset; 6647 6648 /* LINE HEIGHT ---------------------------------------------------⢠*/ 6649 6650 &[data-line-height=standard] { 6651 ${Za}: var(--arc-line-height-standard); 6652 } 6653 6654 &[data-line-height=loose] { 6655 ${Za}: var(--arc-line-height-loose); 6656 } 6657 6658 &[data-line-height=tight] { 6659 ${Za}: var(--arc-line-height-tight); 6660 } 6661 6662 /* ALIGNMENT -----------------------------------------------------⢠*/ 6663 6664 &[data-align=start] { 6665 ${yo}: start; 6666 } 6667 6668 &[data-align=center] { 6669 ${yo}: center; 6670 } 6671 6672 &[data-align=justify] { 6673 ${yo}: justify; 6674 } 6675 6676 &[data-align=end] { 6677 ${yo}: end; 6678 } 6679 6680 /* VARIANTS ------------------------------------------------------⢠*/ 6681 6682 &[data-variant=primary] { 6683 ${qa}: var(--arc-color-fg-primary); 6684 } 6685 6686 /* @deprecated */ 6687 &[data-variant=primary-inverse] { 6688 ${qa}: var(--arc-color-fg-on-mono-inverse); 6689 } 6690 6691 &[data-variant=secondary] { 6692 ${qa}: var(--arc-color-fg-secondary); 6693 } 6694 6695 /* @deprecated - 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 6696 &[data-variant=secondary-inverse] { 6697 ${qa}: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 61.2%, transparent); 6698 } 6699 6700 &[data-variant=critical] { 6701 ${qa}: var(--arc-color-fg-critical-mid); 6702 } 6703 6704 &[data-variant=warning] { 6705 ${qa}: var(--arc-color-fg-warning-stark); 6706 } 6707 6708 &[data-variant=success] { 6709 ${qa}: var(--arc-color-fg-success-stark); 6710 } 6711 6712 &[data-variant=info] { 6713 ${qa}: var(--arc-color-fg-info-stark); 6714 } 6715 6716} 6717 6718/* FONT PROPERTIES -------------------------------------------------⢠*/ 6719 6720[arc-text^=title] { 6721 ${Ke}: var(--arc-font-family-title); 6722 ${xo}: var(--arc-font-weight-title); 6723 ${bt}: var(--arc-letter-spacing-title); 6724 ${Za}: var(--arc-line-height-title); 6725 6726 ${Rr}: 2em; /* @default title ⢠32÷16*1em ⢠same as 'title-md' @ 100% */ 6727 6728 &:where([arc-text*=-lg]) { 6729 ${Rr}: var(--arc-font-size-title-lg); 6730 } 6731 6732 &:where([arc-text*=-md]) { 6733 ${Rr}: var(--arc-font-size-title-md); 6734 } 6735 6736 &:where([arc-text*=-sm]) { 6737 ${Rr}: var(--arc-font-size-title-sm); 6738 } 6739} 6740 6741[arc-text^=heading] { 6742 ${Ke}: var(--arc-font-family-heading); 6743 ${xo}: var(--arc-font-weight-heading); 6744 ${bt}: var(--arc-letter-spacing-heading); 6745 ${Za}: var(--arc-line-height-heading); 6746 6747 ${Rr}: 1.25em; /* @default heading ⢠20÷16*1em ⢠same as 'heading-md' @ 100% */ 6748 6749 &:where([arc-text*=-lg]) { 6750 ${Rr}: var(--arc-font-size-heading-lg); 6751 } 6752 6753 &:where([arc-text*=-md]) { 6754 ${Rr}: var(--arc-font-size-heading-md); 6755 } 6756 6757 &:where([arc-text*=-sm]) { 6758 ${Rr}: var(--arc-font-size-heading-sm); 6759 } 6760} 6761 6762[arc-text^=subheading] { 6763 ${Ke}: var(--arc-font-family-subheading); 6764 ${xo}: var(--arc-font-weight-subheading); 6765 ${bt}: unset; 6766 ${Za}: var(--arc-line-height-subheading); 6767 6768 ${Rr}: 0.875em; /* @default subheading ⢠14÷16*1em ⢠same as 'subheading-md' @ 100% */ 6769 6770 &:where([arc-text*=-lg]) { 6771 ${Rr}: var(--arc-font-size-subheading-lg); 6772 } 6773 6774 &:where([arc-text*=-md]) { 6775 ${Rr}: var(--arc-font-size-subheading-md); 6776 } 6777 6778 &:where([arc-text*=-sm]) { 6779 ${Rr}: var(--arc-font-size-subheading-sm); 6780 } 6781} 6782 6783[arc-text^=body] { 6784 ${Ke}: var(--arc-font-family-body); 6785 ${xo}: var(--arc-font-weight-body); 6786 ${Za}: var(--arc-line-height-body); 6787 ${Rr}: 0.875em; /* @default body ⢠14÷16*1em ⢠same as 'body-md' @ 100% */ 6788 6789 &:where([arc-text*=-lg]) { 6790 ${Rr}: var(--arc-font-size-body-lg); 6791 } 6792 6793 &:where([arc-text*=-md]) { 6794 ${Rr}: var(--arc-font-size-body-md); 6795 } 6796 6797 &:where([arc-text*=-sm]) { 6798 ${Rr}: var(--arc-font-size-body-sm); 6799 } 6800
6801 &:where([arc-text*=-xs]) { 6802 ${Rr}: var(--arc-font-size-body-xs); 6803 } 6804} 6805 6806[arc-text]:where(pre, code) { 6807 ${Rr}: 1em; 6808} 6809 6810[arc-text]:where(pre, code, [data-is-monospace]) { 6811 ${Ke}: var(--arc-font-family-mono); 6812 ${Za}: var(--arc-line-height-mono); 6813} 6814 6815 6816/* CORE STYLES -----------------------------------------------------⢠*/ 6817 6818[arc-text] { 6819 /* conveniences for element properties */ 6820 flex: var(--arc-text-flex, var(${Rd})); 6821 hyphens: var(--arc-text-hyphens, var(${Pd})); /* not unset as fallback so text-breaks by default */ 6822 opacity: var(--arc-text-opacity, var(${Md})); 6823 text-align: var(--arc-text-align, var(${yo})); 6824 white-space: var(--arc-text-white-space, var(${Bd})); 6825 6826 color: var(--arc-text-color, var(${qa})); 6827 6828 font-size: var(--arc-text-font-size, var(${Rr})); 6829 font-family: var(--arc-text-font-family, var(${Ke})); 6830 font-weight: var(--arc-text-font-weight, var(${xo})); 6831 line-height: var(--arc-text-line-height, var(${Za})); 6832 letter-spacing: var(--arc-text-letter-spacing, var(${bt})); 6833 6834 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 6835} 6836 6837} 6838`,Lf=r=>(0,h.forwardRef)((a,e)=>(0,h.createElement)(r,{...If({...a,tag:r}),ref:e})),Rf=[...Ld].reduce((r,a)=>({...r,[a]:Lf(a)}),{});ir("Arc",jf);const Pf=q(zr,["common","ai","critical"]),Dd=[...re],Od=["default","success","warning","error"],Fd=q(aa,["inherit","md"]),Nd=q(zr,["common"]),Hd=[...ze],Mf=[...Ye],Vd=["top-left","top-center","top-right","center","bottom-left","bottom-center","bottom-right"],Bf=Pf.filter(r=>r!=="critical"),Ud={size:Fd[1],variant:Nd[0],scheme:Dd[2],popover:Hd[2],placement:Vd[4],severity:Od[0],showDismiss:!0},Wd=(r,a="toggle")=>{const e=document.getElementById(r);({toggle:()=>e?.togglePopover(),show:()=>e?.showPopover(),hide:()=>e?.hidePopover()})[a]()},Kd=s`--arcâ¢progress`,Df=s`${Kd}â¢bar`,Of=s`${Kd}â¢value`,Gd=s`${Df}â¢bg`,$t=s`${Of}â¢bg`,Ff=s` 6839@layer arc-components { 6840[arc-progress-bar] { 6841 ${Gd}: var(--arc-color-alpha-subtle); 6842 ${$t}: var(--arc-color-bg-brand-stark); 6843 6844 &[data-variant=ai] { 6845 /* @note - arc-gradient-ai-200 is not a horizontal gradient, and the light/dark values are not correct for this case */ 6846 ${$t}: linear-gradient(to right, #9c15ff, #1eb4fb); 6847 } 6848 6849 &[data-variant=critical] { 6850 ${$t}: var(--arc-color-bg-critical-mid); 6851 } 6852} 6853 6854[arc-progress-bar] { 6855 appearance: none; 6856 width: 100%; 6857 height: var(${f}â¢8); 6858 6859 /* firefox needs these at this level, other browsers can use these too */ 6860 background: var(--arc-progress-bar-background, var(${Gd})); 6861 border-radius: var(--arc-border-radius-pill); 6862 border: none; 6863 6864 /* turn off the default bar background for other browsers */ 6865 &::-webkit-progress-bar { background: none; } 6866 6867 /* firefox's progress-value bar */ 6868 &::-moz-progress-bar { 6869 border-radius: var(--arc-border-radius-pill); 6870 background: var(--arc-progress-bar-value-background, var(${$t})); 6871 } 6872 6873 /* all the others' progress-value bar */ 6874 &::-webkit-progress-value { 6875 border-radius: var(--arc-border-radius-pill); 6876 background: var(--arc-progress-bar-value-background, var(${$t})); 6877 } 6878} 6879 6880} 6881`,Nf=({progress:r=0,variant:a="common",...e})=>(0,n.jsxs)("progress",{...e,"arc-progress-bar":"","data-variant":a,value:r,max:e.max||100,"aria-valuenow":r,"aria-valuemax":e.max||100,children:[r,"% "]});ir("ArcProgressBar",Ff);const Xa=s`--arcâ¢toast`,Hn=s`${Xa}â¢content`,Yd=s`${Xa}â¢color`,qd=s`${Xa}â¢background`,yt=s`${Xa}â¢iconâ¢color`,xt=s`${Xa}â¢transition`,Hf=s` 6882@layer arc-components { 6883 6884 [arc-toast] { 6885 ${Hn}â¢gap: var(${E}â¢2); 6886 ${xt}â¢duration: 300ms; 6887 ${yt}: currentcolor; 6888 6889 /* SIZES -------------------------------------------------------⢠*/ 6890 &[data-size=md] { /* @default */ 6891 ${Xa}â¢fontâ¢size: var(${f}â¢16); 6892 ${Hn}â¢fontâ¢size: var(${f}â¢14); 6893 } 6894 6895 &[data-size=inherit] { 6896 ${Xa}â¢fontâ¢size: 1em; 6897 ${Hn}â¢fontâ¢size: 0.875em; 6898 } 6899 6900 /* STATES ------------------------------------------------------⢠*/ 6901 &[data-severity=error] { 6902 ${yt}: var(--arc-color-fg-critical-mid); 6903 } 6904 6905 &[data-severity=success] { 6906 ${yt}: var(--arc-color-fg-success-mid); 6907 } 6908 6909 &[data-severity=warning] { 6910 ${yt}: var(--arc-color-fg-warning-mid); 6911 } 6912 6913 /* VARIANTS ----------------------------------------------------⢠*/ 6914 &[data-variant=common] { /* @default */ 6915 ${qd}: var(--arc-color-bg-mono); 6916 ${Yd}: var(--arc-color-fg-primary); 6917 } 6918 6919 /* PLACEMENTS --------------------------------------------------⢠*/ 6920 &[data-placement*=top-] { inset-block-start: var(--arc-toast-inset-block-start, 0); } 6921 &[data-placement*=bottom-] { inset-block-end: var(--arc-toast-inset-block-end, 0); } 6922 &[data-placement*=-left] { inset-inline-start: var(--arc-toast-inset-inline-start, 0); } 6923 &[data-placement*=-right] { inset-inline-end: var(--arc-toast-inset-inline-end, 0); } 6924 &[data-placement*=-center] { inset-inline-start: var(--arc-toast-inset-inline-start, 50%); translate: -50% 0; } 6925 &[data-placement=center] { inset: var(--arc-toast-inset, 0); margin: var(--arc-toast-offset, auto); } 6926 } 6927 6928 /* CORE STYLES ---------------------------------------------------⢠*/ 6929 [arc-toast] { 6930 inset: var(--arc-toast-inset, auto); 6931 margin: var(--arc-toast-offset, var(${E}â¢16)); /* @note: '-offset' here is legacy variable name */ 6932 align-items: center; 6933 6934 font-size: var(${Xa}â¢fontâ¢size); /* @note: see [arc-toast-content] for actual font-size via the [data-size] attribute */ 6935 6936 color: var(--arc-toast-color, var(${Yd})); 6937 background-color: var(--arc-toast-background, var(${qd})); 6938 border-radius: var(--arc-toast-border-radius, var(--arc-border-radius-lg)); 6939 padding: var(--arc-toast-padding, var(${E}â¢12) var(${E}â¢12) var(${E}â¢12) var(${E}â¢16)); 6940 box-shadow: var(--arc-shadow-lg); 6941 border: none; 6942 6943 max-width: var(--arc-toast-max-width, 40em); 6944 min-width: var(--arc-toast-min-width, 12em); 6945 min-height: var(--arc-toast-min-height, var(${Xa}â¢minâ¢height, 3.5em)); 6946 6947 &:has([arc-toast-heading] + [arc-toast-subtext]) { 6948 ${Xa}â¢minâ¢height: 5em; 6949 } 6950 6951 [arc-toast-content-grid] { 6952 flex: 1; 6953 display: grid; 6954 grid-template-columns: 1fr auto; 6955 gap: var(${E}â¢8) var(${E}â¢16); 6956 } 6957 6958 [arc-toast-body] { 6959 display: flex; 6960 align-items: baseline; 6961 gap: var(${E}â¢8); 6962 padding: var(${E}â¢4) 0; /* vertical padding to align with action button text */ 6963 min-width: 14em; 6964 6965 p { 6966 margin: 0; 6967 } 6968 } 6969 6970 [arc-toast-icon] { 6971 --arc-icon-color: var(--arc-toast-icon-color, var(${yt})); 6972 6973 height: 1lh; 6974 padding: 0 var(${E}â¢2); 6975 } 6976 6977 [arc-toast-content] { 6978 flex: 1; 6979 6980 font-size: var(--arc-toast-font-size, var(${Hn}â¢fontâ¢size)); 6981 line-height: var(--arc-line-height-loose); 6982 hyphens: auto; 6983 6984 display: block; 6985 6986 &:has([arc-toast-heading] + [arc-toast-subtext]) { 6987 display: flex; 6988 flex-direction: column; 6989 gap: var(${E}â¢2); 6990 } 6991 } 6992 6993 [arc-toast-actions] { 6994 align-self: baseline; 6995 6996 display: flex; 6997 align-items: center; 6998 gap: 0.5em; 6999 } 7000 7001 [arc-toast-progress-bar] { 7002 grid-column: 1 / -1; 7003 } 7004 } 7005 7006 /* POPOVER + state -----------------------------------------------⢠*/ 7007 7008 [arc-toast] { 7009 opacity: 0; 7010 content-visibility: hidden; 7011 transition: 7012 display var(${xt}â¢duration) allow-discrete, 7013 overlay var(${xt}â¢duration) allow-discrete, 7014 content-visibility var(${xt}â¢duration) allow-discrete, 7015 opacity var(${xt}â¢duration); 7016 } 7017 7018 [arc-toast]:popover-open { 7019 display: flex; 7020 opacity: 1; 7021 content-visibility: visible; 7022 } 7023 7024 @starting-style { 7025 [arc-toast]:popover-open { 7026 opacity: 0; 7027 content-visibility: hidden; 7028 } 7029 } 7030} 7031`,Zd=({id:r,children:a,icon:e,heading:o,subtext:t,dismissProps:i,showDismiss:c=!0,onClose:l,actionSlot:d,size:u="md",variant:g="common",scheme:p=Ud.scheme,placement:v="bottom-left",getToastId:m,progressBarProps:b,severity:$,...k})=>{const _=()=>{l?.()},y=p==="auto"?void 0:p,z=!!d||c,x=Ir(r,"arc-toast"),{variant:S,hierarchy:D,...B}=i||{};(0,h.useEffect)(()=>{m?.(x)},[m,x]);const F=gc(e);return(0,n.jsx)("div",{...k,"arc-toast":"","arc-scheme":y,"data-size":u,"data-variant":g,"data-
7031placement":v,"data-severity":$||void 0,id:x,children:(0,n.jsxs)("div",{"arc-toast-content-grid":"",children:[(0,n.jsxs)("div",{"arc-toast-body":"",children:[e&&(0,n.jsx)(cr,{icon:F,"arc-toast-icon":""}),(0,n.jsx)("div",{"arc-toast-content":"",children:a||(0,n.jsxs)(n.Fragment,{children:[o&&(0,n.jsx)("header",{"arc-toast-heading":"",children:(0,n.jsx)("strong",{children:o})}),t&&(0,n.jsx)("p",{"arc-toast-subtext":"",children:t})]})})]}),z&&(0,n.jsxs)("div",{"arc-toast-actions":"",children:[d,c&&(0,n.jsx)(kr,{icon:"fa-regular fa-xmark-large",layout:"icon",variant:"common",hierarchy:"tertiary",size:"md",shape:"square","aria-label":"Dismiss",...B,popoverTarget:x,onClick:_})]}),b&&(0,n.jsx)(Nf,{...b,variant:$==="error"?"critical":b.variant,"arc-toast-progress-bar":""})]})})};Zd.handleToast=Wd,ir("ArcToast",Hf);var kt;(function(r){r.None="none",r.Persistent="localStorage",r.Temporary="sessionStorage"})(kt||(kt={}));const Vf=(r,a,e)=>{const[o,t]=(0,h.useState)(a),[i,c]=Yp(r,a),[l,d]=Mi(r,a);return e===kt.Temporary?[i,c]:e===kt.Persistent?[l,d]:[o,t]},Uf=["auto","hex","hexa","rgb","hsl","oklch"],Wf=()=>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.