vendor: 7,992 bytes, line 1
1(globalThis.wpRiseJsonp=globalThis.wpRiseJsonp||[]).push([["defaultVendors-node_modules_pnpm_articulate_design-system_1_24_1__articulate_design-system-to-c4d491"],{98998(ts){var Ro="Expected a function",he=NaN,sa="[object Symbol]",Po=/^\s+|\s+$/g,ec=/^[-+]0x[0-9a-f]+$/i,Et=/^0b[01]+$/i,_r=/^0o[0-7]+$/i,Lo=parseInt,Oe=typeof globalThis=="object"&&globalThis&&globalThis.Object===Object&&globalThis,Mo=typeof self=="object"&&self&&self.Object===Object&&self,Bo=Oe||Mo||Function("return this")(),oe=Object.prototype,Ra=oe.toString,Oo=Math.max,ac=Math.min,Pa=function(){return Bo.Date.now()};function rt(ur,Gr,De){var la,ar,Jr,Se,be,$e,Ma=0,No=!1,ze=!1,Ee=!0;if(typeof ur!="function")throw new TypeError(Ro);Gr=_t(Gr)||0,La(De)&&(No=!!De.leading,ze="maxWait"in De,Jr=ze?Oo(_t(De.maxWait)||0,Gr):Jr,Ee="trailing"in De?!!De.trailing:Ee);function i(Lr){var Ne=la,Ba=ar;return la=ar=void 0,Ma=Lr,Se=ur.apply(Ba,Ne),Se}function u(Lr){return Ma=Lr,be=setTimeout(wa,Gr),No?i(Lr):Se}function et(Lr){var Ne=Lr-$e,Ba=Lr-Ma,Ho=Gr-Ne;return ze?ac(Ho,Jr-Ba):Ho}function at(Lr){var Ne=Lr-$e,Ba=Lr-Ma;return $e===void 0||Ne>=Gr||Ne<0||ze&&Ba>=Jr}function wa(){var Lr=Pa();if(at(Lr))return It(Lr);be=setTimeout(wa,et(Lr))}function It(Lr){return be=void 0,Ee&&la?i(Lr):(la=ar=void 0,Se)}function Fo(){be!==void 0&&clearTimeout(be),Ma=0,la=$e=ar=be=void 0}function oc(){return be===void 0?Se:It(Pa())}function s(){var Lr=Pa(),Ne=at(Lr);if(la=arguments,ar=this,$e=Lr,Ne){if(be===void 0)return u($e);if(ze)return be=setTimeout(wa,Gr),i($e)}return be===void 0&&(be=setTimeout(wa,Gr)),Se}return s.cancel=Fo,s.flush=oc,s}function La(ur){var Gr=typeof ur;return!!ur&&(Gr=="object"||Gr=="function")}function Do(ur){return!!ur&&typeof ur=="object"}function tc(ur){return typeof ur=="symbol"||Do(ur)&&Ra.call(ur)==sa}function _t(ur){if(typeof ur=="number")return ur;if(tc(ur))return he;if(La(ur)){var Gr=typeof ur.valueOf=="function"?ur.valueOf():ur;ur=La(Gr)?Gr+"":Gr}if(typeof ur!="string")return ur===0?ur:+ur;ur=ur.replace(Po,"");var De=Et.test(ur);return De||_r.test(ur)?Lo(ur.slice(2),De?2:8):ec.test(ur)?he:+ur}ts.exports=rt},20680(ts,Ro,he){"use strict";he.r(Ro),he.d(Ro,{ARC_DROPDOWN_SUBMENU_OMIT_KEYS:()=>Id,ARC_MENU_DELAY_MS:()=>Li,Arc:()=>qm,ArcAbstractFlexLayouts:()=>Gr,ArcAbstractGapSizes:()=>Do,ArcAbstractIconSizes:()=>La,ArcAbstractOrientations:()=>De,ArcAbstractPopoverActions:()=>rt,ArcAbstractPopoverModes:()=>Pa,ArcAbstractTextLayouts:()=>ur,ArcAbstractTextOverflows:()=>_t,ArcAbstractTextSizes:()=>tc,ArcAvatar:()=>Cc,ArcAvatarColors:()=>ks,ArcAvatarColorsReserved:()=>Vu,ArcAvatarOverflow:()=>ig,ArcAvatarOverflowSizes:()=>Yu,ArcAvatarPile:()=>Ch,ArcAvatarPileSizes:()=>qu,ArcAvatarSizes:()=>Uu,ArcAvatarText:()=>Ac,ArcAvatarTextGapSizes:()=>Ku,ArcAvatarTextOverflows:()=>Wu,ArcAvatarTextSizes:()=>Gu,ArcBadge:()=>kg,ArcBadgeColors:()=>pg,ArcBadgeContrasts:()=>$g,ArcBadgeCount:()=>Rg,ArcBadgeCountColors:()=>fg,ArcBadgeCountContrasts:()=>Ig,ArcBadgeCountShapes:()=>Tg,ArcBadgeCountSizes:()=>Eg,ArcBadgeCountVariants:()=>_g,ArcBadgeLayouts:()=>bg,ArcBadgeSizes:()=>mg,ArcBadgeVariants:()=>yg,ArcBanner:()=>Zg,ArcBannerActionPlacements:()=>Ug,ArcBannerAlignments:()=>Kg,ArcBannerDefaults:()=>Sa,ArcBannerDensities:()=>Hg,ArcBannerLayouts:()=>Vg,ArcBannerSchemes:()=>Wg,ArcBannerVariants:()=>qg,ArcButton:()=>Ar,ArcButtonHierarchies:()=>il,ArcButtonLayouts:()=>f0,ArcButtonPopoverActions:()=>b0,ArcButtonSchemes:()=>Hc,ArcButtonShadows:()=>m0,ArcButtonShapes:()=>v0,ArcButtonSizes:()=>p0,ArcButtonVariants:()=>cl,ArcCheckbox:()=>wl,ArcCheckboxBar:()=>dv,ArcCheckboxBarLayouts:()=>iv,ArcCheckboxBarOption:()=>lv,ArcCheckboxBarSizes:()=>sv,ArcCheckboxLayouts:()=>tv,ArcCheckboxSizes:()=>ov,ArcCheckboxVariants:()=>nv,ArcColorAllTools:()=>Cl,ArcColorPalette:()=>In,ArcColorPaletteAddFlows:()=>gv,ArcColorPicker:()=>Ya,ArcColorPickerDefaults:()=>_a,ArcColorPickerModes:()=>uv,ArcColorSimpleTools:()=>Al,ArcColorSwatch:()=>$i,ArcColorSwatchKinds:()=>hv,ArcColorValueFormats:()=>ob,ArcDropdownMenu:()=>Kn,ArcIcon:()=>ir,ArcIconText:()=>re,ArcIconTextVariants:()=>Kh,ArcInputAction:()=>Rd,ArcLabel:()=>za,ArcLabelContent:()=>Ka,ArcLabelLayouts:()=>Jg,ArcLink:()=>kf,ArcLinkVariants:()=>xf,ArcModal:()=>Vf,ArcModalAlert:()=>Kf,ArcModalAlertDefaults:()=>ba,ArcModalAlertVariants:()=>Sf,ArcModalBackdropColors:()=>zf,ArcModalBodyPaddings:()=>Ef,ArcModalCloseReasons:()=>If,ArcModalCommonDefaults:()=>le,ArcModalCommonVariants:()=>Cf,ArcModalConfirm:()=>Nd,ArcModalConfirmDefaults:()=>ja,ArcModalConfirmVariants:()=>Af,ArcModalSchemes:()=>wf,ArcModalSizes:()=>_f,ArcPopover:()=>ga,ArcPopoverActions:()=>Ah,ArcPopoverAnchors:()=>Ec,ArcPopoverBoundaries:()=>_c,ArcPopoverButton:()=>qt,ArcPopoverDefaults:()=>ve,ArcPopoverDensities:()=>Ls,ArcPopoverModes:()=>Sc,ArcPopoverSchemes:()=>zc,ArcPopoverVariants:()=>Ps,ArcPopoverVariantsWithOutline:()=>Sh,ArcRadio:()=>Fd,ArcRadioBar:()=>Qf,ArcRadioBarLayouts:()=>Zf,ArcRadioBarOption:()=>Jf,ArcRadioBarSizes:()=>Xf,ArcRadioLayouts:()=>Gf,ArcRadioSizes:()=>qf,ArcSVGGradientDef:()=>zs,ArcSearch:()=>Zd,ArcSearchLayouts:()=>pm,ArcSearchSizes:()=>fm,ArcSearchVariants:()=>mm,ArcSelect:()=>_m,ArcSelectLayouts:()=>xm,ArcSelectSizes:()=>km,ArcSelectVariants:()=>wm,ArcSwitch:()=>Rm,ArcSwitchLabelPositions:()=>At,ArcSwitchSizes:()=>Im,ArcSwitchStates:()=>Wr,ArcSystemAIGradients:()=>Oo,ArcSystemAlignments:()=>Mo,ArcSystemColors:()=>Ra,ArcSystemGradients:()=>ac,ArcSystemHierarchies:()=>Lo,ArcSystemLayouts:()=>Oe,ArcSystemLineHeights:()=>Bo,ArcSystemSchemes:()=>sa,ArcSystemShadows:()=>Po,ArcSystemShapes:()=>Et,ArcSystemSizes:()=>oe,ArcSystemSurfaces:()=>ec,ArcSystemVariants:()=>_r,ArcTextAlignments:()=>Hm,ArcTextBodyElements:()=>nu,ArcTextBodySizes:()=>Nm,ArcTextBodyVariants:()=>Fm,ArcTextElements:()=>cu,ArcTextHeadingElements:()=>ou,ArcTextHeadingSizes:()=>Bm,ArcTextHeadingVariants:()=>Dm,ArcTextInput:()=>Hn,ArcTextInputLayouts:()=>Ep,ArcTextInputSizes:()=>_p,ArcTextInputTypes:()=>Tp,ArcTextInputVariants:()=>Ip,ArcTextKinds:()=>Pm,ArcTextLineHeights:()=>Vm,ArcTextSchemes:()=>Lm,ArcTextSubheadingSizes:()=>Om,ArcTextTitleSizes:()=>Mm,ArcToast:()=>wu,ArcToastDefaults:()=>mu,ArcToastPlacements:()=>fu,ArcToastPopoverActions:()=>Zm,ArcToastPopoverModes:()=>pu,ArcToastProgressBarVariants:()=>Xm,ArcToastSchemes:()=>uu,ArcToastSeverities:()=>hu,ArcToastSizes:()=>gu,ArcToastVariants:()=>vu,ArcTooltip:()=>sn,ArcTooltipDefaults:()=>He,DeprecatedButtonVariants:()=>Vc,SVGLogoArticulate:()=>pc,SVGLogoProductAI:()=>fc,SVGLogoProductPeek:()=>mc,SVGLogoProductReach:()=>bc,SVGLogoProductReview:()=>$c,SVGLogoProductRise:()=>yc,SVGLogoProductStoryline:()=>xc,SVGLogoProductStudio:()=>kc,StorageType:()=>Eo,adoptStyles:()=>lr,adoptThemeTokens:()=>Du,anchorNameRegistry:()=>Dt,assignRef:()=>Se,bindDelegatedEvents:()=>tl,canonicalizeToHsv:()=>zn,clamp:()=>be,clampIt:()=>J,colorValueEquals:()=>En,compositeRgbaOver:()=>Pl,createEmptyRect:()=>nb,css:()=>s,cssFeatures:()=>Tc,decodeDeprecatedButtonVariant:()=>w0,didElementRectChange:()=>No,encodeDeprecatedButtonVariant:()=>C0,extractTextFromReactNode:()=>Bt,formatAlphaCss:()=>An,formatAlphaPercent:()=>$t,formatAnchorName:()=>jc,getArcColorAs:()=>Hl,getArcColorData:()=>qa,getArcColorParts:()=>Fl,getArcColorValue:()=>Vl,getArcContrastColor:()=>mi,getColorName:()=>Sn,getCssColor:()=>Ce,getElementByIdScoped:()=>Ee,getPlainLabel:()=>eu,getPreferredAnchorForTooltipId:()=>Nc,getResolvedHierarchy:()=>ul,getResolvedScheme:()=>hl,getResolvedShape:()=>sl,getResolvedVariant:()=>dl,getSelectedColorMeta:()=>bi,getShadowRootOrDocument:()=>ze,getSvgGradientCoords:()=>Ss,handlePopover:()=>Os,handleToast:()=>bu,hasBaseSelectSupport:()=>Xd,hasEmptyValueOption:()=>ru,hasMatchingColorValue:()=>fi,hasNativeAnchorPositioning:()=>Ic,hslToRgbaData:()=>_l,hsvDeltaOK:()=>di,hsvToRgbaData:()=>We,isDifferent:()=>$e,isGroupLegendItem:()=>Jd,isHexLike:()=>Ml,isHsvLike:()=>Ol,isObject:()=>As,isRgbaLike:()=>Bl,isSame:()=>Ma,isSelectGroup:()=>Qn,isSelectedColorMatch:()=>Kl,isString:()=>ct,joinArray:()=>Ot,logError:()=>Nh,logMessage:()=>
1Dh,logSkippedTopLevelItem:()=>Qd,logWarning:()=>Gs,makeHtmlId:()=>rh,makeRandomColor:()=>Ul,mapDeprecated:()=>la,noTailAnchors:()=>Ms,normalizeAnchorName:()=>Nt,normalizeByte:()=>Zr,normalizeColorValue:()=>yt,normalizeHue:()=>zl,normalizeUnit:()=>El,oklchToRgbaData:()=>jl,parseAlphaInput:()=>Dl,parseByte:()=>to,parseCssColorToRgba:()=>Tr,parseHexStringToRgba:()=>Ll,pickFromList:()=>ar,pickFromListByKeys:()=>Jr,relativeLuminance:()=>Rl,renderableOption:()=>Ct,resolveTailMetrics:()=>Bs,rgbaBytesEqual:()=>si,rgbaDeltaOK:()=>Cn,rgbaEchoDeltaOK:()=>li,rgbaToHslData:()=>Il,rgbaToHsvData:()=>oo,rgbaToOklchData:()=>Tl,roundIt:()=>wn,shareAdoptedStyles:()=>Ou,snapIt:()=>Sl,splitString:()=>Ws,syncAnchorName:()=>Ds,toHEX:()=>Re,toHSL:()=>vi,toLinearChannel:()=>Wa,toOKLCH:()=>pi,toRGB:()=>Ga,unbindDelegatedEvents:()=>c0,useIsoLayoutEffect:()=>Go,useStableId:()=>Ir,useStorage:()=>tb});const sa=["auto","light","dark","inverse"],Po=["none","sm","md","lg","xl"],ec=["primary","secondary","inset","raised","floating"],Et=["circle","round","pill","square","narrow"],_r=["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"],Lo=["primary","secondary","tertiary","plain","link-style"],Oe=["hug","fill","icon","gutter","inline"],Mo=["inherit","start","left","justify","center","between","around","evenly","stretch","end","right"],Bo=["inherit","tight","standard","loose"],oe=["inherit","xxl","xl","lg","md","sm","xs","xxs","custom","fullscreen"],Ra=["blue","orange","mint","red","yellow","green","maroon","purple","neutral","white","black","mono","mono-inverse","overlay-light","overlay-dark","ai","brand"],Oo=["ai","ai-50","ai-100","ai-200","ai-300","ai-400","ai-500","ai-600"],ac=[...Oo],Pa=["","auto","manual"],rt=["toggle","show","hide"],La=["inherit","xl","lg","md","sm","xs"],Do=["inherit","lg","md","sm"],tc=["inherit","md","sm"],_t=["inherit","wrap","truncate"],ur=["gutter","inline"],Gr=["hug","fill"],De=["horizontal","vertical"],la=(r,e)=>e[r]||r,ar=(r,e)=>r.filter(a=>e.includes(a)),Jr=(r,e)=>e.filter(a=>r.includes(a)),Se=(r,e)=>{r&&(typeof r=="function"?r(e):r.current=e)},be=(r,e=0,a=100)=>Math.min(Math.max(r,e),a),$e=(r,e)=>r!==e,Ma=(r,e)=>r===e,No=({a:r,b:e})=>$e(r?.top,e?.top)||$e(r?.left,e?.left)||$e(r?.width,e?.width)||$e(r?.height,e?.height);function ze(r){if(!(r instanceof Node))return null;const e=r.getRootNode();return e instanceof ShadowRoot||e instanceof Document?e:null}function Ee(r,e){if(typeof document>"u")return null;const a=e==null?document:ze(e)??document,t=a.getElementById(r);return t||(a!==document?document.getElementById(r):null)}var i=he(1463),u=he(9608);/** 2 * @license 3 * Copyright 2019 Google LLC 4 * SPDX-License-Identifier: BSD-3-Clause 5 */const et=globalThis,at=et.ShadowRoot&&(et.ShadyCSS===void 0||et.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,wa=Symbol(),It=new WeakMap;class Fo{constructor(e,a,t){if(this._$cssResult$=!0,t!==wa)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=a}get styleSheet(){let e=this.o;const a=this.t;if(at&&e===void 0){const t=a!==void 0&&a.length===1;t&&(e=It.get(a)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&It.set(a,e))}return e}toString(){return this.cssText}}const oc=r=>new Fo(typeof r=="string"?r:r+"",void 0,wa),s=(r,...e)=>{const a=r.length===1?r[0]:e.reduce(((t,o,n)=>t+(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.")})(o)+r[n+1]),r[0]);return new Fo(a,r,wa)},Lr=(r,e)=>{if(at)r.adoptedStyleSheets=e.map((a=>a instanceof CSSStyleSheet?a:a.styleSheet));else for(const a of e){const t=document.createElement("style"),o=et.litNonce;o!==void 0&&t.setAttribute("nonce",o),t.textContent=a.cssText,r.appendChild(t)}},Ne=at?r=>r:r=>r instanceof CSSStyleSheet?(e=>{let a="";for(const t of e.cssRules)a+=t.cssText;return oc(a)})(r):r;/** 6 * @license 7 * Copyright 2017 Google LLC 8 * SPDX-License-Identifier: BSD-3-Clause 9 */const{is:Ba,defineProperty:Ho,getOwnPropertyDescriptor:zu,getOwnPropertyNames:Eu,getOwnPropertySymbols:_u,getPrototypeOf:Iu}=Object,Vo=globalThis,os=Vo.trustedTypes,Tu=os?os.emptyScript:"",ju=Vo.reactiveElementPolyfillSupport,Tt=(r,e)=>r,nc={toAttribute(r,e){switch(e){case Boolean:r=r?Tu:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,e){let a=r;switch(e){case Boolean:a=r!==null;break;case Number:a=r===null?null:Number(r);break;case Object:case Array:try{a=JSON.parse(r)}catch{a=null}}return a}},ns=(r,e)=>!Ba(r,e),cs={attribute:!0,type:String,converter:nc,reflect:!1,useDefault:!1,hasChanged:ns};Symbol.metadata??=Symbol("metadata"),Vo.litPropertyMetadata??=new WeakMap;class tt extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,a=cs){if(a.state&&(a.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((a=Object.create(a)).wrapped=!0),this.elementProperties.set(e,a),!a.noAccessor){const t=Symbol(),o=this.getPropertyDescriptor(e,t,a);o!==void 0&&Ho(this.prototype,e,o)}}static getPropertyDescriptor(e,a,t){const{get:o,set:n}=zu(this.prototype,e)??{get(){return this[a]},set(c){this[a]=c}};return{get:o,set(c){const l=o?.call(this);n?.call(this,c),this.requestUpdate(e,l,t)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??cs}static _$Ei(){if(this.hasOwnProperty(Tt("elementProperties")))return;const e=Iu(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(Tt("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(Tt("properties"))){const a=this.properties,t=[...Eu(a),..._u(a)];for(const o of t)this.createProperty(o,a[o])}const e=this[Symbol.metadata];if(e!==null){const a=litPropertyMetadata.get(e);
vendor: 21,104 bytes, lines 9-229
9if(a!==void 0)for(const[t,o]of a)this.elementProperties.set(t,o)}this._$Eh=new Map;for(const[a,t]of this.elementProperties){const o=this._$Eu(a,t);o!==void 0&&this._$Eh.set(o,a)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const a=[];if(Array.isArray(e)){const t=new Set(e.flat(1/0).reverse());for(const o of t)a.unshift(Ne(o))}else e!==void 0&&a.push(Ne(e));return a}static _$Eu(e,a){const t=a.attribute;return t===!1?void 0:typeof t=="string"?t:typeof e=="string"?e.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((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,a=this.constructor.elementProperties;for(const t of a.keys())this.hasOwnProperty(t)&&(e.set(t,this[t]),delete this[t]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Lr(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,a,t){this._$AK(e,t)}_$ET(e,a){const t=this.constructor.elementProperties.get(e),o=this.constructor._$Eu(e,t);if(o!==void 0&&t.reflect===!0){const n=(t.converter?.toAttribute!==void 0?t.converter:nc).toAttribute(a,t.type);this._$Em=e,n==null?this.removeAttribute(o):this.setAttribute(o,n),this._$Em=null}}_$AK(e,a){const t=this.constructor,o=t._$Eh.get(e);if(o!==void 0&&this._$Em!==o){const n=t.getPropertyOptions(o),c=typeof n.converter=="function"?{fromAttribute:n.converter}:n.converter?.fromAttribute!==void 0?n.converter:nc;this._$Em=o;const l=c.fromAttribute(a,n.type);this[o]=l??this._$Ej?.get(o)??l,this._$Em=null}}requestUpdate(e,a,t){if(e!==void 0){const o=this.constructor,n=this[e];if(t??=o.getPropertyOptions(e),!((t.hasChanged??ns)(n,a)||t.useDefault&&t.reflect&&n===this._$Ej?.get(e)&&!this.hasAttribute(o._$Eu(e,t))))return;this.C(e,a,t)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,a,{useDefault:t,reflect:o,wrapped:n},c){t&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,c??a??this[e]),n!==!0||c!==void 0)||(this._$AL.has(e)||(this.hasUpdated||t||(a=void 0),this._$AL.set(e,a)),o===!0&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(a){Promise.reject(a)}const e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[o,n]of this._$Ep)this[o]=n;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[o,n]of t){const{wrapped:c}=n,l=this[o];c!==!0||this._$AL.has(o)||l===void 0||this.C(o,void 0,n,l)}}let e=!1;const a=this._$AL;try{e=this.shouldUpdate(a),e?(this.willUpdate(a),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(a)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(a)}willUpdate(e){}_$AE(e){this._$EO?.forEach((a=>a.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach((a=>this._$ET(a,this[a]))),this._$EM()}updated(e){}firstUpdated(e){}}tt.elementStyles=[],tt.shadowRootOptions={mode:"open"},tt[Tt("elementProperties")]=new Map,tt[Tt("finalized")]=new Map,ju?.({ReactiveElement:tt}),(Vo.reactiveElementVersions??=[]).push("2.1.1");/** 10 * @license 11 * Copyright 2017 Google LLC 12 * SPDX-License-Identifier: BSD-3-Clause 13 */const cc=globalThis,Uo=cc.trustedTypes,is=Uo?Uo.createPolicy("lit-html",{createHTML:r=>r}):void 0,ic="$lit$",da=`lit$${Math.random().toFixed(9).slice(2)}$`,sc="?"+da,Ru=`<${sc}>`,Oa=document,jt=()=>Oa.createComment(""),Rt=r=>r===null||typeof r!="object"&&typeof r!="function",lc=Array.isArray,ss=r=>lc(r)||typeof r?.[Symbol.iterator]=="function",dc=`[ 14\f\r]`,Pt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ls=/-->/g,ds=/>/g,Da=RegExp(`>|${dc}(?:([^\\s"'>=/]+)(${dc}*=${dc}*(?:[^ 15\f\r"'\`<>=]|("|')|))|$)`,"g"),us=/'/g,hs=/"/g,gs=/^(?:script|style|textarea|title)$/i,uc=r=>(e,...a)=>({_$litType$:r,strings:e,values:a}),ub=uc(1),hb=uc(2),gb=uc(3),ot=Symbol.for("lit-noChange"),Fr=Symbol.for("lit-nothing"),vs=new WeakMap,Na=Oa.createTreeWalker(Oa,129);function ps(r,e){if(!lc(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return is!==void 0?is.createHTML(e):e}const fs=(r,e)=>{const a=r.length-1,t=[];let o,n=e===2?"<svg>":e===3?"<math>":"",c=Pt;for(let l=0;l<a;l++){const d=r[l];let h,g,f=-1,v=0;for(;v<d.length&&(c.lastIndex=v,g=c.exec(d),g!==null);)v=c.lastIndex,c===Pt?g[1]==="!--"?c=ls:g[1]!==void 0?c=ds:g[2]!==void 0?(gs.test(g[2])&&(o=RegExp("</"+g[2],"g")),c=Da):g[3]!==void 0&&(c=Da):c===Da?g[0]===">"?(c=o??Pt,f=-1):g[1]===void 0?f=-2:(f=c.lastIndex-g[2].length,h=g[1],c=g[3]===void 0?Da:g[3]==='"'?hs:us):c===hs||c===us?c=Da:c===ls||c===ds?c=Pt:(c=Da,o=void 0);const b=c===Da&&r[l+1].startsWith("/>")?" ":"";n+=c===Pt?d+Ru:f>=0?(t.push(h),d.slice(0,f)+ic+d.slice(f)+da+b):d+da+(f===-2?l:b)}return[ps(r,n+(r[a]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),t]};class Lt{constructor({strings:e,_$litType$:a},t){let o;this.parts=[];let n=0,c=0;const l=e.length-1,d=this.parts,[h,g]=fs(e,a);if(this.el=Lt.createElement(h,t),Na.currentNode=this.el.content,a===2||a===3){const f=this.el.content.firstChild;f.replaceWith(...f.childNodes)}for(;(o=Na.nextNode())!==null&&d.length<l;){if(o.nodeType===1){if(o.hasAttributes())for(const f of o.getAttributeNames())if(f.endsWith(ic)){const v=g[c++],b=o.getAttribute(f).split(da),m=/([.?@])?(.*)/.exec(v);d.push({type:1,index:n,name:m[2],strings:b,ctor:m[1]==="."?bs:m[1]==="?"?$s:m[1]==="@"?ys:Mt}),o.removeAttribute(f)}else f.startsWith(da)&&(d.push({type:6,index:n}),o.removeAttribute(f));if(gs.test(o.tagName)){const f=o.textContent.split(da),v=f.length-1;if(v>0){o.textContent=Uo?Uo.emptyScript:"";for(let b=0;b<v;b++)o.append(f[b],jt()),Na.nextNode(),d.push({type:2,index:++n});o.append(f[v],jt())}}}else if(o.nodeType===8)if(o.data===sc)d.push({type:2,index:n});else{let f=-1;for(;(f=o.data.indexOf(da,f+1))!==-1;)d.push({type:7,index:n}),f+=da.length-1}n++}}static createElement(e,a){const t=Oa.createElement("template");return t.innerHTML=e,t}}function Fa(r,e,a=r,t){if(e===ot)return e;let o=t!==void 0?a._$Co?.[t]:a._$Cl;const n=Rt(e)?void 0:e._$litDirective$;return o?.constructor!==n&&(o?._$AO?.(!1),n===void 0?o=void 0:(o=new n(r),o._$AT(r,a,t)),t!==void 0?(a._$Co??=[])[t]=o:a._$Cl=o),o!==void 0&&(e=Fa(r,o._$AS(r,e.values),o,t)),e}class ms{constructor(e,a){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=a}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:a},parts:t}=this._$AD,o=(e?.creationScope??Oa).importNode(a,!0);Na.currentNode=o;let n=Na.nextNode(),c=0,l=0,d=t[0];for(;d!==void 0;){if(c===d.index){let h;d.type===2?h=new nt(n,n.nextSibling,this,e):d.type===1?h=new d.ctor(n,d.name,d.strings,this,e):d.type===6&&(h=new xs(n,this,e)),this._$AV.push(h),d=t[++l]}c!==d?.index&&(n=Na.nextNode(),c++)}return Na.currentNode=Oa,o}p(e){let a=0;for(const t of this._$AV)t!==void 0&&(t.strings!==void 0?(t._$AI(e,t,a),a+=t.strings.length-2):t._$AI(e[a])),a++}}class nt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,a,t,o){this.type=2,this._$AH=Fr,this._$AN=void 0,this._$AA=e,this._$AB=a,this._$AM=t,this.options=o,this._$Cv=o?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const a=this._$AM;return a!==void 0&&e?.nodeType===11&&(e=a.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,a=this){e=Fa(this,e,a),Rt(e)?e===Fr||e==null||e===""?(this._$AH!==Fr&&this._$AR(),this._$AH=Fr):e!==this._$AH&&e!==ot&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):ss(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==Fr&&Rt(this._$AH)?this._$AA.nextSibling.data=e:this.T(Oa.createTextNode(e)),this._$AH=e}$(e){const{values:a,_$litType$:t}=e,o=typeof t=="number"?this._$AC(e):(t.el===void 0&&(t.el=Lt.createElement(ps(t.h,t.h[0]),this.options)),t);if(this._$AH?._$AD===o)this._$AH.p(a);else{const n=new ms(o,this),c=n.u(this.options);n.p(a),this.T(c),this._$AH=n}}_$AC(e){let a=vs.get(e.strings);return a===void 0&&vs.set(e.strings,a=new Lt(e)),a}k(e){lc(this._$AH)||(this._$AH=[],this._$AR());const a=this._$AH;let t,o=0;for(const n of e)o===a.length?a.push(t=new nt(this.O(jt()),this.O(jt()),this,this.options)):t=a[o],t._$AI(n),o++;o<a.length&&(this._$AR(t&&t._$AB.nextSibling,o),a.length=o)}_$AR(e=this._$AA.nextSibling,a){for(this._$AP?.(!1,!0,a);e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}}class Mt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,a,t,o,n){this.type=1,this._$AH=Fr,this._$AN=void 0,this.element=e,this.name=a,this._$AM=o,this.options=n,t.length>2||t[0]!==""||t[1]!==""?(this._$AH=Array(t.length-1).fill(new String),this.strings=t):this._$AH=Fr}_$AI(e,a=this,t,o){const n=this.strings;let c=!1;if(n===void 0)e=Fa(this,e,a,0),c=!Rt(e)||e!==this._$AH&&e!==ot,c&&(this._$AH=e);else{const l=e;let d,h;for(e=n[0],d=0;d<n.length-1;d++)h=Fa(this,l[t+d],a,d),h===ot&&(h=this._$AH[d]),c||=!Rt(h)||h!==this._$AH[d],h===Fr?e=Fr:e!==Fr&&(e+=(h??"")+n[d+1]),this._$AH[d]=h}c&&!o&&this.j(e)}j(e){e===Fr?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class bs extends Mt{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Fr?void 0:e}}class $s extends Mt{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Fr)}}class ys extends Mt{constructor(e,a,t,o,n){super(e,a,t,o,n),this.type=5}_$AI(e,a=this){if((e=Fa(this,e,a,0)??Fr)===ot)return;const t=this._$AH,o=e===Fr&&t!==Fr||e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive,n=e!==Fr&&(t===Fr||o);o&&this.element.removeEventListener(this.name,this,t),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class xs{constructor(e,a,t){this.element=e,this.type=6,this._$AN=void 0,this._$AM=a,this.options=t}get _$AU(){return this._$AM._$AU}_$AI(e){Fa(this,e)}}const vb={M:ic,P:da,A:sc,C:1,L:fs,R:ms,D:ss,V:Fa,I:nt,H:Mt,N:$s,U:ys,B:bs,F:xs},Pu=cc.litHtmlPolyfillSupport;Pu?.(Lt,nt),(cc.litHtmlVersions??=[]).push("3.3.1");const Lu=(r,e,a)=>{const t=a?.renderBefore??e;let o=t._$litPart$;if(o===void 0){const n=a?.renderBefore??null;t._$litPart$=o=new nt(e.insertBefore(jt(),n),n,void 0,a??{})}return o._$AI(r),o};/** 16 * @license 17 * Copyright 2017 Google LLC 18 * SPDX-License-Identifier: BSD-3-Clause 19 */const hc=globalThis;class Ko extends tt{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const a=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=Lu(a,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return ot}}Ko._$litElement$=!0,Ko.finalized=!0,hc.litElementHydrateSupport?.({LitElement:Ko});const Mu=hc.litElementPolyfillSupport;Mu?.({LitElement:Ko});const pb={_$AK:(r,e,a)=>{r._$AK(e,a)},_$AL:r=>r._$AL};(hc.litElementVersions??=[]).push("4.2.1");const Bu=`@charset "UTF-8"; 20@layer arc-theme, arc-components, arc-utils; 21@layer arc-theme { 22 :root, 23 ::backdrop { 24 --arc-color-mono-black: #000000; 25 --arc-color-mono-white: #ffffff; 26 --arc-color-light-neutral-0: #ffffff; 27 --arc-color-light-neutral-50: #f7f7f7; 28 --arc-color-light-neutral-100: #ededed; 29 --arc-color-light-neutral-200: #e6e6e6; 30 --arc-color-light-neutral-300: #c6c6c6; 31 --arc-color-light-neutral-400: #b0b0b0; 32 --arc-color-light-neutral-500: #9b9b9b; 33 --arc-color-light-neutral-600: #737373; 34 --arc-color-light-neutral-700: #636363; 35 --arc-color-light-neutral-800: #4b4b4b; 36 --arc-color-light-neutral-900: #212121; 37 --arc-color-light-neutral-1000: #000000; 38 --arc-color-light-blue-50: #f0fbff; 39 --arc-color-light-blue-100: #ddf4fd; 40 --arc-color-light-blue-200: #99e4ff; 41 --arc-color-light-blue-300: #53d1ff; 42 --arc-color-light-blue-400: #00aff0; 43 --arc-color-light-blue-500: #0098eb; 44 --arc-color-light-blue-600: #0075cf; 45 --arc-color-light-blue-700: #0065b2; 46 --arc-color-light-blue-800: #005394; 47 --arc-color-light-blue-900: #00335b; 48 --arc-color-light-purple-50: #f1f0ff; 49 --arc-color-light-purple-100: #e9e7fe; 50 --arc-color-light-purple-200: #b2a8ff; 51 --arc-color-light-purple-300: #9789fa; 52 --arc-color-light-purple-400: #8676ff; 53 --arc-color-light-purple-500: #7565f1; 54 --arc-color-light-purple-600: #4e3bd5; 55 --arc-color-light-purple-700: #3120b4; 56 --arc-color-light-purple-800: #16068e; 57 --arc-color-light-purple-900: #0c0064; 58 --arc-color-light-mint-50: #f0fff9; 59 --arc-color-light-mint-100: #d9fdef; 60 --arc-color-light-mint-200: #9df1d1; 61 --arc-color-light-mint-300: #6de3b6; 62 --arc-color-light-mint-400: #44bf90; 63 --arc-color-light-mint-500: #0f9f68; 64 --arc-color-light-mint-600: #008451; 65 --arc-color-light-mint-700: #006e44; 66 --arc-color-light-mint-800: #005937; 67 --arc-color-light-mint-900: #00442a; 68 --arc-color-light-orange-50: #fff6f0; 69 --arc-color-light-orange-100: #fdeadd; 70 --arc-color-light-orange-200: #fac39e; 71 --arc-color-light-orange-300: #fd9e5e; 72 --arc-color-light-orange-400: #ff6602; 73 --arc-color-light-orange-500: #e95d00; 74 --arc-color-light-orange-600: #c24e00; 75 --arc-color-light-orange-700: #a84300; 76 --arc-color-light-orange-800: #933b00; 77 --arc-color-light-orange-900: #662900; 78 --arc-color-light-maroon-50: #ffeff3; 79 --arc-color-light-maroon-100: #fedde5; 80 --arc-color-light-maroon-200: #ffa8be; 81 --arc-color-light-maroon-300: #fe8fab; 82 --arc-color-light-maroon-400: #f27195; 83 --arc-color-light-maroon-500: #e05580; 84 --arc-color-light-maroon-600: #c73868; 85 --arc-color-light-maroon-700: #aa1a53; 86 --arc-color-light-maroon-800: #841a42; 87 --arc-color-light-maroon-900: #5d132d; 88 --arc-color-light-green-50: #f6fff0; 89 --arc-color-light-green-100: #e7fdd9; 90 --arc-color-light-green-200: #bfeea0; 91 --arc-color-light-green-300: #8dd65c; 92 --arc-color-light-green-400: #74bb44; 93 --arc-color-light-green-500: #57a225; 94 --arc-color-light-green-600: #358201; 95 --arc-color-light-green-700: #2c6d00; 96 --arc-color-light-green-800: #235800; 97 --arc-color-light-green-900: #1b4300; 98 --arc-color-light-yellow-50: #fffaf0; 99 --arc-color-light-yellow-100: #fdf2dd; 100 --arc-color-light-yellow-200: #ffdb94; 101 --arc-color-light-yellow-300: #ffc960; 102 --arc-color-light-yellow-400: #ffb629; 103 --arc-color-light-yellow-500: #eb9b00; 104 --arc-color-light-yellow-600: #9e6900; 105 --arc-color-light-yellow-700: #805400; 106 --arc-color-light-yellow-800: #604000; 107 --arc-color-light-yellow-900: #3e2900; 108 --arc-color-light-red-50: #fff0f0; 109 --arc-color-light-red-100: #fde2e2; 110 --arc-color-light-red-200: #ff9999; 111 --arc-color-light-red-300: #ff6161; 112 --arc-color-light-red-400: #ff0000; 113 --arc-color-light-red-500: #eb0000; 114 --arc-color-light-red-600: #b80000; 115 --arc-color-light-red-700: #990000; 116 --arc-color-light-red-800: #7a0000; 117 --arc-color-light-red-900: #520000; 118 --arc-color-dark-neutral-0: #000000; 119 --arc-color-dark-neutral-50: #1c1c1c; 120 --arc-color-dark-neutral-100: #2a2a2a; 121 --arc-color-dark-neutral-200: #3d3d3d; 122 --arc-color-dark-neutral-300: #515151; 123 --arc-color-dark-neutral-400: #666666; 124 --arc-color-dark-neutral-500: #7b7b7b; 125 --arc-color-dark-neutral-600: #939393; 126 --arc-color-dark-neutral-700: #aeaeae; 127 --arc-color-dark-neutral-800: #d0d0d0; 128 --arc-color-dark-neutral-900: #ededed; 129 --arc-color-dark-neutral-1000: #ffffff; 130 --arc-color-dark-blue-50: #002542; 131 --arc-color-dark-blue-100: #093a63; 132 --arc-color-dark-blue-200: #0f4d7a; 133 --arc-color-dark-blue-300: #146192; 134 --arc-color-dark-blue-400: #1974aa; 135 --arc-color-dark-blue-500: #1e88c7; 136 --arc-color-dark-blue-600: #0ca1f7; 137 --arc-color-dark-blue-700: #3ab1f5; 138 --arc-color-dark-blue-800: #70cbfa; 139 --arc-color-dark-blue-900: #b9e6fd; 140 --arc-color-dark-purple-50: #161041; 141 --arc-color-dark-purple-100: #221c5a; 142 --arc-color-dark-purple-200: #2d2773; 143 --arc-color-dark-purple-300: #39328c; 144 --arc-color-dark-purple-400: #463da6; 145 --arc-color-dark-purple-500: #5449c0; 146 --arc-color-dark-purple-600: #6556da; 147 --arc-color-dark-purple-700: #7a6ef0; 148 --arc-color-dark-purple-800: #a193f9; 149 --arc-color-dark-purple-900: #d3c9ff; 150 --arc-color-dark-mint-50: #04291b; 151 --arc-color-dark-mint-100: #0b3425; 152 --arc-color-dark-mint-200: #134434; 153 --arc-color-dark-mint-300: #1b5444; 154 --arc-color-dark-mint-400: #246554; 155 --arc-color-dark-mint-500: #2f7766; 156 --arc-color-dark-mint-600: #14b290; 157 --arc-color-dark-mint-700: #52a895; 158 --arc-color-dark-mint-800: #84d0bd; 159 --arc-color-dark-mint-900: #d6fff2; 160 --arc-color-dark-orange-50: #251104; 161 --arc-color-dark-orange-100: #3a1a08; 162 --arc-color-dark-orange-200: #50240d; 163 --arc-color-dark-orange-300: #672f14; 164 --arc-color-dark-orange-400: #7f3c1d; 165 --arc-color-dark-orange-500: #984b27; 166 --arc-color-dark-orange-600: #d55913; 167 --arc-color-dark-orange-700: #d1764d; 168 --arc-color-dark-orange-800: #eba883; 169 --arc-color-dark-orange-900: #ffdcc9; 170 --arc-color-dark-maroon-50: #2a0914; 171 --arc-color-dark-maroon-100: #40101f; 172 --arc-color-dark-maroon-200: #56162b; 173 --arc-color-dark-maroon-300: #6c1e39; 174 --arc-color-dark-maroon-400: #822647; 175 --arc-color-dark-maroon-500: #993057; 176 --arc-color-dark-maroon-600: #b13d69; 177 --arc-color-dark-maroon-700: #d05886; 178 --arc-color-dark-maroon-800: #e891b5; 179 --arc-color-dark-maroon-900: #ffd6e7; 180 --arc-color-dark-green-50: #132904; 181 --arc-color-dark-green-100: #1b340a; 182 --arc-color-dark-green-200: #264411; 183 --arc-color-dark-green-300: #31551a; 184 --arc-color-dark-green-400: #3e6625; 185 --arc-color-dark-green-500: #4c7831; 186 --arc-color-dark-green-600: #55a722; 187 --arc-color-dark-green-700: #72a65b; 188 --arc-color-dark-green-800: #a0d092; 189 --arc-color-dark-green-900: #e2fcd9; 190 --arc-color-dark-yellow-50: #2e2005; 191 --arc-color-dark-yellow-100: #3a2907; 192 --arc-color-dark-yellow-200: #51390d; 193 --arc-color-dark-yellow-300: #684a14; 194 --arc-color-dark-yellow-400: #7f5c1c; 195 --arc-color-dark-yellow-500: #976f25; 196 --arc-color-dark-yellow-600: #d99d0f; 197 --arc-color-dark-yellow-700: #d1a049; 198 --arc-color-dark-yellow-800: #eccc86; 199 --arc-color-dark-yellow-900: #fff7d9; 200 --arc-color-dark-red-50: #250404; 201 --arc-color-dark-red-100: #3a0809; 202 --arc-color-dark-red-200: #500d0e; 203 --arc-color-dark-red-300: #671416; 204 --arc-color-dark-red-400: #7e1d1f; 205 --arc-color-dark-red-500: #97292b; 206 --arc-color-dark-red-600: #d4423f; 207 --arc-color-dark-red-700: #d86466; 208 --arc-color-dark-red-800: #e88987; 209 --arc-color-dark-red-900: #ffd6d6; 210 --arc-color-alpha-black-0: rgb(0 0 0 / 0%); 211 --arc-color-alpha-black-3: rgb(0 0 0 / 3%); 212 --arc-color-alpha-black-5: rgb(0 0 0 / 5%); 213 --arc-color-alpha-black-7: rgb(0 0 0 / 7%); 214 --arc-color-alpha-black-10: rgb(0 0 0 / 10%); 215 --arc-color-alpha-black-15: rgb(0 0 0 / 15%); 216 --arc-color-alpha-black-20: rgb(0 0 0 / 20%); 217 --arc-color-alpha-black-25: rgb(0 0 0 / 25%); 218 --arc-color-alpha-black-30: rgb(0 0 0 / 30%); 219 --arc-color-alpha-black-40: rgb(0 0 0 / 40%); 220 --arc-color-alpha-black-50: rgb(0 0 0 / 50%); 221 --arc-color-alpha-black-60: rgb(0 0 0 / 60%); 222 --arc-color-alpha-black-70: rgb(0 0 0 / 70%); 223 --arc-color-alpha-black-80: rgb(0 0 0 / 80%); 224 --arc-color-alpha-black-90: rgb(0 0 0 / 90%); 225 --arc-color-alpha-black-95: rgb(0 0 0 / 95%); 226 --arc-color-alpha-black-100: rgb(0 0 0 / 100%); 227 --arc-color-alpha-white-0: rgb(255 255 255 / 0%); 228 --arc-color-alpha-white-3: rgb(255 255 255 / 3%); 229 --arc-color-alpha-white-5: rgb(255 255 2
22955 / 5%); 230 --arc-color-alpha-white-7: rgb(255 255 255 / 7%); 231 --arc-color-alpha-white-10: rgb(255 255 255 / 10%); 232 --arc-color-alpha-white-15: rgb(255 255 255 / 15%); 233 --arc-color-alpha-white-20: rgb(255 255 255 / 20%); 234 --arc-color-alpha-white-25: rgb(255 255 255 / 25%); 235 --arc-color-alpha-white-30: rgb(255 255 255 / 30%); 236 --arc-color-alpha-white-40: rgb(255 255 255 / 40%); 237 --arc-color-alpha-white-50: rgb(255 255 255 / 50%); 238 --arc-color-alpha-white-60: rgb(255 255 255 / 60%); 239 --arc-color-alpha-white-70: rgb(255 255 255 / 70%); 240 --arc-color-alpha-white-80: rgb(255 255 255 / 80%); 241 --arc-color-alpha-white-90: rgb(255 255 255 / 90%); 242 --arc-color-alpha-white-95: rgb(255 255 255 / 95%); 243 --arc-color-alpha-white-100: rgb(255 255 255 / 100%); 244 --arc-gradient-ai-50: linear-gradient(60deg, light-dark(#fbf2ff, #210125), light-dark(#f4fbff, #00223b)); 245 --arc-gradient-ai-100: linear-gradient(60deg, light-dark(#efccff, #540160), light-dark(#d2f1fe, #02497d)); 246 --arc-gradient-ai-200: linear-gradient(60deg, light-dark(#9c15ff, #ad44cb), light-dark(#1eb4fb, #169cfe)); 247 --arc-gradient-ai-300: linear-gradient(60deg, light-dark(#680278, #ad44cb), light-dark(#0179d0, #71bdfe)); 248 --arc-gradient-ai-400: linear-gradient(60deg, light-dark(#5d3668, #c778de), light-dark(#36648c, #84daff)); 249 --arc-gradient-ai-500: linear-gradient(60deg, light-dark(#37003f, #e3a7ff), light-dark(#004273, #b7eaff)); 250 --arc-gradient-ai-600: linear-gradient(60deg, light-dark(#27002c, #f9ebff), light-dark(#012a48, #c2edff)); 251 --arc-color-overlay-subtle: light-dark(var(--arc-color-alpha-white-70), var(--arc-color-alpha-black-70)); 252 --arc-color-overlay-stark: light-dark(var(--arc-color-alpha-black-50), var(--arc-color-alpha-black-50)); 253 --arc-color-shadow-sm: light-dark(var(--arc-color-alpha-black-25), var(--arc-color-alpha-black-60)); 254 --arc-color-shadow-md: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-black-50)); 255 --arc-color-shadow-lg: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-black-40)); 256 --arc-color-shadow-xl: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-black-40)); 257 --arc-color-bg-primary: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-100)); 258 --arc-color-bg-secondary: light-dark(var(--arc-color-alpha-black-5), var(--arc-color-alpha-white-10)); 259 --arc-color-bg-tertiary: light-dark(var(--arc-color-light-neutral-200), var(--arc-color-dark-neutral-300)); 260 --arc-color-bg-mono-inverse: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 261 --arc-color-bg-mono: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 262 --arc-color-bg-disabled: light-dark(var(--arc-color-alpha-black-5), var(--arc-color-alpha-white-15)); 263 --arc-color-bg-hover-subtle: light-dark(var(--arc-color-alpha-black-3), var(--arc-color-alpha-white-3)); 264 --arc-color-bg-hover-default: light-dark(var(--arc-color-alpha-black-7), var(--arc-color-alpha-white-15)); 265 --arc-color-bg-hover-stark: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-30)); 266 --arc-color-bg-selected-subtle: light-dark(var(--arc-color-light-blue-50), var(--arc-color-dark-blue-50)); 267 --arc-color-bg-selected-default: light-dark(var(--arc-color-light-blue-100), var(--arc-color-dark-blue-200)); 268 --arc-color-bg-selected-stark: light-dark(var(--arc-color-light-blue-200), var(--arc-color-dark-blue-400)); 269 --arc-color-bg-theme-muted: light-dark(var(--arc-color-alpha-black-5), var(--arc-color-alpha-white-5)); 270 --arc-color-bg-theme-subtle: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-15)); 271 --arc-color-bg-theme-mid: light-dark(var(--arc-color-light-neutral-500), var(--arc-color-dark-neutral-300)); 272 --arc-color-bg-theme-stark: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-alpha-white-50)); 273 --arc-color-bg-theme-heavy: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 274 --arc-color-bg-success-muted: light-dark(var(--arc-color-light-green-50), var(--arc-color-dark-green-50)); 275 --arc-color-bg-success-subtle: light-dark(var(--arc-color-light-green-100), var(--arc-color-dark-green-100)); 276 --arc-color-bg-success-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 277 --arc-color-bg-success-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 278 --arc-color-bg-success-heavy: light-dark(var(--arc-color-light-green-800), var(--arc-color-dark-green-800)); 279 --arc-color-bg-warning-muted: light-dark(var(--arc-color-light-yellow-50), var(--arc-color-dark-yellow-50)); 280 --arc-color-bg-warning-subtle: light-dark(var(--arc-color-light-yellow-100), var(--arc-color-dark-yellow-100)); 281 --arc-color-bg-warning-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 282 --arc-color-bg-warning-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 283 --arc-color-bg-warning-heavy: light-dark(var(--arc-color-light-yellow-700), var(--arc-color-dark-yellow-700)); 284 --arc-color-bg-critical-muted: light-dark(var(--arc-color-light-red-50), var(--arc-color-dark-red-50)); 285 --arc-color-bg-critical-subtle: light-dark(var(--arc-color-light-red-100), var(--arc-color-dark-red-100)); 286 --arc-color-bg-critical-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-600)); 287 --arc-color-bg-critical-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-700)); 288 --arc-color-bg-critical-heavy: light-dark(var(--arc-color-light-red-800), var(--arc-color-dark-red-800)); 289 --arc-color-bg-info-muted: light-dark(var(--arc-color-light-purple-50), var(--arc-color-dark-purple-50)); 290 --arc-color-bg-info-subtle: light-dark(var(--arc-color-light-purple-100), var(--arc-color-dark-purple-100)); 291 --arc-color-bg-info-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 292 --arc-color-bg-info-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-700)); 293 --arc-color-bg-info-heavy: light-dark(var(--arc-color-light-purple-800), var(--arc-color-dark-purple-800)); 294 --arc-color-bg-brand-muted: light-dark(var(--arc-color-light-blue-50), var(--arc-color-dark-blue-50)); 295 --arc-color-bg-brand-subtle: light-dark(var(--arc-color-light-blue-100), var(--arc-color-dark-blue-100)); 296 --arc-color-bg-brand-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-400)); 297 --arc-color-bg-brand-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-600)); 298 --arc-color-bg-brand-heavy: light-dark(var(--arc-color-light-blue-800), var(--arc-color-dark-blue-800)); 299 --arc-color-bg-neutral-muted: light-dark(var(--arc-color-alpha-black-7), var(--arc-color-alpha-white-15)); 300 --arc-color-bg-neutral-subtle: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-25)); 301 --arc-color-bg-neutral-mid: light-dark(var(--arc-color-light-neutral-300), var(--arc-color-dark-neutral-400)); 302 --arc-color-bg-neutral-stark: light-dark(var(--arc-color-light-neutral-600), var(--arc-color-dark-neutral-600)); 303 --arc-color-bg-neutral-heavy: light-dark(var(--arc-color-light-neutral-800), var(--arc-color-dark-neutral-800)); 304 --arc-color-bg-orange-muted: light-dark(var(--arc-color-light-orange-50), var(--arc-color-dark-orange-50)); 305 --arc-color-bg-orange-subtle: light-dark(var(--arc-color-light-orange-100), var(--arc-color-dark-orange-100)); 306 --arc-color-bg-orange-mid: light-dark(var(--arc-color-light-orange-400), var(--arc-color-dark-orange-400)); 307 --arc-color-bg-orange-stark: light-dark(var(--arc-color-light-orange-600), var(--arc-color-dark-orange-600)); 308 --arc-color-bg-orange-heavy: light-dark(var(--arc-color-light-orange-800), var(--arc-color-dark-orange-800)); 309 --arc-color-bg-mint-muted: light-dark(var(--arc-color-light-mint-50), var(--arc-color-dark-mint-50)); 310 --arc-color-bg-mint-subtle: light-dark(var(--arc-color-light-mint-100), var(--arc-color-dark-mint-100)); 311 --arc-color-bg-mint-mid: light-dark(var(--arc-color-light-mint-400), var(--arc-color-dark-mint-400)); 312 --arc-color-bg-mint-stark: light-dark(var(--arc-color-light-mint-600), var(--arc-color-dark-mint-600)); 313 --arc-color-bg-mint-heavy: light-dark(var(--arc-color-light-mint-800), var(--arc-color-dark-mint-800)); 314 --arc-color-bg-maroon-muted: light-dark(var(--arc-color-light-maroon-50), var(--arc-color-dark-maroon-50)); 315 --arc-color-bg-maroon-subtle: light-dark(var(--arc-color-light-maroon-100), var(--arc-color-dark-maroon-100)); 316 --arc-color-bg-maroon-mid: light-dark(var(--arc-color-light-maroon-400), var(--arc-color-dark-maroon-400)); 317 --arc-color-bg-maroon-stark: light-dark(var(--arc-color-light-maroon-600), var(--arc-color-dark-maroon-700)); 318 --arc-color-bg-maroon-heavy: light-dark(var(--arc-color-light-maroon-800), var(--arc-color-dark-maroon-800)); 319 --arc-color-bg-blue-muted: light-dark(var(--arc-color-light-blue-50), var(--arc-color-dark-blue-50)); 320 --arc-color-bg-blue-subtle: light-dark(var(--arc-color-light-blue-100), var(--arc-color-dark-blue-100)); 321 --arc-color-bg-blue-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-400)); 322 --arc-color-bg-blue-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-600)); 323 --arc-color-bg-blue-heavy: light-dark(var(--arc-color-light-blue-800), var(--arc-color-dark-blue-800)); 324 --arc-color-bg-purple-muted: light-dark(var(--arc-color-light-purple-50), var(--arc-color-dark-purple-50)); 325 --arc-color-bg-purple-subtle: light-dark(var(--arc-color-light-purple-100), var(--arc-color-dark-purple-100)); 326 --arc-color-bg-purple-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 327 --arc-color-bg-purple-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-700)); 328 --arc-color-bg-purple-heavy: light-dark(var(--arc-color-light-purple-800), var(--arc-color-dark-purple-800)); 329 --arc-color-bg-green-muted: light-dark(var(--arc-color-light-green-50), var(--arc-color-dark-green-50)); 330 --arc-color-bg-green-subtle: light-dark(var(--arc-color-light-green-100), var(--arc-color-dark-green-100)); 331 --arc-color-bg-green-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 332 --arc-color-bg-green-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 333 --arc-color-bg-green-heavy: light-dark(var(--arc-color-light-green-800), var(--arc-color-dark-green-800)); 334 --arc-color-bg-yellow-muted: light-dark(var(--arc-color-light-yellow-50), var(--arc-color-dark-yellow-50)); 335 --arc-color-bg-yellow-subtle: light-dark(var(--arc-color-light-yellow-100), var(--arc-color-dark-yellow-100)); 336 --arc-color-bg-yellow-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 337 --arc-color-bg-yellow-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 338 --arc-color-bg-yellow-heavy: light-dark(var(--arc-color-light-yellow-700), var(--arc-color-dark-yellow-700)); 339 --arc-color-bg-red-muted: light-dark(var(--arc-color-light-red-50), var(--arc-color-dark-red-50)); 340 --arc-color-bg-red-subtle: light-dark(var(--arc-color-light-red-100), var(--arc-color-dark-red-100)); 341 --arc-color-bg-red-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-600)); 342 --arc-color-bg-red-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-700)); 343 --arc-color-bg-red-heavy: light-dark(var(--arc-color-light-red-800), var(--arc-color-dark-red-800)); 344 --arc-color-fg-primary: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 345 --arc-color-fg-secondary: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-dark-neutral-700)); 346 --arc-color-fg-on-hover-subtle: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 347 --arc-color-fg-on-hover-default: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 348 --arc-color-fg-on-hover-stark: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 349 --arc-color-fg-disabled: light-dark(var(--arc-color-alpha-black-40), var(--arc-color-alpha-white-40)); 350 --arc-color-fg-on-selected-subtle: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 351 --arc-color-fg-on-selected-default: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 352 --arc-color-fg-on-selected-stark: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 353 --arc-color-fg-on-theme-muted: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 354 --arc-color-fg-on-theme-subtle: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 355 --arc-color-fg-on-theme-mid: light-dark(var(--arc-color-light-neutral-100), var(--arc-color-dark-neutral-800)); 356 --arc-color-fg-on-theme-stark: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 357 --arc-color-fg-on-theme-heavy: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 358 --arc-color-fg-on-muted: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 359 --arc-color-fg-on-subtle: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 360 --arc-color-fg-on-mid: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 361 --arc-color-fg-on-stark: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 362 --arc-color-fg-on-heavy: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 363 --arc-color-fg-on-mono-inverse: light-dark(var(--arc-color-light-neutral-0), var(--arc-color-dark-neutral-0)); 364 --arc-color-fg-on-mono: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 365 --arc-color-fg-success-subtle: light-dark(var(--arc-color-light-green-300), var(--arc-color-dark-green-400)); 366 --arc-color-fg-success-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-600)); 367 --arc-color-fg-success-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-800)); 368 --arc-color-fg-warning-subtle: light-dark(var(--arc-color-light-yellow-300), var(--arc-color-dark-yellow-400)); 369 --arc-color-fg-warning-mid: light-dark(var(--arc-color-light-yellow-500), var(--arc-color-dark-yellow-600)); 370 --arc-color-fg-warning-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-800)); 371 --arc-color-fg-critical-subtle: light-dark(var(--arc-color-light-red-300), var(--arc-color-dark-red-500)); 372 --arc-color-fg-critical-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-700)); 373 --arc-color-fg-critical-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-800)); 374 --arc-color-fg-info-subtle: light-dark(var(--arc-color-light-purple-300), var(--arc-color-dark-purple-400)); 375 --arc-color-fg-info-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-600)); 376 --arc-color-fg-info-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-800)); 377 --arc-color-fg-brand-subtle: light-dark(var(--arc-color-light-blue-300), var(--arc-color-dark-blue-400)); 378 --arc-color-fg-brand-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-600)); 379 --arc-color-fg-brand-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-800)); 380 --arc-color-fg-orange-subtle: light-dark(var(--arc-color-light-orange-300), var(--arc-color-dark-orange-400)); 381 --arc-color-fg-orange-mid: light-dark(var(--arc-color-light-orange-400), var(--arc-color-dark-orange-600)); 382 --arc-color-fg-orange-stark: light-dark(var(--arc-color-light-orange-700), var(--arc-color-dark-orange-800)); 383 --arc-color-fg-mint-subtle: light-dark(var(--arc-color-light-mint-
383300), 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-color-dark-mint-400)); 441 --arc-color-border-mint-stark: light-dark(var(--arc-color-light-mint-600), var(--arc-color-dark-mint-600)); 442 --arc-color-border-maroon-subtle: light-dark(var(--arc-color-light-maroon-200), var(--arc-color-dark-maroon-200)); 443 --arc-color-border-maroon-mid: light-dark(var(--arc-color-light-maroon-400), var(--arc-color-dark-maroon-400)); 444 --arc-color-border-maroon-stark: light-dark(var(--arc-color-light-maroon-600), var(--arc-color-dark-maroon-600)); 445 --arc-color-border-blue-subtle: light-dark(var(--arc-color-light-blue-200), var(--arc-color-dark-blue-200)); 446 --arc-color-border-blue-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-500)); 447 --arc-color-border-blue-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-600)); 448 --arc-color-border-purple-subtle: light-dark(var(--arc-color-light-purple-200), var(--arc-color-dark-purple-300)); 449 --arc-color-border-purple-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 450 --arc-color-border-purple-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-600)); 451 --arc-color-border-green-subtle: light-dark(var(--arc-color-light-green-200), var(--arc-color-dark-green-300)); 452 --arc-color-border-green-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 453 --arc-color-border-green-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 454 --arc-color-border-yellow-subtle: light-dark(var(--arc-color-light-yellow-200), var(--arc-color-dark-yellow-300)); 455 --arc-color-border-yellow-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 456 --arc-color-border-yellow-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 457 --arc-color-border-red-subtle: light-dark(var(--arc-color-light-red-200), var(--arc-color-dark-red-300)); 458 --arc-color-border-red-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-500)); 459 --arc-color-border-red-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-800)); 460 --arc-color-border-disabled: light-dark(var(--arc-color-alpha-black-20), var(--arc-color-alpha-white-20)); 461 --arc-color-border-theme-subtle: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-15)); 462 --arc-color-border-theme-mid: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-25)); 463 --arc-color-border-theme-stark: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-alpha-white-50)); 464 --arc-color-alpha-muted: light-dark(var(--arc-color-alpha-black-3), var(--arc-color-alpha-white-3)); 465 --arc-color-alpha-subtle: light-dark(var(--arc-color-alpha-black-7), var(--arc-color-alpha-white-15)); 466 --arc-color-alpha-mid: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-30)); 467 --arc-color-alpha-stark: light-dark(var(--arc-color-alpha-black-30), var(--arc-color-alpha-white-60)); 468 --arc-color-alpha-heavy: light-dark(var(--arc-color-alpha-black-60), var(--arc-color-alpha-white-70)); 469 } 470} 471/* 472 A NOTE ON USING ARC TOKENS (CSS VARIABLES) --------------------------\u2022 473 474 Tokens with \`--arc-internal-\` prefixes are internal only 475 - NOT FOR CONSUMER USE 476 - These are System/Internal things and are not intended to be 477 access or modified by consumers of the design system. 478 - Please reach out to #design-system in Slack for guidance or help, 479 or to request something new. 480 481
482 OVERRIDES, BE CAUTIOUS \u2022 These are available for acute adjustments, 483 but not needed in most cases. 484 ---------------------------------------------------------------------\u2022 485 --arc-font-size-base \u2022 Override if your app's \`rem\` size 486 isn't effectively 16px. For instance, 487 set to 1 if your \`rem\` is 10px. 488 489 --arc-font-variation-settings \u2022 Research \`font-variation-settings\` 490 before using this token. 491 492 --arc-font-size-mono \u2022 Controls size of monospace fonts. 493 --arc-line-height-title \u2022 Various text adjustment overrides... 494 --arc-line-height-heading 495 --arc-line-height-subheading 496 --arc-line-height-body 497 --arc-line-height-mono 498 --arc-letter-spacing-title 499 --arc-letter-spacing-heading 500 ---------------------------------------------------------------------\u2022 501*/ 502@layer arc-theme { 503 :root, 504 ::backdrop { 505 --arc-internal-font-size: var(--arc-font-size-base, 0.625); 506 --arc-internal-font-body: Inter, system-ui, sans-serif; 507 --arc-internal-font-expressive: "GT Walsheim", system-ui, sans-serif; 508 --arc-internal-font-mono: "Roboto Mono", monospace; 509 --arc-internal-font-size-mono: 0.875em; 510 --arc-internal-letter-spacing: -0.015em; 511 --arc-internal-font-vs: "opsz" 24; 512 --arc-font-family-expressive: var(--arc-internal-font-expressive); 513 --arc-font-family-title: var(--arc-internal-font-expressive); 514 --arc-font-family-heading: var(--arc-internal-font-expressive); 515 --arc-font-family-subheading: var(--arc-internal-font-body); 516 --arc-font-family-body: var(--arc-internal-font-body); 517 --arc-font-family-mono: var(--arc-internal-font-mono); 518 --arc-line-height-tight: 1.2; 519 --arc-line-height-standard: 1.4; 520 --arc-line-height-loose: 1.6; 521 --arc-line-height-title: var(--arc-line-height-tight); 522 --arc-line-height-heading: var(--arc-line-height-tight); 523 --arc-line-height-subheading: var(--arc-line-height-tight); 524 --arc-line-height-body: var(--arc-line-height-standard); 525 --arc-line-height-mono: var(--arc-line-height-standard); 526 --arc-letter-spacing-heading: var(--arc-internal-letter-spacing); 527 --arc-letter-spacing-title: var(--arc-internal-letter-spacing); 528 --arc-font-weight-400: 400; 529 --arc-font-weight-500: 500; 530 --arc-font-weight-600: 600; 531 --arc-font-weight-title: var(--arc-font-weight-600); 532 --arc-font-weight-heading: var(--arc-font-weight-600); 533 --arc-font-weight-subheading: var(--arc-font-weight-600); 534 --arc-font-weight-bold: var(--arc-font-weight-600); 535 --arc-font-weight-body: var(--arc-font-weight-400); 536 --arc-font-weight-normal: var(--arc-font-weight-400); 537 --arc-font-size-08: calc(0.8rem * var(--arc-internal-font-size)); 538 --arc-font-size-10: calc(1rem * var(--arc-internal-font-size)); 539 --arc-font-size-12: calc(1.2rem * var(--arc-internal-font-size)); 540 --arc-font-size-14: calc(1.4rem * var(--arc-internal-font-size)); 541 --arc-font-size-16: calc(1.6rem * var(--arc-internal-font-size)); 542 --arc-font-size-18: calc(1.8rem * var(--arc-internal-font-size)); 543 --arc-font-size-20: calc(2rem * var(--arc-internal-font-size)); 544 --arc-font-size-24: calc(2.4rem * var(--arc-internal-font-size)); 545 --arc-font-size-28: calc(2.8rem * var(--arc-internal-font-size)); 546 --arc-font-size-32: calc(3.2rem * var(--arc-internal-font-size)); 547 --arc-font-size-40: calc(4rem * var(--arc-internal-font-size)); 548 --arc-font-size-title-lg: var(--arc-font-size-40); 549 --arc-font-size-title-md: var(--arc-font-size-32); 550 --arc-font-size-title-sm: var(--arc-font-size-28); 551 --arc-font-size-heading-lg: var(--arc-font-size-24); 552 --arc-font-size-heading-md: var(--arc-font-size-20); 553 --arc-font-size-heading-sm: var(--arc-font-size-18); 554 --arc-font-size-subheading-lg: var(--arc-font-size-16); 555 --arc-font-size-subheading-md: var(--arc-font-size-14); 556 --arc-font-size-subheading-sm: var(--arc-font-size-12); 557 --arc-font-size-body-lg: var(--arc-font-size-16); 558 --arc-font-size-body-md: var(--arc-font-size-14); 559 --arc-font-size-body-sm: var(--arc-font-size-12); 560 --arc-font-size-body-xs: var(--arc-font-size-10); 561 --arc-font-size-mono-lg: var(--arc-font-size-14); 562 --arc-font-size-mono-md: var(--arc-font-size-12); 563 --arc-font-size-mono-sm: var(--arc-font-size-10); 564 } 565 [data-arc-theme~=font-family] { 566 font-family: var(--arc-font-family-body); 567 font-size: var(--arc-font-size-16); 568 font-weight: var(--arc-font-weight-body); 569 line-height: var(--arc-line-height-body, var(--arc-line-height-standard)); 570 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 571 } 572 [data-arc-theme~=font-family] :where(h1, h2, h3) { 573 font-family: var(--arc-font-family-heading); 574 font-weight: var(--arc-font-weight-heading); 575 letter-spacing: var(--arc-letter-spacing-heading); 576 line-height: var(--arc-internal-line-height, var(--arc-line-height-heading)); 577 } 578 [data-arc-theme~=font-family] :where(h4, h5, h6) { 579 font-family: var(--arc-font-family-subheading); 580 font-weight: var(--arc-font-weight-subheading); 581 line-height: var(--arc-internal-line-height, var(--arc-line-height-subheading)); 582 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 583 } 584 [data-arc-theme~=font-family] :where(h1) { 585 font-size: var(--arc-font-size-24); 586 } 587 [data-arc-theme~=font-family] :where(h2) { 588 font-size: var(--arc-font-size-20); 589 } 590 [data-arc-theme~=font-family] :where(h3) { 591 font-size: var(--arc-font-size-18); 592 } 593 [data-arc-theme~=font-family] :where(h4) { 594 font-size: var(--arc-font-size-16); 595 } 596 [data-arc-theme~=font-family] :where(h5) { 597 font-size: var(--arc-font-size-14); 598 } 599 [data-arc-theme~=font-family] :where(h6) { 600 font-size: var(--arc-font-size-12); 601 } 602 [data-arc-theme~=font-family] :where(b, strong) { 603 font-weight: var(--arc-font-weight-600); 604 } 605 [data-arc-theme~=font-family] :where(i, em) { 606 font-style: italic; 607 } 608 [data-arc-theme~=font-family] :where(u) { 609 text-decoration: underline; 610 } 611 [data-arc-theme~=font-family] :where(pre, code) { 612 font-family: var(--arc-font-family-mono); 613 font-size: var(--arc-font-size-mono, var(--arc-internal-font-size-mono)); 614 } 615} 616@layer arc-utils { 617 .arc-font-title-lg { 618 font-size: var(--arc-font-size-40); 619 } 620 .arc-font-title-md { 621 font-size: var(--arc-font-size-32); 622 } 623 .arc-font-title-sm { 624 font-size: var(--arc-font-size-28); 625 } 626 :is(.arc-font-title, .arc-font-title-lg, .arc-font-title-md, .arc-font-title-sm) { 627 font-family: var(--arc-font-family-title); 628 font-weight: var(--arc-font-weight-title); 629 letter-spacing: var(--arc-letter-spacing-title); 630 line-height: var(--arc-internal-line-height, var(--arc-line-height-title)); 631 } 632 .arc-font-heading-lg { 633 font-size: var(--arc-font-size-24); 634 } 635 .arc-font-heading-md { 636 font-size: var(--arc-font-size-20); 637 } 638 .arc-font-heading-sm { 639 font-size: var(--arc-font-size-18); 640 } 641 :is(.arc-font-heading, .arc-font-heading-lg, .arc-font-heading-md, .arc-font-heading-sm) { 642 font-family: var(--arc-font-family-heading); 643 font-weight: var(--arc-font-weight-heading); 644 letter-spacing: var(--arc-letter-spacing-heading); 645 line-height: var(--arc-internal-line-height, var(--arc-line-height-heading)); 646 } 647 .arc-font-subheading-lg { 648 font-size: var(--arc-font-size-16); 649 } 650 .arc-font-subheading-md { 651 font-size: var(--arc-font-size-14); 652 } 653 .arc-font-subheading-sm { 654 font-size: var(--arc-font-size-12); 655 } 656 :is(.arc-font-subheading, .arc-font-subheading-lg, .arc-font-subheading-md, .arc-font-subheading-sm) { 657 font-family: var(--arc-font-family-subheading); 658 font-weight: var(--arc-font-weight-subheading); 659 line-height: var(--arc-internal-line-height, var(--arc-line-height-subheading)); 660 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 661 } 662 .arc-font-body-lg { 663 font-size: var(--arc-font-size-16); 664 } 665 .arc-font-body-md { 666 font-size: var(--arc-font-size-14); 667 } 668 .arc-font-body-sm { 669 font-size: var(--arc-font-size-12); 670 } 671 /** @deprecated - 'xsm' is not a valid size value in our sizing names */ 672 :is(.arc-font-body-xsm), 673 :is(.arc-font-body-xs) { 674 font-size: var(--arc-font-size-10); 675 } 676 /** @deprecated - 'xsm' is not a valid size value in our sizing names */ 677 :is(.arc-font-body-xsm), 678 :is(.arc-font-body, .arc-font-body-lg, .arc-font-body-md, .arc-font-body-sm) { 679 font-family: var(--arc-font-family-body); 680 line-height: var(--arc-internal-line-height, var(--arc-line-height-body)); 681 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 682 } 683 .arc-font-mono-lg { 684 font-size: var(--arc-font-size-14); 685 } 686 .arc-font-mono-md { 687 font-size: var(--arc-font-size-12); 688 } 689 .arc-font-mono-sm { 690 font-size: var(--arc-font-size-10); 691 } 692 :is(.arc-font-mono, .arc-font-mono-lg, .arc-font-mono-md, .arc-font-mono-sm) { 693 font-family: var(--arc-font-family-mono); 694 line-height: var(--arc-internal-line-height, var(--arc-line-height-mono)); 695 } 696 .arc-line-height-loose { 697 --arc-internal-line-height: var(--arc-line-height-loose); 698 line-height: var(--arc-internal-line-height); 699 } 700 .arc-line-height-standard { 701 --arc-internal-line-height: var(--arc-line-height-standard); 702 line-height: var(--arc-internal-line-height); 703 } 704 .arc-line-height-tight { 705 --arc-internal-line-height: var(--arc-line-height-tight); 706 line-height: var(--arc-internal-line-height); 707 } 708} 709@layer arc-theme { 710 :root, 711 ::backdrop { 712 --arc-internal-space: 0.8rem * var(--arc-internal-font-size); 713 --arc-internal-size: 0.8rem * var(--arc-internal-font-size); 714 --arc-space-0: 0; 715 --arc-space-0-25: calc(0.25 * var(--arc-internal-space)); 716 --arc-space-0-5: calc(0.5 * var(--arc-internal-space)); 717 --arc-space-0-75: calc(0.75 * var(--arc-internal-space)); 718 --arc-space-1: calc(var(--arc-internal-space)); 719 --arc-space-1-25: calc(1.25 * var(--arc-internal-space)); 720 --arc-space-1-5: calc(1.5 * var(--arc-internal-space)); 721 --arc-space-2: calc(2 * var(--arc-internal-space)); 722 --arc-space-2-5: calc(2.5 * var(--arc-internal-space)); 723 --arc-space-3: calc(3 * var(--arc-internal-space)); 724 --arc-space-4: calc(4 * var(--arc-internal-space)); 725 --arc-space-5: calc(5 * var(--arc-internal-space)); 726 --arc-space-6: calc(6 * var(--arc-internal-space)); 727 --arc-space-7: calc(7 * var(--arc-internal-space)); 728 --arc-space-8: calc(8 * var(--arc-internal-space)); 729 --arc-space-9: calc(9 * var(--arc-internal-space)); 730 --arc-space-10: calc(10 * var(--arc-internal-space)); 731 --arc-space-11: calc(11 * var(--arc-internal-space)); 732 --arc-space-12: calc(12 * var(--arc-internal-space)); 733 --arc-size-0: 0; 734 --arc-size-0-25: calc(0.25 * var(--arc-internal-size)); 735 --arc-size-0-5: calc(0.5 * var(--arc-internal-size)); 736 --arc-size-0-75: calc(0.75 * var(--arc-internal-size)); 737 --arc-size-1: calc(var(--arc-internal-size)); 738 --arc-size-1-25: calc(1.25 * var(--arc-internal-size)); 739 --arc-size-1-5: calc(1.5 * var(--arc-internal-size)); 740 --arc-size-1-75: calc(1.75 * var(--arc-internal-size)); 741 --arc-size-2: calc(2 * var(--arc-internal-size)); 742 --arc-size-2-25: calc(2.25 * var(--arc-internal-size)); 743 --arc-size-2-5: calc(2.5 * var(--arc-internal-size)); 744 --arc-size-2-75: calc(2.75 * var(--arc-internal-size)); 745 --arc-size-3: calc(3 * var(--arc-internal-size)); 746 --arc-size-3-25: calc(3.25 * var(--arc-internal-size)); 747 --arc-size-3-5: calc(3.5 * var(--arc-internal-size)); 748 --arc-size-3-75: calc(3.75 * var(--arc-internal-size)); 749 --arc-size-4: calc(4 * var(--arc-internal-size)); 750 --arc-size-4-25: calc(4.25 * var(--arc-internal-size)); 751 --arc-size-4-5: calc(4.5 * var(--arc-internal-size)); 752 --arc-size-4-75: calc(4.75 * var(--arc-internal-size)); 753 --arc-size-5: calc(5 * var(--arc-internal-size)); 754 --arc-size-6: calc(6 * var(--arc-internal-size)); 755 --arc-size-7: calc(7 * var(--arc-internal-size)); 756 --arc-size-8: calc(8 * var(--arc-internal-size)); 757 --arc-size-9: calc(9 * var(--arc-internal-size)); 758 --arc-size-10: calc(10 * var(--arc-internal-size)); 759 --arc-size-11: calc(11 * var(--arc-internal-size)); 760 --arc-size-12: calc(12 * var(--arc-internal-size)); 761 --arc-size-13: calc(13 * var(--arc-internal-size)); 762 --arc-size-14: calc(14 * var(--arc-internal-size)); 763 --arc-size-15: calc(15 * var(--arc-internal-size)); 764 --arc-size-16: calc(16 * var(--arc-internal-size)); 765 --arc-size-17: calc(17 * var(--arc-internal-size)); 766 --arc-size-18: calc(18 * var(--arc-internal-size)); 767 --arc-size-19: calc(19 * var(--arc-internal-size)); 768 --arc-size-20: calc(20 * var(--arc-internal-size)); 769 --arc\u2022space\u202216m: min(-16px, -1rem); 770 --arc\u2022space\u202214m: min(-14px, -0.875rem); 771 --arc\u2022space\u202212m: min(-12px, -0.75rem); 772 --arc\u2022space\u202210m: min(-10px, -0.625rem); 773 --arc\u2022space\u20228m: min(-8px, -0.5rem); 774 --arc\u2022space\u20226m: min(-6px, -0.375rem); 775 --arc\u2022space\u20225m: min(-5px, -0.3125rem); 776 --arc\u2022space\u20224m: min(-4px, -0.25rem); 777 --arc\u2022space\u20223m: min(-3px, -0.1875rem);
778 --arc\u2022space\u20222m: min(-2px, -0.125rem); 779 --arc\u2022space\u20221m: min(-1px, -0.0625rem); 780 --arc\u2022space\u20220: 0px; 781 --arc\u2022space\u20221: max(1px, 0.0625rem); 782 --arc\u2022space\u20222: max(2px, 0.125rem); 783 --arc\u2022space\u20223: max(3px, 0.1875rem); 784 --arc\u2022space\u20224: max(4px, 0.25rem); 785 --arc\u2022space\u20225: max(5px, 0.3125rem); 786 --arc\u2022space\u20226: max(6px, 0.375rem); 787 --arc\u2022space\u20228: max(8px, 0.5rem); 788 --arc\u2022space\u202210: max(10px, 0.625rem); 789 --arc\u2022space\u202212: max(12px, 0.75rem); 790 --arc\u2022space\u202214: max(14px, 0.875rem); 791 --arc\u2022space\u202216: max(16px, 1rem); 792 --arc\u2022space\u202218: max(18px, 1.125rem); 793 --arc\u2022space\u202220: max(20px, 1.25rem); 794 --arc\u2022space\u202224: max(24px, 1.5rem); 795 --arc\u2022space\u202232: max(32px, 2rem); 796 --arc\u2022space\u202240: max(40px, 2.5rem); 797 --arc\u2022space\u202248: max(48px, 3rem); 798 --arc\u2022space\u202256: max(56px, 3.5rem); 799 --arc\u2022space\u202264: max(64px, 4rem); 800 --arc\u2022space\u202272: max(72px, 4.5rem); 801 --arc\u2022space\u202280: max(80px, 5rem); 802 --arc\u2022space\u202288: max(88px, 5.5rem); 803 --arc\u2022space\u202296: max(96px, 6rem); 804 --arc\u2022size\u202216m: min(-16px, -1rem); 805 --arc\u2022size\u202212m: min(-12px, -0.75rem); 806 --arc\u2022size\u202210m: min(-10px, -0.625rem); 807 --arc\u2022size\u20228m: min(-8px, -0.5rem); 808 --arc\u2022size\u20226m: min(-6px, -0.375rem); 809 --arc\u2022size\u20224m: min(-4px, -0.25rem); 810 --arc\u2022size\u20223m: min(-3px, -0.1875rem); 811 --arc\u2022size\u20222m: min(-2px, -0.125rem); 812 --arc\u2022size\u20221m: min(-1px, -0.0625rem); 813 --arc\u2022size\u20220: 0px; 814 --arc\u2022size\u20221: max(1px, 0.0625rem); 815 --arc\u2022size\u20222: max(2px, 0.125rem); 816 --arc\u2022size\u20223: max(3px, 0.1875rem); 817 --arc\u2022size\u20224: max(4px, 0.25rem); 818 --arc\u2022size\u20225: max(5px, 0.3125rem); 819 --arc\u2022size\u20226: max(6px, 0.375rem); 820 --arc\u2022size\u20228: max(8px, 0.5rem); 821 --arc\u2022size\u202210: max(10px, 0.625rem); 822 --arc\u2022size\u202212: max(12px, 0.75rem); 823 --arc\u2022size\u202214: max(14px, 0.875rem); 824 --arc\u2022size\u202215: max(15px, 0.9375rem); 825 --arc\u2022size\u202216: max(16px, 1rem); 826 --arc\u2022size\u202218: max(18px, 1.125rem); 827 --arc\u2022size\u202220: max(20px, 1.25rem); 828 --arc\u2022size\u202222: max(22px, 1.375rem); 829 --arc\u2022size\u202224: max(24px, 1.5rem); 830 --arc\u2022size\u202225: max(25px, 1.5625rem); 831 --arc\u2022size\u202226: max(26px, 1.625rem); 832 --arc\u2022size\u202228: max(28px, 1.75rem); 833 --arc\u2022size\u202230: max(30px, 1.875rem); 834 --arc\u2022size\u202232: max(32px, 2rem); 835 --arc\u2022size\u202234: max(34px, 2.125rem); 836 --arc\u2022size\u202236: max(36px, 2.25rem); 837 --arc\u2022size\u202238: max(38px, 2.375rem); 838 --arc\u2022size\u202240: max(40px, 2.5rem); 839 --arc\u2022size\u202242: max(42px, 2.625rem); 840 --arc\u2022size\u202244: max(44px, 2.75rem); 841 --arc\u2022size\u202246: max(46px, 2.875rem); 842 --arc\u2022size\u202248: max(48px, 3rem); 843 --arc\u2022size\u202250: max(50px, 3.125rem); 844 --arc\u2022size\u202252: max(52px, 3.25rem); 845 --arc\u2022size\u202254: max(54px, 3.375rem); 846 --arc\u2022size\u202256: max(56px, 3.5rem); 847 --arc\u2022size\u202258: max(58px, 3.625rem); 848 --arc\u2022size\u202260: max(60px, 3.75rem); 849 --arc\u2022size\u202264: max(64px, 4rem); 850 --arc\u2022size\u202268: max(68px, 4.25rem); 851 --arc\u2022size\u202272: max(72px, 4.5rem); 852 --arc\u2022size\u202276: max(76px, 4.75rem); 853 --arc\u2022size\u202280: max(80px, 5rem); 854 --arc\u2022size\u202288: max(88px, 5.5rem); 855 --arc\u2022size\u202296: max(96px, 6rem); 856 --arc\u2022size\u2022104: max(104px, 6.5rem); 857 --arc\u2022size\u2022112: max(112px, 7rem); 858 --arc\u2022size\u2022120: max(120px, 7.5rem); 859 --arc\u2022size\u2022128: max(128px, 8rem); 860 --arc\u2022size\u2022136: max(136px, 8.5rem); 861 --arc\u2022size\u2022144: max(144px, 9rem); 862 --arc\u2022size\u2022152: max(152px, 9.5rem); 863 --arc\u2022size\u2022160: max(160px, 10rem); 864 } 865} 866@layer arc-theme { 867 :root, 868 ::backdrop { 869 --arc-alpha-0: 0%; 870 --arc-alpha-3: 3%; 871 --arc-alpha-5: 5%; 872 --arc-alpha-10: 10%; 873 --arc-alpha-20: 20%; 874 --arc-alpha-25: 25%; 875 --arc-alpha-30: 30%; 876 --arc-alpha-40: 40%; 877 --arc-alpha-50: 50%; 878 --arc-alpha-60: 60%; 879 --arc-alpha-70: 70%; 880 --arc-alpha-80: 80%; 881 --arc-alpha-90: 90%; 882 --arc-alpha-95: 95%; 883 --arc-alpha-100: 100%; 884 --arc-border-radius-none: 0px; 885 --arc-border-radius-sm: max(2px, 0.125em); 886 --arc-border-radius-md: max(4px, 0.25em); 887 --arc-border-radius-lg: max(8px, 0.5em); 888 --arc-border-radius-xl: max(16px, 1em); 889 --arc-border-radius-circle: 50%; 890 --arc-border-radius-pill: 100vh; 891 --arc-border-width-none: 0px; 892 --arc-border-width-sm: max(1px, 0.0625em); 893 --arc-border-width-md: max(2px, 0.125em); 894 --arc-border-width-lg: max(3px, 0.1875em); 895 --arc-border-width-xl: max(4px, 0.25em); 896 /* dynamic shadow tokens */ 897 --arc-shadow-none: none; 898 --arc-shadow-sm: 0 0 max(4px, 0.25em) 0 var(--arc-color-shadow-sm); 899 --arc-shadow-md: 0 max(2px, 0.125em) max(6px, 0.375em) 0 var(--arc-color-shadow-md); 900 --arc-shadow-lg: 0 max(4px, 0.25em) max(24px, 1.5em) 0 var(--arc-color-shadow-lg); 901 --arc-shadow-xl: 0 max(12px, 0.75em) max(48px, 3em) 0 var(--arc-color-shadow-xl); 902 /* static light shadow tokens (primitive alpha colors) */ 903 --arc-shadow-light-none: none; 904 --arc-shadow-light-sm: 0 0 max(4px, 0.25em) 0 var(--arc-color-alpha-black-25); 905 --arc-shadow-light-md: 0 max(2px, 0.125em) max(6px, 0.375em) 0 var(--arc-color-alpha-black-15); 906 --arc-shadow-light-lg: 0 max(4px, 0.25em) max(24px, 1.5em) 0 var(--arc-color-alpha-black-15); 907 --arc-shadow-light-xl: 0 max(12px, 0.75em) max(48px, 3em) 0 var(--arc-color-alpha-black-15); 908 /* static dark shadow tokens (primitive alpha colors) */ 909 --arc-shadow-dark-none: none; 910 --arc-shadow-dark-sm: 0 0 max(4px, 0.25em) 0 var(--arc-color-alpha-black-60); 911 --arc-shadow-dark-md: 0 max(2px, 0.125em) max(6px, 0.375em) 0 var(--arc-color-alpha-black-50); 912 --arc-shadow-dark-lg: 0 max(4px, 0.25em) max(24px, 1.5em) 0 var(--arc-color-alpha-black-40); 913 --arc-shadow-dark-xl: 0 max(12px, 0.75em) max(48px, 3em) 0 var(--arc-color-alpha-black-40); 914 /* surface shadow tokens */ 915 --arc-surface-raised-shadow: var(--arc-shadow-md); 916 --arc-surface-floating-shadow: var(--arc-shadow-lg); 917 } 918} 919@layer arc-utils { 920 /* Gradients -----------------------------------------------------\u2022 */ 921 [arc-gradient] { 922 background-clip: text; 923 color: transparent; 924 /** @note: line-height mitigation strategy for gradient icons 925 * stops icon geometry clipping issues 926 */ 927 } 928 [arc-gradient][arc-icon] { 929 --arc-icon-height: 1.5lh; 930 --arc-icon-max-height: none; 931 --arc-icon-margin-block: -0.5lh; 932 } 933 :is([arc-gradient], [arc-gradient=ai], [arc-gradient=ai-200]) { 934 background-image: var(--arc-gradient-ai-200); 935 } 936 [arc-gradient=ai-50] { 937 background-image: var(--arc-gradient-ai-50); 938 } 939 [arc-gradient=ai-100] { 940 background-image: var(--arc-gradient-ai-100); 941 } 942 [arc-gradient=ai-300] { 943 background-image: var(--arc-gradient-ai-300); 944 } 945 [arc-gradient=ai-400] { 946 background-image: var(--arc-gradient-ai-400); 947 } 948 [arc-gradient=ai-500] { 949 background-image: var(--arc-gradient-ai-500); 950 } 951 [arc-gradient=ai-600] { 952 background-image: var(--arc-gradient-ai-600); 953 } 954 /* Shadows -------------------------------------------------------\u2022 */ 955 [arc-shadow=sm] { 956 box-shadow: var(--arc-shadow-sm); 957 } 958 [arc-shadow=md] { 959 box-shadow: var(--arc-shadow-md); 960 } 961 [arc-shadow=lg] { 962 box-shadow: var(--arc-shadow-lg); 963 } 964 [arc-shadow=xl] { 965 box-shadow: var(--arc-shadow-xl); 966 } 967 /* Light Shadows -------------------------------------------------\u2022 */ 968 [arc-shadow=light-sm] { 969 box-shadow: var(--arc-shadow-light-sm); 970 } 971 [arc-shadow=light-md] { 972 box-shadow: var(--arc-shadow-light-md); 973 } 974 [arc-shadow=light-lg] { 975 box-shadow: var(--arc-shadow-light-lg); 976 } 977 [arc-shadow=light-xl] { 978 box-shadow: var(--arc-shadow-light-xl); 979 } 980 /* Dark Shadows --------------------------------------------------\u2022 */ 981 [arc-shadow=dark-sm] { 982 box-shadow: var(--arc-shadow-dark-sm); 983 } 984 [arc-shadow=dark-md] { 985 box-shadow: var(--arc-shadow-dark-md); 986 } 987 [arc-shadow=dark-lg] { 988 box-shadow: var(--arc-shadow-dark-lg); 989 } 990 [arc-shadow=dark-xl] { 991 box-shadow: var(--arc-shadow-dark-xl); 992 } 993 /* Surfaces ------------------------------------------------------\u2022 */ 994 [arc-surface=primary] { 995 color: var(--arc-surface-primary-color, var(--arc-color-fg-primary)); 996 background: var(--arc-surface-primary-background, var(--arc-color-bg-primary)); 997 } 998 [arc-surface=secondary] { 999 color: var(--arc-surface-secondary-color, var(--arc-color-fg-primary)); 1000 background: var(--arc-surface-secondary-background, var(--arc-color-bg-secondary)); 1001 } 1002 [arc-surface=inset] { 1003 color: var(--arc-surface-inset-color, var(--arc-color-fg-primary)); 1004 background: var(--arc-surface-inset-background, var(--arc-color-bg-tertiary)); 1005 } 1006 [arc-surface=raised] { 1007 color: var(--arc-surface-raised-color, var(--arc-color-fg-primary)); 1008 background: var(--arc-surface-raised-background, var(--arc-color-bg-primary));
1009 box-shadow: var(--arc-surface-raised-box-shadow, var(--arc-surface-raised-shadow)); 1010 z-index: var(--arc-surface-raised-z-index, 1); 1011 } 1012 [arc-surface=floating] { 1013 color: var(--arc-surface-floating-color, var(--arc-color-fg-primary)); 1014 background: var(--arc-surface-floating-background, var(--arc-color-bg-primary)); 1015 box-shadow: var(--arc-surface-floating-box-shadow, var(--arc-surface-floating-shadow)); 1016 z-index: var(--arc-surface-floating-z-index, 2); 1017 } 1018 /* Scheme (proximity via inheritance) ----------------------------\u2022 */ 1019 :root:not([arc-scheme]) { 1020 --arc\u2022color\u2022scheme: light; 1021 --arc\u2022color\u2022scheme\u2022inverse: dark; 1022 } 1023 [arc-scheme=light] { 1024 --arc\u2022color\u2022scheme: light; 1025 --arc\u2022color\u2022scheme\u2022inverse: dark; 1026 } 1027 [arc-scheme=dark] { 1028 --arc\u2022color\u2022scheme: dark; 1029 --arc\u2022color\u2022scheme\u2022inverse: light; 1030 } 1031 [arc-scheme=inverse] { 1032 --arc\u2022color\u2022scheme: var(--arc\u2022color\u2022scheme\u2022inverse); 1033 } 1034 :root:not([arc-scheme]), 1035 [arc-scheme] { 1036 color-scheme: var(--arc\u2022color\u2022scheme, light); 1037 } 1038} 1039:root, 1040::backdrop { 1041 /* @deprecated background variables - please update all instances */ 1042 --arc-color-alpha-white-03: var(--arc-color-alpha-white-3); 1043 --arc-color-alpha-white-05: var(--arc-color-alpha-white-5); 1044 --arc-color-alpha-black-03: var(--arc-color-alpha-black-3); 1045 --arc-color-alpha-black-05: var(--arc-color-alpha-black-5); 1046 --arc-color-neutral-000: var(--arc-color-light-neutral-0); 1047 --arc-color-neutral-050: var(--arc-color-light-neutral-50); 1048 --arc-color-neutral-100: var(--arc-color-light-neutral-100); 1049 --arc-color-neutral-200: var(--arc-color-light-neutral-200); 1050 --arc-color-neutral-300: var(--arc-color-light-neutral-300); 1051 --arc-color-neutral-400: var(--arc-color-light-neutral-400); 1052 --arc-color-neutral-500: var(--arc-color-light-neutral-500); 1053 --arc-color-neutral-600: var(--arc-color-light-neutral-600); 1054 --arc-color-neutral-700: var(--arc-color-light-neutral-700); 1055 --arc-color-neutral-800: var(--arc-color-light-neutral-800); 1056 --arc-color-neutral-900: var(--arc-color-light-neutral-900); 1057 --arc-color-blue-050: var(--arc-color-light-blue-50); 1058 --arc-color-blue-100: var(--arc-color-light-blue-100); 1059 --arc-color-blue-200: var(--arc-color-light-blue-200); 1060 --arc-color-blue-300: var(--arc-color-light-blue-300); 1061 --arc-color-blue-400: var(--arc-color-light-blue-400); 1062 --arc-color-blue-500: var(--arc-color-light-blue-500); 1063 --arc-color-blue-600: var(--arc-color-light-blue-600); 1064 --arc-color-blue-700: var(--arc-color-light-blue-700); 1065 --arc-color-blue-800: var(--arc-color-light-blue-800); 1066 --arc-color-blue-900: var(--arc-color-light-blue-900); 1067 --arc-color-purple-050: var(--arc-color-light-purple-50); 1068 --arc-color-purple-100: var(--arc-color-light-purple-100); 1069 --arc-color-purple-200: var(--arc-color-light-purple-200); 1070 --arc-color-purple-300: var(--arc-color-light-purple-300); 1071 --arc-color-purple-400: var(--arc-color-light-purple-400); 1072 --arc-color-purple-500: var(--arc-color-light-purple-500); 1073 --arc-color-purple-600: var(--arc-color-light-purple-600); 1074 --arc-color-purple-700: var(--arc-color-light-purple-700); 1075 --arc-color-purple-800: var(--arc-color-light-purple-800); 1076 --arc-color-purple-900: var(--arc-color-light-purple-900); 1077 --arc-color-maroon-050: var(--arc-color-light-maroon-50); 1078 --arc-color-maroon-100: var(--arc-color-light-maroon-100); 1079 --arc-color-maroon-200: var(--arc-color-light-maroon-200); 1080 --arc-color-maroon-300: var(--arc-color-light-maroon-300); 1081 --arc-color-maroon-400: var(--arc-color-light-maroon-400); 1082 --arc-color-maroon-500: var(--arc-color-light-maroon-500); 1083 --arc-color-maroon-600: var(--arc-color-light-maroon-600); 1084 --arc-color-maroon-700: var(--arc-color-light-maroon-700); 1085 --arc-color-maroon-800: var(--arc-color-light-maroon-800); 1086 --arc-color-maroon-900: var(--arc-color-light-maroon-900); 1087 --arc-color-red-050: var(--arc-color-light-red-50); 1088 --arc-color-red-100: var(--arc-color-light-red-100); 1089 --arc-color-red-200: var(--arc-color-light-red-200); 1090 --arc-color-red-300: var(--arc-color-light-red-300); 1091 --arc-color-red-400: var(--arc-color-light-red-400); 1092 --arc-color-red-500: var(--arc-color-light-red-500); 1093 --arc-color-red-600: var(--arc-color-light-red-600); 1094 --arc-color-red-700: var(--arc-color-light-red-700); 1095 --arc-color-red-800: var(--arc-color-light-red-800); 1096 --arc-color-red-900: var(--arc-color-light-red-900); 1097 --arc-color-orange-050: var(--arc-color-light-orange-50); 1098 --arc-color-orange-100: var(--arc-color-light-orange-100); 1099 --arc-color-orange-200: var(--arc-color-light-orange-200); 1100 --arc-color-orange-300: var(--arc-color-light-orange-300); 1101 --arc-color-orange-400: var(--arc-color-light-orange-400); 1102 --arc-color-orange-500: var(--arc-color-light-orange-500); 1103 --arc-color-orange-600: var(--arc-color-light-orange-600); 1104 --arc-color-orange-700: var(--arc-color-light-orange-700); 1105 --arc-color-orange-800: var(--arc-color-light-orange-800); 1106 --arc-color-orange-900: var(--arc-color-light-orange-900); 1107 --arc-color-yellow-050: var(--arc-color-light-yellow-50); 1108 --arc-color-yellow-100: var(--arc-color-light-yellow-100); 1109 --arc-color-yellow-200: var(--arc-color-light-yellow-200); 1110 --arc-color-yellow-300: var(--arc-color-light-yellow-300); 1111 --arc-color-yellow-400: var(--arc-color-light-yellow-400); 1112 --arc-color-yellow-500: var(--arc-color-light-yellow-500); 1113 --arc-color-yellow-600: var(--arc-color-light-yellow-600); 1114 --arc-color-yellow-700: var(--arc-color-light-yellow-700); 1115 --arc-color-yellow-800: var(--arc-color-light-yellow-800); 1116 --arc-color-yellow-900: var(--arc-color-light-yellow-900); 1117 --arc-color-green-050: var(--arc-color-light-green-50); 1118 --arc-color-green-100: var(--arc-color-light-green-100); 1119 --arc-color-green-200: var(--arc-color-light-green-200); 1120 --arc-color-green-300: var(--arc-color-light-green-300); 1121 --arc-color-green-400: var(--arc-color-light-green-400); 1122 --arc-color-green-500: var(--arc-color-light-green-500); 1123 --arc-color-green-600: var(--arc-color-light-green-600); 1124 --arc-color-green-700: var(--arc-color-light-green-700); 1125 --arc-color-green-800: var(--arc-color-light-green-800); 1126 --arc-color-green-900: var(--arc-color-light-green-900); 1127 --arc-color-mint-050: var(--arc-color-light-mint-50); 1128 --arc-color-mint-100: var(--arc-color-light-mint-100); 1129 --arc-color-mint-200: var(--arc-color-light-mint-200); 1130 --arc-color-mint-300: var(--arc-color-light-mint-300); 1131 --arc-color-mint-400: var(--arc-color-light-mint-400); 1132 --arc-color-mint-500: var(--arc-color-light-mint-500); 1133 --arc-color-mint-600: var(--arc-color-light-mint-600); 1134 --arc-color-mint-700: var(--arc-color-light-mint-700); 1135 --arc-color-mint-800: var(--arc-color-light-mint-800); 1136 --arc-color-mint-900: var(--arc-color-light-mint-900); 1137 --arc-gradient-ai-050: var(--arc-gradient-ai-50); 1138 --arc-color-ai-purple-050: #fbf2ff; 1139 --arc-color-ai-purple-100: #efccff; 1140 --arc-color-ai-purple-200: #9c15ff; 1141 --arc-color-ai-purple-300: #680278; 1142 --arc-color-ai-purple-400: #5d3668; 1143 --arc-color-ai-purple-500: #37003f; 1144 --arc-color-ai-purple-600: #27002c; 1145 --arc-color-ai-blue-050: #f4fbff; 1146 --arc-color-ai-blue-100: #d2f1fe; 1147 --arc-color-ai-blue-200: #1eb4fb; 1148 --arc-color-ai-blue-300: #0179d0; 1149 --arc-color-ai-blue-400: #36648c; 1150 --arc-color-ai-blue-500: #004273; 1151 --arc-color-ai-blue-600: #012a48; 1152 /* @deprecated background variables - please update all instances */ 1153 --arc-color-background-primary: var(--arc-color-bg-primary); 1154 --arc-color-background-primary-hover: var(--arc-color-bg-hover-default); 1155 --arc-color-background-primary-selected-subtle: var(--arc-color-bg-selected-subtle); 1156 --arc-color-background-primary-selected: var(--arc-color-bg-selected-default); 1157 --arc-color-background-primary-selected-stark: var(--arc-color-bg-selected-stark); 1158 --arc-color-background-secondary: var(--arc-color-bg-secondary); 1159 --arc-color-background-secondary-hover: var(--arc-color-bg-hover-default); 1160 --arc-color-background-tertiary: var(--arc-color-bg-tertiary); 1161 --arc-color-background-inverse: var(--arc-color-light-neutral-1000); 1162 --arc-color-overlay-dark: var(--arc-color-overlay-stark); 1163 --arc-color-overlay-light: var(--arc-color-overlay-subtle); 1164 /* @deprecated foreground variables - please update all instances */ 1165 --arc-color-text-primary: var(--arc-color-fg-primary); 1166 --arc-color-icon-primary: var(--arc-color-fg-primary); 1167 --arc-color-text-secondary: var(--arc-color-fg-secondary); 1168 --arc-color-icon-secondary: var(--arc-color-fg-secondary); 1169 --arc-color-icon-primary-hover: var(--arc-color-fg-on-hover-default); 1170 --arc-color-text-primary-hover: var(--arc-color-fg-on-hover-default); 1171 --arc-color-text-secondary-hover: var(--arc-color-fg-on-hover-stark); 1172 --arc-color-icon-secondary-hover: var(--arc-color-fg-on-hover-stark); 1173 --arc-color-text-disabled: var(--arc-color-fg-disabled); 1174 --arc-color-icon-disabled: var(--arc-color-fg-disabled); 1175 --arc-color-text-inverse: var(--arc-color-dark-neutral-1000); 1176 --arc-color-icon-inverse: var(--arc-color-dark-neutral-1000); 1177 --arc-color-text-inverse-secondary: var(--arc-color-dark-neutral-700); 1178 --arc-color-icon-inverse-secondary: var(--arc-color-dark-neutral-700); 1179 --arc-color-text-inverse-hover: var(--arc-color-dark-neutral-700); 1180 --arc-color-icon-inverse-hover: var(--arc-color-dark-neutral-700); 1181 --arc-color-text-inverse-disabled: var(--arc-color-alpha-white-30); 1182 --arc-color-icon-inverse-disabled: var(--arc-color-alpha-white-30); 1183 --arc-color-text-info: var(--arc-color-fg-info-stark); 1184 --arc-color-icon-info: var(--arc-color-fg-info-stark); 1185 --arc-color-text-brand: var(--arc-color-fg-brand-stark); 1186 --arc-color-icon-brand: var(--arc-color-fg-brand-mid); 1187 --arc-color-text-success: var(--arc-color-fg-success-stark); 1188 --arc-color-icon-success: var(--arc-color-fg-success-stark); 1189 --arc-color-text-warning: var(--arc-color-fg-warning-stark); 1190 --arc-color-icon-warning: var(--arc-color-fg-warning-stark); 1191 --arc-color-text-critical: var(--arc-color-fg-critical-mid); 1192 --arc-color-icon-critical: var(--arc-color-fg-critical-mid); 1193 /* @deprecated border variable - please update all instances */ 1194 --arc-color-border-orange: var(--arc-color-border-orange-mid); 1195 --arc-color-border-mint: var(--arc-color-border-mint-mid); 1196 --arc-color-border-maroon: var(--arc-color-border-maroon-mid); 1197 --arc-color-border-standard: var(--arc-color-border-mid);
1198 --arc-color-border-full: var(--arc-color-border-heavy); 1199 --arc-color-border-focus-inverse: var(--arc-color-light-blue-300); 1200 --arc-border-width-standard: var(--arc-border-width-sm); 1201 /* @deprecated color variables - please update all instances */ 1202 --arc-color-info-light: var(--arc-color-bg-info-muted); 1203 --arc-color-info-medium: var(--arc-color-bg-info-subtle); 1204 --arc-color-info-root: var(--arc-color-bg-info-mid); 1205 --arc-color-info-dark: var(--arc-color-bg-info-stark); 1206 --arc-color-info-heavy: var(--arc-color-bg-info-heavy); 1207 --arc-color-border-info: var(--arc-color-border-info-mid); 1208 --arc-color-brand-light: var(--arc-color-bg-brand-muted); 1209 --arc-color-brand-medium: var(--arc-color-bg-brand-subtle); 1210 --arc-color-brand-root: var(--arc-color-bg-brand-mid); 1211 --arc-color-brand-dark: var(--arc-color-bg-brand-stark); 1212 --arc-color-brand-heavy: var(--arc-color-bg-brand-heavy); 1213 --arc-color-border-brand: var(--arc-color-border-brand-mid); 1214 --arc-color-success-light: var(--arc-color-bg-success-muted); 1215 --arc-color-success-medium: var(--arc-color-bg-success-subtle); 1216 --arc-color-success-root: var(--arc-color-bg-success-mid); 1217 --arc-color-success-dark: var(--arc-color-bg-success-stark); 1218 --arc-color-success-heavy: var(--arc-color-bg-success-heavy); 1219 --arc-color-border-success: var(--arc-color-border-success-mid); 1220 --arc-color-warning-light: var(--arc-color-bg-warning-muted); 1221 --arc-color-warning-medium: var(--arc-color-bg-warning-subtle); 1222 --arc-color-warning-root: var(--arc-color-bg-warning-mid); 1223 --arc-color-warning-dark: var(--arc-color-bg-warning-stark); 1224 --arc-color-warning-heavy: var(--arc-color-bg-warning-heavy); 1225 --arc-color-border-warning: var(--arc-color-border-warning-mid); 1226 --arc-color-critical-light: var(--arc-color-bg-critical-muted); 1227 --arc-color-critical-medium: var(--arc-color-bg-critical-subtle); 1228 --arc-color-critical-root: var(--arc-color-bg-critical-mid); 1229 --arc-color-critical-dark: var(--arc-color-bg-critical-stark); 1230 --arc-color-critical-heavy: var(--arc-color-bg-critical-heavy); 1231 --arc-color-border-critical: var(--arc-color-border-critical-mid); 1232 /** @deprecated - old alpha leading zeros */ 1233 --arc-alpha-03: var(--arc-alpha-3); 1234 --arc-alpha-05: var(--arc-alpha-5); 1235} 1236 1237/*# sourceMappingURL=theme.css.map */ 1238`,gc={};function lr(r,e){if(typeof document<"u"&&e?.styleSheet){const a=gc[r];gc[r]=e.styleSheet,document.adoptedStyleSheets=[...document.adoptedStyleSheets.filter(t=>t!==a),e.styleSheet]}}function Ou(r){const e=Object.values(gc),a=document.adoptedStyleSheets.filter(t=>e.includes(t));if(r.adoptedStyleSheets){const t=a.filter(o=>!r.adoptedStyleSheets.includes(o));r.adoptedStyleSheets=[...r.adoptedStyleSheets,...t]}}function Du(r){if(typeof CSSStyleSheet<"u"){const e=new CSSStyleSheet;e.replaceSync(Bu),r.adoptedStyleSheets&&(r.adoptedStyleSheets.includes(e)||(r.adoptedStyleSheets=[...r.adoptedStyleSheets,e]))}}const Nu=r=>r?.trim().charAt(0)??void 0,Fu=(r,e)=>{let a=0;const t=Math.min(r.length,50);for(let o=0;o<t;o+=1)a=(a+r.charCodeAt(o))%(e??33);return a},Hu=(r,e,a)=>e?.length?r?.trim()===""?a||e[0]:e[Fu(r,e.length)]||a||e[0]:a,ks=ar(Ra,["blue","orange","mint","red","yellow","green","maroon","purple"]),Vu=ar(Ra,["neutral","white","black"]),Wo=ar(oe,["lg","md","sm","xs"]),Uu=[...Wo,"profile-sm","profile-md","profile-lg"],Ku=Do,Wu=_t,Gu=Wo,qu=Wo,Yu=Wo,B=s`--arcâ¢inputâ¢mask`,p=s`--arcâ¢size`,E=s`--arcâ¢space`,fr=s`--arcâ¢avatar`,Hr=s`${fr}â¢chars`,vc=s` 1239 1240 &[data-size=lg] { 1241 ${fr}â¢fontâ¢size: var(${p}â¢16); 1242 ${fr}â¢size: 2.5em; /* target: 40px @ 100% */ 1243 ${Hr}â¢1: var(${p}â¢16); 1244 ${Hr}â¢2: var(${p}â¢14); 1245 ${Hr}â¢3: var(${p}â¢12); 1246 } 1247 1248 &:is([data-size=md], [data-size=inherit], :not([data-size])) { /* @default size */ 1249 ${fr}â¢fontâ¢size: var(${p}â¢14); 1250 ${fr}â¢size: 2.2857142857em; /* target: 32px @ 100% (32 / 14 * 1em) */ 1251 ${Hr}â¢1: var(${p}â¢14); 1252 ${Hr}â¢2: var(${p}â¢12); 1253 ${Hr}â¢3: var(${p}â¢10); 1254 } 1255 1256 &[data-size=sm] { 1257 ${fr}â¢fontâ¢size: var(${p}â¢12); 1258 ${fr}â¢size: 2em; /* target: 24px @ 100% */ 1259 ${Hr}â¢1: var(${p}â¢12); 1260 ${Hr}â¢2: var(${p}â¢10); 1261 ${Hr}â¢3: var(${p}â¢8); 1262 } 1263 1264 &[data-size=xs] { 1265 ${fr}â¢fontâ¢size: var(${p}â¢10); 1266 ${fr}â¢size: 2em; /* target: 20px @ 100% */ 1267 ${Hr}â¢1: var(${p}â¢10); 1268 ${Hr}â¢2: var(${p}â¢8); 1269 ${Hr}â¢3: var(${p}â¢6); 1270 } 1271 1272`,Zu=s` 1273 1274 &[data-size=profile-lg] { 1275 ${fr}â¢fontâ¢size: var(${p}â¢40); 1276 ${fr}â¢size: 4em; 1277 } 1278 1279 &[data-size=profile-md] { 1280 ${fr}â¢fontâ¢size: var(${p}â¢32); 1281 ${fr}â¢size: 3em; 1282 } 1283 1284 &[data-size=profile-sm] { 1285 ${fr}â¢fontâ¢size: var(${p}â¢28); 1286 ${fr}â¢size: 2.2857142857em; /* target: 64px @ 100% (64 / 28 * 1em) */ 1287 } 1288 1289`,ws=s` 1290 1291 [arc-avatar] { 1292 ${fr}â¢fontâ¢size: inherit; 1293 ${fr}â¢size: inherit; 1294 ${Hr}â¢1: inherit; 1295 ${Hr}â¢2: inherit; 1296 ${Hr}â¢3: inherit; 1297 } 1298 1299`,Ha=s`${fr}â¢fg`,ge=s`${fr}â¢bg`,Xu=s` 1300@layer arc-components { 1301 1302 [arc-avatar] { 1303 /* Colors --------------------------------------------------------⢠*/ 1304 ${Ha}: var(--arc-avatar-color, var(--arc-color-mono-white)); 1305 1306 &:has([data-color=blue]) { /* @default color */ 1307 ${ge}: var(--arc-color-light-blue-400); 1308 } 1309 &:has([data-color=purple]) { 1310 ${ge}: var(--arc-color-light-purple-400); 1311 } 1312 &:has([data-color=red]) { 1313 ${ge}: var(--arc-color-light-red-400); 1314 } 1315 &:has([data-color=yellow]) { 1316 ${ge}: var(--arc-color-light-yellow-400); 1317 } 1318 &:has([data-color=green]) { 1319 ${ge}: var(--arc-color-light-green-400); 1320 }
1321 &:has([data-color=maroon]) { 1322 ${ge}: var(--arc-color-light-maroon-400); 1323 } 1324 &:has([data-color=orange]) { 1325 ${ge}: var(--arc-color-light-orange-400); 1326 } 1327 &:has([data-color=mint]) { 1328 ${ge}: var(--arc-color-light-mint-400); 1329 } 1330 1331 /* RESERVED COLORS -----------------------------------------------⢠*/ 1332 &:has([data-color=black]) { 1333 ${Ha}: light-dark(var(--arc-color-mono-white), var(--arc-color-mono-black)); 1334 ${ge}: light-dark(var(--arc-color-mono-black), var(--arc-color-mono-white)); 1335 } 1336 1337 &:has([data-color=neutral]) { /* @default anonymous */ 1338 ${Ha}: var(--arc-color-fg-secondary); 1339 ${ge}: var(--arc-color-alpha-subtle); 1340 } 1341 1342 &:has([data-color=white]) { 1343 ${Ha}: var(--arc-color-mono-black); 1344 ${ge}: var(--arc-color-mono-white); 1345 } 1346 1347 /* SIZES ---------------------------------------------------------⢠*/ 1348 ${vc} 1349 ${Zu} 1350 } 1351 1352 /* CORE AVATAR STYLES ----------------------------------------------⢠*/ 1353 [arc-avatar]:not([hidden]) { 1354 font-size: var(--arc-avatar-font-size, var(${fr}â¢fontâ¢size)); 1355 1356 flex: none; 1357 align-self: center; 1358 1359 display: inline-flex; 1360 align-items: center; 1361 justify-content: center; 1362 width: var(--arc-avatar-size, var(${fr}â¢size)); 1363 aspect-ratio: 1 / 1; 1364 line-height: normal; 1365 1366 text-align: center; 1367 position: relative; 1368 overflow: hidden; 1369 border-radius: var(--arc-border-radius-circle); 1370 1371 &[data-is-inactive] { 1372 opacity: var(--arc-alpha-50); 1373 } 1374 1375 [data-num-length] { 1376 --arc-button-font-size: var(${Hr}â¢1); 1377 } 1378 1379 [data-num-length='2'] { 1380 --arc-button-font-size: var(${Hr}â¢2); 1381 } 1382 1383 [data-num-length='3'] { 1384 --arc-button-font-size: var(${Hr}â¢3); 1385 } 1386 1387 1388 /* INNER ELEMENTS ------------------------------------------------⢠*/ 1389 1390 [data-element=counter] { 1391 ${fr}â¢pointerâ¢events: all; 1392 1393 /* Inter-Component Communication ⢠ArcButton --------------------⢠*/ 1394 --arc-button-width: 100%; 1395 --arc-button-height: auto; 1396 --arc-button-aspect-ratio: 1 /1; 1397 --arc-button-padding: 0; 1398 --arc-button-background: var(--arc-avatar-background, var(${ge})); 1399 --arc-button-color: var(--arc-avatar-color, var(${Ha})); 1400 1401 &:disabled { 1402 --arc-button-cursor: default; 1403 } 1404 } 1405 1406 [data-element=image] { 1407 object-fit: cover; 1408 1409 /* Hides problematic image */ 1410 &:is([data-not-loaded], [data-has-error]) { 1411 ${fr}â¢visibility: hidden; 1412 } 1413 1414 /* Hides subsequent elements with valid image */ 1415 &:not([data-has-error]) ~ [data-element] { 1416 ${Ha}: transparent; 1417 ${ge}: none; 1418 } 1419 } 1420 1421 :is( 1422 [data-element=counter], 1423 [data-element=initial], 1424 [data-element=anonymous] 1425 ) { 1426 background: var(${ge}); 1427 color: var(${Ha}); 1428 } 1429 1430 :is([data-element=initial]) { 1431 font-size: var(--arc-avatar-initial-font-size, inherit); 1432 text-transform: var(--arc-avatar-text-transform, capitalize); 1433 } 1434 1435 [data-element] { 1436 flex: none; 1437 position: absolute; 1438 inset: 0; 1439 display: flex; 1440 align-items: center; 1441 justify-content: center; 1442 1443 width: 100%; 1444 height: 100%; 1445 1446 border-radius: inherit; 1447 font-weight: var(--arc-font-weight-600); 1448 visibility: var(${fr}â¢visibility, unset); 1449 1450 transition-duration: 200ms; 1451 transition-behavior: allow-discrete; 1452 transition-timing-function: linear; 1453 transition-property: 1454 visibility, 1455 background-color, 1456 color; 1457 1458 pointer-events: var(${fr}â¢pointerâ¢events, none); 1459 user-select: none; 1460 -webkit-user-select: none; 1461 } 1462 } 1463 1464} 1465`,Ju=({children:r,initial:e,color:a,...t})=>(0,i.jsx)("span",{...t,"data-element":"initial","data-color":a,children:r||e}),Qu=({isLoaded:r,hasError:e,onLoad:a,onError:t,...o})=>{const n=!r&&""||void 0,c=e&&""||void 0,l=!r||e||void 0;return(0,i.jsx)("img",{...o,hidden:l,"data-element":"image","data-not-loaded":n,"data-has-error":c,onLoad:a,onError:t})},Bt=r=>typeof r=="string"?r:typeof r=="number"?r.toString():Array.isArray(r)?r.map(Bt).join(""):(0,u.isValidElement)(r)?Bt(r.props.children):"",Cs={},rh=(r="id")=>{const e=(Cs[r]??0)+1;return Cs[r]=e,`${r}-${e}`},Ir=(r,e="id")=>{const a=(0,u.useId)();return r??`${e}-${a}`},ct=r=>typeof r=="string",As=r=>r!==null&&typeof r=="object",eh=["#9c15ff","#1eb4fb"],Ss=({angle:r=60,width:e,height:a})=>{const t=(r-90)*Math.PI/180,o=e/2,n=a/2,c=Math.sqrt(e*e+a*a)/2,l=Math.cos(t)*c,d=Math.sin(t)*c;return{x1:o-l,y1:n-d,x2:o+l,y2:n+d}},ah=(r,e)=>{const a=ct(r)?r:r.color,t=ct(r)?e.toString():r.offset?.toString()??e.toString();return(0,i.jsx)("stop",{offset:t,stopColor:a},`${a}-${e}`)},zs=({id:r,angle:e=60,width:a,height:t,stops:o=eh})=>{const{x1:n,y1:c,x2:l,y2:d}=Ss({angle:e,width:a,height:t});return(0,i.jsx)("defs",{children:(0,i.jsx)("linearGradient",{gradientUnits:"userSpaceOnUse",id:r,x1:n,x2:l,y1:c,y2:d,children:o.map(ah)})})},pc=r=>(0,i.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,i.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)"})}),fc=r=>{const e=Ir(void 0,"arc-ai-gradient");return(0,i.jsxs)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,i.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
146511.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(#${e})`}),zs({id:e,width:640,height:640,stops:["var(--arc-color-logo-ai-purple, #9c15ff)","var(--arc-color-logo-ai-blue, #1eb4fb)"]})]})},mc=r=>(0,i.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,i.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)"})}),bc=r=>(0,i.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,i.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)"})}),$c=r=>(0,i.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,i.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)"})}),yc=r=>(0,i.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,i.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
146512.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)"})}),xc=r=>(0,i.jsx)("svg",{...r,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,i.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)"})}),kc=r=>(0,i.jsx)("svg",{...r,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 640 640",children:(0,i.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
1465ill:"var(--arc-color-logo-studio, #dc424a)"})});var th;const oh="fa-width-auto",Es="fa-fw",nh="arc-fw",_s="arc-aw",ch=r=>typeof r=="number"?`calc(${r/10}rem * var(--arc-internal-font-size))`:r,ih={"arc-svg logo-articulate":(0,i.jsx)(pc,{}),"arc-svg product-ai":(0,i.jsx)(fc,{}),"arc-svg product-peek":(0,i.jsx)(mc,{}),"arc-svg product-reach":(0,i.jsx)(bc,{}),"arc-svg product-review":(0,i.jsx)($c,{}),"arc-svg product-rise":(0,i.jsx)(yc,{}),"arc-svg product-storyline":(0,i.jsx)(xc,{}),"arc-svg product-studio":(0,i.jsx)(kc,{})},bb=r=>r&&r.length>0&&r?.includes("arc-svg")?ih[r]:th("span",{className:r}),Is=r=>{const e=r.includes(oh),a=r.includes(Es),t=r.includes(nh),o=r.includes(_s);return{hasFaAutoWidth:e,hasFaFixedWidth:a,hasArcFixedWidth:t,hasArcAutoWidth:o}},Ts=r=>((0,u.isValidElement)(r)&&r.type===ir?r.props.icon:r)??void 0,wc=r=>{const e=Ts(r);if(typeof e!="string")return e;const{hasFaFixedWidth:a,hasArcFixedWidth:t,hasArcAutoWidth:o}=Is(e);return!a&&!t&&!o?`${e} ${_s}`:e},sh=r=>{const e=Ts(r);if(typeof e!="string")return e;let a=e;const{hasArcFixedWidth:t,hasFaFixedWidth:o}=Is(a);return t&&!o&&(a=`${a} ${Es}`),a},lh=s`--arcâ¢icon`,ua=s`${lh}â¢fg`,dh=s` 1466@layer arc-components { 1467 1468[arc-icon] { 1469 ${ua}: currentcolor; 1470 1471 color: var(--arc-icon-color, var(${ua})); 1472 opacity: var(--arc-icon-opacity, 1); 1473 1474 &:not([hidden]) { 1475 /* hand-off to actual interior FontAwesome icon node */ 1476 --fa-display: var(--arc-icon-display, inline-flex); 1477 --fa-line-height: var(--arc-icon-fa-line-height, 1); 1478 1479 flex: none; 1480 align-self: var(--arc-icon-align-self, unset); 1481 display: var(--fa-display); 1482 align-items: center; 1483 justify-content: center; 1484 height: var(--arc-icon-height, auto); 1485 max-height: var(--arc-icon-max-height, none); 1486 margin-block: var(--arc-icon-margin-block, unset); 1487 } 1488 1489 &:has(svg) { 1490 align-self: var(--arc-icon-svg-align-self, center); 1491 1492 svg { 1493 font-size: var(--arc-icon-size, 1em); 1494 width: 1em; 1495 height: 1em; 1496 fill: var(--arc-icon-color, var(${ua})); 1497 } 1498 } 1499 1500 [class|=fa] { 1501 font-size: var(--arc-icon-size, 1em); 1502 align-items: center; 1503 justify-content: center; 1504 1505 /* fix for FontAwesome line-height oddities in certain cases */ 1506 line-height: normal !important; 1507 1508 &[class*='fa-stack-'] { 1509 font-size: var(--arc-icon-stack-size, inherit); 1510 } 1511 } 1512 1513 /* Explicit opt-in via Arcâs helper class */ 1514 .arc-aw { 1515 --fa-width: var(--arc-icon-fa-width, auto); 1516 } 1517} 1518 1519/* utility icon colorization */ 1520[arc-icon] { 1521 &[arc-icon-status=brand], 1522 &[arc-icon-status=announcement] { 1523 ${ua}: var(--arc-color-fg-brand-mid); 1524 } 1525 1526 &[arc-icon-status=info] { 1527 ${ua}: var(--arc-color-fg-info-mid); 1528 } 1529 1530 &[arc-icon-status=success] { 1531 ${ua}: var(--arc-color-fg-success-mid); 1532 } 1533 1534 &[arc-icon-status=warning] { 1535 ${ua}: var(--arc-color-fg-warning-mid); 1536 } 1537 1538 &[arc-icon-status=error], 1539 &[arc-icon-status=critical] { 1540 ${ua}: var(--arc-color-fg-critical-mid); 1541 } 1542 1543 &[arc-icon-status=processing] { 1544 ${ua}: var(--arc-color-fg-brand-mid); 1545 } 1546 1547 &[arc-icon-status] { 1548 --fa-primary-color: var(--arc-icon-color, currentcolor); 1549 --fa-secondary-color: color-mix(in srgb, currentcolor 20%, transparent); 1550 --fa-secondary-opacity: 1; 1551 } 1552} 1553 1554} 1555`,uh=r=>(0,i.jsx)(ir,{...r,icon:"fa-kit fa-articulate arc-aw",color:r?.color||"var(--arc-color-logo-articulate, #000000)","aria-label":r?.["aria-label"]||"Articulate Logo"}),hh=r=>(0,i.jsx)(ir,{...r,icon:"fa-kit fa-product-badge-ai arc-aw","aria-label":r?.["aria-label"]||"Articulate AI Logo",gradient:r?.gradient||"ai"}),gh=r=>(0,i.jsx)(ir,{...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"}),vh=r=>(0,i.jsx)(ir,{...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"}),ph=r=>(0,i.jsx)(ir,{...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"}),fh=r=>(0,i.jsx)(ir,{...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"}),mh=r=>(0,i.jsx)(ir,{...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"}),bh=r=>(0,i.jsx)(ir,{...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"}),ir=({children:r,icon:e="fa-regular fa-circle-dashed",color:a,size:t,style:o,gradient:n,...c})=>{const l={...o,"--arc-icon-size":ch(t),"--arc-icon-color":a},d=!!(c["aria-label"]||c["aria-labelledby"]),h=sh(e),g=typeof h=="string"&&h.length>0?(0,i.jsx)("span",{className:h}):h;return(0,i.jsx)("span",{"aria-hidden":!d||void 0,...c,"arc-icon":"",style:l,"arc-gradient":n,children:r||g})};lr("ArcIcon",dh),ir.Articulate=uh,ir.AI=hh,ir.Peek=gh,ir.Reach=vh,ir.Review=ph,ir.Rise=fh,ir.Storyline=mh,ir.Studio=bh,ir.SVGArticulate=pc,ir.SVGAI=fc,ir.SVGPeek=mc,ir.SVGReach=bc,ir.SVGReview=$c,ir.SVGRise=yc,ir.SVGStoryline=xc,ir.SVGStudio=kc;const $h=({children:r,icon:e,color:a,...t})=>(0,i.jsx)("span",{...t,"data-element":"anonymous","data-color":"neutral",children:r||(0,i.jsx)(ir,{icon:e})}),js="blue",Rs="neutral",yh="fa-solid fa-user arc-aw",Cc=(0,u.forwardRef)(({children:r,size:e,color:a,isActive:t=!0,isAnonymous:o,alt:n,src:c,name:l,email:d,...h},g)=>{const[f,v]=(0,u.useState)(!1),[b,m]=(0,u.useState)(!1),$=L=>{v(!0),m(!1),h.onLoad?.(L)},w=L=>{v(!1),m(!0),h.onError?.(L)},_=Nu(l||d),y=!!_,C=o||(!f||b)&&!y,S=!C&&!!c&&!b||void 0,I=(C&&Rs||void 0)??(a||void 0)??Hu(String(d||l||void 0),ks,js)??js,j={src:c,alt:n,isLoaded:f,hasError:b,onLoad:$,onError:w};return(0,u.useEffect)(()=>{C&&v(!1)},[C]),(0,i.jsx)("span",{...h,ref:g,"arc-avatar":"","data-is-inactive":!t||void 0,"data-size":e,"aria-label":(h.title??l??d)||void 0,children:r||(C?(0,i.jsx)($h,{icon:yh,color:Rs}):(0,i.jsxs)(i.Fragment,{children:[S&&(0,i.jsx)(Qu,{...j}),y&&(0,i.jsx)(Ju,{initial:_,color:I})]}))})});lr("ArcAvatar",Xu);const Qr=s`${fr}â¢text`,Va=s`${fr}â¢subtext`,it=s`${fr}â¢gap`,xh=s` 1556@layer arc-components { 1557 1558 [arc-avatar-text] { 1559 ${Qr}â¢fontâ¢size: var(${p}â¢14); 1560 ${Va}â¢fontâ¢size: var(${p}â¢12); 1561 ${it}: var(${p}â¢8); 1562 1563 ${Qr}â¢overflow: unset; 1564 ${Qr}â¢textâ¢overflow: unset; 1565 ${Qr}â¢whiteâ¢space: unset; 1566 1567 &[data-overflow=truncate] { 1568 ${Qr}â¢overflow: hidden; 1569 ${Qr}â¢textâ¢overflow: ellipsis; 1570 ${Qr}â¢whiteâ¢space: nowrap; 1571 } 1572 1573 &:has([data-size=inherit]) { 1574 ${Qr}â¢fontâ¢size: 1em; 1575 ${Va}â¢fontâ¢size: 0.875em; 1576 ${it}: 0.5em; 1577 } 1578 1579 &:has([data-size=lg]) { 1580 ${Qr}â¢fontâ¢size: var(--arc-font-size-14); 1581 ${Va}â¢fontâ¢size: var(--arc-font-size-12); 1582 } 1583 1584 &:has([data-size=md]) { /* @default size */ 1585 ${Qr}â¢fontâ¢size: var(--arc-font-size-14); 1586 ${Va}â¢fontâ¢size: var(--arc-font-size-12); 1587 } 1588 1589 &:has([data-size=sm]) { 1590 ${Qr}â¢fontâ¢size: var(--arc-font-size-14); 1591 ${Va}â¢fontâ¢size: var(--arc-font-size-12); 1592 } 1593 1594 &:has([data-size=xs]) { 1595 ${Qr}â¢fontâ¢size: var(--arc-font-size-12); 1596 ${Va}â¢fontâ¢size: var(--arc-font-size-12); 1597 ${it}: var(--arc-space-0-75); 1598 } 1599 1600 &[data-gap=lg] { ${it}: var(${p}â¢12); } 1601 &[data-gap=sm] { ${it}: var(${p}â¢4); } 1602 } 1603 1604 [arc-avatar-text] { 1605 font-size: var(--arc-avatar-text-font-size, var(${Qr}â¢fontâ¢size)); 1606 display: inline-flex; 1607 align-items: center; 1608 gap: var(${it}); 1609 line-height: normal; 1610 min-width: 0%; /* @note: allows truncation/ellipsis for [data-element=text] */ 1611 1612 &[is-strong] [data-element=text] {
1613 font-weight: var(--arc-avatar-text-font-weight, var(--arc-font-weight-bold)); 1614 1615 [data-element=subtext] { 1616 font-weight: var(--arc-avatar-text-subtext-font-weight, var(--arc-font-weight-normal)); 1617 } 1618 } 1619 1620 [data-element=text] { 1621 flex: 1; 1622 text-align: start; 1623 } 1624 1625 [data-element=subtext] { 1626 display: var(--arc-avatar-subtext-display, block); 1627 font-size: var(--arc-avatar-subtext-font-size, var(${Va}â¢fontâ¢size)); 1628 1629 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 1630 color: var(--arc-avatar-subtext-color, color-mix(in srgb, currentcolor 61.2%, transparent)); 1631 } 1632 1633 :where([data-element=text], [data-element=subtext]) { 1634 overflow: var(${Qr}â¢overflow); 1635 text-overflow: var(${Qr}â¢textâ¢overflow); 1636 white-space: var(${Qr}â¢whiteâ¢space); 1637 } 1638 } 1639 1640} 1641`,kh="Anonymous",Ac=({children:r,avatar:e={},subtext:a,size:t,gapSize:o,overflow:n,isStrong:c,...l})=>{const d=e.anonymousName||kh,h=e.name||e.email||e.src,g=e.name||e.email,f=e.isAnonymous||!h,v=r||f?d:g,b=o!=="inherit"?o:void 0,m=n!=="inherit"?n:void 0;return(0,i.jsxs)("span",{...l,"arc-avatar-text":"","data-gap":b,"data-overflow":m,"is-strong":c?"":void 0,children:[(0,i.jsx)(Cc,{...e,isAnonymous:f,size:t}),(0,i.jsxs)("span",{"data-element":"text",children:[v,a&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("br",{}),(0,i.jsx)("small",{"data-element":"subtext",children:a})]})]})]})};lr("ArcAvatarText",xh);const wh=s` 1642@layer arc-components { 1643 1644 [arc-avatar-pile] { 1645 position: relative; 1646 display: inline-flex; 1647 align-items: center; 1648 gap: 0; 1649 1650 ${vc} 1651 ${ws} 1652 1653 /* Cutout (mask) a portion of subsequent avatars ---------------⢠*/ 1654 [arc-avatar]+[arc-avatar] { 1655 margin-left: -0.125em; 1656 1657 /* magic! */ 1658 mask: radial-gradient( 1659 50% 50% at -43% 50%, 1660 transparent 110%, 1661 black 110% 1662 ) padding-box; 1663 } 1664 1665 } 1666 1667} 1668`,Ch=({size:r="md",...e})=>(0,i.jsx)("div",{...e,"arc-avatar-pile":"","data-size":r});lr("ArcAvatarPile",wh);const Sc=[...Pa],zc=[...sa],Ah=[...rt],Ps=ar(_r,["common"]),Sh=ar(_r,["ai","brand"]),Ec=["nw-corner","top-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"],Ls=["compact","comfortable"],Ot=(r,e=1/0,a=" ")=>[...r].flat(e)?.filter(Boolean)?.join(a),ve={popover:Sc[0],anchorAt:Ec[13],boundary:_c[0],tryFallbacks:!1,variant:Ps[0],scheme:zc[0],density:Ls[0],isInverse:!1,hasTail:!1,tailSize:8,offset:0},Ic=()=>typeof CSS>"u"||typeof CSS.supports!="function"?!1:CSS.supports("position-anchor","--anchor-name")&&CSS.supports("container-type","anchored"),zh=()=>typeof CSS>"u"||typeof CSS.supports!="function"?!1:CSS.supports("container-type","anchored"),Tc={canAnchor:Ic(),canAnchoredContainers:zh()},Ms=["center","nw-corner","ne-corner","se-corner","sw-corner"],Bs=({canHaveTail:r,tailSize:e})=>{if(!r)return{cssTailVar:"",floatingTailPx:0};const a=Math.abs(Number(e||ve.tailSize)),t=a>0?a:ve.tailSize;return{cssTailVar:t===ve.tailSize?"":`${t}px`,floatingTailPx:t}},Go=typeof window>"u"?u.useEffect:u.useLayoutEffect,Os=(r,e="toggle",a=document)=>{const t=a.getElementById(r);({toggle:()=>t?.togglePopover(),show:()=>t?.showPopover(),hide:()=>t?.hidePopover()})[e]()},Dt=new WeakMap,jc=r=>{const e=String(r??"").trim();if(e==="none")return"none";let a=e.replace(/[^\w-]/g,"-");for(;a.startsWith("-");)a=a.slice(1);for(;a.endsWith("-");)a=a.slice(0,-1);return a?`--${a}`:"--"},Nt=r=>{const e=jc(r);return e==="none"?null:e},Ds=(r,e)=>{const a=Nt(e);if(!a)return()=>{};let t=Dt.get(r);return t||(t=new Set,Dt.set(r,t)),t.has(a)?()=>{}:(t.add(a),r.style.setProperty("anchor-name",Ot([...t],1/0,", ")),()=>{const o=Dt.get(r);if(o){if(o.delete(a),o.size===0){Dt.delete(r),r.style.removeProperty("anchor-name");return}r.style.setProperty("anchor-name",Ot([...o],1/0,", "))}})},Ns=r=>r==="start"||r==="end"?r:"center",Eh=r=>{const e=r.split("-")[0];return e==="top"||e==="right"||e==="bottom"||e==="left"?e:null},Fs=r=>{const e=Eh(r),a=Ns(r.split("-")[1]);switch(e){case"top":return{block:"start",inline:a};case"bottom":return{block:"end",inline:a};case"left":return{block:a,inline:"start"};case"right":return{block:a,inline:"end"};default:return{block:"center",inline:"center"}}},Hs=(r,e)=>r!=="center"&&e!=="center"&&r!==e,Vs=(r,e)=>{const a=Fs(r),t=Fs(e),o=Hs(a.block,t.block),n=Hs(a.inline,t.inline);return o&&n?"flip-block-inline":o?"flip-block":n?"flip-inline":""}
1668,_h={...{"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"}},Us=r=>{r.style.removeProperty("top"),r.style.removeProperty("left"),r.style.removeProperty("position"),r.style.removeProperty("margin"),delete r.dataset.fallbacks,delete r.dataset.floating},Ih=r=>{r.dataset.floating="true"},Th=[{test:(r,e,a)=>r==="y"&&e.includes("top")&&a.includes("top"),value:-1},{test:(r,e,a)=>r==="y"&&e.includes("top")&&a.includes("bottom"),value:-1},{test:(r,e,a)=>r==="y"&&e.includes("bottom")&&a.includes("top"),value:1},{test:(r,e,a)=>r==="x"&&e.includes("left")&&a.includes("left"),value:-1},{test:(r,e,a)=>r==="x"&&e.includes("left")&&a.includes("right"),value:-1},{test:(r,e,a)=>r==="x"&&e.includes("right")&&a.includes("left"),value:1}],Ks=(r,e,a)=>Th.find(t=>t.test(r,e,a))?.value||0,jh=({anchorEl:r,popoverEl:e,anchorAt:a,tryFallbacks:t,offsetPx:o,tailSizePx:n,hasTail:c,isOpen:l})=>{Go(()=>
1668{if(!(l&&!Ic()&&!!r&&!!e)){e&&Us(e);return}e&&Ih(e);const h=r,g=e,f=_h[a];let v=!0,b;return(async()=>{try{const{autoUpdate:w,computePosition:_,flip:y,offset:C}=await he.e("defaultVendors-node_modules_pnpm_floating-ui_dom_1_7_5_node_modules_floating-ui_dom_dist_floa-04d176").then(he.bind(he,40153));if(!v)return;const S=c?Math.max(0,n)*(Math.sqrt(2)/2):0,I=[C(o)];t&&I.push(y({fallbackStrategy:"bestFit"}));const j=async()=>{try{const L=await _(h,g,{placement:f,strategy:"fixed",middleware:I}),D=L.x+S*Ks("x",L.placement,f),z=L.y+S*Ks("y",L.placement,f);if(g.style.left=`${D}px`,g.style.top=`${z}px`,!c||!t){delete g.dataset.fallbacks;return}const k=Vs(f,L.placement);k?g.dataset.fallbacks=k:delete g.dataset.fallbacks}catch{}};b=w(h,g,j),await j()}catch{}})(),()=>{v=!1,b?.(),Us(g)}},[a,r,c,l,o,e,n,t])},qo=1,st=2,Rh=[{test:(r,e)=>e.top>=r.bottom+qo,value:"bottom"},{test:(r,e)=>e.bottom<=r.top-qo,value:"top"},{test:(r,e)=>e.left>=r.right+qo,value:"right"},{test:(r,e)=>e.right<=r.left-qo,value:"left"}],Ft=r=>{delete r.dataset.fallbacks};let Rc;const Ph=()=>(Rc||(Rc=he.e("defaultVendors-node_modules_pnpm_floating-ui_dom_1_7_5_node_modules_floating-ui_dom_dist_floa-04d176").then(he.bind(he,40153))),Rc),Yo=r=>({x:r.left+r.width/2,y:r.top+r.height/2}),Lh=(r,e,a,t)=>{const o=Yo(e),n=Yo(a);if(r==="top"||r==="bottom"){const h=Math.abs(t==="rtl"?a.right-e.right:a.left-e.left),g=Math.abs(t==="rtl"?a.left-e.left:a.right-e.right),f=Math.abs(n.x-o.x);return Math.abs(h-g)<=st&&f<=st||f+st<Math.min(h,g)?"center":h<=g?"start":"end"}const c=Math.abs(a.top-e.top),l=Math.abs(a.bottom-e.bottom),d=Math.abs(n.y-o.y);return Math.abs(c-l)<=st&&d<=st||d+st<Math.min(c,l)?"center":c<=l?"start":"end"},Mh=(r,e,a,t)=>{const o=Rh.find(d=>d.test(e,a));let n;if(o)n=o.value;else{const d=Yo(e),h=Yo(a),g=h.y-d.y,f=h.x-d.x,v=Math.min(e.height,a.height)*.1;Math.abs(g)>v?n=g>=0?"bottom":"top":n=f>=0?"right":"left"}if(Ns(r.split("-")[1])==="center")return n;const l=Lh(n,e,a,t);return`${n}-${l}`},Bh=({anchorEl:r,popoverEl:e,anchorAt:a,tryFallbacks:t,isOpen:o,hasTail:n})=>{Go(()=>
1668{if(!e||!Tc.canAnchor)return;if(!n||!t||!o||Tc.canAnchoredContainers||!r){Ft(e);return}const c=a;if(c==="center"||c.includes("corner")){Ft(e);return}const l=r,d=e;let h=!0,g;const f=()=>{const b=l.getBoundingClientRect(),m=d.getBoundingClientRect(),$=getComputedStyle(l).direction==="rtl"?"rtl":"ltr",w=Mh(c,b,m,$),_=Vs(c,w);c===w?Ft(d):_?d.dataset.fallbacks=_:Ft(d)};return(async()=>{try{const{autoUpdate:m}=await Ph();if(!h)return;g=m(l,d,f),f()}catch{}})(),()=>{h=!1,g?.(),Ft(d)}},[a,r,n,o,e,t])},Ws=(r,e=" ")=>r.split(e).map(a=>a.trim()).filter(Boolean),Oh=s` 1669@layer arc-components { 1670 1671 [arc-spinner] { 1672 flex: none; 1673 display: flex; 1674 1675 position: var(--arc-spinner-position, relative); 1676 inset: var(--arc-spinner-inset, 0); 1677 translate: var(--arc-spinner-translate, 0); 1678 width: var(--arc-spinner-size, 3em); 1679 1680 border-radius: var(--arc-border-radius-circle); 1681 aspect-ratio: 1 / 1; 1682 pointer-events: none; 1683 1684 [arc-spinner-circle] { 1685 fill: none; 1686 stroke: var(--arc-spinner-circle-color, currentcolor); 1687 opacity: var(--arc-spinner-circle-opacity, var(--arc-alpha-30)); 1688 } 1689 1690 [arc-spinner-progress] { 1691 fill: none; 1692 stroke: var(--arc-spinner-progress-color, var(--arc-color-fg-brand-mid)); 1693 stroke-dasharray: var(--arc-spinner-progress, 0.3334) 1; 1694 stroke-dashoffset: 0; 1695 stroke-linecap: round; 1696 opacity: var(--arc-spinner-progress-opacity, var(--arc-alpha-100)); 1697 animation: var(--arc-spinner-animation-duration, 743ms) arc-spinner-rotate linear infinite; 1698 transform-origin: 50% 50%; 1699 } 1700 } 1701 1702 @keyframes arc-spinner-rotate { 1703 to { 1704 transform: rotate3d(0, 0, 1, 360deg); 1705 } 1706 } 1707} 1708`,Pc=(0,u.forwardRef)(({progress:r,...e},a)=>(0,i.jsxs)("svg",{...e,ref:a,viewBox:"0 0 100 100","arc-spinner":"",style:{"--arc-spinner-progress":r??""},children:[(0,i.jsx)("circle",{"arc-spinner-circle":"",cx:"50%",cy:"50%",r:"45%",strokeWidth:"12.5%",pathLength:"1"}),(0,i.jsx)("circle",{"arc-spinner-progress":"",cx:"50%",cy:"50%",r:"45%",strokeWidth:"12.5%",pathLength:"1"})]}));Pc.displayName="ArcSpinner",lr("ArcSpinner",Oh);const Dh=(...r)=>console.log(...r),Gs=(...r)=>console.warn(...r),Nh=(...r)=>console.error(...r),lt=s`--arcâ¢iconâ¢text`,Ht=s`${lt}â¢fontâ¢size`,qs=s`${lt}â¢icon`,Lc=s`${lt}â¢text`,Ys=s`${lt}â¢subtext`,Fe=s`${lt}â¢fg`,ha=s`${lt}â¢gap`,Ca=s`${qs}â¢size`,Zs=s`${qs}â¢verticalâ¢align`,Vt=s`${Lc}â¢overflow`,Zo=s`${Lc}â¢textâ¢overflow`,Xo=s`${Lc}â¢whiteâ¢space`,Jo=s`${Ys}â¢fontâ¢size`,Xs=s`${Ys}â¢fg`,Fh=s` 1709 1710 &[data-variant=inherit] { /* @default 'inherit' ⢠uses font/color props from context */ 1711 ${Fe}: currentcolor; 1712 } 1713 1714 &[data-variant=primary] { 1715 ${Fe}: var(--arc-color-fg-primary); 1716 } 1717 1718 &[data-variant=secondary] { 1719 ${Fe}: var(--arc-color-fg-secondary); 1720 } 1721 1722 &[data-variant=inverse] { 1723 ${Fe}: var(--arc-color-dark-neutral-1000); 1724 } 1725 1726 &[data-variant=brand] { 1727 ${Fe}: var(--arc-color-fg-brand-stark); 1728 } 1729 1730 &[data-variant=info] { 1731 ${Fe}: var(--arc-color-fg-info-stark); 1732 } 1733 1734 &[data-variant=success] { 1735 ${Fe}: var(--arc-color-fg-success-stark); 1736 } 1737 1738 &[data-variant=warning] { 1739 ${Fe}: var(--arc-color-fg-warning-stark); 1740 } 1741 1742 &[data-variant=critical] { 1743 ${Fe}: var(--arc-color-fg-critical-mid); 1744 } 1745 1746`,Hh=s` 1747 1748 /* Overall Text Sizes */ 1749 1750 &[data-size=inherit] { /* @default 'inherit' ⢠uses font/size from context */ 1751 ${Ht}: 1em; 1752 ${Jo}: 0.75em; 1753 ${Ca}: 1em; 1754 ${ha}: 0.25em; /* 4px @ 100% */ 1755 } 1756 1757 &[data-size=md] { 1758 ${Ht}: var(--arc-font-size-14); 1759 ${Jo}: var(--arc-font-size-12); 1760 ${ha}: var(${E}â¢3); 1761 } 1762 1763 &[data-size=sm] { 1764 ${Ht}: var(--arc-font-size-12); 1765 ${Jo}: var(--arc-font-size-12); 1766 ${ha}: var(${E}â¢3); 1767 } 1768 1769 /* Gap Sizes */ 1770 1771 &[data-gap=lg] { ${ha}: var(${E}â¢12); } /* 12px @ 100% */ 1772 &[data-gap=md] { ${ha}: var(${E}â¢8); } /* 8px @ 100% */ 1773 &[data-gap=sm] { ${ha}: var(${E}â¢3); } /* 4px @ 100% */ 1774 1775 /* Icon Sizes */ 1776 1777 &[icon-size=xl] { ${Ca}: var(${p}â¢24); } 1778 &[icon-size=lg] { ${Ca}: var(${p}â¢20); } 1779 &[icon-size=md] { ${Ca}: var(${p}â¢16); } 1780 &[icon-size=sm] { ${Ca}: var(${p}â¢14); } 1781 &[icon-size=xs] { ${Ca}: var(${p}â¢12); } 1782`,Vh=s` 1783 1784 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 1785 ${Xs}: var(--arc-icon-text-subtext-color, color-mix(in srgb, currentcolor 61.2%, transparent)); 1786 1787 /* ArcIcon */ 1788 --arc-icon-color: var(--arc-icon-text-icon-color, var(${Fe})); 1789 --arc-icon-size: var(--arc-icon-text-icon-size, var(${Ca})); 1790 --arc-icon-fa-line-height: normal; 1791 --arc-icon-align-self: baseline; 1792 1793 &[data-layout=inline] { 1794 ${Vt}: unset; 1795 ${Zo}: unset; 1796 ${Xo}: unset; 1797 1798 ${Zs}: calc((var(${Ca}) - var(${Ht})) / -2); 1799 1800 &:has(svg) { ${Zs}: text-bottom; } 1801 } 1802 1803 /* Text Overflows */ 1804 &[data-layout=gutter] { 1805 ${Vt}: visible; 1806 ${Zo}: unset; 1807 ${Xo}: normal; 1808 1809 &[data-overflow=truncate] { 1810 ${Vt}: hidden; 1811 ${Zo}: ellipsis; 1812 ${Xo}: nowrap; 1813 } 1814 } 1815 1816`,Uh=s` 1817@layer arc-components { 1818 1819 [arc-icon-text] { 1820 ${Fh} 1821 ${Hh} 1822 ${Vh} 1823 } 1824 1825 [arc-icon-text] { 1826 position: var(--arc-icon-text-position, relative); 1827 font-size: var(--arc-icon-text-font-size, var(${Ht})); 1828 color: var(--arc-icon-text-text-color, var(${Fe})); 1829 line-height: var(--arc-icon-text-line-height, 1lh); 1830 1831 [data-element=icon] { 1832 display: contents; 1833 } 1834 1835 [data-element] { 1836 /* @note: SVG alignment mitigation strategy; presents in multiple components 1837 * Badges, CheckboxBars, RadioBars, supporting IconText cases like Links, etc. when using SVG icons. 1838 */ 1839 :where(svg) { 1840 flex: none; 1841 align-self: var(--arc-icon-text-svg-align-self, normal); 1842 display: var(--arc-icon-text-svg-display, inline-block) !important; 1843 width: var(--arc-icon-text-svg-width, 1.25em) !important; 1844 height: var(--arc-icon-text-svg-height, auto) !important; 1845 max-height: var(--arc-icon-text-svg-max-height, 1lh); 1846 fill: var(--arc-icon-text-svg-fill, currentColor); 1847 vertical-align: var(--arc-icon-text-svg-vertical-align, text-bottom) !important;
1848 overflow: var(--arc-icon-text-svg-overflow, visible) !important; 1849 } 1850 } 1851 1852 [data-element=text], 1853 [data-element=subtext] { 1854 position: relative; 1855 hyphens: var(--arc-icon-text-hyphens, auto); 1856 } 1857 1858 &[is-strong] [data-element=text] { 1859 font-weight: var(--arc-icon-text-font-weight, var(--arc-font-weight-bold)); 1860 1861 [data-element=subtext] { 1862 font-weight: var(--arc-icon-text-subtext-font-weight, var(--arc-font-weight-normal)); 1863 } 1864 } 1865 1866 /* @default ⢠gutter layout */ 1867 &[data-layout=gutter] { 1868 display: inline-flex; 1869 align-items: var(--arc-icon-text-align-items, first baseline); 1870 gap: var(--arc-icon-text-gap, var(${ha})); 1871 1872 /* Truncation Support */ 1873 overflow: var(--arc-icon-text-overflow, var(${Vt})); 1874 1875 &[is-flipped] { flex-direction: row-reverse; } 1876 1877 [data-element=text] { 1878 flex: 1; 1879 min-width: 0%; 1880 } 1881 1882 [data-element=subtext] { 1883 display: var(--arc-icon-text-subtext-display, block); 1884 line-height: normal; 1885 font-size: var(--arc-icon-text-subtext-font-size, var(${Jo})); 1886 color: var(--arc-icon-text-subtext-color, var(${Xs})); 1887 padding-block-start: var(--arc-icon-text-subtext-spacing, 0); 1888 } 1889 1890 :where([data-element=text], [data-element=subtext]) { 1891 overflow: var(--arc-icon-text-overflow, var(${Vt})); 1892 text-overflow: var(--arc-icon-text-text-overflow, var(${Zo})); 1893 white-space: var(--arc-icon-text-white-space, var(${Xo})); 1894 } 1895 } 1896 1897 &[data-layout=inline] { 1898 display: inline; 1899 1900 [data-element=icon] + [data-element=text] { margin-inline-start: var(--arc-icon-text-gap, var(${ha})); } 1901 [data-element=text]:has(+ [data-element=icon]) { margin-inline-end: var(--arc-icon-text-gap, var(${ha})); } 1902 [data-element=subtext] { display: contents; } 1903 } 1904 } 1905} 1906 1907`,Kh=ar(_r,["inherit","primary","secondary","inverse","brand","info","success","warning","critical"]),re=({children:r,layout:e="gutter",size:a="inherit",variant:t="inherit",tag:o="span",icon:n,iconTooltip:c,text:l,subtext:d,gradient:h,overflow:g,iconSize:f,gapSize:v,isFlipped:b=!1,isStrong:m=!1,...$})=>{const w=r||l,_=!!n,y=!!w,C=e==="gutter",S=e==="inline",I=_&&(!b||C),j=_&&y&&b&&S,L=!!f&&f!=="inherit",D=L&&La.includes(f)?f:void 0,z=L&&!La.includes(f)?f:void 0,k=v!=="inherit"?v:void 0,V=g!=="inherit"?g:void 0,U=wc(n),Y=typeof U=="string"?(0,i.jsx)(ir,{icon:U,size:z,gradient:h}):U,W=c?(0,i.jsx)(sn,{text:c,children:Y}):Y;return(0,i.jsxs)(o,{...$,"arc-icon-text":"","data-variant":t,"data-layout":e,"data-overflow":V,"data-size":a,"data-gap":k,"icon-size":D,"is-flipped":b?"":void 0,"is-strong":m?"":void 0,children:[I&&(0,i.jsx)("span",{"data-element":"icon",children:W}),y&&(0,i.jsxs)("span",{"data-element":"text",children:[w,!!d&&(C?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("br",{}),(0,i.jsx)("small",{"data-element":"subtext",children:d})]}):(0,i.jsxs)(i.Fragment,{children:[" ",(0,i.jsx)("span",{"data-element":"subtext",children:d})]}))]}),j&&(0,i.jsx)("span",{"data-element":"icon",children:W})]})};lr("ArcIconText",Uh);const He={...ve,popover:Sc[2],anchorAt:Ec[2],boundary:_c[1],tryFallbacks:!0,scheme:zc[3],offset:4,isStrong:!0,hasTail:!0,isEnabled:!0},Qo=new WeakSet,Wh=100,Gh=100;let Mc=!0,Bc=null;const qh=typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("selector(:focus-visible)"),Yh=r=>r instanceof Element?qh?r.matches(":focus-visible")===!0:Mc:!1,Oc=new WeakMap,Dc=new WeakMap,Ut=new Set,rn=(r,e)=>{const a=r.get(e);a!=null&&(clearTimeout(a),r.delete(e))},Js=(r,e,a,t)=>{const o=window.setTimeout(()=>{t(),r.delete(e)},a);r.set(e,o)},Qs="[aria-describedby]",Zh=r=>typeof r=="object"&&r!==null&&r.hasAttribute?.("popover")===!0,rl=r=>r instanceof HTMLElement&&r.getAttribute("role")==="tooltip"&&Zh(r),Xh=r=>!!r&&(r.tagName==="LABEL"||r.hasAttribute("arc-label")),Jh=r=>r?.match(/\S+/g)??[],Nc=(r,e)=>{const a=ze(e??document.documentElement);if(!a)return null;const t=a.querySelector(`[aria-describedby~="${r}"]`);return t?t.closest("label,[arc-label]")??t:null},Qh=r=>{if(!(r instanceof Element))return null;const e=r.closest?.(Qs);if(e){const t=e.getAttribute("aria-describedby")??"";if(t)return{anchor:e.closest?.("label,[arc-label]")??e,tooltipId:t}}let a=r;for(;a;){if(Xh(a)){const t=a.querySelector?.(Qs),o=t?.getAttribute?.("aria-describedby")??"";if(t&&o)return{anchor:a,tooltipId:o}}a=a.parentElement}return null},r0=r=>{if(!(r instanceof Element))return null;const e=r.closest?.('[role="tooltip"][popover]')??null;return e instanceof HTMLElement?e:null},e0=r=>r?.id?Nc(r.id,r):null,a0=r=>{const e=r0(r),a=Qh(r);if(!a&&e){const d=e0(e);
1907return!d||!e.id?null:{anchor:d,tooltip:e}}if(!a)return null;const{anchor:t,tooltipId:o}=a;if(!o)return null;const n=ze(r);if(!n)return null;const c=Jh(o),l=e??c.map(d=>n.getElementById(d)).find(d=>rl(d))??null;return rl(l)?{anchor:t,tooltip:l}:null},t0=(r,e,a)=>{const t=a instanceof Element?a:null;if(!t)return!1;const o=r===t||r.contains(t),n=e===t||e.contains(t);return o||n},el=r=>{r.isConnected&&(r.showPopover?.(),Ut.add(r))},al=r=>{r.isConnected&&(r.hidePopover?.(),Ut.delete(r))},o0=(r,e)=>{if(rn(Dc,r),rn(Oc,r),!e){el(r);return}Js(Oc,r,Wh,()=>el(r))},Fc=(r,e)=>{if(rn(Oc,r),rn(Dc,r),!e){al(r);return}Js(Dc,r,Gh,()=>al(r))},n0=()=>{Ut.forEach(r=>{Fc(r,!1)})},Kt=(r,e,a,t)=>{const o=a0(e);if(!o)return;const{anchor:n,tooltip:c}=o;if(r){o0(c,t);return}t0(n,c,a)||Fc(c,t)};let en=null,an=null,tn=null,on=null,nn=null,cn=null,dt=null,Wt=null;const tl=r=>{if(!r&&typeof document>"u")return;const e=r?ze(r):document;if(!e||Qo.has(e))return;cn=t=>{Mc=!1,Bc=t.target},dt=()=>{Bc=null},en=t=>Kt(!0,t.target,void 0,!0),tn=t=>Kt(!1,t.target,t.relatedTarget,!0),an=t=>{Yh(t.target)&&Kt(!0,t.target,void 0,!1)},on=t=>{const o=t.relatedTarget??Bc;Kt(!1,t.target,o,!1)},nn=t=>{t.key==="Tab"&&(Mc=!0),t.key==="Escape"&&(Ut.size>0&&t.preventDefault(),Kt(!1,t.target,void 0,!1),Ut.forEach(o=>Fc(o,!1)))},Wt=t=>{if(t.newState!=="open")return;const{target:o}=t;if(o instanceof HTMLElement&&o.getAttribute("role")!=="tooltip"&&o.getAttribute("popover")!=="manual"){try{if(!o.matches("[popover]:popover-open"))return}catch{return}n0()}},[["pointerdown",cn],["pointerup",dt],["pointercancel",dt],["pointerover",en],["focusin",an],["pointerout",tn],["focusout",on],["keydown",nn]].forEach(([t,o])=>{e.addEventListener(t,o)}),e.addEventListener("toggle",Wt,!0),Qo.add(e)},c0=()=>{if(!Qo.has(document)||typeof document>"u")return;[["pointerdown",cn],["pointerup",dt],["pointercancel",dt],["pointerover",en],["focusin",an],["pointerout",tn],["focusout",on],["keydown",nn]].forEach(([e,a])=>{a&&document.removeEventListener(e,a)}),Wt&&document.removeEventListener("toggle",Wt,!0),en=null,an=null,tn=null,on=null,nn=null,cn=null,dt=null,Wt=null,Qo.delete(document)},Ve=s`--arcâ¢tooltip`,ol=s`${Ve}â¢subtext`,nl=s`${Ve}â¢slot`,i0=s` 1908@layer arc-components { 1909 [arc-tooltip] { 1910 ${Ve}â¢width: max-content; 1911 ${Ve}â¢maxâ¢width: 20em; 1912 ${Ve}â¢fontâ¢size: var(${p}â¢12); 1913 ${Ve}â¢padding: var(${E}â¢10); 1914 ${ol}â¢spacing: var(${E}â¢6); 1915 ${nl}â¢marginâ¢top: var(${E}â¢8); 1916 1917 /* Communicates to Popover Engine ------------------------------⢠*/ 1918 --arc-popover-overflow: var(--arc-tooltip-overflow, clip); 1919 --arc-popover-border-radius: var(--arc-border-radius-md); 1920 --arc-popover-min-width: auto; /** Ensure tooltip width is driven by content, not anchor width */ 1921 --arc-popover-width: var(--arc-tooltip-width, var(${Ve}â¢width)); 1922 --arc-popover-max-width: var(--arc-tooltip-max-width, var(${Ve}â¢maxâ¢width)); 1923 --arc-popover-border: var(--arc-tooltip-border, 0); 1924 --arc-popover-footer-flex-direction: var(--arc-tooltip-footer-flex-direction, row); 1925 --arc-popover-font-size: var(--arc-tooltip-font-size, var(${Ve}â¢fontâ¢size)); 1926 --arc-popover-padding: var(--arc-tooltip-padding, var(${Ve}â¢padding)); 1927 --arc-popover-tail-x: var(--arc-tooltip-tail-x, 1.125em); 1928 --arc-popover-tail-y: var(--arc-tooltip-tail-y, 1.125em); 1929 --arc-popover-line-height: var(--arc-line-height-tight); 1930 1931 /* Communicates to IconText ----------------------------------⢠*/ 1932 --arc-icon-text-subtext-font-size: var(--arc-tooltip-subtext-font-size, var(${Ve}â¢fontâ¢size)); 1933 --arc-icon-text-hyphens: none; 1934 --arc-icon-text-subtext-spacing: var(--arc-tooltip-subtext-spacing, var(${ol}â¢spacing)); 1935 1936 [arc-tooltip-content] + [arc-tooltip-slot-content] { 1937 margin-top: var(--arc-tooltip-slot-margin-top, var(${nl}â¢marginâ¢top)); 1938 } 1939 } 1940} 1941`,sn=(0,u.forwardRef)(({id:r,children:e,slot:a,isEnabled:t=He.isEnabled,popover:o=He.popover,variant:n=He.variant,anchorAt:c=He.anchorAt,alternateAnchor:l,boundary:d=He.boundary,tryFallbacks:h=He.tryFallbacks,hasTail:g=He.hasTail,offset:f=He.offset,scheme:v=He.scheme,isStrong:b=He.isStrong,text:m,subtext:$,icon:w,isFlipped:_,...y},C)=>{const S=Ir(r,"arc-tooltip"),I=(0,u.useRef)(null);(0,u.useImperativeHandle)(C,()=>I.current);const j=U=>typeof U=="object"&&U!==null&&"tabIndex"in U,L=e,D=!!l;let z=null;(0,u.isValidElement)(L)?z=t?(0,u.cloneElement)(L,{"aria-describedby":S,...j(L.props)&&L.props.tabIndex!=null?{}:{tabIndex:0}}):L:!D&&typeof console<"u"&&Gs("\u{1F6A8} ArcTooltip \u2022 expects a single ReactElement child as the trigger.");const k=(0,u.useMemo)(()=>()=>Nc(S,I.current),[S]),V=v==="auto"?void 0:v;return(0,u.useEffect)(()=>
1941{if(t)try{tl(I.current)}catch{}},[t]),(0,i.jsxs)(i.Fragment,{children:[z,t&&(0,i.jsxs)(ga,{...y,"arc-tooltip":"",scheme:y?.isInverse?"inverse":V,role:"tooltip",id:S,ref:I,popover:o,anchorAt:c,tryFallbacks:h??d==="flip",variant:n,hasTail:g,offset:f,hidePopoverButton:!0,alternateAnchor:l??k,tag:y?.tag??"span",contentTag:y?.contentTag??"span",children:[m&&(0,i.jsx)(re,{"arc-tooltip-content":"",text:m,subtext:$,icon:w,isFlipped:_,isStrong:b,size:"inherit",variant:"inherit"}),a&&(0,i.jsx)("span",{"arc-tooltip-slot-content":"",children:a})]})]})});lr("ArcTooltip",i0);const s0=({isFloating:r,isOnMedia:e,shadow:a})=>[{condition:!r&&e,value:"light-md"},{condition:r&&!e,value:"lg"},{condition:r&&e,value:"light-lg"},{condition:r||a===!0,value:"lg"}],l0=({isFloating:r,isOnMedia:e,shadow:a})=>s0({isFloating:r,isOnMedia:e,shadow:a}).find(t=>t.condition)?.value??a,d0=({layout:r,isFloating:e})=>[{condition:r==="icon",value:"icon"},{condition:e||r==="hug",value:"hug"},{condition:!e&&r==="fill",value:"fill"}],u0=({layout:r,isFloating:e})=>d0({layout:r,isFloating:e}).find(a=>a.condition)?.value??r,h0=({scheme:r,isInverse:e})=>[{condition:e,value:"inverse"},{condition:r==="auto",value:void 0},{condition:!0,value:r}],g0=({scheme:r,isInverse:e})=>{const a=h0({scheme:r,isInverse:e}).find(t=>t.condition)?.value??r;return a==="auto"?void 0:a},v0=ar(Et,["round","square","narrow"]),p0=ar(oe,["xxl","xl","lg","md","sm"]),f0=ar(Oe,["hug","fill","icon"]),cl=ar(_r,["common","neutral","ai","critical","alpha"]),Hc=[...sa],m0=[...Po],il=ar(Lo,["primary","secondary","tertiary","plain","link-style"]),b0=[...rt],$0={circle:"round"},sl=({shape:r})=>la(r,$0),Vc=ar(_r,["primary","secondary","tertiary","critical-primary","critical-secondary","ai-primary","ai-secondary","primary-inverse","secondary-inverse","tertiary-inverse"]),ll={primary:{variant:"common",hierarchy:"primary"},secondary:{variant:"common",hierarchy:"secondary"},tertiary:{variant:"common",hierarchy:"tertiary"},"critical-primary":{variant:"critical",hierarchy:"primary"},"critical-secondary":{variant:"critical",hierarchy:"secondary"},"ai-primary":{variant:"ai",hierarchy:"primary"},"ai-secondary":{variant:"ai",hierarchy:"secondary"},"primary-inverse":{variant:"common",hierarchy:"primary",scheme:"inverse"},"secondary-inverse":{variant:"common",hierarchy:"secondary",scheme:"inverse"},"tertiary-inverse":{variant:"common",hierarchy:"tertiary",scheme:"inverse"}},y0=(()=>{const r=new Map;return Vc.forEach(e=>{const a=ll[e],t=a.scheme==="inverse"?"inverse":"";r.set(`${a.variant}|${a.hierarchy}|${t}`,e)}),r})(),x0=r=>!!(r&&Vc.includes(r)),ln=r=>r!==void 0&&x0(r)?ll[r]:void 0,dl=({variant:r})=>ln(r)?.variant??r,ul=({variant:r,hierarchy:e})=>ln(r)?.hierarchy??e,hl=({variant:r,isInverse:e,scheme:a})=>ln(r)?.scheme??g0({scheme:a,isInverse:e}),k0={variant:cl[0],hierarchy:il[0],scheme:Hc[0]},w0=({variant:r})=>{const e=ln(r);return e?{variant:e.variant,hierarchy:e.hierarchy,scheme:e.scheme??Hc[0]}:k0},C0=({variant:r,hierarchy:e,scheme:a})=>y0.get(`${r}|${e}|${a==="inverse"?"inverse":""}`),ye=s`60deg`,kr={purple:{50:s`light-dark(#fbf2ff, #210125)`,100:s`light-dark(#efccff, #540160)`,200:s`light-dark(#9c15ff, #ad44cb)`,300:s`light-dark(#680278, #ad44cb)`,400:s`light-dark(#5d3668, #c778de)`,500:s`light-dark(#37003f, #e3a7ff)`,600:s`light-dark(#27002c, #f9ebff)`},blue:{50:s`light-dark(#f4fbff, #00223b)`,100:s`light-dark(#d2f1fe, #02497d)`,200:s`light-dark(#1eb4fb, #169cfe)`,300:s`light-dark(#0179d0, #71bdfe)`,400:s`light-dark(#36648c, #84daff)`,500:s`light-dark(#004273, #b7eaff)`,600:s`light-dark(#012a48, #c2edff)`}},Gt=s`var(--arc-color-overlay-subtle)`,A0=s` 1942:root { 1943 --arc-button-critical-bg-hover: light-dark( 1944 color-mix(in srgb, var(--arc-color-light-red-600), transparent 90%), 1945 color-mix(in srgb, var(--arc-color-dark-red-700), transparent 75%) 1946 ); 1947 1948 /* * + secondary floating button */ 1949 --arc-button-floating-bg: ${Gt}; 1950 --arc-button-floating-bg-processing: ${Gt}; 1951 --arc-button-floating-bg-disabled: var(--arc-color-bg-disabled); 1952 --arc-button-floating-bg-focus: ${Gt}; 1953 --arc-button-floating-bg-hover: light-dark(var(--arc-color-light-neutral-100), var(--arc-color-dark-neutral-100)); 1954 --arc-button-floating-bg-active: light-dark(var(--arc-color-light-neutral-200), var(--arc-color-dark-neutral-200)); 1955 1956 /* critical + floating button */ 1957 --arc-button-critical-floating-bg-hover: var(--arc-color-bg-critical-subtle); 1958 --arc-button-critical-floating-bg-active: var(--arc-color-bg-critical-muted); 1959 1960 /* ai + secondary floating button */ 1961 --arc-button-ai-floating-bg: ${Gt} linear-gradient(${ye}, transparent, ${Gt}); 1962 1963 /* 1964 ai variant gradients that can be slightly transitioned: 'bg-color + gradient(transparent -> color)' 1965 bg-color can be transitioned, gradient not so much. Result: subtle transition of the bg-color through the transparent parts of the gradient. 1966 */ 1967 --arc-button-gradient-ai-transparent: transparent linear-gradient(${ye}, transparent, transparent); 1968 --arc-button-gradient-ai-50: ${kr.purple[50]} linear-gradient(${ye}, transparent, ${kr.blue[50]}); 1969 --arc-button-gradient-ai-100: ${kr.purple[100]} linear-gradient(${ye}, transparent, ${kr.blue[100]}); 1970 --arc-button-gradient-ai-200: ${kr.purple[200]} linear-gradient(${ye}, transparent, ${kr.blue[200]}); 1971 --arc-button-gradient-ai-300: ${kr.purple[300]} linear-gradient(${ye}, transparent, ${kr.blue[300]}); 1972 --arc-button-gradient-ai-400: ${kr.purple[400]} linear-gradient(${ye}, transparent, ${kr.blue[400]}); 1973 --arc-button-gradient-ai-500: ${kr.purple[500]} linear-gradient(${ye}, transparent, ${kr.blue[500]}); 1974 --arc-button-gradient-ai-600: ${kr.purple[600]} linear-gradient(${ye}, transparent, ${kr.blue[600]}); 1975} 1976`,S0=s` 1977:root { 1978 --arc-link-fg-hover-inverse: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 68.2%, transparent); 1979 --arc-link-fg-disabled-inverse: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 30%, transparent); 1980 --arc-link-focus-disabled-inverse: light-dark(var(--arc-color-light-blue-300), var(--arc-color-light-blue-600)); 1981} 1982`,z0=s` 1983:root { 1984 /* Tail edge colors for 'variant=ai' popovers */ 1985 --arc-popover-ai-purple-50: ${kr.purple[50]}; 1986 --arc-popover-ai-purple-200: ${kr.purple[200]}; 1987 --arc-popover-ai-blue-50: ${kr.blue[50]}; 1988 --arc-popover-ai-blue-200: ${kr.blue[200]}; 1989} 1990`,E0=s` 1991:root { 1992 --arc-progress-bar-gradient-ai-200: linear-gradient(${ye}, ${kr.purple[200]} -0.5em, ${kr.blue[200]}); 1993} 1994`,_0=s` 1995:root { 1996 --arc-banner-gradient-ai-50: linear-gradient(${ye}, ${kr.purple[50]}, ${kr.blue[50]}); 1997 --arc-banner-gradient-ai-100: linear-gradient(${ye}, ${kr.purple[100]}, ${kr.blue[100]}); 1998 --arc-banner-gradient-ai-300: linear-gradient(${ye}, ${kr.purple[300]}, ${kr.blue[300]}); 1999} 2000`,A=s`--arcâ¢button`,T=s`${A}â¢fg`,x=s`${A}â¢bg`,K=s`${A}â¢edge`,mr=s`${A}â¢border`,ut=s`${A}â¢outline`,Ue=s`${A}â¢label`,ee=s`${A}â¢mask`,sr=s`${A}â¢spinner`,Mr=s`${A}â¢icon`,qr=s`${Mr}â¢svg`,I0=s` 2001 &[data-size=xxl] { 2002 ${A}â¢fontâ¢size: var(${p}â¢16); 2003 ${A}â¢height: var(${p}â¢56); 2004 ${sr}â¢size: var(${p}â¢32); 2005 ${Mr}â¢size: var(${p}â¢20); 2006 ${Mr}â¢sizeâ¢large: var(${p}â¢24); 2007 ${qr}â¢size: var(${p}â¢25); 2008 ${qr}â¢sizeâ¢large: var(${p}â¢24); 2009 ${Ue}â¢spacing: var(${p}â¢12); 2010 ${A}â¢spacing: var(${p}â¢16); 2011 ${A}â¢spacingâ¢square: var(${p}â¢16); 2012 ${mr}â¢radiusâ¢square: var(--arc-border-radius-lg); 2013 } 2014 2015 &[data-size=xl] { 2016 ${A}â¢fontâ¢size: var(${p}â¢14); 2017 ${A}â¢height: var(${p}â¢48); 2018 ${sr}â¢size: var(${p}â¢16); 2019 ${Mr}â¢size: var(${p}â¢16); 2020 ${Mr}â¢sizeâ¢large: var(${p}â¢20); 2021 ${qr}â¢size: var(${p}â¢20); 2022 ${qr}â¢sizeâ¢large: var(${p}â¢25); 2023 ${Ue}â¢spacing: var(${p}â¢10); 2024 ${A}â¢spacing: var(${p}â¢14); 2025 ${A}â¢spacingâ¢square: var(${p}â¢14); 2026 ${mr}â¢radiusâ¢square: var(--arc-border-radius-lg); 2027 } 2028 2029 &[data-size=lg] { /** @default */ 2030 ${A}â¢fontâ¢size: var(${p}â¢14); 2031 ${A}â¢height: var(${p}â¢40); 2032 ${sr}â¢size: var(${p}â¢16); 2033 ${Mr}â¢size: var(${p}â¢16); 2034 ${Mr}â¢sizeâ¢large: var(${p}â¢20); 2035 ${qr}â¢size: var(${p}â¢20); 2036 ${qr}â¢sizeâ¢large: var(${p}â¢25); 2037 ${Ue}â¢spacing: var(${p}â¢8); 2038 ${A}â¢spacing: var(${p}â¢12); 2039 ${A}â¢spacingâ¢square: var(${p}â¢10); 2040 ${mr}â¢radiusâ¢square: var(--arc-border-radius-lg); 2041 } 2042 2043 &[data-size=inherit] { 2044 ${A}â¢fontâ¢size: 1em; 2045 ${A}â¢height: 2.5em; 2046 ${sr}â¢size: 1.125em; 2047 ${Mr}â¢size: 1.125em; 2048 ${Mr}â¢sizeâ¢large: 1.25em; 2049 ${qr}â¢size: 1.25em; 2050 ${qr}â¢sizeâ¢large: 1.375em; 2051 ${Ue}â¢spacing: 0.5em; 2052 ${A}â¢spacing: 0.75em; 2053 ${A}â¢spacingâ¢square: 0.625em; 2054 ${mr}â¢radiusâ¢square: var(--arc-border-radius-md); 2055 } 2056 2057 &[data-size=md] { 2058 ${A}â¢fontâ¢size: var(${p}â¢14); 2059 ${A}â¢height: var(${p}â¢32); 2060 ${sr}â¢size: var(${p}â¢16); 2061 ${Mr}â¢size: var(${p}â¢14); 2062 ${Mr}â¢sizeâ¢large: var(${p}â¢20); 2063 ${qr}â¢size: var(${p}â¢18); 2064 ${qr}â¢sizeâ¢large: var(${p}â¢25); 2065 ${Ue}â¢spacing: var(${p}â¢6); 2066 ${A}â¢spacing: var(${p}â¢10); 2067 ${A}â¢spacingâ¢square: var(${p}â¢8); 2068 ${mr}â¢radiusâ¢square: var(--arc-border-radius-md); 2069 } 2070 2071 &[data-size=sm] { 2072 ${A}â¢fontâ¢size: var(${p}â¢12); 2073 ${A}â¢height: var(${p}â¢24); 2074 ${sr}â¢size: var(${p}â¢14); 2075 ${Mr}â¢size: var(${p}â¢12); 2076 ${Mr}â¢sizeâ¢large: var(${p}â¢14); 2077 ${qr}â¢size: var(${p}â¢15); 2078 ${qr}â¢sizeâ¢large: var(${p}â¢18); 2079 ${Ue}â¢spacing: var(${p}â¢4); 2080 ${A}â¢spacing: var(${p}â¢8); 2081 ${A}â¢spacingâ¢square: var(${p}â¢6); 2082 ${mr}â¢radiusâ¢square: var(--arc-border-radius-md); 2083 } 2084 2085 /* Custom button overrides ⢠metrics based on size: 'inherit' */ 2086 &[arc-button=custom] { 2087 ${A}â¢fontâ¢weight: normal; 2088 ${mr}â¢radius: 0.25em; 2089 ${A}â¢height: auto; 2090 } 2091`,T0=s` 2092 &[data-layout=hug] { 2093 ${A}â¢width: auto; 2094 ${A}â¢contentâ¢width: fit-content; 2095 } 2096 2097 &[data-layout=fill] { 2098 ${A}â¢display: flex; 2099 ${A}â¢width: 100%; 2100 ${A}â¢contentâ¢width: 0; 2101 } 2102
2103 &:not([data-layout=icon]) { 2104 ${Mr}â¢width: auto; 2105 } 2106 2107 &[data-layout=icon] { 2108 ${A}â¢aspectâ¢ratio: 1 / 1; 2109 ${A}â¢minâ¢width: min-content; 2110 ${A}â¢maxâ¢width: none; 2111 ${A}â¢spacing: var(${p}â¢0); 2112 2113 ${Mr}â¢width: 1.25em; 2114 2115 &[data-shape=narrow] { 2116 ${A}â¢aspectâ¢ratio: auto; 2117 ${A}â¢spacing: var(${p}â¢2); 2118 ${Mr}â¢width: auto; 2119 } 2120 } 2121 2122 &[data-shape=square] { 2123 ${A}â¢spacing: var(${A}â¢spacingâ¢square); 2124 } 2125 2126 &:is( 2127 [data-layout=icon]:not([data-shape]), 2128 [data-shape=square], 2129 [data-shape=narrow] 2130 ) { 2131 ${mr}â¢radius: var(${mr}â¢radiusâ¢square); 2132 } 2133 2134`,j0=s` 2135 /** @mitigation ⢠when no variant is set (i.e.: 'custom' buttons) */ 2136 &:not([data-variant]) { 2137 ${T}: inherit; 2138 ${x}: transparent; 2139 ${K}: transparent; 2140 ${T}â¢disabled: var(--arc-color-fg-disabled); 2141 } 2142 2143 /** @default */ 2144 &[data-variant=common] { 2145 ${mr}â¢width: var(${p}â¢1); 2146 ${sr}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2147 ${sr}â¢baseâ¢color: var(--arc-color-alpha-mid); 2148 2149 /** @default */ 2150 &:where([data-hierarchy=primary]) { 2151 ${T}: var(--arc-color-fg-on-theme-heavy); 2152 ${x}: var(--arc-color-bg-theme-heavy); 2153 ${K}: transparent; 2154 2155 ${T}â¢active: var(--arc-color-fg-on-theme-mid); 2156 ${T}â¢processing: var(--arc-color-fg-on-theme-stark); 2157 ${T}â¢disabled: var(--arc-color-fg-disabled); 2158 2159 ${x}â¢hover: var(--arc-color-bg-theme-stark); 2160 ${x}â¢active: var(--arc-color-bg-theme-mid); 2161 ${x}â¢processing: var(--arc-color-bg-theme-stark); 2162 ${x}â¢disabled: var(--arc-color-bg-disabled); 2163 2164 ${sr}â¢progressâ¢color: var(--arc-color-mono-white); 2165 ${sr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2166 } 2167 2168 &:where([data-hierarchy=secondary]) { 2169 ${T}: var(--arc-color-fg-primary); 2170 ${x}: transparent; 2171 ${K}: var(--arc-color-border-theme-heavy); 2172 2173 ${T}â¢active: var(--arc-color-fg-secondary); 2174 ${T}â¢processing: var(--arc-color-fg-secondary); 2175 ${T}â¢disabled: var(--arc-color-fg-disabled); 2176 2177 ${K}â¢active: var(--arc-color-border-theme-mid); 2178 ${K}â¢processing: var(--arc-color-border-theme-subtle); 2179 ${K}â¢disabled: var(--arc-color-border-disabled); 2180 2181 ${x}â¢hover: var(--arc-color-bg-neutral-muted); 2182 ${x}â¢active: var(--arc-color-bg-neutral-subtle); 2183 ${x}â¢processing: transparent; 2184 ${x}â¢disabled: transparent; 2185 2186 &:where([data-layout=icon]) { 2187 ${K}: var(--arc-color-border-mid); 2188 ${K}â¢hover: var(--arc-color-border-stark); 2189 ${K}â¢focus: var(--arc-color-border-mid); 2190 } 2191 2192 &:where([is-floating]) { 2193 ${x}: var(--arc-button-floating-bg); 2194 ${x}â¢processing: var(--arc-button-floating-bg-processing); 2195 ${x}â¢disabled: var(--arc-button-floating-bg-disabled); 2196 ${x}â¢focus: var(--arc-button-floating-bg-focus); 2197 ${x}â¢hover: var(--arc-button-floating-bg-hover); 2198 ${x}â¢active: var(--arc-button-floating-bg-active); 2199 } 2200 } 2201 2202 &:where([data-hierarchy=tertiary]) { 2203 ${T}: var(--arc-color-fg-primary); 2204 ${x}: transparent; 2205 ${K}: transparent; 2206 2207 ${T}â¢active: var(--arc-color-fg-secondary); 2208 ${T}â¢processing: var(--arc-color-fg-secondary); 2209 ${T}â¢disabled: var(--arc-color-fg-disabled); 2210 2211 ${x}â¢hover: var(--arc-color-bg-neutral-muted); 2212 ${x}â¢active: var(--arc-color-bg-neutral-muted); 2213 ${x}â¢processing: var(--arc-color-bg-neutral-muted); 2214 } 2215 2216 &:where( 2217 [data-hierarchy=plain], 2218 [data-hierarchy=link-style] 2219 ) { 2220 ${T}: var(--arc-color-fg-primary); 2221 ${x}: transparent; 2222 ${K}: transparent; 2223 2224 ${T}â¢hover: var(--arc-color-alpha-heavy); 2225 ${T}â¢active: var(--arc-color-alpha-heavy); 2226 ${T}â¢processing: var(--arc-color-alpha-heavy); 2227 ${T}â¢disabled: var(--arc-color-fg-disabled); 2228 2229 ${x}â¢hover: transparent; 2230 ${x}â¢active: transparent; 2231 ${x}â¢processing: transparent; 2232 } 2233 } 2234 2235`,R0=s` 2236 &[data-variant=neutral] { 2237 ${mr}â¢width: var(${p}â¢1); 2238 ${sr}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2239 ${sr}â¢baseâ¢color: var(--arc-color-alpha-mid); 2240 2241 &:where([data-hierarchy=primary]) { 2242 ${T}: var(--arc-color-fg-primary); 2243 ${x}: transparent; 2244 ${K}: var(--arc-color-border-mid); 2245 2246 ${T}â¢active: var(--arc-color-fg-secondary); 2247 ${T}â¢processing: var(--arc-color-fg-secondary); 2248 ${T}â¢disabled: var(--arc-color-fg-disabled); 2249 2250 ${x}â¢hover: var(--arc-color-bg-neutral-muted); 2251 ${x}â¢active: var(--arc-color-bg-neutral-subtle); 2252 ${x}â¢processing: transparent; 2253 ${x}â¢disabled: transparent; 2254 2255 &:where([is-floating]) { 2256 ${x}: var(--arc-button-floating-bg); 2257 ${x}â¢processing: var(--arc-button-floating-bg-processing); 2258 ${x}â¢disabled: var(--arc-button-floating-bg-disabled); 2259 ${x}â¢focus: var(--arc-button-floating-bg-focus); 2260 ${x}â¢hover: var(--arc-button-floating-bg-hover); 2261 ${x}â¢active: var(--arc-button-floating-bg-active); 2262 } 2263 } 2264 2265 &:where([data-hierarchy=secondary]) { 2266 ${T}: var(--arc-color-fg-neutral-stark); 2267 ${x}: transparent; 2268 ${K}: var(--arc-color-border-mid); 2269 2270 ${T}â¢hover: var(--arc-color-fg-primary); 2271 ${T}â¢active: var(--arc-color-fg-secondary); 2272 ${T}â¢processing: var(--arc-color-fg-secondary); 2273 ${T}â¢disabled: var(--arc-color-fg-disabled); 2274 2275 ${K}â¢disabled: var(--arc-color-border-disabled); 2276 2277 ${x}â¢hover: var(--arc-color-bg-neutral-muted); 2278 ${x}â¢active: var(--arc-color-bg-neutral-subtle); 2279 ${x}â¢processing: transparent; 2280 ${x}â¢disabled: transparent; 2281
2282 &:where([data-layout=icon]) { 2283 ${K}: var(--arc-color-border-mid); 2284 ${K}â¢hover: var(--arc-color-border-stark); 2285 ${K}â¢focus: var(--arc-color-border-mid); 2286 } 2287 2288 &:where([is-floating]) { 2289 ${x}: var(--arc-button-floating-bg); 2290 ${x}â¢processing: var(--arc-button-floating-bg-processing); 2291 ${x}â¢disabled: var(--arc-button-floating-bg-disabled); 2292 ${x}â¢focus: var(--arc-button-floating-bg-focus); 2293 ${x}â¢hover: var(--arc-button-floating-bg-hover); 2294 ${x}â¢active: var(--arc-button-floating-bg-active); 2295 } 2296 } 2297 2298 &:where([data-hierarchy=tertiary]) { 2299 ${T}: var(--arc-color-fg-neutral-stark); 2300 ${x}: transparent; 2301 ${K}: transparent; 2302 2303 ${T}â¢active: var(--arc-color-fg-secondary); 2304 ${T}â¢processing: var(--arc-color-fg-secondary); 2305 ${T}â¢disabled: var(--arc-color-fg-disabled); 2306 2307 ${x}â¢hover: var(--arc-color-bg-neutral-muted); 2308 ${x}â¢active: var(--arc-color-bg-neutral-subtle); 2309 ${x}â¢processing: var(--arc-color-bg-neutral-muted); 2310 } 2311 2312 &:where( 2313 [data-hierarchy=plain], 2314 [data-hierarchy=link-style] 2315 ) { 2316 ${T}: var(--arc-color-fg-neutral-stark); 2317 ${x}: transparent; 2318 ${K}: transparent; 2319 2320 ${T}â¢hover: var(--arc-color-fg-primary); 2321 ${T}â¢active: var(--arc-color-fg-neutral-mid); 2322 ${T}â¢processing: var(--arc-color-fg-secondary); 2323 ${T}â¢disabled: var(--arc-color-fg-disabled); 2324 2325 ${x}â¢hover: transparent; 2326 ${x}â¢active: transparent; 2327 ${x}â¢processing: transparent; 2328 } 2329 } 2330 2331`,P0=s` 2332 &[data-variant=ai] { 2333 ${T}â¢disabled: var(--arc-color-fg-disabled); 2334 ${K}â¢disabled: var(--arc-color-border-disabled); 2335 ${mr}â¢width: var(${p}â¢2); 2336 2337 ${ee}â¢bg: var(--arc-gradient-ai-200); 2338 ${ee}â¢disabled: var(--arc-color-border-disabled); 2339 ${ee}â¢processing: var(--arc-gradient-ai-100); 2340 2341 &:where([data-hierarchy=primary]) { 2342 ${T}: var(--arc-color-fg-on-theme-stark); 2343 ${x}: var(--arc-button-gradient-ai-500) padding-box; 2344 ${K}: transparent; 2345 2346 ${T}â¢active: var(--arc-color-fg-neutral-mid); 2347 ${T}â¢processing: var(--arc-color-fg-on-theme-heavy); 2348 ${T}â¢hover: var(--arc-color-fg-on-theme-heavy); 2349 2350 ${x}â¢hover: var(--arc-button-gradient-ai-400) padding-box; 2351 ${x}â¢active: var(--arc-button-gradient-ai-600) padding-box; 2352 ${x}â¢processing: var(--arc-button-gradient-ai-400) padding-box; 2353 ${x}â¢disabled: var(--arc-color-bg-disabled) padding-box; 2354 2355 ${sr}â¢progressâ¢color: var(--arc-color-mono-white); 2356 ${sr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2357 2358 ${ee}â¢hover: var(--arc-gradient-ai-200); 2359 ${ee}â¢active: var(--arc-gradient-ai-200); 2360 } 2361 2362 &:where([data-hierarchy=secondary]) { 2363 ${T}: var(--arc-color-fg-primary); 2364 ${x}: var(--arc-button-gradient-ai-transparent) padding-box; /* allows subtle transition of bg-color through the transparent parts of the gradient */ 2365 ${K}: transparent; 2366 2367 ${T}â¢active: var(--arc-color-fg-neutral-stark); 2368 ${T}â¢processing: var(--arc-color-fg-primary); 2369 2370 ${x}â¢hover: var(--arc-button-gradient-ai-50) padding-box; 2371 ${x}â¢focus: var(--arc-button-gradient-ai-50) padding-box; 2372 ${x}â¢active: var(--arc-button-gradient-ai-50) padding-box; 2373 ${x}â¢processing: var(--arc-button-gradient-ai-50) padding-box; 2374 ${x}â¢disabled: var(--arc-color-bg-disabled) padding-box; 2375 2376 ${sr}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2377 2378 ${ee}â¢hover: var(--arc-gradient-ai-300); 2379 ${ee}â¢active: var(--arc-gradient-ai-100); 2380 2381 &:where([is-floating]) { 2382 ${x}: var(--arc-button-ai-floating-bg) padding-box; 2383 } 2384 } 2385 } 2386 2387`,L0=s` 2388 &[data-variant=alpha] { 2389 ${mr}â¢width: var(${p}â¢1); 2390 ${sr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2391 2392 &:where([data-hierarchy=primary]) { 2393 ${T}: var(--arc-color-mono-black); 2394 ${x}: var(--arc-color-mono-white); 2395 ${K}: transparent; 2396 2397 ${T}â¢focus: var(--arc-color-mono-black); 2398 ${T}â¢active: var(--arc-color-alpha-black-60); 2399 ${T}â¢processing: var(--arc-color-mono-black); 2400 ${T}â¢disabled: var(--arc-color-alpha-black-60); 2401 2402 ${x}â¢hover: var(--arc-color-alpha-white-70); 2403 ${x}â¢active: var(--arc-color-alpha-white-40); 2404 ${x}â¢processing: var(--arc-color-alpha-white-40); 2405 ${x}â¢disabled: var(--arc-color-alpha-white-15); 2406 } 2407 2408 &:where([data-hierarchy=secondary]) { 2409 ${T}: var(--arc-color-alpha-white-95); 2410 ${x}: transparent; 2411 ${K}: var(--arc-color-alpha-white-80); 2412 2413 ${T}â¢active: var(--arc-color-alpha-white-80); 2414 ${T}â¢processing: var(--arc-color-alpha-white-95); 2415 ${T}â¢disabled: var(--arc-color-alpha-white-50); 2416 2417 ${x}â¢hover: var(--arc-color-alpha-white-20); 2418 ${x}â¢active: var(--arc-color-alpha-white-40); 2419 ${x}â¢processing: var(--arc-color-alpha-white-25); 2420 ${x}â¢disabled: transparent; 2421 2422 ${K}â¢hover: var(--arc-color-alpha-white-100); 2423 ${K}â¢focus: var(--arc-color-alpha-white-80); 2424 ${K}â¢active: var(--arc-color-alpha-white-50); 2425 ${K}â¢processing: transparent; 2426 ${K}â¢disabled: var(--arc-color-alpha-white-30); 2427 } 2428 2429 &:where([data-hierarchy=tertiary]) { 2430 ${T}: var(--arc-color-alpha-white-95); 2431 ${x}: transparent; 2432 ${K}: transparent; 2433 2434 ${T}â¢active: var(--arc-color-alpha-black-60); 2435 ${T}â¢processing: var(--arc-color-alpha-white-95); 2436 ${T}â¢disabled: var(--arc-color-alpha-white-50); 2437 2438 ${x}â¢hover: var(--arc-color-alpha-white-20); 2439 ${x}â¢active: var(--arc-color-alpha-white-40); 2440 ${x}â¢processing: var(--arc-color-alpha-white-20); 2441 ${x}â¢disabled: transparent; 2442 } 2443 2444 &:where( 2445 [data-hierarchy=plain], 2446 [data-hierarchy=link-style] 2447 ) { 2448 ${T}: var(--arc-color-alpha-white-95); 2449 ${x}: transparent; 2450 ${K}: transparent; 2451 2452 ${T}â¢hover: var(--arc-color-alpha-white-60); 2453 ${T}â¢active: var(--arc-color-alpha-white-40); 2454 ${T}â¢processing: var(--arc-color-alpha-white-95); 2455 ${T}â¢disabled: var(--arc-color-alpha-white-30); 2456 } 2457 } 2458`,M0=s` 2459 &[data-variant=critical] { 2460 ${mr}â¢width: var(${p}â¢1); 2461 ${sr}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2462 2463 &:where([data-hierarchy=primary]) { 2464 ${T}: var(--arc-color-fg-on-stark); 2465 ${x}: var(--arc-color-bg-critical-stark); 2466 ${K}: transparent; 2467 2468 ${T}â¢active: var(--arc-color-fg-critical-subtle); 2469 ${T}â¢processing: var(--arc-color-fg-on-heavy); 2470 ${T}â¢disabled: var(--arc-color-fg-disabled); 2471 2472 ${x}
2472â¢hover: var(--arc-color-bg-critical-heavy); 2473 ${x}â¢active: var(--arc-color-bg-critical-heavy); 2474 ${x}â¢processing: var(--arc-color-bg-critical-heavy); 2475 ${x}â¢disabled: var(--arc-color-bg-disabled); 2476 2477 ${sr}â¢progressâ¢color: var(--arc-color-mono-white); 2478 ${sr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2479 } 2480 2481 &:where([data-hierarchy=secondary]) { 2482 ${T}: var(--arc-color-fg-critical-stark); 2483 ${x}: transparent; 2484 ${K}: var(--arc-color-border-critical-stark); 2485 2486 ${T}â¢active: var(--arc-color-fg-critical-subtle); 2487 ${T}â¢processing: var(--arc-color-fg-critical-stark); 2488 ${T}â¢disabled: var(--arc-color-fg-disabled); 2489 2490 ${x}â¢hover: var(--arc-button-critical-bg-hover); 2491 ${x}â¢active: var(--arc-color-bg-critical-muted); 2492 ${x}â¢disabled: transparent; 2493 2494 ${K}â¢active: var(--arc-color-border-critical-subtle); 2495 ${K}â¢processing: var(--arc-color-border-critical-stark); 2496 ${K}â¢disabled: var(--arc-color-border-disabled); 2497 2498 /* "floating" button mitigation */ 2499 &:where([is-floating]) { 2500 ${x}: var(--arc-button-floating-bg); 2501 ${x}â¢processing: var(--arc-button-floating-bg-processing); 2502 ${x}â¢disabled: var(--arc-button-floating-bg-disabled); 2503 ${x}â¢focus: var(--arc-button-floating-bg-focus); 2504 2505 ${x}â¢hover: var(--arc-button-critical-floating-bg-hover); 2506 ${x}â¢active: var(--arc-button-critical-floating-bg-active); 2507 } 2508 } 2509 2510 &:where([data-hierarchy=tertiary]) { 2511 ${T}: var(--arc-color-fg-critical-stark); 2512 ${x}: transparent; 2513 ${K}: transparent; 2514 2515 ${T}â¢active: var(--arc-color-fg-critical-subtle); 2516 ${T}â¢processing: var(--arc-color-fg-critical-stark); 2517 ${T}â¢disabled: var(--arc-color-fg-disabled); 2518 2519 ${x}â¢hover: var(--arc-button-critical-bg-hover); 2520 ${x}â¢active: var(--arc-color-bg-critical-subtle); 2521 ${x}â¢processing: var(--arc-color-bg-critical-muted); 2522 ${x}â¢disabled: transparent; 2523 } 2524 2525 &:where( 2526 [data-hierarchy=plain], 2527 [data-hierarchy=link-style] 2528 ) { 2529 ${T}: var(--arc-color-fg-critical-stark); 2530 ${x}: transparent; 2531 ${K}: transparent; 2532 2533 ${T}â¢hover: var(--arc-color-fg-critical-mid); 2534 ${T}â¢active: var(--arc-color-fg-critical-subtle); 2535 ${T}â¢processing: var(--arc-color-fg-critical-stark); 2536 ${T}â¢disabled: var(--arc-color-fg-disabled); 2537 } 2538 } 2539`,B0=s` 2540 /** @overrides all variants when is onMedia (allows 'ai' gradient border) */ 2541 &[is-on-media] { 2542 ${sr}â¢progressâ¢color: var(--arc-color-mono-white); 2543 ${sr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2544 2545 ${T}: var(--arc-color-mono-black); 2546 ${x}: var(--arc-color-alpha-white-70); 2547 ${K}: var(--arc-color-alpha-black-15); 2548 2549 ${T}â¢active: var(--arc-color-alpha-black-50); 2550 ${T}â¢processing: var(--arc-color-alpha-black-50); 2551 ${T}â¢disabled: var(--arc-color-alpha-black-40); 2552 2553 ${x}â¢hover: var(--arc-color-alpha-white-90); 2554 ${x}â¢focus: var(--arc-color-alpha-white-70); 2555 ${x}â¢active: var(--arc-color-alpha-white-70); 2556 ${x}â¢disabled: var(--arc-color-alpha-white-60); 2557 ${x}â¢processing: var(--arc-color-alpha-white-60); 2558 2559 ${K}â¢active: var(--arc-color-alpha-black-10); 2560 ${K}â¢disabled: var(--arc-color-alpha-black-10); 2561 } 2562`,O0=s` 2563 ${A}â¢color: var(${T}); 2564 ${A}â¢background: var(${x}); 2565 ${A}â¢fontâ¢weight: var(--arc-font-weight-600); 2566 ${A}â¢cursor: var(--arc-button-cursor, pointer); 2567 ${A}â¢padding: 0 var(${A}â¢spacing); 2568 ${A}â¢contentâ¢opacity: 1; 2569 2570 /** 2571 * @note: new spacing between label and icon 2572 * '--arc-button-gap' is @deprecated ⢠this was the 'gap' at the [arc-button-content] level 2573 * '--arc-button-inline-spacing' is @preferred over '--arc-button-gap' */ 2574 ${Ue}â¢padding: var(--arc-button-inline-spacing, var(--arc-button-gap, var(${Ue}â¢spacing))); 2575 2576 ${mr}â¢color: var(${K}); 2577 ${mr}: var(${mr}â¢width) solid var(${mr}â¢color, transparent); 2578 ${mr}â¢radius: var(--arc-border-radius-pill); 2579 2580 ${ut}: var(--arc-border-width-md) solid var(${ut}â¢color, transparent); 2581 ${ut}â¢offset: var(--arc-border-width-md); 2582 2583 /* spinner svg style controls */ 2584 ${sr}â¢progressâ¢color: var(--arc-button-progress-color, var(--arc-color-mono-white, currentcolor)); 2585 ${sr}â¢circleâ¢color: var(--arc-button-color, var(${sr}â¢baseâ¢color, var(--arc-color-alpha-mid))); 2586 ${sr}â¢circleâ¢opacity: var(--arc-alpha-100); 2587 2588 ${A}â¢transition: 2589 background 0.2s ease-out, 2590 color 0.2s ease-out, 2591 border-color 0.2s ease-out, 2592 outline-color 0.2s ease-out, 2593 opacity 0.2s ease-out, 2594 box-shadow 0.2s ease-out; 2595 2596 &[data-hierarchy=link-style] { 2597 [arc-button-label] { 2598 text-decoration: var(--arc-link-text-decoration, underline); 2599 text-decoration-color: currentcolor; 2600 } 2601 2602 [arc-button-icon] { 2603 text-decoration: none; 2604 } 2605 } 2606 2607 /* Inter-Component Communication ⢠ArcIcon -----------------------⢠*/ 2608 2609 --arc-icon-size: var(${Mr}â¢size); 2610 2611 ${qr}â¢width: var(${qr}â¢size); 2612 2613 &[has-large-icon] { 2614 --arc-icon-size: var(${Mr}â¢sizeâ¢large); 2615 2616 [arc-button-icon]:has(svg) { 2617 ${qr}â¢width: var(${qr}â¢sizeâ¢large); 2618 } 2619 } 2620 2621 /* Inter-Component Communication ⢠ArcSpinner --------------------⢠*/ 2622 2623 --arc-spinner-size: var(${sr}â¢size); 2624 --arc-spinner-progress-color: var(${sr}â¢progressâ¢color); 2625 --arc-spinner-circle-color: var(${sr}â¢circleâ¢color); 2626 --arc-spinner-circle-opacity: var(${sr}â¢circleâ¢opacity); 2627 --arc-spinner-position: var(${sr}â¢position, absolute); 2628 --arc-spinner-inset: var(${sr}â¢inset, 50% auto auto 50%); 2629 --arc-spinner-translate: var(${sr}â¢translate, -50% -50%); 2630 2631`,D0=s` 2632 &:is(
2633 [is-processing], 2634 [is-processing-with-text], 2635 :has([arc-button-mask]), 2636 :has(input), 2637 ) { 2638 ${A}â¢position: relative; 2639 } 2640 2641 &[is-disabled] { 2642 ${A}â¢color: var(${T}â¢disabled, var(${T})); 2643 ${A}â¢background: var(${x}â¢disabled, var(${x})); 2644 ${mr}â¢color: var(${K}â¢disabled, var(${K})); 2645 ${A}â¢opacity: var(--arc-button-disabled-opacity, unset); 2646 ${A}â¢cursor: var(--arc-button-disabled-cursor, not-allowed); 2647 ${ee}â¢bg: var(${ee}â¢disabled); 2648 } 2649 2650 &:not( 2651 [is-disabled], 2652 [is-processing], 2653 [is-processing-with-text] 2654 ) { 2655 &:where( 2656 :hover, 2657 [data-simulate=hover] 2658 ) { 2659 ${A}â¢color: var(${T}â¢hover, var(${T})); 2660 ${A}â¢background: var(${x}â¢hover, var(${x})); 2661 ${mr}â¢color: var(${K}â¢hover, var(${K})); 2662 ${ee}â¢bg: var(${ee}â¢hover); 2663 } 2664 2665 &:is( 2666 :active, 2667 [is-active], 2668 [data-simulate=active] 2669 ) { 2670 ${A}â¢color: var(${T}â¢active, var(${T})); 2671 ${A}â¢background: var(${x}â¢active, var(${x})); 2672 ${mr}â¢color: var(${K}â¢active, var(${K})); 2673 ${ee}â¢bg: var(${ee}â¢active); 2674 } 2675 } 2676 2677 &[is-processing] { 2678 ${A}â¢contentâ¢visibility: hidden; 2679 ${A}â¢contentâ¢opacity: 0; 2680 2681 /* spinner svg position controls */ 2682 ${sr}â¢position: absolute; 2683 ${sr}â¢inset: 50% auto auto 50%; 2684 ${sr}â¢translate: -50% -50%; 2685 } 2686 2687 &[is-processing-with-text] { 2688 ${A}â¢contentâ¢visibility: visible; 2689 2690 /* spinner svg position controls */ 2691 ${sr}â¢position: relative; 2692 ${sr}â¢inset: 0; 2693 ${sr}â¢translate: 0; 2694 ${sr}â¢size: 1lh; 2695 } 2696 2697 &:is( 2698 [is-processing], 2699 [is-processing-with-text] 2700 ) { 2701 ${A}â¢opacity: var(--arc-button-processing-opacity, unset); 2702 ${A}â¢cursor: var(--arc-button-processing-cursor, default); 2703 ${ee}â¢bg: var(${ee}â¢processing); 2704 2705 ${A}â¢color: var(${T}â¢processing, var(${T})); 2706 ${A}â¢background: var(${x}â¢processing, var(${x})); 2707 ${mr}â¢color: var(${K}â¢processing, var(${K})); 2708 } 2709 2710 &:is( 2711 :where(:focus, :focus-within):focus-visible, 2712 [data-simulate=focus] 2713 ) { 2714 ${A}â¢color: var(${T}â¢focus, var(${T})); 2715 ${A}â¢background: var(${x}â¢focus, var(${x})); 2716 ${mr}â¢color: var(${K}â¢focus, var(${K})); 2717 ${ut}â¢color: var(--arc-button-outline-color, var(--arc-color-border-focus)); 2718 2719 * { 2720 outline: none; 2721 } 2722 } 2723 2724`,N0=s` 2725@layer arc-components { 2726 2727 /* Shared defaults from _Internal/Components.css.js */ 2728 ${A0} 2729 2730 :where([arc-button]) { 2731 /* SETUP -------------------------------------------------------⢠*/ 2732 ${I0} 2733 ${T0} 2734 ${j0} 2735 ${R0} 2736 ${P0} 2737 ${L0} 2738 ${M0} 2739 ${B0} 2740 2741 /* CORE VARIABLES ----------------------------------------------⢠*/ 2742 ${O0} 2743 ${D0} 2744 2745 /* CONTEXT OVERRIDES -------------------------------------------⢠*/ 2746 &[is-floating] { 2747 ${A}â¢position: fixed; 2748 ${A}â¢margin: 0; 2749 ${A}â¢z-index: 1000; 2750 } 2751 2752 /* "floating" button mitigation */ 2753 &:where([arc-shadow], [is-floating]) { 2754 backdrop-filter: var(--arc-button-backdrop-filter, blur(0.375em)); 2755 } 2756 2757 /* Plain & Link-style button structural overrides */ 2758 &:is( 2759 [data-hierarchy=plain], 2760 [data-hierarchy=link-style] 2761 ) { 2762 ${Ue}â¢padding: unset; 2763 ${A}â¢padding: unset; 2764 ${A}â¢height: unset; 2765 ${mr}â¢radius: var(--arc-border-radius-md); 2766 2767 [arc-button-content] { 2768 gap: var(--arc-button-inline-spacing, var(${Ue}â¢spacing)); 2769 } 2770 } 2771 2772 &:where([data-hierarchy=link-style]) { 2773 ${A}â¢fontâ¢weight: inherit; 2774 ${A}â¢textâ¢decoration: none; 2775 } 2776 2777 /* Custom button structural overrides */ 2778 &[arc-button=custom] { 2779 ${A}â¢padding: unset; 2780 2781 [arc-button-content] { 2782 gap: 0.5em; 2783 } 2784 2785 [arc-button-label] { 2786 display: contents; 2787 } 2788 } 2789 2790 /* CORE STYLES -------------------------------------------------⢠*/ 2791 appearance: none; 2792 cursor: var(--arc-button-cursor, var(${A}â¢cursor)); 2793 position: var(--arc-button-position, var(${A}â¢position, unset)); 2794 transition: var(--arc-button-transition, var(${A}â¢transition)); 2795 z-index: var(--arc-button-z-index, var(${A}â¢z-index, unset)); 2796 inset: var(--arc-button-inset, var(--jsâ¢inset, unset)); 2797 2798 /* FOOTPRINT */ 2799 font: inherit; 2800 font-weight: var(--arc-button-font-weight, var(${A}â¢fontâ¢weight)); 2801 font-size: var(--arc-button-font-size, var(${A}â¢fontâ¢size, inherit)); 2802 padding: var(--arc-button-padding, var(${A}â¢padding)); 2803 margin: var(--arc-button-margin, var(${A}â¢margin, unset)); 2804 2805 width: var(--arc-button-width, var(${A}â¢width, auto)); 2806 min-width: var(--arc-button-min-width, var(${A}â¢minâ¢width, unset)); 2807 max-width: var(--arc-button-max-width, var(${A}â¢maxâ¢width, 100%)); 2808 2809 height: var(--arc-button-height, var(${A}â¢height, auto)); 2810 min-height: var(--arc-button-min-height, var(${A}â¢minâ¢height, unset)); 2811 max-height: var(--arc-button-max-height, var(${A}â¢maxâ¢height, unset)); 2812 2813 aspect-ratio: var(--arc-button-aspect-ratio, var(${A}â¢aspectâ¢ratio, unset)); 2814 2815 /* VARIANT THEME APPLIED ---------------------------------------⢠*/ 2816 2817 color: var(--arc-button-color, var(${A}â¢color)); 2818 background: var(--arc-button-background, var(${A}â¢background)); 2819 border: var(--arc-button-border, var(${mr})); 2820 border-radius: var(--arc-button-border-radius, var(${mr}â¢radius)); 2821 2822 opacity: var(--arc-button-opacity, 1); 2823 2824 outline: var(--arc-button-outline, var(${ut})); 2825 outline-offset: var(--arc-button-outline-offset, var(${ut}â¢offset)); 2826 overflow: var(--arc-button-overflow, unset); 2827 2828 /* shadow concession for buttons not already using 'arc-shadow' util */ 2829 &:not([arc-shadow]) {
2830 box-shadow: var(--arc-button-box-shadow, unset); 2831 } 2832 2833 &[href] { 2834 text-decoration: var(--arc-button-text-decoration, none); 2835 } 2836 2837 /* INNER-ELEMENTS ----------------------------------------------⢠*/ 2838 [arc-button-content] { 2839 flex: 1; 2840 2841 display: flex; 2842 align-items: var(--arc-button-align-items, center); 2843 justify-content: var(--arc-button-justify-content, center); 2844 2845 opacity: var(--arc-button-content-opacity, var(${A}â¢contentâ¢opacity)); 2846 visibility: var(--arc-button-content-visibility, var(${A}â¢contentâ¢visibility, inherit)); 2847 pointer-events: var(--arc-button-content-pointer-events, none); 2848 2849 width: var(--arc-button-content-width, var(${A}â¢contentâ¢width, auto)); 2850 max-width: var(--arc-button-content-max-width, 100%); 2851 overflow: var(--arc-button-content-overflow, visible); 2852 2853 transition: var(--arc-button-content-transition, inherit); 2854 2855 line-height: normal; 2856 user-select: none; 2857 } 2858 2859 [arc-button-label] { 2860 overflow: var(--arc-button-label-overflow, clip); 2861 text-overflow: var(--arc-button-label-text-overflow, ellipsis); 2862 white-space: var(--arc-button-label-white-space, nowrap); 2863 max-width: var(--arc-button-label-max-width, 100%); 2864 opacity: var(--arc-button-label-opacity, var(${A}â¢opacity)); 2865 transition: var(--arc-button-label-transition, inherit); 2866 padding-inline: var(${Ue}â¢padding); 2867 } 2868 2869 [arc-button-icon] { 2870 /** @note: override to ensure auto-width is applied to button icons This protects the 2871 * intended "gap" (now 'padding-inline' on the label) between icon and label */ 2872 --fa-width: var(${Mr}â¢width); 2873 2874 flex: none; 2875 2876 display: flex; 2877 align-items: center; 2878 justify-content: center; 2879 width: var(--arc-button-icon-width, var(${Mr}â¢width)); 2880 min-width: 1em; 2881 2882 opacity: var(--arc-button-icon-opacity, var(${A}â¢opacity)); 2883 transition: var(--arc-button-icon-transition, inherit); 2884 2885 &:has(svg) { 2886 ${Mr}â¢width: var(--arc-button-svg-width, var(${qr}â¢width)); 2887 } 2888 2889 svg { 2890 width: 100%; 2891 height: 100%; 2892 } 2893 } 2894 2895 [arc-button-mask] { 2896 pointer-events: none; 2897 position: absolute; 2898 inset: var(${p}â¢2m); 2899 padding: var(${p}â¢2); 2900 background: var(${ee}â¢bg); 2901 mask: linear-gradient(black, black) content-box exclude, linear-gradient(black, black); 2902 border-radius: var(--arc-button-border-radius, var(${mr}â¢radius)); 2903 transition: var(--arc-button-transition, inherit); 2904 } 2905 2906 input { 2907 position: absolute; 2908 opacity: 0; 2909 scale: 0.1; 2910 } 2911 } 2912 2913 [arc-button]:not([hidden]) { 2914 flex: var(--arc-button-flex, unset); 2915 display: var(--arc-button-display, var(${A}â¢display, inline-flex)); 2916 align-items: center; 2917 justify-content: center; 2918 } 2919 2920} 2921`,gl=(0,i.jsx)(Pc,{}),F0=(0,i.jsx)("span",{"arc-button-mask":""}),H0=!!u.version.startsWith("18"),V0=r=>r===void 0||r===!1?{isFloating:!1}:r===!0?{isFloating:!0}:{isFloating:!0,inset:r.inset},U0=({popoverTarget:r,popoverTargetAction:e})=>H0?{popovertarget:r??void 0,popovertargetaction:e??void 0}:{popoverTarget:r??void 0,popoverTargetAction:e??void 0},Ar=(0,u.forwardRef)(({children:r,disabled:e,...a},t)=>{const o=(0,u.useRef)(null),{_isCustom:n,iconEnd:c,iconStart:l,icon:d,text:h,isActive:g,isDisabled:f,isProcessing:v,isProcessingWithText:b,hasLargeIcon:m,tag:$,href:w,type:_,title:y,layout:C,shape:S,size:I="lg",variant:j="common",hierarchy:L="primary",scheme:D="auto",shadow:z,onMedia:k,floating:V,isInverse:U=!1,...Y}=a,{isFloating:W,inset:or}=V0(V),N=$??(w?"a":"button"),tr=N==="button"?_||"button":void 0,R=C==="icon",F=b||v||f||e,H=Y?.["aria-disabled"]||F||void 0,M=n?void 0:dl({variant:j}),rr=n?void 0:ul({variant:j,hierarchy:L}),er=n?void 0:sl({shape:S}),Z=n?"inherit":I,hr=u0({layout:C,isFloating:W}),P=l0({isFloating:W,isOnMedia:k,shadow:z}),X=hl({variant:j,isInverse:U,scheme:D}),vr=!R&&(r||h),pr=b&&gl||l||d,Cr=!R&&(b&&!(l||d)?void 0:c),Xr=(v||b&&R)&&gl,Be=M==="ai"?F0:void 0,{tooltip:G,...Rr}=Y,gr=ct(G)?G:void 0,de=a.tooltip??gr,Ye=!!de,ia=ct(de)?{text:de}:de,_o=Y["aria-describedby"],Io=Ir(void 0,"arc-tooltip"),To=a.id?`${a.id}-tooltip`:Io,Ze=Ye?To:void 0,nr=Ye?Ot([_o,Ze]):_o,{anchorName:Pr,style:ue,popoverTarget:me,popoverTargetAction:xa,...Qa}=Rr,ka=me?Nt(String(Pr||a?.id)):void 0,jo=Ye?Nt(String(Ze)):void 0,Xe=As(ue)?ue:void 0,Cu=Xe&&"anchorName"in Xe&&Xe.anchorName,cb=[...(ct(Cu)?Ws(Cu,", "):[]).map(Nt),...ka?[ka]:[],...jo?[jo]:[]],Au=Ot(cb,1/0,", "),ib=Xe!=null&&"inset"in Xe&&Xe.inset!==void 0&&Xe.inset!==null&&Xe.inset!=="",sb={...Xe??{},...Au?{anchorName:Au}:{},...or!==void 0&&!ib?{"--js\u2022inset":or}:{}},lb=U0({popoverTarget:me||void 0,popoverTargetAction:xa||void 0}),db=(0,u.useCallback)(Su=>{o.current=Su,Se(t,Su)},[t]);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(N,{...Qa,...lb,ref:db,"arc-button":n?"custom"
2921:"","arc-scheme":X,"arc-shadow":P||void 0,disabled:!w&&F||void 0,href:w||void 0,title:Ye?void 0:y||void 0,type:tr,"data-layout":hr,"data-shape":er,"data-size":Z,"data-variant":M,"data-hierarchy":rr,"has-large-icon":m?"":void 0,"is-floating":W?"":void 0,"is-on-media":k?"":void 0,"is-active":g?"":void 0,"is-processing":v||b&&R?"":void 0,"is-processing-with-text":b&&!R?"":void 0,"is-disabled":F||H?"":void 0,"aria-disabled":H,"aria-describedby":nr||void 0,style:sb,children:[(0,i.jsxs)("span",{"arc-button-content":"",children:[!!pr&&(0,i.jsx)("span",{"arc-button-icon":"",children:typeof pr=="string"?(0,i.jsx)(ir,{icon:pr}):pr}),!!vr&&(0,i.jsx)("span",{"arc-button-label":"",children:vr}),!!Cr&&(0,i.jsx)("span",{"arc-button-icon":"",children:typeof Cr=="string"?(0,i.jsx)(ir,{icon:Cr}):Cr})]}),Xr,Be]}),Ye&&(0,i.jsx)(sn,{...ia,id:Ze,alternateAnchor:ia?.alternateAnchor??(()=>o.current),anchorName:jo})]})});Ar.displayName="ArcButton",lr("ArcButton",N0);const qt=(0,u.forwardRef)((r,e)=>(0,i.jsx)(Ar,{...r,ref:e,"arc-popover-button":""})),vl=({isInverse:r=!1,isOpen:e,...a})=>(0,i.jsx)(Ar,{icon:"fa-regular fa-xmark",text:"Dismiss",...a,layout:"icon",shape:"square",size:"sm",variant:"common",hierarchy:"tertiary",isInverse:r,"arc-popover-dismiss":""}),K0=({isInverse:r=!1,...e})=>(0,i.jsx)(Ar,{icon:"fa-regular fa-arrow-left",text:"Go Back",...e,layout:"icon",shape:"square",size:"sm",variant:"common",hierarchy:"tertiary",isInverse:r,"arc-popover-go-back":""}),W0=({children:r,isSticky:e,showDivider:a,showDismiss:t,dismissProps:o,showGoBack:n,goBackProps:c,headerSlotEnd:l,tag:d="header",...h})=>(0,i.jsx)(d,{...h,"arc-popover-header":"","has-divider":a?"":void 0,"is-sticky":e?"":void 0,children:(0,i.jsxs)("div",{"arc-popover-display":"",children:[(0,i.jsxs)("div",{"arc-popover-header-slot":"start",children:[n&&(0,i.jsx)(K0,{...c}),r]}),(0,i.jsxs)("div",{"arc-popover-header-slot":"end",children:[l,t&&(0,i.jsx)(vl,{...o})]})]})}),G0=({children:r,tag:e="article",...a})=>(0,i.jsx)(e,{...a,"arc-popover-body":"",children:(0,i.jsx)("div",{"arc-popover-display":"",children:r})}),q0=({children:r,isSticky:e,showDivider:a,tag:t="footer",...o})=>(0,i.jsx)(t,{...o,"arc-popover-footer":"","has-divider":a?"":void 0,"is-sticky":e?"":void 0,children:(0,i.jsx)("div",{"arc-popover-display":"",children:r})});qt.displayName="ArcPopoverButton";const O=s`--arc-popover`,Yr=s`--arcâ¢popover`,cr=s`--arcâ¢trailâ¢mix`,Uc=s`${Yr}â¢radius`,Y0=s`${Yr}â¢content`,dn=s`${Yr}â¢outline`,ne=s`${Yr}â¢offset`,Je=s`${Yr}â¢header`,Z0=s`${Yr}â¢body`,Kc=s`${Yr}â¢divider`,un=s`${Yr}â¢footer`,Ke=s`${Yr}â¢tail`,br=s`${Ke}â¢top`,$r=s`${Ke}â¢left`,Yt=s`${Ke}â¢size`,xe=s`${Ke}â¢x`,ke=s`${Ke}â¢y`,Wc=s`${Yr}â¢fontâ¢size`,hn=s`${Yr}â¢padding`,ce=s`${Yr}â¢margin`,ht=s`${Je}â¢padding`,_e=s`${Z0}â¢padding`,Qe=s`${un}â¢padding`,pl=s`${Yr}â¢fg`,gn=s`${Yr}â¢bg`,vn=s`${Y0}â¢bg`,pn=s`${Ke}â¢fillâ¢a`,fn=s`${Ke}â¢fillâ¢b`,mn=s`${Ke}â¢edgeâ¢a`,bn=s`${Ke}â¢edgeâ¢b`,X0=s` 2922 2923 ${Yr}â¢fallback: none; 2924 ${dn}: var(${O}-outline-size, var(--arc-border-width-md)); 2925 ${Uc}: var(${O}-border-radius, var(--arc-border-radius-lg)); 2926 ${ne}: var(${O}-offset, var(--jsâ¢offset, 0px)); 2927 2928 /* space & padding */ 2929 ${hn}: 0.875em; 2930 2931 /* tail metrics - starts at defaults for anchor-at='bottom-start' */ 2932 ${cr}: 47.5%; /* mix-ratio for tail to match gradient outline for: 'popover[variant=ai]' */ 2933 ${xe}: var(${O}-tail-x, 1.75em); 2934 ${ke}: var(${O}-tail-y, 1.125em); 2935 ${Yt}: 0px; 2936 2937 &:where([has-tail]) { 2938 ${Yt}: var(${O}-tail-size, var(--jsâ¢tail, 8px)); 2939 2940 /* offset calculation magic number - 'sqrt(2) / 2' for half of 45° rotated tailSize */ 2941 ${ne}: calc(var(${O}-offset, var(--jsâ¢offset, 0px)) + var(${Yt}) * (sqrt(2) / 2)); 2942 } 2943 2944 &:has([arc-popover-body]) { 2945 ${hn}: 0;
2946 &:has([arc-popover-header]:not([has-divider])) { ${_e}â¢blockâ¢start: 0; } 2947 &:has([arc-popover-footer]:not([has-divider])) { ${_e}â¢blockâ¢end: 0; } 2948 } 2949 2950`,J0=s` 2951 2952 /* default variant: common */ 2953 &[variant] { 2954 ${pl}: var(--arc-color-fg-primary); 2955 ${gn}: var(${O}-background, var(--arc-color-bg-mono)) border-box; 2956 ${vn}: var(${O}-background, var(--arc-color-bg-mono)) padding-box; 2957 ${pn}: var(${O}-background, var(--arc-color-bg-mono)); 2958 ${fn}: var(${O}-background, var(--arc-color-bg-mono)); 2959 ${mn}: var(${O}-background, var(--arc-color-bg-mono)); 2960 ${bn}: var(${O}-background, var(--arc-color-bg-mono)); 2961 ${Yr}â¢shadow: var(--arc-shadow-lg); 2962 ${Kc}: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 2963 } 2964 2965 &[variant=brand] { 2966 ${gn}: var(--arc-color-border-brand-mid) border-box; 2967 ${vn}: var(--arc-color-bg-brand-muted) padding-box; 2968 ${pn}: var(--arc-color-bg-brand-muted); 2969 ${fn}: var(--arc-color-bg-brand-muted); 2970 ${mn}: var(--arc-color-border-brand-mid); 2971 ${bn}: var(--arc-color-border-brand-mid); 2972 } 2973 2974 &[variant=ai] { 2975 ${gn}: var(--arc-gradient-ai-200) border-box; 2976 ${vn}: var(--arc-gradient-ai-50) padding-box; 2977 ${pn}: var(${O}-ai-purple-50); 2978 ${fn}: var(${O}-ai-blue-50); 2979 ${mn}: var(${O}-ai-purple-200); 2980 ${bn}: var(${O}-ai-blue-200); 2981 } 2982 2983`,Q0=s` 2984 2985 /* default density: compact */ 2986 &:not([density=comfortable]) { 2987 ${Wc}: 0.75em; 2988 ${Je}â¢gap: 0.75em; 2989 ${ht}â¢block: 0.75em; 2990 ${ht}â¢inline: 0.75em; 2991 2992 ${_e}â¢block: 0.75em; 2993 ${_e}â¢inline: 0.75em; 2994 2995 ${un}â¢gap: 0.75em; 2996 ${Qe}â¢inline: 0.75em; 2997 ${Qe}â¢blockâ¢start: 0.75em; 2998 ${Qe}â¢blockâ¢end: 0.75em; 2999 } 3000 3001 &[density=comfortable] { 3002 ${Wc}: 0.875em; 3003 ${Je}â¢gap: 1.125em; 3004 ${ht}â¢block: 1em; 3005 ${ht}â¢inline: 1.25em; 3006 3007 ${_e}â¢block: 1.25em; 3008 ${_e}â¢inline: 1.25em; 3009 3010 ${un}â¢gap: 1.125em; 3011 ${Qe}â¢inline: 1.25em; 3012 ${Qe}â¢blockâ¢start: 1em; 3013 ${Qe}â¢blockâ¢end: 1.25em; 3014 3015 &:not(:has([arc-popover-body])) { 3016 ${hn}: 1.25em; 3017 } 3018 } 3019 3020`,Zt={TOP:s` 3021 &[anchor-at*='top-'] { 3022 ${ce}: 0 0 var(${ne}) 0; 3023 ${br}: 100%; 3024 } 3025 &[anchor-at='top-start'] { 3026 position-area: block-start span-inline-end; 3027 ${cr}: 95%; 3028 ${$r}: calc(0% + var(${xe})); 3029 } 3030 &[anchor-at='top-center'] { 3031 position-area: block-start; 3032 ${cr}: 75%; 3033 ${$r}: 50%; 3034 } 3035 &[anchor-at='top-end'] { 3036 position-area: block-start span-inline-start; 3037 ${cr}: 53.5%; 3038 ${$r}: calc(100% - var(${xe})); 3039 } 3040 `,RIGHT:s` 3041 &[anchor-at*='right-'] { 3042 ${ce}: 0 0 0 var(${ne}); 3043 ${$r}: 0%; 3044 } 3045 &[anchor-at='right-start'] { 3046 position-area: inline-end span-block-end; 3047 ${cr}: 53.5%; 3048 ${br}: calc(0% + var(${ke})); 3049 } 3050 &[anchor-at='right-center'] { 3051 position-area: inline-end; 3052 ${cr}: 75%; 3053 ${br}: 50%; 3054 } 3055 &[anchor-at='right-end'] { 3056 position-area: inline-end span-block-start; 3057 ${cr}: 95%; 3058 ${br}: calc(100% - var(${ke})); 3059 } 3060 `,BOTTOM:s` 3061 &[anchor-at*='bottom-'] { 3062 ${ce}: var(${ne}) 0 0 0; 3063 ${br}: 0%; 3064 } 3065 &[anchor-at='bottom-end'] { 3066 position-area: block-end span-inline-start; 3067 ${cr}: 5%; 3068 ${$r}: calc(100% - var(${xe})); 3069 } 3070 &[anchor-at='bottom-center'] { 3071 position-area: block-end; 3072 ${cr}: 25%; 3073 ${$r}: 50%; 3074 } 3075 &[anchor-at='bottom-start'] { 3076 position-area: block-end span-inline-end; 3077 ${cr}: 47.5%; 3078 ${$r}: calc(0% + var(${xe})); 3079 } 3080 `,LEFT:s` 3081 &[anchor-at*='left-'] { 3082 ${ce}: 0 var(${ne}) 0 0; 3083 ${$r}: 100%; 3084 } 3085 &[anchor-at='left-end'] { 3086 position-area: inline-start span-block-start; 3087 ${cr}: 47.5%; 3088 ${br}: calc(100% - var(${ke})); 3089 } 3090 &[anchor-at='left-center'] { 3091 position-area: inline-start; 3092 ${cr}: 25%; 3093 ${br}: 50%; 3094 } 3095 &[anchor-at='left-start'] { 3096 position-area: inline-start span-block-end; 3097 ${cr}: 5%; 3098 ${br}: calc(0% + var(${ke})); 3099 } 3100 `,CENTER_AND_CORNERS:s` 3101 &:is([anchor-at='center'], [anchor-at*='corner']) { ${Ke}â¢display: none; } 3102 &[anchor-at='center'] { position-area: center center; ${ce}: 0; } 3103 &[anchor-at*='corner'] { ${ce}: var(${ne}); } 3104 &[anchor-at='nw-corner'] { position-area: top left; } 3105 &[anchor-at='ne-corner'] { position-area: top right; } 3106 &[anchor-at='se-corner'] { position-area: bottom right; } 3107 &[anchor-at='sw-corner'] { position-area: bottom left; } 3108 `},gt={FLIP_BLOCK:s` 3109 &[anchor-at*='top-'] { ${ce}: 0 0 var(${ne}) 0; } 3110 &[anchor-at='top-start']::before { ${cr}: 47.5%; ${br}: 0%; } 3111 &[anchor-at='top-center']::before { ${cr}: 25%; ${br}: 0%; } 3112 &[anchor-at='top-end']::before { ${cr}: 5%; ${br}: 0%; } 3113 3114 &[anchor-at='right-start']::before { ${cr}: 95%; ${br}: calc(100% - var(${ke})); } 3115 &[anchor-at='right-end']::before { ${cr}: 53.5%; ${br}: calc(0% + var(${ke})); } 3116 3117 &[anchor-at*='bottom-'] { ${ce}: var(${ne}) 0 0 0; } 3118 &[anchor-at='bottom-end']::before { ${cr}: 53.5%; ${br}: 100%; } 3119 &[anchor-at='bottom-center']::before { ${cr}: 75%; ${br}: 100%; } 3120 &[anchor-at='bottom-start']::before { ${cr}: 95%; ${br}: 100%; } 3121 3122 &[anchor-at='left-end']::before { ${cr}: 5%; ${br}: calc(0% + var(${ke})); } 3123 &[anchor-at='left-start']::before { ${cr}: 47.5%; ${br}: calc(100% - var(${ke})); } 3124 `,FLIP_INLINE:s` 3125 &[anchor-at='top-start']::before { ${cr}: 53.5%; ${$r}: calc(100% - var(${xe})); } 3126 &[anchor-at='top-end']::before { ${cr}: 95%; ${$r}: calc(0% + var(${xe})); } 3127 3128 &[anchor-at*='right-'] { ${ce}: 0 var(${ne}) 0 0; } 3129 &[anchor-at='right-start']::before { ${cr}: 5%; ${$r}: 100%; } 3130 &[anchor-at='right-center']::before { ${cr}: 25%; ${$r}: 100%; } 3131 &[anchor-at='right-end']::before { ${cr}: 47.5%; ${$r}: 100%; } 3132 3133 &[anchor-at='bottom-end']::before { ${cr}: 47.5%; ${$r}: calc(0% + var(${xe})); } 3134 &[anchor-at='bottom-start']::before { ${cr}: 5%; ${$r}: calc(100% - var(${xe})); } 3135 3136 &[anchor-at*='left-'] { ${ce}: 0 0 0 var(${ne}); } 3137 &[anchor-at='left-end']::before { ${cr}: 95%; ${$r}: 0%; } 3138 &[anchor-at='left-center']::before { ${cr}: 75%; ${$r}: 0%; } 3139 &[anchor-at='left-start']::before { ${cr}: 53.5%; ${$r}: 0%; } 3140 `,FLIP_BLOCK_INLINE:s` 3141 &[anchor-at*='top-'] { ${ce}: 0 0 var(${ne}) 0; } 3142 &[anchor-at='top-start']::before { ${cr}: 5%; ${br}: 0%; ${$r}: calc(100% - var(${xe})); } 3143 &[anchor-at='top-end']::before { ${cr}: 47.5%; ${br}: 0%; ${$r}: calc(0% + var(${xe})); } 3144 3145 &[anchor-at*='right-'] { ${ce}: 0 var(${ne}) 0 0; } 3146 &[anchor-at='right-start']::before { ${cr}: 47.5%; ${br}: calc(100% - var(${ke})); ${$r}: 100%; } 3147 &[anchor-at='right-end']::before { ${cr}: 5%; ${br}: calc(0% + var(${ke})); ${$r}: 100%; } 3148 3149 &[anchor-at*='bottom-'] { ${ce}: var(${ne}) 0 0 0; } 3150 &[anchor-at='bottom-end']::before { ${cr}: 95%; ${br}: 100%; ${$r}: calc(0% + var(${xe})); } 3151 &[anchor-at='bottom-start']::before { ${cr}: 53.5%; ${br}: 100%; ${$r}: calc(100% - var(${xe})); } 3152 3153 &[anchor-at*='left-'] { ${ce}: 0 0 0 var(${ne}); } 3154 &[anchor-at='left-end']::before { ${cr}: 53.5%; ${br}: calc(0% + var(${ke})); ${$r}: 0%; } 3155 &[anchor-at='left-start']::before { ${cr}: 95%; ${br}: calc(100% - var(${ke})); ${$r}: 0%; } 3156 `},rg=s` 3157 [arc-popover] { 3158 position: fixed; 3159 inset: auto; 3160 padding: 0; 3161 margin: var(${ce}); 3162 3163 container-type: anchored; 3164 position-anchor: var(${O}-anchor-name, var(--jsâ¢anchor)); 3165 3166 ${Zt.TOP} 3167 ${Zt.RIGHT} 3168 ${Zt.BOTTOM} 3169 ${Zt.LEFT} 3170 ${Zt.CENTER_AND_CORNERS} 3171 3172 &[try-fallbacks] { 3173 position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; 3174 } 3175 } 3176 3177 @supports (container-type: anchored) { 3178 @container anchored(fallback: flip-block) { 3179 [arc-popover][try-fallbacks][has-tail] { 3180 ${gt.FLIP_BLOCK} 3181 } 3182 } 3183 3184 @container anchored(fallback: flip-inline) { 3185 [arc-popover][try-fallbacks][has-tail] { 3186 ${gt.FLIP_INLINE} 3187 } 3188 } 3189 3190 @container anchored(fallback: flip-block flip-inline) { 3191 [arc-popover][try-fallbacks][has-tail] { 3192 ${gt.FLIP_BLOCK_INLINE} 3193 } 3194 } 3195 } 3196 3197 /* @note â tail fallback mitigation */ 3198 @supports not (container-type: anchored) { 3199 /* @note â inline center anchor placement mitigation for Firefox */ 3200 [arc-popover] { 3201 &[anchor-at='right-center'] { 3202 position-area: inline-end center; 3203 } 3204 &[anchor-at='left-center'] { 3205 position-area: inline-start center; 3206 } 3207 } 3208 3209 [arc-popover][try-fallbacks][has-tail] { 3210 &[data-fallbacks='flip-block'] { 3211 ${gt.FLIP_BLOCK} 3212 } 3213 &[data-fallbacks='flip-inline'] { 3214 ${gt.FLIP_INLINE} 3215 } 3216 &[data-fallbacks='flip-block-inline'] { 3217 ${gt.FLIP_BLOCK_INLINE} 3218 } 3219 } 3220 } 3221`,vt={BACKDROP:s` 3222 [arc-popover]::backdrop { 3223 background: var(${O}-backdrop, transparent); 3224 } 3225 `,CONTENT:s` 3226 [arc-popover-content] { 3227 flex: var(${O}-flex, 1); 3228 position: relative; 3229 display: var(${O}-content-display, flex); 3230 flex-direction: var(${O}-content-flex-direction, column); 3231 gap: var(${O}-content-gap, 0); 3232 3233 overflow: var(${O}-overflow, auto); 3234 overscroll-behavior: var(${O}-overscroll-behavior, contain); 3235 3236 color: var(${O}-color, var(${pl})); 3237 padding: var(${O}-padding, var(${hn})); 3238 margin: var(${O}-margin, unset); 3239 background: var(${O}-content-background, var(${vn})); 3240 border-radius: calc(var(${Uc}) - var(${dn})); 3241 border: var(${O}-border, none); 3242 3243 height: var(${O}-height, auto); 3244 min-height: var(${O}-min-height, auto); 3245 max-height: var(${O}-max-height, 65vh); 3246 resize: var(${O}-resize, none); 3247 } 3248 `,HEADER:s` 3249 [arc-popover-header] { 3250 flex: var(${O}-header-flex, none); 3251 display: var(${O}-header-display, flex); 3252 justify-content: var(${O}-header-justify-content, space-between); 3253 align-items: var(${O}-header-align-items, baseline); 3254 gap: var(${O}-header-gap, var(${Je}â¢gap)); 3255 3256 padding: var(${O}-header-padding, 3257 var(${ht}â¢block) 3258 var(${ht}â¢inline) 3259 ); 3260 3261 color: var(${O}-header-color, inherit); 3262 background: var(${O}-header-background, none); 3263 3264 &[is-sticky] { 3265 position: sticky; 3266 z-index: var(${O}-header-z-index, 2); 3267 top: var(${O}-header-top, 0); 3268 } 3269
3270 &:has([arc-popover-go-back]) { 3271 padding-inline-start: 0.875em; 3272 } 3273 3274 &:has([arc-popover-dismiss]) { 3275 padding-inline-end: 0.875em; 3276 } 3277 3278 &:where([has-divider]) { 3279 border-bottom: var(${O}-header-border-bottom, var(${Kc})); 3280 } 3281 3282 :where([arc-button]) { 3283 margin: var(${O}-header-button-margin, -0.5em); 3284 } 3285 } 3286 3287 [arc-popover-header-slot='start'] { 3288 ${Je}â¢slotâ¢flex: 1; 3289 ${Je}â¢slotâ¢gap: 1em; 3290 } 3291 3292 [arc-popover-header-slot='end'] { 3293 ${Je}â¢slotâ¢flex: none; 3294 ${Je}â¢slotâ¢gap: 1.5em; 3295 } 3296 3297 [arc-popover-header-slot] { 3298 min-width: 0%; 3299 flex: var(${Je}â¢slotâ¢flex); 3300 display: var(${O}-header-display, flex); 3301 justify-content: var(${O}-header-justify-content, unset); 3302 align-items: var(${O}-header-align-items, baseline); 3303 gap: var(${O}-header-slot-gap, var(${Je}â¢slotâ¢gap)); 3304 } 3305 3306 /* Header-less Popover: DismissButton typical starting spot */ 3307 [arc-popover]:not([arc-popover-header]) > [arc-popover-dismiss] { 3308 --arc-button-position: absolute; 3309 inset: var(${O}-dismiss-inset, 0.5em 0.5em auto auto); 3310 margin: var(${O}-dismiss-margin, 0); 3311 } 3312 `,BODY:s` 3313 [arc-popover-body] { 3314 flex: var(${O}-body-flex, 1); 3315 display: var(${O}-body-display, block); 3316 flex-direction: var(${O}-body-flex-direction, unset); 3317 3318 padding: var(${O}-body-padding, 3319 var(${_e}â¢blockâ¢start, var(${_e}â¢block)) 3320 var(${_e}â¢inline) 3321 var(${_e}â¢blockâ¢end, var(${_e}â¢block)) 3322 var(${_e}â¢inline) 3323 ); 3324 } 3325 `,FOOTER:s` 3326 [arc-popover-footer] { 3327 flex: var(${O}-footer-flex, none); 3328 display: var(${O}-footer-display, flex); 3329 flex-direction: var(${O}-footer-flex-direction, row-reverse); 3330 justify-content: var(${O}-footer-justify-content, space-between); 3331 align-items: var(${O}-footer-align-items, center); 3332 gap: var(${O}-footer-gap, var(${un}â¢gap)); 3333 3334 padding: var(${O}-footer-padding, 3335 var(${Qe}â¢blockâ¢start) 3336 var(${Qe}â¢inline) 3337 var(${Qe}â¢blockâ¢end) 3338 var(${Qe}â¢inline) 3339 ); 3340 3341 background: var(${O}-footer-background, none); 3342 color: var(${O}-footer-color, inherit); 3343 3344 &[is-sticky] { 3345 position: sticky; 3346 z-index: var(${O}-footer-z-index, 2); 3347 bottom: var(${O}-footer-bottom, 0); 3348 } 3349 3350 &:where([has-divider]) { 3351 border-top: var(${O}-footer-border-top, var(${Kc})); 3352 } 3353 } 3354 `,TAIL:s` 3355 [arc-popover][has-tail]::before { 3356 content: ''; 3357 box-sizing: content-box; 3358 position: absolute; 3359 display: var(${Ke}â¢display, block); 3360 3361 inset: auto; 3362 top: var(${br}, auto); 3363 left: var(${$r}, auto); 3364 3365 translate: -50% -50%; 3366 rotate: 45deg; 3367 3368 width: var(${Yt}); 3369 height: var(${Yt}); 3370 border-radius: 0.125em; 3371 3372 background: color-mix(in srgb, 3373 var(${pn}) var(${cr}), 3374 var(${fn}) clamp(0%, 100% - var(${cr}), 100%) 3375 ); 3376 3377 border: var(${dn}) solid color-mix(in srgb, 3378 var(${mn}) var(${cr}), 3379 var(${bn}) clamp(0%, 100% - var(${cr}), 100%) 3380 ); 3381 } 3382 `},eg=s` 3383 [arc-popover] { 3384 will-change: opacity; 3385 overflow: visible; /* For the tail â content overflow is set on '[arc-popover-content]' */ 3386 3387 /* @note â this line-height magic number fixes asymmetrical outline/border issues with certain placements 3388 on low DPI displays. It's based on the default (--arc-line-height-standard) of 1.4 */ 3389 line-height: var(${O}-line-height, 1.395); 3390 3391 /* @note â this font-size is intended NOT to be altered; it is locked in as a reset (browser baseline) 3392 for various popover calculations. The effective popover font size is set on '[arc-popover-display]'. */ 3393 font-size: initial; 3394 3395 background: var(${O}-background, var(${gn})); 3396 border: var(${dn}) solid transparent; 3397 border-radius: var(${Uc}); 3398 box-shadow: var(${O}-shadow, var(${Yr}â¢shadow)); 3399 width: var(${O}-width, auto); 3400 height: var(${O}-height, auto); 3401 min-width: var(${O}-min-width, auto); 3402 min-height: var(${O}-min-height, auto); 3403 max-width: var(${O}-max-width, 100vw); 3404 max-height: var(${O}-max-height, 65vh); 3405 } 3406 3407 /* @note â font-size control for header|footer|body padding c
3407alculations */ 3408 [arc-popover-display] { 3409 display: contents; 3410 font-size: var(${O}-font-size, var(${Wc})); 3411 } 3412 3413 ${vt.CONTENT} 3414 ${vt.HEADER} 3415 ${vt.BODY} 3416 ${vt.FOOTER} 3417 ${vt.TAIL} 3418 ${vt.BACKDROP} 3419`,Xt={SETUP:X0,ANCHORS:rg,VARIANTS:J0,DENSITIES:Q0,ELEMENT:eg},ag=s` 3420@layer arc-components { 3421 3422 /* Shared defaults from _Internal/Components.css.js */ 3423 ${z0} 3424 3425 [arc-popover] { 3426 ${Xt.SETUP} 3427 ${Xt.VARIANTS} 3428 ${Xt.DENSITIES} 3429 } 3430 3431 ${Xt.ANCHORS} 3432 ${Xt.ELEMENT} 3433 3434 /* POPOVER anchoring mitigation ----------------------------------⢠*/ 3435 3436 [arc-popover][data-floating] { 3437 position-area: unset; 3438 } 3439 3440 /* POPOVER transition --------------------------------------------⢠*/ 3441 3442 [arc-popover] { 3443 transition-timing-function: ease-out; 3444 transition-duration: var(--arc-popover-transition-duration, 240ms); 3445 transition-property: display allow-discrete, opacity; 3446 3447 @supports (overlay: auto) { 3448 transition-behavior: allow-discrete; 3449 transition-property: display, overlay, opacity; 3450 } 3451 3452 opacity: 0; 3453 &:popover-open { opacity: 1; } 3454 3455 &::backdrop { transition: inherit; opacity: 0; } 3456 &:popover-open::backdrop { opacity: 1; } 3457 } 3458 3459 @starting-style { 3460 [arc-popover]:popover-open { opacity: 0; } 3461 [arc-popover]:popover-open::backdrop { opacity: 0; } 3462 } 3463} 3464 3465`,fl=(0,u.forwardRef)(({children:r,popover:e=ve.popover,anchorAt:a=ve.anchorAt,anchorName:t,anchorProps:o,alternateAnchorId:n,alternateAnchor:c,boundary:l=ve.boundary,tryFallbacks:d=ve.tryFallbacks,density:h=ve.density,variant:g=ve.variant,scheme:f=ve.scheme,isInverse:v,hasTail:b,tailSize:m=ve.tailSize,offset:$=ve.offset,hidePopoverButton:w,headerSlot:_,showHeaderDivider:y,isHeaderSticky:C,showDismiss:S,dismissProps:I,showGoBack:j,goBackProps:L,headerSlotEnd:D,footerSlot:z,isFooterSticky:k,showFooterDivider:V,tag:U="div",contentTag:Y="div",onToggle:W,...or},N)=>{const tr=(0,u.useRef)(null),R=(0,u.useRef)(null),F=(0,u.useRef)(null),H=(0,u.useRef)(W);(0,u.useImperativeHandle)(N,()=>R.current);const[M,rr]=(0,u.useState)(!1),er=(0,u.useMemo)(()=>f==="auto"?void 0:v?"inverse":f,[v,f]),Z=(0,u.useCallback)(()=>{if(typeof document>"u")return tr.current??null;const gr=ze(tr.current)??document;return n?gr.getElementById(n):typeof c=="string"?gr.getElementById(c):c instanceof HTMLElement?c:typeof c=="function"?c():c&&typeof c=="object"&&"current"in c?c.current:tr.current??null},[c,n]),hr=d||l==="flip",P=!!b&&!Ms.includes(a),X=Bs({canHaveTail:P,tailSize:m}),vr=(0,u.useMemo)(()=>{const gr=t||n||(typeof c=="string"?c:void 0)||o?.id||or.id||void 0;return jc(String(gr))},[t,o?.id,or.id,c,n]),pr=(0,u.useMemo)(()=>
3465({popoverTarget:or.id,"aria-haspopup":!0,"aria-controls":or.id,"aria-expanded":M}),[or.id,M]),Cr=(0,u.useMemo)(()=>({isOpen:M,"aria-label":"Dismiss",...pr,...I}),[I,M,pr]),Xr=(0,u.useMemo)(()=>({ref:tr,...pr,...o,tooltip:M?void 0:o?.tooltip,anchorName:vr||""}),[o,pr,vr,M]),Be=(0,u.useMemo)(()=>({"--js\u2022anchor":Xr?.anchorName||"","--js\u2022offset":Number($)===0?"":`${$}px`,"--js\u2022tail":X.cssTailVar}),[Xr?.anchorName,$,X.cssTailVar]);Go(()=>{const gr=Z();if(F.current=gr,!!gr)return Ds(gr,Xr.anchorName)},[Z,Xr.anchorName,M]),(0,u.useEffect)(()=>{H.current=W},[W]),(0,u.useEffect)(()=>{const gr=R.current;if(!gr)return;const Nr=de=>{const{newState:Ye}=de,ia=Ye==="open";rr(ia),ia&&(F.current=Z()),H.current?.(de)};return gr.addEventListener("toggle",Nr),()=>gr.removeEventListener("toggle",Nr)},[Z]),jh({anchorEl:F.current,popoverEl:R.current,anchorAt:a,tryFallbacks:hr,offsetPx:Number($)||0,tailSizePx:X.floatingTailPx,hasTail:P,isOpen:M}),Bh({anchorEl:F.current,popoverEl:R.current,anchorAt:a,tryFallbacks:hr,hasTail:P,isOpen:M});const G=!!(_||j||D),Rr=!!z;return(0,i.jsxs)(i.Fragment,{children:[!((n||c)&&w)&&(0,i.jsx)(qt,{...Xr}),(0,i.jsxs)(U,{...or,ref:R,"arc-popover":"","arc-scheme":er,"anchor-at":a,"try-fallbacks":hr?"":void 0,popover:e,variant:g,density:h,"has-tail":P?"":void 0,role:or.role??"dialog",style:{...or.style,...Be},children:[(0,i.jsxs)(Y,{"arc-popover-content":"",children:[G&&(0,i.jsx)(W0,{showDivider:y,showGoBack:j,goBackProps:L,headerSlotEnd:D,showDismiss:S,dismissProps:Cr,isSticky:C,children:_}),G||Rr?(0,i.jsx)(G0,{children:r}):(0,i.jsx)(Y,{"arc-popover-display":"",children:r}),Rr&&(0,i.jsx)(q0,{showDivider:V,isSticky:k,children:z})]}),S&&!G&&(0,i.jsx)(vl,{...Cr})]})]})});fl.displayName="ArcPopover";const Gc=fl;Gc.handlePopover=Os,Gc.Button=qt;const ga=Gc;lr("ArcPopover",ag);const tg=s` 3466@layer arc-components { 3467 3468 [arc-avatar-overflow] { 3469 /* Inter-Component Communication ⢠ArcPopover ------------------⢠*/ 3470 --arc-popover-font-size: var(--arc-font-size-body-md); 3471 --arc-popover-translate: -100% 0.5em; 3472 --arc-popover-width: max-content; 3473 --arc-popover-max-width: 18em; 3474 --arc-popover-padding: 0; 3475 3476 /* For Neutral/Anonymous avatars -------------------------------⢠*/ 3477 [data-element=list] { 3478 margin: 0; 3479 padding: var(${p}â¢4) var(${p}â¢0); 3480 } 3481 3482 [data-element=list-item] { 3483 display: flex; 3484 align-items: center; 3485 gap: var(${p}â¢6); 3486 padding: var(${p}â¢4) var(${p}â¢8); 3487 } 3488 3489 ${vc} 3490 ${ws} 3491 } 3492 3493} 3494`,og=r=>(0,i.jsx)("ul",{...r,"data-element":"list"}),ng=r=>(0,i.jsx)("li",{...r,"data-element":"list-item"}),cg=({count:r,anchorId:e,overflowId:a,shouldShowOverflow:t,...o})=>(0,i.jsx)(Cc,{title:`+${r}`,children:(0,i.jsx)(ga.Button,{...o,id:e,popoverTarget:a,text:`+${r}`,variant:"common",hierarchy:"primary",disabled:!t,"data-element":"counter","data-color":"black","data-num-length":r?.toString().length})}),ig=({children:r,id:e,size:a="sm",overflowCount:t=0,shouldShowOverflow:o=!1,anchorAt:n="bottom-end",tryFallbacks:c=!0,...l})=>{const d=Math.min(t,999),h=Ir(e,"arc-avatar-overflow"),g=(0,u.useMemo)(()=>`${h}-anchor`,[h]),f=(0,u.useMemo)(()=>u.Children.toArray(r),[r]);return(0,i.jsxs)(i.Fragment,{children:[d>0&&(0,i.jsx)(cg,{count:d,anchorId:g,overflowId:h,shouldShowOverflow:o}),o&&d>0&&(0,i.jsx)(ga,{...l,scheme:"inverse","arc-avatar-overflow":"",id:h,anchorAt:n,tryFallbacks:c,alternateAnchorId:g,hidePopoverButton:!0,variant:"common","data-size":a,children:(0,i.jsx)(og,{children:f.map((v,b)=>(0,i.jsx)(ng,{children:v},b))})})]})};lr("ArcAvatarOverflow",tg);const ml=({fg:r,bg:e})=>s` 3495 &:has(>[data-color=mono-inverse]) { 3496 ${r}â¢high: var(--arc-color-fg-on-mono-inverse); 3497 ${e}â¢high: var(--arc-color-bg-mono-inverse); 3498 ${r}â¢low: var(--arc-color-fg-on-subtle); 3499 ${e}â¢low: var(--arc-color-bg-neutral-subtle); 3500 } 3501 3502 &:has(>[data-color=brand]) { 3503 ${r}â¢high: var(--arc-color-fg-on-stark); 3504 ${e}â¢high: var(--arc-color-bg-brand-stark); 3505 ${r}â¢low: var(--arc-color-fg-brand-stark); 3506 ${e}â¢low: var(--arc-color-bg-brand-subtle); 3507 } 3508 3509 &:has(>[data-color=mono]) { 3510 ${r}â¢high: var(--arc-color-fg-on-mono); 3511 ${e}â¢high: var(--arc-color-bg-mono); 3512 ${r}â¢low: var(--arc-color-fg-on-mono); 3513 ${e}â¢low: var(--arc-color-bg-mono); 3514 } 3515 3516 &:has(>[data-color=blue]) { 3517 ${r}â¢high: var(--arc-color-fg-on-stark); 3518 ${e}â¢high: var(--arc-color-bg-blue-stark); 3519 ${r}â¢low: var(--arc-color-fg-blue-stark); 3520 ${e}â¢low: var(--arc-color-bg-blue-subtle); 3521 } 3522 3523 &:has(>[data-color=neutral]) { 3524 ${r}â¢high: var(--arc-color-fg-on-heavy); 3525 ${e}â¢high: var(--arc-color-bg-neutral-heavy); 3526 ${r}â¢low: var(--arc-color-fg-neutral-stark); 3527 ${e}â¢low: var(--arc-color-bg-neutral-subtle); 3528 } 3529 3530 &:has(>[data-color=purple]) { 3531 ${r}â¢high: var(--arc-color-fg-on-stark); 3532 ${e}â¢high: var(--arc-color-bg-purple-stark); 3533 ${r}â¢low: var(--arc-color-fg-purple-stark); 3534 ${e}â¢low: var(--arc-color-bg-purple-subtle); 3535 } 3536 3537 &:has(>[data-color=green]) { 3538 ${r}â¢high: var(--arc-color-fg-on-stark); 3539 ${e}â¢high: var(--arc-color-bg-green-stark); 3540 ${r}â¢low: var(--arc-color-fg-green-stark); 3541 ${e}â¢low: var(--arc-color-bg-green-subtle); 3542 } 3543 3544 &:has(>[data-color=yellow]) { 3545 ${r}â¢high: var(--arc-color-fg-on-stark); 3546 ${e}â¢high: var(--arc-color-bg-yellow-stark); 3547 ${r}â¢low: var(--arc-color-fg-yellow-stark); 3548 ${e}â¢low: var(--arc-color-bg-yellow-subtle); 3549 } 3550 3551 &:has(>[data-color=red]) { 3552 ${r}â¢high: var(--arc-color-fg-on-stark); 3553 ${e}â¢high: var(--arc-color-bg-red-stark); 3554 ${r}â¢low: var(--arc-color-fg-red-stark); 3555 ${e}â¢low: var(--arc-color-bg-red-subtle); 3556 } 3557 3558 &:has(>
3558[data-color=maroon]) { 3559 ${r}â¢high: var(--arc-color-fg-on-stark); 3560 ${e}â¢high: var(--arc-color-bg-maroon-stark); 3561 ${r}â¢low: var(--arc-color-fg-maroon-stark); 3562 ${e}â¢low: var(--arc-color-bg-maroon-subtle); 3563 } 3564 3565 &:has(>[data-color=mint]) { 3566 ${r}â¢high: var(--arc-color-fg-on-stark); 3567 ${e}â¢high: var(--arc-color-bg-mint-stark); 3568 ${r}â¢low: var(--arc-color-fg-mint-stark); 3569 ${e}â¢low: var(--arc-color-bg-mint-subtle); 3570 } 3571 3572 &:has(>[data-color=orange]) { 3573 ${r}â¢high: var(--arc-color-fg-on-stark); 3574 ${e}â¢high: var(--arc-color-bg-orange-stark); 3575 ${r}â¢low: var(--arc-color-fg-orange-stark); 3576 ${e}â¢low: var(--arc-color-bg-orange-subtle); 3577 } 3578 3579 &:has(>[data-color=ai]) { 3580 ${r}â¢high: var(--arc-color-fg-on-heavy); 3581 ${e}â¢high: var(--arc-gradient-ai-300); 3582 ${r}â¢low: var(--arc-color-fg-on-subtle); 3583 ${e}â¢low: var(--arc-gradient-ai-100); 3584 } 3585 3586 &:has(>[data-color=overlay-light]) { 3587 ${r}â¢high: var(--arc-color-mono-black); 3588 ${e}â¢high: var(--arc-color-alpha-white-80); 3589 ${r}â¢low: var(--arc-color-alpha-heavy); 3590 ${e}â¢low: var(--arc-color-alpha-white-20); 3591 } 3592 3593 &:has(>[data-color=overlay-dark]) { 3594 ${r}â¢high: var(--arc-color-mono-white); 3595 ${e}â¢high: var(--arc-color-alpha-black-70); 3596 ${r}â¢low: var(--arc-color-mono-white); 3597 ${e}â¢low: var(--arc-color-alpha-black-40); 3598 } 3599`,bl=({fg:r,bg:e})=>s` 3600 &:has(>[data-contrast=high]) { 3601 ${r}: var(${r}â¢high); 3602 ${e}: var(${e}â¢high); 3603 } 3604 3605 &:has(>[data-contrast=low]) { 3606 ${r}: var(${r}â¢low); 3607 ${e}: var(${e}â¢low); 3608 } 3609`,q=s`--arcâ¢badge`,qc=s`${q}â¢fg`,Yc=s`${q}â¢bg`,sg=ml({fg:qc,bg:Yc}),lg=bl({fg:qc,bg:Yc}),dg=s` 3610 &:has(>[data-size=lg]) { 3611 ${q}â¢fontâ¢size: var(${p}â¢14); 3612 ${q}â¢fontâ¢sizeâ¢caps: var(${p}â¢12); 3613 ${q}â¢size: var(${p}â¢24); 3614 ${q}â¢minâ¢size: var(${p}â¢30); 3615 ${q}â¢paddingâ¢inline: var(${p}â¢8); 3616 ${q}â¢borderâ¢radius: var(${p}â¢4); 3617 ${q}â¢gap: var(${p}â¢4); 3618 } 3619 3620 &:has(>[data-size=md]) { 3621 ${q}â¢fontâ¢size: var(${p}â¢12); 3622 ${q}â¢fontâ¢sizeâ¢caps: var(${p}â¢10); 3623 ${q}â¢size: var(${p}â¢20); 3624 ${q}â¢minâ¢size: var(${p}â¢24); 3625 ${q}â¢paddingâ¢inline: var(${p}â¢6); 3626 ${q}â¢borderâ¢radius: var(${p}â¢4); 3627 ${q}â¢gap: var(${p}â¢4); 3628 } 3629 3630 &:has(>[data-size=sm]) { 3631 ${q}â¢fontâ¢size: var(${p}â¢10); 3632 ${q}â¢fontâ¢sizeâ¢caps: var(${p}â¢8); 3633 ${q}â¢size: var(${p}â¢16); 3634 ${q}â¢minâ¢size: var(${p}â¢18); 3635 ${q}â¢paddingâ¢inline: var(${p}â¢4); 3636 ${q}â¢borderâ¢radius: var(${p}â¢4); 3637 ${q}â¢gap: var(${p}â¢4); 3638 } 3639 3640 /** @default ⢠relative equivalent of 'md' at 100% ⢠(16 x 75% = 12) */ 3641 &:has(>[data-size=inherit]) { 3642 ${q}â¢fontâ¢size: 1em; 3643 ${q}â¢fontâ¢sizeâ¢text: 0.75em; 3644 ${q}â¢fontâ¢sizeâ¢caps: 0.625em; 3645 ${q}â¢size: 1.25em; 3646 ${q}â¢minâ¢size: 1.5em; 3647 ${q}â¢paddingâ¢inline: 0.375em; 3648 ${q}â¢borderâ¢radius: 0.25em; 3649 ${q}â¢gap: 0.25em; 3650 } 3651`,ug=s` 3652 &:has(>[data-layout=fill]) { 3653 ${q}â¢flex: auto; /* same as 1 (1 1 auto) but with clearer intent */ 3654 ${q}â¢display: flex; 3655 ${q}â¢minâ¢width: var(${q}â¢minâ¢size); 3656 3657 /* Inter-Component Communication ⢠ArcIconText -------------------⢠*/ 3658 --arc-icon-text-overflow: hidden; 3659 --arc-icon-text-white-space: nowrap; 3660 --arc-icon-text-text-overflow: ellipsis; 3661 } 3662 3663 &:has(>[data-layout=hug]) { 3664 ${q}â¢flex: none; /* same as 0 0 auto but with clearer intent */ 3665 ${q}â¢display: inline-flex; 3666 ${q}â¢minâ¢width: min-content; 3667 } 3668`,hg=s` 3669@layer arc-components { 3670 3671 [arc-badge-wrapper] { 3672 ${sg} 3673 ${lg} 3674 ${dg} 3675 ${ug} 3676 3677 /* Inter-Component Communication ⢠ArcIconText -------------------⢠*/ 3678 --arc-icon-height: 1lh; 3679 --arc-icon-text-align-items: center; 3680 --arc-icon-text-gap: var(${q}â¢gap); 3681 --arc-icon-text-svg-width: var(--arc-badge-svg-width, 1em); 3682 } 3683 3684 /* CORE ------------------------------------------------------------⢠*/ 3685 3686 [arc-badge-wrapper]:not([hidden]) { 3687 flex: var(--arc-badge-flex, var(${q}â¢flex, unset)); 3688 align-self: var(--arc-badge-align-self, flex-start); 3689 display: var(${q}â¢display, inline-flex); 3690 align-items: center; 3691 justify-content: center; 3692 height: 1lh; 3693 max-height: 1lh; 3694 vertical-align: bottom; 3695 3696 &:has(>[data-is-flexible]) { 3697 min-width: var(--arc-badge-min-width, var(${q}â¢minâ¢width)); 3698 } 3699 } 3700 3701 [arc-badge] { 3702 font-size: var(--arc-badge-font-size, var(${q}â¢fontâ¢size)); 3703 font-weight: var(--arc-font-weight-600); 3704 3705 flex: var(${q}â¢flex); 3706 display: var(${q}â¢display, inline-flex); 3707 align-items: center; 3708 justify-content: center; 3709 height: var(${q}â¢size); 3710 padding-inline: var(${q}â¢paddingâ¢inline); 3711 3712 overflow: hidden; 3713 white-space: nowrap; 3714 line-height: 1; 3715 3716 color: var(--arc-badge-color, var(${qc})); 3717 background: var(--arc-badge-background, var(${Yc})); 3718 border-radius: var(${q}â¢borderâ¢radius); 3719 mix-blend-mode: var(--arc-badge-mix-blend-mode, unset); 3720 3721 :is([data-element=icon], [data-element=text]) { 3722 font-size: var(${q}â¢fontâ¢sizeâ¢text, 1em); 3723 } 3724 3725 &[data-is-uppercase] [data-element=text] { 3726 text-transform: uppercase; 3727 font-size: var(${q}â¢fontâ¢sizeâ¢caps); 3728 } 3729 } 3730 3731} 3732`,$l=["brand","blue","neutral","purple","green","yellow","red","orange","mint","maroon","mono","mono-inverse","ai","overlay-light","overlay-dark"],gg=["brand",...$l.filter(r=>r!=="brand")],vg=["neutral",...$l.filter(r=>r!=="neutral")],pg=Jr(Ra,gg),fg=Jr(Ra,vg),mg=Jr(oe,["inherit","lg","md","sm"]),bg=Jr(Oe,["hug","fill"]),$g=["high","low"],yg=Jr(_r,["brand-blue","brand-black","neutral","info","success","warning","critical","ai","overlay-light","overlay-dark"]),xg={"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"},kg=({children:r,icon:e,text:a,isFlipped:t,isFlexible:o,isUppercase:n,color:c,variant:l,size:d="inherit",layout:h="hug",contrast:g="high",...f})=>{const v=c??xg[l??"brand-blue"],b=r||(0,i.jsx)(re,{icon:e,text:a,isFlipped:t,layout:"gutter"}),m=h==="fill"&&o;return(0,i.jsx)("span",{...f,"arc-badge-wrapper":"",children:(0,i.jsx)("span",{"arc-badge":"","data-contrast":g,"data-color":v,"data-layout":h,"data-size":d,"data-is-flexible":m?"":void 0,"data-is-uppercase":n?"":void 0,children:b})})};lr("ArcBadge",hg);const Sr=s`--arcâ¢badgeâ¢count`,Zc=s`${Sr}â¢fg`,Xc=s`${Sr}â¢bg`,wg=ml({fg:Zc,bg:Xc}),Cg=bl({fg:Zc,bg:Xc}),Ag=s` 3733 &:has(>[data-size=lg]) { 3734 ${Sr}â¢fontâ¢size: var(${p}â¢14); 3735 ${Sr}â¢size: var(${p}â¢24); 3736 ${Sr}â¢paddingâ¢inline: var(${p}â¢4); 3737 } 3738 3739 &:has(>[data-size=md]) { 3740 ${Sr}â¢fontâ¢size: var(${p}â¢12); 3741 ${Sr}â¢size: var(${p}â¢20); 3742 ${Sr}â¢paddingâ¢inline: var(${p}â¢4); 3743 } 3744 3745 &:has(>[data-size=sm]) { 3746 ${Sr}â¢fontâ¢size: var(${p}â¢10); 3747 ${Sr}â¢size: var(${p}â¢16); 3748 ${Sr}â¢paddingâ¢inline: var(${p}â¢4); 3749 } 3750 3751 &:has(>[data-size=inherit]) { /** @default ⢠scalable based on 'md' size */ 3752 ${Sr}â¢fontâ¢size: 1em; 3753 ${Sr}â¢fontâ¢sizeâ¢text: 0.75em; 3754 ${Sr}â¢size: 1.25em; 3755 ${Sr}â¢paddingâ¢inline: 0.25em; 3756 } 3757`,Sg=s` 3758 &:has(>[data-shape=square]) { 3759 ${Sr}â¢borderâ¢radius: var(${p}â¢4); 3760 } 3761 3762 &:has(>[data-shape=circle]) { 3763 ${Sr}â¢borderâ¢radius: var(--arc-border-radius-pill); 3764 } 3765`,zg=s` 3766@layer arc-components { 3767 3768[arc-badge-count-wrapper] { 3769 ${wg} 3770 ${Cg} 3771 ${Ag} 3772 ${Sg} 3773} 3774 3775/* CORE ------------------------------------------------------------⢠*/ 3776 3777[arc-badge-count-wrapper]:not([hidden]) { 3778 flex: none; 3779 align-self: var(--arc-badge-count-align-self, flex-start); 3780 display: inline-flex; 3781 align-items: center; 3782 justify-content: center; 3783 height: 1lh; 3784 max-height: 1lh; 3785 vertical-align: bottom; 3786} 3787 3788[arc-badge-count] { 3789 font-size: var(--arc-badge-count-font-size, var(${Sr}â¢fontâ¢size)); 3790 font-weight: var(--arc-font-weight-600); 3791 3792 flex: none; 3793 display: inline-flex; 3794 align-items: center; 3795 justify-content: center; 3796 height: var(${Sr}â¢size); 3797 min-width: var(${Sr}â¢size); 3798 padding-inline: var(${Sr}â¢paddingâ¢inline); 3799 3800 white-space: nowrap; 3801 line-height: normal; 3802 3803 color: var(--arc-badge-count-color, var(${Zc})); 3804 background: var(--arc-badge-count-background, var(${Xc})); 3805 border-radius: var(${Sr}â¢borderâ¢radius); 3806 mix-blend-mode: var(--arc-badge-count-mix-blend-mode, unset); 3807 3808 [data-element=text] { 3809 font-size: var(${Sr}â¢fontâ¢sizeâ¢text, 1em); 3810 } 3811} 3812 3813`,Eg=Jr(oe,["inherit","lg","md","sm"]),_g=Jr(_r,["neutral","brand","critical","warning","success","inverse"]),Ig=["low","high"],Tg=Jr(Et,["square","circle"]),jg={neutral:"neutral",brand:"brand",critical:"red",warning:"yellow",success:"green",inverse:"mono"},Rg=({children:r,text:e,color:a,variant:t,contrast:o,size:n="inherit",shape:c="square",...l})=>{const d=r||(0,i.jsx)("span",{"data-element":"text",children:e}),h=a??jg[t??"neutral"],g=t==="critical"?"high":o??"low";return(0,i.jsx)("span",{...l,"arc-badge-count-wrapper":"",children:(0,i.jsx)("span",{"arc-badge-count":"","data-color":h,"data-contrast":g,"data-shape":c,"data-size":n,children:d})})};lr("ArcBadgeCount",zg);const Ie=s`--arcâ¢banner`,ie=s`${Ie}â¢bg`,ae=s`${Ie}â¢fg`,we=s`${Ie}â¢columns`,va=s`${Ie}â¢border`,Jc=s`${Ie}â¢borderâ¢radius`,Jt=s`${Ie}â¢padding`,Ua=s`${Ie}â¢minâ¢height`,$n=s`${Ie}â¢body`,pt=s`${$n}â¢fontâ¢size`,yn=s`${$n}â¢gap`,yl=s`${$n}â¢flexâ¢direction`,xl=s`${$n}â¢minâ¢width`,Qc=s`${Ie}â¢icon`,ft=s`${Qc}â¢fontâ¢size`,ri=s`${Qc}â¢padding`,Aa=s`${Qc}â¢color`,kl=s`${Ie}â¢action`,ei=s`${kl}â¢justify`,ai=s`${kl}â¢gap`,Qt=s`${Ie}â¢columnâ¢gap`,ti=s`${Ie}â¢rowâ¢gap`,Pg=s` 3814 &:where([variant=ai]) { 3815 ${ae}: var(--arc-color-fg-primary); 3816 /* Note: uses components-specific gradient style from: bannerStyles import */ 3817 ${ie}: var(--arc-banner-gradient-ai-50) padding-box, var(--arc-banner-gradient-ai-100) border-box; 3818 ${va}: var(--arc-border-width-sm) solid transparent; 3819 } 3820 3821 &:where([variant=announcement]) { 3822 ${ae}: var(--arc-color-fg-primary); 3823 ${Aa}: var(--arc-color-fg-brand-mid); 3824 ${ie}: var(--arc-color-bg-blue-muted); 3825 ${va}: var(--arc-border-width-sm) solid var(--arc-color-border-blue-subtle); 3826 } 3827 3828 &:where([variant=critical]) { 3829 ${ae}: var(--arc-color-fg-primary); 3830 ${Aa}: var(--arc-color-fg-critical-mid); 3831 ${ie}: var(--arc-color-bg-critical-muted); 3832 ${va}: var(--arc-border-width-sm) solid var(--arc-color-border-critical-subtle); 3833 } 3834
3835 &:where([variant=info]) { 3836 ${ae}: var(--arc-color-fg-primary); 3837 ${Aa}: var(--arc-color-fg-info-mid); 3838 ${ie}: var(--arc-color-bg-info-muted); 3839 ${va}: var(--arc-border-width-sm) solid var(--arc-color-border-info-subtle); 3840 } 3841 3842 &:where([variant=neutral]) { 3843 ${ae}: var(--arc-color-fg-secondary); 3844 ${Aa}: var(--arc-color-fg-secondary); 3845 ${ie}: var(--arc-color-alpha-muted); 3846 ${va}: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 3847 } 3848 3849 &:where([variant=success]) { 3850 ${ae}: var(--arc-color-fg-primary); 3851 ${Aa}: var(--arc-color-fg-success-mid); 3852 ${ie}: var(--arc-color-bg-success-muted); 3853 ${va}: var(--arc-border-width-sm) solid var(--arc-color-border-success-subtle); 3854 } 3855 3856 &:where([variant=warning]) { 3857 ${ae}: var(--arc-color-fg-primary); 3858 ${Aa}: var(--arc-color-fg-warning-mid); 3859 ${ie}: var(--arc-color-bg-warning-muted); 3860 ${va}: var(--arc-border-width-sm) solid var(--arc-color-border-warning-subtle); 3861 } 3862`,Lg=s` 3863 &:where([variant=ai]) { 3864 ${ae}: var(--arc-color-fg-on-stark); 3865 /* Note: uses components-specific gradient style from: bannerStyles import */ 3866 ${ie}: var(--arc-banner-gradient-ai-300); 3867 } 3868 3869 &:where([variant=announcement]) { 3870 ${ae}: var(--arc-color-fg-on-stark); 3871 ${ie}: var(--arc-color-bg-blue-stark); 3872 } 3873 3874 &:where([variant=critical]) { 3875 ${ae}: var(--arc-color-fg-on-stark); 3876 ${ie}: var(--arc-color-bg-critical-mid); 3877 } 3878 3879 &:where([variant=info]) { 3880 ${ae}: var(--arc-color-fg-on-stark); 3881 ${ie}: var(--arc-color-bg-info-stark); 3882 } 3883 3884 &:where([variant=neutral]) { 3885 ${ae}: var(--arc-color-fg-on-stark); 3886 ${ie}: var(--arc-color-bg-neutral-stark); 3887 } 3888 3889 &:where([variant=success]) { 3890 ${ae}: var(--arc-color-fg-on-stark); 3891 ${ie}: var(--arc-color-bg-success-stark); 3892 } 3893 3894 &:where([variant=warning]) { 3895 ${ae}: var(--arc-color-fg-on-mid); 3896 ${ie}: var(--arc-color-bg-warning-mid); 3897 } 3898`,Mg=s` 3899 ${yn}: 0.375em; 3900 ${yl}: column; 3901 ${xl}: 7em; 3902 ${ai}: 0.75em; 3903 ${Qt}: 0.75em; 3904 ${ti}: 0.75em; 3905 3906 /* INSET SETUP ---------------------------------------------------⢠*/ 3907 3908 &[layout=inset] { 3909 ${Pg} 3910 3911 ${Jt}: 0 0.75em 0 1em; 3912 ${Jc}: var(--arc-border-radius-lg); 3913 ${yn}: 0.125em; 3914 ${ri}: 0.0625em; 3915 ${Qt}: 0.625em; 3916 3917 ${Ua}: 5em; 3918 3919 &:where([density=comfortable]) { 3920 &:not(:has([arc-banner-actions], [arc-banner-dismiss]))) { 3921 ${Ua}: 4.75em; 3922 } 3923 &:has([arc-banner-heading]):not(:has([arc-banner-message])), 3924 &:has([arc-banner-message]):not(:has([arc-banner-heading])), 3925 &:not(:has([arc-banner-message], [arc-banner-heading])) { 3926 ${Ua}: 3.5em; 3927 ${ti}: 0.25em; 3928 3929 &:has([arc-banner-actions]) { 3930 ${Ua}: 3.75em; 3931 } 3932 } 3933 } 3934 3935 &[action-placement=bottom] { 3936 ${ei}: flex-start; 3937 3938 &[density=compact] { 3939 ${Jt}: 0 0.25em 0 0.5em; 3940 } 3941 } 3942 3943 &[density=compact]:where([action-placement=inline]) { 3944 line-height: normal; 3945 3946 [arc-banner-grid] { 3947 font-size: var(${pt}); 3948 } 3949 } 3950 } 3951 3952 /* BLEED SETUP ---------------------------------------------------⢠*/ 3953 3954 &[layout=bleed] { 3955 ${Lg} 3956 3957 ${Ua}: 4em; 3958 ${Jt}: 0 0.75em 0 1em; 3959 ${va}: none; 3960 ${Jc}: 0; 3961 ${yn}: 0.125em; 3962 ${Qt}: 1em; 3963 ${ei}: flex-end; 3964 ${ri}: 0.125em; 3965 3966 &[density=compact], 3967 &[alignment=center] { 3968 ${ft}: 1.125em; 3969 line-height: normal; 3970 3971 [arc-banner-grid] { 3972 font-size: var(${pt}); 3973 } 3974 } 3975 } 3976 3977 /* DENSITIES -----------------------------------------------------⢠*/ 3978 3979 &[density=comfortable] { 3980 ${ft}: 1em; 3981 ${pt}: 0.875em; 3982 } 3983 3984 &[density=compact] { 3985 ${Ua}: 2em; 3986 ${Jt}: 0 0.25em 0 0.5em; 3987 ${pt}: 0.75em; 3988 ${ai}: 0.5em; 3989 ${Qt}: 0.5em; 3990 3991 &[action-placement=inline] { 3992 ${ft}: 1em; 3993 } 3994 3995 &[action-placement=bottom] { 3996 ${ft}: 0.875em; 3997 } 3998 3999 [arc-banner-grid] { 4000 align-self: center; 4001 } 4002 } 4003 4004 /* Inter-component communication ⢠ArcIcon/ArcIconText/ArcLink ---⢠*/ 4005 4006 &[layout=inset] { 4007 &[density=compact]:where([action-placement=inline]) { 4008 --arc-icon-text-icon-color: var(--arc-banner-icon-color, var(${Aa})); 4009 --arc-icon-text-gap: 0.375em; 4010 } 4011 4012 [arc-banner-icon] { 4013 --arc-icon-color: var(--arc-banner-icon-color, var(${Aa})); 4014 } 4015 } 4016 4017 &[layout=bleed] { 4018 &:where([density=compact], [alignment=center]) { 4019 --arc-icon-text-gap: 0.375em; 4020 } 4021 4022 &[alignment=center] [arc-banner-grid] { 4023 --arc-icon-height: 100%; 4024 --arc-icon-max-height: 100%; 4025 --arc-icon-text-icon-size: var(${ft}); 4026 } 4027 } 4028 4029 &[density=compact] [arc-banner-body] { 4030 --arc-icon-height: 100%; 4031 --arc-icon-max-height: 100%; 4032 --arc-icon-text-icon-size: 1.125em; 4033 } 4034 4035`,Bg=s` 4036 &[layout=inset] { 4037 [arc-banner-grid] { 4038 margin-block: 0.75em; 4039 } 4040 4041 &[density=compact] { 4042 &[action-placement=bottom] { 4043 [arc-banner-grid] { 4044 margin-block: 0.25em 0.625em; 4045 } 4046 } 4047 4048 &:not([action-placement=bottom]) { 4049 [arc-banner-grid] { 4050 margin-block: 0.25em; 4051 line-height: normal; 4052 } 4053 4054 [arc-banner-icon], 4055 [arc-banner-body] { 4056 align-self: center; 4057 } 4058 } 4059 } 4060 4061 &[action-placement=bottom] { 4062 [arc-banner-actions] { grid-row: 2; }
4063 &:has([arc-banner-icon]) [arc-banner-actions] { grid-column: 2 / -1; } 4064 &:not(:has([arc-banner-icon])) [arc-banner-actions] { grid-column: 1 / -1; } 4065 } 4066 } 4067`,Og=s` 4068 &[layout=bleed] { 4069 &[density=compact] { 4070 [arc-banner-grid] { 4071 margin-block: 0.25em; 4072 } 4073 } 4074 4075 [arc-banner-grid] { 4076 margin-block: 0.5em; 4077 align-self: center; 4078 align-items: center; 4079 } 4080 4081 &[alignment=center] { 4082 [arc-banner-grid] { 4083 font-size: var(${pt}); 4084 place-items: center; 4085 line-height: normal; 4086 } 4087 } 4088 } 4089`,Dg=s` 4090 &:where([action-placement=inline]) { 4091 align-items: flex-start; 4092 4093 &[density=compact] { 4094 ${we}: 1fr auto auto; 4095 4096 &:not(:has([arc-banner-actions])):has([arc-banner-dismiss]), 4097 &:not(:has([arc-banner-dismiss])):has([arc-banner-actions]) { 4098 ${we}: 1fr auto; 4099 } 4100 } 4101 4102 &[density=comfortable] { 4103 ${we}: auto 1fr auto auto; 4104 4105 &:has([arc-banner-icon]):has([arc-banner-actions]):not(:has([arc-banner-dismiss])), 4106 &:has([arc-banner-icon]):has([arc-banner-dismiss]):not(:has([arc-banner-actions])) { 4107 ${we}: auto 1fr auto; 4108 } 4109 4110 &:not(:has([arc-banner-icon])):has([arc-banner-actions]):has([arc-banner-dismiss]) { 4111 ${we}: 1fr auto auto; 4112 } 4113 4114 &:has([arc-banner-icon]):not(:has([arc-banner-actions])):not(:has([arc-banner-dismiss])) { 4115 ${we}: auto 1fr; 4116 } 4117 &:not(:has([arc-banner-icon])):has([arc-banner-actions]):not(:has([arc-banner-dismiss])), 4118 &:not(:has([arc-banner-icon])):has([arc-banner-dismiss]):not(:has([arc-banner-actions])) { 4119 ${we}: 1fr auto; 4120 } 4121 } 4122 4123 &:not(:has([arc-banner-icon], [arc-banner-dismiss], [arc-banner-actions])) { 4124 ${we}: 1fr; 4125 } 4126 } 4127 4128 &:where([action-placement=bottom]) { 4129 ${we}: auto 1fr auto; 4130 4131 &:not(:has([arc-banner-icon])) { 4132 ${we}: 1fr auto; 4133 } 4134 4135 &:not(:has([arc-banner-dismiss])) { 4136 ${we}: auto 1fr; 4137 } 4138 4139 &:not(:has([arc-banner-icon])):not(:has([arc-banner-dismiss])) { 4140 ${we}: 1fr; 4141 } 4142 } 4143`,Ng=s` 4144 width: var(--arc-banner-width, 100%); 4145 max-width: 100%; 4146 border: var(--arc-banner-border, var(${va})); 4147 background: var(--arc-banner-background, var(${ie})); 4148 border-radius: var(--arc-banner-border-radius, var(${Jc})); 4149 padding: var(--arc-banner-padding, var(${Jt})); 4150 min-height: var(--arc-banner-min-height, var(${Ua}, auto)); 4151 font-size: var(--arc-banner-font-size, initial); 4152 line-height: var(--arc-line-height-loose); 4153 overflow: var(--arc-banner-overflow, unset); 4154 4155 &:not([hidden]) { 4156 display: flex; 4157 align-items: center; 4158 } 4159 4160 ${Dg} 4161 4162 [arc-banner-grid] { 4163 color: var(--arc-banner-color, var(${ae})); 4164 flex: 1; 4165 4166 display: grid; 4167 align-items: baseline; 4168 grid-template-columns: var(${we}); 4169 column-gap: var(${Qt}); 4170 row-gap: var(${ti}); 4171 } 4172 4173 [arc-banner-body] { 4174 color: var(--arc-banner-color, var(${ae})); 4175 flex: 1; 4176 min-width: var(--arc-banner-body-min-width, var(${xl})); 4177 4178 display: flex; 4179 flex-direction: var(${yl}); 4180 gap: var(${yn}); 4181 } 4182 4183 [arc-banner-icon] { 4184 font-size: var(${ft}); 4185 padding-inline: var(${ri}); 4186 } 4187 4188 [arc-banner-heading], 4189 [arc-banner-message] { 4190 flex: none; 4191 } 4192 4193 [arc-banner-heading], 4194 [arc-banner-message], 4195 [arc-banner-actions] { 4196 font-size: var(${pt}); 4197 margin: 0; 4198 } 4199 4200 [arc-banner-actions] { 4201 display: flex; 4202 flex-flow: row wrap; 4203 align-items: flex-start; 4204 justify-content: var(--arc-banner-action-justify, var(${ei})); 4205 gap: var(--arc-banner-action-gap, var(${ai})); 4206 } 4207 4208`,Fg=s` 4209@layer arc-components { 4210 ${_0} 4211 4212 [arc-banner] { 4213 /* CORE VARIABLES -----------------------------------------------⢠*/ 4214 ${Mg} 4215 4216 /* CORE STYLES --------------------------------------------------⢠*/ 4217 ${Ng} 4218 4219 /* INSET LAYOUT -------------------------------------------------⢠*/ 4220 ${Bg} 4221 4222 /* BLEED LAYOUT -------------------------------------------------⢠*/ 4223 ${Og} 4224 } 4225 4226} 4227`,Hg=["comfortable","compact"],Vg=["inset","bleed"],Ug=["inline","bottom"],Kg=["left","center"],Wg=[...sa],Gg=[..._r,"announcement"],qg=Jr(Gg,["ai","announcement","critical","info","neutral","success","warning"]),Sa={layout:"inset",variant:"neutral",density:"comfortable",actionPlacement:"inline",alignment:"left",showDismiss:!0},Yg=r=>r==="critical"||r==="warning"?"alert":"status",Zg=({children:r,id:e,icon:a,dismissProps:t,heading:o,density:n=Sa.density,layout:c=Sa.layout,actionPlacement:l=Sa.actionPlacement,alignment:d=Sa.alignment,actionSlot:h,showDismiss:g=Sa.showDismiss,message:f,variant:v=Sa.variant,onClose:b,...m})=>{const $=Ir(e,"arc-banner"),w=wc(a),_=d==="center",y=c==="bleed",C=c==="inset",S=n==="compact",I=l==="inline",j=!!w,D=C&&v==="ai"?"ai-200":void 0,z={variant:v,layout:c,density:n,alignment:d,"action-placement":l},k=()=>(0,i.jsx)(ir,{icon:w,gradient:D}),V=()=>(0,i.jsx)(i.Fragment,{children:!!h&&(0,i.jsx)("span",{"arc-banner-actions":"",children:h})}),U=()=>(0,i.jsx)("div",{"arc-banner-dismiss":"",children:(0,i.jsx)(Ar,{icon:"fa-regular fa-xmark-large",layout:"icon",variant:C||y&&v==="warning"?"common":"alpha",hierarchy:"tertiary",shape:"square","aria-label":"Dismiss",size:S?"sm":"md",...t,onClick:or=>{t?.onClick?.(or),b?.()}})}),Y=({showActions:or=!0})=>(0,i.jsx)("div",{"arc-banner-body":"",children:r||(0,i.jsxs)(re,{icon:(0,i.jsx)(k,{}),children:[!!o&&(0,i.jsx)("strong",{children:o})," ",f," ",or&&h]})}),W=()=>(0,i.jsxs)(i.Fragment,{children:[j&&(0,i.jsx)("span",{"arc-banner-icon":"",children:(0,i.jsx)(k,{})}),(0,i.jsx)("div",{"arc-banner-body":"",children:r||(0,i.jsxs)(i.Fragment,{children:[o&&(0,i.jsx)("strong",{"arc-banner-heading":"",children:o}),f&&(0,i.jsx)("span",{"arc-banner-message":"",children:f})]})})]});return(0,i.jsx)("div",{role:Yg(v??Sa.variant),...m,...z,"arc-banner":"",id:$,children:(0,i.jsxs)("div",{"arc-banner-grid":"",children:[_?(0,i.jsx)(Y,{}):(0,i.jsxs)(i.Fragment,{children:[S&&I?(0,i.jsx)(Y,{showActions:!1}):(0,i.jsx)(W,{}),(0,i.jsx)(V,{})]}),g&&(0,i.jsx)(U,{})]})})};lr("ArcBanner",Fg);const pa=s`--arcâ¢label`,ro=s`${pa}â¢cursor`,eo=s`${pa}â¢opacity`,Xg=s` 4228@layer arc-components { 4229 4230 [arc-label] { 4231 /* Inter-Component Communication -------------------------------⢠*/ 4232 /* also applies to nested ArcLabelContent */ 4233 ${eo}: var(--arc-label-opacity, unset); 4234 ${eo}â¢disabled: var(--arc-label-opacity-disabled, var(--arc-alpha-40)); 4235 4236 /* Internal STYLES ---------------------------------------------⢠*/ 4237 ${pa}â¢display: var(--arc-label-display, inline-flex); 4238 ${pa}â¢gap: var(--arc-label-gap, var(${p}â¢8)); 4239 ${pa}â¢alignâ¢items: var(--arc-label-align-items, baseline); 4240 4241 ${ro}: var(--arc-label-cursor, pointer); 4242 ${ro}â¢disabled: var(--arc-label-cursor-disabled, not-allowed); 4243 4244 &:has(:disabled) { 4245 ${ro}: var(${ro}â¢disabled); 4246 ${eo}: var(${eo}â¢disabled); 4247 } 4248 4249 &[data-layout=fill] { 4250 ${pa}â¢display: flex; 4251 } 4252 } 4253 4254 /* CORE STYLES ---------------------------------------------------⢠*/ 4255 [arc-label]:not([hidden]) { 4256 display: var(${pa}â¢display); 4257 align-items: var(${pa}â¢alignâ¢items); 4258 gap: var(${pa}â¢gap); 4259 cursor: var(${ro}); 4260 } 4261 4262} 4263`,Jg=ar(Oe,["hug","fill"]),za=({layout:r,...e})=>(0,i.jsx)("label",{...e,"arc-label":"","data-layout":r});lr("ArcLabel",Xg);const Qg=s` 4264@layer arc-components { 4265 4266 [arc-label-content] { 4267 opacity: var(--arc-label-opacity, var(${eo}, unset)); 4268 transition: var(--arc-label-transition, opacity 100ms ease-out); 4269 user-select: var(--arc-label-user-select, none); 4270 -webkit-user-select: var(--arc-label-user-select, none); 4271 } 4272 4273} 4274`,Ka=r=>(0,i.jsx)("span",{...r,"arc-label-content":""});lr("LabelContent",Qg);const rv={checkbox:"checkbox",radio:"radio",switch:"radio"},ao=({id:r,indeterminate:e,type:a,onChange:t,...o}
4274)=>{const n=a==="checkbox"&&!!e,c=(0,u.useRef)(null),l=Ir(r,`arc-${a}`),d=h=>g=>{if(!(g?.target instanceof HTMLInputElement))return;const f={checked:g?.target.checked,indeterminate:g?.target?.indeterminate,name:g?.target?.name,value:o?.value};h?.(f,g)};return(0,u.useEffect)(()=>{c.current?.type==="checkbox"&&(c.current.indeterminate=!!e)},[e]),(0,i.jsx)("input",{...o,id:l,ref:c,type:rv[a],"arc-input-type":a,"aria-disabled":o?.disabled||void 0,"data-is-disabled":o?.disabled||void 0,"data-is-checked":o?.checked||void 0,"data-is-indeterminate":n||void 0,onChange:d(t)})},ev=s` 4275@layer arc-components { 4276 4277 [arc-input-mask] { 4278 ${B}â¢borderâ¢width: var(--arc-border-width-sm); 4279 ${B}â¢border: var(${B}â¢borderâ¢width) solid var(${B}â¢borderâ¢color); 4280 4281 /* Inter-Component Communication ---------------------------------⢠*/ 4282 4283 /* for: ArcIcon */ 4284 --arc-icon-size: var(${B}â¢iconâ¢size); /* ArcIcon */ 4285 4286 /* STATES --------------------------------------------------------⢠*/ 4287 4288 &:has(:disabled) { 4289 ${B}â¢cursor: not-allowed; 4290 } 4291 4292 &:has(:focus:focus-visible) { 4293 ${B}â¢outline: var(${B}
4293â¢borderâ¢width) solid var(--arc-color-border-focus); 4294 } 4295 } 4296 4297 /* CORE STYLES -----------------------------------------------------⢠*/ 4298 4299 [arc-input-mask-wrapper] { 4300 align-self: normal; 4301 display: flex; 4302 align-items: center; 4303 justify-content: center; 4304 max-height: 1lh; 4305 } 4306 4307 [arc-input-mask] { 4308 position: relative; 4309 display: inline-flex; 4310 align-items: center; 4311 justify-content: center; 4312 width: var(${B}â¢width); 4313 height: var(${B}â¢height); 4314 opacity: var(${B}â¢opacity, var(--arc-alpha-100)); 4315 4316 color: var(${B}â¢color, transparent); 4317 background: var(${B}â¢background); 4318 border: var(${B}â¢border); 4319 border-radius: var(${B}â¢borderâ¢radius); 4320 translate: var(${B}â¢translate, unset); 4321 4322 outline: var(${B}â¢outline, none); 4323 outline-offset: var(${B}â¢borderâ¢width); 4324 4325 transition-duration: 100ms; 4326 transition-behavior: allow-discrete; 4327 transition-timing-function: ease-in-out; 4328 transition-property: 4329 opacity, 4330 background, 4331 color, 4332 border-color, 4333 outline; 4334 4335 [arc-input-type] { 4336 flex: none; 4337 outline: none; 4338 appearance: none; 4339 position: absolute; 4340 inset: calc(var(${B}â¢borderâ¢width) * -1); 4341 cursor: var(${B}â¢cursor, pointer); 4342 margin: 0; 4343 padding: 0; 4344 border: 0; 4345 z-index: var(${B}â¢zâ¢index, unset); 4346 } 4347 } 4348 4349} 4350`,xn=({type:r,...e})=>(0,i.jsx)("span",{"arc-input-mask-wrapper":"",children:(0,i.jsx)("span",{...e,"arc-input-mask":r})});lr("ArcBooleanInputMask",ev);const Vr=s`--arcâ¢checkbox`,av=s` 4351@layer arc-components { 4352 4353 [arc-checkbox] { 4354 /* SIZES -------------------------------------------------------⢠*/ 4355 &[data-size=inherit] { 4356 ${Vr}â¢fontâ¢size: 1em; 4357 ${Vr}â¢iconâ¢size: 0.625em; 4358 ${Vr}â¢size: 1.125em; 4359 ${Vr}â¢gap: 0.5em; 4360 } 4361 4362 &[data-size=md] { 4363 ${Vr}â¢fontâ¢size: var(${p}â¢14); 4364 ${Vr}â¢iconâ¢size: var(${p}â¢10); 4365 ${Vr}â¢size: var(${p}â¢18); 4366 ${Vr}â¢gap: var(${p}â¢8); 4367 } 4368 4369 &[data-size=sm] { 4370 ${Vr}â¢fontâ¢size: var(${p}â¢12); 4371 ${Vr}â¢iconâ¢size: var(${p}â¢10); 4372 ${Vr}â¢size: var(${p}â¢16); 4373 ${Vr}â¢gap: var(${p}â¢6); 4374 } 4375 4376 /* Inter-Component Communication -------------------------------⢠*/ 4377 /* for: ArcBooleanInputMask */ 4378 ${B}â¢borderâ¢radius: var(${p}â¢4); 4379 ${B}â¢size: var(${Vr}â¢size); 4380 ${B}â¢iconâ¢size: var(${Vr}â¢iconâ¢size); 4381 ${B}â¢width: var(${Vr}â¢size); 4382 ${B}â¢height: var(${Vr}â¢size); 4383 ${B}â¢translate: 0 var(${p}â¢1m);⢠4384 4385 /* for: ArcLabel */ 4386 --arc-label-gap: var(${Vr}â¢gap); 4387 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask 4388 to stay inline with the label text 4389 regardless of applied line-height */ 4390 } 4391 4392 /* CORE STYLES ---------------------------------------------------⢠*/ 4393 [arc-checkbox]:not([hidden]) { 4394 font-size: var(${Vr}â¢fontâ¢size); 4395 display: var(--arc-checkbox-display, inline-flex); 4396 min-height: 1lh; 4397 4398 /* UNCHECKED, NOT-DISABLED, +HOVER ⢠default state */ 4399 &:not(:has(:checked, :indeterminate)) { 4400 ${B}â¢color: transparent; 4401 ${B}â¢borderâ¢color: var(--arc-color-border-stark); 4402 ${B}â¢background: transparent; 4403 4404 &:hover { 4405 ${B}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 4406 ${B}â¢background: var(--arc-color-bg-theme-subtle); 4407 } 4408 4409 &:has(:disabled) { 4410 ${B}â¢borderâ¢color: var(--arc-color-border-disabled); 4411 ${B}â¢background: var(--arc-color-bg-disabled); 4412 } 4413 } 4414 4415 /* DISABLED */ 4416 &:has(:disabled) { 4417 color: var(--arc-color-fg-disabled); 4418 } 4419 4420 /* PRIMARY, +DISABLED */ 4421 &[data-variant=primary] { 4422 &:has(:checked, :indeterminate) { 4423 ${B}â¢color: var(--arc-color-fg-on-theme-heavy); 4424 ${B}â¢borderâ¢color: transparent; 4425 ${B}â¢background: var(--arc-color-bg-theme-heavy); 4426 4427 &:not(:has(:disabled)):hover { 4428 ${B}â¢color: var(--arc-color-fg-on-theme-stark); 4429 ${B}â¢background: var(--arc-color-bg-theme-stark); 4430 } 4431 4432 &:has(:disabled) { 4433 ${B}â¢color: var(--arc-color-fg-on-theme-mid); 4434 ${B}â¢background: var(--arc-color-bg-theme-mid); 4435 } 4436 } 4437 } 4438 4439 /* SECONDARY, +DISABLED */ 4440 &[data-variant=secondary] { 4441 &:has(:checked, :indeterminate) { 4442 ${B}â¢color: var(--arc-color-fg-theme-heavy); 4443 ${B}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 4444 ${B}â¢background: transparent; 4445 4446 &:not(:has(:disabled)):hover { 4447 ${B}â¢color: var(--arc-color-fg-theme-stark); 4448 ${B}â¢borderâ¢color: var(--arc-color-border-theme-stark); 4449 } 4450 4451 &:has(:disabled) { 4452 ${B}â¢color: var(--arc-color-fg-theme-subtle); 4453 ${B}â¢borderâ¢color: var(--arc-color-border-theme-mid); 4454 } 4455 } 4456 } 4457 } 4458 4459} 4460`,tv=ar(Oe,["hug","fill"]),ov=ar(oe,["inherit","md","sm"]),nv=ar(_r,["primary","secondary"]),wl=({children:r,label:e,layout:a,size:t="md",variant:o="primary",useMask:n=!0,...c})=>{const{className:l,title:d,...h}=c,g={className:l,title:d},f=r??e,v=(0,i.jsx)(ao,{...h,type:"checkbox"}),b=n&&(0,i.jsxs)(xn,{type:"checkbox",children:[v,(0,i.jsx)(ir,{icon:h?.indeterminate?"fa-solid fa-minus arc-fw":"fa-solid fa-check arc-fw"})]}),m=!!f&&(0,i.jsxs)(za,{layout:a,children:[b||v,(0,i.jsx)(Ka,{children:f})]});return(0,i.jsx)("span",{...g,"arc-checkbox":"","data-size":t,"data-variant":
4460o,children:m||b||v})};lr("ArcCheckbox",av);const Te=s`--arcâ¢cb`,zr=s`${Te}â¢o`,je=s`${zr}â¢border`,oi=s`${zr}â¢icon`,ni=s`${zr}â¢text`,cv=s` 4461@layer arc-components { 4462 4463 [arc-checkbox-bar] { 4464 ${Te}â¢fontâ¢size: var(${p}â¢14); 4465 ${Te}â¢borderâ¢radius: var(${p}â¢6); 4466 ${Te}â¢background: var(--arc-color-alpha-black-0); 4467 ${Te}â¢padding: 0px; 4468 ${Te}â¢gap: var(${p}â¢2); 4469 4470 ${zr}â¢color: var(--arc-color-fg-secondary); 4471 ${zr}â¢background: var(--arc-color-alpha-white-0); 4472 4473 ${je}â¢color: var(--arc-color-alpha-black-0); 4474 ${je}â¢width: var(${p}â¢1); 4475 ${je}â¢radius: var(${p}â¢6); /* bar-radius minus bar-padding */ 4476 4477 /* SIZES -------------------------------------------------------- */ 4478 &[data-size=lg] { /* @default */ 4479 ${zr}â¢size: var(${p}â¢40); 4480 ${zr}â¢lineâ¢height: var(${p}â¢38); /* ⢠-2px to account for border-width (top/bottom) */ 4481 ${oi}â¢padding: var(${p}â¢8); 4482 ${ni}â¢padding: var(${p}â¢12); 4483 } 4484 4485 &[data-size=md] { 4486 ${zr}â¢size: var(${p}â¢32); 4487 ${zr}â¢lineâ¢height: var(${p}â¢30); /* ⢠-2px to account for border-width (top/bottom) */ 4488 ${oi}â¢padding: var(${p}â¢6); 4489 ${ni}â¢padding: var(${p}â¢8); 4490 } 4491 4492 /* Inter-Component Communication -------------------------------⢠*/ 4493 --arc-label-align-items: stretch; /* control ArcLabel's vertical footprint; 4494 allows long label text to wrap 4495 without compromising option's 4496 visual border */ 4497 4498 /* LAYOUTS ------------------------------------------------------ */ 4499 &[data-layout=hug] { /* @default */ 4500 ${Te}â¢display: inline-flex; 4501 } 4502 4503 &[data-layout=fill] { 4504 ${Te}â¢display: flex; 4505 } 4506 } 4507 4508 /* STATES --------------------------------------------------------- */ 4509 [arc-checkbox-bar-option] { 4510 &:not(:has(:disabled, :checked)) { 4511 &:hover { 4512 ${zr}â¢color: var(--arc-color-fg-on-hover-default); 4513 ${zr}â¢background: var(--arc-color-bg-hover-default); 4514 ${je}â¢color: var(--arc-color-alpha-black-0); 4515 } 4516 } 4517 4518 &:has(:checked) { 4519 ${zr}â¢color: var(--arc-color-fg-primary); 4520 ${zr}â¢background: var(--arc-color-bg-secondary); 4521 ${je}â¢color: var(--arc-color-alpha-black-0); 4522 ${zr}â¢fontâ¢weight: var(--arc-font-weight-500); 4523 } 4524 4525 &:has(:disabled) { 4526 ${zr}â¢color: var(--arc-color-fg-disabled); 4527 } 4528 4529 &:has(:focus-within:focus-visible) { 4530 ${zr}â¢outline: var(${je}â¢width) solid var(--arc-color-border-focus); 4531 } 4532 } 4533 4534 /* CORE STYLES ---------------------------------------------------- */ 4535 [arc-checkbox-bar-option] { 4536 flex: 1 1 auto; 4537 display: flex; 4538 position: relative; 4539 } 4540 4541 [arc-checkbox-bar]:not([hidden]) { 4542 font-size: var(--arc-checkbox-bar-font-size, var(${Te}â¢fontâ¢size)); 4543 display: var(${Te}â¢display); 4544 gap: var(${Te}â¢gap); 4545 background: var(${Te}â¢background); 4546 border-radius: var(${je}â¢radius); 4547 padding: 0; 4548 margin: 0; 4549 4550 [arc-checkbox] { 4551 flex: 1; 4552 display: flex; 4553 justify-content: center; 4554 border-radius: var(${je}â¢radius); 4555 outline: var(${zr}â¢outline, none); 4556 outline-offset: var(${je}â¢width); 4557 } 4558 4559 /* INPUT ELEMENT -----------------------------------------------⢠*/ 4560 [arc-input-type=checkbox] { 4561 position: absolute; 4562 appearance: none; 4563 pointer-events: none; 4564 opacity: 0; 4565 } 4566 4567 /* Inter-Component Communication -------------------------------⢠*/ 4568 [arc-label] { 4569 flex: 1; 4570 line-height: var(${zr}â¢lineâ¢height); 4571 overflow: hidden; 4572 } 4573 4574 [arc-label-content] { 4575 flex: 1; 4576 display: flex; 4577 align-items: safe center; 4578 justify-content: center; 4579 4580 height: var(${zr}â¢size); 4581 min-width: var(${zr}â¢size); 4582 4583 border-radius: var(${je}â¢radius); 4584 border: var(${je}â¢width) solid var(${je}â¢color); 4585 background: var(${zr}â¢background); 4586 color: var(${zr}â¢color); 4587 font-weight: var(${zr}â¢fontâ¢weight, unset); 4588 4589 transition-duration: 200ms; 4590 transition-timing-function: ease-out; 4591 transition-property: 4592 border, 4593 background, 4594 color, 4595 font-weight; 4596 4597 &:has([data-element=text]) { 4598 padding: 0 var(${ni}â¢padding); 4599 } 4600 4601 &:not(:has([data-element=text])) { 4602 padding: 0 var(${oi}â¢padding); 4603 } 4604 } 4605 4606 [arc-icon-text] [data-element] { 4607 min-width: min-content; 4608 overflow: hidden; 4609 overflow-wrap: break-word; 4610 } 4611 } 4612 4613}
4614`,iv=ar(Oe,["hug","fill"]),sv=ar(oe,["lg","md"]),lv=({children:r,label:e,icon:a,...t})=>{const o=r||(0,i.jsx)(re,{icon:a,text:e});return(0,i.jsx)("li",{"arc-checkbox-bar-option":"","data-is-checked":t?.checked||void 0,children:(0,i.jsx)(wl,{...t,label:o,layout:"fill",useMask:!1})})},dv=({children:r,size:e="lg",layout:a="hug",...t})=>(0,i.jsx)("ul",{...t,"arc-checkbox-bar":"","data-size":e,"data-layout":a,role:"group",children:r});lr("ArcCheckboxBar",cv);const uv=["normal","simple","add"],hv=["swatch","color-stop","thumbnail"],gv=["standalone","embedded"],Cl=["color-field","eye-dropper","hue-slider","alpha-slider","alpha-input","hex-input","palettes"],Al=["eye-dropper","alpha-slider","hex-input","palettes"],vv=1e-10,ci=1e-6,kn=1e-4,J=(r,e,a)=>Math.min(a,Math.max(e,r)),wn=(r,e)=>{const a=10**e;return Math.round(r*a)/a},Sl=(r,e=ci)=>Math.abs(r)<e?0:Math.abs(1-r)<e?1:r,to=r=>parseInt(r,16),Zr=r=>J(wn(r,0),0,255),zl=r=>wn((r%360+360)%360,2),El=(r,e)=>Sl(wn(J(r,0,1),e)),We=r=>{const e=(r.h%360+360)%360,a=J(r.s,0,1),t=J(r.v,0,1),o=J(r.a,0,1),n=t*a,c=n*(1-Math.abs(e/60%2-1)),l=t-n;let d=0,h=0,g=0;return e<60?[d,h,g]=[n,c,0]:e<120?[d,h,g]=[c,n,0]:e<180?[d,h,g]=[0,n,c]:e<240?[d,h,g]=[0,c,n]:e<300?[d,h,g]=[c,0,n]:[d,h,g]=[n,0,c],{r:(d+l)*255,g:(h+l)*255,b:(g+l)*255,a:o}},oo=(r,e)=>{const a=J(r.r,0,255)/255,t=J(r.g,0,255)/255,o=J(r.b,0,255)/255,n=Math.max(a,t,o),c=Math.min(a,t,o),l=n-c,d=n===0?0:l/n,h=n;let g=e??0;return l>vv?(n===a?g=60*((t-o)/l%6):n===t?g=60*((o-a)/l+2):g=60*((a-t)/l+4),g<0&&(g+=360)):g=(g%360+360)%360,{h:g,s:d,v:h,a:J(r.a,0,1)}},_l=r=>{const e=(r.h%360+360)%360,{s:a}=r,{l:t}=r,o=(1-Math.abs(2*t-1))*a,n=o*(1-Math.abs(e/60%2-1)),c=t-o/2;let l=0,d=0,h=0;return e<60?[l,d,h]=[o,n,0]:e<120?[l,d,h]=[n,o,0]:e<180?[l,d,h]=[0,o,n]:e<240?[l,d,h]=[0,n,o]:e<300?[l,d,h]=[n,0,o]:[l,d,h]=[o,0,n],{r:(l+c)*255,g:(d+c)*255,b:(h+c)*255,a:r.a}},Il=r=>{const e=r.r/255,a=r.g/255,t=r.b/255,o=Math.max(e,a,t),n=Math.min(e,a,t),c=o-n;let l=0;c!==0&&(o===e?l=60*((a-t)/c%6):o===a?l=60*((t-e)/c+2):l=60*((e-a)/c+4)),l<0&&(l+=360);const d=(o+n)/2,h=c===0?0:c/(1-Math.abs(2*d-1));return{h:l,s:h,l:d,a:r.a}},Tl=r=>{const e=Wa(r.r),a=Wa(r.g),t=Wa(r.b),o=.4122214708*e+.5363325363*a+.0514459929*t,n=.2119034982*e+.6806995451*a+.1073969566*t,c=.0883024619*e+.2817188376*a+.6299787005*t,l=Math.cbrt(o),d=Math.cbrt(n),h=Math.cbrt(c),g=.2104542553*l+.793617785*d-.0040720468*h,f=1.9779984951*l-2.428592205*d+.4505937099*h,v=.0259040371*l+.7827717662*d-.808675766*h,b=Math.sqrt(f*f+v*v);let m=Math.atan2(v,f)*180/Math.PI;return m<0&&(m+=360),{L:J(g,0,1),C:b,h:m,a:J(r.a,0,1)}},jl=r=>{const e=J(r.L,0,1),a=r.h*Math.PI/180,t=r.C*Math.cos(a),o=r.C*Math.sin(a),n=e+.3963377774*t+.2158037573*o,c=e-.1055613458*t-.0638541728*o,l=e-.0894841775*t-1.291485548*o,d=n*n*n,h=c*c*c,g=l*l*l,f=4.0767416621*d-3.3077115913*h+.2309699292*g,v=-1.2684380046*d+2.6097574011*h-.3413193965*g,b=-.0041960863*d-.7034186147*h+1.707614701*g,m=$=>{const w=$<=.0031308?$*12.92:1.055*$**.4166666666666667-.055;return Math.round(J(w,0,1)*255)};return{r:m(f),g:m(v),b:m(b),a:J(r.a,0,1)}},Wa=r=>{const e=Zr(r)/255;return e<=.04045?e/12.92:((e+.055)/1.055)**2.4},Rl=r=>{const e=Wa(r.r),a=Wa(r.g),t=Wa(r.b);return .2126*e+.7152*a+.0722*t},Pl=(r,e)=>{const a=r.a+e.a*(1-r.a);if(a<=0)return{r:0,g:0,b:0,a:0};const t=r.a/a,o=e.a*(1-r.a)/a;return{r:Zr(r.r*t+e.r*o),g:Zr(r.g*t+e.g*o),b:Zr(r.b*t+e.b*o),a:El(a,2)}},no=(r,e,a,t)=>{const o=t?t(r):r,n=t?t(e):e;return Math.abs(o-n)<=a},mt=(r,e,a)=>no(r,e,a,Math.round),ii=(r,e,a)=>no(r,e,a),Cn=(r,e)=>!e||!r?!1:mt(r.r,e.r,1)&&mt(r.g,e.g,1)&&mt(r.b,e.b,1)&&ii(r.a,e.a,1/255+ci),si=(r,e)=>!r||!e?!1:Zr(r.r)===Zr(e.r)&&Zr(r.g)===Zr(e.g)&&Zr(r.b)===Zr(e.b)&&Math.abs(r.a-e.a)<ci,li=(r,e)=>!e||!r?!1:mt(r.r,e.r,3)&&mt(r.g,e.g,3)&&mt(r.b,e.b,3)&&ii(r.a,e.a,.02),di=(r,e)=>no(r.h,e.h,kn)&&no(r.s,e.s,kn)&&no(r.v,e.v,kn)&&ii(r.a,e.a,kn),pv=/^[0-9a-f]+$/i,fv=500,bt=new Map,ui=r=>({...r}),mv=(r,e)=>{if(bt.size>=fv){const a=bt.keys().next().value;a&&bt.delete(a)}bt.set(r,e?ui(e):null)},bv=r=>r.split("").map(e=>e+e).join(""),Ll=r=>{const e=r.trim().toLowerCase().replace(/^#/,"");if(![3,4,6,8].includes(e.length))return null;const a=e.length<=4?bv(e):e;if(!pv.test(a))return null;
4614const t=to(a.slice(0,2)),o=to(a.slice(2,4)),n=to(a.slice(4,6)),c=a.length===8?to(a.slice(6,8))/255:1;return[t,o,n,c].some(l=>Number.isNaN(l))?null:{r:t,g:o,b:n,a:J(c,0,1)}},ra=r=>{const e=Number(r.trim());return Number.isFinite(e)?e:null},hi=r=>{const e=r.trim();if(e.endsWith("%")){const t=ra(e.slice(0,-1));return t==null?null:J(t/100*255,0,255)}const a=ra(e);return a==null?null:J(a,0,255)},co=r=>{const e=r.trim();if(e.endsWith("%")){const t=ra(e.slice(0,-1));return t==null?null:J(t/100,0,1)}const a=ra(e);return a==null?null:J(a,0,1)},gi=(r,e)=>{const t=r.trim().toLowerCase().match(e);if(!t)return null;const o=t[1].trim(),[n,c]=o.split("/").map(h=>h.trim()),l=n.includes(",")?n.split(",").map(h=>h.trim()):n.split(/\s+/).filter(Boolean),d=c&&c.length?c:null;return{body:o,channels:l,alphaPart:d}},$v=r=>{const e=gi(r,/^rgba?\((.*)\)$/);if(!e)return null;const{body:a,channels:t,alphaPart:o}=e;if(t.length!==3)return null;const n=hi(t[0]),c=hi(t[1]),l=hi(t[2]);if(n==null||c==null||l==null)return null;let d=1;if(o){const h=co(o);if(h==null)return null;d=h}else{const h=a.includes(",")?a.split(",").map(g=>g.trim()):null;if(h&&h.length===4){const g=co(h[3]);if(g==null)return null;d=g}}return{r:n,g:c,b:l,a:d}},yv=r=>{const e=gi(r,/^hsla?\((.*)\)$/);if(!e)return null;const{body:a,channels:t,alphaPart:o}=e;if(t.length!==3)return null;const n=f=>Number(f.replace("deg","").trim()),c=f=>{if(!f.endsWith("%"))return null;const v=ra(f.slice(0,-1));return v==null?null:v/100},l=n(t[0]),d=c(t[1]),h=c(t[2]);if(!Number.isFinite(l)||d==null||h==null)return null;let g=1;if(o){const f=co(o);if(f==null)return null;g=f}else{const f=a.includes(",")?a.split(",").map(v=>v.trim()):null;if(f&&f.length===4){const v=co(f[3]);if(v==null)return null;g=v}}return _l({h:l,s:d,l:h,a:g})},xv=r=>{const e=gi(r,/^oklch\((.*)\)$/);if(!e)return null;const{channels:a,alphaPart:t}=e;if(a.length!==3)return null;const o=g=>{const f=g.trim();if(f.endsWith("%")){const b=ra(f.slice(0,-1));
4614return b!=null?J(b/100,0,1):null}const v=ra(f);return v!=null?J(v,0,1):null},n=g=>{const f=g.trim();if(f.endsWith("%")){const b=ra(f.slice(0,-1));return b!=null&&b>=0?b/100*.4:null}const v=ra(f);return v!=null&&v>=0?v:null},c=o(a[0]),l=n(a[1]),d=ra(a[2].trim());if(c==null||l==null||d==null||!Number.isFinite(d))return null;let h=1;if(t){const g=co(t);if(g==null)return null;h=g}return jl({L:c,C:l,h:d,a:h})},Tr=r=>{if(!r||typeof r!="string")return null;const e=r.toLowerCase().trim();if(bt.has(e)){const t=bt.get(e);return t?ui(t):null}let a=null;return e.startsWith("#")?a=Ll(e):e.startsWith("rgb")?a=$v(e):e.startsWith("hsl")?a=yv(e):e.startsWith("oklch")&&(a=xv(e)),mv(e,a),a?ui(a):null},Ml=r=>{if(!r||typeof r!="string")return!1;const e=r.trim().toLowerCase();return/^#?[0-9A-F-a-f]{3,4}$/.test(e)||/^#?[0-9A-F-a-f]{6}([0-9A-F-a-f]{2})?$/.test(e)},Bl=r=>{if(!r||typeof r!="object")return!1;const e=r;return typeof e.r=="number"&&typeof e.g=="number"&&typeof e.b=="number"&&typeof e.a=="number"},Ol=r=>{if(!r||typeof r!="object")return!1;const e=r;return typeof e.h=="number"&&typeof e.s=="number"&&typeof e.v=="number"&&typeof e.a=="number"},$t=r=>String(Math.round(J(r,0,1)*100)),Dl=r=>{const e=r.trim();if(!e)return null;if(e.endsWith("%")){const t=Number(e.slice(0,-1).trim());return Number.isFinite(t)?J(t/100,0,1):null}if(e.startsWith(".")||e.includes(".")){const t=Number(e);return Number.isFinite(t)?J(t,0,1):null}const a=Number(e);return Number.isFinite(a)?J(a/100,0,1):null},An=r=>J(Number(r.toFixed(2)),0,1).toString(),Re=(r,e=!1)=>{const a=l=>J(Math.round(l),0,255).toString(16).padStart(2,"0"),t=a(r.r),o=a(r.g),n=a(r.b),c=a(J(r.a,0,1)*255);return e?`#${t}${o}${n}${c}`:`#${t}${o}${n}`},vi=r=>{const e=Il(r),a=Math.round(e.h),t=Math.round(e.s*100),o=Math.round(e.l*100);return`hsl(${a} ${t}% ${o}% / ${An(J(e.a,0,1))})`},Ga=r=>{const e=J(Math.round(r.r),0,255),a=J(Math.round(r.g),0,255),t=J(Math.round(r.b),0,255),o=J(r.a,0,1);return o<1?`rgb(${e} ${a} ${t} / ${An(o)})`:`rgb(${e} ${a} ${t})`},pi=r=>{const e=Tl(r),a=Math.round(e.L*1e3)/10,t=Math.round(e.C/.4*1e3)/10,o=Math.round(e.h),n=J(e.a,0,1);return n<1?`oklch(${a}% ${t}% ${o} / ${An(n)})`:`oklch(${a}% ${t}% ${o})`},Nl={auto:r=>r.a<1?Ga(r):Re({...r,a:1},!1),hex:r=>Re({...r,a:1},!1),hexa:r=>Re(r,!0),rgb:r=>Ga(r),hsl:r=>vi(r),oklch:r=>pi(r)},kv=(r,e)=>(Nl[r]??Nl.hex)(e),Ce=r=>typeof r=="string"?r:r.color,Sn=(r,e)=>typeof r!="string"&&r.name?r.name:e??void 0,Fl=r=>{const e=Ce(r),a=Tr(e),t=!!a&&a.a<1&&a.a>.01,o=!!a&&a.a===0;return{cssColor:e,rgba:a,isTranslucent:t,isTransparent:o,opaqueHex:a?Re({...a,a:1},!1):null}},zn=(r,e)=>{if(Ol(r))return r;const a=(Bl(r)?r:null)??Tr(r)??Tr(e)??{r:0,g:0,b:0,a:1};return oo(a)},qa=(r,e)=>{const a=e?.fallbackHex??"#000000",t=e?.format??"hex",o=zn(r,a),n={h:(o.h%360+360)%360,s:J(o.s,0,1),v:J(o.v,0,1),a:J(o.a,0,1)},c=We(n),l={r:Zr(c.r),g:Zr(c.g),b:Zr(c.b),a:n.a},d=kv(t,l);let h,g,f,v,b;const m=l.a<1?"rgb":"hex",$=l.a<1?Ga(l):Re({...l,a:1},!1);return{format:t,value:d,alpha:l.a,autoFormat:m,autoValue:$,hsv:n,rgba:l,get hex(){return h??=Re({...l,a:1},!1)},get hexa(){return g??=Re(l,!0)},get rgb(){return f??=Ga(l)},get hsl(){return v??=vi(l)},get oklch(){return b??=pi(l)}}},Hl=(r,e)=>({...qa(r.hsv,{format:e}),name:r.name}),Vl=(r,e)=>({color:Ce(r),name:Sn(r,e)}),Ul=r=>({color:`#${`00${Math.floor(Math.random()*16777216).toString(16)}`.slice(-6)}`,name:r}),yt=r=>Ce(r).trim().toLowerCase(),En=(r,e)=>{if(yt(r)===yt(e))return!0;const a=Tr(Ce(r)),t=Tr(Ce(e));return!!a&&!!t&&Cn(a,t)},fi=(r,e,a)=>{const t=a?.skipIndex;return r.some((o,n)=>n!==t?En(o,e):!1)},wv=r=>{let e=null;try{e=r?document.documentElement?.querySelector?.(r):document.documentElement}catch{return null}if(e==null)return null;const a=window.getComputedStyle(e);return Tr(a?.backgroundColor)},mi=(r,e)=>{const a=Tr(Ce(r));if(!a)return e?.useScheme?"auto":"inherit";const{darkColor:t,lightColor:o,contrastBias:n,bgColor:c,bgElement:l}=e??{},d=e?.useScheme?"light":t??"#000000",h=e?.useScheme?"dark":o??"#ffffff",g=J(n??-4,-7,7);let f=a;if(a.a<1){const $=Tr(c??""),w=$?null:wv(l);f=Pl(a,$??w??{r:255,g:255,b:255,a:1})}const v=Rl(f),b=(v+.05)/.05,m=1.05/(v+.05);return b+g>=m?d:h},bi=r=>r==null?null:{comparisonKey:yt(r),selectedRgba:Tr(Ce(r))},Kl=(r,e)=>{if(!e)return!1;if(yt(r)===e.comparisonKey)return!0;
4614if(!e.selectedRgba)return!1;const a=Tr(Ce(r));return!!a&&Cn(a,e.selectedRgba)},Cv=s`--arcâ¢buttonâ¢bar`,io=s`${Cv}â¢axis`,Av=s` 4615@layer arc-components { 4616 4617 [arc-button-bar=horizontal] { 4618 ${io}: row; 4619 4620 &[is-flipped] { 4621 ${io}: row-reverse; 4622 } 4623 } 4624 4625 [arc-button-bar=vertical] { 4626 ${io}: column; 4627 4628 &[is-flipped] { 4629 ${io}: column-reverse; 4630 } 4631 } 4632 4633 [arc-button-bar] { 4634 flex: var(--arc-button-bar-flex, 1); 4635 display: var(--arc-button-bar-display, flex); 4636 flex-direction: var(--arc-button-bar-flex-direction, var(${io})); 4637 align-items: var(--arc-button-bar-align-items, center); 4638 justify-content: var(--arc-button-bar-justify-content, flex-end); 4639 gap: var(--arc-button-bar-gap, var(${E}â¢8)); 4640 padding: var(--arc-button-bar-padding, 0); 4641 margin: 0; 4642 } 4643 4644} 4645`,_n=({children:r,...e})=>{const{Element:a="menu",orientation:t="horizontal",isFlipped:o=!1,...n}=e;return(0,i.jsx)(a,{...n,"arc-button-bar":t,"is-flipped":o?"":void 0,role:n.role??"group",children:r})};lr("ArcButtonBar",Av);const Sv=({activeColor:r})=>{const[e,a]=(0,u.useState)(r),t=r!=null,o=t?r:e;(0,u.useEffect)(()=>{r!=null&&a(r)},[r]);const n=(0,u.useCallback)(c=>{t||a(c)},[t]);return{isSelectionControlled:t,activeSelectedColor:o,setUncontrolledSelectedColor:a,selectColor:n}},Wl=(r,e)=>fi(r,e)?r:[...r,e],Gl=(r,e)=>{const a=Wl(r.colors??[],e);return a===r.colors?r:{...r,colors:a}},ql=(r,e)=>{const a=r.colors??[],t=a.filter(o=>!En(o,e));return t.length===a.length?r:{...r,colors:t}},Yl=(r,e,a)=>r.map(t=>t.id===e.id?Gl(t,a):t),Zl=(r,e,a)=>r.map(t=>t.id===e.id?ql(t,a):t),zv=(r,e,a)=>{if(Array.isArray(r)){if(a===void 0)throw new TypeError("ArcColorPalette.addColor: pass (palettes, palette, color) when the first argument is an array.");return Yl(r,e,a)}return Gl(r,e)},Ev=(r,e,a)=>{if(Array.isArray(r)){if(a===void 0)throw new TypeError("ArcColorPalette.removeColor: pass (palettes, palette, color) when the first argument is an array.");return Zl(r,e,a)}return ql(r,e)},_v=(r,e,a)=>{const t=r.find(o=>o.id===e);return t?Yl(r,t,a):r},Iv=(r,e,a)=>{const t=r.find(o=>o.id===e);return t?Zl(r,t,a):r},Tv=({palette:r,isSelectionControlled:e,onAddColor:a,emitColorChange:t,setLocalColors:o,setUncontrolledSelectedColor:n,initialColorValue:c,shouldOpenPopover:l=!0,notifyAddColorToggle:d,showPopover:h,hidePopover:g})=>{const f=(0,u.useCallback)(()=>c??Ul(),[c]),[v,b]=(0,u.useState)(null),[m,$]=(0,u.useState)(f),w=(0,u.useCallback)(()=>{b(null),$(f())},[f]),_=(0,u.useCallback)(z=>{o(k=>Wl(k,z))},[o]),y=(0,u.useCallback)((z,k)=>{a?.(r,z,k),t(z),e||n(z)},[t,e,a,r,n]),C=(0,u.useCallback)((z,k)=>{_(z),y(z,k??void 0)},[_,y]),S=(0,u.useCallback)(()=>{if(v!=null)return;const z=f();let k=-1;o(V=>(k=V.length,[...V,z])),b(k),$(z),d?.(!0),l&&h()},[v,f,d,o,l,h]),I=(0,u.useCallback)(z=>{v!=null&&$(z)},[v]),j=(0,u.useCallback)(z=>{z?.preventDefault(),z?.stopPropagation(),v!=null&&o(k=>k.filter((V,U)=>U!==v)),w(),d?.(!1),l&&g()},[v,g,d,w,o,l]),L=(0,u.useCallback)((z,k)=>{const U=(or=>typeof or?.preventDefault=="function")(z)?z:k;if(U?.preventDefault(),U?.stopPropagation(),v==null||m==null){d?.(!1),l&&g();return}const W=(r.colors??[]).map((or,N)=>N===v?m:or);o(W),y(m,U??void 0),w(),d?.(!1),l&&g()},[v,m,y,g,d,r.colors,w,o,l]),D=(0,u.useCallback)((z,k)=>{k?.preventDefault(),k?.stopPropagation(),C(z,k??void 0)},[C]);return{draftColorIndex:v,draftColorValue:m,startAddDraft:S,updateDraftColor:I,cancelDraftColor:j,saveDraftColor:L,saveCurrentColor:D}},Ae=s`--arc-popover`,xt=s`--arcâ¢colorâ¢picker`,Br=s`${xt}â¢thumb`,so=s`${xt}â¢tools`,ea=s`${xt}â¢dropper`,Xl=s` 4646 background-image: 4647 linear-gradient( 4648 to right, 4649 transparent, 4650 var(--jsâ¢hex, transparent) 4651 ), 4652 conic-gradient( 4653 var(--arc-color-alpha-subtle) 0 25%, 4654 var(--arc-color-alpha-muted) 0 50%, 4655 var(--arc-color-alpha-subtle) 0 75%, 4656 var(--arc-color-alpha-muted) 0 100% 4657 ); 4658 4659 background-size: 100% 100%, 1em 1em; 4660 background-position: 50% 50%, 50% 50%; 4661`,Jl={POPOVER:s` 4662 /* Inter-Component Communication: ArcPopover */ 4663 ${Ae}-width: 14em; /* 224px */ 4664 ${Ae}-min-width: 10.5em; /* 140px */ 4665 ${Ae}-max-width: 15.75em; /* 252px */ 4666 ${Ae}-line-height: normal;
4666 /* @note â allows elements to resolve to design-spec heights */ 4667 ${Ae}-outline-size: 0px; /* @note â default outline-size causes divider lines to not extend to the edges of the popover shell. */ 4668 ${Ae}-padding: 0; 4669 4670 ${Ae}-header-padding: 0.75em 1em; 4671 ${Ae}-header-background: var(--arc-color-bg-mono); 4672 ${Ae}-header-align-items: center; 4673 4674 ${Ae}-body-padding: 0; 4675 4676 ${Ae}-footer-padding: 1em; 4677 ${Ae}-footer-background: var(--arc-color-bg-mono); 4678 4679 4680 /* Inter-Component Communication: ArcButtonBar via ArcPopoverFooter */ 4681 [arc-popover-footer]:has([arc-button-bar]) { 4682 --arc-button-bar-justify-content: stretch; 4683 --arc-button-flex: 1; 4684 } 4685 4686 &:has([arc-color-picker=simple]) { 4687 ${Ae}-width: 12.25em; /* 196px */ 4688 } 4689 `,PICKER:s` 4690 ${Br}â¢shadow: 0 0 0 0.25em var(--arc-color-alpha-white-95), 0 0 0.375em 0.1875em var(--arc-color-alpha-black-30); 4691 ${Br}â¢size: 0.625em; 4692 ${Br}â¢transition: 200ms ease-out; 4693 4694 ${xt}â¢padding: 1em; 4695 &[is-inline] { ${xt}â¢padding: 0; } 4696 4697 &[arc-color-picker=simple] { 4698 ${ea}â¢alignâ¢self: end; 4699 ${so}â¢gap: 1em 0.5em; 4700 4701 [arc-color-slider] { 4702 grid-column: 1 / -1; 4703 } 4704 } 4705 4706 [arc-color-input=hex] { 4707 --arc-input-prefix-opacity: var(--arc-alpha-40); 4708 --arc-input-suffix-opacity: var(--arc-alpha-100); 4709 } 4710 4711 /* This font-size is intended for various scaling calculations. */ 4712 font-size: initial; 4713 position: relative; 4714 display: flex; 4715 flex-direction: column; 4716 z-index: 1; 4717 4718 -webkit-user-select: none; 4719 user-select: none; 4720 4721 /* Inter-Component Communication: ArcInput & ArcLabel ⢠font-size reset for input labels */ 4722 --arc-input-padding-inline: max(6px, 0.375em); 4723 `},jv=s` 4724 4725 [arc-color-field] { 4726 display: grid; 4727 gap: 0.5em; 4728 } 4729 4730 [arc-color-surface=field] { 4731 position: relative; 4732 width: 100%; 4733 aspect-ratio: 1 / 1; 4734 4735 -webkit-user-select: none; 4736 user-select: none; 4737 touch-action: none; 4738 cursor: pointer; 4739 4740 border-radius: var(--arc-border-radius-md); 4741 background: var(--arc-color-bg-mono); 4742 4743 &:focus:focus-visible { 4744 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4745 outline-offset: 0.25em; 4746 } 4747 4748 &::after { 4749 box-sizing: border-box; 4750 content: ''; 4751 position: absolute; 4752 top: 0; 4753 left: 0; 4754 width: 100%; 4755 height: 100%; 4756 border-radius: inherit; 4757 border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 4758 pointer-events: none; 4759 z-index: 2; 4760 } 4761 } 4762 4763 [arc-color-field-canvas] { 4764 position: absolute; 4765 inset: 0; 4766 width: 100%; 4767 height: 100%; 4768 display: block; 4769 border-radius: inherit; 4770 pointer-events: none; 4771 } 4772 4773 [arc-color-field-slice] { 4774 position: absolute; 4775 pointer-events: none; 4776 z-index: 3; 4777 border-radius: var(--arc-border-radius-pill); 4778 transition: left var(${Br}â¢transition), top var(${Br}â¢transition); 4779 } 4780 4781 [arc-color-field][sr-focus] [has-focus] { 4782 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4783 outline-offset: 0.25em; 4784 } 4785 4786 /* Saturation axis at current Value */ 4787 [arc-color-field-slice=saturation] { 4788 inset: calc(var(--jsâ¢v) * 100%) 0 auto 0; 4789 height: var(--arc-border-width-md); 4790 } 4791 4792 /* Value axis at current Saturation */ 4793 [arc-color-field-slice=value] { 4794 inset: 0 auto 0 calc(var(--jsâ¢s) * 100%); 4795 width: var(--arc-border-width-md); 4796 } 4797 4798 [arc-color-field-thumb] { 4799 position: absolute; 4800 left: calc(var(--jsâ¢s) * 100%); 4801 top: calc(var(--jsâ¢v) * 100%); 4802 transform: translate(-50%, -50%); 4803 width: var(${Br}â¢size); 4804 height: var(${Br}â¢size); 4805 border: 0; 4806 border-radius: var(--arc-border-radius-circle); 4807 box-shadow: var(${Br}â¢shadow); 4808 background: var(--jsâ¢rgb); 4809 z-index: 4; 4810 transition: 4811 background var(${Br}â¢transition), 4812 left var(${Br}â¢transition), 4813 top var(${Br}â¢transition); 4814 } 4815 4816 @media (prefers-reduced-motion: reduce) { 4817 [arc-color-field-thumb], 4818 [arc-color-field-slice] { 4819 transition: none; 4820 } 4821 } 4822 4823 [arc-color-field][is-interacting] { 4824 [arc-color-field-thumb], 4825 [arc-color-field-slice] { 4826 transition: none; 4827 } 4828 } 4829 4830 /* Visually hidden but usable (so SR users can access them) */ 4831 [arc-color-field-sr] { 4832 position: absolute; 4833 width: 1px; 4834 height: 1px; 4835 padding: 0; 4836 margin: -1px; 4837 overflow: hidden; 4838 clip: rect(0, 0, 0, 0); 4839 white-space: nowrap; 4840 border: 0; 4841 } 4842 4843 [arc-color-field-sr-slider] { 4844 display: block; 4845 } 4846 4847`,Rv=s` 4848 4849 [arc-color-slider] { 4850 display: grid; 4851 gap: 0.375em; 4852 4853 [arc-label] { 4854 font-size: 0.75em; 4855 } 4856 4857 [arc-color-surface] { 4858 position: relative; 4859 display: flex; 4860 border-radius: var(--arc-border-radius-pill); 4861 height: 0.875em; 4862 align-items: center; 4863 4864 &[arc-color-surface=hue] { 4865 ${Br}
4865â¢bg: var(--jsâ¢hue); 4866 4867 background-image: 4868 linear-gradient( 4869 to right, 4870 #f00 0%, 4871 #ff0 16.66%, 4872 #0f0 33.33%, 4873 #0ff 50%, 4874 #00f 66.66%, 4875 #f0f 83.33%, 4876 #f00 100% 4877 ); 4878 } 4879 4880 &[arc-color-surface=alpha] { 4881 ${Br}â¢bg: var(--jsâ¢rgb); 4882 ${Xl} 4883 } 4884 4885 &:has(input[type=range]:focus:focus-visible) { 4886 ::-webkit-slider-thumb { 4887 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4888 outline-offset: 0.4em; 4889 } 4890 4891 ::-moz-range-thumb { 4892 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4893 outline-offset: 0.4em; 4894 } 4895 } 4896 } 4897 4898 input[type=range] { 4899 width: 100%; 4900 height: 100%; 4901 margin: 0; 4902 padding: 0; 4903 background: transparent; 4904 appearance: none; 4905 outline: none; 4906 cursor: pointer; 4907 font: inherit; 4908 4909 /* Track */ 4910 &::-webkit-slider-runnable-track { display: flex; align-items: center; } 4911 &::-moz-range-track { display: flex; align-items: center; } 4912 4913 /* Thumb */ 4914 &::-webkit-slider-thumb { 4915 appearance: none; 4916 width: var(${Br}â¢size); 4917 height: var(${Br}â¢size); 4918 border: 0; 4919 border-radius: var(--arc-border-radius-circle); 4920 box-shadow: var(${Br}â¢shadow); 4921 background: var(${Br}â¢bg); 4922 } 4923 4924 &::-moz-range-thumb { 4925 appearance: none; 4926 width: var(${Br}â¢size); 4927 height: var(${Br}â¢size); 4928 border: 0; 4929 border-radius: var(--arc-border-radius-circle); 4930 box-shadow: var(${Br}â¢shadow); 4931 background: var(${Br}â¢bg); 4932 } 4933 } 4934 } 4935 4936`,Ql=s`3.75em`,Pv=s` 4937 4938 [arc-color-inputs] { 4939 display: grid; 4940 gap: 0.5em; 4941 grid-template-columns: 1fr ${Ql}; 4942 align-items: end; 4943 4944 &:not(:has([arc-color-input=hex])) { 4945 grid-template-columns: ${Ql} 1fr; 4946 } 4947 4948 [arc-color-input=alpha] { 4949 --arc-input-text-align: end; 4950 } 4951 4952 [arc-color-input=hex] { 4953 --arc-icon-color: var(--arc-color-fg-critical-mid); 4954 --arc-input-action-display: contents; 4955 --arc-button-min-width: none; 4956 --arc-button-max-width: 2.25em; 4957 } 4958 4959 ::-webkit-inner-spin-button { 4960 appearance: none; 4961 } 4962 4963 input[type=number] { 4964 appearance: textfield; 4965 } 4966 } 4967 4968`,Lv=s` 4969 4970 &[arc-color-picker=simple]:has([arc-color-palettes]) [arc-color-tools] { 4971 padding-top: 0; 4972 } 4973 4974 [arc-color-tools] { 4975 display: grid; 4976 gap: var(${so}â¢gap, 0.5em); 4977 grid-template-columns: var(${so}â¢columns, auto 1fr); 4978 } 4979 4980 [arc-color-tools=simple] {
4981 &:has([arc-color-input=hex]):not(:has([arc-color-eye-dropper])) { 4982 ${so}â¢columns: 1fr 2em; 4983 } 4984 } 4985 4986 :is([arc-color-field], [arc-color-inputs]) { 4987 grid-column: 1 / -1; 4988 } 4989 4990 [arc-color-eye-dropper] { 4991 align-self: var(${ea}â¢alignâ¢self, center); 4992 justify-self: var(${ea}â¢justifyâ¢self, center); 4993 } 4994 4995 [arc-color-sliders] { 4996 grid-column: 1 / -1; 4997 4998 display: grid; 4999 gap: 0.25em; 5000 grid-template-columns: auto; 5001 align-self: center; 5002 } 5003 5004 [arc-color-eye-dropper] + [arc-color-sliders] { 5005 grid-column: 2; 5006 } 5007 5008 /* Finding a good place for the eye dropper in some cases */ 5009 &:has([arc-color-input=hex]):not(:has([arc-color-input=alpha], [arc-color-sliders])), 5010 &:has([arc-color-input=alpha]):not(:has([arc-color-input=hex], [arc-color-sliders])) { 5011 ${ea}â¢alignâ¢self: end; 5012 ${ea}â¢justifyâ¢self: end; 5013 5014 &:has([arc-color-eye-dropper]) [arc-color-inputs] { display: contents; } 5015 5016 &:not(:has([arc-color-field])) { ${ea}â¢row: 1; } 5017 5018 &:not(:has([arc-color-input=hex])) { 5019 ${ea}â¢justifyâ¢self: start; 5020 ${so}â¢columns: 1fr auto; 5021 ${ea}â¢column: 1; 5022 } 5023 5024 [arc-color-eye-dropper] { 5025 grid-column: var(${ea}â¢column, 2); 5026 grid-row: var(${ea}â¢row, 2); 5027 } 5028 5029 [arc-color-sliders] { grid-column: 1 / -1; } 5030 } 5031 5032 ${jv} 5033 ${Rv} 5034 ${Pv} 5035 5036`,Mv=s` 5037@layer arc-components { 5038 5039 [arc-color-picker-wrapper] { 5040 ${Jl.POPOVER} 5041 } 5042 5043 [arc-color-picker] { 5044 ${Jl.PICKER} 5045 5046 [arc-color-picker-section] { 5047 padding: var(${xt}â¢padding); 5048 5049 &:has(+[arc-color-picker-section]) { padding-bottom: 1em; } 5050 +[arc-color-picker-section] { padding-top: 1em; } 5051 5052 &[has-divider=top] { border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); } 5053 &[has-divider=bottom] { border-bottom: var(--arc-border-width-sm) solid var(--arc-color-border-mid); } 5054 } 5055 5056 ${Lv} 5057 5058 [arc-color-palettes] { 5059 display: flex; 5060 flex-direction: column; 5061 gap: 1em; 5062 } 5063 5064 [arc-color-picker-section=footer] { 5065 position: sticky; 5066 bottom: 0; 5067 border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5068 background: var(--arc-color-bg-mono); 5069 z-index: 2; 5070 } 5071 5072 [arc-color-picker-button-bar] * { 5073 flex: 1; 5074 } 5075 } 5076 5077} 5078`,se=s`--arcâ¢colorâ¢chip`,Bv=s` 5079@layer arc-components { 5080 5081 [arc-color-chip=add-color] { 5082 ${se}â¢radius: var(--arc-border-radius-circle); 5083 ${se}â¢width: var(${p}â¢24); 5084 ${se}â¢height: var(${p}â¢24); 5085 } 5086 5087 [arc-color-chip=swatch] { 5088 ${se}â¢radius: var(--arc-border-radius-circle); 5089 ${se}â¢width: var(${p}â¢24); 5090 ${se}â¢height: var(${p}â¢24); 5091 } 5092 5093 [arc-color-chip=color-stop] { 5094 ${se}â¢radius: var(--arc-border-radius-md); 5095 ${se}â¢width: var(${p}â¢24); 5096 ${se}â¢height: var(${p}â¢24); 5097 } 5098 5099 [arc-color-chip=thumbnail] { 5100 ${se}â¢radius: var(--arc-border-radius-md); 5101 ${se}â¢width: var(${p}â¢28); 5102 ${se}â¢height: var(${p}â¢42); 5103 } 5104 5105 [arc-color-chip] { 5106 --arc-button-position: relative; 5107 --arc-button-background: var(--jsâ¢color); 5108 --arc-button-color: var(--jsâ¢fg, transparent); 5109 --arc-button-width: var(${se}â¢width); 5110 --arc-button-height: var(${se}â¢height); 5111 --arc-button-border-radius: var(${se}â¢radius); 5112 --arc-button-border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5113 --arc-button-outline-offset: var(--arc-border-width-sm); 5114 --arc-icon-size: var(${p}â¢10); 5115 5116 &[is-transparent] { 5117 --arc-button-background: unset; 5118 ${Xl} 5119 } 5120 5121 &[is-translucent] { 5122 --arc-button-background: 5123 var(--jsâ¢color) 5124 linear-gradient( 5125 to right, 5126 var(--jsâ¢hex), 5127 var(--jsâ¢hex) 50%, 5128 transparent 50%, 5129 transparent 5130 ) border-box; 5131 5132 &::after { 5133 content: ''; 5134 position: absolute; 5135 inset: 0 auto 0 50%; 5136 translate: -100% 0; 5137 width: var(--arc-border-width-sm); 5138 background: var(--arc-color-border-mid); 5139 pointer-events: none; 5140 z-index: 1; 5141 } 5142 } 5143 5144 &[is-selected] { 5145 --arc-button-border: var(--arc-border-width-sm) solid var(--arc-color-border-heavy
5145); 5146 --arc-button-box-shadow: 0 0 0 var(--arc-border-width-md) var(--arc-color-fg-on-mono-inverse) inset; 5147 } 5148 5149 &[is-draft] { 5150 --arc-button-outline: var(--arc-border-width-md) dotted color-mix(in srgb, transparent 35%, var(--arc-color-border-focus) 65%); 5151 } 5152 5153 &[is-control] { 5154 --arc-button-background: var(--arc-color-alpha-muted); 5155 --arc-button-color: inherit; 5156 } 5157 } 5158 5159} 5160`,rd=(0,u.memo)(({color:r,name:e,kind:a,isDraft:t,isSelected:o,contrastBias:n,contrastBgColor:c,canRemoveColor:l,icon:d,text:h,tooltip:g,onClick:f,style:v,...b})=>{const{cssColor:m,isTranslucent:$,isTransparent:w,opaqueHex:_}=(0,u.useMemo)(()=>Fl(r??""),[r]),y=Sn(r??"",e),C=h??y??m,S=(0,u.useMemo)(()=>mi(m,{contrastBias:n,bgColor:c}),[m,n,c]),[I,j]=(0,u.useState)(!1),[L,D]=(0,u.useState)(!1),[z,k]=(0,u.useState)(!1),[V,U]=(0,u.useState)(!1),[Y,W]=(0,u.useState)(!1);(0,u.useEffect)(()=>{const P=pr=>{(pr.metaKey||pr.key==="Meta")&&(j(!0),k(!0))},X=pr=>{const Cr=pr.metaKey;j(Cr),k(Cr)},vr=()=>{j(!1),k(!1)};return window.addEventListener("keydown",P),window.addEventListener("keyup",X),window.addEventListener("blur",vr),()=>{window.removeEventListener("keydown",P),window.removeEventListener("keyup",X),window.removeEventListener("blur",vr)}},[]);const N=a==="swatch"&&!!l&&(V&&I||(I||z)&&L),tr=N||Y,R=tr?"fa-regular fa-xmark":d??"fa-solid fa-check",F=tr?"Remove color":g??y??(Ml(m)?m.toUpperCase():m);(0,u.useEffect)(()=>{N&&W(!0)},[N]),(0,u.useEffect)(()=>{!N&&o&&!t&&W(!1)},[t,N,o]);const H=(0,u.useCallback)(P=>{const X=N||P.metaKey?"remove":"select",vr={...qa(m,{format:"auto",fallbackHex:m}),name:y};f?.({colorData:vr,action:X,source:a,shouldClosePicker:!1},P)},[N,f,m,y,a]),M=(0,u.useCallback)(P=>{P.preventDefault(),P.stopPropagation(),H(P)},[H]),rr=(0,u.useCallback)(P=>{P.metaKey&&(P.preventDefault(),P.stopPropagation(),H(P))},[H]),er=(0,u.useCallback)(P=>{const X=P.propertyName??"";!(X==="color"||X.includes("color"))||N||W(!1)},[N]),Z=(0,u.useCallback)(P=>{P.key!=="Enter"||!N||(P.preventDefault(),P.stopPropagation(),P.currentTarget.click())},[N]),hr=(0,u.useMemo)(()=>({...v??{},"--js\u2022hex":w?"transparent":$&&(_??m)||"","--js\u2022color":m,"--js\u2022fg":o&&!t||N?S:""}),[v,w,$,_,m,o,t,N,S]);return(0,i.jsx)(Ar,{...b,_isCustom:!0,"arc-color-chip":a,layout:"icon",tooltip:F,text:C,icon:R,"is-draft":t?"":void 0,"is-selected":!t&&o?"":void 0,"is-translucent":$?"":void 0,"is-transparent":w?"":void 0,style:hr,onClick:M,onContextMenu:rr,onMouseEnter:P=>{D(!0),k(P.metaKey)},onMouseMove:P=>{k(P.metaKey)},onMouseLeave:()=>{D(!1),k(!1),W(!1)},onFocus:()=>U(!0),onBlur:()=>{U(!1),W(!1)},onKeyDown:Z,onTransitionEnd:er})});rd.displayName="ArcColorSwatch";const $i=rd;$i.getColorData=qa,lr("ArcColorSwatch",Bv);const Ov=s` 5161@layer arc-components { 5162 5163 [arc-color-palette] { 5164 display: flex; 5165 flex-direction: column; 5166 gap: var(${E}â¢8); 5167 5168 [arc-color-palette-header] { 5169 display: flex; 5170 flex-direction: column; 5171 gap: var(${E}â¢4); 5172 font-size: var(${p}â¢12); 5173 5174 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 5175 small { opacity: 0.612; } 5176 } 5177 5178 [arc-color-palette-set] { 5179 display: flex; 5180 flex-wrap: wrap; 5181 gap: var(${E}â¢4); 5182 max-width: calc((var(${p}â¢24) + var(${E}â¢4)) * 7 + var(${E}â¢24)); 5183 } 5184 5185 [arc-color-palette-picker] { 5186 display: grid; 5187 gap: var(${E}â¢8); 5188 padding-top: var(${E}â¢8); 5189 border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5190 } 5191 5192 [arc-color-palette-inputs] { 5193 display: grid; 5194 gap: var(${E}â¢8); 5195 grid-template-columns: auto auto; 5196 align-items: end; 5197 } 5198 5199 [arc-color-palette-actions] { 5200 display: flex; 5201 justify-content: flex-end; 5202 gap: var(${E}â¢8); 5203 } 5204 5205 [arc-add-color] { 5206 --arc-icon-size: var(${p}â¢10); 5207 } 5208 } 5209 5210} 5211`,In=({children:r,id:e,heading:a,showHeading:t=!0,colors:o=[],activeColor:n,format:c=_a.format,canAddColor:l=!1,canRemoveColor:d=!1,contrastBgColor:h,addColorFlow:g="standalone",sharedSwatchProps:f,onSwatchClick:v,onAddColor:b,onRemoveColor:m,onColorChange:$,onAddColorToggle:w,..._})=>{const y=g==="embedded",C=Ir(void 0,"add-color-anchor"),S=Ir(void 0,"add-color-popover"),[I,j]=(0,u.useState)(o),[L,D]=(0,u.useState)(!1),{isSelectionControlled:z,activeSelectedColor:k,setUncontrolledSelectedColor:V,selectColor:U}=Sv({activeColor:n}),Y=(0,u.useMemo)(()=>bi(k),[k]),W=(0,u.useMemo)(()=>I.map(nr=>({normalized:yt(nr),rgba:Tr(Ce(nr))})),[I]),or=(0,u.useMemo)(()=>W.map(nr=>Y?nr.normalized===Y.comparisonKey?!0:!!Y.selectedRgba&&!!nr.rgba&&Cn(nr.rgba,Y.selectedRgba):!1),[W,Y]),N=(0,u.useMemo)(()=>or.some(Boolean),[or]),tr=!y&&N?void 0:k;(0,u.useEffect)(()=>{j(o)},[o]);const R=(0,u.useCallback)(nr=>{if(typeof nr=="object"&&nr!==null&&"hsv"in nr){$?.(nr);return}const Pr=Ce(nr),ue=Sn(nr),me=qa(Pr,{format:c});$?.({...me,name:ue})},[$,c]),F=(0,u.useCallback)(nr=>{D(nr),w?.(e,nr)},[e,w]),H=(0,u.useCallback)(()=>ga?.handlePopover?.(S,"show"),[S]),M=(0,u.useCallback)(()=>ga?.handlePopover?.(S,"hide"),[S]),rr=(0,u.useMemo)(()=>({id:e,heading:a,showHeading:t,colors:I,activeColor:n,format:c,canAddColor:l,canRemoveColor:d,c
5211ontrastBgColor:h,addColorFlow:g,sharedSwatchProps:f,onSwatchClick:v,onAddColor:b,onRemoveColor:m,onColorChange:$,onAddColorToggle:w}),[e,a,t,I,n,c,l,d,h,g,f,v,b,m,$,w]),{draftColorIndex:er,draftColorValue:Z,startAddDraft:hr,updateDraftColor:P,cancelDraftColor:X,saveDraftColor:vr,saveCurrentColor:pr}=Tv({palette:rr,isSelectionControlled:z,onAddColor:b,emitColorChange:R,setLocalColors:j,setUncontrolledSelectedColor:V,initialColorValue:tr,shouldOpenPopover:!y,notifyAddColorToggle:F,showPopover:H,hidePopover:M}),Cr=(0,u.useMemo)(()=>I.map((nr,Pr)=>er===Pr&&Z!=null?Z:nr),[er,Z,I]),Xr=(0,u.useMemo)(()=>{if(er==null||Z==null||Y==null||er<0||er>=or.length)return or;const nr=[...or];return nr[er]=Kl(Z,Y),nr},[or,er,Z,Y]),Be=(0,u.useMemo)(()=>bi(Z),[Z]),G=(0,u.useMemo)(()=>er==null||Be==null?!1:fi(I,Z,{skipIndex:er}),[er,Be,Z,I]),Rr=(0,u.useCallback)((nr,Pr)=>{if(!nr?.colorData)return;const ue={color:nr.colorData.value,name:nr.colorData.name};if(nr.action==="remove"&&d){j(me=>{const xa=me.filter(Qa=>!En(Qa,ue));return xa.length===me.length?me:xa}),m?.(rr,ue,Pr);return}U(ue),v?.({...nr,source:"swatch",shouldClosePicker:!1},Pr),R(nr.colorData)},[d,R,m,v,rr,U]),gr=(0,u.useCallback)(nr=>er===nr&&Z!=null,[er,Z]);(0,u.useEffect)(()=>{!y||er==null||k==null||P(k)},[k,er,y,P]);const Nr=(0,u.useCallback)(nr=>{const Pr=nr?.newState==="open";D(Pr),w?.(e,Pr)},[e,w]),de=(0,u.useCallback)(nr=>{const Pr=k??_a.color;pr(Pr,nr)},[k,pr]),Ye=(0,u.useCallback)(nr=>{nr.key!=="Escape"||!L||X(nr)},[X,L]),ia=!k||y&&!L&&N,Io=y&&L?"Cancel":y?"Add Current Color":"Add Color",To=y||!L;let Ze=de;return y||(Ze=L?X:hr),(0,i.jsxs)("div",{..._,"arc-color-palette":e,"is-adding-color":L?"":void 0,children:[t&&a&&(0,i.jsx)("header",{"arc-color-palette-header":"",children:typeof a=="string"?(0,i.jsx)("strong",{children:a}):(0,i.jsx)(re,{...a,layout:"inline",isStrong:!0})}),(0,i.jsxs)("div",{"arc-color-palette-set":"",id:C,children:[Cr?.map((nr,Pr)=>(0,u.createElement)($i,{...f,key:`${Ce(nr)}-${Pr}`,color:nr,kind:"swatch",isDraft:gr(Pr),isSelected:Xr[Pr],canRemoveColor:d&&!(y&&gr(Pr)),contrastBgColor:h,tooltip:y&&gr(Pr)?"Save Color":void 0,onClick:y&&gr(Pr)?vr:Rr})),l&&To&&(0,i.jsx)(Ar,{"arc-add-color":"",popoverTarget:S,icon:"fa-regular fa-plus",layout:"icon",shape:"round",size:"sm",hierarchy:"secondary",tooltip:Io,onClick:Ze,isDisabled:ia})]}),l&&!y&&(0,i.jsx)(Ya,{mode:"add",heading:"",color:Z??_a.color,format:c,onChange:nr=>P(nr.value),popoverProps:{id:S,popover:"manual",anchorAt:"right-center",alternateAnchorId:C,hidePopoverButton:!0,tryFallbacks:!0,hasTail:!0,onToggle:Nr,onKeyDown:Ye,footerSlot:(0,i.jsxs)(_n,{"arc-color-picker-button-bar":"",children:[(0,i.jsx)(Ar,{"arc-color-picker-button":"cancel",text:"Cancel",hierarchy:"secondary",size:"sm",onClick:X}),(0,i.jsx)(Ar,{"arc-color-picker-button":"save",text:"Save",size:"sm",onClick:vr,isDisabled:G})]})}}),r&&(0,i.jsx)("footer",{"arc-color-palette-footer":"",children:r})]})};In.addColor=zv,In.removeColor=Ev,lr("ArcColorPalette",Ov);const Dv=(0,u.memo)(function({palette:e,canAddColor:a,canRemoveColor:t,activePaletteColor:o,contrastBgColor:n,onSwatchClick:c,onAddColor:l,onRemoveColor:d}){const h=(0,u.useCallback)((g,f)=>{c(g,f,e.id)},[e.id,c]);return(0,i.jsx)(In,{...e,canAddColor:a??e.canAddColor,canRemoveColor:t,addColorFlow:"embedded",activeColor:o,contrastBgColor:n,onAddColor:l,onRemoveColor:d,onSwatchClick:h})}),ed=({palettes:r=[],canAddColor:e,canRemoveColor:a,activePaletteColor:t,contrastBgColor:o,selectedNameRef:n,hsvRef:c,popoverId:l,onAddColor:d,onRemoveColor:h,commitLocalHsv:g,...f})=>{const v=(0,u.useRef)(r);v.current=r;const b=(0,u.useCallback)(($,w,_)=>{const y=v.current.find(S=>S.id===_);if(!y)return;if(w?.preventDefault(),w?.stopPropagation(),$?.action==="remove"&&(a??y.canRemoveColor)){y.onSwatchClick?.($,w);return}$?.colorData&&(n.current=$.colorData.name,g($.colorData.hsv));try{y.onSwatchClick?.($,w)}catch{}if(($?.shouldClosePicker??!0)&&l)try{ga.handlePopover(l,"hide")}catch{}},[a,g,l,n]),m=(0,u.useCallback)(($,w,_)=>{d?.($,w,_)},[d]);return r.length?(0,i.jsx)("div",{...f,"arc-color-palettes":"","arc-color-picker-section":"palettes",children:r.map($=>(0,i.jsx)(Dv,{palette:$,canAddColor:e,canRemoveColor:!!(a??$.canRemoveColor),activePaletteColor:t,contrastBgColor:o,onSwatchClick:b,onAddColor:m,onRemoveColor:h},$.id))}):null},ad=1,td="Please enter six hex digits \u2192 A1B2C3",Nv="Use six hex digits (RGB only). Opacity is not editable in this picker.",Fv=/^[0-9A-Fa-f]{3}$/,Hv=/^[0-9A-Fa-f]{4}$/,Vv="[0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8}",Uv="[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}",Kv=0,Wv=255,Ea=r=>r.replace(/#/g,"").trim(),od=r=>r.length===3?`${r[0]}${r[0]}${r[1]}${r[1]}${r[2]}${r[2]}`:r,lo=r=>Re({...r,a:1},!1).replace(/^#/,""),Gv=r=>Math.min(Wv,Math.max(Kv,Math.round(r))),nd=r=>
5211{if(Fv.test(r))return{kind:"three",expanded:od(r)};if(Hv.test(r)){const e=Tr(`#${r}`);if(e)return{kind:"four",shorthand:r,expanded:lo(e),alphaPercent:Math.round(e.a*100)}}return null},qv=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?`:td,Yv=(r,e,a)=>{const t=Ea(r),o=nd(t),n=t.length>0&&(!a&&t.length===8||!e&&t.length!==6&&t.length!==8||Tr(`#${t}`)===null),l=!e&&t.length>0&&t.length!==6&&t.length!==8||!a&&t.length===8?qv(o):td,d=!a&&t.length===8?Nv:l;let h="Apply expanded six-digit hex";return o?.kind==="four"?h=`Apply #${o.expanded.toUpperCase()} and ${o.alphaPercent}% opacity`:o?.kind==="three"&&(h=`Apply expanded hex ${o.expanded.toUpperCase()}`),{isInvalid:n,errorAid:{tooltip:d,ariaLabel:h,fix:o}}},yi=(r,e,a)=>{const t=Tr(`#${r}`);t&&(e(r,{applyHexAlpha:!0}),a(lo(t)))},Zv=(r,e,a,t)=>{if(e){yi(r,a,t);return}const o=Tr(`#${r}`);if(o){const n=lo(o);t(n),a(n)}},Xv=(r,e,a,t)=>{if(e)yi(r,a,t);else{const o=r.slice(0,6);t(o),a(o)}},Jv=(r,e,a,t)=>{r.kind==="three"?(a(r.expanded),e(r.expanded)):t?(e(r.shorthand,{applyHexAlpha:!0}),a(r.expanded)):(a(r.expanded),e(r.expanded))},Qv=(r,e=!1)=>{const a=Ea(r);return!e&&a.length>6?a.slice(0,6):a},rp=(r,e,a,t,o)=>{const n=Tr(`#${r}`)??e,c={...n,[a]:Gv(n[a]+t*o)};return lo(c)},ep=(r,e,a,t)=>{if(!a&&(r.length===8||t?.applyHexAlpha===!0))return!1;if(!e&&r.length>0){const o=r.length===6||r.length===8,n=t?.applyHexAlpha===!0&&r.length===4;if(!o&&!n)return!1}return!0},ap=(r,e,a)=>{const t=Tr(`#${r}`);return t?a?.applyHexAlpha===!0&&(r.length===4||r.length===8)?t:{...t,a:e.a}:null},kt=r=>(0,i.jsx)(i.Fragment,{children:!!r.children&&(0,i.jsx)("span",{...r})}),tp=r=>(0,i.jsx)(i.Fragment,{children:!!r.children&&(0,i.jsx)("span",{...r})}),xi=({children:r,...e})=>(0,i.jsx)(i.Fragment,{children:!!r&&(0,i.jsx)(za,{...e,children:(0,i.jsx)(Ka,{children:r})})}),op=({children:r,layout:e,size:a,variant:t,tag:o="span",...n})=>(0,i.jsx)(o,{...n,"data-layout":e,"data-size":a,"data-variant":t,children:r}),np=()=>(0,i.jsx)("span",{"input-element":"spacer"}),cp=r=>(0,i.jsx)(kt,{...r,"input-element":"header"}),ip=r=>(0,i.jsx)(xi,{...r,"input-element":"header-label"}),sp=r=>(0,i.jsx)(kt,{...r,"input-element":"header-slot"}),lp=r=>(0,i.jsx)(kt,{...r,"input-element":"body"}),dp=r=>(0,i.jsx)(xi,{...r,"input-element":"input-prefix"}),up=r=>(0,i.jsx)(xi,{...r,"input-element":"input-suffix"}),hp=r=>(0,i.jsx)(tp,{...r,"input-element":"input-action"}),gp=r=>(0,i.jsx)(kt,{...r,"input-element":"footer"}),vp=r=>(0,i.jsx)(kt,{...r,"input-element":"footer-caption"}),pp=r=>(0,i.jsx)(kt,{...r,"input-element":"footer-slot"}),fp=r=>e=>{if(!(e?.target instanceof HTMLInputElement))return;const a={name:e?.target?.name,value:e?.target?.value};r?.(a,e)},yr=s`--arcâ¢input`,fa=s`${yr}â¢fg`,Tn=s`${fa}â¢disabled`,jn=s`${fa}â¢readonly`,Rn=s`${fa}â¢invalid`,Pe=s`${yr}â¢bg`,Pn=s`${Pe}â¢hover`,Ln=s`${Pe}â¢disabled`,Mn=s`${Pe}â¢readonly`,Bn=s`${Pe}â¢invalid`,mp=s`${yr}â¢align`,cd=s`${mp}â¢items`,bp=s`${yr}â¢flex`,$p=s`${bp}â¢direction`,id=s`${yr}â¢header`,On=s`${id}â¢labelâ¢color`,sd=s`${id}â¢slotâ¢color`,ld=s`${yr}â¢footer`,ki=s`${ld}â¢captionâ¢color`,dd=s`${ld}â¢slotâ¢color`,wi=s`${yr}â¢border`,Ci=s`${wi}â¢radius`,yp=s`${wi}â¢width`,Le=s`${wi}â¢color`,Ai=s`${yr}â¢outline`,ud=s`${Ai}â¢size`,hd=s`${Ai}â¢offset`,gd=s`${Ai}â¢color`,uo=s`${yr}â¢height`,xp=s`${yr}â¢padding`,Dn=s`${xp}â¢inline`,Si=s`${Dn}â¢end`,vd=s`${yr}â¢slot`,zi=s`${vd}â¢gap`,Ei=s`${vd}â¢fontâ¢size`,Nn=s`${Le}â¢hover`,Fn=s`${Le}â¢disabled`,_i=s`${Le}â¢readonly`,ho=s`${Le}â¢invalid`,kp=s`${yr}â¢actionâ¢maxâ¢height`,pd=s`${yr}â¢gap`,Ii=s`${yr}â¢fontâ¢size`,wp=s` 5212@layer arc-components { 5213 5214/* --arc[-internal, -modifier, -computed] ⢠NOT FOR CONSUMER USE ---⢠*/ 5215 5216[arc-input] { 5217 5218 /* SIZES ---------------------------------------------------------⢠*/ 5219 5220 &[data-size=xl] { 5221 ${uo}: var(${p}â¢48); 5222 ${Si}: var(${E}â¢8); 5223 } 5224 5225 &:is([data-size=lg], [data-size=inherit]) { /* @default ⢠base size at 100% */ 5226 ${uo}: var(${p}â¢40); 5227 } 5228 5229 &[data-size=md] { 5230 ${uo}: var(${p}â¢32); 5231 ${Ci}: var(${p}â¢4); 5232 ${kp}: 80%; 5233 } 5234 5235 &:has(select) { 5236 ${Dn}: 0; 5237 ${cd}: stretch; 5238 } 5239 5240 & { 5241 /* Defaults -------------------------⢠*/ 5242 ${Ii}: var(${p}â¢14); 5243 ${Ei}: var(${p}â¢12); 5244 5245 ${uo}: var(${p}â¢40); /* default size */ 5246 ${pd}: var(${E}â¢6); 5247 ${zi}: var(${E}â¢4); 5248 ${Dn}: var(${E}â¢12); 5249 ${Si}: var(${E}â¢3); 5250 ${Ci}: var(${p}â¢8); 5251 ${yp}: var(${p}â¢1); 5252 ${ud}: var(${p}â¢2); 5253 ${hd}: var(${p}â¢1m); 5254 5255 &[data-size=inherit] { 5256 ${Ii}: 0.875em; /* 14px at 100% */ 5257 ${Ei}: 0.75em; /* 12px at 100% */ 5258 } 5259 } 5260 5261 /* VARIANTS ------------------------------------------------------⢠*/ 5262 5263 & { 5264 ${fa}: var(--arc-color-fg-primary); 5265 ${On}: inherit; 5266 ${sd}: var(--arc-color-fg-secondary); 5267 ${ki}: var(--arc-color-fg-secondary); 5268 ${dd}: var(--arc-color-fg-secondary); 5269 5270 &[data-variant=outline] { /* @default */ 5271 ${Pe}: var(--arc-color-bg-primary); 5272 ${Pn}: var(--arc-color-bg-primary); 5273 ${Le}: var(--arc-color-border-mid); 5274 ${Nn}
5274: var(--arc-color-border-heavy); 5275 5276 ${Tn}: var(--arc-color-fg-disabled); 5277 ${Ln}: var(--arc-color-bg-secondary); 5278 ${Fn}: var(--arc-color-border-mid); 5279 5280 ${jn}: var(--arc-color-fg-primary); 5281 ${Mn}: var(--arc-color-bg-disabled); 5282 ${_i}: var(--arc-color-border-mid); 5283 5284 ${Rn}: var(--arc-color-fg-critical-mid); 5285 ${Bn}: var(--arc-color-bg-primary); 5286 ${ho}: var(--arc-color-fg-critical-mid); 5287 } 5288 5289 &[data-variant=solid] { 5290 ${Pe}: var(--arc-color-bg-secondary); 5291 ${Pn}: var(--arc-color-bg-hover-default); 5292 ${Le}: transparent; 5293 ${Nn}: var(--arc-color-border-stark); 5294 5295 ${Rn}: var(--arc-color-fg-critical-mid); 5296 ${Bn}: var(--arc-color-bg-critical-muted); 5297 ${ho}: transparent; 5298 5299 ${Tn}: var(--arc-color-fg-disabled); 5300 ${Ln}: var(--arc-color-bg-disabled); 5301 ${Fn}: transparent; 5302 5303 ${jn}: var(--arc-color-fg-primary); 5304 ${Mn}: var(--arc-color-bg-disabled); 5305 ${ho}: var(--arc-color-fg-critical-mid); 5306 } 5307 5308 &[data-variant=plain] { 5309 ${Pe}: transparent; 5310 ${Pn}: var(--arc-color-bg-hover-default); 5311 ${Le}: transparent; 5312 ${Nn}: transparent; 5313 5314 ${Rn}: var(--arc-color-fg-critical-mid); 5315 ${Bn}: transparent; 5316 ${ho}: var(--arc-color-fg-critical-mid); 5317 5318 ${Tn}: var(--arc-color-fg-disabled); 5319 ${Ln}: transparent; 5320 ${Fn}: transparent; 5321 5322 ${jn}: var(--arc-color-fg-primary); 5323 ${Mn}: var(--arc-color-bg-disabled); 5324 ${_i}: transparent; 5325 } 5326 } 5327 5328 /* STATES --------------------------------------------------------⢠*/ 5329 5330 &:not(:has( 5331 input:read-only, 5332 input:disabled, 5333 select[data-readonly], 5334 select:disabled 5335 )) { 5336 5337 &:has(select) { 5338 ${yr}â¢cursor: pointer; 5339 } 5340 5341 &:is( 5342 :hover, 5343 [data-simulate=hover] 5344 ) { 5345 ${Le}: var(--arc-input-border-color-hover, var(${Nn})); 5346 ${Pe}: var(--arc-input-background-hover, var(${Pn})); 5347 } 5348 5349 &:has([input-element=body]) { 5350 &:is( 5351 :focus-within, 5352 [data-simulate=focus], 5353 [data-simulate=active], 5354 :has(:focus, :focus-visible, :active) 5355 ) { 5356 ${gd}: var(--arc-color-border-focus); 5357 } 5358 } 5359 } 5360 5361 &:has(input:read-only, select[data-readonly]) { 5362 ${yr}â¢cursor: default; 5363 ${fa}: var(${jn}); 5364 ${Pe}: var(${Mn}); 5365 ${Le}: var(${_i}); 5366 } 5367 5368 &:has(input:disabled, select:disabled) { 5369 ${yr}â¢cursor: not-allowed; 5370 ${fa}: var(${Tn}); 5371 ${Pe}: var(${Ln}); 5372 ${Le}: var(${Fn}); 5373 ${On}: var(--arc-color-fg-primary); 5374 } 5375 5376 &[data-simulate=invalid], 5377 &:has( 5378 input:user-invalid:not(:focus), 5379 select:user-invalid:not(:focus) 5380 ) { 5381 ${Pe}: var(${Bn}); 5382 ${On}: var(${fa}); 5383 ${Le}: var(${ho}); 5384 ${ki}: var(${Rn}); 5385 } 5386 5387 /* LAYOUTS -------------------------------------------------------⢠*/ 5388 5389 &[data-layout=fill] { /* @default */ 5390 ${yr}â¢display: flex; 5391 } 5392 5393 &[data-layout=hug] { 5394 ${yr}â¢display: inline-flex; 5395 } 5396 5397 & { 5398 ${yr}â¢border: var(--arc-border-width-sm) solid var(${Le}); 5399 ${yr}â¢outline: var(${ud}) solid var(${gd}, transparent); 5400 } 5401} 5402 5403/* Inter-Component Communications ----------------------------------⢠*/ 5404 5405[arc-input] { 5406 --arc-icon-text-line-height: normal; 5407 --arc-label-cursor: var(${yr}â¢cursor, inherit); /* ArcLabel ⢠cursor syncing */ 5408 5409 &[data-size=md] { 5410 --arc-button-border-radius: var(--arc-border-radius-sm); 5411 --arc-button-outline-offset: 0; 5412 --arc-button-font-size: 0.8em; /* ArcButton ⢠the input size 'md' needs 5413 a slightly smaller "input-action" button 5414 footprint; there's no direct access to 5415 ArcButton['size'] prop in this context */ 5416 } 5417} 5418 5419[arc-input]:not([hidden]) { 5420 display: var(${yr}â¢display, flex); 5421 flex-direction: var(${$p}, column); 5422 gap: var(${zi}); 5423 color: var(--arc-input-color, var(${fa})); 5424 5425 :is([input-element=header], [input-element=footer]) { 5426 display: flex; 5427 justify-content: space-between; 5428 font-size: var(--arc-input-slot-font-size, var(${Ei})); 5429 gap: var(${zi}); 5430 } 5431 5432 [input-element=spacer] { 5433 display: safe flex-end; 5434 } 5435 5436 [input-element=header] {
5437 align-items: safe flex-end; 5438 } 5439 5440 [input-element=header-label] { 5441 flex: 1; 5442 color: var(--arc-input-header-label-color, var(${On})); 5443 font-weight: var(--arc-input-header-label-font-weight, var(--arc-font-weight-600)); 5444 } 5445 5446 [input-element=header-slot] { 5447 color: var(--arc-input-header-slot-color, var(${sd})); 5448 min-width: var(--arc-input-header-slot-min-width, fit-content); 5449 } 5450 5451 [input-element=footer] { 5452 align-items: baseline; 5453 } 5454 5455 [input-element=footer-caption] { 5456 flex: 1; 5457 color: var(--arc-input-footer-caption-color, var(${ki})); 5458 } 5459 5460 [input-element=footer-slot] { 5461 color: var(--arc-input-footer-slot-color, var(${dd})); 5462 min-width: var(--arc-input-footer-slot-min-width, fit-content); 5463 } 5464 5465 [input-element=body] { 5466 flex: none; 5467 display: flex; 5468 align-items: var(${cd}, center); 5469 gap: var(--arc-input-gap, var(${pd})); 5470 height: var(${uo}); 5471 font-size: var(${Ii}); 5472 5473 color: var(--arc-input-color, var(${fa})); 5474 background-color: var(--arc-input-background, var(${Pe})); 5475 border: var(--arc-input-border, var(${yr}â¢border)); 5476 border-radius: var(--arc-input-border-radius, var(${Ci})); 5477 outline: var(${yr}â¢outline, none); 5478 outline-offset: var(${hd}); 5479 5480 transition-property: border, background, color, height; 5481 transition-duration: 200ms; 5482 transition-timing-function: ease-out; 5483 5484 cursor: var(${yr}â¢cursor, unset); 5485 5486 padding-inline: var(--arc-input-padding-inline, var(${Dn})); 5487 5488 &:has([input-element=input-action]) { 5489 padding-inline-end: var(${Si}); 5490 } 5491 5492 input { 5493 cursor: inherit; 5494 appearance: none; 5495 align-self: stretch; 5496 flex: 1; 5497 font: inherit; 5498 color: inherit; 5499 border: var(--arc-border-width-sm) solid transparent; 5500 background: transparent; 5501 padding: 0; 5502 margin: 0; 5503 outline: none; 5504 line-height: normal; 5505 width: var(--arc-input-width, 100%); 5506 min-width: var(--arc-input-min-width, 1em); 5507 max-width: var(--arc-input-max-width, 100%); 5508 text-align: var(--arc-input-text-align, unset); 5509 5510 &[arc-input-type=search]::-webkit-search-cancel-button { 5511 appearance: none; 5512 display: none; 5513 } 5514 } 5515 } 5516 5517 [input-element=input-prefix] { 5518 flex: none; 5519 opacity: var(--arc-input-prefix-opacity, unset); 5520 } 5521 5522 [input-element=input-suffix] { 5523 flex: none; 5524 opacity: var(--arc-input-suffix-opacity, var(--arc-alpha-40)); 5525 } 5526 5527 [input-element=input] { 5528 flex: 1; 5529 display: flex; 5530 } 5531 5532 [input-element=input-action] { 5533 flex: none; 5534 cursor: inherit; 5535 align-self: stretch; 5536 display: var(--arc-input-action-display, flex); 5537 align-items: center; 5538 justify-content: center; 5539 5540 button { 5541 max-height: var(${yr}â¢actionâ¢maxâ¢height, unset); 5542 } 5543 } 5544} 5545 5546} 5547`,Cp={onChangeHandler:fp,Wrapper:op,Spacer:np,Header:cp,HeaderLabel:ip,HeaderSlot:sp,InputBody:lp,InputPrefix:dp,InputSuffix:up,InputAction:hp,Footer:gp,FooterCaption:vp,FooterSlot:pp};lr("ArcInput",wp);const Er=Cp,Ap="[input-element=body]",Sp=100;function zp({inputRef:r,onChange:e,enabled:a,deltaPerStep:t=Sp}){const o=(0,u.useRef)(e);o.current=e,(0,u.useEffect)(()=>{if(!a||t<=0)return;let n=0;const c=()=>r.current,l=()=>{const m=c()?.closest(Ap);return m instanceof HTMLElement?m:null},d=(b,m)=>{const $=o.current;if(!$)return;const w={name:b.name,value:m};$(w,{target:b,currentTarget:b})},h=()=>{n=0},g=b=>{const m=c();if(!m||document.activeElement!==m||m.type!=="number"||m.disabled||m.readOnly)return;b.preventDefault(),b.stopPropagation();const $=Number(m.step)||1,w=Number(m.min),_=Number(m.max),y=Number.isFinite(w)?w:void 0,C=Number.isFinite(_)?_:void 0;let S=Number(m.value);if(!Number.isFinite(S))return;n+=b.deltaY;const I=t,j=()=>{const z=Math.max(y??-1/0,S-$);return z===S?!1:(S=z,d(m,String(z)),!0)},L=()=>{const z=Math.min(C??1/0,S+$);return z===S?!1:(S=z,d(m,String(z)),!0)};for(;n>=I;){if(!j()){n=0;break}n-=I}for(;n<=-I;){if(!L()){n=0;break}n+=I}},f=l(),v=c();if(!(!f||!v||v.type!=="number"))return v.addEventListener("blur",h),f.addEventListener("wheel",g,{passive:!1}),()=>{v.removeEventListener("blur",h),f.removeEventListener("wheel",g)}},[a,t,r])}const Ti=ar(Oe,["fill","hug"]),ji=ar(oe,["inherit","xl","lg","md"]),fd=ar(_r,["outline","solid","plain"]),Ep=Ti,_p=ji,Ip=ar(fd,["outline","solid"]),Tp=["text","number","password","email","url"],Hn=(0,u.forwardRef)(({layout:r="hug",size:e="inherit",variant:a="outline",inputProps:t,headerLabel:o,headerSlot:n,inputPrefix:c,inputAction:l,inputSuffix:d,footerCaption:h,footerSlot:g,numberInputWheel:f,...v},b)=>{const{id:m,onChange:$,...w}=t,_="arc-search"in v,y=_?"search":w?.type||"text",C=w?.disabled||void 0,S=w?.readOnly||void 0,I=w?.required||void 0,j=!!(o||n),L=!!(h||g),D=(0,u.useRef)(null),z=(0,u.useCallback)(k=>{D.current=k,Se(b,k)},[b]);return zp({inputRef:D,onChange:$,enabled:y==="number"&&f!==!1,...typeof f=="object"&&typeof f.deltaPerStep=="number"&&{deltaPerStep:f.deltaPerStep}}
5547),(0,i.jsxs)(Er.Wrapper,{...v,"arc-text-input":"","arc-input":y,layout:r,size:e,variant:a,children:[j&&(0,i.jsxs)(Er.Header,{children:[(0,i.jsx)(Er.HeaderLabel,{htmlFor:m,children:o}),!!n&&(0,i.jsx)(Er.Spacer,{}),(0,i.jsx)(Er.HeaderSlot,{children:n})]}),(0,i.jsxs)(Er.InputBody,{children:[(0,i.jsx)(Er.InputPrefix,{htmlFor:m,children:c}),(0,i.jsx)("input",{...w,..._?{type:y}:{},ref:z,id:m,"arc-input-type":y,onChange:Er.onChangeHandler($),"aria-disabled":C,"aria-readonly":S,"aria-required":I}),(0,i.jsx)(Er.InputSuffix,{htmlFor:m,children:d}),(0,i.jsx)(Er.InputAction,{children:l})]}),L&&(0,i.jsxs)(Er.Footer,{children:[(0,i.jsx)(Er.FooterCaption,{children:h}),!!g&&(0,i.jsx)(Er.Spacer,{}),(0,i.jsx)(Er.FooterSlot,{children:g})]})]})}),md=({commitDraft:r,setIsEditing:e,onRevert:a})=>{const t=(0,u.useCallback)(()=>{e(!0)},[e]),o=(0,u.useCallback)(()=>{e(!1),r()},[e,r]),n=(0,u.useCallback)(c=>{if(c.key==="Enter"){c.preventDefault(),e(!1),r(),c.currentTarget.blur();return}c.key==="Escape"&&(c.preventDefault(),e(!1),a(),c.currentTarget.blur())},[e,r,a]);return{onFocus:t,onBlur:o,onKeyDown:n}},bd=({hsv:r,draftValue:e,label:a="Hex",showLabel:t=!0,setIsEditing:o,commitDraft:n,setDraftValue:c,expandHexShorthand:l=!1,hasAlphaTools:d=!0})=>{const h=Ir(void 0,"hex-input"),g=(0,u.useRef)(null),f=lo(We(r)),[v,b]=(0,u.useState)(!1),{isInvalid:m,errorAid:$}=(0,u.useMemo)(()=>Yv(e,l,d),[e,l,d]),{onFocus:w,onBlur:_,onKeyDown:y}=md({commitDraft:n,setIsEditing:o,onRevert:()=>c(f)}),C=(0,u.useCallback)(()=>{b(!0);const k=Ea(e);if(k.length===8){Xv(k,d,n,c),_();return}if(l&&k.length===3){const V=od(k);c(V),n(V),o(!1),_();return}l&&k.length===4&&Zv(k,d,n,c),_()},[e,l,d,c,n,o,_]),S=(0,u.useCallback)(k=>{if(k.key!=="ArrowUp"&&k.key!=="ArrowDown")return;const V=k.key==="ArrowUp"?ad:-ad,U=k.altKey?"r":k.metaKey?"g":"b",Y=k.shiftKey?16:1,W=rp(Ea(e),We(r),U,V,Y);c(W),n(W),k.preventDefault()},[e,r,c,n]),I=(0,u.useCallback)(k=>{if(S(k),!k.defaultPrevented){if(k.key==="Enter"){k.preventDefault(),o(!1),k.currentTarget.blur();return}k.key==="Escape"&&y(k)}},[S,o,y]),j=({value:k})=>{const V=Qv(k??"",d);V.length===8?yi(V,n,c):(c(V),n(V))},L=m&&v,D=L?$.tooltip:void 0,z=(0,u.useCallback)(()=>{const k=nd(Ea(e));k&&Jv(k,n,c,d),queueMicrotask(()=>{g.current?.focus()})},[e,n,c,d]);return(0,i.jsx)(Hn,{ref:g,"arc-color-input":"hex",size:"md",variant:"solid",headerLabel:t?a:void 0,inputPrefix:"#",inputAction:L?(0,i.jsx)(Ar,{layout:"icon",icon:"fa-solid fa-exclamation-circle",variant:"tertiary",tooltip:$.tooltip,"aria-label":$.ariaLabel,onClick:z}):void 0,inputProps:{id:h,placeholder:"...",value:e,pattern:d?Vv:Uv,maxLength:d?9:6,title:D,"aria-invalid":L?!0:void 0,style:{textTransform:"uppercase",letterSpacing:"0.0625ch"},onFocus:w,onBlur:C,onKeyDown:I,onChange:j}})},Ri=typeof window<"u"&&"EyeDropper"in window&&typeof window.EyeDropper=="function",$d=Ri?window.EyeDropper:void 0,yd=$d?new $d:void 0,xd=({onColorPicked:r,...e})=>{const[a,t]=(0,u.useState)(!1),o=async()=>{if(!(!Ri||!yd||a)){t(!0);try{const{sRGBHex:n}=await yd.open();if(typeof r=="function"){const c=We(zn(n,"#000000"));r(Re({...c,a:1},!1))}else console.warn("EyeDropper: onColorPicked prop was not provided")}catch(n){n instanceof DOMException&&n.name==="AbortError"||console.error("EyeDropper failed:",n)}finally{t(!1)}}};return Ri?(0,i.jsx)("div",{"arc-color-eye-dropper":"",children:(0,i.jsx)(Ar,{...e,onClick:o,layout:"icon",shape:"square",size:"md",variant:"common",hierarchy:"tertiary",icon:"fa-regular fa-eye-dropper",text:"Dropper",tooltip:"Pick a color"})}):null},Pi=({id:r,kind:e,label:a,value:t,max:o,min:n=0,step:c=1,isDisabled:l=!1,showLabel:d=!1,showTooltip:h=!1,tooltipText:g,onChange:f})=>{const v=Ir(void 0,r),b=o>1&&Number.isInteger(c)&&c>=1?Math.round(t):t,m=J(b,n,o),$=m.toFixed(c.toString().split(".")[1]?.length??0),w=(0,u.useRef)(null),_=o-n,C=`${(_<=0?0:(m-n)/_)*100}%`,S=j=>{const L=j.currentTarget.valueAsNumber,D=Number.isFinite(L)?L:n;f(J(D,n,o))},I=(0,i.jsx)("input",{id:v,type:"range",min:n,max:o,step:c,value:$,disabled:l??void 0,onChange:S,"aria-label":a});return(0,i.jsxs)("div",{"arc-color-slider":e,"data-disabled":l??void 0,children:[d&&!!a&&(0,i.jsx)(za,{htmlFor:v,children:(0,i.jsx)("strong",{children:a})}),(0,i.jsx)("div",{"arc-color-surface":e,children:h?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("span",{ref:w,"aria-hidden":!0,style:{position:"absolute",left:C,top:"50%",transform:"translate(-50%, -50%)",width:1,height:1,pointerEvents:"none"}}),(0,i.jsx)(sn,{alternateAnchor:w,text:g??$,scheme:"light",isStrong:!1,hasTail:!1,offset:11,children:I})]}):I})]})},jp=196.6,Rp=(r,e)=>{const a=r.getContext("2d",{alpha:!1});if(!a)return;const{width:t,height:o}=r;if(!t||!o)return;const n=a.createImageData(t,o),c=n.data;let l=0;for(let d=0;d<o;d+=1){const h=1-(o<=1?0:d/(o-1));for(let g=0;g<t;g+=1){const f=t<=1?0:g/(t-1),v=We({h:e,s:f,v:h,a:1});c[l++]=Zr(v.r),c[l++]=Zr(v.g),c[l++]=Zr(v.b),c[l++]=255}}a.putImageData(n,0,0)},Pp=({value:r,label:e="Color Saturation and Value",step:a=.01,stepLarge:t=.1,isDisabled:o=!1,showLabel:n=!1,onChange:c})=>{const l=Ir(void 0,"color-field"),d=(0,u.useRef)(null),h=(0,u.useRef)(null),g=(0,u.useRef)(null),f=(0,u.useRef)(null),v=(0,u.useRef)(null),b=(0,u.useRef)(null),m=(0,u.useRef)(null),[$,w]=(0,u.useState)(!1),[_,y]=(0,u.useState)(null),C=J(r.saturation,0,1),S=J(r.value,0,1),I=Math.round(C*100),j=Math.round(S*100),L=(0,u.useMemo)(()=>{const R=r.hue;return typeof R=="number"&&Number.isFinite(R)?R:jp},[r.hue]),D=(0,u.useMemo)(()=>zl(L),[L]),z=(0,u.useCallback)((R,F)=>{c({hue:L,saturation:J(R,0,1),value:J(F,0,1)})},[L,c]),k=(0,u.useCallback)((R,F,H)=>{const M=J((R-H.left)/H.width,0,1),rr=J((F-H.top)/H.height,0,1);z(M,1-rr)},[z]),V=(0,u.useCallback)(R=>{if(o)return;const{clientX:F,clientY:H,pointerId:M,currentTarget:rr}=R,er=rr.getBoundingClientRect();f.current=M,g.current=er,v.current={clientX:F,clientY:H}
5547,b.current=null,m.current=null,rr.focus(),rr.setPointerCapture(M),w(!0),k(F,H,er)},[o,k]),U=(0,u.useCallback)(R=>{if(o)return;const{clientX:F,clientY:H,currentTarget:M,pointerId:rr}=R;if(f.current!==rr)return;const er=g.current??M.getBoundingClientRect();if(R.shiftKey){const Z=v.current;if(Z){if(b.current===null){const vr=Math.abs(F-Z.clientX),pr=Math.abs(H-Z.clientY);b.current=vr>=pr?"s":"v",m.current={clientX:F,clientY:H}}const hr=m.current??Z,P=b.current==="s"?F:hr.clientX,X=b.current==="v"?H:hr.clientY;k(P,X,er);return}}else b.current=null,m.current=null;k(F,H,er)},[o,k]),Y=(0,u.useCallback)(()=>{f.current=null,g.current=null,v.current=null,b.current=null,m.current=null,w(!1)},[]),W=(0,u.useCallback)(R=>{if(o)return;const F=R.shiftKey?t:a;let H=C,M=S;switch(R.key){case"ArrowLeft":H=C-F;break;case"ArrowRight":H=C+F;break;case"ArrowUp":M=S+F;break;case"ArrowDown":M=S-F;break;case"Home":H=0,M=1;break;case"End":H=1,M=0;break;default:return}R.preventDefault(),z(H,M)},[o,a,t,z,C,S]),or=(0,u.useCallback)(R=>{if(o||!R.key.startsWith("Arrow"))return;const F=R.shiftKey?t:a,H=R.key==="ArrowLeft"||R.key==="ArrowDown"?-F:F;R.preventDefault(),z(C+H,S)},[o,a,t,z,C,S]),N=(0,u.useCallback)(R=>{if(o||!R.key.startsWith("Arrow"))return;const F=R.shiftKey?t:a,H=R.key==="ArrowLeft"||R.key==="ArrowDown"?-F:F;R.preventDefault(),z(C,S+H)},[o,a,t,z,C,S]),tr=(0,u.useMemo)(()=>({"--js\u2022s":String(C),"--js\u2022v":String(1-S)}),[C,S]);return(0,u.useLayoutEffect)(()=>{const R=d.current,F=h.current;if(!R||!F)return;const H=()=>{const er=R.getBoundingClientRect(),Z=Math.max(1,Math.round(er.width)),hr=Math.max(1,Math.round(er.height)),P=typeof window>"u"?1:Math.max(window.devicePixelRatio||1,1),X=Math.max(1,Math.round(Z*P)),vr=Math.max(1,Math.round(hr*P));F.width!==X&&(F.width=X),F.height!==vr&&(F.height=vr),Rp(F,D)};H();const M=new ResizeObserver(()=>{H()});M.observe(R);const rr=()=>{H()};return F.addEventListener("contextrestored",rr),()=>{M.disconnect(),F.removeEventListener("contextrestored",rr)}},[D]),(0,i.jsxs)("div",{"arc-color-field":"","is-disabled":o?"":void 0,"is-interacting":$?"":void 0,"sr-focus":_??void 0,children:[n&&!!e&&(0,i.jsx)("label",{htmlFor:l,children:e}),(0,i.jsxs)("div",{id:l,ref:d,"arc-color-surface":"field",style:tr,tabIndex:o?-1:0,role:"application","aria-label":e,"aria-describedby":`${l}-readout`,onPointerDown:V,onPointerMove:U,onPointerUp:Y,onPointerCancel:Y,onKeyDown:W,children:[(0,i.jsx)("canvas",{ref:h,"arc-color-field-canvas":"","aria-hidden":"true"}),(0,i.jsx)("div",{"arc-color-field-thumb":"","aria-hidden":"true"}),(0,i.jsx)("div",{"arc-color-field-slice":"saturation","has-focus":_==="saturation"?"":void 0,"aria-hidden":"true"}),(0,i.jsx)("div",{"arc-color-field-slice":"value","has-focus":_==="value"?"":void 0,"aria-hidden":"true"})]}),(0,i.jsxs)("div",{"arc-color-field-sr":"","aria-hidden":!1,children:[(0,i.jsx)("div",{"arc-color-field-sr-slider":"saturation",role:"slider",tabIndex:o?-1:0,"aria-label":"Saturation","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":I,onKeyDown:or,onFocus:()=>y("saturation"),onBlur:()=>y(null)}),(0,i.jsx)("div",{"arc-color-field-sr-slider":"value",role:"slider",tabIndex:o?-1:0,"aria-label":"Value","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":j,onKeyDown:N,onFocus:()=>y("value"),onBlur:()=>y(null)})]}),(0,i.jsxs)("div",{id:`${l}-readout`,"arc-color-field-readout":"","arc-color-field-sr":"",children:["Saturation ",I,"%. Value ",j,"%."]})]})},Lp=({hsv:r,draftValue:e,label:a="Opacity",showLabel:t=!1,setIsEditing:o,commitDraft:n,setDraftValue:c})=>{const l=Ir(void 0,"alpha-input"),{onFocus:d,onBlur:h,onKeyDown:g}=md({commitDraft:n,setIsEditing:o,onRevert:()=>c($t(r.a))}),f=({value:v})=>{const b=String(v??1);c(b),n(b)};return(0,i.jsx)(Hn,{"arc-color-input":"alpha",size:"md",variant:"solid",inputSuffix:"%",headerLabel:t?a:void 0,numberInputWheel:{deltaPerStep:24},inputProps:{id:l,"aria-label":a,placeholder:"...",value:e,type:"number",min:0,max:100,step:1,onFocus:d,onBlur:h,onKeyDown:g,onChange:f}})},kd=r=>Re({...r,a:1},!1).replace(/^#/,""),Mp=()=>typeof window<"u"&&"EyeDropper"in window,wd=({color:r,hsv:e,isSimpleMode:
5547a,selectedNameRef:t,hsvRef:o,commitLocalHsv:n,tools:c,expandHexShorthand:l,...d})=>{const h=(0,u.useRef)(!1),[g,f]=(0,u.useState)(()=>{const M=Tr(Ce(r));return M?kd(M):"000000"}),[v,b]=(0,u.useState)($t(e.a)),[m,$]=(0,u.useState)(!1),w=(0,u.useCallback)(M=>{t.current=void 0;const er={...o.current,...M};n(er)},[n,o,t]),_=(0,u.useCallback)(M=>w({s:M.saturation,v:M.value}),[w]),y=M=>{const rr=zn(M,"#000000");n(rr)},C=(0,u.useMemo)(()=>!c||c.includes("color-field"),[c]),S=(0,u.useMemo)(()=>!c||c.includes("hue-slider"),[c]),I=(0,u.useMemo)(()=>!c||c.includes("alpha-slider"),[c]),j=(0,u.useMemo)(()=>!c||c.includes("hex-input"),[c]),L=(0,u.useMemo)(()=>!c||c.includes("alpha-input"),[c]),D=(0,u.useMemo)(()=>!c||c.includes("eye-dropper")&&Mp(),[c]),z=(0,u.useMemo)(()=>I||L,[I,L]),k=(M,rr)=>{t.current=void 0;const er=Ea(M??g);if(!ep(er,l??!1,z,rr))return;const Z=We(o.current),hr=ap(er,Z,rr);if(!hr||si(hr,Z))return;const P=oo(hr,o.current.h);n(P)},V=M=>{t.current=void 0;const rr=Dl(M??v);rr!=null&&(w({a:rr}),b($t(rr)))},U=(0,u.useCallback)(M=>{f(Ea(M))},[]),Y=(0,u.useCallback)(M=>{b(M)},[]),W=(0,u.useCallback)(M=>{h.current=M},[]),or=(0,u.useCallback)(M=>{$(M),M&&b($t(o.current.a))},[o]);(0,u.useEffect)(()=>{if(h.current)return;const M=We(e),rr=kd(M);f(er=>{if(er===rr)return er;if(!l){const Z=Ea(er);if(Z.length===3||Z.length===4||Z.length===8){const hr=Tr(`#${Z}`);if(hr){const P={...hr,a:M.a};if(si(P,M))return er}}}return rr})},[e,l]);const N=(0,u.useMemo)(()=>m?v:$t(e.a),[m,v,e.a]),tr=(0,u.useMemo)(()=>({hue:e.h,saturation:e.s,value:e.v}),[e]),R=(0,u.useMemo)(()=>J(Math.round(e.a*100),0,100),[e.a]),F=(0,u.useMemo)(()=>`${R.toString()}%`,[R]),H=(0,u.useMemo)(()=>`${Math.round(e.h).toString()}\xB0`,[e.h]);return(0,i.jsx)("div",{...d,"arc-color-tools":a?"simple":"","arc-color-picker-section":"tools",children:a?(0,i.jsxs)(i.Fragment,{children:[j&&(0,i.jsx)(bd,{hsv:e,draftValue:g,setIsEditing:W,commitDraft:k,setDraftValue:U,expandHexShorthand:l,hasAlphaTools:z}),D&&(0,i.jsx)(xd,{onColorPicked:y}),I&&(0,i.jsx)(Pi,{kind:"alpha",value:R,min:0,max:100,step:1,id:"alpha-slider",label:"Opacity",showLabel:!0,showTooltip:!0,tooltipText:F,onChange:M=>w({a:M/100})})]}):(0,i.jsxs)(i.Fragment,{children:[C&&(0,i.jsx)(Pp,{value:tr,onChange:_}),D&&(0,i.jsx)(xd,{onColorPicked:y}),(S||I)&&(0,i.jsxs)("div",{"arc-color-sliders":"",children:[S&&(0,i.jsx)(Pi,{kind:"hue",value:e.h,min:0,max:360,step:1,id:"hue-slider",label:"Hue",showLabel:!1,showTooltip:!0,tooltipText:`Hue: ${H}`,onChange:M=>w({h:M})}),I&&(0,i.jsx)(Pi,{kind:"alpha",value:R,min:0,max:100,step:1,id:"alpha-slider",label:"Opacity",showLabel:!1,showTooltip:!0,tooltipText:`Opacity: ${F}`,onChange:M=>w({a:M/100})})]}),(j||L)&&(0,i.jsxs)("div",{"arc-color-inputs":"",children:[j&&(0,i.jsx)(bd,{hsv:e,draftValue:g,setIsEditing:W,commitDraft:k,setDraftValue:U,expandHexShorthand:l,hasAlphaTools:z}),L&&(0,i.jsx)(Lp,{hsv:e,showLabel:!j,draftValue:N,setIsEditing:or,commitDraft:V,setDraftValue:Y})]})]})})},Cd=({heading:r,showGoBack:e,goBackProps:a,...t})=>(0,i.jsx)(ga,{...t,variant:"common","arc-color-picker-wrapper":"",showGoBack:e,goBackProps:a,headerSlot:!!r&&(0,i.jsx)(re,{...typeof r=="string"?{text:r}:r,"arc-color-picker-heading":"",overflow:"truncate",isStrong:!0})});Cd.displayName="ArcColorPickerWrapper";const _a={mode:"normal",color:"#05aff0",format:"auto",heading:"Color",palettes:[]},Bp={icon:"fa-regular fa-paint-brush",text:"Color Picker",layout:"icon",shape:"round",size:"md"},Op=(r,e)=>r===void 0?!0:e?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"),Ya=({children:r,mode:e=_a.mode,color:a=_a.color,format:t=_a.format,heading:o=_a.heading,tools:n,omitTools:c,isInline:l=!1,showGoBack:d=!1,goBackProps:h,palettes:g,popoverProps:f,onChange:v,onAddColor:b,onRemoveColor:m,expandHexShorthand:$,...w})=>{const _=(0,u.useMemo)(()=>Vl(a).color,[a]),y=Ir(f?.id??void 0,"color-picker"),C=(0,u.useMemo)(()=>e==="simple",[e]),[S,I]=(0,u.useState)(()=>{const P=Tr(_);return P?oo(P):{h:0,s:0,v:0,a:1}}),j=(0,u.useRef)(S),L=(0,u.useRef)(_),D=(0,u.useRef)(null),z=(0,u.useRef)(void 0);(0,u.useEffect)(()=>{j.current=S},[S]);const k=(0,u.useCallback)(P=>{if(v)try{const X=qa(P,{format:t});L.current=X.value,D.current=X.rgba,v({...X,name:z.current})}catch{}},[v,t]),V=(0,u.useCallback)(P=>{di(P,j.current)||(j.current=P,I(P),k(P))},[k]),U=(0,u.useMemo)(()=>
5547{const P=C?"":"manual";return f?.popover??P},[f?.popover,C]),Y=(0,u.useMemo)(()=>{const P=We(S);return{"--js\u2022hue":`hsl(${S.h} 100% 50%)`,"--js\u2022hex":Re({...P,a:1},!1),"--js\u2022rgb":Ga(P)}},[S]),W=(0,u.useMemo)(()=>Ga(We(S)),[S]),or=(0,u.useMemo)(()=>g?.map(P=>({...P,canAddColor:!1,canRemoveColor:!1}))??[],[g]),N=(0,u.useRef)(null),tr=(0,u.useCallback)(()=>{const P=N.current;if(!P)return;const X=C?'button[arc-color-chip="swatch"]:not(:disabled)':'[arc-color-surface="field"]';P.querySelector(X)?.focus()},[C]),R=f?.onToggle,F=(0,u.useCallback)(P=>{P?.newState==="open"&&setTimeout(tr,0),R?.(P)},[tr,R]);(0,u.useEffect)(()=>{if(_!==L.current){L.current=_;try{const P=Tr(_)??{r:0,g:0,b:0,a:1},X=D.current;if(X&&li(P,X))return;const vr=We(j.current);if(li(P,vr))return;z.current=void 0;const pr=oo(P,j.current.h);if(di(pr,j.current))return;j.current=pr,I(pr)}catch{}}},[_]);const H=(0,u.useMemo)(()=>{const P=n===void 0?[...C?Al:Cl]:[...n];if(!c?.length)return P;const X=new Set(c);return P.filter(vr=>!X.has(vr))},[n,C,c]),M=(0,u.useMemo)(()=>Op(H,C),[H,C]),rr=(0,u.useMemo)(()=>H.includes("palettes"),[H]),er=(0,i.jsxs)("div",{...w,ref:N,"arc-color-picker":C?"simple":"","is-inline":l?"":void 0,style:Y,children:[C?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(ed,{palettes:rr?or:void 0,activePaletteColor:W,commitLocalHsv:V,selectedNameRef:z,hsvRef:j,popoverId:y,onAddColor:b??(()=>{}),onRemoveColor:m}),M&&(0,i.jsx)(wd,{color:_,hsv:S,hsvRef:j,selectedNameRef:z,commitLocalHsv:V,isSimpleMode:C,tools:H,expandHexShorthand:$})]}):(0,i.jsxs)(i.Fragment,{children:[M&&(0,i.jsx)(wd,{color:_,hsv:S,selectedNameRef:z,hsvRef:j,commitLocalHsv:V,tools:H,expandHexShorthand:$}),(0,i.jsx)(ed,{palettes:rr?g:void 0,activePaletteColor:W,commitLocalHsv:V,selectedNameRef:z,hsvRef:j,popoverId:y,onAddColor:b??(()=>{}),onRemoveColor:m,"has-divider":M?"top":void 0})]}),r&&(0,i.jsx)("div",{"arc-color-picker-section":"footer",children:r})]});if(l)return er;const Z=f?.anchorProps??Bp,hr=C?{...f,anchorAt:f?.anchorAt??"bottom-center",showDismiss:!1,hasTail:!0}:{...f,heading:o??void 0,showGoBack:d??void 0,goBackProps:h??void 0,showHeaderDivider:!0,showFooterDivider:!0,isHeaderSticky:!0,isFooterSticky:!0};return(0,i.jsx)(Cd,{...hr,popover:U,anchorProps:Z,id:y,onToggle:F,children:er})};Ya.getColorAs=Hl,Ya.getColorData=qa,Ya.getContrastColor=mi,Ya.addColor=_v,Ya.removeColor=Iv,lr("ArcColorPicker",Mv);var Dp;const Za={layout:"gutter",variant:"inherit",overflow:"truncate",gapSize:"md",size:"md"},Np=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"}],Fp=({icon:r,onClick:e,items:a,renderSubmenu:t,submenuProps:o,...n})=>({icon:r&&typeof r=="string"?`${r.replace(" fa-fw","")} arc-fw`:r,itemProps:n}),Ad=(r,e)=>{const{icon:a,itemProps:t}=Fp(e);switch(r){case"divider":return(0,i.jsx)("hr",{});case"section-label":return(0,i.jsx)(re,{...t,...Za,icon:a,size:"sm",isStrong:!0});case"icon-text":return(0,i.jsx)(re,{...t,...Za,icon:a});case"icon-text-detail":return(0,i.jsx)(re,{...t,...Za,icon:a,isStrong:!0});case"text":return(0,i.jsx)(re,{...t,...Za});case"text-detail":return(0,i.jsx)(re,{...t,...Za,subtext:t.subtext??"sub",isStrong:!0});case"user":return(0,i.jsx)(Ac,{...t,...Za,size:"sm"});case"user-detail":return(0,i.jsx)(Ac,{...t,...Za,size:"md",isStrong:!0});default:return r}},kb=r=>Object.fromEntries(Dp.map(e=>[e,Ad(e,r)])),Li=200,Hp=r=>{const e=r.submenuProps&&typeof r.submenuProps=="object"?r.submenuProps.id:void 0;return typeof e=="string"&&e.length>0?e:void 0},Vp=r=>{const e=r.submenuProps&&typeof r.submenuProps=="object"?r.submenuProps:{},{menuProps:a,renderItem:t,...o}=e;return{menuProps:a,popoverPassthrough:o}},Up=r=>({ownMenuId:r.menu,parentTriggerId:r.trigger}),Kp=r=>{const e=r.submenuProps;if(!e||typeof e!="object")return;const a=e.renderItem;return typeof a=="function"?a:void 0},Vn=(r,e,a)=>{if(!(typeof r.renderSubmenu=="function"||Array.isArray(r.items)&&r.items.length>0))return{hasSubmenu:!1};const o=Bi(r,e),n=`${a}-subtrigger-${o}`;let l=Hp(r)??`${a}-submenu-${o}`;return l===n&&(l=`${l}-menu`),{hasSubmenu:!0,menuId:l,triggerId:n}},Wp=(r,e)=>{if(!e||!r)return-1;let t=e.nodeType===Node.ELEMENT_NODE?e:e.parentNode;for(;t;){if(t===r)return-1;if(t instanceof HTMLLIElement&&t.parentElement===r)return Array.prototype.indexOf.call(r.children,t);t=t.parentNode}return-1},Gp=(r,e)=>{if(typeof document>"u")return!1;const a=Ee(r,e);try{return!!a?.matches?.(":popover-open")}catch{return!1}},Mi=r=>r===!0||typeof r=="number"&&r>=0&&Number.isFinite(r),qp=r=>r===!0?0:r,Yp=r=>r===!0?Li:r,Zp={divider:"separator","section-label":"presentation","icon-text-detail":"menuitem","icon-text":"menuitem","user-detail":"menuitem",user:"menuitem","text-detail":"menuitem",text:"menuitem"},Bi=(r,e)=>
5547r.itemId!=null&&String(r.itemId)!==""?String(r.itemId):`auto-${e}`,Xp=r=>{let e=null;for(let a=r;a;a=a.parentElement)a.hasAttribute("arc-popover")&&(e=a);return e},Sd=(r,e,a,t)=>{if(t||a==="divider"||!!!(e.href||e.onClick))return;Xp(r.currentTarget)?.hidePopover?.()},Jp=r=>r?.role??Zp[go(r)]??"menuitem",go=r=>Np(r)?.find(({test:e})=>e())?.value??"text",zd=r=>e=>Ad(r,e),Oi=(r,e,a,t)=>{const o=t??Vn(r,e,a);if(o.hasSubmenu)return o.triggerId;const n=Bi(r,e);return`${a}-mi-${n}`},Qp=(r,e,a)=>go(r)==="divider"||r.isDisabled===!0||r["aria-disabled"]===!0?!1:Vn(r,e,a).hasSubmenu?!0:!!(r.href||r.onClick),Un=(r,e)=>{const a=[];for(let t=0;t<r.length;t+=1)Qp(r[t],t,e)&&a.push(t);return a},Ed=(r,e,a)=>{if(typeof document>"u")return;const t=r.children[e];if(!(t instanceof HTMLElement))return;const o=Ee(a,r);if(o instanceof HTMLElement&&t.contains(o)){o.focus();return}const n=t.querySelectorAll('a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');Array.from(n).find(l=>l.getAttribute("aria-disabled")!=="true")?.focus()},_d=(r,e,a,t)=>{const o=Un(r,e);if(o.length===0)return-1;if(t==="actual")return a>=0&&o.includes(a)?a:o[0];let n=o.indexOf(a);return n<0?t==="next"?o[0]:t==="previous"?o[o.length-1]:o[0]:t==="next"?(n=(n+1)%o.length,o[n]):(n=(n-1+o.length)%o.length,o[n])};function rf(r,e,a){return{ArrowUp:t=>{const o=_d(r,e,t,"previous");o>=0&&a(o)},ArrowDown:t=>{const o=_d(r,e,t,"next");o>=0&&a(o)},Home:()=>{const t=Un(r,e);t.length>0&&a(t[0])},End:()=>{const t=Un(r,e);t.length>0&&a(t[t.length-1])}}}function ef(r,e){const{isVisible:a,menuListRef:t,activeItemIndex:o,filteredItems:n,menuDomId:c,isMenuRtlRef:l,submenuBackNavigation:d,listNavByKey:h,hideSubmenu:g,focusTriggerById:f,focusRowAtItemIndex:v,setActiveItemIndex:b,openSubmenuForKeyboard:m}=e;if(!a||!t.current||!(r.target instanceof Node)||!t.current.contains(r.target))return;const $=t.current,w=r.target.closest?.("ul[arc-menu]");if(w&&w!==$)return;let _=Wp($,r.target);if(_<0&&o>=0&&(_=o),_<0)return;const y=n[_],C=Vn(y,_,c),S=l.current,I=S?"ArrowLeft":"ArrowRight",j=S?"ArrowRight":"ArrowLeft";if(d&&r.key==="Escape"){r.preventDefault(),r.stopPropagation(),g(d.ownMenuId),f(d.parentTriggerId);return}if(C.hasSubmenu&&Gp(C.menuId,$)&&r.key===j){r.preventDefault(),r.stopPropagation(),g(C.menuId),v(_);return}if(d&&r.key===j){r.preventDefault(),r.stopPropagation(),g(d.ownMenuId),f(d.parentTriggerId);return}if(C.hasSubmenu&&(r.key===I||r.key==="Enter")){r.preventDefault(),r.stopPropagation(),b(_),m(C.menuId);return}const L=h[r.key];L&&(r.preventDefault(),r.stopPropagation(),L(_))}function af(r,e){if(typeof document>"u")return;Ee(r,e)?.hidePopover?.()}function tf(r,e){if(typeof document>"u")return;Ee(r,e)?.showPopover?.()}function of(r){r.querySelectorAll("[popover]").forEach(e=>{try{e.matches(":popover-open")&&e.hidePopover?.()}catch{}})}function nf(r,e){typeof document>"u"||requestAnimationFrame(()=>{Ee(r,e)?.querySelector("[arc-menu]")?.focus()})}function cf(r,e){if(typeof document>"u")return;Ee(r,e)?.focus()}function sf({menuListRef:r,passiveMode:e}){const a=(0,u.useRef)(null),t=(0,u.useRef)(null),o=(0,u.useRef)(null),n=(0,u.useCallback)(()=>{t.current!=null&&(clearTimeout(t.current),t.current=null)},[]),c=(0,u.useCallback)(()=>{o.current!=null&&(clearTimeout(o.current),o.current=null)},[]),l=(0,u.useCallback)(()=>{const m=r.current;m&&of(m)},[r]),d=(0,u.useCallback)(m=>{af(m,r.current),a.current===m&&(a.current=null)},[r]),h=(0,u.useCallback)(m=>{typeof document>"u"||(a.current&&a.current!==m&&d(a.current),tf(m,r.current),a.current=m)},[d,r]),g=(0,u.useCallback)(m=>{if(!Mi(e))return;c(),n();const $=qp(e);if($<=0){h(m);return}t.current=setTimeout(()=>{t.current=null,h(m)},$)},[e,n,c,h]),f=(0,u.useCallback)(m=>{if(!Mi(e))return;n(),c();const $=Yp(e);if($<=0){d(m);return}o.current=setTimeout(()=>{o.current=null,d(m)},$)},[e,n,c,d]),v=(0,u.useCallback)(m=>{n(),c(),h(m),nf(m,r.current)},[n,c,h,r]),b=(0,u.useCallback)(m=>{cf(m,r.current)},[r]);return{activeSubmenuIdRef:a,cancelPendingSubmenuOpen:n,cancelPendingSubmenuClose:c,closeOpenDescendantPopovers:l,hideSubmenu:d,runShowSubmenu:h,showSubmenuFromPointer:g,requestSubmenuCloseFromPointer:f,openSubmenuForKeyboard:v,focu
5547sTriggerById:b}}const lf=s`--arcâ¢menu`,ma=s`${lf}â¢item`,df=s` 5548@layer arc-components { 5549 5550 [arc-menu] { 5551 ${ma}â¢gap: var(${E}â¢8); 5552 ${ma}â¢fg: inherit; 5553 ${ma}â¢bg: inherit; 5554 5555 font-size: var(--arc-menu-font-size, var(${p}â¢14)); 5556 list-style: none; 5557 line-height: normal; 5558 5559 display: var(--arc-menu-display, flex); 5560 flex-direction: var(--arc-menu-flex-direction, column); 5561 gap: var(--arc-menu-gap, var(${E}â¢2)); 5562 padding: var(--arc-menu-padding, var(${E}â¢4)); 5563 margin: var(--arc-menu-margin, 0); 5564 5565 outline: var(--arc-menu-outline, none); 5566 } 5567 5568 /* Submenus sit under the same <li> as the row button, so the parent row stays :hover while 5569 pointing at submenu items. Reset the item bg token on submenu lists so inherited hover from 5570 the parent <li> does not paint every submenu row; each submenu row only picks up hover from its own <li>. */ 5571 [arc-menu-item] > [arc-popover] [arc-menu] { 5572 ${ma}â¢bg: transparent; 5573 } 5574 5575 [arc-menu-item] { 5576 position: relative; 5577 display: var(--arc-menu-item-display, flex); 5578 flex-direction: var(--arc-menu-item-flex-direction, row); 5579 justify-content: var(--arc-menu-item-justify-content, space-between); 5580 align-items: var(--arc-menu-item-align-items, center); 5581 gap: var(--arc-menu-item-gap, var(${ma}â¢gap)); 5582 5583 background: var(--arc-menu-item-background, var(${ma}â¢bg)); 5584 color: var(--arc-menu-item-color, var(${ma}â¢fg)); 5585 padding: var(--arc-menu-item-padding, 0); 5586 border-radius: var(--arc-menu-item-border-radius, var(--arc-border-radius-md)); 5587 cursor: var(--arc-menu-item-cursor, default); 5588 outline: var(--arc-menu-item-outline, none); 5589 5590 transition: var(--arc-menu-item-transition, 120ms ease-out); 5591 5592 &:has(> [arc-button=custom]:not([is-disabled])) { 5593 &:is(:hover, :has(> [arc-button=custom]:not([is-disabled]):focus-visible)) { 5594 ${ma}â¢bg: var(--arc-color-bg-hover-default); 5595 } 5596 } 5597 5598 /* Inter-Component Communication ⢠ArcButton -------------------⢠*/ 5599 5600 > [arc-button=custom] { 5601 --arc-button-flex: 1; 5602 --arc-button-font-size: 1em; 5603 --arc-button-border: none; 5604 --arc-button-transition: none; 5605 --arc-button-position: var(--arc-menu-item-position, relative); 5606 --arc-button-gap: var(--arc-menu-item-gap, var(${ma}â¢gap)); 5607 --arc-button-opacity: var(--arc-menu-item-opacity, unset); 5608 --arc-button-overflow: var(--arc-menu-item-overflow, clip); 5609 --arc-button-outline-offset: var(--arc-menu-item-outline-offset, var(${p}â¢2m)); 5610 5611 [arc-button-content] { 5612 display: contents; 5613 } 5614 } 5615 } 5616 5617 [arc-menu-item=divider] { 5618 margin: 0 var(${E}â¢4m); 5619 5620 hr { 5621 flex: 1; 5622 border: none; 5623 border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5624 height: 0; 5625 margin: 0; 5626 } 5627 } 5628 5629`,uf=({items:r,filterText:e,renderItem:a,isVisible:t,keepMenuOpen:o,renderSubmenu:n,passiveMode:c,submenuBackNavigation:l,...d})=>{const h=c??Li,g=(0,u.useId)(),f=(0,u.useRef)(null),{activeSubmenuIdRef:v,cancelPendingSubmenuOpen:b,cancelPendingSubmenuClose:m,closeOpenDescendantPopovers:$,hideSubmenu:w,showSubmenuFromPointer:_,requestSubmenuCloseFromPointer:y,openSubmenuForKeyboard:C,focusTriggerById:S}=sf({menuListRef:f,passiveMode:h}),I=(0,u.useRef)(!1),[j,L]=(0,u.useState)(!1),[D,z]=(0,u.useState)(-1);(0,u.useLayoutEffect)(()=>{const N=f.current;if(N&&typeof getComputedStyle<"u"){const tr=getComputedStyle(N).direction==="rtl";I.current=tr,L(tr)}},[t,r]);const k=(0,u.useMemo)(()=>e?r.filter(N=>Object.values(N).some(tr=>tr===e)):r,[r,e]),V=(0,u.useRef)(k);V.current=k;const U=(0,u.useCallback)(N=>{if(N<0){z(-1);return}z(N);const tr=f.current;if(!tr)return;const R=Oi(k[N],N,g);Ed(tr,N,R)},[k,g]),Y=(0,u.useMemo)(()=>rf(k,g,U),[k,g,U]),W=N=>ef(N,{isVisible:!!t,menuListRef:f,activeItemIndex:D,filteredItems:k,menuDomId:g,isMenuRtlRef:I,submenuBackNavigation:l,listNavByKey:Y,hideSubmenu:w,focusTriggerById:S,focusRowAtItemIndex:U,setActiveItemIndex:z,openSubmenuForKeyboard:C}),or=(0,u.useMemo)(()=>k.map((N,tr)=>{const R=Bi(N,tr),{itemId:F,role:H,keepMenuOpen:M,items:rr,renderSubmenu:er,submenuProps:Z,...hr}=N,P=Vn(N,tr,g),{hasSubmenu:X}=P,vr=X?P.menuId:"",pr=X?{menu:P.menuId,trigger:P.triggerId}:void 0,Cr=go(N)||"",Xr=H||Jp(N)||"menuitem",Be=tr===D,G=Oi(N,tr,g,P),Rr={filterText:e,isCurrent:Be,menuControlId:G,itemId:R,role:H,keepMenuOpen:M??o,isRtl:j,...X?{hasSubmenu:!0,ids:pr}:{hasSubmenu:!1}},gr=a?.(hr,tr,Rr);return X?(0,i.jsxs)("li",{"arc-menu-item":Cr,role:"presentation",onFocusCapture:()=>z(tr),onMouseEnter:()=>{_(vr)},onMouseLeave:Mi(h)?()=>y(vr):void 0,onClick:Nr=>Sd(Nr,N,Cr,M??o),children:[gr,n?.({ids:pr,items:rr??[],item:N,filterText:e,passiveMode:h,isRtl:j})]}
5629,R):(0,i.jsx)("li",{"arc-menu-item":Cr,role:Xr,onFocusCapture:()=>z(tr),onClick:Nr=>Sd(Nr,N,Cr,M??o),children:gr},R)}),[D,e,k,o,a,g,j,h,n,_,y]);return(0,u.useEffect)(()=>{if(!t){b(),m(),$(),v.current=null,z(-1);return}const N=V.current,tr=Un(N,g);if(tr.length>0){const R=tr[0],F=f.current;if(z(R),F){const H=Oi(N[R],R,g);Ed(F,R,H)}}},[t,g,b,m,$,v]),(0,u.useEffect)(()=>()=>{b(),m(),$(),v.current=null},[b,m,$,v]),(0,i.jsx)("ul",{...d,ref:f,"arc-menu":"",role:"menu",onKeyDown:W,onMouseLeave:()=>z(-1),tabIndex:t?0:-1,children:or})};lr("ArcMenu",df);const Id=["items","renderItem","renderSubmenu","keepMenuOpen","onToggle","id","menuProps","passiveMode","submenuBackNavigation","offset","ref"],Td=r=>{const{startSlot:e,endSlot:a,onClick:t,href:o,target:n,containerProps:c,isDisabled:l,"aria-disabled":d,tooltip:h,id:g,popoverTarget:f,popoverTargetAction:v,"aria-haspopup":b,"aria-controls":m,"aria-expanded":$,...w}=r,_=go(w),y=(0,u.useMemo)(()=>zd(_),[_]),C=d??l,S=_==="divider",I=!!(o||t||f),j=!S,L=j&&e?"":void 0,D=j&&a?"":void 0,z=(0,u.useMemo)(()=>({...c,onClick:t,tooltip:h,href:o,target:n,id:g,popoverTarget:f,popoverTargetAction:v,"aria-haspopup":b,"aria-controls":m,"aria-expanded":$}),[c,t,h,o,n,g,f,v,b,m,$]),k=(0,u.useMemo)(()=>({...c}),[c]);return I?(0,i.jsxs)(Ar,{...z,role:f?"menuitem":z.role,"aria-disabled":C?"true":void 0,isDisabled:!!C,_isCustom:!0,"arc-dropdown-item":_??"","has-start-slot":L,"has-end-slot":D,children:[j&&e,(0,i.jsx)(y,{...w,"is-item-content":"interactive"}),j&&a]}):(0,i.jsxs)("div",{...k,"arc-dropdown-item":_??"","has-start-slot":L,"has-end-slot":D,children:[j&&e,(0,i.jsx)(y,{...w,"is-item-content":"inert"}),j&&a]})},hf=s`--arcâ¢dropdown`,gf=s`${hf}â¢menu`,te=s`${gf}â¢item`,vf=s` 5630@layer arc-components { 5631 5632 /* ITEM SETUP ----------------------------------------------------⢠*/ 5633 5634 [arc-dropdown-item] { 5635 ${te}â¢padding: var(${E}â¢8) var(${E}â¢12); 5636 ${te}â¢minâ¢height: var(${p}â¢36); 5637 ${te}â¢gap: var(${E}â¢8); 5638 5639 &[arc-dropdown-item=text-detail] { 5640 ${te}â¢minâ¢height: var(${p}â¢48); 5641 } 5642 5643 &[arc-dropdown-item=section-label] { 5644 ${te}â¢minâ¢height: var(${p}â¢32); 5645 } 5646 5647 &[arc-dropdown-item=user] { 5648 ${te}â¢minâ¢height: var(${p}â¢40); 5649 5650 &:not([has-start-slot]) { 5651 ${te}â¢padding: var(${E}â¢8) var(${E}â¢12) var(${E}â¢8) var(${E}â¢10); 5652 } 5653 } 5654 5655 &[arc-dropdown-item=user-detail] { 5656 ${te}â¢minâ¢height: var(${p}â¢48); 5657 5658 &:not([has-start-slot]) { 5659 ${te}â¢padding: var(${E}â¢8) var(${E}â¢12) var(${E}â¢8) var(${E}â¢6); 5660 } 5661 } 5662 5663 &[arc-dropdown-item=divider] { 5664 ${te}â¢minâ¢height: var(${p}â¢8); 5665 ${te}â¢padding: 0; 5666 } 5667 } 5668 5669 /* DROPDOWN ELEMENTS ---------------------------------------------⢠*/ 5670 5671 [arc-dropdown] { 5672 --arc-popover-font-size: initial; 5673 --arc-popover-width: var(--arc-dropdown-width, auto); 5674 --arc-popover-min-width: var(--arc-dropdown-min-width, 3em); 5675 --arc-popover-max-width: var(--arc-dropdown-max-width, 50em); 5676 --arc-popover-padding: var(--arc-dropdown-padding, 0em); 5677 --arc-popover-outline-size: 0em; 5678 --arc-popover-overflow: var(--arc-dropdown-overflow, clip); 5679 5680 --arc-menu-item-gap: var(${te}â¢gap); 5681 --arc-badge-align-self: center; 5682 --arc-badge-count-align-self: center; 5683 } 5684 5685 [arc-dropdown-submenu] { 5686 &:where([anchor-at="left-start"], [anchor-at="right-start"]) { 5687 top: var(--arc-dropdown-submenu-offset, var(${E}â¢4m)); 5688 } 5689 5690 &:where([anchor-at="left-end"], [anchor-at="right-end"]) { 5691 bottom: var(--arc-dropdown-submenu-offset, var(${E}â¢4m)); 5692 } 5693 } 5694 5695 [arc-dropdown-item] { 5696 flex: 1; 5697 display: flex; 5698 align-items: center; 5699 gap: var(${te}â¢gap); 5700 text-align: start; 5701 min-height: var(${te}â¢minâ¢height); 5702 5703 &:not([arc-button]) { 5704 padding: var(${te}â¢padding); 5705 max-width: 100%; 5706 } 5707 5708 &[arc-button] { 5709 --arc-button-padding: var(${te}â¢padding); 5710 --arc-button-min-height: var(${p}â¢40); 5711 } 5712 5713 [is-item-content] { 5714 flex: 1; 5715 } 5716 5717 [arc-dropdown-submenu-icon] { 5718 --arc-icon-color: var(--arc-dropdown-submenu-icon-color, var(--arc-color-fg-secondary)); 5719 } 5720 } 5721 5722} 5723`,vo={OFFSET:void 0,ANCHOR_AT_LTR:"left-start",ANCHOR_AT_RTL:"right-start",ICON_LTR:"fa-regular fa-angle-right",ICON_RTL:"fa-regular fa-angle-left"},pf=(r,e)=>({anchorAt:r?vo.ANCHOR_AT_LTR:vo.ANCHOR_AT_RTL,offset:e??vo.OFFSET}),jd=(0,u.forwardRef)((r,e)=>(0,i.jsx)(qt,{...r,ref:e,"arc-dropdown-menu-button":""})),ff=r=>{const e={...r};
5723return Id.forEach(a=>{Reflect.deleteProperty(e,a)}),e},mf=r=>r?vo.ICON_RTL:vo.ICON_LTR,bf=(r,e)=>r===void 0?mf(e):typeof r=="function"?r(e):r,Kn=r=>{const{items:e,renderItem:a,keepMenuOpen:t,menuProps:o,passiveMode:n,submenuBackNavigation:c,renderSubmenu:l,submenuIcon:d,submenuOffset:h,ref:g,...f}=r,[v,b]=(0,u.useState)(!1),m=(0,u.useRef)(r);m.current=r;const $=(0,u.useRef)(null),w=(0,u.useCallback)(I=>{if(typeof document>"u")return;Ee(I,$.current)?.hidePopover?.()},[]),_=(0,u.useCallback)(I=>{$.current=I,Se(g,I)},[g]),y=(0,u.useCallback)(I=>{const j=m.current,L=ff(j),D=Kp(I.item)??j.renderItem,{ids:z}=I,k=j.keepMenuOpen;if(I.item.renderSubmenu)return I.item.renderSubmenu({items:I.items,renderItem:D,keepMenuOpen:k,filterText:I.filterText,passiveMode:I.passiveMode,ids:z,closeSubmenu:()=>{w(z.menu)},inheritedFromParent:L});const{menuProps:V,popoverPassthrough:U}=Vp(I.item);return(0,i.jsx)(Kn,{...L,...pf(I.isRtl,j.submenuOffset),...U,id:z.menu,"arc-dropdown-submenu":"",submenuBackNavigation:Up(z),alternateAnchorId:z.trigger,hidePopoverButton:!0,passiveMode:I.passiveMode,items:I.items,renderItem:D,keepMenuOpen:k,menuProps:V})},[w]),C=(0,u.useCallback)((...I)=>{const[j,,L]=I;if(a)return a(...I);const{ids:D,isRtl:z,menuControlId:k}=L,{endSlot:V,...U}=j,Y=!!D,W=bf(m.current.submenuIcon,!!z),or=V||Y?(0,i.jsxs)(i.Fragment,{children:[V,Y?(0,i.jsx)(ir,{"arc-dropdown-submenu-icon":"",icon:W}):null]}):void 0;return(0,i.jsx)(Td,{...U,id:k,endSlot:or,...D?{popoverTarget:D.menu,popoverTargetAction:"toggle","aria-haspopup":"menu","aria-controls":D.menu}:{}})},[a]),S=I=>{b(I.newState==="open"),r?.onToggle?.(I)};return(0,i.jsx)(ga,{...f,ref:_,"arc-dropdown":"",variant:"common",onToggle:S,children:(0,i.jsx)(uf,{...o,"arc-dropdown-menu":"",passiveMode:n,submenuBackNavigation:c,items:e??[],renderItem:C,isVisible:v,keepMenuOpen:t,renderSubmenu:y})})};jd.displayName="ArcDropdownButton",Kn.Button=jd,Kn.Item=Td,lr("ArcDropdownMenu",vf);const Rd=r=>(0,i.jsx)(Ar,{...r,layout:"icon",size:"md",variant:"common",hierarchy:"tertiary"}),Wn=s`--arcâ¢link`,aa=s`${Wn}â¢fg`,po=s`${aa}â¢hover`,fo=s`${aa}â¢disabled`,Di=s`${Wn}â¢outline`,Pd=s`${Di}â¢size`,Ni=s`${Di}â¢offset`,$f=s`${Wn}â¢cursor`,mo=s`${Wn}â¢focusâ¢color`,yf=s` 5724@layer arc-components { 5725${S0} 5726 5727[arc-link] { 5728 5729 /* VARIANTS ------------------------------------------------------⢠*/ 5730 5731 &[data-variant=inherit] { /* @default */ 5732 ${aa}: currentcolor; 5733 ${po}: color-mix(in srgb, currentcolor, transparent 38.75%); 5734 ${fo}: color-mix(in srgb, currentcolor, transparent 70%); 5735 5736 ${mo}: var(--arc-color-border-focus); 5737 } 5738 5739 &[data-variant=primary] { 5740 ${aa}: var(--arc-color-fg-primary); 5741 ${po}: var(--arc-color-fg-secondary); 5742 ${fo}: var(--arc-color-fg-disabled); 5743 ${mo}: var(--arc-color-border-focus); 5744 } 5745 5746 &[data-variant=secondary] { 5747 ${aa}: var(--arc-color-fg-secondary); 5748 ${po}: var(--arc-color-fg-primary); 5749 ${fo}: var(--arc-color-fg-disabled); 5750 ${mo}: var(--arc-color-border-focus); 5751 } 5752 5753 /* @deprecated */ 5754 &[data-variant=inverse] { 5755 ${aa}: var(--arc-color-fg-on-mono-inverse); 5756 ${po}: var(--arc-link-fg-hover-inverse); 5757 ${fo}: var(--arc-link-fg-disabled-inverse); 5758 ${mo}: var(--arc-link-focus-disabled-inverse); 5759 } 5760 5761 & { 5762 ${Pd}: 0.125em; /* 2px */ 5763 ${Ni}: 0.0625em; /* 1px */ 5764 } 5765 5766 5767 /* STATES --------------------------------------------------------⢠*/ 5768 5769 &:not([data-is-disabled]):hover { 5770 ${aa}: var(--arc-link-color-hover, var(${po})); 5771 } 5772 5773 &:where(:focus, :focus-within):focus-visible { 5774 ${Di}: var(${Pd}) solid var(--arc-link-color-focus, var(${mo})); 5775 ${Ni}: var(${Ni}); 5776 5777 * { 5778 outline: none; 5779 } 5780 } 5781 5782 &[data-is-disabled] { 5783 ${aa}: var(--arc-link-color-disabled, var(${fo})); 5784 ${$f}: not-allowed; 5785 } 5786 5787 5788 & { 5789 5790 /* Inter-Component Communication -------------------------------⢠*/ 5791 --arc-icon-color: var(--arc-link-color, var(${aa})); /** ArcIcon color */ 5792 5793 } 5794 5795} 5796 5797 5798/* CORE STYLES ------------------------------------------------------ */ 5799 5800[arc-link] { 5801 color: var(--arc-link-color, var(${aa})); 5802 border-radius: var(--arc-border-radius-sm); /* for focus outline */ 5803 text-decoration: var(--arc-link-text-decoration, underline); 5804 5805 [data-element=icon] { 5806 text-decoration: none; 5807 } 5808 5809 [data-element=text] { 5810 text-decoration: var(--arc-link-text-decoration, underline); 5811 text-decoration-color: currentcolor; 5812 } 5813} 5814 5815} 5816`,xf=ar(_r,["inherit","primary","secondary","inverse"]),kf=({children:r,layout:e="gutter",size:a="inherit",variant:t="inherit",tag:o="a",href:n,icon:c,text:l,overflow:d,iconSize:h,gapSize:g,isFlipped:f,isDisabled:v,...b})=>(0,i.jsx)(o,{...b,href:v?void 0:n,"arc-link":"","data-variant":t,"aria-disabled":v,"data-is-disabled":v?"":void 0,children:r||(0,i.jsx)(re,{icon:c,text:l,overflow:d,iconSize:h,gapSize:g,size:a,layout:e,isFlipped:f})});lr("ArcLink",yf);const wf=[...sa],Cf=ar(_r,["common"]),Af=ar(_r,["common","critical"]),Sf=ar(_r,["common","brand","info","success","warning","error","processing"]),zf=["auto","dark","light","none"],Ef=["auto","all","top-bottom","left-right","left-right-top","left-right-bottom","top-bottom-left","top-bottom-right","none"],_f=ar(oe,["xl","lg","md","sm","custom","fullscreen"]),If=["cancel","escape","outside","button:dismiss","button:back","button:primary","button:secondary","button:tertiary","confirm:discard","confirm:cancel"],Fi=r=>r?.matches(":modal"),Hi=(r,e)=>e.target===r,Tf=(r,e)=>e.clientX<r.left||e.clientX>
5816r.right||e.clientY<r.top||e.clientY>r.bottom,bo=({modalRef:r,shouldConfirm:e,setIsConfirming:a,onCloseOverride:t=void 0})=>(o,n)=>c=>{if(c?.preventDefault?.(),c?.stopPropagation?.(),!r?.current){n?.(c);return}if(t){t(o,c,r.current),n?.(c);return}if(e&&o!=="confirm:discard"){a?.(!0);return}r.current?.close(o),a?.(!1),n?.(c)},Vi=({modalRef:r,shouldConfirm:e,setIsConfirming:a,onClose:t,onToggle:o})=>{(0,u.useEffect)(()=>{const n=r.current;if(!n)return;const c=d=>{Fi(n)&&Hi(n,d)&&(e?(d.preventDefault(),d.stopPropagation(),a?.(!0)):t?.("outside",d))},l=d=>{Hi(n,d)&&(a?.(!1),t?.(n.returnValue,d),o?.(!1,d))};return n.addEventListener("close",l),n.addEventListener("cancel",c),()=>{n.removeEventListener("close",l),n.removeEventListener("cancel",c)}},[r,e,a,t,o])},Ui=({modalRef:r,isOpen:e,isTopLayer:a})=>{(0,u.useEffect)(()=>{const t=r.current;t&&(e&&!t.open&&(a?t.showModal():t.show()),!e&&t.open&&t.close())},[e,a])},Ki=({modalRef:r,isOpen:e,autoFocusId:a})=>{(0,u.useEffect)(()=>{const t=r.current;if(!t||!a||!e)return;const o=t.querySelector(`#${a}`);if(!o||!(o instanceof HTMLElement))return;const n=setTimeout(()=>{o.focus()},0);return()=>clearTimeout(n)},[r,a,e])},Ld=(r,e)=>(typeof r.composedPath=="function"?r.composedPath():[]).includes(e)||r.target instanceof Node&&e.contains(r.target),Md=({modalRef:r,isOpen:e=!1,closeOnBackdrop:a=!1,attemptCloseModal:t})=>{(0,u.useEffect)(()=>{const o=r.current;if(!o||!e||!a||!Fi(o))return;let n=!1;const c=d=>{n=Ld(d,o)},l=d=>{if(n||Ld(d,o))return;const h=o.getBoundingClientRect();Tf(h,d)&&t("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,t,e,a])},Bd=({modalRef:r,isOpen:e=!1,closeOnEsc:a=!1,closedBy:t="closerequest",attemptCloseModal:o})=>{(0,u.useEffect)(()=>{const n=r.current;if(!n||!e||!a||!Fi(n))return;const c=l=>{if(l.key==="Escape"&&Hi(n,l)){if(t==="none"){l.stopPropagation(),l.preventDefault();return}o("escape")(l)}};return document.addEventListener("keydown",c),()=>document.removeEventListener("keydown",c)},[r,o,e,a,t])},Wi=r=>(0,i.jsx)(Ar,{"aria-label":"Dismiss",text:"Dismiss",...r,variant:"common",hierarchy:"tertiary",icon:"fa-regular fa-xmark-large",layout:"icon",shape:"square",size:"md"}),jf=r=>(0,i.jsx)(Ar,{"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"}),Gn=(0,u.forwardRef)(({inert:r,...e},a)=>(0,i.jsx)("div",{...e,ref:a,"arc-modal-content":"",inert:r}));Gn.displayName="ModalContent";const Od=({showDivider:r,...e})=>(0,i.jsx)("header",{...e,"arc-modal-header":"","has-divider":r?"":void 0}),Rf=({glyph:r,variant:e="common"})=>(0,i.jsx)(i.Fragment,{children:r&&(0,i.jsx)(ir,{icon:r,"arc-modal-glyph":"","arc-icon-status":e})}),Gi=r=>{const{titleContent:e,TitleElement:a="h2",...t}=r;return(0,i.jsx)(i.Fragment,{children:e&&(0,i.jsx)(a,{...t,"arc-modal-title":"",children:typeof e=="string"?e:(0,i.jsx)(re,{...e})})})},Pf=({message:r,...e})=>(0,i.jsx)(i.Fragment,{children:r&&(0,i.jsx)("p",{...e,"arc-modal-message":"",children:r})}),qi=({tag:r="section",padding:e,...a})=>(0,i.jsx)(r,{...a,"arc-modal-body":"","data-padding":e==="auto"?void 0:e}),Yi=({showDivider:r,...e})=>(0,i.jsx)("footer",{...e,"arc-modal-footer":"","has-divider":r?"":void 0}),Lf=r=>e=>{if(e.key==="Escape"){if(r==="none"){e.stopPropagation(),e.preventDefault();return}return"escape"}},Q=s`--arcâ¢modal`,$o=s`${Q}â¢layout`,Mf=s`${Q}â¢header`,qn=s`${Q}â¢body`,yo=s`${Q}â¢footer`,Dd=s`${Q}â¢fg`,Yn=s`${Q}â¢bg`,ta=s`${Q}â¢backdrop`,Ia=s`${Q}â¢scale`,wt=s`${Mf}â¢padding`,wr=s`${qn}â¢padding`,Ta=s`${yo}â¢padding`,Bf=s` 5817 ${Q}â¢fontâ¢size: var(${p}â¢14); 5818 ${Q}â¢gap: var(${E}â¢16); 5819 5820 ${$o}â¢rows: auto 1fr auto; 5821 ${$o}â¢columns: auto; 5822 5823 &:not(:has([arc-modal-footer])):has([arc-modal-header]) { 5824 ${$o}â¢rows: auto 1fr; 5825 } 5826
5827 &:not(:has([arc-modal-header])):has([arc-modal-footer]) { 5828 ${$o}â¢rows: 1fr auto; 5829 } 5830 5831 &:not(:has([arc-modal-header])):not(:has([arc-modal-footer])) { 5832 ${$o}â¢rows: auto; 5833 } 5834 5835 ${Dd}: var(--arc-color-fg-primary); 5836 ${Yn}: var(--arc-color-bg-primary); 5837 ${Q}â¢border: none; 5838 ${Q}â¢borderâ¢radius: var(--arc-border-radius-lg); 5839 ${Q}â¢divider: var(${p}â¢1) solid var(--arc-color-border-mid); 5840 5841 ${Q}â¢maxâ¢width: calc(100vw - var(${E}â¢32)); 5842 ${Q}â¢minâ¢width: unset; 5843 ${Q}â¢width: auto; 5844 5845 ${Q}â¢maxâ¢height: calc(100vh - var(${E}â¢32)); 5846 ${Q}â¢minâ¢height: unset; 5847 ${Q}â¢height: max-content; 5848 5849 ${Ia}: 1; 5850 ${Ia}â¢start: 0.95; 5851 5852 ${qn}â¢textâ¢align: unset; 5853 ${yo}â¢justifyâ¢content: flex-end; 5854 5855 ${ta}â¢bg: var(--arc-color-overlay-stark); 5856 ${ta}â¢pointerâ¢events: none; 5857 ${ta}â¢cursor: default; 5858 5859 &:where([is-backdrop=light]) { 5860 ${ta}â¢bg: var(--arc-color-overlay-subtle); 5861 } 5862 5863 &:where([is-backdrop=dark]) { 5864 ${ta}â¢bg: var(--arc-color-overlay-stark); 5865 } 5866 5867 &:where([is-backdrop=none]) { 5868 ${ta}â¢bg: transparent; 5869 } 5870`,Of=s` 5871 &[data-size=sm] { 5872 ${Q}â¢width: 28em; 5873 } 5874 5875 &[data-size=md] { 5876 ${Q}â¢width: 40em; 5877 } 5878 5879 &[data-size=lg] { 5880 ${Q}â¢width: 50em; 5881 } 5882 5883 &[data-size=xl] { 5884 ${Q}â¢width: 64em; 5885 } 5886 5887 &[data-size=custom] { 5888 ${Q}â¢width: auto; 5889 ${Q}â¢height: max-content; 5890 } 5891 5892 &[data-size=fullscreen] { 5893 ${Q}â¢width: 100vw; 5894 ${Q}â¢height: 100vh; 5895 ${Q}â¢minâ¢width: 100vw; 5896 ${Q}â¢minâ¢height: 100vh; 5897 ${Q}â¢maxâ¢width: 100vw; 5898 ${Q}â¢maxâ¢height: 100vh; 5899 ${Q}â¢borderâ¢radius: var(--arc-border-radius-none); 5900 5901 ${Ia}: 1; 5902 ${Ia}â¢start: 1.125; 5903 } 5904`,Df=s` 5905 &[is-confirm] { 5906 ${yo}â¢justifyâ¢content: flex-end; 5907 5908 &[is-confirm=critical] [arc-modal-title] { 5909 --arc-icon-text-icon-color: var(--arc-color-fg-critical-mid); 5910 } 5911 } 5912 5913 &[is-alert] { 5914 ${qn}â¢textâ¢align: center; 5915 ${yo}â¢justifyâ¢content: center; 5916 5917 ${wr}â¢blockâ¢start: var(${E}â¢40); 5918 ${wr}â¢blockâ¢end: var(${E}â¢20); 5919 5920 ${Ta}â¢blockâ¢start: var(${E}â¢12); 5921 ${Ta}â¢blockâ¢end: var(${E}â¢40); 5922 5923 ${Q}â¢glyphâ¢size: var(${p}â¢48); 5924 5925 [arc-modal-spinner] { 5926 --arc-spinner-circle-opacity: 9.8%; /* 9.8% = neutral-200 on white */ 5927 --arc-spinner-size: var(${Q}â¢glyphâ¢size); 5928 } 5929 5930 [arc-modal-glyph] { 5931 --arc-icon-display: flex; 5932 --arc-icon-size: var(${Q}â¢glyphâ¢size); 5933 --arc-icon-height: var(--arc-icon-size); 5934 --arc-icon-max-height: var(--arc-icon-size); 5935 } 5936 5937 [arc-modal-body] { 5938 display: flex; 5939 flex-direction: column; 5940 align-items: center; 5941 justify-content: center; 5942 gap: var(${E}â¢12); 5943 } 5944 } 5945 5946 &:not([is-top-layer]) { 5947 z-index: var(--arc-modal-z-index, 1000); 5948 } 5949`,Nf=s` 5950 [arc-modal-content] { 5951 &:has([arc-modal-header]) { 5952 ${wr}â¢blockâ¢start: var(${E}â¢10); 5953 } 5954 5955 &:has([arc-modal-footer]) { 5956 ${wr}â¢blockâ¢end: var(${E}â¢10); 5957 } 5958 5959 &:has([arc-modal-header][has-divider]) { 5960 ${wt}â¢blockâ¢end: var(${E}â¢20); 5961 ${wr}â¢blockâ¢start: var(${E}â¢20); 5962 } 5963 5964 &:has([arc-modal-footer][has-divider]) { 5965 ${wr}â¢blockâ¢end: var(${E}â¢20); 5966 ${Ta}â¢blockâ¢start: var(${E}â¢12); 5967 ${Ta}â¢blockâ¢end: var(${E}â¢12); 5968 } 5969 5970 &:has([arc-modal-body][data-padding=top-bottom]) { 5971 ${wr}â¢inlineâ¢start: 0; 5972 ${wr}â¢inlineâ¢end: 0; 5973 } 5974 5975 &:has([arc-modal-body][data-padding=left-right]) { 5976 ${wr}â¢blockâ¢start: 0; 5977 ${wr}â¢blockâ¢end: 0; 5978 } 5979 5980 &:has([arc-modal-body][data-padding=left-right-top]) { 5981 ${wr}â¢blockâ¢end: 0; 5982 } 5983 5984 &:has([arc-modal-body][data-padding=left-right-bottom]) { 5985 ${wr}â¢blockâ¢start: 0; 5986 } 5987 5988 &:has([arc-modal-body][data-padding=top-bottom-left]) { 5989 ${wr}â¢inlineâ¢end: 0; 5990 } 5991 5992 &:has([arc-modal-body][data-padding=top-bottom-right]) { 5993 ${wr}â¢inlineâ¢start: 0; 5994 } 5995 5996 &:has([arc-modal-body][data-padding=all]) { 5997 ${wr}â¢blockâ¢start: var(${E}â¢20); 5998 ${wr}â¢inlineâ¢end: var(${E}â¢24); 5999 ${wr}â¢blockâ¢end: var(${E}â¢20); 6000 ${wr}â¢inlineâ¢start: var(${E}â¢24); 6001 } 6002 6003 &:has([arc-modal-go-back]) { 6004 ${wt}â¢inlineâ¢start: var(${E}â¢20); 6005 } 6006 6007 ${wt}: 6008 var(${E}â¢20) 6009 var(${E}â¢24) 6010 var(${wt}â¢blockâ¢end, var(${E}â¢10)) 6011 var(${wt}â¢inlineâ¢start, var(${E}â¢24)); 6012 6013 ${wr}: 6014 var(${wr}â¢blockâ¢start, var(${E}â¢20)) 6015 var(${wr}â¢inlineâ¢end, var(${E}â¢24)) 6016 var(${wr}â¢blockâ¢end, var(${E}â¢20)) 6017 var(${wr}â¢inlineâ¢start, var(${E}â¢24)); 6018 6019 ${Ta}: 6020 var(${Ta}â¢blockâ¢start, var(${E}â¢10)) 6021 var(${E}â¢24) 6022 var(${Ta}â¢blockâ¢end, var(${E}â¢20)) 6023 var(${E}â¢24); 6024 6025 &:has([arc-modal-body][data-padding=none]) { 6026 ${wr}: 0; 6027 } 6028 } 6029`,Ff=s` 6030 [arc-modal] { 6031 transition-behavior: allow-discrete, smooth; 6032 transition-duration: var(--arc-modal-transition-duration, 240ms); 6033 transition-property: display, opacity, scale; 6034 transition-timing-function: ease-out; 6035 6036 &::after { 6037 transition: inherit; 6038 } 6039 6040 &::backdrop { 6041 transition: inherit; 6042 } 6043 } 6044 6045 @supports (overlay: auto) { 6046 [arc-modal] { 6047 transition-behavior: allow-discrete; 6048 transition-property: display, overlay, opacity, scale; 6049 } 6050 } 6051`,Hf=s` 6052 [arc-modal] { 6053 opacity: 0; 6054 scale: var(--arc-modal-scale, var(${Ia})); 6055 6056 &::after { 6057 opacity: 0; 6058 } 6059 6060 &::backdrop { 6061 opacity: 0; 6062 } 6063 6064 &[open] { 6065 display: flex; 6066 flex-direction: column; 6067 opacity: 1; 6068 } 6069 6070 &[open]::after { 6071 opacity: 1; 6072 } 6073 6074 &[open]::backdrop { 6075 opacity: 1; 6076 } 6077 } 6078 6079 @starting-style { 6080 [arc-modal][open] { 6081 opacity: 0; 6082 scale: var(--arc-modal-scale-start, var(${Ia}â¢start)); 6083 } 6084 6085 [arc-modal][open]::after { 6086 opacity: 0; 6087 } 6088 6089 [arc-modal][open]::backdrop { 6090 opacity: 0; 6091 } 6092 } 6093`,Zi=s` 6094@layer arc-components { 6095 6096 /* SETUP ---------------------------------------------------------⢠*/ 6097 6098 [arc-modal] { 6099 ${Bf} 6100 ${Of} 6101 ${Df} 6102 ${Nf} 6103 } 6104 6105 /* REDUCED MOTION ------------------------------------------------⢠*/ 6106 6107 @media (prefers-reduced-motion: reduce) { 6108 [arc-modal] { 6109 ${Ia}: 1; 6110 ${Ia}
6110â¢start: 1; 6111 } 6112 } 6113 6114 /* CORE ----------------------------------------------------------⢠*/ 6115 6116 [arc-modal] { 6117 will-change: opacity, scale; 6118 contain: layout style paint; 6119 6120 inset: var(--arc-modal-inset, 0); 6121 translate: var(--arc-modal-translate, none); 6122 margin: var(--arc-modal-margin, auto); 6123 6124 padding: 0; 6125 color: var(--arc-modal-color, var(${Dd})); 6126 background: var(--arc-modal-background, var(${Yn})); 6127 border: var(--arc-modal-border, var(${Q}â¢border)); 6128 border-radius: var(--arc-modal-border-radius, var(${Q}â¢borderâ¢radius)); 6129 box-shadow: var(--arc-modal-box-shadow, var(--arc-shadow-lg)); 6130 outline: var(--arc-modal-outline, none); 6131 6132 width: var(--arc-modal-width, var(${Q}â¢width)); 6133 height: var(--arc-modal-height, var(${Q}â¢height)); 6134 min-width: var(--arc-modal-min-width, var(${Q}â¢minâ¢width)); 6135 min-height: var(--arc-modal-min-height, var(${Q}â¢minâ¢height)); 6136 max-width: var(--arc-modal-max-width, var(${Q}â¢maxâ¢width)); 6137 max-height: var(--arc-modal-max-height, var(${Q}â¢maxâ¢height)); 6138 6139 &::backdrop { 6140 will-change: opacity; 6141 contain: layout style paint; 6142 6143 background: var(--arc-modal-backdrop-background, var(${ta}â¢bg)); 6144 pointer-events: var(${ta}â¢pointerâ¢events, none); 6145 cursor: var(${ta}â¢cursor, default); 6146 } 6147 6148 [arc-modal-content] { 6149 font-size: var(--arc-modal-font-size, var(${Q}â¢fontâ¢size)); 6150 flex: 1 1 min-content; 6151 display: flex; 6152 flex-direction: column; 6153 overflow: hidden; 6154 position: relative; 6155 z-index: 1; 6156 6157 /* Force remove margin from controlled title and message elements */ 6158 :is([arc-modal-title], [arc-modal-message]) { margin: 0 !important; } 6159 } 6160 6161 [arc-modal-header] { 6162 flex: none; 6163 position: relative; 6164 z-index: 1; 6165 6166 display: flex; 6167 align-items: var(--arc-modal-header-align-items, unset); 6168 justify-content: space-between; 6169 gap: var(--arc-modal-header-gap, var(${Q}â¢gap)); 6170 6171 padding: var(${wt}); 6172 background: var(--arc-modal-header-background, var(${Yn})); 6173 max-width: 100%; 6174 6175 &:where([has-divider]) { 6176 border-bottom: var(--arc-modal-header-divider, var(${Q}â¢divider)); 6177 } 6178 6179 :where([header-slot]) { 6180 display: flex; 6181 align-items: inherit; 6182 gap: inherit; 6183 } 6184 6185 :where([header-slot=content]) { 6186 flex: 1; 6187 align-self: flex-start; 6188 } 6189 6190 :where([header-slot=dismiss]) { 6191 margin: var(${E}â¢4m) var(${E}â¢8m) var(${E}â¢4m) var(${E}â¢4m); 6192 } 6193 6194 :where([header-slot=go-back]) { 6195 margin: var(${E}â¢4m) 0 var(${E}â¢4m) var(${E}â¢4m); 6196 } 6197 } 6198 6199 [arc-modal-title] { 6200 --arc-icon-text-gap: var(${E}â¢8); 6201 6202 [data-element=subtext] { 6203 font-family: var(--arc-font-family-body); 6204 font-weight: var(--arc-font-weight-body); 6205 font-size: var(--arc-font-size-body-md); 6206 color: inherit; 6207 margin-top: var(${E}â¢4); 6208 } 6209 } 6210 6211 [arc-modal-body] { 6212 flex: 1; 6213 padding: var(${wr}); 6214 overflow: auto; 6215 overscroll-behavior: var(--arc-modal-overscroll-behavior, contain); 6216 min-height: var(--arc-modal-body-min-height, 3em); 6217 text-align: var(--arc-modal-body-text-align, var(${qn}â¢textâ¢align)); 6218 } 6219 6220 [arc-modal-footer] { 6221 flex: none; 6222 position: relative; 6223 z-index: 1; 6224 6225 display: flex; 6226 flex-direction: var(--arc-modal-footer-flex-direction, unset); 6227 align-items: var(--arc-modal-footer-align-items, center); 6228 justify-content: var(--arc-modal-footer-justify-content, var(${yo}â¢justifyâ¢content)); 6229 gap: var(--arc-modal-footer-gap, var(${Q}â¢gap)); 6230 6231 background: var(--arc-modal-footer-background, var(${Yn})); 6232 padding: var(--arc-modal-footer-padding, var(${Ta})); 6233 max-width: 100%; 6234 6235 &[has-divider] { 6236 border-top: var(--arc-modal-footer-divider, var(${Q}â¢divider)); 6237 } 6238 6239 [footer-slot=content] { 6240 flex: var(--arc-modal-footer-content-flex, none); 6241 display: var(--arc-modal-footer-content-display, flex); 6242 gap: inherit; 6243 } 6244 } 6245 6246 [arc-modal-dismiss] { 6247 position: var(--arc-modal-dismiss-position, absolute); 6248 inset: var(--arc-modal-dismiss-inset, var(${E}â¢16) var(${E}â¢16) auto auto); 6249 width: var(--arc-modal-dismiss-width, auto); 6250 overflow: visible; 6251 z-index: 2; 6252 } 6253 6254 /* Nested confirm modal */ 6255 &:not([is-top-layer]):has([arc-modal][is-confirm][open])::after { 6256 content: ''; 6257 position: absolute; 6258 inset: 0; 6259 background: var(--arc-modal-backdrop-background, var(${ta}â¢bg)); 6260 z-index: var(--arc-modal-confirm-z-index, 2); 6261 } 6262 6263 /* Nested modals */ 6264 [arc-modal] { 6265 --arc-modal-min-width: var(--arc-modal-nested-min-width, none); 6266 --arc-modal-min-height: var(--arc-modal-nested-min-height, none); 6267 } 6268 6269 [arc-modal][is-alert] { 6270 --arc-modal-min-width: var(--arc-modal-nested-alert-min-width, none); 6271 --arc-modal-min-height: var(--arc-modal-nested-alert-min-height, none); 6272 } 6273 6274 [arc-modal][is-confirm] { 6275 --arc-modal-width: var(--arc-modal-confirm-width, 25em); 6276 --arc-modal-height: var(--arc-modal-confirm-height, max-content); 6277 --arc-modal-min-width: var(--arc-modal-confirm-min-width, none); 6278 --arc-modal-min-height: var(--arc-modal-confirm-min-height, none); 6279 --arc-modal-max-width: var(--arc-modal-confirm-max-width, calc(100% - var(${E}â¢32))); 6280 --arc-button-bar-flex: none; 6281 6282 z-index: var(--arc-modal-confirm-z-index, 3); 6283 6284 inset: var(--arc-modal-confirm-inset, 0); 6285 translate: var(--arc-modal-confirm-translate, none); 6286 margin: var(--arc-modal-confirm-margin, auto); 6287 } 6288 } 6289 6290 ${Ff} 6291 ${Hf} 6292`,ja={variant:"common",backdropColor:"auto",message:"You have unsaved changes. Discard them?",onCloseOverride:void 0,isTopLayer:!0,isInverse:!1,scheme:"auto"},Nd=({children:r,headerProps:e,bodyProps:a,footerProps:t,...o})=>{const n=(0,u.useRef)(null),{isOpen:c,autoFocusId:l,isTopLayer:d=ja.isTopLayer,isInverse:h=ja.isInverse,scheme:g=ja.scheme,backdropColor:f=ja.backdropColor,variant:v=ja.variant,message:b=ja.message,onCloseOverride:m=ja.onCloseOverride,onConfirmDiscard:$,onConfirmCancel:w,
6292contentRef:_,...y}=o,{slotStart:C,TitleElement:S,titleContent:I,slotEnd:j,...L}=e||{},{primaryButton:D,secondaryButton:z,...k}=t||{},V=!!(I||C||j),U=g==="auto"?void 0:g,Y=!!m,W=R=>Y?m?.("confirm:discard",R,n.current??void 0):$?.("confirm:discard",R),or=R=>Y?m?.("confirm:cancel",R,n.current??void 0):w?.("confirm:cancel",R);Vi({modalRef:n,onClose:m}),Ui({modalRef:n,isOpen:c,isTopLayer:d}),Ki({modalRef:n,isOpen:c,autoFocusId:l});const N=R=>{or(R),z?.onClick?.(R)},tr=R=>{W(R),D?.onClick?.(R)};return(0,i.jsx)("dialog",{...y,ref:n,"arc-modal":"","arc-scheme":h?"inverse":U,"is-confirm":v||"","is-inverse":h?"":void 0,"is-top-layer":d?"":void 0,"is-backdrop":f==="auto"?void 0:f,"data-size":"sm",closedby:"none",onKeyDown:Lf("none"),children:(0,i.jsxs)(Gn,{ref:_,children:[V&&(0,i.jsxs)(Od,{...L,children:[C&&(0,i.jsx)("div",{"header-slot":"start",children:C}),(0,i.jsx)("div",{"header-slot":"content",children:(0,i.jsx)(Gi,{TitleElement:S,titleContent:I})}),j&&(0,i.jsx)("div",{"header-slot":"end",children:j})]}),(0,i.jsx)(qi,{...a,children:r||b&&(0,i.jsx)("p",{style:{margin:0},children:b})}),(0,i.jsx)(Yi,{...k,children:(0,i.jsxs)(_n,{children:[(0,i.jsx)(Ar,{...z,text:z?.text||"Cancel",variant:"common",hierarchy:"secondary",isInverse:h,onClick:N}),(0,i.jsx)(Ar,{...D,text:D?.text||"Discard",variant:v??"common",hierarchy:"primary",isInverse:h,onClick:tr})]})})]})})};lr("ArcModalConfirm",Zi);const le={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}},Vf=({children:r,confirmProps:e,headerProps:a,bodyProps:t,dismissProps:o,footerProps:n,...c})=>{const l=(0,u.useRef)(null),[d,h]=(0,u.useState)(!1),{isOpen:g,autoFocusId:f,isTopLayer:v=le.isTopLayer,isInverse:b=le.isInverse,scheme:m=le.scheme,backdropColor:$=le.backdropColor,hasConfirmFlow:w=le.hasConfirmFlow,hasUnsavedChanges:_=le.hasUnsavedChanges,onCloseOverride:y=le.onCloseOverride,bypassConfirmWhen:C=le.bypassConfirmWhen??{},size:S=le.size,closeOnBackdrop:I=le.closeOnBackdrop,closeOnEsc:j=le.closeOnEsc,showDismiss:L=le.showDismiss,onActionError:D,onClose:z,onToggle:k,width:V,height:U,style:Y,contentRef:W,...or}=c,{showGoBack:N,goBackProps:tr,slotStart:R,TitleElement:F,titleContent:H,slotEnd:M,showDivider:rr=le.headerProps?.showDivider,...er}=a??{},{slotStart:Z,primaryButton:hr,secondaryButton:P,tertiaryButton:X,showDivider:vr=le.footerProps?.showDivider,...pr}=n??{},Cr=!!(N||H||R||M),Xr=!!(hr||P||X),Be=!!(Xr||Z),G=!!(w&&_),Rr=j?"closerequest":"none",gr=m==="auto"?void 0:m,{didPressEscapeKey:Nr,didClickBackdrop:de,didClickGoBackButton:Ye,didClickDismissButton:ia,didClickPrimaryButton:_o,didClickSecondaryButton:Io,didClickTertiaryButton:To}=C,Ze=bo({modalRef:l,shouldConfirm:G,setIsConfirming:h,onCloseOverride:y});Vi({modalRef:l,shouldConfirm:G,setIsConfirming:h,onClose:z,onToggle:k}),Ui({modalRef:l,isOpen:g,isTopLayer:v}),Ki({modalRef:l,isOpen:g,autoFocusId:f}),Md({modalRef:l,isOpen:g,closeOnBackdrop:I,attemptCloseModal:de?bo({modalRef:l,shouldConfirm:G&&!de,setIsConfirming:h}):Ze}),Bd({modalRef:l,isOpen:g,closeOnEsc:j,closedBy:Rr,attemptCloseModal:Nr?bo({modalRef:l,shouldConfirm:G&&!Nr,setIsConfirming:h}):Ze});const nr=()=>h(!1),Pr=(me,xa)=>Ze(me)(xa),ue=(me,xa,Qa)=>async ka=>{ka?.preventDefault?.(),ka?.stopPropagation?.();const jo=()=>xa?bo({modalRef:l,shouldConfirm:G&&!xa,setIsConfirming:h})(me,Qa?.onCloseCallback)(ka):Ze(me,Qa?.onCloseCallback)(ka);try{await Qa?.onClick?.(ka),jo()}catch(Xe){D?.(Xe,{reason:me,event:ka})}};return(0,i.jsxs)("dialog",{...or,ref:l,"arc-modal":"","arc-scheme":b?"inverse":gr,"is-inverse":b?"":void 0,"is-top-layer":v?"":void 0,"is-backdrop":$==="auto"?void 0:$,"data-size":S,closedby:Rr,style:{"--arc-modal-width":V??"","--arc-modal-height":U??"",...Y},children:[!Cr&&L&&(0,i.jsx)("div",{"arc-modal-dismiss":"",children:(0,i.jsx)(Wi,{...o,isInverse:b,onClick:ue("button:dismiss",ia,o)})}),(0,i.jsxs)(Gn,{ref:W,inert:d?"":void 0,children:[Cr&&(0,i.jsxs)(Od,{...er,showDivider:rr,children:[N&&(0,i.jsx)("div",{"header-slot":"go-back",children:(0,i.jsx)(jf,{...tr,isInverse:b,onClick:ue("button:back",Ye,tr)})}),R&&(0,i.jsx)("div",{"header-slot":"start",children:R}),(0,i.jsx)("div",{"header-slot":"content",children:(0,i.jsx)(Gi,{TitleElement:F,titleContent:H})}),M&&(0,i.jsx)("div",{"header-slot":"end",children:M}),L&&(0,i.jsx)("div",{"header-slot":"dismiss",children:(0,i.jsx)(Wi,{...o,isInverse:b,onClick:ue("button:dismiss",ia,o)})})]}),(0,i.jsx)(qi,{...t,children:r}),Be&&(0,i.jsxs)(Yi,{...pr,showDivider:vr,children:[Z&&(0,i.jsx)("div",{"footer-slot":"content",children:Z}),Xr&&(0,i.jsxs)(_n,{children:[X&&(0,i.jsx)(Ar,{...X,text:X?.text||"Button",isInverse:b,variant:"common",hierarchy:"tertiary",onClick:ue("button:tertiary",To,X)}),P&&(0,i.jsx)(Ar,{...P,text:P?.text||"Cancel",isInverse:b,variant:"common",hierarchy:"secondary",onClick:ue("button:secondary",Io,P)}),hr&&(0,i.jsx)(Ar,{...hr,text:hr?.text||"Action",isInverse:b,variant:"common",hierarchy:"primary",onClick:ue("button:primary",_o,hr)})]})]})]}),w&&(0,i.jsx)(Nd,{isOpen:d,isInverse:b,isTopLayer:v,backdropColor:$,...e,onConfirmDiscard:Pr,onConfirmCancel:nr})]})};lr("ArcModal",Zi);const ba={variant:"common",backdropColor:"auto",showDismiss:!0,closeOnBackdrop:!1,closeOnEsc:!0,onCloseOverride:void 0,isTopLayer:!0,isInverse:!1,scheme:"auto"},Uf={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,i.jsx)(Pc,{"arc-modal-spinner":""})},Kf=({children:r,dismissProps:e,bodyProps:a,footerProps:t,...o})=>{const n=(0,u.useRef)(null),{isOpen:c,autoFocusId:l,isTopLayer:d=ba.isTopLayer,isInverse:h=ba.isInverse,scheme:g=ba.scheme,backdropColor:f=ba.backdropColor,closeOnBackdrop:v=ba.closeOnBackdrop,closeOnEsc:b=ba.closeOnEsc,variant:m=ba.variant,icon:$,TitleElement:w,titleContent:_,message:y,showDismiss:C,onCloseOverride:S=ba.onCloseOverride,onClose:I,onToggle:j,contentRef:L,...D}=o,{primaryButton:z,...k}=t??{},V=$||Uf[m],U=b?"closerequest":"none",Y=g==="auto"?void 0:g,W=bo({modalRef:n,onCloseOverride:S});return Vi({modalRef:n,onClose:I,onToggle:j}),Ui({modalRef:n,isOpen:c,isTopLayer:d}),Ki({modalRef:n,isOpen:c,autoFocusId:l}),Md({modalRef:n,isOpen:c,closeOnBackdrop:v,attemptCloseModal:W}),Bd({modalRef:n,isOpen:c,closeOnEsc:b,closedBy:U,attemptCloseModal:W}),(0,i.jsxs)("dialog",{...D,ref:n,"arc-modal":"","arc-scheme":h?"inverse":Y,"is-alert":m||"","is-inverse":h?"":void 0,"is-top-layer":
6292d?"":void 0,"is-backdrop":f==="auto"?void 0:f,"data-size":"sm",closedby:U,children:[C&&(0,i.jsx)("div",{"arc-modal-dismiss":"",children:(0,i.jsx)(Wi,{...e,isInverse:h,onClick:W("button:dismiss",e?.onClick)})}),(0,i.jsxs)(Gn,{ref:L,children:[(0,i.jsx)(qi,{...a,children:r||(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(Rf,{glyph:V,variant:m}),(0,i.jsx)(Gi,{TitleElement:w,titleContent:_}),(0,i.jsx)(Pf,{message:y})]})}),(0,i.jsx)(Yi,{...k,children:(0,i.jsx)(_n,{orientation:"vertical",children:(0,i.jsx)(Ar,{...z,text:z?.text||"Close",variant:"common",hierarchy:"primary",isInverse:h,onClick:W("button:primary",z?.onClick)})})})]})]})};lr("ArcModalAlert",Zi);const Ur=s`--arcâ¢radio`,Wf=s` 6293@layer arc-components { 6294 6295 [arc-radio] { 6296 /* SIZES -------------------------------------------------------⢠*/ 6297 &[data-size=inherit] { 6298 ${Ur}â¢fontâ¢size: 1em; 6299 ${Ur}â¢iconâ¢size: 0.625em; 6300 ${Ur}â¢size: 1.125em; 6301 ${Ur}â¢gap: 0.5em; 6302 } 6303 6304 &[data-size=md] { 6305 ${Ur}â¢fontâ¢size: var(${p}â¢14); 6306 ${Ur}â¢iconâ¢size: var(${p}â¢10); 6307 ${Ur}â¢size: var(${p}â¢18); 6308 ${Ur}â¢gap: var(${p}â¢8); 6309 } 6310 6311 &[data-size=sm] { 6312 ${Ur}â¢fontâ¢size: var(${p}â¢12); 6313 ${Ur}â¢iconâ¢size: var(${p}â¢10); 6314 ${Ur}â¢size: var(${p}â¢16); 6315 ${Ur}â¢gap: var(${p}â¢6); 6316 } 6317 6318 /* Inter-Component Communication -------------------------------⢠*/ 6319 /* for: Setup defaults for ArcBooleanInputMask */ 6320 ${B}â¢borderâ¢radius: var(--arc-border-radius-circle); 6321 ${B}â¢size: var(${Ur}â¢size); 6322 ${B}â¢iconâ¢size: var(${Ur}â¢iconâ¢size); 6323 ${B}â¢width: var(${Ur}â¢size); 6324 ${B}â¢height: var(${Ur}â¢size); 6325 ${B}â¢translate: 0 var(${p}â¢1m); 6326 6327 /* for: ArcLabel */ 6328 --arc-label-gap: var(${Ur}â¢gap); 6329 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask 6330 to stay inline with the label text 6331 regardless of applied line-height */ 6332 } 6333 6334 /* CORE STYLES ---------------------------------------------------⢠*/ 6335 [arc-radio]:not([hidden]) { 6336 font-size: var(${Ur}â¢fontâ¢size); 6337 display: var(--arc-radio-display, inline-flex); 6338 min-height: 1lh; 6339 6340 /* UNCHECKED, NOT-DISABLED, +HOVER ⢠default state */ 6341 &:not(:has(:checked)) { 6342 ${B}â¢color: transparent; 6343 ${B}â¢background: transparent; 6344 ${B}â¢borderâ¢color: var(--arc-color-border-stark); 6345 6346 &:hover { 6347 ${B}â¢background: var(--arc-color-bg-theme-subtle); 6348 ${B}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 6349 } 6350 6351 &:has(:disabled) { 6352 ${B}â¢background: var(--arc-color-bg-disabled); 6353 ${B}â¢borderâ¢color: var(--arc-color-border-disabled); 6354 } 6355 } 6356 6357 /* DISABLED */ 6358 &:has(:disabled) { 6359 color: var(--arc-color-fg-disabled); 6360 } 6361 6362 /* CHECKED, ?NOT-DISABLED+HOVER, ?DISABLED */ 6363 &:has(:checked) { 6364 ${B}â¢color: var(--arc-color-fg-on-theme-heavy); 6365 ${B}â¢background: var(--arc-color-bg-theme-heavy); 6366 ${B}â¢borderâ¢color: transparent; 6367 6368 &:not(:has(:disabled)):hover { 6369 ${B}â¢background: var(--arc-color-bg-theme-stark); 6370 } 6371 6372 &:has(:disabled) { 6373 ${B}â¢color: var(--arc-color-fg-on-theme-mid); 6374 ${B}â¢background: var(--arc-color-bg-theme-mid); 6375 } 6376 } 6377 } 6378 6379} 6380`,Gf=ar(Oe,["hug","fill"]),qf=ar(oe,["inherit","md","sm"]),Fd=({children:r,label:e,layout:a,size:t="md",useMask:o=!0,...n})=>{const{className:c,title:l,...d}=n,h={className:c,title:l},g=r??e,f=(0,i.jsx)(ao,{...d,type:"radio"}),v=o&&(0,i.jsxs)(xn,{type:"radio",children:[f,(0,i.jsx)(ir,{icon:"fa-solid fa-circle-small arc-fw"})]}),b=!!g&&(0,i.jsxs)(za,{layout:a,children:[v||f,(0,i.jsx)(Ka,{children:g})]});return(0,i.jsx)("span",{...h,"arc-radio":"","data-size":t,children:b||v||f})};lr("ArcRadio",Wf);const pe=s`--arcâ¢rb`,dr=s`${pe}â¢o`,Yf=s` 6381@layer arc-components { 6382 6383 [arc-radio-bar] { 6384 ${pe}â¢fontâ¢size: var(${p}â¢14); 6385 ${pe}â¢borderâ¢radius: var(${p}â¢8); 6386 ${pe}â¢background: var(--arc-color-bg-secondary); 6387 ${pe}â¢padding: var(${p}â¢4); 6388 ${pe}â¢gap: var(${p}â¢2); 6389 6390 ${dr}â¢color: var(--arc-color-fg-secondary); 6391 ${dr}â¢background: var(--arc-color-alpha-black-0); 6392 ${dr}â¢borderâ¢color: var(--arc-color-alpha-black-0); 6393 ${dr}â¢borderâ¢width: var(${p}â¢1); 6394 ${dr}â¢borderâ¢radius: var(${p}â¢4);
6394 /* bar-radius minus bar-padding */ 6395 6396 /* SIZES -------------------------------------------------------⢠*/ 6397 &[data-size=lg] { /* @default */ 6398 ${dr}â¢size: var(${p}â¢32); 6399 ${dr}â¢lineâ¢height: var(${p}â¢30); /* ⢠-2px to account for border-width (top/bottom) */ 6400 ${dr}â¢iconâ¢padding: var(${p}â¢8); 6401 ${dr}â¢textâ¢padding: var(${p}â¢12); 6402 } 6403 6404 &[data-size=md] { 6405 ${dr}â¢size: var(${p}â¢24); 6406 ${dr}â¢lineâ¢height: var(${p}â¢22); /* ⢠-2px to account for border-width (top/bottom) */ 6407 ${dr}â¢iconâ¢padding: var(${p}â¢6); 6408 ${dr}â¢textâ¢padding: var(${p}â¢8); 6409 } 6410 6411 /* LAYOUTS -----------------------------------------------------⢠*/ 6412 &[data-layout=hug] { /** @default */ 6413 ${pe}â¢display: inline-flex; 6414 } 6415 6416 &[data-layout=fill] { 6417 ${pe}â¢display: flex; 6418 } 6419 } 6420 6421 [arc-radio-bar-option] { 6422 /* Inter-Component Communication -------------------------------⢠*/ 6423 --arc-label-align-items: stretch; /* control ArcLabel's vertical footprint; 6424 allows long label text to wrap 6425 without compromising option's 6426 visual border */ 6427 6428 6429 /* STATES ------------------------------------------------------⢠*/ 6430 &:not(:has(:disabled, :checked)) { 6431 &:hover { 6432 ${dr}â¢color: var(--arc-color-fg-on-hover-default); 6433 ${dr}â¢background: var(--arc-color-bg-hover-default); 6434 ${dr}â¢borderâ¢color: var(--arc-color-border-stark); 6435 } 6436 } 6437 6438 &:has(:checked) { 6439 ${dr}â¢color: var(--arc-color-mono-black); 6440 ${dr}â¢background: var(--arc-color-mono-white); 6441 ${dr}â¢borderâ¢color: var(--arc-color-border-stark); 6442 ${dr}â¢fontâ¢weight: var(--arc-font-weight-500); 6443 } 6444 6445 &:has(:disabled) { 6446 ${dr}â¢color: var(--arc-color-fg-disabled); 6447 } 6448 6449 6450 &:has(:focus-within:focus-visible) { 6451 ${dr}â¢outline: var(${dr}
6451â¢borderâ¢width) solid var(--arc-color-border-focus); 6452 } 6453 } 6454 6455 /* CORE STYLES ---------------------------------------------------⢠*/ 6456 [arc-radio-bar-option] { 6457 flex: 1 1 auto; 6458 display: flex; 6459 position: relative; 6460 } 6461 6462 [arc-radio-bar]:not([hidden]) { 6463 font-size: var(--arc-radio-bar-font-size, var(${pe}â¢fontâ¢size)); 6464 display: var(${pe}â¢display); 6465 gap: var(${pe}â¢gap); 6466 border-radius: var(${pe}â¢borderâ¢radius); 6467 background: var(${pe}â¢background); 6468 padding: var(${pe}â¢padding); 6469 margin: 0; 6470 6471 [arc-radio] { 6472 flex: 1; 6473 display: flex; 6474 justify-content: center; 6475 border-radius: var(${dr}â¢borderâ¢radius); 6476 outline: var(${dr}â¢outline, none); 6477 outline-offset: var(${dr}â¢borderâ¢width); 6478 } 6479 6480 /* INPUT ELEMENT -----------------------------------------------⢠*/ 6481 [arc-input-type=radio] { 6482 position: absolute; 6483 appearance: none; 6484 pointer-events: none; 6485 opacity: 0; 6486 } 6487 6488 /* Inter-Component Communication -------------------------------⢠*/ 6489 [arc-label] { 6490 flex: 1; 6491 line-height: var(${dr}â¢lineâ¢height); 6492 overflow: hidden; 6493 } 6494 6495 [arc-label-content] { 6496 flex: 1; 6497 display: flex; 6498 align-items: safe center; 6499 justify-content: center; 6500 6501 height: var(${dr}â¢size); 6502 min-width: var(${dr}â¢size); 6503 6504 border-radius: var(${dr}â¢borderâ¢radius); 6505 border: var(${dr}
6505â¢borderâ¢width) solid var(${dr}â¢borderâ¢color); 6506 background: var(${dr}â¢background); 6507 color: var(${dr}â¢color); 6508 font-weight: var(${dr}â¢fontâ¢weight, unset); 6509 6510 transition-duration: 200ms; 6511 transition-timing-function: ease-out; 6512 transition-property: 6513 border, 6514 background, 6515 color, 6516 font-weight; 6517 6518 &:has([data-element=text]) { 6519 padding: 0 var(${dr}â¢textâ¢padding); 6520 } 6521 6522 &:not(:has([data-element=text])) { 6523 padding: 0 var(${dr}â¢iconâ¢padding); 6524 } 6525 } 6526 6527 [arc-icon-text] [data-element] { 6528 min-width: min-content; 6529 overflow: hidden; 6530 overflow-wrap: break-word; 6531 } 6532 } 6533 6534} 6535`,Zf=ar(Oe,["hug","fill"]),Xf=ar(oe,["lg","md"]),Jf=({children:r,label:e,icon:a,...t})=>{const o=r||(0,i.jsx)(re,{icon:a,text:e});return(0,i.jsx)("li",{"arc-radio-bar-option":"","data-is-checked":t?.checked||void 0,children:(0,i.jsx)(Fd,{...t,label:o,layout:"fill",useMask:!1})})},Qf=({children:r,size:e="lg",layout:a="hug",...t})=>(0,i.jsx)("ul",{...t,"arc-radio-bar":"","data-size":e,"data-layout":a,role:"radiogroup",children:r});lr("ArcRadioBar",Yf);var Hd=he(98998),Kr,jr,Ge,$a;function rm(r=!1){if(typeof r!="boolean")throw new Error("defaultValue must be `true` or `false`");const[e,a]=Kr(r),t=jr(()=>{a(!0)},[]),o=jr(()=>{a(!1)},[]),n=jr(()=>{a(c=>!c)},[]);return{value:e,setValue:a,setTrue:t,setFalse:o,toggle:n}}var qe=typeof window<"u"?u.useLayoutEffect:u.useEffect;function Me(r,e,a,t){const o=(0,u.useRef)(e);qe(()=>{o.current=e},[e]),(0,u.useEffect)(()=>{const n=a?.current??window;if(!(n&&n.addEventListener))return;const c=l=>{o.current(l)};return n.addEventListener(r,c,t),()=>{n.removeEventListener(r,c,t)}},[r,a,t])}function wb(r){Me("click",e=>{r(e)})}function Cb(){const[r,e]=Kr(null),a=jr(async t=>{if(!navigator?.clipboard)return console.warn("Clipboard not supported"),!1;try{return await navigator.clipboard.writeText(t),e(t),!0}catch(o){return console.warn("Copy failed",o),e(null),!1}},[]);return[r,a]}function em(r){const[e,a]=Kr(r??0),t=jr(()=>{a(c=>c+1)},[]),o=jr(()=>{a(c=>c-1)},[]),n=jr(()=>{a(r??0)},[r]);return{count:e,increment:t,decrement:o,reset:n,setCount:a}}function am(r,e){const a=Ge(r);qe(()=>{a.current=r},[r]),$a(()=>{if(e===null)return;const t=setInterval(()=>{a.current()},e);return()=>{clearInterval(t)}},[e])}function Ab({countStart:r,countStop:e=0,intervalMs:a=1e3,isIncrement:t=!1}){const{count:o,increment:n,decrement:c,reset:l}=em(r),{value:d,setTrue:h,setFalse:g}=rm(!1),f=jr(()=>{g(),l()},[g,l]),v=jr(()=>{if(o===e){g();return}t?n():c()},[o,e,c,n,t,g]);return am(v,d?a:null),[o,{startCountdown:h,stopCountdown:g,resetCountdown:f}]}function Zn(r){const e=(0,u.useRef)(()=>{throw new Error("Cannot call an event handler while rendering.")});return qe(()=>{e.current=r},[r]),(0,u.useCallback)((...a)=>{var t;return(t=e.current)==null?void 0:t.call(e,...a)},[e])}var Xi=typeof window>"u";function Ji(r,e,a={}){const{initializeWithValue:t=!0}=a,o=(0,u.useCallback)(v=>a.serializer?a.serializer(v):JSON.stringify(v),[a]),n=(0,u.useCallback)(v=>{if(a.deserializer)return a.deserializer(v);if(v==="undefined")return;const b=e instanceof Function?e():e;let m;try{m=JSON.parse(v)}catch($){return console.error("Error parsing JSON:",$),b}return m},[a,e]),c=(0,u.useCallback)(()=>{const v=e instanceof Function?e():e;if(Xi)return v;try{const b=window.localStorage.getItem(r);return b?n(b):v}catch(b){return console.warn(`Error reading localStorage key \u201C${r}\u201D:`,b),v}},[e,r,n]),[l,d]=(0,u.useState)(()=>t?c():e instanceof Function?e():e),h=Zn(v=>{Xi&&console.warn(`Tried setting localStorage key \u201C${r}\u201D even though environment is not a client`);try{const b=v instanceof Function?v(c()):v;window.localStorage.setItem(r,o(b)),d(b),window.dispatchEvent(new StorageEvent("local-storage",{key:r}))}catch(b){console.warn(`Error setting localStorage key \u201C${r}\u201D:`,b)}}),g=Zn(()=>{Xi&&console.warn(`Tried removing localStorage key \u201C${r}\u201D even though environment is not a client`);const v=e instanceof Function?e():e;window.localStorage.removeItem(r),d(v),window.dispatchEvent(new StorageEvent("local-storage",{key:r}))});(0,u.useEffect)(()=>{d(c())},[r]);const f=(0,u.useCallback)(v=>{v.key&&v.key!==r||d(c())},[r,c]);return Me("storage",f),Me("local-storage",f),[l,h,g]}var tm=typeof window>"u";function Vd(r,{defaultValue:e=!1,initializeWithValue:a=!0}={}){const t=l=>tm?e:window.matchMedia(l).matches,[o,n]=Kr(()=>a?t(r):e);function c(){n(t(r))}return qe(()=>{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]),o}
6535var om="(prefers-color-scheme: dark)",nm="usehooks-ts-dark-mode";function Sb(r={}){const{defaultValue:e,localStorageKey:a=nm,initializeWithValue:t=!0}=r,o=Vd(om,{initializeWithValue:t,defaultValue:e}),[n,c]=Ji(a,e??o??!1,{initializeWithValue:t});return qe(()=>{o!==n&&c(o)},[o]),{isDarkMode:n,toggle:()=>{c(l=>!l)},enable:()=>{c(!0)},disable:()=>{c(!1)},set:l=>{c(l)}}}function Ud(r){const e=(0,u.useRef)(r);e.current=r,(0,u.useEffect)(()=>()=>{e.current()},[])}function Xn(r,e=500,a){const t=(0,u.useRef)();Ud(()=>{t.current&&t.current.cancel()});const o=(0,u.useMemo)(()=>{const n=Hd(r,e,a),c=(...l)=>n(...l);return c.cancel=()=>{n.cancel()},c.isPending=()=>!!t.current,c.flush=()=>n.flush(),c},[r,e,a]);return(0,u.useEffect)(()=>{t.current=Hd(r,e,a)},[r,e,a]),o}function zb(r,e,a){const t=a?.equalityFn??((h,g)=>h===g),o=r instanceof Function?r():r,[n,c]=Kr(o),l=Ge(o),d=Xn(c,e,a);return t(l.current,o)||(d(o),l.current=o),[n,d]}function Eb(r,e={}){const{preserveTitleOnUnmount:a=!0}=e,t=Ge(null);qe(()=>{t.current=window.document.title},[]),qe(()=>{window.document.title=r},[r]),Ud(()=>{!a&&t.current&&(window.document.title=t.current)})}function _b(r){const[e,a]=Kr(!1),t=()=>{a(!0)},o=()=>{a(!1)};return Me("mouseenter",t,r),Me("mouseleave",o,r),e}function Ib({threshold:r=0,root:e=null,rootMargin:a="0%",freezeOnceVisible:t=!1,initialIsIntersecting:o=!1,onChange:n}={}){var c;const[l,d]=Kr(null),[h,g]=Kr(()=>({isIntersecting:o,entry:void 0})),f=Ge();f.current=n;const v=((c=h.entry)==null?void 0:c.isIntersecting)&&t;$a(()=>{if(!l||!("IntersectionObserver"in window)||v)return;let $;const w=new IntersectionObserver(_=>{const y=Array.isArray(w.thresholds)?w.thresholds:[w.thresholds];_.forEach(C=>{const S=C.isIntersecting&&y.some(I=>C.intersectionRatio>=I);g({isIntersecting:S,entry:C}),f.current&&f.current(S,C),S&&t&&$&&($(),$=void 0)})},{threshold:r,root:e,rootMargin:a});return w.observe(l),()=>{w.disconnect()}},[l,JSON.stringify(r),e,a,v,t]);const b=Ge(null);$a(()=>{var $;!l&&(($=h.entry)!=null&&$.target)&&!t&&!v&&b.current!==h.entry.target&&(b.current=h.entry.target,g({isIntersecting:o,entry:void 0}))},[l,h.entry,t,v,o]);const m=[d,!!h.isIntersecting,h.entry];return m.ref=m[0],m.isIntersecting=m[1],m.entry=m[2],m}function Tb(){const[r,e]=Kr(!1);return $a(()=>{e(!0)},[]),r}function cm(){const r=Ge(!1);return $a(()=>(r.current=!0,()=>{r.current=!1}),[]),jr(()=>r.current,[])}function jb(r=new Map){const[e,a]=Kr(new Map(r)),t={set:jr((o,n)=>{a(c=>{const l=new Map(c);return l.set(o,n),l})},[]),setAll:jr(o=>{a(()=>new Map(o))},[]),remove:jr(o=>{a(n=>{const c=new Map(n);return c.delete(o),c})},[]),reset:jr(()=>{a(()=>new Map)},[])};return[e,t]}function Rb(r,e,a="mousedown",t={}){Me(a,o=>{const n=o.target;if(!n||!n.isConnected)return;(Array.isArray(r)?r.filter(l=>!!l.current).every(l=>l.current&&!l.current.contains(n)):r.current&&!r.current.contains(n))&&e(o)},void 0,t)}var Kd=typeof window>"u";function Pb(r,e={}){let{initializeWithValue:a=!0}=e;Kd&&(a=!1);const t=jr(d=>{if(e.deserializer)return e.deserializer(d);if(d==="undefined")return;let h;try{h=JSON.parse(d)}catch(g){return console.error("Error parsing JSON:",g),null}return h},[e]),o=jr(()=>{if(Kd)return null;try{const d=window.localStorage.getItem(r);return d?t(d):null}catch(d){return console.warn(`Error reading localStorage key \u201C${r}\u201D:`,d),null}},[r,t]),[n,c]=Kr(()=>{if(a)return o()});$a(()=>{c(o())},[r]);const l=jr(d=>{d.key&&d.key!==r||c(o())},[r,o]);return Me("storage",l),Me("local-storage",l),n}var Wd={width:void 0,height:void 0};
6535function Lb(r){const{ref:e,box:a="content-box"}=r,[{width:t,height:o},n]=Kr(Wd),c=cm(),l=Ge({...Wd}),d=Ge(void 0);return d.current=r.onResize,$a(()=>{if(!e.current||typeof window>"u"||!("ResizeObserver"in window))return;const h=new ResizeObserver(([g])=>{const f=a==="border-box"?"borderBoxSize":a==="device-pixel-content-box"?"devicePixelContentBoxSize":"contentBoxSize",v=Gd(g,f,"inlineSize"),b=Gd(g,f,"blockSize");if(l.current.width!==v||l.current.height!==b){const $={width:v,height:b};l.current.width=v,l.current.height=b,d.current?d.current($):c()&&n($)}});return h.observe(e.current,{box:a}),()=>{h.disconnect()}},[a,e,c]),{width:t,height:o}}function Gd(r,e,a){return r[e]?Array.isArray(r[e])?r[e][0][a]:r[e][a]:e==="contentBoxSize"?r.contentRect[a==="inlineSize"?"width":"height"]:void 0}var qd=typeof window>"u";function Mb(r={}){let{initializeWithValue:e=!0}=r;qd&&(e=!1);const a=()=>{if(!qd)return window.screen},[t,o]=Kr(()=>{if(e)return a()}),n=Xn(o,r.debounceDelay);function c(){const l=a(),d=r.debounceDelay?n:o;if(l){const{width:h,height:g,availHeight:f,availWidth:v,colorDepth:b,orientation:m,pixelDepth:$}=l;d({width:h,height:g,availHeight:f,availWidth:v,colorDepth:b,orientation:m,pixelDepth:$})}}return Me("resize",c),qe(()=>{c()},[]),t}var Jn=new Map;function im(r){const e=document.querySelector(`script[src="${r}"]`),a=e?.getAttribute("data-status");return{node:e,status:a}}function Bb(r,e){const[a,t]=Kr(()=>!r||e?.shouldPreventLoad?"idle":typeof window>"u"?"loading":Jn.get(r)??"loading");return $a(()=>{if(!r||e?.shouldPreventLoad)return;const o=Jn.get(r);if(o==="ready"||o==="error"){t(o);return}const n=im(r);let c=n.node;if(c)t(n.status??o??"loading");else{c=document.createElement("script"),c.src=r,c.async=!0,e?.id&&(c.id=e.id),c.setAttribute("data-status","loading"),document.body.appendChild(c);const d=h=>{const g=h.type==="load"?"ready":"error";c?.setAttribute("data-status",g)};c.addEventListener("load",d),c.addEventListener("error",d)}const l=d=>{const h=d.type==="load"?"ready":"error";t(h),Jn.set(r,h)};return c.addEventListener("load",l),c.addEventListener("error",l),()=>{c&&(c.removeEventListener("load",l),c.removeEventListener("error",l)),c&&e?.removeOnUnmount&&(c.remove(),Jn.delete(r))}},[r,e?.shouldPreventLoad,e?.removeOnUnmount,e?.id]),a}var sm=typeof window>"u";function Ob(r={}){const{autoLock:e=!0,lockTarget:a,widthReflow:t=!0}=r,[o,n]=Kr(!1),c=Ge(null),l=Ge(null),d=()=>{if(c.current){const{overflow:g,paddingRight:f}=c.current.style;if(l.current={overflow:g,paddingRight:f},t){const v=c.current===document.body?window.innerWidth:c.current.offsetWidth,b=parseInt(window.getComputedStyle(c.current).paddingRight,10)||0,m=v-c.current.scrollWidth;c.current.style.paddingRight=`${m+b}px`}c.current.style.overflow="hidden",n(!0)}},h=()=>{c.current&&l.current&&(c.current.style.overflow=l.current.overflow,t&&(c.current.style.paddingRight=l.current.paddingRight)),n(!1)};return qe(()=>{if(!sm)return a&&(c.current=typeof a=="string"?document.querySelector(a):a),c.current||(c.current=document.body),e&&d(),()=>{h()}},[e,a,t]),{isLocked:o,lock:d,unlock:h}}var Qi=typeof window>"u";function lm(r,e,a={}){const{initializeWithValue:t=!0}=a,o=(0,u.useCallback)(v=>a.serializer?a.serializer(v):JSON.stringify(v),[a]),n=(0,u.useCallback)(v=>{if(a.deserializer)return a.deserializer(v);if(v==="undefined")return;const b=e instanceof Function?e():e;let m;try{m=JSON.parse(v)}catch($){return console.error("Error parsing JSON:",$),b}return m},[a,e]),c=(0,u.useCallback)(()=>{const v=e instanceof Function?e():e;if(Qi)return v;try{const b=window.sessionStorage.getItem(r);return b?n(b):v}catch(b){return console.warn(`Error reading sessionStorage key \u201C${r}\u201D:`,b),v}},[e,r,n]),[l,d]=(0,u.useState)(()=>t?c():e instanceof Function?e():e),h=Zn(v=>{Qi&&console.warn(`Tried setting sessionStorage key \u201C${r}\u201D even though environment is not a client`);try{const b=v instanceof Function?v(c()):v;window.sessionStorage.setItem(r,o(b)),d(b),window.dispatchEvent(new StorageEvent("session-storage",{key:r}))}catch(b){console.warn(`Error setting sessionStorage key \u201C${r}\u201D:`,b)}}),g=Zn(()=>{Qi&&console.warn(`Tried removing sessionStorage key \u201C${r}\u201D even though environment is not a client`);const v=e instanceof Function?e():e;window.sessionStorage.removeItem(r),d(v),window.dispatchEvent(new StorageEvent("session-storage",{key:r}))});(0,u.useEffect)(()=>{d(c())},[r]);const f=(0,u.useCallback)(v=>{v.key&&v.key!==r||d(c())},[r,c]);return Me("storage",f),Me("session-storage",f),[l,h,g]}function Db(r){const[e,a]=Kr(1),t=e+1<=r,o=e-1>0,n=jr(h=>{const g=h instanceof Function?h(e):h;if(g>=1&&g<=r){a(g);return}
6535throw new Error("Step not valid")},[r,e]),c=jr(()=>{t&&a(h=>h+1)},[t]),l=jr(()=>{o&&a(h=>h-1)},[o]),d=jr(()=>{a(1)},[]);return[e,{goToNextStep:c,goToPrevStep:l,canGoToNextStep:t,canGoToPrevStep:o,setStep:n,reset:d}]}var dm="(prefers-color-scheme: dark)",um="usehooks-ts-ternary-dark-mode";function Nb({defaultValue:r="system",localStorageKey:e=um,initializeWithValue:a=!0}={}){const t=Vd(dm,{initializeWithValue:a}),[o,n]=Ji(e,r,{initializeWithValue:a});return{isDarkMode:o==="dark"||o==="system"&&t,ternaryDarkMode:o,setTernaryDarkMode:n,toggleTernaryDarkMode:()=>{const d=["light","system","dark"];n(h=>{const g=(d.indexOf(h)+1)%d.length;return d[g]})}}}function Fb(r,e){const a=Ge(r);qe(()=>{a.current=r},[r]),$a(()=>{if(!e&&e!==0)return;const t=setTimeout(()=>{a.current()},e);return()=>{clearTimeout(t)}},[e])}function Hb(r){const[e,a]=Kr(!!r),t=jr(()=>{a(o=>!o)},[]);return[e,t,a]}var hm=typeof window>"u";function Vb(r={}){let{initializeWithValue:e=!0}=r;hm&&(e=!1);const[a,t]=Kr(()=>e?{width:window.innerWidth,height:window.innerHeight}:{width:void 0,height:void 0}),o=Xn(t,r.debounceDelay);function n(){(r.debounceDelay?o:t)({width:window.innerWidth,height:window.innerHeight})}return Me("resize",n),qe(()=>{n()},[]),a}const gm=(r,e)=>{const a=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set;a?a.call(r,e):r.value=e,r.dispatchEvent(new Event("input",{bubbles:!0}))},vm=({defaultValue:r="",value:e,debounceMs:a,inputElementRef:t,onClear:o,onKeyDown:n,onSearch:c})=>{const l=e!==void 0,d=c!==void 0&&a!==void 0,[h,g]=(0,u.useState)(r),f=l?e??"":h,v=(0,u.useRef)(!1),b=Xn(y=>{c?.(y)},a??0),m=(0,u.useCallback)(()=>{b.cancel()},[b]),$=(0,u.useCallback)(y=>{l||g(y)},[l]);(0,u.useEffect)(()=>m,[m]),(0,u.useEffect)(()=>{if(d){if(!v.current){v.current=!0;return}m(),b(f)}},[m,b,f,d]);const w=(0,u.useCallback)(()=>{m();const y=t.current;if(y){gm(y,""),o?.(),y.focus();return}l||g(""),o?.()},[m,t,l,o]),_=(0,u.useCallback)(y=>{n?.(y),!(y.defaultPrevented||y.key!=="Enter"||!c)&&(m(),c(f))},[m,n,c,f]);return{resolvedValue:f,handleValueChange:$,handleClear:w,handleKeyDown:_}},pm=Ti,fm=ji,mm=ar(fd,["outline","solid"]),Yd="Search",bm="Clear search",rs={layout:"hug",size:"inherit",variant:"outline"},$m=({canClear:r,isDisabled:e,onClear:a})=>{if(r)return(0,i.jsx)(Rd,{"aria-label":bm,disabled:e,icon:"fa-regular fa-xmark",onClick:a})},ym=({ariaLabel:r,ariaLabelledBy:e,headerLabel:a})=>r??(!a&&!e?Yd:void 0),Zd=(0,u.forwardRef)(({debounceMs:r,inputProps:e,layout:a=rs.layout,onClear:t,onSearch:o,size:n=rs.size,variant:c=rs.variant,headerLabel:l,headerSlot:d,footerCaption:h,footerSlot:g,onChange:f,...v},b)=>{const{id:m,value:$,defaultValue:w="",onChange:_,onKeyDown:y,placeholder:C=Yd,disabled:S,readOnly:I,required:j,"aria-label":L,"aria-labelledby":D,...z}=e,k=Ir(m,"arc-search"),V=(0,u.useRef)(null),{resolvedValue:U,handleValueChange:Y,handleClear:W,handleKeyDown:or}=vm({defaultValue:w,value:$,debounceMs:r,inputElementRef:V,onClear:t,onKeyDown:y,onSearch:o}),N=!S&&!I&&U.length>0,tr=ym({ariaLabel:L,ariaLabelledBy:D,headerLabel:l}),R=$m({canClear:N,isDisabled:S,onClear:W}),F=M=>{V.current=M,Se(b,M)},H=(M,rr)=>{Y(rr.target.value),_?.(M,rr)};return(0,i.jsx)(Hn,{...v,"arc-search":"",layout:a,size:n,variant:c,ref:F,onChange:f,headerLabel:l,headerSlot:d,inputPrefix:(0,i.jsx)(ir,{icon:"fa-regular fa-search"}),inputAction:R,footerCaption:h,footerSlot:g,inputProps:{...z,id:k,value:U,disabled:S,placeholder:C,readOnly:I,required:j,onChange:H,onKeyDown:or,"aria-disabled":S||void 0,"aria-label":tr,"aria-labelledby":D,"aria-readonly":I||void 0,"aria-required":j||void 0}})});Zd.displayName="ArcSearch";const xm=Ti,km=ji,wm=ar(_r,["outline","solid","plain"]),Xd=()=>typeof globalThis?.CSS?.supports=="function"&&globalThis.CSS.supports("appearance","base-select"),Qn=r=>Array.isArray(r.options),Ct=r=>{const e=r?.variant;return e!=="divider"&&e!=="section-label"},Jd=r=>r?.variant==="section-label"&&!!(r.text||r.icon),Qd=r=>{},ru=(r=[])=>r.flatMap(e=>Qn(e)?e.options:[e]).some(e=>Ct(e)&&e.value===""),eu=r=>{const e=o=>typeof o=="string"&&o.trim().length>0,a=o=>{if(typeof o!="object"||o===null)return;const{name:n}=o;return e(n)?n:void 0};return[r?.text,a(r?.avatar),r?.["aria-label"]].find(e)??"Anonymous"},xo=s`--arcâ¢select`,fe=s`${xo}â¢picker`,au=s`${fe}â¢fg`,tu=s`${fe}â¢bg`,es=s`${xo}â¢option`,ko=s`${es}â¢fg`,wo=s`${es}â¢bg`,Xa=s`${es}â¢icon`,Cm=s` 6536 ${au}: currentcolor; 6537 ${tu}: var(--arc-color-bg-mono); 6538 ${xo}â¢placeholderâ¢fg: var(--arc-select-placeholder-color, var(--arc-color-fg-secondary)); 6539 6540 ${fe}â¢width: auto; 6541 ${fe}â¢minâ¢width: 3em; 6542 ${fe}â¢borderâ¢radius: var(--arc-border-radius-lg); 6543 ${fe}â¢shadow: var(--arc-shadow-lg); 6544 6545 ${ko}: currentcolor; 6546 ${wo}: transparent; 6547 6548 ${Xa}â¢display: none; 6549 ${Xa}â¢color: var(${ko}); 6550`,Am=s` 6551 &[data-layout=fill] { 6552 ${fe}â¢width: 100%; /* fallback */ 6553 ${fe}â¢width: anchor-size(inline); 6554 } 6555`,Sm=s` 6556 [arc-select] ::picker(select) { 6557 transition-behavior: allow-discrete, smooth; 6558 transition-duration: var(--arc-select-transition-duration, 240ms); 6559 transition-property: display, opacity; 6560 transition-timing-function: ease-out; 6561 } 6562 6563 @supports (overlay: auto) { 6564 [arc-select] ::picker(select) { 6565 transition-behavior: allow-discrete; 6566 transition-property: display, overlay, opacity; 6567 } 6568 } 6569`,zm=s` 6570 [arc-select] { 6571 ::picker(select) { 6572 opacity: 0; 6573 } 6574 6575 ::picker(select):popover-open { 6576 opacity: 1; 6577 } 6578 } 6579 6580 @starting-style { 6581 [arc-select] ::picker(select):popover-open { 6582 opacity: 0; 6583 } 6584 } 6585`,Em=s` 6586@layer arc-components { 6587 6588 /* SETUP ---------------------------------------------------------⢠*/ 6589 6590 [arc-select] { 6591 ${Cm} 6592 ${Am} 6593 } 6594 6595 /* CORE ----------------------------------------------------------⢠*/ 6596 6597 [arc-select] { 6598 select, 6599 ::picker(select) { 6600 appearance: base-select; 6601 } 6602 6603 ::picker(select) { 6604 flex: 1; 6605 display: var(${fe}â¢display, none); 6606 flex-direction: column; 6607 gap: var(${E}â¢4); 6608 border: none; 6609 color: var(${au}); 6610 width: var(--arc-select-picker-width, var(${fe}â¢width)); 6611 min-width: var(--arc-select-picker-min-width, var(${fe}â¢minâ¢width)); 6612 margin: var(--arc-select-picker-margin, var(${E}â¢4) 0);
6613 padding: var(--arc-select-picker-padding, var(${E}â¢4)); 6614 background: var(--arc-select-picker-background, var(${tu})); 6615 border-radius: var(--arc-select-picker-border-radius, var(${fe}â¢borderâ¢radius)); 6616 box-shadow: var(--arc-select-picker-shadow, var(${fe}â¢shadow)); 6617 } 6618 6619 ::picker(select):popover-open { 6620 ${fe}â¢display: flex; 6621 } 6622 6623 /* Hide default picker icon */ 6624 ::picker-icon { 6625 display: none; 6626 } 6627 6628 select { 6629 flex: 1; 6630 align-items: center; 6631 font: inherit; 6632 color: inherit; 6633 background: transparent; 6634 border: none; 6635 padding: 0; 6636 margin: 0; 6637 padding-inline: var(${p}â¢12); 6638 max-width: var(--arc-select-max-width, var(--jsâ¢maxâ¢width, none)); 6639 } 6640 6641 [arc-select-button] { 6642 display: flex; 6643 align-items: center; 6644 gap: var(${E}â¢8); 6645 width: 100%; 6646 } 6647 6648 [arc-select-placeholder] { 6649 flex: 1; 6650 color: var(${xo}â¢placeholderâ¢fg); 6651 } 6652 6653 selectedcontent { 6654 /* Inter-Component Communication -----------------------------⢠*/ 6655 --arc-icon-text-font-weight: normal; 6656 --arc-icon-text-subtext-display: none; 6657 --arc-avatar-text-font-weight: normal; 6658 --arc-avatar-subtext-display: none; 6659 --arc-avatar-size: var(${p}â¢24); 6660 --arc-avatar-initial-font-size: var(${p}â¢12); 6661 6662 flex: 1; 6663 display: flex; 6664 align-items: center; 6665 width: 100%; 6666 min-width: 0; 6667 6668 [arc-select-icon=selected] { 6669 display: none; 6670 } 6671 } 6672 6673 /* Hide the cloned <selectedcontent> when the placeholder span drives the trigger. */ 6674 select[data-placeholder] selectedcontent { 6675 display: none; 6676 } 6677 6678 [arc-select-option-group-legend] { 6679 font-size: var(${p}â¢12); 6680 font-weight: var(--arc-font-weight-600); 6681 color: var(--arc-select-legend-color, var(--arc-color-fg-secondary)); 6682 padding: var(--arc-select-legend-padding, var(${E}â¢8)); 6683 cursor: default; 6684 } 6685 6686 /* Separator above each legend after the first optgroup. */ 6687 optgroup ~ optgroup [arc-select-option-group-legend] { 6688 border-top: var(${p}â¢1) solid var(--arc-color-border-mid); 6689 margin-top: var(${E}â¢4); 6690 } 6691 6692 [arc-select-option] { 6693 flex: none; 6694 display: grid; 6695 grid-template-columns: 1fr auto; 6696 align-items: center; 6697 gap: var(${E}â¢8); 6698 width: 100%; 6699 min-width: 0; 6700 color: var(${ko}); 6701 background: var(--arc-select-option-background, var(${wo})); 6702 border-radius: var(--arc-select-option-border-radius, var(--arc-border-radius-md)); 6703 padding: var(--arc-select-option-padding, var(${E}â¢8)); 6704 6705 &::checkmark { 6706 display: none; 6707 } 6708 6709 &:disabled { 6710 ${ko}: var(--arc-color-fg-disabled); 6711 ${wo}: transparent; 6712 ${Xa}â¢display: none; 6713 cursor: var(--arc-select-disabled-cursor, not-allowed); 6714 } 6715 6716 &:not(:disabled):hover { 6717 ${wo}: var(--arc-color-bg-hover-default); 6718 } 6719 6720 &:not(:disabled):checked { 6721 ${wo}: var(--arc-color-bg-selected-default); 6722 ${Xa}â¢display: flex; 6723 ${Xa}â¢color: var(--arc-select-option-selected-icon-color, var(${ko})); 6724 } 6725 6726 [arc-select-icon=selected] { 6727 display: var(${Xa}â¢display, none); 6728 color: var(${Xa}â¢color, currentcolor); 6729 } 6730 } 6731 6732 @supports not (appearance: base-select) { 6733 select { 6734 appearance: none; 6735 background: transparent; 6736 outline: none; 6737 6738 /* caret */ 6739 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>"); 6740 background-repeat: no-repeat; 6741 background-size: 0.75em; 6742 background-origin: padding-box; 6743 background-position: calc(100% - 1em) center; 6744 padding-inline-end: 3em; 6745 } 6746 6747 select[data-placeholder] { 6748 color: var(${xo}â¢placeholderâ¢fg); 6749 } 6750 } 6751 } 6752 6753 ${Sm} 6754 ${zm} 6755 6756} 6757`,_m=(0,u.forwardRef)(({layout:r="hug",size:e="inherit",variant:a="outline",tag:t="span",items:o,placeholder:n,renderItem:c,headerLabel:l,headerSlot:d,footerCaption:h,footerSlot:g,id:f,value:v,defaultValue:b,required:m,disabled:$,readOnly:w,maxWidth:_,inputProps:y,...C},S)=>{const{name:I,onBlur:j,onChange:L,onFocus:D,onInput:z,"aria-describedby":k,"aria-label":V,"aria-labelledby":U,...Y}=C,W=Ir(f,"arc-select"),or=a==="plain"&&r==="fill"?"hug":r,N=$||void 0,tr=w||void 0,R=m||void 0,F=Xd(),H=a!=="plain"&&!!(l||d),M=a!=="plain"&&!!(h||g),rr=typeof n=="string"&&n.length>0&&!ru(o),er=b??(rr?"":void 0),Z=v??er,hr=rr&&Z==="",P=F&&rr&&Z==="",X=tr&&Z!=null?String(Z):void 0,vr=o.flatMap(G=>Qn(G)?G.options.filter(Ct):Ct(G)?[G]:(Qd(G),[])),pr=new Map(vr.map((G,Rr)=>[G,Rr])),Cr=G=>{const{itemId:Rr,...gr}=G,Nr=zd(go(G));return(0,i.jsx)(Nr,{...gr})},Xr=G=>{const Rr=pr.get(G)??0,gr=G["aria-disabled"]===!0||G.disabled===!0,Nr=typeof G.itemId=="string"&&G.itemId.length>0?G.itemId:Rr,de=String(G?.value??G?.itemId??Rr);return(0,i.jsx)("option",{value:de,disabled:gr||X!==void 0&&de!==X||void 0,"arc-select-option":"",children:F?(0,i.jsxs)(i.Fragment,{children:[c?c(G,Rr):Cr(G),(0,i.jsx)("span",{"arc-select-icon":"selected","aria-hidden":!0,
6757children:(0,i.jsx)(ir,{icon:"fa-regular fa-check arc-fw"})})]}):eu(G)},Nr)},Be=(G,Rr)=>{const gr=G.options.filter(Ct);if(gr.length===0)return null;const Nr=G.options.find(Jd);return(0,i.jsxs)("optgroup",{label:G.label,disabled:G.disabled||void 0,children:[F&&Nr&&(0,i.jsx)("legend",{"arc-select-option-group-legend":"",children:Cr(Nr)}),gr.map(Xr)]},G.itemId??`${G.label}-${Rr}`)};return(0,i.jsxs)(t,{...Y,"arc-select":"","arc-input":"select","data-layout":or,"data-size":e,"data-variant":a,children:[H&&(0,i.jsxs)(Er.Header,{children:[(0,i.jsx)(Er.HeaderLabel,{htmlFor:W,children:l}),!!d&&(0,i.jsx)(Er.Spacer,{}),(0,i.jsx)(Er.HeaderSlot,{children:d})]}),(0,i.jsx)(Er.InputBody,{children:(0,i.jsxs)("select",{...y,name:y?.name??I,onBlur:y?.onBlur??j,onChange:y?.onChange??L,onFocus:y?.onFocus??D,onInput:y?.onInput??z,"aria-describedby":y?.["aria-describedby"]??k,"aria-label":y?.["aria-label"]??V,"aria-labelledby":y?.["aria-labelledby"]??U,value:v,defaultValue:v==null?er:void 0,required:m,disabled:$,ref:S,id:W,"aria-disabled":N,"aria-required":R,"data-readonly":tr,"data-placeholder":hr||void 0,style:{..._?{"--js\u2022max\u2022width":_}:{},...y?.style},children:[(0,i.jsxs)("button",{"arc-select-button":"",children:[P&&(0,i.jsx)(re,{"arc-select-placeholder":"",text:n,overflow:"truncate"}),(0,i.jsx)("selectedcontent",{}),(0,i.jsx)("span",{"aria-hidden":!0,children:(0,i.jsx)(ir,{icon:"fa-regular fa-angle-down arc-fw"})})]}),rr&&(0,i.jsx)("option",{value:"",disabled:!0,hidden:!0,children:n}),o.map((G,Rr)=>Qn(G)?Be(G,Rr):Ct(G)?Xr(G):null)]})}),M&&(0,i.jsxs)(Er.Footer,{children:[(0,i.jsx)(Er.FooterCaption,{children:h}),!!g&&(0,i.jsx)(Er.Spacer,{}),(0,i.jsx)(Er.FooterSlot,{children:g})]})]})});lr("ArcSelect",Em);const Im=ar(oe,["inherit","md","sm"]),Wr={On:"on",Off:"off"},At={Before:"before",After:"after"},Tm=({disabled:r,id:e,name:a,size:t="md",value:o,labelOff:n,labelOn:c,onChange:l,...d})=>{const h=Ir(a,"arc-switch-name"),g=Ir(e?`${e}-off`:void 0,"arc-switch-off"),f=Ir(e?`${e}-on`:void 0,"arc-switch-on"),v=y=>{if(y.code==="Space"){y.preventDefault(),y.stopPropagation();const C=o===Wr.On?Wr.Off:Wr.On;l?.({value:C},y)}},b=y=>{const C={on:Bt(c),off:Bt(n)};return C?.on&&C?.off?C[y]:!C?.on&&C?.off?`${C?.off}: ${y}`:C?.on&&!C?.off?`${C?.on}: ${y}`:C[y]},m=(0,i.jsxs)(xn,{type:"switch",onKeyDown:v,children:[(0,i.jsx)(ao,{type:"switch",name:h,id:g,value:Wr.Off,checked:o===Wr.Off,disabled:r,"aria-label":b(Wr.Off)?.trim(),onChange:l}),(0,i.jsx)(ao,{type:"switch",name:h,id:f,value:Wr.On,checked:o===Wr.On,disabled:r,"aria-label":b(Wr.On)?.trim(),onChange:l}),(0,i.jsx)("span",{"data-element":"mask"})]}),$=!c&&o===Wr.Off?f:g,w=!n&&o===Wr.On?g:f,_=!!(c||n)&&(0,i.jsxs)(i.Fragment,{children:[!!n&&(0,i.jsx)(za,{htmlFor:$,"arc-switch-label":c?Wr.Off:"",children:(0,i.jsx)(Ka,{children:n})}),m,!!c&&(0,i.jsx)(za,{htmlFor:w,"arc-switch-label":n?Wr.On:"",children:(0,i.jsx)(Ka,{children:c})})]});return(0,i.jsx)("span",{...d,"arc-switch":"","data-state":o,"data-size":t,role:"radiogroup",children:_||m})},Dr=s`--arcâ¢switch`,xr=s`${Dr}â¢knob`,jm=s` 6758@layer arc-components { 6759 6760 [arc-switch] { 6761 ${Dr}â¢background: var(--arc-color-alpha-white-100); 6762 ${xr}â¢shadow: var(--arc-shadow-md); 6763 6764 &:has(:disabled) { 6765 ${Dr}â¢background: var(--arc-color-alpha-white-70); 6766 ${xr}â¢shadow: var(--arc-shadow-none); 6767 6768 [arc-switch-label] { 6769 --arc-label-cursor: not-allowed; 6770 --arc-label-opacity: var(--arc-alpha-60); 6771 } 6772 } 6773 6774 /* Uses Neutral-ish Colors */ 6775 &[data-state=off] { 6776 ${B}â¢background: var(--arc-color-bg-neutral-subtle); 6777 ${B}â¢borderâ¢color: var(--arc-color-border-stark); 6778 ${xr}â¢borderâ¢color: var(--arc-color-border-on-stark); 6779 ${xr}â¢color: var(--arc-color-fg-on-heavy); 6780 6781 &:not(:has(:disabled)):hover { 6782 ${B}â¢borderâ¢color: var(--arc-color-border-heavy); 6783 ${xr}â¢borderâ¢color: var(--arc-color-border-heavy); 6784 } 6785 6786 &:has(:disabled) { 6787 ${B}â¢background: var(--arc-color-bg-disabled); 6788 ${B}â¢borderâ¢color: var(--arc-color-border-disabled); 6789 ${xr}â¢borderâ¢color: var(--arc-color-border-on-stark); 6790 ${xr}â¢color: var(--arc-color-bg-tertiary); 6791 } 6792 } 6793 6794 /* Uses Theme Colors */ 6795 &[data-state=on] { 6796 ${B}â¢background: var(--arc-color-bg-theme-heavy); 6797 ${B}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 6798 ${xr}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 6799 ${xr}â¢color: var(--arc-color-fg-on-theme-heavy); 6800 6801 &:not(:has(:disabled)):hover { 6802 ${B}â¢opacity: var(--arc-alpha-60); 6803 } 6804 6805 &:has(:disabled) { 6806 ${B}â¢opacity: var(--arc-alpha-30); 6807 } 6808 } 6809 6810 /* SIZES ------------------------------------------------------⢠*/ 6811 &[data-size=inherit] { 6812 ${Dr}â¢fontâ¢size: 1em; 6813 ${Dr}â¢width: 2.5em; 6814 ${Dr}â¢height: 1.5em; 6815 ${Dr}â¢gap: 0.5em; 6816 ${xr}â¢size: 1.5em; 6817 ${xr}â¢xâ¢shift: 0.25em; 6818 } 6819 6820 &[data-size=md] { /* @default */ 6821 ${Dr}â¢fontâ¢size: var(${p}â¢14); 6822 ${Dr}â¢width: var(${p}â¢40); 6823 ${Dr}â¢height: var(${p}â¢24); 6824 ${Dr}â¢gap: var(${p}â¢8); 6825 ${xr}â¢xâ¢shift: var(${p}â¢4); 6826 ${xr}â¢size: var(${p}â¢24); 6827 } 6828 6829 &[data-size=sm] { 6830 ${Dr}â¢fontâ¢size: var(${p}â¢12); 6831 ${Dr}â¢width: var(${p}â¢30); 6832 ${Dr}â¢height: var(${p}â¢14); 6833 ${Dr}â¢gap: var(${p}â¢8); 6834 ${xr}â¢xâ¢shift: var(${p}â¢1); 6835 ${xr}â¢size: var(${p}â¢16); 6836 } 6837 6838 /* Inter-Component Communication -------------------------------⢠*/ 6839 /* for: Setup defaults for ArcBooleanInputMask */ 6840 ${B}â¢borderâ¢radius: var(--arc-border-radius-pill); 6841 ${B}â¢width: var(${Dr}â¢width); 6842 ${B}â¢height: var(${Dr}â¢height); 6843 ${B}â¢xâ¢shift: var(${xr}â¢xâ¢shift); 6844 ${B}â¢size: var(${xr}â¢size); 6845 6846 /* for: ArcLabel */ 6847 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask to 6848 stay inline with the label text 6849 regardless of applied line-height */ 6850 6851 /* KNOB PLACEMENT ----------------------------------------------⢠*/ 6852 &[data-state=off] { 6853 ${xr}â¢translate: calc(-100% + var(${xr}â¢xâ¢shift)) -50%; 6854 } 6855 6856 &[data-state=on] { 6857 ${xr}â¢translate: calc(0% - var(${xr}â¢xâ¢shift)) -50%; 6858 } 6859 } 6860 6861 /* CORE STYLES ---------------------------------------------------⢠*/ 6862 [arc-switch]:not([hidden]) { 6863 font-size: var(--arc-switch-font-size, var(${Dr}â¢fontâ¢size)); 6864 display: var(--arc-switch-display, inline-flex); 6865 align-items: var(--arc-switch-align-items, center); 6866 gap: var(--arc-switch-gap, var(${Dr}â¢gap)); 6867 user-select: none; 6868 6869 [arc-switch-label] { 6870 font-size: inherit; 6871 hyphens: auto; 6872 } 6873
6874 [arc-input-type=switch]:where(:not(:checked)) { 6875 ${B}â¢zâ¢index: 1; 6876 } 6877 6878 [arc-input-mask-wrapper] { 6879 height: 1.25em; 6880 } 6881 6882 /* the knob */ 6883 [data-element=mask] { 6884 position: absolute; 6885 top: 50%; 6886 left: 50%; 6887 translate: var(${xr}â¢translate); 6888 6889 display: inline-flex; 6890 width: var(${xr}â¢size); 6891 height: var(${xr}â¢size); 6892 6893 transition-duration: 100ms; 6894 transition-behavior: allow-discrete; 6895 transition-timing-function: ease-in-out; 6896 transition-property: 6897 opacity, 6898 background, 6899 color, 6900 border-color, 6901 outline, 6902 translate; 6903 6904 background: var(${xr}â¢color); 6905 box-shadow: var(${xr}â¢shadow); 6906 border: var(${B}â¢borderâ¢width) solid var(${xr}â¢borderâ¢color); 6907 border-radius: var(--arc-border-radius-circle); 6908 pointer-events: none; 6909 } 6910 } 6911 6912} 6913`,Rm=({disabled:r,id:e,name:a,size:t="md",value:o,label:n,labelPosition:c=At.After,onChange:l,labelOff:d,labelOn:h,...g})=>{const f=Ir(a,"arc-switch-name"),v=Ir(e,"arc-switch"),b=(w,_)=>{const y=w.checked?Wr.On:Wr.Off;l?.({...w,value:y},_)};!n&&(h||d)&&(n=h||d,c=h?At.After:At.Before);const m=(0,i.jsxs)(xn,{type:"checkbox",children:[(0,i.jsx)(ao,{type:"checkbox",name:f,id:v,checked:o===Wr.On,disabled:r,role:"switch","aria-checked":o===Wr.On,"aria-label":n?void 0:"Toggle switch",tabIndex:0,onChange:b}),(0,i.jsx)("span",{"data-element":"mask","aria-hidden":"true",tabIndex:-1})]}),$=(0,i.jsx)(za,{htmlFor:v,"arc-switch-label":c,children:(0,i.jsx)(Ka,{children:n})});return d&&h?(0,i.jsx)(Tm,{...g,disabled:r,id:e,name:a,labelOff:d,labelOn:h,size:t,value:o,onChange:l}):(0,i.jsxs)("span",{...g,"arc-switch":"","data-state":o,"data-size":t,"data-label-position":c,role:"presentation","aria-live":"off",children:[n&&c===At.Before&&$,m,n&&c===At.After&&$]})};lr("ArcSwitch",jm);const Pm=["title","heading","subheading","body"],ou=["h1","h2","h3","h4","h5","h6"],nu=["code","div","li","p","pre","span"],cu=[...ou,...nu],Lm=[...sa],Mm=["title-inherit","title-lg","title-md","title-sm"],Bm=["heading-inherit","heading-lg","heading-md","heading-sm"],Om=["subheading-inherit","subheading-lg","subheading-md","subheading-sm"],Dm=ar(_r,["inherit","primary","primary-inverse"]),Nm=["body-inherit","body-lg","body-md","body-sm","body-xs"],Fm=Jr(_r,["inherit","primary","secondary","primary-inverse","secondary-inverse","critical","warning","success","info"]),Hm=ar(Mo,["inherit","start","center","justify","end"]),Vm=ar(Bo,["inherit","loose","standard","tight"]),Um={h1:"title",h2:"heading",h3:"heading",h4:"subheading",h5:"subheading",h6:"subheading",p:"body",span:"body",div:"body",code:"body",pre:"body",li:"body"},Km=r=>{const{align:e,lineHeight:a,size:t,variant:o,scheme:n="auto",isMonospace:c,tag:l,...d}=r,h=Um?.[l]??"body",g=t?.includes("inherit")?t?.split("-")?.[0]:t,f=o?.endsWith("-inverse");let v;return n!=="auto"?v=n:f&&(v=void 0),{...d,"arc-text":g||h,"arc-scheme":v,"data-is-monospace":c?"":void 0,"data-align":e?.includes("inherit")?void 0:e,"data-variant":o?.includes("inherit")?void 0:o,"data-line-height":a?.includes("inherit")?void 0:a}},ya=s`--arcâ¢text`,as=s`${ya}â¢font`,St=s`${ya}â¢align`,oa=s`${ya}fg`,iu=s`${ya}â¢flex`,su=s`${ya}â¢hyphens`,Co=s`${ya}â¢letterspacing`,na=s`${ya}â¢lineheight`,lu=s`${ya}â¢opacity`,du=s`${ya}â¢whitespace`,Ja=s`${as}â¢family`,Or=s`${as}â¢size`,zt=s`${as}â¢weight`,Wm=s` 6914@layer arc-components { 6915 6916[arc-text] { 6917 /* SETUP ---------------------------------------------------------⢠*/ 6918 ${St}: unset; 6919 ${oa}: unset; 6920 ${iu}: unset; 6921 ${su}: auto; 6922 ${Co}: unset; 6923 ${na}: unset; 6924 ${lu}: unset; 6925 ${du}: unset; 6926 6927 ${Ja}: unset; 6928 ${Or}: unset; 6929 ${zt}: unset; 6930 6931 /* LINE HEIGHT ---------------------------------------------------⢠*/ 6932 6933 &[data-line-height=standard] { 6934 ${na}: var(--arc-line-height-standard); 6935 } 6936 6937 &[data-line-height=loose] { 6938 ${na}: var(--arc-line-height-loose); 6939 } 6940 6941 &[data-line-height=tight] { 6942 ${na}: var(--arc-line-height-tight); 6943 } 6944 6945 /* ALIGNMENT -----------------------------------------------------⢠*/ 6946 6947 &[data-align=start] { 6948 ${St}: start; 6949 } 6950 6951 &[data-align=center] { 6952 ${St}: center; 6953 } 6954 6955 &[data-align=justify] { 6956 ${St}: justify; 6957 } 6958 6959 &[data-align=end] { 6960 ${St}: end; 6961 } 6962 6963 /* VARIANTS ------------------------------------------------------⢠*/ 6964 6965 &[data-variant=primary] { 6966 ${oa}: var(--arc-color-fg-primary); 6967 } 6968 6969 /* @deprecated */ 6970 &[data-variant=primary-inverse] { 6971 ${oa}: var(--arc-color-fg-on-mono-inverse); 6972 } 6973 6974 &[data-variant=secondary] { 6975 ${oa}: var(--arc-color-fg-secondary); 6976 } 6977 6978 /* @deprecated - 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 6979 &[data-variant=secondary-inverse] { 6980 ${oa}: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 61.2%, transparent); 6981 } 6982 6983 &[data-variant=critical] { 6984 ${oa}: var(--arc-color-fg-critical-mid); 6985 } 6986 6987 &[data-variant=warning] { 6988 ${oa}: var(--arc-color-fg-warning-stark); 6989 } 6990 6991 &[data-variant=success] { 6992 ${oa}: var(--arc-color-fg-success-stark); 6993 } 6994 6995 &[data-variant=info] { 6996 ${oa}: var(--arc-color-fg-info-stark); 6997 } 6998 6999} 7000 7001/* FONT PROPERTIES -------------------------------------------------⢠*/ 7002 7003[arc-text^=title] { 7004 ${Ja}: var(--arc-font-family-title); 7005 ${zt}: var(--arc-font-weight-title); 7006 ${Co}: var(--arc-letter-spacing-title); 7007 ${na}: var(--arc-line-height-title); 7008 7009 ${Or}: 2em; /* @default title ⢠32÷16*1em ⢠same as 'title-md' @ 100% */ 7010 7011 &:where([arc-text*=-lg]) { 7012 ${Or}: var(--arc-font-size-title-lg); 7013 } 7014 7015 &:where([arc-text*=-md]) { 7016 ${Or}: var(--arc-font-size-title-md); 7017 } 7018 7019 &:where([arc-text*=-sm]) { 7020 ${Or}: var(--arc-font-size-title-sm); 7021 } 7022} 7023 7024[arc-text^=heading] { 7025 ${Ja}: var(--arc-font-family-heading); 7026 ${zt}: var(--arc-font-weight-heading); 7027 ${Co}: var(--arc-letter-spacing-heading); 7028 ${na}: var(--arc-line-height-heading); 7029 7030 ${Or}: 1.25em; /* @default heading ⢠20÷16*1em ⢠same as 'heading-md' @ 100% */ 7031 7032 &:where([arc-text*=-lg]) { 7033 ${Or}: var(--arc-font-size-heading-lg); 7034 } 7035 7036 &:where([arc-text*=-md]) { 7037 ${Or}: var(--arc-font-size-heading-md); 7038 } 7039 7040 &:where([arc-text*=-sm]) { 7041 ${Or}: var(--arc-font-size-heading-sm); 7042 } 7043} 7044 7045[arc-text^=subheading] { 7046 ${Ja}: var(--arc-font-family-subheading); 7047 ${zt}: var(--arc-font-weight-subheading); 7048 ${Co}: unset; 7049 ${na}: var(--arc-line-height-subheading); 7050 7051 ${Or}: 0.875em; /* @default subheading ⢠14÷16*1em ⢠same as 'subheading-md' @ 100% */ 7052 7053 &:where([arc-text*=-lg]) { 7054 ${Or}: var(--arc-font-size-subheading-lg); 7055 } 7056 7057 &:where([arc-text*=-md]) { 7058 ${Or}: var(--arc-font-size-subheading-md); 7059 } 7060 7061 &:where([arc-text*=-sm]) { 7062 ${Or}: var(--arc-font-size-subheading-sm); 7063 } 7064} 7065 7066[arc-text^=body] { 7067 ${Ja}: var(--arc-font-family-body); 7068 ${zt}: var(--arc-font-weight-body); 7069 ${na}: var(--arc-line-height-body); 7070 ${Or}: 0.875em; /* @default body ⢠14÷16*1em ⢠same as 'body-md' @ 100% */ 7071 7072 &:where([arc-text*=-lg]) { 7073 ${Or}: var(--arc-font-size-body-lg); 7074 } 7075 7076 &:where([arc-text*=-md]) { 7077 ${Or}: var(--arc-font-size-body-md); 7078 } 7079 7080 &:where([arc-text*=-sm]) { 7081 ${Or}: var(--arc-font-size-body-sm); 7082 } 7083
7084 &:where([arc-text*=-xs]) { 7085 ${Or}: var(--arc-font-size-body-xs); 7086 } 7087} 7088 7089[arc-text]:where(pre, code) { 7090 ${Or}: 1em; 7091} 7092 7093[arc-text]:where(pre, code, [data-is-monospace]) { 7094 ${Ja}: var(--arc-font-family-mono); 7095 ${na}: var(--arc-line-height-mono); 7096} 7097 7098 7099/* CORE STYLES -----------------------------------------------------⢠*/ 7100 7101[arc-text] { 7102 /* conveniences for element properties */ 7103 flex: var(--arc-text-flex, var(${iu})); 7104 hyphens: var(--arc-text-hyphens, var(${su})); /* not unset as fallback so text-breaks by default */ 7105 opacity: var(--arc-text-opacity, var(${lu})); 7106 text-align: var(--arc-text-align, var(${St})); 7107 white-space: var(--arc-text-white-space, var(${du})); 7108 7109 color: var(--arc-text-color, var(${oa})); 7110 7111 font-size: var(--arc-text-font-size, var(${Or})); 7112 font-family: var(--arc-text-font-family, var(${Ja})); 7113 font-weight: var(--arc-text-font-weight, var(${zt})); 7114 line-height: var(--arc-text-line-height, var(${na})); 7115 letter-spacing: var(--arc-text-letter-spacing, var(${Co})); 7116 7117 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 7118} 7119 7120} 7121`,Gm=r=>(0,u.forwardRef)((e,a)=>(0,u.createElement)(r,{...Km({...e,tag:r}),ref:a})),qm=[...cu].reduce((r,e)=>({...r,[e]:Gm(e)}),{});lr("Arc",Wm);const Ym=ar(_r,["common","ai","critical"]),uu=[...sa],hu=["default","success","warning","error"],gu=ar(oe,["inherit","md"]),vu=ar(_r,["common"]),pu=[...Pa],Zm=[...rt],fu=["top-left","top-center","top-right","center","bottom-left","bottom-center","bottom-right"],Xm=Ym.filter(r=>r!=="critical"),mu={size:gu[1],variant:vu[0],scheme:uu[2],popover:pu[2],placement:fu[4],severity:hu[0],showDismiss:!0},bu=(r,e="toggle")=>{const a=document.getElementById(r);({toggle:()=>a?.togglePopover(),show:()=>a?.showPopover(),hide:()=>a?.hidePopover()})[e]()},$u=s`--arcâ¢progress`,Jm=s`${$u}â¢bar`,Qm=s`${$u}â¢value`,yu=s`${Jm}â¢bg`,Ao=s`${Qm}â¢bg`,rb=s` 7122@layer arc-components { 7123 7124 /* Shared defaults from _Internal/Components.css.js */ 7125 ${E0} 7126 7127 [arc-progress-bar] { 7128 ${yu}: var(--arc-color-alpha-subtle); 7129 ${Ao}: var(--arc-color-bg-brand-stark); 7130 7131 &[data-variant=ai] { 7132 ${Ao}: var(--arc-progress-bar-gradient-ai-200); 7133 } 7134 7135 &[data-variant=critical] { 7136 ${Ao}: var(--arc-color-bg-critical-mid); 7137 } 7138 } 7139 7140 [arc-progress-bar] { 7141 appearance: none; 7142 width: 100%; 7143 height: var(${p}â¢8); 7144 7145 /* firefox needs these at this level, other browsers can use these too */ 7146 background: var(--arc-progress-bar-background, var(${yu})); 7147 border-radius: var(--arc-border-radius-pill); 7148 border: none; 7149 7150 /* turn off the default bar background for other browsers */ 7151 &::-webkit-progress-bar { background: none; } 7152 7153 /* firefox's progress-value bar */ 7154 &::-moz-progress-bar { 7155 border-radius: var(--arc-border-radius-pill); 7156 background: var(--arc-progress-bar-value-background, var(${Ao})); 7157 } 7158 7159 /* all the others' progress-value bar */ 7160 &::-webkit-progress-value { 7161 border-radius: var(--arc-border-radius-pill); 7162 background: var(--arc-progress-bar-value-background, var(${Ao})); 7163 } 7164 } 7165 7166} 7167`,eb=({progress:r=0,variant:e="common",...a})=>(0,i.jsxs)("progress",{...a,"arc-progress-bar":"","data-variant":e,value:r,max:a.max||100,"aria-valuenow":r,"aria-valuemax":a.max||100,children:[r,"% "]});lr("ArcProgressBar",rb);const ca=s`--arcâ¢toast`,rc=s`${ca}â¢content`,xu=s`${ca}â¢color`,ku=s`${ca}â¢background`,So=s`${ca}â¢iconâ¢color`,zo=s`${ca}â¢transition`,ab=s` 7168@layer arc-components { 7169 7170 [arc-toast] { 7171 ${rc}â¢gap: var(${E}â¢2); 7172 ${zo}â¢duration: 300ms; 7173 ${So}: currentcolor; 7174 7175 /* SIZES -------------------------------------------------------⢠*/ 7176 &[data-size=md] { /* @default */ 7177 ${ca}â¢fontâ¢size: var(${p}â¢16); 7178 ${rc}â¢fontâ¢size: var(${p}â¢14); 7179 } 7180 7181 &[data-size=inherit] { 7182 ${ca}â¢fontâ¢size: 1em; 7183 ${rc}â¢fontâ¢size: 0.875em; 7184 } 7185 7186 /* STATES ------------------------------------------------------⢠*/ 7187 &[data-severity=error] { 7188 ${So}: var(--arc-color-fg-critical-mid); 7189 } 7190 7191 &[data-severity=success] { 7192 ${So}: var(--arc-color-fg-success-mid); 7193 } 7194 7195 &[data-severity=warning] { 7196 ${So}: var(--arc-color-fg-warning-mid); 7197 } 7198 7199 /* VARIANTS ----------------------------------------------------⢠*/ 7200 &[data-variant=common] { /* @default */ 7201 ${ku}: var(--arc-color-bg-mono); 7202 ${xu}: var(--arc-color-fg-primary); 7203 } 7204 7205 /* PLACEMENTS --------------------------------------------------⢠*/ 7206 &[data-placement*=top-] { inset-block-start: var(--arc-toast-inset-block-start, 0); } 7207 &[data-placement*=bottom-] { inset-block-end: var(--arc-toast-inset-block-end, 0); } 7208 &[data-placement*=-left] { inset-inline-start: var(--arc-toast-inset-inline-start, 0); } 7209 &[data-placement*=-right] { inset-inline-end: var(--arc-toast-inset-inline-end, 0); } 7210 &[data-placement*=-center] { inset-inline-start: var(--arc-toast-inset-inline-start, 50%); translate: -50% 0; } 7211 &[data-placement=center] { inset: var(--arc-toast-inset, 0); margin: var(--arc-toast-offset, auto); } 7212 } 7213 7214 /* CORE STYLES ---------------------------------------------------⢠*/ 7215 [arc-toast] { 7216 inset: var(--arc-toast-inset, auto); 7217 margin: var(--arc-toast-offset, var(${E}â¢16)); /* @note: '-offset' here is legacy variable name */ 7218 align-items: center; 7219 7220 font-size: var(${ca}â¢fontâ¢size); /* @note: see [arc-toast-content] for actual font-size via the [data-size] attribute */ 7221 7222 color: var(--arc-toast-color, var(${xu})); 7223 background-color: var(--arc-toast-background, var(${ku})); 7224 border-radius: var(--arc-toast-border-radius, var(--arc-border-radius-lg)); 7225 padding: var(--arc-toast-padding, var(${E}â¢12) var(${E}â¢12) var(${E}â¢12) var(${E}â¢16)); 7226 box-shadow: var(--arc-shadow-lg); 7227 border: none; 7228 7229 max-width: var(--arc-toast-max-width, 40em); 7230 min-width: var(--arc-toast-min-width, 12em); 7231 min-height: var(--arc-toast-min-height, var(${ca}â¢minâ¢height, 3.5em)); 7232 7233 &:has([arc-toast-heading] + [arc-toast-subtext]) { 7234 ${ca}â¢minâ¢height: 5em; 7235 } 7236 7237 [arc-toast-content-grid] { 7238 flex: 1; 7239 display: grid; 7240 grid-template-columns: 1fr auto; 7241 gap: var(${E}â¢8) var(${E}â¢16); 7242 } 7243 7244 [arc-toast-body] { 7245 display: flex; 7246 align-items: baseline; 7247 gap: var(${E}â¢8); 7248 padding: var(${E}â¢4) 0; /* vertical padding to align with action button text */ 7249 min-width: 14em; 7250 7251 p { 7252 margin: 0; 7253 } 7254 } 7255 7256 [arc-toast-icon] { 7257 --arc-icon-color: var(--arc-toast-icon-color, var(${So})); 7258 7259 height: 1lh; 7260 padding: 0 var(${E}â¢2); 7261 } 7262 7263 [arc-toast-content] { 7264 flex: 1; 7265 7266 font-size: var(--arc-toast-font-size, var(${rc}â¢fontâ¢size)); 7267 line-height: var(--arc-line-height-loose); 7268 hyphens: auto; 7269 7270 display: block; 7271 7272 &:has([arc-toast-heading] + [arc-toast-subtext]) { 7273 display: flex; 7274 flex-direction: column; 7275 gap: var(${E}â¢2); 7276 } 7277 } 7278 7279 [arc-toast-actions] { 7280 align-self: baseline; 7281 7282 display: flex; 7283 align-items: center; 7284 gap: 0.5em; 7285 } 7286 7287 [arc-toast-progress-bar] { 7288 grid-column: 1 / -1; 7289 } 7290 } 7291 7292 /* POPOVER + state -----------------------------------------------⢠*/ 7293 7294 [arc-toast] { 7295 opacity: 0; 7296 content-visibility: hidden; 7297 transition: 7298 display var(${zo}â¢duration) allow-discrete, 7299 overlay var(${zo}â¢duration) allow-discrete, 7300 content-visibility var(${zo}â¢duration) allow-discrete, 7301 opacity var(${zo}â¢duration); 7302 } 7303 7304 [arc-toast]:popover-open { 7305 display: flex; 7306 opacity: 1; 7307 content-visibility: visible; 7308 } 7309 7310 @starting-style { 7311 [arc-toast]:popover-open { 7312 opacity: 0; 7313 content-visibility: hidden; 7314 } 7315 } 7316} 7317`,wu=({id:r,children:e,icon:a,heading:t,subtext:o,dismissProps:n,showDismiss:c=!0,onClose:l,actionSlot:d,size:h="md",variant:g="common",scheme:f=mu.scheme,placement:v="bottom-left",getToastId:b,progressBarProps:m,severity:$,...w})=>{const _=()=>{l?.()},y=f==="auto"?void 0:f,C=!!d||c,S=Ir(r,"arc-toast"),{variant:I,hierarchy:j,...L}=n||{};(0,u.useEffect)(()=>{b?.(S)},[b,S]);const D=wc(a);return(0,i.jsx)("div",{...w,"arc-toast":"","arc-scheme":y,"data-size":h,"data-variant":g,"data-
7317placement":v,"data-severity":$||void 0,id:S,children:(0,i.jsxs)("div",{"arc-toast-content-grid":"",children:[(0,i.jsxs)("div",{"arc-toast-body":"",children:[a&&(0,i.jsx)(ir,{icon:D,"arc-toast-icon":""}),(0,i.jsx)("div",{"arc-toast-content":"",children:e||(0,i.jsxs)(i.Fragment,{children:[t&&(0,i.jsx)("header",{"arc-toast-heading":"",children:(0,i.jsx)("strong",{children:t})}),o&&(0,i.jsx)("p",{"arc-toast-subtext":"",children:o})]})})]}),C&&(0,i.jsxs)("div",{"arc-toast-actions":"",children:[d,c&&(0,i.jsx)(Ar,{icon:"fa-regular fa-xmark-large",layout:"icon",variant:"common",hierarchy:"tertiary",size:"md",shape:"square","aria-label":"Dismiss",...L,popoverTarget:S,onClick:_})]}),m&&(0,i.jsx)(eb,{...m,variant:$==="error"?"critical":m.variant,"arc-toast-progress-bar":""})]})})};wu.handleToast=bu,lr("ArcToast",ab);var Eo;(function(r){r.None="none",r.Persistent="localStorage",r.Temporary="sessionStorage"})(Eo||(Eo={}));const tb=(r,e,a)=>{const[t,o]=(0,u.useState)(e),[n,c]=lm(r,e),[l,d]=Ji(r,e);return a===Eo.Temporary?[n,c]:a===Eo.Persistent?[l,d]:[t,o]},ob=["auto","hex","hexa","rgb","hsl","oklch"],nb=()=>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.