vendor: 4,432 bytes, line 1
1(globalThis.wpRiseJsonp=globalThis.wpRiseJsonp||[]).push([["defaultVendors-node_modules_pnpm_articulate_design-system_1_28_0__articulate_design-system-to-de783f"],{68563(nd){var Nn="Expected a function",ta=NaN,Da="[object Symbol]",Fn=/^\s+|\s+$/g,Ei=/^[-+]0x[0-9a-f]+$/i,wo=/^0b[01]+$/i,Ur=/^0o[0-7]+$/i,Hn=parseInt,pa=typeof globalThis=="object"&&globalThis&&globalThis.Object===Object&&globalThis,Vn=typeof self=="object"&&self&&self.Object===Object&&self,Gn=pa||Vn||Function("return this")(),ze=Object.prototype,ht=ze.toString,Un=Math.max,_i=Math.min,pt=function(){return Gn.Date.now()};function Lt(Rr,be,ga){var Oa,fr,$e,oa,Ze,Je,vt=0,Wn=!1,na=!1,ca=!0;if(typeof Rr!="function")throw new TypeError(Nn);be=So(be)||0,gt(ga)&&(Wn=!!ga.leading,na="maxWait"in ga,$e=na?Un(So(ga.maxWait)||0,be):$e,ca="trailing"in ga?!!ga.trailing:ca);function i(ae){var va=Oa,ft=fr;return Oa=fr=void 0,vt=ae,oa=Rr.apply(ft,va),oa}function s(ae){return vt=ae,Ze=setTimeout(Qa,be),Wn?i(ae):oa}function Dt(ae){var va=ae-Je,ft=ae-vt,qn=be-va;return na?_i(qn,$e-ft):qn}function Ot(ae){var va=ae-Je,ft=ae-vt;return Je===void 0||va>=be||va<0||na&&ft>=$e}function Qa(){var ae=pt();if(Ot(ae))return Co(ae);Ze=setTimeout(Qa,Dt(ae))}function Co(ae){return Ze=void 0,ca&&Oa?i(ae):(Oa=fr=void 0,oa)}function Xn(){Ze!==void 0&&clearTimeout(Ze),vt=0,Oa=Je=fr=Ze=void 0}function Ti(){return Ze===void 0?oa:Co(pt())}function d(){var ae=pt(),va=Ot(ae);if(Oa=arguments,fr=this,Je=ae,va){if(Ze===void 0)return s(Je);if(na)return Ze=setTimeout(Qa,be),i(Je)}return Ze===void 0&&(Ze=setTimeout(Qa,be)),oa}return d.cancel=Xn,d.flush=Ti,d}function gt(Rr){var be=typeof Rr;return!!Rr&&(be=="object"||be=="function")}function Kn(Rr){return!!Rr&&typeof Rr=="object"}function Pi(Rr){return typeof Rr=="symbol"||Kn(Rr)&&ht.call(Rr)==Da}function So(Rr){if(typeof Rr=="number")return Rr;if(Pi(Rr))return ta;if(gt(Rr)){var be=typeof Rr.valueOf=="function"?Rr.valueOf():Rr;Rr=gt(be)?be+"":be}if(typeof Rr!="string")return Rr===0?Rr:+Rr;Rr=Rr.replace(Fn,"");var ga=wo.test(Rr);return ga||Ur.test(Rr)?Hn(Rr.slice(2),ga?2:8):Ei.test(Rr)?ta:+Rr}nd.exports=Lt},34666(nd,Nn,ta){"use strict";ta.r(Nn),ta.d(Nn,{ARC_DROPDOWN_SUBMENU_OMIT_KEYS:()=>E0,ARC_MENU_DELAY_MS:()=>Dl,Arc:()=>Gy,ArcAbstractFlexLayouts:()=>be,ArcAbstractGapSizes:()=>Kn,ArcAbstractIconSizes:()=>gt,ArcAbstractOrientations:()=>ga,ArcAbstractPopoverActions:()=>Lt,ArcAbstractPopoverModes:()=>pt,ArcAbstractTextLayouts:()=>Rr,ArcAbstractTextOverflows:()=>So,ArcAbstractTextSizes:()=>Pi,ArcAvatar:()=>qi,ArcAvatarColors:()=>$d,ArcAvatarColorsReserved:()=>Gp,ArcAvatarOverflow:()=>mf,ArcAvatarOverflowSizes:()=>Yp,ArcAvatarPile:()=>Cg,ArcAvatarPileSizes:()=>qp,ArcAvatarSizes:()=>Up,ArcAvatarText:()=>ec,ArcAvatarTextGapSizes:()=>Kp,ArcAvatarTextOverflows:()=>Wp,ArcAvatarTextSizes:()=>Xp,ArcBadge:()=>If,ArcBadgeColors:()=>Cf,ArcBadgeContrasts:()=>_f,ArcBadgeCount:()=>Vf,ArcBadgeCountColors:()=>Af,ArcBadgeCountContrasts:()=>Nf,ArcBadgeCountShapes:()=>Ff,ArcBadgeCountSizes:()=>Of,ArcBadgeCountVariants:()=>Bf,ArcBadgeLayouts:()=>Ef,ArcBadgeSizes:()=>zf,ArcBadgeVariants:()=>Pf,ArcBanner:()=>cm,ArcBannerActionPlacements:()=>rm,ArcBannerAlignments:()=>em,ArcBannerDefaults:()=>ot,ArcBannerDensities:()=>Jf,ArcBannerLayouts:()=>Qf,ArcBannerSchemes:()=>am,ArcBannerVariants:()=>om,ArcButton:()=>Br,ArcButtonHierarchies:()=>cu,ArcButtonLayouts:()=>kv,ArcButtonPopoverActions:()=>Sv,ArcButtonSchemes:()=>vs,ArcButtonShadows:()=>wv,ArcButtonShapes:()=>yv,ArcButtonSizes:()=>xv,ArcButtonVariants:()=>nu,ArcCheckbox:()=>ku,ArcCheckboxBar:()=>ym,ArcCheckboxBarLayouts:()=>mm,ArcCheckboxBarOption:()=>ju,ArcCheckboxBarSizes:()=>bm,ArcCheckboxBarVariants:()=>$m,ArcCheckboxLayouts:()=>pm,ArcCheckboxSizes:()=>gm,ArcCheckboxVariants:()=>vm,ArcChip:()=>Mm,ArcChipDefaults:()=>Ds,ArcChipSizes:()=>Im,ArcChipVariants:()=>Tm,ArcColorAllTools:()=>Nm,ArcColorGradientTools:()=>Nc,ArcColorPalette:()=>fn,ArcColorPaletteAddFlows:()=>Bm,ArcColorPicker:()=>Wa,ArcColorPickerDefaults:()=>wa,ArcColorPickerModes:()=>Lm,ArcColorPickerPanels:()=>Dm,ArcColorSimpleTools:()=>Mu,ArcColorSolidTools:()=>Os,ArcColorSwatch:()=>vn,ArcColorSwatchKinds:()=>Om,ArcColorValueFormats:()=>rx,ArcDropdownMenu:()=>hi,ArcIcon:()=>Ar,ArcIconText:()=>ue,ArcIconTextVariants:()=>Zg,ArcInputAction:()=>T0,ArcLabel:()=>wt,ArcLabelContent:()=>St,ArcLabelLayouts:()=>sm,ArcLink:()=>A1,ArcLinkVariants:()=>C1,ArcModal:()=>W1,ArcModalAlert:()=>q1,ArcModalAlertDefaults:()=>
1qa,ArcModalAlertVariants:()=>P1,ArcModalBackdropColors:()=>T1,ArcModalBodyPaddings:()=>I1,ArcModalCloseReasons:()=>j1,ArcModalCommonDefaults:()=>Fe,ArcModalCommonVariants:()=>E1,ArcModalConfirm:()=>O0,ArcModalConfirmDefaults:()=>ut,ArcModalConfirmVariants:()=>_1,ArcModalSchemes:()=>z1,ArcModalSizes:()=>R1,ArcPopover:()=>ya,ArcPopoverActions:()=>Ag,ArcPopoverAnchors:()=>ac,ArcPopoverBoundaries:()=>Ji,ArcPopoverButton:()=>Go,ArcPopoverDefaults:()=>Me,ArcPopoverDensities:()=>Id,ArcPopoverModes:()=>Yi,ArcPopoverSchemes:()=>Zi,ArcPopoverVariants:()=>Td,ArcPopoverVariantsWithOutline:()=>zg,ArcRadio:()=>l0,ArcRadioBar:()=>v0,ArcRadioBarLayouts:()=>x$,ArcRadioBarOption:()=>Ml,ArcRadioBarSizes:()=>k$,ArcRadioBarVariants:()=>w$,ArcRadioLayouts:()=>b$,ArcRadioSizes:()=>$$,ArcSVGGradientDef:()=>Sd,ArcSearch:()=>W0,ArcSearchLayouts:()=>uy,ArcSearchSizes:()=>hy,ArcSearchVariants:()=>py,ArcSelect:()=>Cy,ArcSelectLayouts:()=>my,ArcSelectSizes:()=>by,ArcSelectVariants:()=>$y,ArcSlider:()=>Cl,ArcSliderLabelPlacements:()=>u$,ArcSliderLayouts:()=>s$,ArcSliderSizes:()=>l$,ArcSliderVariants:()=>d$,ArcSwitch:()=>_y,ArcSwitchLabelPositions:()=>bo,ArcSwitchSizes:()=>Ay,ArcSwitchStates:()=>me,ArcSystemAIGradients:()=>Un,ArcSystemAlignments:()=>Vn,ArcSystemColors:()=>ht,ArcSystemGradients:()=>_i,ArcSystemHierarchies:()=>Hn,ArcSystemLayouts:()=>pa,ArcSystemLineHeights:()=>Gn,ArcSystemSchemes:()=>Da,ArcSystemShadows:()=>Fn,ArcSystemShapes:()=>wo,ArcSystemSizes:()=>ze,ArcSystemSurfaces:()=>Ei,ArcSystemVariants:()=>Ur,ArcTextAlignments:()=>Oy,ArcTextBodyElements:()=>ap,ArcTextBodySizes:()=>Ly,ArcTextBodyVariants:()=>Dy,ArcTextElements:()=>tp,ArcTextHeadingElements:()=>ep,ArcTextHeadingSizes:()=>Ry,ArcTextHeadingVariants:()=>My,ArcTextInput:()=>uo,ArcTextInputLayouts:()=>o$,ArcTextInputSizes:()=>n$,ArcTextInputTypes:()=>i$,ArcTextInputVariants:()=>c$,ArcTextKinds:()=>Py,ArcTextLineHeights:()=>By,ArcTextSchemes:()=>Ty,ArcTextSubheadingSizes:()=>jy,ArcTextTitleSizes:()=>Iy,ArcToast:()=>yp,ArcToastDefaults:()=>gp,ArcToastPlacements:()=>pp,ArcToastPopoverActions:()=>Ky,ArcToastPopoverModes:()=>hp,ArcToastProgressBarVariants:()=>Wy,ArcToastSchemes:()=>sp,ArcToastSeverities:()=>lp,ArcToastSizes:()=>dp,ArcToastVariants:()=>up,ArcTooltip:()=>mc,ArcTooltipDefaults:()=>ma,COLOR_DEFAULTS:()=>qe,DEFAULT_COLOR_PICKER_LABELS:()=>Ce,DeprecatedButtonVariants:()=>fs,EPS_LOOSE:()=>tn,EPS_MID:()=>Hc,EPS_STRICT:()=>Bs,GRADIENT_DEFAULTS:()=>rr,IS_FLOATING:()=>Rd,SLIDER_TOKENS:()=>Zh,SLIDER_TOKENS_REGEX:()=>Jh,SVGLogoArticulate:()=>Ni,SVGLogoProductAI:()=>Fi,SVGLogoProductPeek:()=>Hi,SVGLogoProductReach:()=>Vi,SVGLogoProductReview:()=>Gi,SVGLogoProductRise:()=>Ui,SVGLogoProductStoryline:()=>Ki,SVGLogoProductStudio:()=>Wi,StorageType:()=>On,adoptStyles:()=>Cr,adoptThemeTokens:()=>Np,anchorNameRegistry:()=>jo,appendGradientStop:()=>uh,appendUniqueColorValue:()=>Zm,arcGradientsEqual:()=>dn,arcGradientsSemanticEqual:()=>ct,arcGradientsVisuallyEqual:()=>al,assignRef:()=>oa,bindDelegatedEvents:()=>au,buildDefaultGradientStops:()=>nh,buildStopFieldBackground:()=>gh,canonicalizeToHsv:()=>Xc,clamp:()=>Ze,clampIt:()=>Z,colorValueEquals:()=>oo,compositeRgbaOver:()=>Gc,computeEvenlyDistributedStopAt:()=>ih,computeNextStopAt:()=>tl,computeStopAtBetween:()=>un,createEmptyRect:()=>ex,css:()=>d,cssFeatures:()=>tc,decodeDeprecatedButtonVariant:()=>Ev,didElementRectChange:()=>Wn,distributeGradientStopPositions:()=>sh,encodeDeprecatedButtonVariant:()=>_v,expandHex3To6:()=>Ks,expandShortHex:()=>Us,extractTextFromReactNode:()=>Io,formatAlphaCss:()=>Kc,formatAlphaPercent:()=>ro,formatAnchorName:()=>rs,getArcColorAs:()=>eh,getArcColorData:()=>nt,getArcColorParts:()=>rh,getArcColorValue:()=>Js,getArcContrastColor:()=>no,getArcGradientData:()=>hn,getArcGradientMeridianColor:()=>qc,getColorName:()=>Wc,getCssColor:()=>Dr,getElementByIdScoped:()=>ca,getGradientName:()=>hh,getGradientStopKeyboardDelta:()=>bh,getPlainLabel:()=>J0,getPreferredAnchorForTooltipId:()=>ps,getResolvedHierarchy:()=>du,getResolvedScheme:()=>uu,getResolvedShape:()=>iu,getResolvedVariant:()=>lu,getSelectedColorMeta:()=>rl,getShadowRootOrDocument:()=>na,getSortedStopEntries:()=>ka,getSvgGradientCoords:()=>wd,handlePopover:()=>Od,handleToast:()=>vp,hasBaseSelectSupport:()=>X0,hasEmptyValueOption:()=>Z0,hasMatchingColorValue:()=>Qs,hasNativeAnchorPositioning:()=>Qi,hexAfterChannelNudge:()=>Ju,hslToRgbaData:()=>Fu,hsvDeltaOK:()=>sn,hsvToRgbaData:()=>De,interpolateGradientStopColor:()=>lh,isArcColorGradient:()=>Zr,isArcColorPickerGradientChange:()=>Fm,isArcColorPickerSolidChange:()=>Du,isArcColorSwatchGradientDetails:()=>Lu,isDeprecatedButtonVariant:()=>ms,isDifferent:()=>Je,isGroupLegendItem:()=>q0,isHexLike:()=>qu,isHsvLike:()=>Zu,isObject:()=>kd,isRgbaLike:()=>Yu,isSame:()=>vt,isSelectGroup:()=>yi,isSelectedColorMatch:()=>oh,isString:()=>Ht,joinArray:()=>Ro,logError:()=>Kg,logMessage:()=>
1Ug,logSkippedTopLevelItem:()=>Y0,logWarning:()=>Kd,makeHtmlId:()=>eg,makeRandomColor:()=>ln,mapDeprecated:()=>Oa,mergeRgbaFromHexDraft:()=>Xu,noTailAnchors:()=>jd,noop:()=>Ct,normalizeAnchorName:()=>Mo,normalizeByte:()=>ge,normalizeColorValue:()=>to,normalizeHexInput:()=>Va,normalizeHue:()=>Vc,normalizeUnit:()=>Nu,oklchToRgbaData:()=>Gu,parseAlphaInput:()=>Ku,parseByte:()=>on,parseCssColorToRgba:()=>Kr,parseHexStringToRgba:()=>Wu,percentsFromValue:()=>Ns,pickFromList:()=>fr,pickFromListByKeys:()=>$e,positionTryNameFor:()=>Ld,relativeLuminance:()=>Uu,renderableOption:()=>mo,resolveColorPickerLabels:()=>Fc,resolveFallbackAnchors:()=>Md,resolveGradientAngleFromPointerDrag:()=>fh,resolveGradientData:()=>ph,resolveGradientStopAtFromPointer:()=>vh,resolveInsertedGradientStop:()=>dh,resolvePointerAngleDeg:()=>ol,resolveTailMetrics:()=>Dd,rgbaBytesEqual:()=>Hs,rgbaDeltaOK:()=>Uc,rgbaEchoDeltaOK:()=>Vs,rgbaToHslData:()=>Hu,rgbaToHsvData:()=>nn,rgbaToOklchData:()=>Vu,roundGradientStopsForCommit:()=>Et,roundIt:()=>xa,shareAdoptedStyles:()=>Bp,shouldSortStopAtAdjacent:()=>rb,shouldSortStopAtNeighborPositions:()=>el,snapGradientAngle:()=>mh,snapIt:()=>Bu,snapToStep:()=>a0,sortGradientStops:()=>ch,splitString:()=>Ud,stepGradientAngleBySnap:()=>ab,stepToNextSnap:()=>t0,syncAnchorName:()=>Bd,toHEX:()=>Oe,toHSL:()=>Ys,toLinearChannel:()=>zt,toLinearGradientCss:()=>Ua,toOKLCH:()=>Zs,toOpaqueRgbHexNoHash:()=>ao,toPx:()=>Lo,toRGB:()=>Ga,unbindDelegatedEvents:()=>hv,useIsoLayoutEffect:()=>et,useShiftSnap:()=>o0,useStableId:()=>Or,useStorage:()=>Qy});const Da=["auto","light","dark","inverse"],Fn=["none","sm","md","lg","xl"],Ei=["primary","secondary","inset","raised","floating"],wo=["circle","round","pill","square","narrow"],Ur=["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"],Hn=["primary","secondary","tertiary","plain","link-style"],pa=["hug","fill","icon","gutter","inline"],Vn=["inherit","start","left","justify","center","between","around","evenly","stretch","end","right"],Gn=["inherit","tight","standard","loose"],ze=["inherit","xxl","xl","lg","md","sm","xs","xxs","custom","fullscreen"],ht=["blue","orange","mint","red","yellow","green","maroon","purple","neutral","white","black","mono","mono-inverse","overlay-light","overlay-dark","ai","brand"],Un=["ai","ai-50","ai-100","ai-200","ai-300","ai-400","ai-500","ai-600"],_i=[...Un],pt=["","auto","manual"],Lt=["toggle","show","hide"],gt=["inherit","xl","lg","md","sm","xs"],Kn=["inherit","lg","md","sm"],Pi=["inherit","md","sm"],So=["inherit","wrap","truncate"],Rr=["gutter","inline"],be=["hug","fill"],ga=["horizontal","vertical"],Oa=(r,e)=>e[r]||r,fr=(r,e)=>r.filter(a=>e.includes(a)),$e=(r,e)=>e.filter(a=>r.includes(a)),oa=(r,e)=>{r&&(typeof r=="function"?r(e):r.current=e)},Ze=(r,e=0,a=100)=>Math.min(Math.max(r,e),a),Je=(r,e)=>r!==e,vt=(r,e)=>r===e,Wn=({a:r,b:e})=>Je(r?.top,e?.top)||Je(r?.left,e?.left)||Je(r?.width,e?.width)||Je(r?.height,e?.height);function na(r){if(!(r instanceof Node))return null;const e=r.getRootNode();return e instanceof ShadowRoot||e instanceof Document?e:null}function ca(r,e){if(typeof document>"u")return null;const a=e==null?document:na(e)??document,t=a.getElementById(r);return t||(a!==document?document.getElementById(r):null)}var i=ta(69838),s=ta(82920);/** 2 * @license 3 * Copyright 2019 Google LLC 4 * SPDX-License-Identifier: BSD-3-Clause 5 */const Dt=globalThis,Ot=Dt.ShadowRoot&&(Dt.ShadyCSS===void 0||Dt.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,Qa=Symbol(),Co=new WeakMap;class Xn{constructor(e,a,t){if(this._$cssResult$=!0,t!==Qa)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(Ot&&e===void 0){const t=a!==void 0&&a.length===1;t&&(e=Co.get(a)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&Co.set(a,e))}return e}toString(){return this.cssText}}const Ti=r=>new Xn(typeof r=="string"?r:r+"",void 0,Qa),d=(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 Xn(a,r,Qa)},ae=(r,e)=>{if(Ot)r.adoptedStyleSheets=e.map((a=>a instanceof CSSStyleSheet?a:a.styleSheet));else for(const a of e){const t=document.createElement("style"),o=Dt.litNonce;o!==void 0&&t.setAttribute("nonce",o),t.textContent=a.cssText,r.appendChild(t)}},va=Ot?r=>r:r=>r instanceof CSSStyleSheet?(e=>{let a="";for(const t of e.cssRules)a+=t.cssText;return Ti(a)})(r):r;/** 6 * @license 7 * Copyright 2017 Google LLC 8 * SPDX-License-Identifier: BSD-3-Clause 9 */const{is:ft,defineProperty:qn,getOwnPropertyDescriptor:xp,getOwnPropertyNames:kp,getOwnPropertySymbols:wp,getPrototypeOf:Sp}=Object,Yn=globalThis,cd=Yn.trustedTypes,Cp=cd?cd.emptyScript:"",Ap=Yn.reactiveElementPolyfillSupport,Ao=(r,e)=>r,Ii={toAttribute(r,e){switch(e){case Boolean:r=r?Cp: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}},id=(r,e)=>!ft(r,e),sd={attribute:!0,type:String,converter:Ii,reflect:!1,useDefault:!1,hasChanged:id};Symbol.metadata??=Symbol("metadata"),Yn.litPropertyMetadata??=new WeakMap;class Bt 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=sd){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&&qn(this.prototype,e,o)}}static getPropertyDescriptor(e,a,t){const{get:o,set:n}=xp(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)??sd}static _$Ei(){if(this.hasOwnProperty(Ao("elementProperties")))return;const e=Sp(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(Ao("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(Ao("properties"))){const a=this.properties,t=[...kp(a),...wp(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: 4,720 bytes, lines 9-15
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(va(o))}else e!==void 0&&a.push(va(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 ae(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:Ii).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:Ii;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??id)(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){}}Bt.elementStyles=[],Bt.shadowRootOptions={mode:"open"},Bt[Ao("elementProperties")]=new Map,Bt[Ao("finalized")]=new Map,Ap?.({ReactiveElement:Bt}),(Yn.reactiveElementVersions??=[]).push("2.1.1");/** 10 * @license 11 * Copyright 2017 Google LLC 12 * SPDX-License-Identifier: BSD-3-Clause 13 */const Ri=globalThis,Zn=Ri.trustedTypes,ld=Zn?Zn.createPolicy("lit-html",{createHTML:r=>r}):void 0,dd="$lit$",rt=`lit$${Math.random().toFixed(9).slice(2)}$`,ud="?"+rt,zp=`<${ud}>`,mt=document,zo=()=>mt.createComment(""),Eo=r=>r===null||typeof r!="object"&&typeof r!="function",ji=Array.isArray,Ep=r=>ji(r)||typeof r?.[Symbol.iterator]=="function",Mi=`[ 14\f\r]`,_o=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,hd=/-->/g,pd=/>/g,bt=RegExp(`>|${Mi}(?:([^\\s"'>=/]+)(${Mi}*=${Mi}*(?:[^ 15\f\r"'\`<>=]|("|')|))|$)`,"g"),gd=/'/g,vd=/"/g,fd=/^(?:script|style|textarea|title)$/i,Li=r=>(e,...a)=>({_$litType$:r,strings:e,values:a}
vendor: 16,384 bytes, lines 15-231
15),ax=Li(1),tx=Li(2),ox=Li(3),Nt=Symbol.for("lit-noChange"),le=Symbol.for("lit-nothing"),md=new WeakMap,$t=mt.createTreeWalker(mt,129);function bd(r,e){if(!ji(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return ld!==void 0?ld.createHTML(e):e}const _p=(r,e)=>{const a=r.length-1,t=[];let o,n=e===2?"<svg>":e===3?"<math>":"",c=_o;for(let l=0;l<a;l++){const u=r[l];let h,p,f=-1,g=0;for(;g<u.length&&(c.lastIndex=g,p=c.exec(u),p!==null);)g=c.lastIndex,c===_o?p[1]==="!--"?c=hd:p[1]!==void 0?c=pd:p[2]!==void 0?(fd.test(p[2])&&(o=RegExp("</"+p[2],"g")),c=bt):p[3]!==void 0&&(c=bt):c===bt?p[0]===">"?(c=o??_o,f=-1):p[1]===void 0?f=-2:(f=c.lastIndex-p[2].length,h=p[1],c=p[3]===void 0?bt:p[3]==='"'?vd:gd):c===vd||c===gd?c=bt:c===hd||c===pd?c=_o:(c=bt,o=void 0);const v=c===bt&&r[l+1].startsWith("/>")?" ":"";n+=c===_o?u+zp:f>=0?(t.push(h),u.slice(0,f)+dd+u.slice(f)+rt+v):u+rt+(f===-2?l:v)}return[bd(r,n+(r[a]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),t]};class Po{constructor({strings:e,_$litType$:a},t){let o;this.parts=[];let n=0,c=0;const l=e.length-1,u=this.parts,[h,p]=_p(e,a);if(this.el=Po.createElement(h,t),$t.currentNode=this.el.content,a===2||a===3){const f=this.el.content.firstChild;f.replaceWith(...f.childNodes)}for(;(o=$t.nextNode())!==null&&u.length<l;){if(o.nodeType===1){if(o.hasAttributes())for(const f of o.getAttributeNames())if(f.endsWith(dd)){const g=p[c++],v=o.getAttribute(f).split(rt),m=/([.?@])?(.*)/.exec(g);u.push({type:1,index:n,name:m[2],strings:v,ctor:m[1]==="."?Tp:m[1]==="?"?Ip:m[1]==="@"?Rp:Jn}),o.removeAttribute(f)}else f.startsWith(rt)&&(u.push({type:6,index:n}),o.removeAttribute(f));if(fd.test(o.tagName)){const f=o.textContent.split(rt),g=f.length-1;if(g>0){o.textContent=Zn?Zn.emptyScript:"";for(let v=0;v<g;v++)o.append(f[v],zo()),$t.nextNode(),u.push({type:2,index:++n});o.append(f[g],zo())}}}else if(o.nodeType===8)if(o.data===ud)u.push({type:2,index:n});else{let f=-1;for(;(f=o.data.indexOf(rt,f+1))!==-1;)u.push({type:7,index:n}),f+=rt.length-1}n++}}static createElement(e,a){const t=mt.createElement("template");return t.innerHTML=e,t}}function Ft(r,e,a=r,t){if(e===Nt)return e;let o=t!==void 0?a._$Co?.[t]:a._$Cl;const n=Eo(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=Ft(r,o._$AS(r,e.values),o,t)),e}class Pp{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??mt).importNode(a,!0);$t.currentNode=o;let n=$t.nextNode(),c=0,l=0,u=t[0];for(;u!==void 0;){if(c===u.index){let h;u.type===2?h=new To(n,n.nextSibling,this,e):u.type===1?h=new u.ctor(n,u.name,u.strings,this,e):u.type===6&&(h=new jp(n,this,e)),this._$AV.push(h),u=t[++l]}c!==u?.index&&(n=$t.nextNode(),c++)}return $t.currentNode=mt,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 To{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,a,t,o){this.type=2,this._$AH=le,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=Ft(this,e,a),Eo(e)?e===le||e==null||e===""?(this._$AH!==le&&this._$AR(),this._$AH=le):e!==this._$AH&&e!==Nt&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Ep(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!==le&&Eo(this._$AH)?this._$AA.nextSibling.data=e:this.T(mt.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=Po.createElement(bd(t.h,t.h[0]),this.options)),t);if(this._$AH?._$AD===o)this._$AH.p(a);else{const n=new Pp(o,this),c=n.u(this.options);n.p(a),this.T(c),this._$AH=n}}_$AC(e){let a=md.get(e.strings);return a===void 0&&md.set(e.strings,a=new Po(e)),a}k(e){ji(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 To(this.O(zo()),this.O(zo()),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 Jn{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,a,t,o,n){this.type=1,this._$AH=le,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=le}_$AI(e,a=this,t,o){const n=this.strings;let c=!1;if(n===void 0)e=Ft(this,e,a,0),c=!Eo(e)||e!==this._$AH&&e!==Nt,c&&(this._$AH=e);else{const l=e;let u,h;for(e=n[0],u=0;u<n.length-1;u++)h=Ft(this,l[t+u],a,u),h===Nt&&(h=this._$AH[u]),c||=!Eo(h)||h!==this._$AH[u],h===le?e=le:e!==le&&(e+=(h??"")+n[u+1]),this._$AH[u]=h}c&&!o&&this.j(e)}j(e){e===le?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Tp extends Jn{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===le?void 0:e}}class Ip extends Jn{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==le)}}class Rp extends Jn{constructor(e,a,t,o,n){super(e,a,t,o,n),this.type=5}_$AI(e,a=this){if((e=Ft(this,e,a,0)??le)===Nt)return;const t=this._$AH,o=e===le&&t!==le||e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive,n=e!==le&&(t===le||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 jp{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){Ft(this,e)}}const nx=null,Mp=Ri.litHtmlPolyfillSupport;Mp?.(Po,To),(Ri.litHtmlVersions??=[]).push("3.3.1");const Lp=(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 To(e.insertBefore(zo(),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 Di=globalThis;class Qn extends Bt{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=Lp(a,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return Nt}}Qn._$litElement$=!0,Qn.finalized=!0,Di.litElementHydrateSupport?.({LitElement:Qn});const Dp=Di.litElementPolyfillSupport;Dp?.({LitElement:Qn});const cx=null;(Di.litElementVersions??=[]).push("4.2.1");const Op=`@charset "UTF-8"; 20@layer arc-theme, arc-components, arc-utils; 21@layer arc-theme { 22 :root, 23 ::backdrop { 24 --arc-color-mono-black: #000000; 25 --arc-color-mono-white: #ffffff; 26 --arc-color-light-neutral-0: #ffffff; 27 --arc-color-light-neutral-50: #f7f7f7; 28 --arc-color-light-neutral-100: #ededed; 29 --arc-color-light-neutral-200: #e6e6e6; 30 --arc-color-light-neutral-300: #c6c6c6; 31 --arc-color-light-neutral-400: #b0b0b0; 32 --arc-color-light-neutral-500: #9b9b9b; 33 --arc-color-light-neutral-600: #737373; 34 --arc-color-light-neutral-700: #636363; 35 --arc-color-light-neutral-800: #4b4b4b; 36 --arc-color-light-neutral-900: #212121; 37 --arc-color-light-neutral-1000: #000000; 38 --arc-color-light-blue-50: #f0fbff; 39 --arc-color-light-blue-100: #ddf4fd; 40 --arc-color-light-blue-200: #99e4ff; 41 --arc-color-light-blue-300: #53d1ff; 42 --arc-color-light-blue-400: #00aff0; 43 --arc-color-light-blue-500: #0098eb; 44 --arc-color-light-blue-600: #0075cf; 45 --arc-color-light-blue-700: #0065b2; 46 --arc-color-light-blue-800: #005394; 47 --arc-color-light-blue-900: #00335b; 48 --arc-color-light-purple-50: #f1f0ff; 49 --arc-color-light-purple-100: #e9e7fe; 50 --arc-color-light-purple-200: #b2a8ff; 51 --arc-color-light-purple-300: #9789fa; 52 --arc-color-light-purple-400: #8676ff; 53 --arc-color-light-purple-500: #7565f1; 54 --arc-color-light-purple-600: #4e3bd5; 55 --arc-color-light-purple-700: #3120b4; 56 --arc-color-light-purple-800: #16068e; 57 --arc-color-light-purple-900: #0c0064; 58 --arc-color-light-mint-50: #f0fff9; 59 --arc-color-light-mint-100: #d9fdef; 60 --arc-color-light-mint-200: #9df1d1; 61 --arc-color-light-mint-300: #6de3b6; 62 --arc-color-light-mint-400: #44bf90; 63 --arc-color-light-mint-500: #0f9f68; 64 --arc-color-light-mint-600: #008451; 65 --arc-color-light-mint-700: #006e44; 66 --arc-color-light-mint-800: #005937; 67 --arc-color-light-mint-900: #00442a; 68 --arc-color-light-orange-50: #fff6f0; 69 --arc-color-light-orange-100: #fdeadd; 70 --arc-color-light-orange-200: #fac39e; 71 --arc-color-light-orange-300: #fd9e5e; 72 --arc-color-light-orange-400: #ff6602; 73 --arc-color-light-orange-500: #e95d00; 74 --arc-color-light-orange-600: #c24e00; 75 --arc-color-light-orange-700: #a84300; 76 --arc-color-light-orange-800: #933b00; 77 --arc-color-light-orange-900: #662900; 78 --arc-color-light-maroon-50: #ffeff3; 79 --arc-color-light-maroon-100: #fedde5; 80 --arc-color-light-maroon-200: #ffa8be; 81 --arc-color-light-maroon-300: #fe8fab; 82 --arc-color-light-maroon-400: #f27195; 83 --arc-color-light-maroon-500: #e05580; 84 --arc-color-light-maroon-600: #c73868; 85 --arc-color-light-maroon-700: #aa1a53; 86 --arc-color-light-maroon-800: #841a42; 87 --arc-color-light-maroon-900: #5d132d; 88 --arc-color-light-green-50: #f6fff0; 89 --arc-color-light-green-100: #e7fdd9; 90 --arc-color-light-green-200: #bfeea0; 91 --arc-color-light-green-300: #8dd65c; 92 --arc-color-light-green-400: #74bb44; 93 --arc-color-light-green-500: #57a225; 94 --arc-color-light-green-600: #358201; 95 --arc-color-light-green-700: #2c6d00; 96 --arc-color-light-green-800: #235800; 97 --arc-color-light-green-900: #1b4300; 98 --arc-color-light-yellow-50: #fffaf0; 99 --arc-color-light-yellow-100: #fdf2dd; 100 --arc-color-light-yellow-200: #ffdb94; 101 --arc-color-light-yellow-300: #ffc960; 102 --arc-color-light-yellow-400: #ffb629; 103 --arc-color-light-yellow-500: #eb9b00; 104 --arc-color-light-yellow-600: #9e6900; 105 --arc-color-light-yellow-700: #805400; 106 --arc-color-light-yellow-800: #604000; 107 --arc-color-light-yellow-900: #3e2900; 108 --arc-color-light-red-50: #fff0f0; 109 --arc-color-light-red-100: #fde2e2; 110 --arc-color-light-red-200: #ff9999; 111 --arc-color-light-red-300: #ff6161; 112 --arc-color-light-red-400: #ff0000; 113 --arc-color-light-red-500: #eb0000; 114 --arc-color-light-red-600: #b80000; 115 --arc-color-light-red-700: #990000; 116 --arc-color-light-red-800: #7a0000; 117 --arc-color-light-red-900: #520000; 118 --arc-color-dark-neutral-0: #000000; 119 --arc-color-dark-neutral-50: #1c1c1c; 120 --arc-color-dark-neutral-100: #2a2a2a; 121 --arc-color-dark-neutral-200: #3d3d3d; 122 --arc-color-dark-neutral-300: #515151; 123 --arc-color-dark-neutral-400: #666666; 124 --arc-color-dark-neutral-500: #7b7b7b; 125 --arc-color-dark-neutral-600: #939393; 126 --arc-color-dark-neutral-700: #aeaeae; 127 --arc-color-dark-neutral-800: #d0d0d0; 128 --arc-color-dark-neutral-900: #ededed; 129 --arc-color-dark-neutral-1000: #ffffff; 130 --arc-color-dark-blue-50: #002542; 131 --arc-color-dark-blue-100: #093a63; 132 --arc-color-dark-blue-200: #0f4d7a; 133 --arc-color-dark-blue-300: #146192; 134 --arc-color-dark-blue-400: #1974aa; 135 --arc-color-dark-blue-500: #1e88c7; 136 --arc-color-dark-blue-600: #0ca1f7; 137 --arc-color-dark-blue-700: #3ab1f5; 138 --arc-color-dark-blue-800: #70cbfa; 139 --arc-color-dark-blue-900: #b9e6fd; 140 --arc-color-dark-purple-50: #161041; 141 --arc-color-dark-purple-100: #221c5a; 142 --arc-color-dark-purple-200: #2d2773; 143 --arc-color-dark-purple-300: #39328c; 144 --arc-color-dark-purple-400: #463da6; 145 --arc-color-dark-purple-500: #5449c0; 146 --arc-color-dark-purple-600: #6556da; 147 --arc-color-dark-purple-700: #7a6ef0; 148 --arc-color-dark-purple-800: #a193f9; 149 --arc-color-dark-purple-900: #d3c9ff; 150 --arc-color-dark-mint-50: #04291b; 151 --arc-color-dark-mint-100: #0b3425; 152 --arc-color-dark-mint-200: #134434; 153 --arc-color-dark-mint-300: #1b5444; 154 --arc-color-dark-mint-400: #246554; 155 --arc-color-dark-mint-500: #2f7766; 156 --arc-color-dark-mint-600: #14b290; 157 --arc-color-dark-mint-700: #52a895; 158 --arc-color-dark-mint-800: #84d0bd; 159 --arc-color-dark-mint-900: #d6fff2; 160 --arc-color-dark-orange-50: #251104; 161 --arc-color-dark-orange-100: #3a1a08; 162 --arc-color-dark-orange-200: #50240d; 163 --arc-color-dark-orange-300: #672f14; 164 --arc-color-dark-orange-400: #7f3c1d; 165 --arc-color-dark-orange-500: #984b27; 166 --arc-color-dark-orange-600: #d55913; 167 --arc-color-dark-orange-700: #d1764d; 168 --arc-color-dark-orange-800: #eba883; 169 --arc-color-dark-orange-900: #ffdcc9; 170 --arc-color-dark-maroon-50: #2a0914; 171 --arc-color-dark-maroon-100: #40101f; 172 --arc-color-dark-maroon-200: #56162b; 173 --arc-color-dark-maroon-300: #6c1e39; 174 --arc-color-dark-maroon-400: #822647; 175 --arc-color-dark-maroon-500: #993057; 176 --arc-color-dark-maroon-600: #b13d69; 177 --arc-color-dark-maroon-700: #d05886; 178 --arc-color-dark-maroon-800: #e891b5; 179 --arc-color-dark-maroon-900: #ffd6e7; 180 --arc-color-dark-green-50: #132904; 181 --arc-color-dark-green-100: #1b340a; 182 --arc-color-dark-green-200: #264411; 183 --arc-color-dark-green-300: #31551a; 184 --arc-color-dark-green-400: #3e6625; 185 --arc-color-dark-green-500: #4c7831; 186 --arc-color-dark-green-600: #55a722; 187 --arc-color-dark-green-700: #72a65b; 188 --arc-color-dark-green-800: #a0d092; 189 --arc-color-dark-green-900: #e2fcd9; 190 --arc-color-dark-yellow-50: #2e2005; 191 --arc-color-dark-yellow-100: #3a2907; 192 --arc-color-dark-yellow-200: #51390d; 193 --arc-color-dark-yellow-300: #684a14; 194 --arc-color-dark-yellow-400: #7f5c1c; 195 --arc-color-dark-yellow-500: #976f25; 196 --arc-color-dark-yellow-600: #d99d0f; 197 --arc-color-dark-yellow-700: #d1a049; 198 --arc-color-dark-yellow-800: #eccc86; 199 --arc-color-dark-yellow-900: #fff7d9; 200 --arc-color-dark-red-50: #250404; 201 --arc-color-dark-red-100: #3a0809; 202 --arc-color-dark-red-200: #500d0e; 203 --arc-color-dark-red-300: #671416; 204 --arc-color-dark-red-400: #7e1d1f; 205 --arc-color-dark-red-500: #97292b; 206 --arc-color-dark-red-600: #d4423f; 207 --arc-color-dark-red-700: #d86466; 208 --arc-color-dark-red-800: #e88987; 209 --arc-color-dark-red-900: #ffd6d6; 210 --arc-color-alpha-black-0: rgb(0 0 0 / 0%); 211 --arc-color-alpha-black-3: rgb(0 0 0 / 3%); 212 --arc-color-alpha-black-5: rgb(0 0 0 / 5%); 213 --arc-color-alpha-black-7: rgb(0 0 0 / 7%); 214 --arc-color-alpha-black-10: rgb(0 0 0 / 10%); 215 --arc-color-alpha-black-15: rgb(0 0 0 / 15%); 216 --arc-color-alpha-black-20: rgb(0 0 0 / 20%); 217 --arc-color-alpha-black-25: rgb(0 0 0 / 25%); 218 --arc-color-alpha-black-30: rgb(0 0 0 / 30%); 219 --arc-color-alpha-black-40: rgb(0 0 0 / 40%); 220 --arc-color-alpha-black-50: rgb(0 0 0 / 50%); 221 --arc-color-alpha-black-60: rgb(0 0 0 / 60%); 222 --arc-color-alpha-black-70: rgb(0 0 0 / 70%); 223 --arc-color-alpha-black-80: rgb(0 0 0 / 80%); 224 --arc-color-alpha-black-90: rgb(0 0 0 / 90%); 225 --arc-color-alpha-black-95: rgb(0 0 0 / 95%); 226 --arc-color-alpha-black-100: rgb(0 0 0 / 100%); 227 --arc-color-alpha-white-0: rgb(255 255 255 / 0%); 228 --arc-color-alpha-white-3: rgb(255 255 255 / 3%); 229 --arc-color-alpha-white-5: rgb(255 255 255 / 5%); 230 --arc-color-alpha-white-7: rgb(255 255 255 / 7%); 231 --arc-color-alpha-white-10: rgb(255 25
2315 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-300), var(--arc-color-dark-mint-400)); 384 --arc-color-fg-mint-mid: light-dark(var(--arc-color-light-mint-
384500), 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-fg-brand-heavy: light-dark(var(--arc-color-light-blue-700), var(--arc-color-dark-blue-900)); 413 --arc-color-border-muted: light-dark(var(--arc-color-alpha-black-3), var(--arc-color-alpha-white-5)); 414 --arc-color-border-subtle: light-dark(var(--arc-color-alpha-black-5), var(--arc-color-alpha-white-10)); 415 --arc-color-border-mid: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-20)); 416 --arc-color-border-stark: light-dark(var(--arc-color-alpha-black-30), var(--arc-color-alpha-white-30)); 417 --arc-color-border-on-stark: light-dark(var(--arc-color-light-neutral-500), var(--arc-color-dark-neutral-600)); 418 --arc-color-border-heavy: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 419 --arc-color-border-theme-heavy: light-dark(var(--arc-color-light-neutral-1000), var(--arc-color-dark-neutral-1000)); 420 --arc-color-border-selected: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-500)); 421 --arc-color-border-focus: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-700)); 422 --arc-color-border-success-subtle: light-dark(var(--arc-color-light-green-200), var(--arc-color-dark-green-300)); 423 --arc-color-border-success-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 424 --arc-color-border-success-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 425 --arc-color-border-warning-subtle: light-dark(var(--arc-color-light-yellow-200), var(--arc-color-dark-yellow-300)); 426 --arc-color-border-warning-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 427 --arc-color-border-warning-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 428 --arc-color-border-critical-subtle: light-dark(var(--arc-color-light-red-200), var(--arc-color-dark-red-300)); 429 --arc-color-border-critical-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-500)); 430 --arc-color-border-critical-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-800)); 431 --arc-color-border-info-subtle: light-dark(var(--arc-color-light-purple-200), var(--arc-color-dark-purple-300)); 432 --arc-color-border-info-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 433 --arc-color-border-info-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-600)); 434 --arc-color-border-brand-subtle: light-dark(var(--arc-color-light-blue-200), var(--arc-color-dark-blue-200)); 435 --arc-color-border-brand-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-600)); 436 --arc-color-border-brand-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-700)); 437 --arc-color-border-orange-subtle: light-dark(var(--arc-color-light-orange-200), var(--arc-color-dark-orange-200)); 438 --arc-color-border-orange-mid: light-dark(var(--arc-color-light-orange-400), var(--arc-color-dark-orange-400)); 439 --arc-color-border-orange-stark: light-dark(var(--arc-color-light-orange-600), var(--arc-color-dark-orange-600)); 440 --arc-color-border-mint-subtle: light-dark(var(--arc-color-light-mint-200), var(--arc-color-dark-mint-200)); 441 --arc-color-border-mint-mid: light-dark(var(--arc-color-light-mint-400), var(--arc-color-dark-mint-400)); 442 --arc-color-border-mint-stark: light-dark(var(--arc-color-light-mint-600), var(--arc-color-dark-mint-600)); 443 --arc-color-border-maroon-subtle: light-dark(var(--arc-color-light-maroon-200), var(--arc-color-dark-maroon-200)); 444 --arc-color-border-maroon-mid: light-dark(var(--arc-color-light-maroon-400), var(--arc-color-dark-maroon-400)); 445 --arc-color-border-maroon-stark: light-dark(var(--arc-color-light-maroon-600), var(--arc-color-dark-maroon-600)); 446 --arc-color-border-blue-subtle: light-dark(var(--arc-color-light-blue-200), var(--arc-color-dark-blue-200)); 447 --arc-color-border-blue-mid: light-dark(var(--arc-color-light-blue-500), var(--arc-color-dark-blue-500)); 448 --arc-color-border-blue-stark: light-dark(var(--arc-color-light-blue-600), var(--arc-color-dark-blue-600)); 449 --arc-color-border-purple-subtle: light-dark(var(--arc-color-light-purple-200), var(--arc-color-dark-purple-300)); 450 --arc-color-border-purple-mid: light-dark(var(--arc-color-light-purple-500), var(--arc-color-dark-purple-500)); 451 --arc-color-border-purple-stark: light-dark(var(--arc-color-light-purple-600), var(--arc-color-dark-purple-600)); 452 --arc-color-border-green-subtle: light-dark(var(--arc-color-light-green-200), var(--arc-color-dark-green-300)); 453 --arc-color-border-green-mid: light-dark(var(--arc-color-light-green-400), var(--arc-color-dark-green-400)); 454 --arc-color-border-green-stark: light-dark(var(--arc-color-light-green-600), var(--arc-color-dark-green-600)); 455 --arc-color-border-yellow-subtle: light-dark(var(--arc-color-light-yellow-200), var(--arc-color-dark-yellow-300)); 456 --arc-color-border-yellow-mid: light-dark(var(--arc-color-light-yellow-400), var(--arc-color-dark-yellow-400)); 457 --arc-color-border-yellow-stark: light-dark(var(--arc-color-light-yellow-600), var(--arc-color-dark-yellow-600)); 458 --arc-color-border-red-subtle: light-dark(var(--arc-color-light-red-200), var(--arc-color-dark-red-300)); 459 --arc-color-border-red-mid: light-dark(var(--arc-color-light-red-500), var(--arc-color-dark-red-500)); 460 --arc-color-border-red-stark: light-dark(var(--arc-color-light-red-600), var(--arc-color-dark-red-800)); 461 --arc-color-border-disabled: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-15)); 462 --arc-color-border-theme-subtle: light-dark(var(--arc-color-alpha-black-10), var(--arc-color-alpha-white-15)); 463 --arc-color-border-theme-mid: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-25)); 464 --arc-color-border-theme-stark: light-dark(var(--arc-color-light-neutral-700), var(--arc-color-alpha-white-50)); 465 --arc-color-border-hover: light-dark(var(--arc-color-alpha-black-30), var(--arc-color-alpha-white-30)); 466 --arc-color-alpha-muted: light-dark(var(--arc-color-alpha-black-3), var(--arc-color-alpha-white-3)); 467 --arc-color-alpha-subtle: light-dark(var(--arc-color-alpha-black-7), var(--arc-color-alpha-white-15)); 468 --arc-color-alpha-mid: light-dark(var(--arc-color-alpha-black-15), var(--arc-color-alpha-white-30)); 469 --arc-color-alpha-stark: light-dark(var(--arc-color-alpha-black-30), var(--arc-color-alpha-white-60)); 470 --arc-color-alpha-heavy: light-dark(var(--arc-color-alpha-black-60), var(--arc-color-alpha-white-70)); 471 } 472} 473/* 474 A NOTE ON USING ARC TOKENS (CSS VARIABLES) --------------------------\u2022 475 476 Tokens with \`--arc-internal-\` prefixes are internal only 477 - NOT FOR CONSUMER USE 478 - These are System/Internal things and are not intended to be 479 access or modified by consumers of the design system. 480 - Please reach out to #design-system in Slack for guidance or help, 481 or to request something new. 482 483
484 OVERRIDES, BE CAUTIOUS \u2022 These are available for acute adjustments, 485 but not needed in most cases. 486 ---------------------------------------------------------------------\u2022 487 --arc-font-size-base \u2022 Override if your app's \`rem\` size 488 isn't effectively 16px. For instance, 489 set to 1 if your \`rem\` is 10px. 490 491 --arc-font-variation-settings \u2022 Research \`font-variation-settings\` 492 before using this token. 493 494 --arc-font-size-mono \u2022 Controls size of monospace fonts. 495 --arc-line-height-title \u2022 Various text adjustment overrides... 496 --arc-line-height-heading 497 --arc-line-height-subheading 498 --arc-line-height-body 499 --arc-line-height-mono 500 --arc-letter-spacing-title 501 --arc-letter-spacing-heading 502 ---------------------------------------------------------------------\u2022 503*/ 504@layer arc-theme { 505 :root, 506 ::backdrop { 507 --arc-internal-font-size: var(--arc-font-size-base, 0.625); 508 --arc-internal-font-body: Inter, system-ui, sans-serif; 509 --arc-internal-font-expressive: "GT Walsheim", system-ui, sans-serif; 510 --arc-internal-font-mono: "Roboto Mono", monospace; 511 --arc-internal-font-size-mono: 0.875em; 512 --arc-internal-letter-spacing: -0.015em; 513 --arc-internal-font-vs: "opsz" 24; 514 --arc-font-family-expressive: var(--arc-internal-font-expressive); 515 --arc-font-family-title: var(--arc-internal-font-expressive); 516 --arc-font-family-heading: var(--arc-internal-font-expressive); 517 --arc-font-family-subheading: var(--arc-internal-font-body); 518 --arc-font-family-body: var(--arc-internal-font-body); 519 --arc-font-family-mono: var(--arc-internal-font-mono); 520 --arc-line-height-tight: 1.2; 521 --arc-line-height-standard: 1.4; 522 --arc-line-height-loose: 1.6; 523 --arc-line-height-title: var(--arc-line-height-tight); 524 --arc-line-height-heading: var(--arc-line-height-tight); 525 --arc-line-height-subheading: var(--arc-line-height-tight); 526 --arc-line-height-body: var(--arc-line-height-standard); 527 --arc-line-height-mono: var(--arc-line-height-standard); 528 --arc-letter-spacing-heading: var(--arc-internal-letter-spacing); 529 --arc-letter-spacing-title: var(--arc-internal-letter-spacing); 530 --arc-font-weight-400: 400; 531 --arc-font-weight-500: 500; 532 --arc-font-weight-600: 600; 533 --arc-font-weight-title: var(--arc-font-weight-600); 534 --arc-font-weight-heading: var(--arc-font-weight-600); 535 --arc-font-weight-subheading: var(--arc-font-weight-600); 536 --arc-font-weight-bold: var(--arc-font-weight-600); 537 --arc-font-weight-body: var(--arc-font-weight-400); 538 --arc-font-weight-normal: var(--arc-font-weight-400); 539 --arc-font-size-08: calc(0.8rem * var(--arc-internal-font-size)); 540 --arc-font-size-10: calc(1rem * var(--arc-internal-font-size)); 541 --arc-font-size-12: calc(1.2rem * var(--arc-internal-font-size)); 542 --arc-font-size-14: calc(1.4rem * var(--arc-internal-font-size)); 543 --arc-font-size-16: calc(1.6rem * var(--arc-internal-font-size)); 544 --arc-font-size-18: calc(1.8rem * var(--arc-internal-font-size)); 545 --arc-font-size-20: calc(2rem * var(--arc-internal-font-size)); 546 --arc-font-size-24: calc(2.4rem * var(--arc-internal-font-size)); 547 --arc-font-size-28: calc(2.8rem * var(--arc-internal-font-size)); 548 --arc-font-size-32: calc(3.2rem * var(--arc-internal-font-size)); 549 --arc-font-size-40: calc(4rem * var(--arc-internal-font-size)); 550 --arc-font-size-title-lg: var(--arc-font-size-40); 551 --arc-font-size-title-md: var(--arc-font-size-32); 552 --arc-font-size-title-sm: var(--arc-font-size-28); 553 --arc-font-size-heading-lg: var(--arc-font-size-24); 554 --arc-font-size-heading-md: var(--arc-font-size-20); 555 --arc-font-size-heading-sm: var(--arc-font-size-18); 556 --arc-font-size-subheading-lg: var(--arc-font-size-16); 557 --arc-font-size-subheading-md: var(--arc-font-size-14); 558 --arc-font-size-subheading-sm: var(--arc-font-size-12); 559 --arc-font-size-body-lg: var(--arc-font-size-16); 560 --arc-font-size-body-md: var(--arc-font-size-14); 561 --arc-font-size-body-sm: var(--arc-font-size-12); 562 --arc-font-size-body-xs: var(--arc-font-size-10); 563 --arc-font-size-mono-lg: var(--arc-font-size-14); 564 --arc-font-size-mono-md: var(--arc-font-size-12); 565 --arc-font-size-mono-sm: var(--arc-font-size-10); 566 } 567 [data-arc-theme~=font-family] { 568 font-family: var(--arc-font-family-body); 569 font-size: var(--arc-font-size-16); 570 font-weight: var(--arc-font-weight-body); 571 line-height: var(--arc-line-height-body, var(--arc-line-height-standard)); 572 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 573 } 574 [data-arc-theme~=font-family] :where(h1, h2, h3) { 575 font-family: var(--arc-font-family-heading); 576 font-weight: var(--arc-font-weight-heading); 577 letter-spacing: var(--arc-letter-spacing-heading); 578 line-height: var(--arc-internal-line-height, var(--arc-line-height-heading)); 579 } 580 [data-arc-theme~=font-family] :where(h4, h5, h6) { 581 font-family: var(--arc-font-family-subheading); 582 font-weight: var(--arc-font-weight-subheading); 583 line-height: var(--arc-internal-line-height, var(--arc-line-height-subheading)); 584 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 585 } 586 [data-arc-theme~=font-family] :where(h1) { 587 font-size: var(--arc-font-size-24); 588 } 589 [data-arc-theme~=font-family] :where(h2) { 590 font-size: var(--arc-font-size-20); 591 } 592 [data-arc-theme~=font-family] :where(h3) { 593 font-size: var(--arc-font-size-18); 594 } 595 [data-arc-theme~=font-family] :where(h4) { 596 font-size: var(--arc-font-size-16); 597 } 598 [data-arc-theme~=font-family] :where(h5) { 599 font-size: var(--arc-font-size-14); 600 } 601 [data-arc-theme~=font-family] :where(h6) { 602 font-size: var(--arc-font-size-12); 603 } 604 [data-arc-theme~=font-family] :where(b, strong) { 605 font-weight: var(--arc-font-weight-600); 606 } 607 [data-arc-theme~=font-family] :where(i, em) { 608 font-style: italic; 609 } 610 [data-arc-theme~=font-family] :where(u) { 611 text-decoration: underline; 612 } 613 [data-arc-theme~=font-family] :where(pre, code) { 614 font-family: var(--arc-font-family-mono); 615 font-size: var(--arc-font-size-mono, var(--arc-internal-font-size-mono)); 616 } 617} 618@layer arc-utils { 619 .arc-font-title-lg { 620 font-size: var(--arc-font-size-40); 621 } 622 .arc-font-title-md { 623 font-size: var(--arc-font-size-32); 624 } 625 .arc-font-title-sm { 626 font-size: var(--arc-font-size-28); 627 } 628 :is(.arc-font-title, .arc-font-title-lg, .arc-font-title-md, .arc-font-title-sm) { 629 font-family: var(--arc-font-family-title); 630 font-weight: var(--arc-font-weight-title); 631 letter-spacing: var(--arc-letter-spacing-title); 632 line-height: var(--arc-internal-line-height, var(--arc-line-height-title)); 633 } 634 .arc-font-heading-lg { 635 font-size: var(--arc-font-size-24); 636 } 637 .arc-font-heading-md { 638 font-size: var(--arc-font-size-20); 639 } 640 .arc-font-heading-sm { 641 font-size: var(--arc-font-size-18); 642 } 643 :is(.arc-font-heading, .arc-font-heading-lg, .arc-font-heading-md, .arc-font-heading-sm) { 644 font-family: var(--arc-font-family-heading); 645 font-weight: var(--arc-font-weight-heading); 646 letter-spacing: var(--arc-letter-spacing-heading); 647 line-height: var(--arc-internal-line-height, var(--arc-line-height-heading)); 648 } 649 .arc-font-subheading-lg { 650 font-size: var(--arc-font-size-16); 651 } 652 .arc-font-subheading-md { 653 font-size: var(--arc-font-size-14); 654 } 655 .arc-font-subheading-sm { 656 font-size: var(--arc-font-size-12); 657 } 658 :is(.arc-font-subheading, .arc-font-subheading-lg, .arc-font-subheading-md, .arc-font-subheading-sm) { 659 font-family: var(--arc-font-family-subheading); 660 font-weight: var(--arc-font-weight-subheading); 661 line-height: var(--arc-internal-line-height, var(--arc-line-height-subheading)); 662 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 663 } 664 .arc-font-body-lg { 665 font-size: var(--arc-font-size-16); 666 } 667 .arc-font-body-md { 668 font-size: var(--arc-font-size-14); 669 } 670 .arc-font-body-sm { 671 font-size: var(--arc-font-size-12); 672 } 673 /** @deprecated - 'xsm' is not a valid size value in our sizing names */ 674 :is(.arc-font-body-xsm), 675 :is(.arc-font-body-xs) { 676 font-size: var(--arc-font-size-10); 677 } 678 /** @deprecated - 'xsm' is not a valid size value in our sizing names */ 679 :is(.arc-font-body-xsm), 680 :is(.arc-font-body, .arc-font-body-lg, .arc-font-body-md, .arc-font-body-sm) { 681 font-family: var(--arc-font-family-body); 682 line-height: var(--arc-internal-line-height, var(--arc-line-height-body)); 683 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 684 } 685 .arc-font-mono-lg { 686 font-size: var(--arc-font-size-14); 687 } 688 .arc-font-mono-md { 689 font-size: var(--arc-font-size-12); 690 } 691 .arc-font-mono-sm { 692 font-size: var(--arc-font-size-10); 693 } 694 :is(.arc-font-mono, .arc-font-mono-lg, .arc-font-mono-md, .arc-font-mono-sm) { 695 font-family: var(--arc-font-family-mono); 696 line-height: var(--arc-internal-line-height, var(--arc-line-height-mono)); 697 } 698 .arc-line-height-loose { 699 --arc-internal-line-height: var(--arc-line-height-loose); 700 line-height: var(--arc-internal-line-height); 701 } 702 .arc-line-height-standard { 703 --arc-internal-line-height: var(--arc-line-height-standard); 704 line-height: var(--arc-internal-line-height); 705 } 706 .arc-line-height-tight { 707 --arc-internal-line-height: var(--arc-line-height-tight); 708 line-height: var(--arc-internal-line-height); 709 } 710} 711@layer arc-theme { 712 :root, 713 ::backdrop { 714 --arc-internal-space: 0.8rem * var(--arc-internal-font-size); 715 --arc-internal-size: 0.8rem * var(--arc-internal-font-size); 716 --arc-space-0: 0; 717 --arc-space-0-25: calc(0.25 * var(--arc-internal-space)); 718 --arc-space-0-5: calc(0.5 * var(--arc-internal-space)); 719 --arc-space-0-75: calc(0.75 * var(--arc-internal-space)); 720 --arc-space-1: calc(var(--arc-internal-space)); 721 --arc-space-1-25: calc(1.25 * var(--arc-internal-space)); 722 --arc-space-1-5: calc(1.5 * var(--arc-internal-space)); 723 --arc-space-2: calc(2 * var(--arc-internal-space)); 724 --arc-space-2-5: calc(2.5 * var(--arc-internal-space)); 725 --arc-space-3: calc(3 * var(--arc-internal-space)); 726 --arc-space-4: calc(4 * var(--arc-internal-space)); 727 --arc-space-5: calc(5 * var(--arc-internal-space)); 728 --arc-space-6: calc(6 * var(--arc-internal-space)); 729 --arc-space-7: calc(7 * var(--arc-internal-space)); 730 --arc-space-8: calc(8 * var(--arc-internal-space)); 731 --arc-space-9: calc(9 * var(--arc-internal-space)); 732 --arc-space-10: calc(10 * var(--arc-internal-space)); 733 --arc-space-11: calc(11 * var(--arc-internal-space)); 734 --arc-space-12: calc(12 * var(--arc-internal-space)); 735 --arc-size-0: 0; 736 --arc-size-0-25: calc(0.25 * var(--arc-internal-size)); 737 --arc-size-0-5: calc(0.5 * var(--arc-internal-size)); 738 --arc-size-0-75: calc(0.75 * var(--arc-internal-size)); 739 --arc-size-1: calc(var(--arc-internal-size)); 740 --arc-size-1-25: calc(1.25 * var(--arc-internal-size)); 741 --arc-size-1-5: calc(1.5 * var(--arc-internal-size)); 742 --arc-size-1-75: calc(1.75 * var(--arc-internal-size)); 743 --arc-size-2: calc(2 * var(--arc-internal-size)); 744 --arc-size-2-25: calc(2.25 * var(--arc-internal-size)); 745 --arc-size-2-5: calc(2.5 * var(--arc-internal-size)); 746 --arc-size-2-75: calc(2.75 * var(--arc-internal-size)); 747 --arc-size-3: calc(3 * var(--arc-internal-size)); 748 --arc-size-3-25: calc(3.25 * var(--arc-internal-size)); 749 --arc-size-3-5: calc(3.5 * var(--arc-internal-size)); 750 --arc-size-3-75: calc(3.75 * var(--arc-internal-size)); 751 --arc-size-4: calc(4 * var(--arc-internal-size)); 752 --arc-size-4-25: calc(4.25 * var(--arc-internal-size)); 753 --arc-size-4-5: calc(4.5 * var(--arc-internal-size)); 754 --arc-size-4-75: calc(4.75 * var(--arc-internal-size)); 755 --arc-size-5: calc(5 * var(--arc-internal-size)); 756 --arc-size-6: calc(6 * var(--arc-internal-size)); 757 --arc-size-7: calc(7 * var(--arc-internal-size)); 758 --arc-size-8: calc(8 * var(--arc-internal-size)); 759 --arc-size-9: calc(9 * var(--arc-internal-size)); 760 --arc-size-10: calc(10 * var(--arc-internal-size)); 761 --arc-size-11: calc(11 * var(--arc-internal-size)); 762 --arc-size-12: calc(12 * var(--arc-internal-size)); 763 --arc-size-13: calc(13 * var(--arc-internal-size)); 764 --arc-size-14: calc(14 * var(--arc-internal-size)); 765 --arc-size-15: calc(15 * var(--arc-internal-size)); 766 --arc-size-16: calc(16 * var(--arc-internal-size)); 767 --arc-size-17: calc(17 * var(--arc-internal-size)); 768 --arc-size-18: calc(18 * var(--arc-internal-size)); 769 --arc-size-19: calc(19 * var(--arc-internal-size)); 770 --arc-size-20: calc(20 * var(--arc-internal-size)); 771 --arc\u2022space\u202216m: min(-16px, -1rem); 772 --arc\u2022space\u202214m: min(-14px, -0.875rem); 773 --arc\u2022space\u202212m: min(-12px, -0.75rem); 774 --arc\u2022space\u202210m: min(-10px, -0.625rem); 775 --arc\u2022space\u20228m: min(-8px, -0.5rem); 776 --arc\u2022space\u20226m: min(-6px, -0.375rem); 777 --arc\u2022space\u20225m: min(-5px, -0.3125rem); 778 --arc\u2022space\u20224m: min(-4px, -0.25rem); 779 --arc\u2022space\u20223m: min(-3px, -0.1875rem);
780 --arc\u2022space\u20222m: min(-2px, -0.125rem); 781 --arc\u2022space\u20221m: min(-1px, -0.0625rem); 782 --arc\u2022space\u20220: 0px; 783 --arc\u2022space\u20221: max(1px, 0.0625rem); 784 --arc\u2022space\u20222: max(2px, 0.125rem); 785 --arc\u2022space\u20223: max(3px, 0.1875rem); 786 --arc\u2022space\u20224: max(4px, 0.25rem); 787 --arc\u2022space\u20225: max(5px, 0.3125rem); 788 --arc\u2022space\u20226: max(6px, 0.375rem); 789 --arc\u2022space\u20228: max(8px, 0.5rem); 790 --arc\u2022space\u202210: max(10px, 0.625rem); 791 --arc\u2022space\u202212: max(12px, 0.75rem); 792 --arc\u2022space\u202214: max(14px, 0.875rem); 793 --arc\u2022space\u202216: max(16px, 1rem); 794 --arc\u2022space\u202218: max(18px, 1.125rem); 795 --arc\u2022space\u202220: max(20px, 1.25rem); 796 --arc\u2022space\u202224: max(24px, 1.5rem); 797 --arc\u2022space\u202232: max(32px, 2rem); 798 --arc\u2022space\u202240: max(40px, 2.5rem); 799 --arc\u2022space\u202248: max(48px, 3rem); 800 --arc\u2022space\u202256: max(56px, 3.5rem); 801 --arc\u2022space\u202264: max(64px, 4rem); 802 --arc\u2022space\u202272: max(72px, 4.5rem); 803 --arc\u2022space\u202280: max(80px, 5rem); 804 --arc\u2022space\u202288: max(88px, 5.5rem); 805 --arc\u2022space\u202296: max(96px, 6rem); 806 --arc\u2022size\u202216m: min(-16px, -1rem); 807 --arc\u2022size\u202212m: min(-12px, -0.75rem); 808 --arc\u2022size\u202210m: min(-10px, -0.625rem); 809 --arc\u2022size\u20228m: min(-8px, -0.5rem); 810 --arc\u2022size\u20226m: min(-6px, -0.375rem); 811 --arc\u2022size\u20224m: min(-4px, -0.25rem); 812 --arc\u2022size\u20223m: min(-3px, -0.1875rem); 813 --arc\u2022size\u20222m: min(-2px, -0.125rem); 814 --arc\u2022size\u20221m: min(-1px, -0.0625rem); 815 --arc\u2022size\u20220: 0px; 816 --arc\u2022size\u20221: max(1px, 0.0625rem); 817 --arc\u2022size\u20222: max(2px, 0.125rem); 818 --arc\u2022size\u20223: max(3px, 0.1875rem); 819 --arc\u2022size\u20224: max(4px, 0.25rem); 820 --arc\u2022size\u20225: max(5px, 0.3125rem); 821 --arc\u2022size\u20226: max(6px, 0.375rem); 822 --arc\u2022size\u20228: max(8px, 0.5rem); 823 --arc\u2022size\u202210: max(10px, 0.625rem); 824 --arc\u2022size\u202212: max(12px, 0.75rem); 825 --arc\u2022size\u202214: max(14px, 0.875rem); 826 --arc\u2022size\u202215: max(15px, 0.9375rem); 827 --arc\u2022size\u202216: max(16px, 1rem); 828 --arc\u2022size\u202218: max(18px, 1.125rem); 829 --arc\u2022size\u202220: max(20px, 1.25rem); 830 --arc\u2022size\u202222: max(22px, 1.375rem); 831 --arc\u2022size\u202224: max(24px, 1.5rem); 832 --arc\u2022size\u202225: max(25px, 1.5625rem); 833 --arc\u2022size\u202226: max(26px, 1.625rem); 834 --arc\u2022size\u202228: max(28px, 1.75rem); 835 --arc\u2022size\u202230: max(30px, 1.875rem); 836 --arc\u2022size\u202232: max(32px, 2rem); 837 --arc\u2022size\u202234: max(34px, 2.125rem); 838 --arc\u2022size\u202236: max(36px, 2.25rem); 839 --arc\u2022size\u202238: max(38px, 2.375rem); 840 --arc\u2022size\u202240: max(40px, 2.5rem); 841 --arc\u2022size\u202242: max(42px, 2.625rem); 842 --arc\u2022size\u202244: max(44px, 2.75rem); 843 --arc\u2022size\u202246: max(46px, 2.875rem); 844 --arc\u2022size\u202248: max(48px, 3rem); 845 --arc\u2022size\u202250: max(50px, 3.125rem); 846 --arc\u2022size\u202252: max(52px, 3.25rem); 847 --arc\u2022size\u202254: max(54px, 3.375rem); 848 --arc\u2022size\u202256: max(56px, 3.5rem); 849 --arc\u2022size\u202258: max(58px, 3.625rem); 850 --arc\u2022size\u202260: max(60px, 3.75rem); 851 --arc\u2022size\u202264: max(64px, 4rem); 852 --arc\u2022size\u202268: max(68px, 4.25rem); 853 --arc\u2022size\u202272: max(72px, 4.5rem); 854 --arc\u2022size\u202276: max(76px, 4.75rem); 855 --arc\u2022size\u202280: max(80px, 5rem); 856 --arc\u2022size\u202288: max(88px, 5.5rem); 857 --arc\u2022size\u202296: max(96px, 6rem); 858 --arc\u2022size\u2022104: max(104px, 6.5rem); 859 --arc\u2022size\u2022112: max(112px, 7rem); 860 --arc\u2022size\u2022120: max(120px, 7.5rem); 861 --arc\u2022size\u2022128: max(128px, 8rem); 862 --arc\u2022size\u2022136: max(136px, 8.5rem); 863 --arc\u2022size\u2022144: max(144px, 9rem); 864 --arc\u2022size\u2022152: max(152px, 9.5rem); 865 --arc\u2022size\u2022160: max(160px, 10rem); 866 } 867} 868@layer arc-theme { 869 :root, 870 ::backdrop { 871 --arc-alpha-0: 0%; 872 --arc-alpha-3: 3%; 873 --arc-alpha-5: 5%; 874 --arc-alpha-10: 10%; 875 --arc-alpha-20: 20%; 876 --arc-alpha-25: 25%; 877 --arc-alpha-30: 30%; 878 --arc-alpha-40: 40%; 879 --arc-alpha-50: 50%; 880 --arc-alpha-60: 60%; 881 --arc-alpha-70: 70%; 882 --arc-alpha-80: 80%; 883 --arc-alpha-90: 90%; 884 --arc-alpha-95: 95%; 885 --arc-alpha-100: 100%; 886 --arc-border-radius-none: 0px; 887 --arc-border-radius-sm: max(2px, 0.125em); 888 --arc-border-radius-md: max(4px, 0.25em); 889 --arc-border-radius-lg: max(8px, 0.5em); 890 --arc-border-radius-xl: max(16px, 1em); 891 --arc-border-radius-circle: 50%; 892 --arc-border-radius-pill: 100vh; 893 --arc-border-width-none: 0px; 894 --arc-border-width-sm: max(1px, 0.0625em); 895 --arc-border-width-md: max(2px, 0.125em); 896 --arc-border-width-lg: max(3px, 0.1875em); 897 --arc-border-width-xl: max(4px, 0.25em); 898 /* dynamic shadow tokens */ 899 --arc-shadow-none: none; 900 --arc-shadow-sm: 0 0 max(4px, 0.25em) 0 var(--arc-color-shadow-sm); 901 --arc-shadow-md: 0 max(2px, 0.125em) max(6px, 0.375em) 0 var(--arc-color-shadow-md); 902 --arc-shadow-lg: 0 max(4px, 0.25em) max(24px, 1.5em) 0 var(--arc-color-shadow-lg); 903 --arc-shadow-xl: 0 max(12px, 0.75em) max(48px, 3em) 0 var(--arc-color-shadow-xl); 904 /* static light shadow tokens (primitive alpha colors) */ 905 --arc-shadow-light-none: none; 906 --arc-shadow-light-sm: 0 0 max(4px, 0.25em) 0 var(--arc-color-alpha-black-25); 907 --arc-shadow-light-md: 0 max(2px, 0.125em) max(6px, 0.375em) 0 var(--arc-color-alpha-black-15); 908 --arc-shadow-light-lg: 0 max(4px, 0.25em) max(24px, 1.5em) 0 var(--arc-color-alpha-black-15); 909 --arc-shadow-light-xl: 0 max(12px, 0.75em) max(48px, 3em) 0 var(--arc-color-alpha-black-15); 910 /* static dark shadow tokens (primitive alpha colors) */ 911 --arc-shadow-dark-none: none; 912 --arc-shadow-dark-sm: 0 0 max(4px, 0.25em) 0 var(--arc-color-alpha-black-60); 913 --arc-shadow-dark-md: 0 max(2px, 0.125em) max(6px, 0.375em) 0 var(--arc-color-alpha-black-50); 914 --arc-shadow-dark-lg: 0 max(4px, 0.25em) max(24px, 1.5em) 0 var(--arc-color-alpha-black-40); 915 --arc-shadow-dark-xl: 0 max(12px, 0.75em) max(48px, 3em) 0 var(--arc-color-alpha-black-40); 916 /* surface shadow tokens */ 917 --arc-surface-raised-shadow: var(--arc-shadow-md); 918 --arc-surface-floating-shadow: var(--arc-shadow-lg); 919 } 920} 921@layer arc-utils { 922 /* Gradients -----------------------------------------------------\u2022 */ 923 [arc-gradient] { 924 background-clip: text; 925 color: transparent; 926 /** @note: line-height mitigation strategy for gradient icons 927 * stops icon geometry clipping issues 928 */ 929 } 930 [arc-gradient][arc-icon] { 931 --arc-icon-height: 1.5lh; 932 --arc-icon-max-height: none; 933 --arc-icon-margin-block: -0.5lh; 934 } 935 :is([arc-gradient], [arc-gradient=ai], [arc-gradient=ai-200]) { 936 background-image: var(--arc-gradient-ai-200); 937 } 938 [arc-gradient=ai-50] { 939 background-image: var(--arc-gradient-ai-50); 940 } 941 [arc-gradient=ai-100] { 942 background-image: var(--arc-gradient-ai-100); 943 } 944 [arc-gradient=ai-300] { 945 background-image: var(--arc-gradient-ai-300); 946 } 947 [arc-gradient=ai-400] { 948 background-image: var(--arc-gradient-ai-400); 949 } 950 [arc-gradient=ai-500] { 951 background-image: var(--arc-gradient-ai-500); 952 } 953 [arc-gradient=ai-600] { 954 background-image: var(--arc-gradient-ai-600); 955 } 956 /* Shadows -------------------------------------------------------\u2022 */ 957 [arc-shadow=sm] { 958 box-shadow: var(--arc-shadow-sm); 959 } 960 [arc-shadow=md] { 961 box-shadow: var(--arc-shadow-md); 962 } 963 [arc-shadow=lg] { 964 box-shadow: var(--arc-shadow-lg); 965 } 966 [arc-shadow=xl] { 967 box-shadow: var(--arc-shadow-xl); 968 } 969 /* Light Shadows -------------------------------------------------\u2022 */ 970 [arc-shadow=light-sm] { 971 box-shadow: var(--arc-shadow-light-sm); 972 } 973 [arc-shadow=light-md] { 974 box-shadow: var(--arc-shadow-light-md); 975 } 976 [arc-shadow=light-lg] { 977 box-shadow: var(--arc-shadow-light-lg); 978 } 979 [arc-shadow=light-xl] { 980 box-shadow: var(--arc-shadow-light-xl); 981 } 982 /* Dark Shadows --------------------------------------------------\u2022 */ 983 [arc-shadow=dark-sm] { 984 box-shadow: var(--arc-shadow-dark-sm); 985 } 986 [arc-shadow=dark-md] { 987 box-shadow: var(--arc-shadow-dark-md); 988 } 989 [arc-shadow=dark-lg] { 990 box-shadow: var(--arc-shadow-dark-lg); 991 } 992 [arc-shadow=dark-xl] { 993 box-shadow: var(--arc-shadow-dark-xl); 994 } 995 /* Surfaces ------------------------------------------------------\u2022 */ 996 [arc-surface=primary] { 997 color: var(--arc-surface-primary-color, var(--arc-color-fg-primary)); 998 background: var(--arc-surface-primary-background, var(--arc-color-bg-primary)); 999 } 1000 [arc-surface=secondary] { 1001 color: var(--arc-surface-secondary-color, var(--arc-color-fg-primary)); 1002 background: var(--arc-surface-secondary-background, var(--arc-color-bg-secondary)); 1003 } 1004 [arc-surface=inset] { 1005 color: var(--arc-surface-inset-color, var(--arc-color-fg-primary)); 1006 background: var(--arc-surface-inset-background, var(--arc-color-bg-tertiary)); 1007 } 1008 [arc-surface=raised] { 1009 color: var(--arc-surface-raised-color, var(--arc-color-fg-primary)); 1010 background: var(--arc-surface-raised-background, var(--arc-color-bg-primary));
1011 box-shadow: var(--arc-surface-raised-box-shadow, var(--arc-surface-raised-shadow)); 1012 z-index: var(--arc-surface-raised-z-index, 1); 1013 } 1014 [arc-surface=floating] { 1015 color: var(--arc-surface-floating-color, var(--arc-color-fg-primary)); 1016 background: var(--arc-surface-floating-background, var(--arc-color-bg-primary)); 1017 box-shadow: var(--arc-surface-floating-box-shadow, var(--arc-surface-floating-shadow)); 1018 z-index: var(--arc-surface-floating-z-index, 2); 1019 } 1020 /* Scheme (proximity via inheritance) ----------------------------\u2022 */ 1021 :root:not([arc-scheme]) { 1022 --arc\u2022color\u2022scheme: light; 1023 --arc\u2022color\u2022scheme\u2022inverse: dark; 1024 } 1025 [arc-scheme=light] { 1026 --arc\u2022color\u2022scheme: light; 1027 --arc\u2022color\u2022scheme\u2022inverse: dark; 1028 --arc\u2022color\u2022scheme\u2022inverse\u2022nested: light; 1029 } 1030 [arc-scheme=dark] { 1031 --arc\u2022color\u2022scheme: dark; 1032 --arc\u2022color\u2022scheme\u2022inverse: light; 1033 --arc\u2022color\u2022scheme\u2022inverse\u2022nested: dark; 1034 } 1035 [arc-scheme=inverse] { 1036 --arc\u2022color\u2022scheme: var(--arc\u2022color\u2022scheme\u2022inverse); 1037 } 1038 [arc-scheme=inverse] [arc-scheme=inverse] { 1039 --arc\u2022color\u2022scheme: var(--arc\u2022color\u2022scheme\u2022inverse\u2022nested); 1040 } 1041 :root:not([arc-scheme]), 1042 [arc-scheme] { 1043 color-scheme: var(--arc\u2022color\u2022scheme, light); 1044 } 1045} 1046:root, 1047::backdrop { 1048 /* @deprecated background variables - please update all instances */ 1049 --arc-color-alpha-white-03: var(--arc-color-alpha-white-3); 1050 --arc-color-alpha-white-05: var(--arc-color-alpha-white-5); 1051 --arc-color-alpha-black-03: var(--arc-color-alpha-black-3); 1052 --arc-color-alpha-black-05: var(--arc-color-alpha-black-5); 1053 --arc-color-neutral-000: var(--arc-color-light-neutral-0); 1054 --arc-color-neutral-050: var(--arc-color-light-neutral-50); 1055 --arc-color-neutral-100: var(--arc-color-light-neutral-100); 1056 --arc-color-neutral-200: var(--arc-color-light-neutral-200); 1057 --arc-color-neutral-300: var(--arc-color-light-neutral-300); 1058 --arc-color-neutral-400: var(--arc-color-light-neutral-400); 1059 --arc-color-neutral-500: var(--arc-color-light-neutral-500); 1060 --arc-color-neutral-600: var(--arc-color-light-neutral-600); 1061 --arc-color-neutral-700: var(--arc-color-light-neutral-700); 1062 --arc-color-neutral-800: var(--arc-color-light-neutral-800); 1063 --arc-color-neutral-900: var(--arc-color-light-neutral-900); 1064 --arc-color-blue-050: var(--arc-color-light-blue-50); 1065 --arc-color-blue-100: var(--arc-color-light-blue-100); 1066 --arc-color-blue-200: var(--arc-color-light-blue-200); 1067 --arc-color-blue-300: var(--arc-color-light-blue-300); 1068 --arc-color-blue-400: var(--arc-color-light-blue-400); 1069 --arc-color-blue-500: var(--arc-color-light-blue-500); 1070 --arc-color-blue-600: var(--arc-color-light-blue-600); 1071 --arc-color-blue-700: var(--arc-color-light-blue-700); 1072 --arc-color-blue-800: var(--arc-color-light-blue-800); 1073 --arc-color-blue-900: var(--arc-color-light-blue-900); 1074 --arc-color-purple-050: var(--arc-color-light-purple-50); 1075 --arc-color-purple-100: var(--arc-color-light-purple-100); 1076 --arc-color-purple-200: var(--arc-color-light-purple-200); 1077 --arc-color-purple-300: var(--arc-color-light-purple-300); 1078 --arc-color-purple-400: var(--arc-color-light-purple-400); 1079 --arc-color-purple-500: var(--arc-color-light-purple-500); 1080 --arc-color-purple-600: var(--arc-color-light-purple-600); 1081 --arc-color-purple-700: var(--arc-color-light-purple-700); 1082 --arc-color-purple-800: var(--arc-color-light-purple-800); 1083 --arc-color-purple-900: var(--arc-color-light-purple-900); 1084 --arc-color-maroon-050: var(--arc-color-light-maroon-50); 1085 --arc-color-maroon-100: var(--arc-color-light-maroon-100); 1086 --arc-color-maroon-200: var(--arc-color-light-maroon-200); 1087 --arc-color-maroon-300: var(--arc-color-light-maroon-300); 1088 --arc-color-maroon-400: var(--arc-color-light-maroon-400); 1089 --arc-color-maroon-500: var(--arc-color-light-maroon-500); 1090 --arc-color-maroon-600: var(--arc-color-light-maroon-600); 1091 --arc-color-maroon-700: var(--arc-color-light-maroon-700); 1092 --arc-color-maroon-800: var(--arc-color-light-maroon-800); 1093 --arc-color-maroon-900: var(--arc-color-light-maroon-900); 1094 --arc-color-red-050: var(--arc-color-light-red-50); 1095 --arc-color-red-100: var(--arc-color-light-red-100); 1096 --arc-color-red-200: var(--arc-color-light-red-200); 1097 --arc-color-red-300: var(--arc-color-light-red-300); 1098 --arc-color-red-400: var(--arc-color-light-red-400); 1099 --arc-color-red-500: var(--arc-color-light-red-500); 1100 --arc-color-red-600: var(--arc-color-light-red-600); 1101 --arc-color-red-700: var(--arc-color-light-red-700); 1102 --arc-color-red-800: var(--arc-color-light-red-800); 1103 --arc-color-red-900: var(--arc-color-light-red-900); 1104 --arc-color-orange-050: var(--arc-color-light-orange-50); 1105 --arc-color-orange-100: var(--arc-color-light-orange-100); 1106 --arc-color-orange-200: var(--arc-color-light-orange-200); 1107 --arc-color-orange-300: var(--arc-color-light-orange-300); 1108 --arc-color-orange-400: var(--arc-color-light-orange-400); 1109 --arc-color-orange-500: var(--arc-color-light-orange-500); 1110 --arc-color-orange-600: var(--arc-color-light-orange-600); 1111 --arc-color-orange-700: var(--arc-color-light-orange-700); 1112 --arc-color-orange-800: var(--arc-color-light-orange-800); 1113 --arc-color-orange-900: var(--arc-color-light-orange-900); 1114 --arc-color-yellow-050: var(--arc-color-light-yellow-50); 1115 --arc-color-yellow-100: var(--arc-color-light-yellow-100); 1116 --arc-color-yellow-200: var(--arc-color-light-yellow-200); 1117 --arc-color-yellow-300: var(--arc-color-light-yellow-300); 1118 --arc-color-yellow-400: var(--arc-color-light-yellow-400); 1119 --arc-color-yellow-500: var(--arc-color-light-yellow-500); 1120 --arc-color-yellow-600: var(--arc-color-light-yellow-600); 1121 --arc-color-yellow-700: var(--arc-color-light-yellow-700); 1122 --arc-color-yellow-800: var(--arc-color-light-yellow-800); 1123 --arc-color-yellow-900: var(--arc-color-light-yellow-900); 1124 --arc-color-green-050: var(--arc-color-light-green-50); 1125 --arc-color-green-100: var(--arc-color-light-green-100); 1126 --arc-color-green-200: var(--arc-color-light-green-200); 1127 --arc-color-green-300: var(--arc-color-light-green-300); 1128 --arc-color-green-400: var(--arc-color-light-green-400); 1129 --arc-color-green-500: var(--arc-color-light-green-500); 1130 --arc-color-green-600: var(--arc-color-light-green-600); 1131 --arc-color-green-700: var(--arc-color-light-green-700); 1132 --arc-color-green-800: var(--arc-color-light-green-800); 1133 --arc-color-green-900: var(--arc-color-light-green-900); 1134 --arc-color-mint-050: var(--arc-color-light-mint-50); 1135 --arc-color-mint-100: var(--arc-color-light-mint-100); 1136 --arc-color-mint-200: var(--arc-color-light-mint-200); 1137 --arc-color-mint-300: var(--arc-color-light-mint-300); 1138 --arc-color-mint-400: var(--arc-color-light-mint-400); 1139 --arc-color-mint-500: var(--arc-color-light-mint-500); 1140 --arc-color-mint-600: var(--arc-color-light-mint-600); 1141 --arc-color-mint-700: var(--arc-color-light-mint-700); 1142 --arc-color-mint-800: var(--arc-color-light-mint-800); 1143 --arc-color-mint-900: var(--arc-color-light-mint-900); 1144 --arc-gradient-ai-050: var(--arc-gradient-ai-50); 1145 --arc-color-ai-purple-050: #fbf2ff; 1146 --arc-color-ai-purple-100: #efccff; 1147 --arc-color-ai-purple-200: #9c15ff; 1148 --arc-color-ai-purple-300: #680278; 1149 --arc-color-ai-purple-400: #5d3668; 1150 --arc-color-ai-purple-500: #37003f; 1151 --arc-color-ai-purple-600: #27002c; 1152 --arc-color-ai-blue-050: #f4fbff; 1153 --arc-color-ai-blue-100: #d2f1fe; 1154 --arc-color-ai-blue-200: #1eb4fb; 1155 --arc-color-ai-blue-300: #0179d0; 1156 --arc-color-ai-blue-400: #36648c; 1157 --arc-color-ai-blue-500: #004273; 1158 --arc-color-ai-blue-600: #012a48; 1159 /* @deprecated background variables - please update all instances */ 1160 --arc-color-background-primary: var(--arc-color-bg-primary); 1161 --arc-color-background-primary-hover: var(--arc-color-bg-hover-default); 1162 --arc-color-background-primary-selected-subtle: var(--arc-color-bg-selected-subtle); 1163 --arc-color-background-primary-selected: var(--arc-color-bg-selected-default); 1164 --arc-color-background-primary-selected-stark: var(--arc-color-bg-selected-stark); 1165 --arc-color-background-secondary: var(--arc-color-bg-secondary); 1166 --arc-color-background-secondary-hover: var(--arc-color-bg-hover-default); 1167 --arc-color-background-tertiary: var(--arc-color-bg-tertiary); 1168 --arc-color-background-inverse: var(--arc-color-light-neutral-1000); 1169 --arc-color-overlay-dark: var(--arc-color-overlay-stark); 1170 --arc-color-overlay-light: var(--arc-color-overlay-subtle); 1171 /* @deprecated foreground variables - please update all instances */ 1172 --arc-color-text-primary: var(--arc-color-fg-primary); 1173 --arc-color-icon-primary: var(--arc-color-fg-primary); 1174 --arc-color-text-secondary: var(--arc-color-fg-secondary); 1175 --arc-color-icon-secondary: var(--arc-color-fg-secondary); 1176 --arc-color-icon-primary-hover: var(--arc-color-fg-on-hover-default); 1177 --arc-color-text-primary-hover: var(--arc-color-fg-on-hover-default); 1178 --arc-color-text-secondary-hover: var(--arc-color-fg-on-hover-stark); 1179 --arc-color-icon-secondary-hover: var(--arc-color-fg-on-hover-stark); 1180 --arc-color-text-disabled: var(--arc-color-fg-disabled); 1181 --arc-color-icon-disabled: var(--arc-color-fg-disabled); 1182 --arc-color-text-inverse: var(--arc-color-dark-neutral-1000); 1183 --arc-color-icon-inverse: var(--arc-color-dark-neutral-1000); 1184 --arc-color-text-inverse-secondary: var(--arc-color-dark-neutral-700); 1185 --arc-color-icon-inverse-secondary: var(--arc-color-dark-neutral-700); 1186 --arc-color-text-inverse-hover: var(--arc-color-dark-neutral-700); 1187 --arc-color-icon-inverse-hover: var(--arc-color-dark-neutral-700); 1188 --arc-color-text-inverse-disabled: var(--arc-color-alpha-white-30); 1189 --arc-color-icon-inverse-disabled: var(--arc-color-alpha-white-30); 1190 --arc-color-text-info: var(--arc-color-fg-info-stark); 1191 --arc-color-icon-info: var(--arc-color-fg-info-stark); 1192 --arc-color-text-brand: var(--arc-color-fg-brand-stark); 1193 --arc-color-icon-brand: var(--arc-color-fg-brand-mid); 1194 --arc-color-text-success: var(--arc-color-fg-success-stark); 1195 --arc-color-icon-success: var(--arc-color-fg-success-stark); 1196 --arc-color-text-warning: var(--arc-color-fg-warning-stark); 1197 --arc-color-icon-warning: var(--arc-color-fg-warning-stark); 1198 --arc-color-text-critical: var(--arc-color-fg-critical-mid); 1199 --arc-color-icon-critical: var(--arc-color-fg-critical-mid); 1200 /* @deprecated border variable - please update all instances */ 1201 --arc-color-border-orange: var(--arc-color-border-orange-mid); 1202 --arc-color-border-mint: var(--arc-color-border-mint-mid); 1203 --arc-color-border-maroon: var(--arc-color-border-maroon-mid); 1204 --arc-color-border-standard: var(--arc-color-border-mid);
1205 --arc-color-border-full: var(--arc-color-border-heavy); 1206 --arc-color-border-focus-inverse: var(--arc-color-light-blue-300); 1207 --arc-border-width-standard: var(--arc-border-width-sm); 1208 /* @deprecated color variables - please update all instances */ 1209 --arc-color-info-light: var(--arc-color-bg-info-muted); 1210 --arc-color-info-medium: var(--arc-color-bg-info-subtle); 1211 --arc-color-info-root: var(--arc-color-bg-info-mid); 1212 --arc-color-info-dark: var(--arc-color-bg-info-stark); 1213 --arc-color-info-heavy: var(--arc-color-bg-info-heavy); 1214 --arc-color-border-info: var(--arc-color-border-info-mid); 1215 --arc-color-brand-light: var(--arc-color-bg-brand-muted); 1216 --arc-color-brand-medium: var(--arc-color-bg-brand-subtle); 1217 --arc-color-brand-root: var(--arc-color-bg-brand-mid); 1218 --arc-color-brand-dark: var(--arc-color-bg-brand-stark); 1219 --arc-color-brand-heavy: var(--arc-color-bg-brand-heavy); 1220 --arc-color-border-brand: var(--arc-color-border-brand-mid); 1221 --arc-color-success-light: var(--arc-color-bg-success-muted); 1222 --arc-color-success-medium: var(--arc-color-bg-success-subtle); 1223 --arc-color-success-root: var(--arc-color-bg-success-mid); 1224 --arc-color-success-dark: var(--arc-color-bg-success-stark); 1225 --arc-color-success-heavy: var(--arc-color-bg-success-heavy); 1226 --arc-color-border-success: var(--arc-color-border-success-mid); 1227 --arc-color-warning-light: var(--arc-color-bg-warning-muted); 1228 --arc-color-warning-medium: var(--arc-color-bg-warning-subtle); 1229 --arc-color-warning-root: var(--arc-color-bg-warning-mid); 1230 --arc-color-warning-dark: var(--arc-color-bg-warning-stark); 1231 --arc-color-warning-heavy: var(--arc-color-bg-warning-heavy); 1232 --arc-color-border-warning: var(--arc-color-border-warning-mid); 1233 --arc-color-critical-light: var(--arc-color-bg-critical-muted); 1234 --arc-color-critical-medium: var(--arc-color-bg-critical-subtle); 1235 --arc-color-critical-root: var(--arc-color-bg-critical-mid); 1236 --arc-color-critical-dark: var(--arc-color-bg-critical-stark); 1237 --arc-color-critical-heavy: var(--arc-color-bg-critical-heavy); 1238 --arc-color-border-critical: var(--arc-color-border-critical-mid); 1239 /** @deprecated - old alpha leading zeros */ 1240 --arc-alpha-03: var(--arc-alpha-3); 1241 --arc-alpha-05: var(--arc-alpha-5); 1242} 1243 1244/*# sourceMappingURL=theme.css.map */ 1245`,Oi={};function Cr(r,e){if(typeof document<"u"&&e?.styleSheet){const a=Oi[r];Oi[r]=e.styleSheet,document.adoptedStyleSheets=[...document.adoptedStyleSheets.filter(t=>t!==a),e.styleSheet]}}function Bp(r){const e=Object.values(Oi),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 Np(r){if(typeof CSSStyleSheet<"u"){const e=new CSSStyleSheet;e.replaceSync(Op),r.adoptedStyleSheets&&(r.adoptedStyleSheets.includes(e)||(r.adoptedStyleSheets=[...r.adoptedStyleSheets,e]))}}const Fp=r=>r?.trim().charAt(0)??void 0,Hp=(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},Vp=(r,e,a)=>e?.length?r?.trim()===""?a||e[0]:e[Hp(r,e.length)]||a||e[0]:a,$d=fr(ht,["blue","orange","mint","red","yellow","green","maroon","purple"]),Gp=fr(ht,["neutral","white","black"]),rc=fr(ze,["lg","md","sm","xs"]),Up=[...rc,"profile-sm","profile-md","profile-lg"],Kp=Kn,Wp=So,Xp=rc,qp=rc,Yp=rc,W=d`--arcâ¢inputâ¢mask`,b=d`--arcâ¢size`,M=d`--arcâ¢space`,Nr=d`--arcâ¢avatar`,de=d`${Nr}â¢chars`,Bi=d` 1246 1247 &[data-size=lg] { 1248 ${Nr}â¢fontâ¢size: var(${b}â¢16); 1249 ${Nr}â¢size: 2.5em; /* target: 40px @ 100% */ 1250 ${de}â¢1: var(${b}â¢16); 1251 ${de}â¢2: var(${b}â¢14); 1252 ${de}â¢3: var(${b}â¢12); 1253 } 1254 1255 &:is([data-size=md], [data-size=inherit], :not([data-size])) { /* @default size */ 1256 ${Nr}â¢fontâ¢size: var(${b}â¢14); 1257 ${Nr}â¢size: 2.2857142857em; /* target: 32px @ 100% (32 / 14 * 1em) */ 1258 ${de}â¢1: var(${b}â¢14); 1259 ${de}â¢2: var(${b}â¢12); 1260 ${de}â¢3: var(${b}â¢10); 1261 } 1262 1263 &[data-size=sm] { 1264 ${Nr}â¢fontâ¢size: var(${b}â¢12); 1265 ${Nr}â¢size: 2em; /* target: 24px @ 100% */ 1266 ${de}â¢1: var(${b}â¢12); 1267 ${de}â¢2: var(${b}â¢10); 1268 ${de}â¢3: var(${b}â¢8); 1269 } 1270 1271 &[data-size=xs] { 1272 ${Nr}â¢fontâ¢size: var(${b}â¢10); 1273 ${Nr}â¢size: 2em; /* target: 20px @ 100% */ 1274 ${de}â¢1: var(${b}â¢10); 1275 ${de}â¢2: var(${b}â¢8); 1276 ${de}â¢3: var(${b}â¢6); 1277 } 1278 1279`,Zp=d` 1280 1281 &[data-size=profile-lg] { 1282 ${Nr}â¢fontâ¢size: var(${b}â¢40); 1283 ${Nr}â¢size: 4em; 1284 } 1285 1286 &[data-size=profile-md] { 1287 ${Nr}â¢fontâ¢size: var(${b}â¢32); 1288 ${Nr}â¢size: 3em; 1289 } 1290 1291 &[data-size=profile-sm] { 1292 ${Nr}â¢fontâ¢size: var(${b}â¢28); 1293 ${Nr}â¢size: 2.2857142857em; /* target: 64px @ 100% (64 / 28 * 1em) */ 1294 } 1295 1296`,yd=d` 1297 1298 [arc-avatar] { 1299 ${Nr}â¢fontâ¢size: inherit; 1300 ${Nr}â¢size: inherit; 1301 ${de}â¢1: inherit; 1302 ${de}â¢2: inherit; 1303 ${de}â¢3: inherit; 1304 } 1305 1306`,yt=d`${Nr}â¢fg`,We=d`${Nr}â¢bg`,Jp=d` 1307@layer arc-components { 1308 1309 [arc-avatar] { 1310 /* Colors --------------------------------------------------------⢠*/ 1311 ${yt}: var(--arc-avatar-color, var(--arc-color-mono-white)); 1312 1313 &:has([data-color=blue]) { /* @default color */ 1314 ${We}: var(--arc-color-light-blue-400); 1315 } 1316 &:has([data-color=purple]) { 1317 ${We}: var(--arc-color-light-purple-400); 1318 } 1319 &:has([data-color=red]) { 1320 ${We}: var(--arc-color-light-red-400); 1321 } 1322 &:has([data-color=yellow]) { 1323 ${We}: var(--arc-color-light-yellow-400); 1324 } 1325 &:has([data-color=green]) { 1326 ${We}: var(--arc-color-light-green-400); 1327 }
1328 &:has([data-color=maroon]) { 1329 ${We}: var(--arc-color-light-maroon-400); 1330 } 1331 &:has([data-color=orange]) { 1332 ${We}: var(--arc-color-light-orange-400); 1333 } 1334 &:has([data-color=mint]) { 1335 ${We}: var(--arc-color-light-mint-400); 1336 } 1337 1338 /* RESERVED COLORS -----------------------------------------------⢠*/ 1339 &:has([data-color=black]) { 1340 ${yt}: light-dark(var(--arc-color-mono-white), var(--arc-color-mono-black)); 1341 ${We}: light-dark(var(--arc-color-mono-black), var(--arc-color-mono-white)); 1342 } 1343 1344 &:has([data-color=neutral]) { /* @default anonymous */ 1345 ${yt}: var(--arc-color-fg-secondary); 1346 ${We}: var(--arc-color-alpha-subtle); 1347 } 1348 1349 &:has([data-color=white]) { 1350 ${yt}: var(--arc-color-mono-black); 1351 ${We}: var(--arc-color-mono-white); 1352 } 1353 1354 /* SIZES ---------------------------------------------------------⢠*/ 1355 ${Bi} 1356 ${Zp} 1357 } 1358 1359 /* CORE AVATAR STYLES ----------------------------------------------⢠*/ 1360 [arc-avatar]:not([hidden]) { 1361 font-size: var(--arc-avatar-font-size, var(${Nr}â¢fontâ¢size)); 1362 1363 flex: none; 1364 align-self: center; 1365 1366 display: inline-flex; 1367 align-items: center; 1368 justify-content: center; 1369 width: var(--arc-avatar-size, var(${Nr}â¢size)); 1370 aspect-ratio: 1 / 1; 1371 line-height: normal; 1372 1373 text-align: center; 1374 position: relative; 1375 overflow: hidden; 1376 border-radius: var(--arc-border-radius-circle); 1377 1378 opacity: var(--arc-alpha-100); 1379 transition: opacity 200ms ease-out; 1380 1381 &[data-is-inactive] { 1382 opacity: var(--arc-alpha-50); 1383 } 1384 1385 [data-num-length] { 1386 --arc-button-font-size: var(${de}â¢1); 1387 } 1388 1389 [data-num-length='2'] { 1390 --arc-button-font-size: var(${de}â¢2); 1391 } 1392 1393 [data-num-length='3'] { 1394 --arc-button-font-size: var(${de}â¢3); 1395 } 1396 1397 1398 /* INNER ELEMENTS ------------------------------------------------⢠*/ 1399 1400 [data-element=counter] { 1401 ${Nr}â¢pointerâ¢events: all; 1402 1403 /* Inter-Component Communication ⢠ArcButton --------------------⢠*/ 1404 --arc-button-width: 100%; 1405 --arc-button-height: auto; 1406 --arc-button-aspect-ratio: 1 /1; 1407 --arc-button-padding: 0; 1408 --arc-button-background: var(--arc-avatar-background, var(${We})); 1409 --arc-button-color: var(--arc-avatar-color, var(${yt})); 1410 1411 &:disabled { 1412 --arc-button-cursor: default; 1413 } 1414 } 1415 1416 [data-element=image] { 1417 object-fit: cover; 1418 1419 /* Hides problematic image */ 1420 &:is([data-not-loaded], [data-has-error]) { 1421 ${Nr}â¢visibility: hidden; 1422 } 1423 1424 /* Hides subsequent elements with valid image */ 1425 &:not([data-has-error]) ~ [data-element] { 1426 ${yt}: transparent; 1427 ${We}: none; 1428 } 1429 } 1430 1431 :is( 1432 [data-element=counter], 1433 [data-element=initial], 1434 [data-element=anonymous] 1435 ) { 1436 background: var(${We}); 1437 color: var(${yt}); 1438 } 1439 1440 :is([data-element=initial]) { 1441 font-size: var(--arc-avatar-initial-font-size, inherit); 1442 text-transform: var(--arc-avatar-text-transform, capitalize); 1443 } 1444 1445 [data-element] { 1446 flex: none; 1447 position: absolute; 1448 inset: 0; 1449 display: flex; 1450 align-items: center; 1451 justify-content: center; 1452 1453 width: 100%; 1454 height: 100%; 1455 1456 border-radius: inherit; 1457 font-weight: var(--arc-font-weight-600); 1458 visibility: var(${Nr}â¢visibility, unset); 1459 1460 transition-duration: 200ms; 1461 transition-behavior: allow-discrete; 1462 transition-timing-function: linear; 1463 transition-property: 1464 visibility, 1465 background-color, 1466 color; 1467 1468 pointer-events: var(${Nr}â¢pointerâ¢events, none); 1469 user-select: none; 1470 -webkit-user-select: none; 1471 } 1472 } 1473 1474} 1475`,Qp=({children:r,initial:e,color:a,...t})=>(0,i.jsx)("span",{...t,"data-element":"initial","data-color":a,children:r||e}),rg=({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})},Io=r=>typeof r=="string"?r:typeof r=="number"?r.toString():Array.isArray(r)?r.map(Io).join(""):(0,s.isValidElement)(r)?Io(r.props.children):"",xd={},eg=(r="id")=>{const e=(xd[r]??0)+1;return xd[r]=e,`${r}-${e}`},Or=(r,e="id")=>{const a=(0,s.useId)();return r??`${e}-${a}`},Ht=r=>typeof r=="string",kd=r=>r!==null&&typeof r=="object",ag=["#9c15ff","#1eb4fb"],wd=({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,u=Math.sin(t)*c;return{x1:o-l,y1:n-u,x2:o+l,y2:n+u}},tg=(r,e)=>{const a=Ht(r)?r:r.color,t=Ht(r)?e.toString():r.offset?.toString()??e.toString();return(0,i.jsx)("stop",{offset:t,stopColor:a},`${a}-${e}`)},Sd=({id:r,angle:e=60,width:a,height:t,stops:o=ag})=>{const{x1:n,y1:c,x2:l,y2:u}=wd({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:u,children:o.map(tg)})})},Ni=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)"})}),Fi=r=>{const e=Or(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
147511.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})`}),Sd({id:e,width:640,height:640,stops:["var(--arc-color-logo-ai-purple, #9c15ff)","var(--arc-color-logo-ai-blue, #1eb4fb)"]})]})},Hi=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)"})}),Vi=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)"})}),Gi=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)"})}),Ui=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
147512.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)"})}),Ki=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)"})}),Wi=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
1475ill:"var(--arc-color-logo-studio, #dc424a)"})});var og;const ng="fa-width-auto",Cd="fa-fw",cg="arc-fw",Ad="arc-aw",ig=r=>typeof r=="number"?`calc(${r/10}rem * var(--arc-internal-font-size))`:r,sg={"arc-svg logo-articulate":(0,i.jsx)(Ni,{}),"arc-svg product-ai":(0,i.jsx)(Fi,{}),"arc-svg product-peek":(0,i.jsx)(Hi,{}),"arc-svg product-reach":(0,i.jsx)(Vi,{}),"arc-svg product-review":(0,i.jsx)(Gi,{}),"arc-svg product-rise":(0,i.jsx)(Ui,{}),"arc-svg product-storyline":(0,i.jsx)(Ki,{}),"arc-svg product-studio":(0,i.jsx)(Wi,{})},lx=r=>r&&r.length>0&&r?.includes("arc-svg")?sg[r]:og("span",{className:r}),zd=r=>{const e=r.includes(ng),a=r.includes(Cd),t=r.includes(cg),o=r.includes(Ad);return{hasFaAutoWidth:e,hasFaFixedWidth:a,hasArcFixedWidth:t,hasArcAutoWidth:o}},Ed=r=>((0,s.isValidElement)(r)&&r.type===Ar?r.props.icon:r)??void 0,Xi=r=>{const e=Ed(r);if(typeof e!="string")return e;const{hasFaFixedWidth:a,hasArcFixedWidth:t,hasArcAutoWidth:o}=zd(e);return!a&&!t&&!o?`${e} ${Ad}`:e},lg=r=>{const e=Ed(r);if(typeof e!="string")return e;let a=e;const{hasArcFixedWidth:t,hasFaFixedWidth:o}=zd(a);return t&&!o&&(a=`${a} ${Cd}`),a},dg=d`--arcâ¢icon`,Ba=d`${dg}â¢fg`,ug=d` 1476@layer arc-components { 1477 1478[arc-icon] { 1479 ${Ba}: currentcolor; 1480 1481 color: var(--arc-icon-color, var(${Ba})); 1482 opacity: var(--arc-icon-opacity, 1); 1483 1484 &:not([hidden]) { 1485 /* hand-off to actual interior FontAwesome icon node */ 1486 --fa-display: var(--arc-icon-display, inline-flex); 1487 --fa-line-height: var(--arc-icon-fa-line-height, 1); 1488 1489 flex: none; 1490 align-self: var(--arc-icon-align-self, unset); 1491 display: var(--fa-display); 1492 align-items: center; 1493 justify-content: center; 1494 height: var(--arc-icon-height, auto); 1495 max-height: var(--arc-icon-max-height, none); 1496 margin-block: var(--arc-icon-margin-block, unset); 1497 } 1498 1499 &:has(svg) { 1500 align-self: var(--arc-icon-svg-align-self, center); 1501 1502 svg { 1503 font-size: var(--arc-icon-size, 1em); 1504 width: 1em; 1505 height: 1em; 1506 fill: var(--arc-icon-color, var(${Ba})); 1507 } 1508 } 1509 1510 [class|=fa] { 1511 font-size: var(--arc-icon-size, 1em); 1512 align-items: center; 1513 justify-content: center; 1514 1515 /* fix for FontAwesome line-height oddities in certain cases */ 1516 line-height: normal !important; 1517 1518 &[class*='fa-stack-'] { 1519 font-size: var(--arc-icon-stack-size, inherit); 1520 } 1521 } 1522 1523 /* Explicit opt-in via Arcâs helper class */ 1524 .arc-aw { 1525 --fa-width: var(--arc-icon-fa-width, auto); 1526 } 1527} 1528 1529/* utility icon colorization */ 1530[arc-icon] { 1531 &[arc-icon-status=brand], 1532 &[arc-icon-status=announcement] { 1533 ${Ba}: var(--arc-color-fg-brand-mid); 1534 } 1535 1536 &[arc-icon-status=info] { 1537 ${Ba}: var(--arc-color-fg-info-mid); 1538 } 1539 1540 &[arc-icon-status=success] { 1541 ${Ba}: var(--arc-color-fg-success-mid); 1542 } 1543 1544 &[arc-icon-status=warning] { 1545 ${Ba}: var(--arc-color-fg-warning-mid); 1546 } 1547 1548 &[arc-icon-status=error], 1549 &[arc-icon-status=critical] { 1550 ${Ba}: var(--arc-color-fg-critical-mid); 1551 } 1552 1553 &[arc-icon-status=processing] { 1554 ${Ba}: var(--arc-color-fg-brand-mid); 1555 } 1556 1557 &[arc-icon-status] { 1558 --fa-primary-color: var(--arc-icon-color, currentcolor); 1559 --fa-secondary-color: color-mix(in srgb, currentcolor 20%, transparent); 1560 --fa-secondary-opacity: 1; 1561 } 1562} 1563 1564} 1565`,hg=r=>(0,i.jsx)(Ar,{...r,icon:"fa-kit fa-articulate arc-aw",color:r?.color||"var(--arc-color-logo-articulate, #000000)","aria-label":r?.["aria-label"]||"Articulate Logo"}),pg=r=>(0,i.jsx)(Ar,{...r,icon:"fa-kit fa-product-badge-ai arc-aw","aria-label":r?.["aria-label"]||"Articulate AI Logo",gradient:r?.gradient||"ai"}),gg=r=>(0,i.jsx)(Ar,{...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"}),vg=r=>(0,i.jsx)(Ar,{...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"}),fg=r=>(0,i.jsx)(Ar,{...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"}),mg=r=>(0,i.jsx)(Ar,{...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"}),bg=r=>(0,i.jsx)(Ar,{...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"}),$g=r=>(0,i.jsx)(Ar,{...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"}),Ar=({children:r,icon:e="fa-regular fa-circle-dashed",color:a,size:t,style:o,gradient:n,...c})=>{const l={...o,"--arc-icon-size":ig(t),"--arc-icon-color":a},u=!!(c["aria-label"]||c["aria-labelledby"]),h=lg(e),p=typeof h=="string"&&h.length>0?(0,i.jsx)("span",{className:h}):h;return(0,i.jsx)("span",{"aria-hidden":!u||void 0,...c,"arc-icon":"",style:l,"arc-gradient":n,children:r||p})};Cr("ArcIcon",ug),Ar.Articulate=hg,Ar.AI=pg,Ar.Peek=gg,Ar.Reach=vg,Ar.Review=fg,Ar.Rise=mg,Ar.Storyline=bg,Ar.Studio=$g,Ar.SVGArticulate=Ni,Ar.SVGAI=Fi,Ar.SVGPeek=Hi,Ar.SVGReach=Vi,Ar.SVGReview=Gi,Ar.SVGRise=Ui,Ar.SVGStoryline=Ki,Ar.SVGStudio=Wi;const yg=({children:r,icon:e,color:a,...t})=>(0,i.jsx)("span",{...t,"data-element":"anonymous","data-color":"neutral",children:r||(0,i.jsx)(Ar,{icon:e})}),_d="blue",Pd="neutral",xg="fa-solid fa-user arc-aw",qi=(0,s.forwardRef)(({children:r,size:e,color:a,isActive:t=!0,isAnonymous:o,alt:n,src:c,name:l,email:u,...h},p)=>
1565{const[f,g]=(0,s.useState)(!1),[v,m]=(0,s.useState)(!1),y=R=>{g(!0),m(!1),h.onLoad?.(R)},S=R=>{g(!1),m(!0),h.onError?.(R)},k=Fp(l||u),w=!!k,z=o||(!f||v)&&!w,x=!z&&!!c&&!v||void 0,_=(z&&Pd||void 0)??(a||void 0)??Vp(String(u||l||void 0),$d,_d)??_d,P={src:c,alt:n,isLoaded:f,hasError:v,onLoad:y,onError:S};return(0,s.useEffect)(()=>{z&&g(!1)},[z]),(0,i.jsx)("span",{...h,ref:p,"arc-avatar":"","data-is-inactive":!t||void 0,"data-size":e,"aria-label":(h.title??l??u)||void 0,children:r||(z?(0,i.jsx)(yg,{icon:xg,color:Pd}):(0,i.jsxs)(i.Fragment,{children:[x&&(0,i.jsx)(rg,{...P}),w&&(0,i.jsx)(Qp,{initial:k,color:_})]}))})});Cr("ArcAvatar",Jp);const Ee=d`${Nr}â¢text`,xt=d`${Nr}â¢subtext`,Vt=d`${Nr}â¢gap`,kg=d` 1566@layer arc-components { 1567 1568 [arc-avatar-text] { 1569 ${Ee}â¢fontâ¢size: var(${b}â¢14); 1570 ${xt}â¢fontâ¢size: var(${b}â¢12); 1571 ${Vt}: var(${b}â¢8); 1572 1573 ${Ee}â¢overflow: unset; 1574 ${Ee}â¢textâ¢overflow: unset; 1575 ${Ee}â¢whiteâ¢space: unset; 1576 1577 &[data-overflow=truncate] { 1578 ${Ee}â¢overflow: hidden; 1579 ${Ee}â¢textâ¢overflow: ellipsis; 1580 ${Ee}â¢whiteâ¢space: nowrap; 1581 } 1582 1583 &:has([data-size=inherit]) { 1584 ${Ee}â¢fontâ¢size: 1em; 1585 ${xt}â¢fontâ¢size: 0.875em; 1586 ${Vt}: 0.5em; 1587 } 1588 1589 &:has([data-size=lg]) { 1590 ${Ee}â¢fontâ¢size: var(--arc-font-size-14); 1591 ${xt}â¢fontâ¢size: var(--arc-font-size-12); 1592 } 1593 1594 &:has([data-size=md]) { /* @default size */ 1595 ${Ee}â¢fontâ¢size: var(--arc-font-size-14); 1596 ${xt}â¢fontâ¢size: var(--arc-font-size-12); 1597 } 1598 1599 &:has([data-size=sm]) { 1600 ${Ee}â¢fontâ¢size: var(--arc-font-size-14); 1601 ${xt}â¢fontâ¢size: var(--arc-font-size-12); 1602 } 1603 1604 &:has([data-size=xs]) { 1605 ${Ee}â¢fontâ¢size: var(--arc-font-size-12); 1606 ${xt}â¢fontâ¢size: var(--arc-font-size-12); 1607 ${Vt}: var(--arc-space-0-75); 1608 } 1609 1610 &[data-gap=lg] { ${Vt}: var(${b}â¢12); } 1611 &[data-gap=sm] { ${Vt}: var(${b}â¢4); } 1612 } 1613 1614 [arc-avatar-text] { 1615 font-size: var(--arc-avatar-text-font-size, var(${Ee}â¢fontâ¢size)); 1616 display: inline-flex; 1617 align-items: center; 1618 gap: var(--arc-avatar-text-gap, var(${Vt})); 1619 line-height: normal; 1620 min-width: 0%; /* @note: allows truncation/ellipsis for [data-element=text] */ 1621 1622 &[is-strong] [data-element=text] { 1623 font-weight: var(--arc-avatar-text-font-weight, var(--arc-font-weight-bold)); 1624 1625 [data-element=subtext] { 1626 font-weight: var(--arc-avatar-text-subtext-font-weight, var(--arc-font-weight-normal)); 1627 } 1628 } 1629 1630 [data-element=text] { 1631 flex: 1; 1632 text-align: start; 1633 } 1634 1635 [data-element=subtext] { 1636 display: var(--arc-avatar-subtext-display, block); 1637 font-size: var(--arc-avatar-subtext-font-size, var(${xt}â¢fontâ¢size)); 1638 1639 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 1640 color: var(--arc-avatar-subtext-color, color-mix(in srgb, currentcolor 61.2%, transparent)); 1641 } 1642 1643 :where([data-element=text], [data-element=subtext]) { 1644 overflow: var(${Ee}â¢overflow); 1645 text-overflow: var(${Ee}â¢textâ¢overflow); 1646 white-space: var(${Ee}â¢whiteâ¢space); 1647 } 1648 } 1649 1650} 1651`,wg="Anonymous",ec=({children:r,avatar:e={},subtext:a,size:t,gapSize:o,overflow:n,isStrong:c,...l})=>{const u=e.anonymousName||wg,h=e.name||e.email||e.src,p=e.name||e.email,f=e.isAnonymous||!h,g=r||(f?u:p),v=o!=="inherit"?o:void 0,m=n!=="inherit"?n:void 0;return(0,i.jsxs)("span",{...l,"arc-avatar-text":"","data-gap":v,"data-overflow":m,"is-strong":c?"":void 0,children:[(0,i.jsx)(qi,{...e,isAnonymous:f,size:t}),(0,i.jsxs)("span",{"data-element":"text",children:[g,a&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("br",{}),(0,i.jsx)("small",{"data-element":"subtext",children:a})]})]})]})};Cr("ArcAvatarText",kg);const Sg=d` 1652@layer arc-components { 1653 1654 [arc-avatar-pile] { 1655 --arc-button-inline-spacing: 0; 1656 1657 position: relative; 1658 display: inline-flex; 1659 align-items: center; 1660 gap: 0; 1661 1662 ${Bi} 1663 ${yd} 1664 1665 /* Cutout (mask) a portion of subsequent avatars ---------------⢠*/ 1666 [arc-avatar]+[arc-avatar] { 1667 margin-left: -0.125em; 1668 1669 /* magic! */ 1670 mask: radial-gradient( 1671 50% 50% at -43% 50%, 1672 transparent 110%, 1673 black 110% 1674 ) padding-box; 1675 } 1676 1677 } 1678 1679} 1680`,Cg=({size:r="md",...e})=>(0,i.jsx)("div",{...e,"arc-avatar-pile":"","data-size":r});Cr("ArcAvatarPile",Sg);const et=typeof window>"u"?s.useEffect:s.useLayoutEffect,Yi=[...pt],Zi=[...Da],Ag=[...Lt],Td=fr(Ur,["common"]),zg=fr(Ur,["ai","brand"]),ac=["nw-corner","to
1680p-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"],Ji=["ignore","flip"],Id=["compact","comfortable"],Ro=(r,e=1/0,a=" ")=>[...r].flat(e)?.filter(Boolean)?.join(a),Me={popover:Yi[0],anchorAt:ac[13],boundary:Ji[0],tryFallbacks:!1,fallbackAnchors:[],variant:Td[0],scheme:Zi[0],density:Id[0],isInverse:!1,hasTail:!1,tailSize:8,offset:0},Qi=()=>typeof CSS>"u"||typeof CSS.supports!="function"?!1:CSS.supports("position-anchor","--anchor-name")&&CSS.supports("container-type","anchored"),Eg=()=>typeof CSS>"u"||typeof CSS.supports!="function"?!1:CSS.supports("container-type","anchored"),tc={canAnchor:Qi(),canAnchoredContainers:Eg()},Rd=!tc.canAnchor,jd=["center","nw-corner","ne-corner","se-corner","sw-corner"],Md=r=>{if(!Array.isArray(r)||r.length===0)return[];const e=new Set;return r.filter(a=>!ac.includes(a)||e.has(a)?!1:(e.add(a),!0))},Ld=r=>`--js\u2022try-${r}`,Dd=({canHaveTail:r,tailSize:e})=>{if(!r)return{cssTailVar:"",floatingTailPx:0};const a=Math.abs(Number(e||Me.tailSize)),t=a>0?a:Me.tailSize;return{cssTailVar:t===Me.tailSize?"":`${t}px`,floatingTailPx:t}},Od=(r,e="toggle",a=document)=>{const t=a.getElementById(r);({toggle:()=>t?.togglePopover(),show:()=>t?.showPopover(),hide:()=>t?.hidePopover()})[e]()},jo=new WeakMap,rs=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}`:"--"},Mo=r=>{const e=rs(r);return e==="none"?null:e},Bd=(r,e)=>{const a=Mo(e);if(!a)return()=>{};let t=jo.get(r);return t||(t=new Set,jo.set(r,t)),t.has(a)?()=>{}:(t.add(a),r.style.setProperty("anchor-name",Ro([...t],1/0,", ")),()=>{const o=jo.get(r);if(o){if(o.delete(a),o.size===0){jo.delete(r),r.style.removeProperty("anchor-name");return}r.style.setProperty("anchor-name",Ro([...o],1/0,", "))}})},Lo=r=>`${Math.round(r*100)/100}px`,_g=[{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}],es=(r,e,a)=>_g.find(t=>t.test(r,e,a))?.value||0;let as;const Pg=()=>typeof window<"u"&&typeof CSS<"u"&&typeof CSS.supports=="function"&&!(CSS.supports("position-anchor","--anchor-name")&&CSS.supports("container-type","anchored")),ts=()=>(as||(as=Promise.all([ta.e("defaultVendors-node_modules_pnpm_floating-ui_core_1_7_5_node_modules_floating-ui_core_dist_fl-ff10bd"),ta.e("defaultVendors-node_modules_pnpm_floating-ui_dom_1_7_5_node_modules_floating-ui_dom_dist_floa-04d176")]).then(ta.bind(ta,60618))),as);Pg()&&ts().catch(()=>{});const Nd=r=>r==="start"||r==="end"?r:"center",Tg=r=>{const e=r.split("-")[0];return e==="top"||e==="right"||e==="bottom"||e==="left"?e:null},Fd=r=>{const e=Tg(r),a=Nd(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"}}},Hd=(r,e)=>r!=="center"&&e!=="center"&&r!==e,Vd=(r,e)=>{const a=Fd(r),t=Fd(e),o=Hd(a.block,t.block),n=Hd(a.inline,t.inline);return o&&n?"flip-block-inline":o?"flip-block":n?"flip-inline":""},os={...{"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"}},ns=r=>r.split("-")[0],Ig=r=>r.split("-")[1],Rg=r=>r==="x"?"y":"x",jg=r=>r==="y"?"height":"width",cs=r=>["top","bottom"].includes(ns(r))?"y":"x",Mg=r=>Rg(cs(r)),Lg=(r,e,a,t)=>{const o=cs(a),n=Mg(a),c=jg(n),l=ns(a),u=o==="y",h=r.x+r.width/2-e.width/2,p=r.y+r.height/2-e.height/2,f=r[c]/2-e[c]/2;let g;
1680switch(l){case"top":g={x:h,y:r.y-e.height};break;case"bottom":g={x:h,y:r.y+r.height};break;case"right":g={x:r.x+r.width,y:p};break;case"left":g={x:r.x-e.width,y:p};break;default:g={x:r.x,y:r.y}}switch(Ig(a)){case"start":g[n]-=f*(t&&u?-1:1);break;case"end":g[n]+=f*(t&&u?-1:1);break;default:break}return g},Dg=(r,e,a,t)=>{const o=ns(r),n=cs(r)==="y",c=o==="left"||o==="top"?-1:1,l=a&&n?-1:1,u=e,h=0;return n?{x:t.x+h*l,y:t.y+u*c}:{x:t.x+u*c,y:t.y+h*l}},Gd=r=>({x:r.x,y:r.y,width:r.width,height:r.height}),Og=({anchorEl:r,popoverEl:e,placement:a,offsetPx:t,tailOffset:o,getTailModifier:n})=>{const c=getComputedStyle(e).direction==="rtl",l=Gd(r.getBoundingClientRect()),u=Gd(e.getBoundingClientRect());let h=Lg(l,u,a,c);h=Dg(a,t,c,h);const p=h.x+o*n("x",a,a),f=h.y+o*n("y",a,a);e.style.setProperty("left",Lo(p)),e.style.setProperty("top",Lo(f))},Bg=({anchorEl:r,popoverEl:e,anchorAt:a,tryFallbacks:t,fallbackAnchors:o,offsetPx:n,tailSizePx:c,hasTail:l,isOpen:u})=>{const h=o.join("|");et(()=>{if(!(u&&!Qi()&&!!r&&!!e))return;const f=r,g=e,v=os[a];let m=!0,y;const S=l?Math.max(0,c)*Math.SQRT1_2:0;return Og({anchorEl:f,popoverEl:g,placement:v,offsetPx:n,tailOffset:S,getTailModifier:es}),(async()=>{try{const{autoUpdate:z,computePosition:x,flip:_,offset:P,shift:R,limitShift:U}=await ts();if(!m)return;const T=[P(n)];t&&(o.length?T.push(_({fallbackPlacements:o.map(G=>os[G]),fallbackStrategy:"initialPlacement"})):T.push(_({fallbackStrategy:"bestFit"}))),T.push(R({crossAxis:!t,limiter:U()}));const L=async()=>{try{const G=await x(f,g,{placement:v,strategy:"fixed",middleware:T});if(!m||!f.isConnected||!g.isConnected)return;const I=G.x+S*es("x",G.placement,v),H=G.y+S*es("y",G.placement,v);if(g.style.setProperty("left",Lo(I)),g.style.setProperty("top",Lo(H)),!l||!t){delete g.dataset.fallbacks,delete g.dataset.resolvedAt;return}if(o.length){const er=[a,...o].find(O=>os[O]===G.placement);delete g.dataset.fallbacks,er&&er!==a?g.dataset.resolvedAt=er:delete g.dataset.resolvedAt;return}delete g.dataset.resolvedAt;const V=Vd(v,G.placement);V?g.dataset.fallbacks=V:delete g.dataset.fallbacks}catch{}};await L(),y=z(f,g,L)}catch{}})(),()=>{m=!1,y?.()}},[a,r,h,l,u,n,e,c,t])},oc=1,Gt=2,Ng=[{test:(r,e)=>e.top>=r.bottom+oc,value:"bottom"},{test:(r,e)=>e.bottom<=r.top-oc,value:"top"},{test:(r,e)=>e.left>=r.right+oc,value:"right"},{test:(r,e)=>e.right<=r.left-oc,value:"left"}],Do=r=>{delete r.dataset.fallbacks,delete r.dataset.resolvedAt},nc=r=>({x:r.left+r.width/2,y:r.top+r.height/2}),Fg=(r,e,a,t)=>{const o=nc(e),n=nc(a);if(r==="top"||r==="bottom"){const h=Math.abs(t==="rtl"?a.right-e.right:a.left-e.left),p=Math.abs(t==="rtl"?a.left-e.left:a.right-e.right),f=Math.abs(n.x-o.x);return Math.abs(h-p)<=Gt&&f<=Gt||f+Gt<Math.min(h,p)?"center":h<=p?"start":"end"}const c=Math.abs(a.top-e.top),l=Math.abs(a.bottom-e.bottom),u=Math.abs(n.y-o.y);return Math.abs(c-l)<=Gt&&u<=Gt||u+Gt<Math.min(c,l)?"center":c<=l?"start":"end"},Hg=(r,e,a,t)=>{const o=Ng.find(u=>u.test(e,a));let n;if(o)n=o.value;else{const u=nc(e),h=nc(a),p=h.y-u.y,f=h.x-u.x,g=Math.min(e.height,a.height)*.1;Math.abs(p)>g?n=p>=0?"bottom":"top":n=f>=0?"right":"left"}if(Nd(r.split("-")[1])==="center")return n;const l=Fg(n,e,a,t);return`${n}-${l}`},Vg=({anchorEl:r,popoverEl:e,anchorAt:a,tryFallbacks:t,fallbackAnchors:o,isOpen:n,hasTail:c})=>{const l=o.join("|");et(()=>{if(!e||!tc.canAnchor)return;if(!c||!t||!n||tc.canAnchoredContainers||!r){Do(e);return}const u=a;if(u==="center"||u.includes("corner")){Do(e);return}const h=r,p=e;let f=!0,g;const v=()=>{const y=h.getBoundingClientRect(),S=p.getBoundingClientRect(),k=getComputedStyle(h).direction==="rtl"?"rtl":"ltr",w=Hg(u,y,S,k);if(o.length){const _=w.split("-")[0],P=[u,...o],R=P.find(U=>U===w)??P.find(U=>U.split("-")[0]===_);delete p.dataset.fallbacks,R&&R!==u?p.dataset.resolvedAt=R:delete p.dataset.resolvedAt;return}delete p.dataset.resolvedAt;const z=Vd(u,w);u===w?Do(p):z?p.dataset.fallbacks=z:Do(p)};return(async()=>{try{const{autoUpdate:S}=await ts();if(!f)return;g=S(h,p,v),v()}catch{}})(),()=>{f=!1,g?.(),Do(p)}},[a,r,l,c,n,e,t])},Ud=(r,e=" ")=>r.split(e).map(a=>
1680a.trim()).filter(Boolean),Gg=d` 1681@layer arc-components { 1682 1683 [arc-spinner] { 1684 flex: none; 1685 display: flex; 1686 1687 position: var(--arc-spinner-position, relative); 1688 inset: var(--arc-spinner-inset, 0); 1689 translate: var(--arc-spinner-translate, 0); 1690 width: var(--arc-spinner-size, 3em); 1691 1692 border-radius: var(--arc-border-radius-circle); 1693 aspect-ratio: 1 / 1; 1694 pointer-events: none; 1695 1696 [arc-spinner-circle] { 1697 fill: none; 1698 stroke: var(--arc-spinner-circle-color, currentcolor); 1699 opacity: var(--arc-spinner-circle-opacity, var(--arc-alpha-30)); 1700 } 1701 1702 [arc-spinner-progress] { 1703 fill: none; 1704 stroke: var(--arc-spinner-progress-color, var(--arc-color-fg-brand-mid)); 1705 stroke-dasharray: var(--arc-spinner-progress, 0.3334) 1; 1706 stroke-dashoffset: 0; 1707 stroke-linecap: round; 1708 opacity: var(--arc-spinner-progress-opacity, var(--arc-alpha-100)); 1709 animation: var(--arc-spinner-animation-duration, 743ms) arc-spinner-rotate linear infinite; 1710 transform-origin: 50% 50%; 1711 } 1712 } 1713 1714 @keyframes arc-spinner-rotate { 1715 to { 1716 transform: rotate3d(0, 0, 1, 360deg); 1717 } 1718 } 1719} 1720`,is=(0,s.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"})]}));is.displayName="ArcSpinner",Cr("ArcSpinner",Gg);const Ug=(...r)=>console.log(...r),Kd=(...r)=>console.warn(...r),Kg=(...r)=>console.error(...r),Ut=d`--arcâ¢iconâ¢text`,Oo=d`${Ut}â¢fontâ¢size`,Wd=d`${Ut}â¢icon`,ss=d`${Ut}â¢text`,Xd=d`${Ut}â¢subtext`,fa=d`${Ut}â¢fg`,Na=d`${Ut}â¢gap`,at=d`${Wd}â¢size`,qd=d`${Wd}â¢verticalâ¢align`,Bo=d`${ss}â¢overflow`,cc=d`${ss}â¢textâ¢overflow`,ic=d`${ss}â¢whiteâ¢space`,sc=d`${Xd}â¢fontâ¢size`,Yd=d`${Xd}â¢fg`,Wg=d` 1721 1722 &[data-variant=inherit] { /* @default 'inherit' ⢠uses font/color props from context */ 1723 ${fa}: currentcolor; 1724 } 1725 1726 &[data-variant=primary] { 1727 ${fa}: var(--arc-color-fg-primary); 1728 } 1729 1730 &[data-variant=secondary] { 1731 ${fa}: var(--arc-color-fg-secondary); 1732 } 1733 1734 &[data-variant=inverse] { 1735 ${fa}: var(--arc-color-dark-neutral-1000); 1736 } 1737 1738 &[data-variant=brand] { 1739 ${fa}: var(--arc-color-fg-brand-stark); 1740 } 1741 1742 &[data-variant=info] { 1743 ${fa}: var(--arc-color-fg-info-stark); 1744 } 1745 1746 &[data-variant=success] { 1747 ${fa}: var(--arc-color-fg-success-stark); 1748 } 1749 1750 &[data-variant=warning] { 1751 ${fa}: var(--arc-color-fg-warning-stark); 1752 } 1753 1754 &[data-variant=critical] { 1755 ${fa}: var(--arc-color-fg-critical-mid); 1756 } 1757 1758`,Xg=d` 1759 1760 /* Overall Text Sizes */ 1761 1762 &[data-size=inherit] { /* @default 'inherit' ⢠uses font/size from context */ 1763 ${Oo}: 1em; 1764 ${sc}: 0.75em; 1765 ${at}: 1em; 1766 ${Na}: 0.25em; /* 4px @ 100% */ 1767 } 1768 1769 &[data-size=md] { 1770 ${Oo}: var(--arc-font-size-14); 1771 ${sc}: var(--arc-font-size-12); 1772 ${Na}: var(${M}â¢3); 1773 } 1774 1775 &[data-size=sm] { 1776 ${Oo}: var(--arc-font-size-12); 1777 ${sc}: var(--arc-font-size-12); 1778 ${Na}: var(${M}â¢3); 1779 } 1780 1781 /* Gap Sizes */ 1782 1783 &[data-gap=lg] { ${Na}: var(${M}â¢12); } /* 12px @ 100% */ 1784 &[data-gap=md] { ${Na}: var(${M}â¢8); } /* 8px @ 100% */ 1785 &[data-gap=sm] { ${Na}: var(${M}â¢3); } /* 4px @ 100% */ 1786 1787 /* Icon Sizes */ 1788 1789 &[icon-size=xl] { ${at}: var(${b}â¢24); } 1790 &[icon-size=lg] { ${at}: var(${b}â¢20); } 1791 &[icon-size=md] { ${at}: var(${b}â¢16); } 1792 &[icon-size=sm] { ${at}: var(${b}â¢14); } 1793 &[icon-size=xs] { ${at}: var(${b}â¢12); } 1794`,qg=d` 1795 1796 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 1797 ${Yd}: var(--arc-icon-text-subtext-color, color-mix(in srgb, currentcolor 61.2%, transparent)); 1798 1799 /* ArcIcon */ 1800 --arc-icon-color: var(--arc-icon-text-icon-color, var(${fa})); 1801 --arc-icon-size: var(--arc-icon-text-icon-size, var(${at})); 1802 --arc-icon-fa-line-height: normal; 1803 --arc-icon-align-self: baseline; 1804 1805 &[data-layout=inline] { 1806 ${Bo}: unset; 1807 ${cc}: unset; 1808 ${ic}: unset; 1809 1810 ${qd}: calc((var(${at}) - var(${Oo})) / -2); 1811 1812 &:has(svg) { ${qd}: text-bottom; } 1813 } 1814 1815 /* Text Overflows */ 1816 &[data-layout=gutter] { 1817 ${Bo}: visible; 1818 ${cc}: unset; 1819 ${ic}: normal; 1820 1821 &[data-overflow=truncate] { 1822 ${Bo}: hidden; 1823 ${cc}: ellipsis; 1824 ${ic}: nowrap; 1825 } 1826 } 1827 1828`,Yg=d` 1829@layer arc-components { 1830 1831 [arc-icon-text] { 1832 ${Wg} 1833 ${Xg} 1834 ${qg} 1835 } 1836 1837 [arc-icon-text] { 1838 position: var(--arc-icon-text-position, relative); 1839 font-size: var(--arc-icon-text-font-size, var(${Oo})); 1840 color: var(--arc-icon-text-text-color, var(${fa})); 1841 line-height: var(--arc-icon-text-line-height, inherit); 1842 1843 [data-element=icon] { 1844 display: contents; 1845 } 1846 1847 [data-element] { 1848 /* @note: SVG alignment mitigation strategy; presents in multiple components 1849 * Badges, CheckboxBars, RadioBars, supporting IconText cases like Links, etc. when using SVG icons. 1850 */ 1851 :where(svg) { 1852 flex: none; 1853 align-self: var(--arc-icon-text-svg-align-self, normal); 1854 display: var(--arc-icon-text-svg-display, inline-block) !important; 1855 width: var(--arc-icon-text-svg-width, 1.25em) !important; 1856 height: var(--arc-icon-text-svg-height, auto) !important; 1857 max-height: var(--arc-icon-text-svg-max-height, 1lh); 1858 fill: var(--arc-icon-text-svg-fill, currentColor); 1859 vertical-align: var(--arc-icon-text-svg-vertical-align, text-bottom) !important;
1860 overflow: var(--arc-icon-text-svg-overflow, visible) !important; 1861 } 1862 } 1863 1864 [data-element=text], 1865 [data-element=subtext] { 1866 position: relative; 1867 hyphens: var(--arc-icon-text-hyphens, auto); 1868 } 1869 1870 &[is-strong] [data-element=text] { 1871 font-weight: var(--arc-icon-text-font-weight, var(--arc-font-weight-bold)); 1872 1873 [data-element=subtext] { 1874 font-weight: var(--arc-icon-text-subtext-font-weight, var(--arc-font-weight-normal)); 1875 } 1876 } 1877 1878 /* @default ⢠gutter layout */ 1879 &[data-layout=gutter] { 1880 display: inline-flex; 1881 align-items: var(--arc-icon-text-align-items, first baseline); 1882 gap: var(--arc-icon-text-gap, var(${Na})); 1883 1884 /* Truncation Support */ 1885 overflow: var(--arc-icon-text-overflow, var(${Bo})); 1886 1887 &[is-flipped] { flex-direction: row-reverse; } 1888 1889 [data-element=text] { 1890 flex: 1; 1891 min-width: 0%; 1892 } 1893 1894 [data-element=subtext] { 1895 display: var(--arc-icon-text-subtext-display, block); 1896 line-height: normal; 1897 font-size: var(--arc-icon-text-subtext-font-size, var(${sc})); 1898 color: var(--arc-icon-text-subtext-color, var(${Yd})); 1899 padding-block-start: var(--arc-icon-text-subtext-spacing, 0); 1900 } 1901 1902 :where([data-element=text], [data-element=subtext]) { 1903 overflow: var(--arc-icon-text-overflow, var(${Bo})); 1904 text-overflow: var(--arc-icon-text-text-overflow, var(${cc})); 1905 white-space: var(--arc-icon-text-white-space, var(${ic})); 1906 } 1907 } 1908 1909 &[data-layout=inline] { 1910 display: inline; 1911 1912 [data-element=icon] + [data-element=text] { margin-inline-start: var(--arc-icon-text-gap, var(${Na})); } 1913 [data-element=text]:has(+ [data-element=icon]) { margin-inline-end: var(--arc-icon-text-gap, var(${Na})); } 1914 [data-element=subtext] { display: contents; } 1915 } 1916 } 1917} 1918 1919`,Zg=fr(Ur,["inherit","primary","secondary","inverse","brand","info","success","warning","critical"]),ue=({children:r,layout:e="gutter",size:a="inherit",variant:t="inherit",tag:o="span",icon:n,iconTooltip:c,text:l,subtext:u,gradient:h,overflow:p,iconSize:f,gapSize:g,isFlipped:v=!1,isStrong:m=!1,...y})=>{const S=r||l,k=!!n,w=!!S,z=e==="gutter",x=e==="inline",_=k&&(!v||z),P=k&&w&&v&&x,R=!!f&&f!=="inherit",U=R&>.includes(f)?f:void 0,T=R&&!gt.includes(f)?f:void 0,L=g!=="inherit"?g:void 0,G=p!=="inherit"?p:void 0,I=Xi(n),H=typeof I=="string"?(0,i.jsx)(Ar,{icon:I,size:T,gradient:h}):I,V=c?(0,i.jsx)(mc,{text:c,children:H}):H;return(0,i.jsxs)(o,{...y,"arc-icon-text":"","data-variant":t,"data-layout":e,"data-overflow":G,"data-size":a,"data-gap":L,"icon-size":U,"is-flipped":v?"":void 0,"is-strong":m?"":void 0,children:[_&&(0,i.jsx)("span",{"data-element":"icon",children:V}),w&&(0,i.jsxs)("span",{"data-element":"text",children:[S,!!u&&(z?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("br",{}),(0,i.jsx)("small",{"data-element":"subtext",children:u})]}):(0,i.jsxs)(i.Fragment,{children:[" ",(0,i.jsx)("span",{"data-element":"subtext",children:u})]}))]}),P&&(0,i.jsx)("span",{"data-element":"icon",children:V})]})};Cr("ArcIconText",Yg);
1919const ma={...Me,popover:Yi[2],anchorAt:ac[2],boundary:Ji[1],tryFallbacks:!0,scheme:Zi[3],offset:4,isStrong:!0,hasTail:!0,isEnabled:!0},lc=new WeakSet,Jg=100,Qg=100;let ls=!0,ds=null;const rv=typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("selector(:focus-visible)"),ev=r=>r instanceof Element?rv?r.matches(":focus-visible")===!0:ls:!1,us=new WeakMap,hs=new WeakMap,No=new Set,dc=(r,e)=>{const a=r.get(e);a!=null&&(clearTimeout(a),r.delete(e))},Zd=(r,e,a,t)=>{const o=window.setTimeout(()=>{t(),r.delete(e)},a);r.set(e,o)},Jd="[aria-describedby]",av=r=>typeof r=="object"&&r!==null&&r.hasAttribute?.("popover")===!0,Qd=r=>r instanceof HTMLElement&&r.getAttribute("role")==="tooltip"&&av(r),tv=r=>!!r&&(r.tagName==="LABEL"||r.hasAttribute("arc-label")),ov=r=>r?.match(/\S+/g)??[],ps=(r,e)=>{const a=na(e??document.documentElement);if(!a)return null;const t=a.querySelector(`[aria-describedby~="${r}"]`);return t?t.closest("label,[arc-label]")??t:null},nv=r=>{if(!(r instanceof Element))return null;const e=r.closest?.(Jd);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(tv(a)){const t=a.querySelector?.(Jd),o=t?.getAttribute?.("aria-describedby")??"";if(t&&o)return{anchor:a,tooltipId:o}}a=a.parentElement}return null},cv=r=>{if(!(r instanceof Element))return null;const e=r.closest?.('[role="tooltip"][popover]')??null;return e instanceof HTMLElement?e:null},iv=r=>r?.id?ps(r.id,r):null,sv=r=>{const e=cv(r),a=nv(r);if(!a&&e){const u=iv(e);return!u||!e.id?null:{anchor:u,tooltip:e}}if(!a)return null;const{anchor:t,tooltipId:o}=a;if(!o)return null;const n=na(r);if(!n)return null;const c=ov(o),l=e??c.map(u=>n.getElementById(u)).find(u=>Qd(u))??null;return Qd(l)?{anchor:t,tooltip:l}:null},lv=(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},ru=r=>{r.isConnected&&(r.showPopover?.(),No.add(r))},eu=r=>{r.isConnected&&(r.hidePopover?.(),No.delete(r))},dv=(r,e)=>{if(dc(hs,r),dc(us,r),!e){ru(r);return}Zd(us,r,Jg,()=>ru(r))},gs=(r,e)=>{if(dc(us,r),dc(hs,r),!e){eu(r);return}Zd(hs,r,Qg,()=>eu(r))},uv=()=>{No.forEach(r=>{gs(r,!1)})},Fo=(r,e,a,t)=>{const o=sv(e);if(!o)return;const{anchor:n,tooltip:c}=o;if(r){dv(c,t);return}lv(n,c,a)||gs(c,t)};let uc=null,hc=null,pc=null,gc=null,vc=null,fc=null,Kt=null,Ho=null;const au=r=>{if(!r&&typeof document>"u")return;const e=r?na(r):document;if(!e||lc.has(e))return;fc=t=>{ls=!1,ds=t.target},Kt=()=>{ds=null},uc=t=>Fo(!0,t.target,void 0,!0),pc=t=>Fo(!1,t.target,t.relatedTarget,!0),hc=t=>{ev(t.target)&&Fo(!0,t.target,void 0,!1)},gc=t=>{const o=t.relatedTarget??ds;Fo(!1,t.target,o,!1)},vc=t=>{t.key==="Tab"&&(ls=!0),t.key==="Escape"&&(No.size>0&&t.preventDefault(),Fo(!1,t.target,void 0,!1),No.forEach(o=>gs(o,!1)))},Ho=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}uv()}},[["pointerdown",fc],["pointerup",Kt],["pointercancel",Kt],["pointerover",uc],["focusin",hc],["pointerout",pc],["focusout",gc],["keydown",vc]].forEach(([t,o])=>{e.addEventListener(t,o)}),e.addEventListener("toggle",Ho,!0),lc.add(e)},hv=()=>{if(!lc.has(document)||typeof document>"u")return;[["pointerdown",fc],["pointerup",Kt],["pointercancel",Kt],["pointerover",uc],["focusin",hc],["pointerout",pc],["focusout",gc],["keydown",vc]].forEach(([e,a])=>{a&&document.removeEventListener(e,a)}),Ho&&document.removeEventListener("toggle",Ho,!0),uc=null,hc=null,pc=null,gc=null,vc=null,fc=null,Kt=null,Ho=null,lc.delete(document)},ba=d`--arcâ¢tooltip`,tu=d`${ba}â¢subtext`,ou=d`${ba}â¢slot`,pv=d` 1920@layer arc-components { 1921 [arc-tooltip] { 1922 ${ba}â¢width: max-content; 1923 ${ba}â¢maxâ¢width: 20em; 1924 ${ba}â¢fontâ¢size: var(${b}â¢12); 1925 ${ba}â¢padding: var(${M}â¢10); 1926 ${tu}â¢spacing: var(${M}â¢6); 1927 ${ou}â¢marginâ¢top: var(${M}â¢8); 1928 1929 /* Communicates to Popover Engine ------------------------------⢠*/ 1930 --arc-popover-overflow: var(--arc-tooltip-overflow, clip); 1931 --arc-popover-border-radius: var(--arc-border-radius-md); 1932 --arc-popover-min-width: var(--arc-tooltip-min-width, auto); /** Ensure tooltip width is driven by content, not anchor width */ 1933 --arc-popover-width: var(--arc-tooltip-width, var(${ba}â¢width)); 1934 --arc-popover-max-width: var(--arc-tooltip-max-width, var(${ba}â¢maxâ¢width)); 1935 --arc-popover-border: var(--arc-tooltip-border, 0); 1936 --arc-popover-footer-flex-direction: var(--arc-tooltip-footer-flex-direction, row); 1937 --arc-popover-font-size: var(--arc-tooltip-font-size, var(${ba}â¢fontâ¢size)); 1938 --arc-popover-padding: var(--arc-tooltip-padding, var(${ba}â¢padding)); 1939 --arc-popover-tail-x: var(--arc-tooltip-tail-x, 1.125em); 1940 --arc-popover-tail-y: var(--arc-tooltip-tail-y, 1.125em); 1941 --arc-popover-line-height: var(--arc-line-height-tight); 1942 1943 /* Communicates to IconText ----------------------------------⢠*/ 1944 --arc-icon-text-subtext-font-size: var(--arc-tooltip-subtext-font-size, var(${ba}â¢fontâ¢size)); 1945 --arc-icon-text-hyphens: none; 1946 --arc-icon-text-subtext-spacing: var(--arc-tooltip-subtext-spacing, var(${tu}â¢spacing)); 1947 1948 [arc-tooltip-content] { 1949 text-align: var(--arc-tooltip-text-align, unset); 1950 } 1951 1952 [arc-tooltip-content] + [arc-tooltip-slot-content] { 1953 margin-top: var(--arc-tooltip-slot-margin-top, var(${ou}â¢marginâ¢top)); 1954 } 1955 } 1956} 1957`,mc=(0,s.forwardRef)(({id:r,children:e,slot:a,isEnabled:t=ma.isEnabled,popover:o=ma.popover,variant:n=ma.variant,anchorAt:c=ma.anchorAt,alternateAnchor:l,boundary:u=ma.boundary,tryFallbacks:h=ma.tryFallbacks,hasTail:p=ma.hasTail,offset:f=ma.offset,scheme:g=ma.scheme,isStrong:v=ma.isStrong,text:m,subtext:y,icon:S,isFlipped:k,...w},z)=>{const x=Or(r,"arc-tooltip"),_=(0,s.useRef)(null);(0,s.useImperativeHandle)(z,()=>_.current);const P=I=>typeof I=="object"&&I!==null&&"tabIndex"in I,R=e,U=!!l;let T=null;(0,s.isValidElement)(R)?T=t?(0,s.cloneElement)(R,{"aria-describedby":x,...P(R.props)&&R.props.tabIndex!=null?{}:{tabIndex:0}}):R:!U&&typeof console<"u"&&Kd("\u{1F6A8} ArcTooltip \u2022 expects a single ReactElement child as the trigger.");const L=(0,s.useMemo)(()=>()=>ps(x,_.current),[x]),G=g==="auto"?void 0:g;return(0,s.useEffect)(()=>
1957{if(t)try{au(_.current)}catch{}},[t]),(0,i.jsxs)(i.Fragment,{children:[T,t&&(0,i.jsxs)(ya,{...w,"arc-tooltip":"",scheme:w?.isInverse?"inverse":G,role:"tooltip",id:x,ref:_,popover:o,anchorAt:c,tryFallbacks:h??u==="flip",variant:n,hasTail:p,offset:f,hidePopoverButton:!0,alternateAnchor:l??L,tag:w?.tag??"span",contentTag:w?.contentTag??"span",children:[m&&(0,i.jsx)(ue,{"arc-tooltip-content":"",text:m,subtext:y,icon:S,isFlipped:k,isStrong:v,size:"inherit",variant:"inherit"}),a&&(0,i.jsx)("span",{"arc-tooltip-slot-content":"",children:a})]})]})});Cr("ArcTooltip",pv);const gv=({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"}],vv=({isFloating:r,isOnMedia:e,shadow:a})=>gv({isFloating:r,isOnMedia:e,shadow:a}).find(t=>t.condition)?.value??a,fv=({layout:r,isFloating:e})=>[{condition:r==="icon",value:"icon"},{condition:e||r==="hug",value:"hug"},{condition:!e&&r==="fill",value:"fill"}],mv=({layout:r,isFloating:e})=>fv({layout:r,isFloating:e}).find(a=>a.condition)?.value??r,bv=({scheme:r,isInverse:e})=>[{condition:e,value:"inverse"},{condition:r==="auto",value:void 0},{condition:!0,value:r}],$v=({scheme:r,isInverse:e})=>{const a=bv({scheme:r,isInverse:e}).find(t=>t.condition)?.value??r;return a==="auto"?void 0:a},yv=fr(wo,["round","square","narrow"]),xv=fr(ze,["xxl","xl","lg","md","sm"]),kv=fr(pa,["hug","fill","icon"]),nu=fr(Ur,["common","neutral","ai","critical","alpha"]),vs=[...Da],wv=[...Fn],cu=fr(Hn,["primary","secondary","tertiary","plain","link-style"]),Sv=[...Lt],Cv={circle:"round"},iu=({shape:r})=>Oa(r,Cv),fs=fr(Ur,["primary","secondary","tertiary","critical-primary","critical-secondary","ai-primary","ai-secondary","primary-inverse","secondary-inverse","tertiary-inverse"]),su={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"}},Av=(()=>{const r=new Map;return fs.forEach(e=>{const a=su[e],t=a.scheme==="inverse"?"inverse":"";r.set(`${a.variant}|${a.hierarchy}|${t}`,e)}),r})(),ms=r=>!!(r&&fs.includes(r)),bc=r=>r!==void 0&&ms(r)?su[r]:void 0,lu=({variant:r})=>bc(r)?.variant??r,du=({variant:r,hierarchy:e})=>bc(r)?.hierarchy??e,uu=({variant:r,isInverse:e,scheme:a})=>bc(r)?.scheme??$v({scheme:a,isInverse:e}),zv={variant:nu[0],hierarchy:cu[0],scheme:vs[0]},Ev=({variant:r})=>{const e=bc(r);return e?{variant:e.variant,hierarchy:e.hierarchy,scheme:e.scheme??vs[0]}:zv},_v=({variant:r,hierarchy:e,scheme:a})=>Av.get(`${r}|${e}|${a==="inverse"?"inverse":""}`),Qe=d`60deg`,Gr={purple:{50:d`light-dark(#fbf2ff, #210125)`,100:d`light-dark(#efccff, #540160)`,200:d`light-dark(#9c15ff, #ad44cb)`,300:d`light-dark(#680278, #ad44cb)`,400:d`light-dark(#5d3668, #c778de)`,500:d`light-dark(#37003f, #e3a7ff)`,600:d`light-dark(#27002c, #f9ebff)`},blue:{50:d`light-dark(#f4fbff, #00223b)`,100:d`light-dark(#d2f1fe, #02497d)`,200:d`light-dark(#1eb4fb, #169cfe)`,300:d`light-dark(#0179d0, #71bdfe)`,400:d`light-dark(#36648c, #84daff)`,500:d`light-dark(#004273, #b7eaff)`,600:d`light-dark(#012a48, #c2edff)`}},Vo=d`var(--arc-color-overlay-subtle)`,Pv=d` 1958:root { 1959 --arc-button-critical-bg-hover: light-dark( 1960 color-mix(in srgb, var(--arc-color-light-red-600), transparent 90%), 1961 color-mix(in srgb, var(--arc-color-dark-red-700), transparent 75%) 1962 ); 1963 1964 /* * + secondary floating button */ 1965 --arc-button-floating-bg: ${Vo}; 1966 --arc-button-floating-bg-processing: ${Vo}; 1967 --arc-button-floating-bg-disabled: var(--arc-color-bg-disabled); 1968 --arc-button-floating-bg-focus: ${Vo}; 1969 --arc-button-floating-bg-hover: light-dark(var(--arc-color-light-neutral-100), var(--arc-color-dark-neutral-100)); 1970 --arc-button-floating-bg-active: light-dark(var(--arc-color-light-neutral-200), var(--arc-color-dark-neutral-200)); 1971 1972 /* critical + floating button */ 1973 --arc-button-critical-floating-bg-hover: var(--arc-color-bg-critical-subtle); 1974 --arc-button-critical-floating-bg-active: var(--arc-color-bg-critical-muted); 1975 1976 /* ai + secondary floating button */
1977 --arc-button-ai-floating-bg: ${Vo} linear-gradient(${Qe}, transparent, ${Vo}); 1978 1979 /* 1980 ai variant gradients that can be slightly transitioned: 'bg-color + gradient(transparent -> color)' 1981 bg-color can be transitioned, gradient not so much. Result: subtle transition of the bg-color through the transparent parts of the gradient. 1982 */ 1983 --arc-button-gradient-ai-transparent: transparent linear-gradient(${Qe}, transparent, transparent); 1984 --arc-button-gradient-ai-50: ${Gr.purple[50]} linear-gradient(${Qe}, transparent, ${Gr.blue[50]}); 1985 --arc-button-gradient-ai-100: ${Gr.purple[100]} linear-gradient(${Qe}, transparent, ${Gr.blue[100]}); 1986 --arc-button-gradient-ai-200: ${Gr.purple[200]} linear-gradient(${Qe}, transparent, ${Gr.blue[200]}); 1987 --arc-button-gradient-ai-300: ${Gr.purple[300]} linear-gradient(${Qe}, transparent, ${Gr.blue[300]}); 1988 --arc-button-gradient-ai-400: ${Gr.purple[400]} linear-gradient(${Qe}, transparent, ${Gr.blue[400]}); 1989 --arc-button-gradient-ai-500: ${Gr.purple[500]} linear-gradient(${Qe}, transparent, ${Gr.blue[500]}); 1990 --arc-button-gradient-ai-600: ${Gr.purple[600]} linear-gradient(${Qe}, transparent, ${Gr.blue[600]}); 1991} 1992`,Tv=d` 1993:root { 1994 --arc-link-fg-hover-inverse: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 68.2%, transparent); 1995 --arc-link-fg-disabled-inverse: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 30%, transparent); 1996 --arc-link-focus-disabled-inverse: light-dark(var(--arc-color-light-blue-300), var(--arc-color-light-blue-600)); 1997} 1998`,Iv=d` 1999:root { 2000 /* Tail edge colors for 'variant=ai' popovers */ 2001 --arc-popover-ai-purple-50: ${Gr.purple[50]}; 2002 --arc-popover-ai-purple-200: ${Gr.purple[200]}; 2003 --arc-popover-ai-blue-50: ${Gr.blue[50]}; 2004 --arc-popover-ai-blue-200: ${Gr.blue[200]}; 2005} 2006`,Rv=d` 2007:root { 2008 --arc-progress-bar-gradient-ai-200: linear-gradient(${Qe}, ${Gr.purple[200]} -0.5em, ${Gr.blue[200]}); 2009} 2010`,jv=d` 2011:root { 2012 --arc-banner-gradient-ai-50: linear-gradient(${Qe}, ${Gr.purple[50]}, ${Gr.blue[50]}); 2013 --arc-banner-gradient-ai-100: linear-gradient(${Qe}, ${Gr.purple[100]}, ${Gr.blue[100]}); 2014 --arc-banner-gradient-ai-300: linear-gradient(${Qe}, ${Gr.purple[300]}, ${Gr.blue[300]}); 2015} 2016`,j=d`--arcâ¢button`,B=d`${j}â¢fg`,A=d`${j}â¢bg`,gr=d`${j}â¢edge`,jr=d`${j}â¢border`,Wt=d`${j}â¢outline`,Xe=d`${j}â¢label`,_e=d`${j}â¢mask`,zr=d`${j}â¢spinner`,te=d`${j}â¢icon`,ye=d`${te}â¢svg`,Mv=d` 2017 &[data-size=xxl] { 2018 ${j}â¢fontâ¢size: var(${b}â¢16); 2019 ${j}â¢height: var(${b}â¢56); 2020 ${zr}â¢size: var(${b}â¢32); 2021 ${te}â¢size: var(${b}â¢20); 2022 ${te}â¢sizeâ¢large: var(${b}â¢24); 2023 ${ye}â¢size: var(${b}â¢25); 2024 ${ye}â¢sizeâ¢large: var(${b}â¢24); 2025 ${Xe}â¢spacing: var(${b}â¢12); 2026 ${j}â¢spacing: var(${b}â¢16); 2027 ${j}â¢spacingâ¢square: var(${b}â¢16); 2028 ${jr}â¢radiusâ¢square: var(--arc-border-radius-lg); 2029 } 2030 2031 &[data-size=xl] { 2032 ${j}â¢fontâ¢size: var(${b}â¢14); 2033 ${j}â¢height: var(${b}â¢48); 2034 ${zr}â¢size: var(${b}â¢16); 2035 ${te}â¢size: var(${b}â¢16); 2036 ${te}â¢sizeâ¢large: var(${b}â¢20); 2037 ${ye}â¢size: var(${b}â¢20); 2038 ${ye}â¢sizeâ¢large: var(${b}â¢25); 2039 ${Xe}â¢spacing: var(${b}â¢10); 2040 ${j}â¢spacing: var(${b}â¢14); 2041 ${j}â¢spacingâ¢square: var(${b}â¢14); 2042 ${jr}â¢radiusâ¢square: var(--arc-border-radius-lg); 2043 } 2044 2045 &[data-size=lg] { /** @default */ 2046 ${j}â¢fontâ¢size: var(${b}â¢14); 2047 ${j}â¢height: var(${b}â¢40); 2048 ${zr}â¢size: var(${b}â¢16); 2049 ${te}â¢size: var(${b}â¢16); 2050 ${te}â¢sizeâ¢large: var(${b}â¢20); 2051 ${ye}â¢size: var(${b}â¢20); 2052 ${ye}â¢sizeâ¢large: var(${b}â¢25); 2053 ${Xe}â¢spacing: var(${b}â¢8); 2054 ${j}â¢spacing: var(${b}â¢12); 2055 ${j}â¢spacingâ¢square: var(${b}â¢10); 2056 ${jr}â¢radiusâ¢square: var(--arc-border-radius-lg); 2057 } 2058 2059 &[data-size=inherit] { /* scalable ⢠mimics default size */ 2060 ${j}â¢fontâ¢size: 1em; 2061 ${j}â¢height: 2.5em; 2062 ${Xe}â¢fontâ¢size: 0.875em; 2063 ${zr}â¢size: 1.125em; 2064 ${te}â¢size: 1.125em; 2065 ${te}â¢sizeâ¢large: 1.25em; 2066 ${ye}â¢size: 1.25em; 2067 ${ye}â¢sizeâ¢large: 1.375em; 2068 ${Xe}â¢spacing: max(8px, 0.5em); 2069 ${j}â¢spacing: 0.75em; 2070 ${j}â¢spacingâ¢square: 0.625em; 2071 ${jr}â¢radiusâ¢square: var(--arc-border-radius-lg); 2072 } 2073 2074 &[data-size=md] { 2075 ${j}â¢fontâ¢size: var(${b}â¢14); 2076 ${j}â¢height: var(${b}â¢32); 2077 ${zr}â¢size: var(${b}â¢16); 2078 ${te}â¢size: var(${b}â¢14); 2079 ${te}â¢sizeâ¢large: var(${b}â¢20); 2080 ${ye}â¢size: var(${b}â¢18); 2081 ${ye}â¢sizeâ¢large: var(${b}â¢25); 2082 ${Xe}â¢spacing: var(${b}â¢6); 2083 ${j}â¢spacing: var(${b}â¢10); 2084 ${j}â¢spacingâ¢square: var(${b}â¢8); 2085 ${jr}â¢radiusâ¢square: var(--arc-border-radius-md); 2086 } 2087 2088 &[data-size=sm] { 2089 ${j}â¢fontâ¢size: var(${b}â¢12); 2090 ${j}â¢height: var(${b}â¢24); 2091 ${zr}â¢size: var(${b}â¢14); 2092 ${te}â¢size: var(${b}â¢12); 2093 ${te}â¢sizeâ¢large: var(${b}â¢14); 2094 ${ye}â¢size: var(${b}â¢15); 2095 ${ye}â¢sizeâ¢large: var(${b}â¢18); 2096 ${Xe}â¢spacing: var(${b}â¢4); 2097 ${j}â¢spacing: var(${b}â¢8); 2098 ${j}â¢spacingâ¢square: var(${b}â¢6); 2099 ${jr}â¢radiusâ¢square: var(--arc-border-radius-md); 2100 } 2101 2102 /* Custom button overrides ⢠metrics based on size: 'inherit' */ 2103 &[arc-button=custom] { 2104 ${j}â¢fontâ¢weight: normal; 2105 ${jr}â¢radius: 0.25em; 2106 ${j}â¢height: auto; 2107 } 2108`,Lv=d` 2109 &[data-layout=hug] { 2110 ${j}â¢width: auto; 2111 ${j}â¢contentâ¢width: fit-content; 2112 } 2113 2114 &[data-layout=fill] { 2115 ${j}â¢display: flex; 2116 ${j}â¢width: 100%; 2117 ${j}â¢contentâ¢width: 0; 2118 } 2119
2120 &:not([data-layout=icon]) { 2121 ${te}â¢width: auto; 2122 } 2123 2124 &[data-layout=icon] { 2125 ${j}â¢aspectâ¢ratio: 1 / 1; 2126 ${j}â¢minâ¢width: min-content; 2127 ${j}â¢maxâ¢width: none; 2128 ${j}â¢spacing: var(${b}â¢0); 2129 2130 ${te}â¢width: 1.25em; 2131 2132 &[data-shape=narrow] { 2133 ${j}â¢aspectâ¢ratio: auto; 2134 ${j}â¢spacing: var(${b}â¢2); 2135 ${te}â¢width: auto; 2136 } 2137 } 2138 2139 &[data-shape=square] { 2140 ${j}â¢spacing: var(${j}â¢spacingâ¢square); 2141 } 2142 2143 &:is( 2144 [data-layout=icon]:not([data-shape]), 2145 [data-shape=square], 2146 [data-shape=narrow] 2147 ) { 2148 ${jr}â¢radius: var(${jr}â¢radiusâ¢square); 2149 } 2150 2151`,Dv=d` 2152 /** @mitigation ⢠when no variant is set (i.e.: 'custom' buttons) */ 2153 &:not([data-variant]) { 2154 ${B}: inherit; 2155 ${A}: transparent; 2156 ${gr}: transparent; 2157 ${B}â¢disabled: var(--arc-color-fg-disabled); 2158 } 2159 2160 /** @default */ 2161 &[data-variant=common] { 2162 ${jr}â¢width: var(${b}â¢1); 2163 ${zr}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2164 ${zr}â¢baseâ¢color: var(--arc-color-alpha-mid); 2165 2166 /** @default */ 2167 &:where([data-hierarchy=primary]) { 2168 ${B}: var(--arc-color-fg-on-theme-heavy); 2169 ${A}: var(--arc-color-bg-theme-heavy); 2170 ${gr}: transparent; 2171 2172 ${B}â¢active: var(--arc-color-fg-on-theme-mid); 2173 ${B}â¢processing: var(--arc-color-fg-on-theme-stark); 2174 ${B}â¢disabled: var(--arc-color-fg-disabled); 2175 2176 ${A}â¢hover: var(--arc-color-bg-theme-stark); 2177 ${A}â¢active: var(--arc-color-bg-theme-mid); 2178 ${A}â¢processing: var(--arc-color-bg-theme-stark); 2179 ${A}â¢disabled: var(--arc-color-bg-disabled); 2180 2181 ${zr}â¢progressâ¢color: var(--arc-color-mono-white); 2182 ${zr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2183 } 2184 2185 &:where([data-hierarchy=secondary]) { 2186 ${B}: var(--arc-color-fg-primary); 2187 ${A}: transparent; 2188 ${gr}: var(--arc-color-border-theme-heavy); 2189 2190 ${B}â¢active: var(--arc-color-fg-secondary); 2191 ${B}â¢processing: var(--arc-color-fg-secondary); 2192 ${B}â¢disabled: var(--arc-color-fg-disabled); 2193 2194 ${gr}â¢active: var(--arc-color-border-theme-mid); 2195 ${gr}â¢processing: var(--arc-color-border-theme-subtle); 2196 ${gr}â¢disabled: var(--arc-color-border-disabled); 2197 2198 ${A}â¢hover: var(--arc-color-bg-neutral-muted); 2199 ${A}â¢active: var(--arc-color-bg-neutral-subtle); 2200 ${A}â¢processing: transparent; 2201 ${A}â¢disabled: transparent; 2202 2203 &:where([data-layout=icon]) { 2204 ${gr}: var(--arc-color-border-mid); 2205 ${gr}â¢hover: var(--arc-color-border-stark); 2206 ${gr}â¢focus: var(--arc-color-border-mid); 2207 } 2208 2209 &:where([is-floating]) { 2210 ${A}: var(--arc-button-floating-bg); 2211 ${A}â¢processing: var(--arc-button-floating-bg-processing); 2212 ${A}â¢disabled: var(--arc-button-floating-bg-disabled); 2213 ${A}â¢focus: var(--arc-button-floating-bg-focus); 2214 ${A}â¢hover: var(--arc-button-floating-bg-hover); 2215 ${A}â¢active: var(--arc-button-floating-bg-active); 2216 } 2217 } 2218 2219 &:where([data-hierarchy=tertiary]) { 2220 ${B}: var(--arc-color-fg-primary); 2221 ${A}: transparent; 2222 ${gr}: transparent; 2223 2224 ${B}â¢active: var(--arc-color-fg-secondary); 2225 ${B}â¢processing: var(--arc-color-fg-secondary); 2226 ${B}â¢disabled: var(--arc-color-fg-disabled); 2227 2228 ${A}â¢hover: var(--arc-color-bg-neutral-muted); 2229 ${A}â¢active: var(--arc-color-bg-neutral-muted); 2230 ${A}â¢processing: var(--arc-color-bg-neutral-muted); 2231 } 2232 2233 &:where( 2234 [data-hierarchy=plain], 2235 [data-hierarchy=link-style] 2236 ) { 2237 ${B}: var(--arc-color-fg-primary); 2238 ${A}: transparent; 2239 ${gr}: transparent; 2240 2241 ${B}â¢hover: var(--arc-color-alpha-heavy); 2242 ${B}â¢active: var(--arc-color-alpha-heavy); 2243 ${B}â¢processing: var(--arc-color-alpha-heavy); 2244 ${B}â¢disabled: var(--arc-color-fg-disabled); 2245 2246 ${A}â¢hover: transparent; 2247 ${A}â¢active: transparent; 2248 ${A}â¢processing: transparent; 2249 } 2250 } 2251 2252`,Ov=d` 2253 &[data-variant=neutral] { 2254 ${jr}â¢width: var(${b}â¢1); 2255 ${zr}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2256 ${zr}â¢baseâ¢color: var(--arc-color-alpha-mid); 2257 2258 &:where([data-hierarchy=primary]) { 2259 ${B}: var(--arc-color-fg-primary); 2260 ${A}: transparent; 2261 ${gr}: var(--arc-color-border-mid); 2262 2263 ${B}â¢active: var(--arc-color-fg-secondary); 2264 ${B}â¢processing: var(--arc-color-fg-secondary); 2265 ${B}â¢disabled: var(--arc-color-fg-disabled); 2266 2267 ${A}â¢hover: var(--arc-color-bg-neutral-muted); 2268 ${A}â¢active: var(--arc-color-bg-neutral-subtle); 2269 ${A}â¢processing: transparent; 2270 ${A}â¢disabled: transparent; 2271 2272 &:where([is-floating]) { 2273 ${A}: var(--arc-button-floating-bg); 2274 ${A}â¢processing: var(--arc-button-floating-bg-processing); 2275 ${A}â¢disabled: var(--arc-button-floating-bg-disabled); 2276 ${A}â¢focus: var(--arc-button-floating-bg-focus); 2277 ${A}â¢hover: var(--arc-button-floating-bg-hover); 2278 ${A}â¢active: var(--arc-button-floating-bg-active); 2279 } 2280 } 2281 2282 &:where([data-hierarchy=secondary]) { 2283 ${B}: var(--arc-color-fg-neutral-stark); 2284 ${A}: transparent; 2285 ${gr}: var(--arc-color-border-mid); 2286 2287 ${B}â¢hover: var(--arc-color-fg-primary); 2288 ${B}â¢active: var(--arc-color-fg-secondary); 2289 ${B}â¢processing: var(--arc-color-fg-secondary); 2290 ${B}â¢disabled: var(--arc-color-fg-disabled); 2291 2292 ${gr}â¢disabled: var(--arc-color-border-disabled); 2293 2294 ${A}â¢hover: var(--arc-color-bg-neutral-muted); 2295 ${A}â¢active: var(--arc-color-bg-neutral-subtle); 2296 ${A}â¢processing: transparent; 2297 ${A}â¢disabled: transparent; 2298
2299 &:where([data-layout=icon]) { 2300 ${gr}: var(--arc-color-border-mid); 2301 ${gr}â¢hover: var(--arc-color-border-stark); 2302 ${gr}â¢focus: var(--arc-color-border-mid); 2303 } 2304 2305 &:where([is-floating]) { 2306 ${A}: var(--arc-button-floating-bg); 2307 ${A}â¢processing: var(--arc-button-floating-bg-processing); 2308 ${A}â¢disabled: var(--arc-button-floating-bg-disabled); 2309 ${A}â¢focus: var(--arc-button-floating-bg-focus); 2310 ${A}â¢hover: var(--arc-button-floating-bg-hover); 2311 ${A}â¢active: var(--arc-button-floating-bg-active); 2312 } 2313 } 2314 2315 &:where([data-hierarchy=tertiary]) { 2316 ${B}: var(--arc-color-fg-neutral-stark); 2317 ${A}: transparent; 2318 ${gr}: transparent; 2319 2320 ${B}â¢active: var(--arc-color-fg-secondary); 2321 ${B}â¢processing: var(--arc-color-fg-secondary); 2322 ${B}â¢disabled: var(--arc-color-fg-disabled); 2323 2324 ${A}â¢hover: var(--arc-color-bg-neutral-muted); 2325 ${A}â¢active: var(--arc-color-bg-neutral-subtle); 2326 ${A}â¢processing: var(--arc-color-bg-neutral-muted); 2327 } 2328 2329 &:where( 2330 [data-hierarchy=plain], 2331 [data-hierarchy=link-style] 2332 ) { 2333 ${B}: var(--arc-color-fg-neutral-stark); 2334 ${A}: transparent; 2335 ${gr}: transparent; 2336 2337 ${B}â¢hover: var(--arc-color-fg-primary); 2338 ${B}â¢active: var(--arc-color-fg-neutral-mid); 2339 ${B}â¢processing: var(--arc-color-fg-secondary); 2340 ${B}â¢disabled: var(--arc-color-fg-disabled); 2341 2342 ${A}â¢hover: transparent; 2343 ${A}â¢active: transparent; 2344 ${A}â¢processing: transparent; 2345 } 2346 } 2347 2348`,Bv=d` 2349 &[data-variant=ai] { 2350 ${B}â¢disabled: var(--arc-color-fg-disabled); 2351 ${gr}â¢disabled: var(--arc-color-border-disabled); 2352 ${jr}â¢width: var(${b}â¢2); 2353 2354 ${_e}â¢bg: var(--arc-gradient-ai-200); 2355 ${_e}â¢disabled: var(--arc-color-border-disabled); 2356 ${_e}â¢processing: var(--arc-gradient-ai-100); 2357 2358 &:where([data-hierarchy=primary]) { 2359 ${B}: var(--arc-color-fg-on-theme-stark); 2360 ${A}: var(--arc-button-gradient-ai-500) padding-box; 2361 ${gr}: transparent; 2362 2363 ${B}â¢active: var(--arc-color-fg-neutral-mid); 2364 ${B}â¢processing: var(--arc-color-fg-on-theme-heavy); 2365 ${B}â¢hover: var(--arc-color-fg-on-theme-heavy); 2366 2367 ${A}â¢hover: var(--arc-button-gradient-ai-400) padding-box; 2368 ${A}â¢active: var(--arc-button-gradient-ai-600) padding-box; 2369 ${A}â¢processing: var(--arc-button-gradient-ai-400) padding-box; 2370 ${A}â¢disabled: var(--arc-color-bg-disabled) padding-box; 2371 2372 ${zr}â¢progressâ¢color: var(--arc-color-mono-white); 2373 ${zr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2374 2375 ${_e}â¢hover: var(--arc-gradient-ai-200); 2376 ${_e}â¢active: var(--arc-gradient-ai-200); 2377 } 2378 2379 &:where([data-hierarchy=secondary]) { 2380 ${B}: var(--arc-color-fg-primary); 2381 ${A}: var(--arc-button-gradient-ai-transparent) padding-box; /* allows subtle transition of bg-color through the transparent parts of the gradient */ 2382 ${gr}: transparent; 2383 2384 ${B}â¢active: var(--arc-color-fg-neutral-stark); 2385 ${B}â¢processing: var(--arc-color-fg-primary); 2386 2387 ${A}â¢hover: var(--arc-button-gradient-ai-50) padding-box; 2388 ${A}â¢focus: var(--arc-button-gradient-ai-50) padding-box; 2389 ${A}â¢active: var(--arc-button-gradient-ai-50) padding-box; 2390 ${A}â¢processing: var(--arc-button-gradient-ai-50) padding-box; 2391 ${A}â¢disabled: var(--arc-color-bg-disabled) padding-box; 2392 2393 ${zr}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2394 2395 ${_e}â¢hover: var(--arc-gradient-ai-300); 2396 ${_e}â¢active: var(--arc-gradient-ai-100); 2397 2398 &:where([is-floating]) { 2399 ${A}: var(--arc-button-ai-floating-bg) padding-box; 2400 } 2401 } 2402 } 2403 2404`,Nv=d` 2405 &[data-variant=alpha] { 2406 ${jr}â¢width: var(${b}â¢1); 2407 ${zr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2408 2409 &:where([data-hierarchy=primary]) { 2410 ${B}: var(--arc-color-mono-black); 2411 ${A}: var(--arc-color-mono-white); 2412 ${gr}: transparent; 2413 2414 ${B}â¢focus: var(--arc-color-mono-black); 2415 ${B}â¢active: var(--arc-color-alpha-black-60); 2416 ${B}â¢processing: var(--arc-color-mono-black); 2417 ${B}â¢disabled: var(--arc-color-alpha-black-60); 2418 2419 ${A}â¢hover: var(--arc-color-alpha-white-70); 2420 ${A}â¢active: var(--arc-color-alpha-white-40); 2421 ${A}â¢processing: var(--arc-color-alpha-white-40); 2422 ${A}â¢disabled: var(--arc-color-alpha-white-15); 2423 } 2424 2425 &:where([data-hierarchy=secondary]) { 2426 ${B}: var(--arc-color-alpha-white-95); 2427 ${A}: transparent; 2428 ${gr}: var(--arc-color-alpha-white-80); 2429 2430 ${B}â¢active: var(--arc-color-alpha-white-80); 2431 ${B}â¢processing: var(--arc-color-alpha-white-95); 2432 ${B}â¢disabled: var(--arc-color-alpha-white-50); 2433 2434 ${A}â¢hover: var(--arc-color-alpha-white-20); 2435 ${A}â¢active: var(--arc-color-alpha-white-40); 2436 ${A}â¢processing: var(--arc-color-alpha-white-25); 2437 ${A}â¢disabled: transparent; 2438 2439 ${gr}â¢hover: var(--arc-color-alpha-white-100); 2440 ${gr}â¢focus: var(--arc-color-alpha-white-80); 2441 ${gr}â¢active: var(--arc-color-alpha-white-50); 2442 ${gr}â¢processing: transparent; 2443 ${gr}â¢disabled: var(--arc-color-alpha-white-30); 2444 } 2445 2446 &:where([data-hierarchy=tertiary]) { 2447 ${B}: var(--arc-color-alpha-white-95); 2448 ${A}: transparent; 2449 ${gr}: transparent; 2450 2451 ${B}â¢active: var(--arc-color-alpha-black-60); 2452 ${B}â¢processing: var(--arc-color-alpha-white-95); 2453 ${B}â¢disabled: var(--arc-color-alpha-white-50); 2454 2455 ${A}â¢hover: var(--arc-color-alpha-white-20); 2456 ${A}â¢active: var(--arc-color-alpha-white-40); 2457 ${A}â¢processing: var(--arc-color-alpha-white-20); 2458 ${A}â¢disabled: transparent; 2459 } 2460 2461 &:where( 2462 [data-hierarchy=plain], 2463 [data-hierarchy=link-style] 2464 ) { 2465 ${B}: var(--arc-color-alpha-white-95); 2466 ${A}: transparent; 2467 ${gr}: transparent; 2468 2469 ${B}â¢hover: var(--arc-color-alpha-white-60); 2470 ${B}â¢active: var(--arc-color-alpha-white-40); 2471 ${B}â¢processing: var(--arc-color-alpha-white-95); 2472 ${B}â¢disabled: var(--arc-color-alpha-white-30); 2473 } 2474 } 2475`,Fv=d` 2476 &[data-variant=critical] { 2477 ${jr}â¢width: var(${b}â¢1); 2478 ${zr}â¢progressâ¢color: var(--arc-color-border-brand-mid); 2479 2480 &:where([data-hierarchy=primary]) { 2481 ${B}: var(--arc-color-fg-on-stark); 2482 ${A}: var(--arc-color-bg-critical-stark); 2483 ${gr}: transparent; 2484 2485 ${B}â¢active: var(--arc-color-fg-critical-subtle); 2486 ${B}â¢processing: var(--arc-color-fg-on-heavy); 2487 ${B}â¢disabled: var(--arc-color-fg-disabled); 2488 2489 ${A}
2489â¢hover: var(--arc-color-bg-critical-heavy); 2490 ${A}â¢active: var(--arc-color-bg-critical-heavy); 2491 ${A}â¢processing: var(--arc-color-bg-critical-heavy); 2492 ${A}â¢disabled: var(--arc-color-bg-disabled); 2493 2494 ${zr}â¢progressâ¢color: var(--arc-color-mono-white); 2495 ${zr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2496 } 2497 2498 &:where([data-hierarchy=secondary]) { 2499 ${B}: var(--arc-color-fg-critical-stark); 2500 ${A}: transparent; 2501 ${gr}: var(--arc-color-border-critical-stark); 2502 2503 ${B}â¢active: var(--arc-color-fg-critical-subtle); 2504 ${B}â¢processing: var(--arc-color-fg-critical-stark); 2505 ${B}â¢disabled: var(--arc-color-fg-disabled); 2506 2507 ${A}â¢hover: var(--arc-button-critical-bg-hover); 2508 ${A}â¢active: var(--arc-color-bg-critical-muted); 2509 ${A}â¢disabled: transparent; 2510 2511 ${gr}â¢active: var(--arc-color-border-critical-subtle); 2512 ${gr}â¢processing: var(--arc-color-border-critical-stark); 2513 ${gr}â¢disabled: var(--arc-color-border-disabled); 2514 2515 /* "floating" button mitigation */ 2516 &:where([is-floating]) { 2517 ${A}: var(--arc-button-floating-bg); 2518 ${A}â¢processing: var(--arc-button-floating-bg-processing); 2519 ${A}â¢disabled: var(--arc-button-floating-bg-disabled); 2520 ${A}â¢focus: var(--arc-button-floating-bg-focus); 2521 2522 ${A}â¢hover: var(--arc-button-critical-floating-bg-hover); 2523 ${A}â¢active: var(--arc-button-critical-floating-bg-active); 2524 } 2525 } 2526 2527 &:where([data-hierarchy=tertiary]) { 2528 ${B}: var(--arc-color-fg-critical-stark); 2529 ${A}: transparent; 2530 ${gr}: transparent; 2531 2532 ${B}â¢active: var(--arc-color-fg-critical-subtle); 2533 ${B}â¢processing: var(--arc-color-fg-critical-stark); 2534 ${B}â¢disabled: var(--arc-color-fg-disabled); 2535 2536 ${A}â¢hover: var(--arc-button-critical-bg-hover); 2537 ${A}â¢active: var(--arc-color-bg-critical-subtle); 2538 ${A}â¢processing: var(--arc-color-bg-critical-muted); 2539 ${A}â¢disabled: transparent; 2540 } 2541 2542 &:where( 2543 [data-hierarchy=plain], 2544 [data-hierarchy=link-style] 2545 ) { 2546 ${B}: var(--arc-color-fg-critical-stark); 2547 ${A}: transparent; 2548 ${gr}: transparent; 2549 2550 ${B}â¢hover: var(--arc-color-fg-critical-mid); 2551 ${B}â¢active: var(--arc-color-fg-critical-subtle); 2552 ${B}â¢processing: var(--arc-color-fg-critical-stark); 2553 ${B}â¢disabled: var(--arc-color-fg-disabled); 2554 } 2555 } 2556`,Hv=d` 2557 /** 2558 * @deprecated ⢠restores solid bg for legacy \`variant="secondary"\` / \`variant="secondary-inverse"\` usage, 2559 * which now map to \`data-variant=common data-hierarchy=secondary\` (transparent by default). 2560 */ 2561 &[is-deprecated=secondary]:not([is-floating]) { 2562 ${A}: var(--arc-color-mono-white); 2563 ${A}â¢hover: var(--arc-color-bg-neutral-muted); 2564 ${A}â¢active: var(--arc-color-bg-neutral-subtle); 2565 ${A}â¢processing: var(--arc-color-mono-white); 2566 ${A}â¢disabled: var(--arc-color-mono-white); 2567 ${A}â¢focus: var(--arc-color-alpha-white-3); 2568 } 2569 2570 &[is-deprecated=secondary-inverse]:not([is-floating]) { 2571 ${A}: transparent; 2572 ${A}â¢hover: var(--arc-color-bg-neutral-muted); 2573 ${A}â¢active: var(--arc-color-bg-neutral-subtle); 2574 ${A}â¢processing: transparent; 2575 ${A}â¢disabled: transparent; 2576 ${A}â¢focus: var(--arc-color-alpha-white-3); 2577 } 2578`,Vv=d` 2579 /** @overrides all variants when is onMedia (allows 'ai' gradient border) */ 2580 &[is-on-media] { 2581 ${zr}â¢progressâ¢color: var(--arc-color-mono-white); 2582 ${zr}â¢baseâ¢color: var(--arc-color-alpha-white-30); 2583 2584 ${B}: var(--arc-color-mono-black); 2585 ${A}: var(--arc-color-alpha-white-70); 2586 ${gr}: var(--arc-color-alpha-black-15); 2587 2588 ${B}â¢active: var(--arc-color-alpha-black-50); 2589 ${B}â¢processing: var(--arc-color-alpha-black-50); 2590 ${B}â¢disabled: var(--arc-color-alpha-black-40); 2591 2592 ${A}â¢hover: var(--arc-color-alpha-white-90); 2593 ${A}â¢focus: var(--arc-color-alpha-white-70); 2594 ${A}â¢active: var(--arc-color-alpha-white-70); 2595 ${A}â¢disabled: var(--arc-color-alpha-white-60); 2596 ${A}â¢processing: var(--arc-color-alpha-white-60); 2597 2598 ${gr}â¢active: var(--arc-color-alpha-black-10); 2599 ${gr}â¢disabled: var(--arc-color-alpha-black-10); 2600 } 2601`,Gv=d` 2602 ${j}â¢color: var(${B}); 2603 ${j}â¢background: var(${A}); 2604 ${j}â¢fontâ¢weight: var(--arc-font-weight-600); 2605 ${j}â¢cursor: var(--arc-button-cursor, pointer); 2606 ${j}â¢padding: 0 var(${j}â¢spacing); 2607 ${j}â¢contentâ¢opacity: 1; 2608 2609 /** 2610 * @note: new spacing between label and icon 2611 * '--arc-button-gap' is @deprecated ⢠this was the 'gap' at the [arc-button-content] level
2612 * '--arc-button-inline-spacing' is @preferred over '--arc-button-gap' 2613 */ 2614 ${Xe}â¢padding: var(--arc-button-inline-spacing, var(--arc-button-gap, var(${Xe}â¢spacing))); 2615 2616 /** 2617 * @note: default is 'inherit' so it can inherit from button's size. 2618 * The 'size="inherit"' sets the button's font-size to 1em, 2619 * and sets the label font-size to 0.875em (or 14px at 100%) to 2620 * match the default button's text size. This allows the label 2621 * to still remain scalable by the parent container's font-size. 2622 */ 2623 ${Xe}â¢fontâ¢size: inherit; 2624 2625 /** 2626 * @note: Transforms variant-dependent '${jr}â¢width' into '${jr}â¢size' 2627 * which is also used for inset/padding on the AI Button's [arc-button-mask] sizing. 2628 */ 2629 ${jr}â¢size: var(--arc-button-border-width, var(${jr}â¢width)); 2630 2631 ${jr}â¢color: var(${gr}); 2632 ${jr}: var(${jr}â¢size) solid var(${jr}â¢color, transparent); 2633 ${jr}â¢radius: var(--arc-border-radius-pill); 2634 2635 ${Wt}: var(--arc-border-width-md) solid var(${Wt}â¢color, transparent); 2636 ${Wt}â¢offset: var(--arc-border-width-md); 2637 2638 /* spinner svg style controls */ 2639 ${zr}â¢progressâ¢color: var(--arc-button-progress-color, var(--arc-color-mono-white, currentcolor)); 2640 ${zr}â¢circleâ¢color: var(--arc-button-color, var(${zr}â¢baseâ¢color, var(--arc-color-alpha-mid))); 2641 ${zr}â¢circleâ¢opacity: var(--arc-alpha-100); 2642 2643 ${j}â¢transition: 2644 background 0.2s ease-out, 2645 color 0.2s ease-out, 2646 height 0.2s ease-out, 2647 border-color 0.2s ease-out, 2648 outline-color 0.2s ease-out, 2649 opacity 0.2s ease-out, 2650 box-shadow 0.2s ease-out; 2651 2652 &[data-hierarchy=link-style] { 2653 [arc-button-label] { 2654 text-decoration: var(--arc-link-text-decoration, underline); 2655 text-decoration-color: currentcolor; 2656 } 2657 2658 [arc-button-icon] { 2659 text-decoration: none; 2660 } 2661 } 2662 2663 /* Inter-Component Communication ⢠ArcIcon -----------------------⢠*/ 2664 2665 --arc-icon-size: var(${te}â¢size); 2666 2667 ${ye}â¢width: var(${ye}â¢size); 2668 2669 &[has-large-icon] { 2670 --arc-icon-size: var(${te}â¢sizeâ¢large); 2671 2672 [arc-button-icon]:has(svg) { 2673 ${ye}â¢width: var(${ye}â¢sizeâ¢large); 2674 } 2675 } 2676 2677 /* Inter-Component Communication ⢠ArcSpinner --------------------⢠*/ 2678 2679 --arc-spinner-size: var(${zr}â¢size); 2680 --arc-spinner-progress-color: var(${zr}â¢progressâ¢color); 2681 --arc-spinner-circle-color: var(${zr}â¢circleâ¢color); 2682 --arc-spinner-circle-opacity: var(${zr}â¢circleâ¢opacity); 2683 --arc-spinner-position: var(${zr}â¢position, absolute); 2684 --arc-spinner-inset: var(${zr}â¢inset, 50% auto auto 50%); 2685 --arc-spinner-translate: var(${zr}â¢translate, -50% -50%); 2686 2687`,Uv=d` 2688 &:is( 2689 [is-processing], 2690 [is-processing-with-text], 2691 :has([arc-button-mask]), 2692 :has(input), 2693 ) { 2694 ${j}â¢position: relative; 2695 } 2696 2697 &[is-disabled] { 2698 ${j}â¢color: var(${B}â¢disabled, var(${B})); 2699 ${j}â¢background: var(${A}â¢disabled, var(${A})); 2700 ${jr}â¢color: var(${gr}â¢disabled, var(${gr})); 2701 ${j}â¢opacity: var(--arc-button-disabled-opacity, unset); 2702 ${j}â¢cursor: var(--arc-button-disabled-cursor, not-allowed); 2703 ${_e}â¢bg: var(${_e}â¢disabled); 2704 } 2705 2706 &:not( 2707 [is-disabled], 2708 [is-processing], 2709 [is-processing-with-text] 2710 ) { 2711 &:where( 2712 :hover, 2713 [data-simulate=hover] 2714 ) { 2715 ${j}â¢color: var(${B}â¢hover, var(${B})); 2716 ${j}â¢background: var(${A}â¢hover, var(${A})); 2717 ${jr}â¢color: var(${gr}â¢hover, var(${gr})); 2718 ${_e}â¢bg: var(${_e}â¢hover); 2719 } 2720 2721 &:is( 2722 :active, 2723 [is-active], 2724 [data-simulate=active] 2725 ) { 2726 ${j}â¢color: var(${B}â¢active, var(${B})); 2727 ${j}â¢background: var(${A}â¢active, var(${A})); 2728 ${jr}â¢color: var(${gr}â¢active, var(${gr})); 2729 ${_e}â¢bg: var(${_e}â¢active); 2730 } 2731 } 2732 2733 &[is-processing] { 2734 ${j}â¢contentâ¢visibility: hidden; 2735 ${j}â¢contentâ¢opacity: 0; 2736 2737 /* spinner svg position controls */ 2738 ${zr}â¢position: absolute; 2739 ${zr}â¢inset: 50% auto auto 50%; 2740 ${zr}â¢translate: -50% -50%; 2741 } 2742 2743 &[is-processing-with-text] { 2744 ${j}â¢contentâ¢visibility: visible; 2745 2746 /* spinner svg position controls */ 2747 ${zr}â¢position: relative; 2748 ${zr}â¢inset: 0; 2749 ${zr}â¢translate: 0; 2750 ${zr}â¢size: 1lh; 2751 } 2752 2753 &:is(
2754 [is-processing], 2755 [is-processing-with-text] 2756 ) { 2757 ${j}â¢opacity: var(--arc-button-processing-opacity, unset); 2758 ${j}â¢cursor: var(--arc-button-processing-cursor, default); 2759 ${_e}â¢bg: var(${_e}â¢processing); 2760 2761 ${j}â¢color: var(${B}â¢processing, var(${B})); 2762 ${j}â¢background: var(${A}â¢processing, var(${A})); 2763 ${jr}â¢color: var(${gr}â¢processing, var(${gr})); 2764 } 2765 2766 &:is( 2767 :where(:focus, :focus-within):focus-visible, 2768 [data-simulate=focus] 2769 ) { 2770 ${j}â¢color: var(${B}â¢focus, var(${B})); 2771 ${j}â¢background: var(${A}â¢focus, var(${A})); 2772 ${jr}â¢color: var(${gr}â¢focus, var(${gr})); 2773 ${Wt}â¢color: var(--arc-button-outline-color, var(--arc-color-border-focus)); 2774 2775 * { 2776 outline: none; 2777 } 2778 } 2779 2780`,Kv=d` 2781@layer arc-components { 2782 2783 /* Shared defaults from _Internal/Components.css.js */ 2784 ${Pv} 2785 2786 :where([arc-button]) { 2787 /* SETUP -------------------------------------------------------⢠*/ 2788 ${Mv} 2789 ${Lv} 2790 ${Dv} 2791 ${Hv} 2792 ${Ov} 2793 ${Bv} 2794 ${Nv} 2795 ${Fv} 2796 ${Vv} 2797 2798 /* CORE VARIABLES ----------------------------------------------⢠*/ 2799 ${Gv} 2800 ${Uv} 2801 2802 /* CONTEXT OVERRIDES -------------------------------------------⢠*/ 2803 &[is-floating] { 2804 ${j}â¢position: fixed; 2805 ${j}â¢margin: 0; 2806 ${j}â¢z-index: 1000; 2807 } 2808 2809 /* "floating" button mitigation */ 2810 &:where([arc-shadow], [is-floating]) { 2811 backdrop-filter: var(--arc-button-backdrop-filter, blur(0.375em)); 2812 } 2813 2814 /* Plain & Link-style button structural overrides */ 2815 &:is( 2816 [data-hierarchy=plain], 2817 [data-hierarchy=link-style] 2818 ) { 2819 ${Xe}â¢padding: unset; 2820 ${j}â¢padding: unset; 2821 ${j}â¢height: unset; 2822 ${jr}â¢radius: var(--arc-border-radius-md); 2823 2824 [arc-button-content] { 2825 gap: var(--arc-button-inline-spacing, var(${Xe}â¢spacing)); 2826 } 2827 } 2828 2829 &:where([data-hierarchy=link-style]) { 2830 ${j}â¢fontâ¢weight: inherit; 2831 ${j}â¢textâ¢decoration: none; 2832 } 2833 2834 /* Custom button structural overrides */ 2835 &[arc-button=custom] { 2836 ${j}â¢padding: unset; 2837 2838 [arc-button-content] { 2839 gap: 0.5em; 2840 } 2841 2842 [arc-button-label] { 2843 display: contents; 2844 } 2845 } 2846 2847 /* CORE STYLES -------------------------------------------------⢠*/ 2848 appearance: none; 2849 cursor: var(--arc-button-cursor, var(${j}â¢cursor)); 2850 position: var(--arc-button-position, var(${j}â¢position, unset)); 2851 transition: var(--arc-button-transition, var(${j}â¢transition)); 2852 z-index: var(--arc-button-z-index, var(${j}â¢z-index, unset)); 2853 inset: var(--arc-button-inset, var(--jsâ¢inset, unset)); 2854 2855 /* FOOTPRINT */ 2856 font: inherit; 2857 font-weight: var(--arc-button-font-weight, var(${j}â¢fontâ¢weight)); 2858 font-size: var(--arc-button-font-size, var(${j}â¢fontâ¢size, inherit)); 2859 padding: var(--arc-button-padding, var(${j}â¢padding)); 2860 margin: var(--arc-button-margin, var(${j}â¢margin, unset)); 2861 2862 width: var(--arc-button-width, var(${j}â¢width, auto)); 2863 min-width: var(--arc-button-min-width, var(${j}â¢minâ¢width, unset)); 2864 max-width: var(--arc-button-max-width, var(${j}â¢maxâ¢width, 100%)); 2865 2866 height: var(--arc-button-height, var(${j}â¢height, auto)); 2867 min-height: var(--arc-button-min-height, var(${j}â¢minâ¢height, unset)); 2868 max-height: var(--arc-button-max-height, var(${j}â¢maxâ¢height, unset)); 2869 2870 aspect-ratio: var(--arc-button-aspect-ratio, var(${j}â¢aspectâ¢ratio, unset)); 2871 2872 /* VARIANT THEME APPLIED ---------------------------------------⢠*/ 2873 2874 color: var(--arc-button-color, var(${j}â¢color)); 2875 background: var(--arc-button-background, var(${j}â¢background)); 2876 border: var(--arc-button-border, var(${jr})); 2877 border-radius: var(--arc-button-border-radius, var(${jr}â¢radius)); 2878 2879 opacity: var(--arc-button-opacity, 1); 2880 2881 outline: var(--arc-button-outline, var(${Wt})); 2882 outline-offset: var(--arc-button-outline-offset, var(${Wt}â¢offset)); 2883 overflow: var(--arc-button-overflow, unset); 2884 2885 /* shadow concession for buttons not already using 'arc-shadow' util */ 2886 &:not([arc-shadow]) {
2887 box-shadow: var(--arc-button-box-shadow, unset); 2888 } 2889 2890 &[href] { 2891 text-decoration: var(--arc-button-text-decoration, none); 2892 } 2893 2894 /* INNER-ELEMENTS ----------------------------------------------⢠*/ 2895 [arc-button-content] { 2896 flex: 1; 2897 2898 display: flex; 2899 align-items: var(--arc-button-align-items, center); 2900 justify-content: var(--arc-button-justify-content, center); 2901 2902 opacity: var(--arc-button-content-opacity, var(${j}â¢contentâ¢opacity)); 2903 visibility: var(--arc-button-content-visibility, var(${j}â¢contentâ¢visibility, inherit)); 2904 pointer-events: var(--arc-button-content-pointer-events, none); 2905 2906 width: var(--arc-button-content-width, var(${j}â¢contentâ¢width, auto)); 2907 max-width: var(--arc-button-content-max-width, 100%); 2908 overflow: var(--arc-button-content-overflow, visible); 2909 2910 transition: var(--arc-button-content-transition, inherit); 2911 2912 line-height: normal; 2913 user-select: none; 2914 } 2915 2916 [arc-button-label] { 2917 font-size: var(--arc-button-label-font-size, var(${Xe}â¢fontâ¢size)); 2918 overflow: var(--arc-button-label-overflow, clip); 2919 text-overflow: var(--arc-button-label-text-overflow, ellipsis); 2920 white-space: var(--arc-button-label-white-space, nowrap); 2921 max-width: var(--arc-button-label-max-width, 100%); 2922 opacity: var(--arc-button-label-opacity, var(${j}â¢opacity)); 2923 transition: var(--arc-button-label-transition, inherit); 2924 padding-inline: var(${Xe}â¢padding); 2925 } 2926 2927 [arc-button-icon] { 2928 /** @note: override to ensure auto-width is applied to button icons This protects the 2929 * intended "gap" (now 'padding-inline' on the label) between icon and label */ 2930 --fa-width: var(${te}â¢width); 2931 2932 flex: none; 2933 2934 display: flex; 2935 align-items: center; 2936 justify-content: center; 2937 width: var(--arc-button-icon-width, var(${te}â¢width)); 2938 min-width: 1em; 2939 2940 opacity: var(--arc-button-icon-opacity, var(${j}â¢opacity)); 2941 transition: var(--arc-button-icon-transition, inherit); 2942 2943 &:has(svg) { 2944 ${te}â¢width: var(--arc-button-svg-width, var(${ye}â¢width)); 2945 } 2946 2947 svg { 2948 width: 100%; 2949 height: 100%; 2950 } 2951 } 2952 2953 [arc-button-mask] { 2954 pointer-events: none; 2955 position: absolute; 2956 inset: calc(var(${jr}â¢size) * -1); 2957 padding: var(${jr}â¢size); 2958 background: var(${_e}â¢bg); 2959 mask: linear-gradient(black, black) content-box exclude, linear-gradient(black, black); 2960 border-radius: var(--arc-button-border-radius, var(${jr}â¢radius)); 2961 transition: var(--arc-button-transition, inherit); 2962 } 2963 2964 input { 2965 position: absolute; 2966 opacity: 0; 2967 scale: 0.1; 2968 } 2969 } 2970 2971 [arc-button]:not([hidden]) { 2972 flex: var(--arc-button-flex, unset); 2973 display: var(--arc-button-display, var(${j}â¢display, inline-flex)); 2974 align-items: center; 2975 justify-content: center; 2976 } 2977 2978} 2979`,hu=(0,i.jsx)(is,{}),Wv=(0,i.jsx)("span",{"arc-button-mask":""}),Xv=!!s.version.startsWith("18"),qv=r=>r===void 0||r===!1?{isFloating:!1}:r===!0?{isFloating:!0}:{isFloating:!0,inset:r.inset},Yv=({popoverTarget:r,popoverTargetAction:e})=>Xv?{popovertarget:r??void 0,popovertargetaction:e??void 0}:{popoverTarget:r??void 0,popoverTargetAction:e??void 0},Br=(0,s.forwardRef)(({children:r,disabled:e,...a},t)=>{const o=(0,s.useRef)(null),{_isCustom:n,iconEnd:c,iconStart:l,icon:u,text:h,isActive:p,isDisabled:f,isProcessing:g,isProcessingWithText:v,hasLargeIcon:m,tag:y,href:S,type:k,title:w,layout:z,shape:x,size:_="lg",variant:P="common",hierarchy:R="primary",scheme:U="auto",shadow:T,onMedia:L,isOnMedia:G,floating:I,isInverse:H=!1,...V}=a,{isFloating:er,inset:O}=qv(I),J=G??L,nr=y??(S?"a":"button"),sr=nr==="button"?k||"button":void 0,yr=z==="icon",q=v||g||f||e,tr=V?.["aria-disabled"]||q||void 0,Mr=n?void 0:lu({variant:P}),dr=n?void 0:du({variant:P,hierarchy:R}),br=!n&&ms(P)?P:void 0,hr=n?void 0:iu({shape:x}),pr=n?"inherit":_,vr=mv({layout:z,isFloating:er}),kr=vv({isFloating:er,isOnMedia:J,shadow:T}),K=uu({variant:P,isInverse:H,scheme:U}),or=!yr&&(r||h),C=v&&hu||l||u,$=!yr&&(v&&!(l||u)?void 0:c),N=(g||v&&yr)&&hu,ar=Mr==="ai"?Wv:void 0,{tooltip:E,...F}=V,Y=Ht(E)?E:void 0,ir=a.tooltip??Y,wr=!!ir,Lr=Ht(ir)?{text:ir}:ir,re=V["aria-describedby"],He=Or(void 0,"arc-tooltip"),Ie=a.id?`${a.id}-tooltip`:He,ce=wr?Ie:void 0,Re=wr?Ro([re,ce]):re,{anchorName:Ve,style:aa,popoverTarget:ie,popoverTargetAction:je,...ee}=F,Ge=ie?Mo(String(Ve||a?.id)):void 0,Ue=wr?Mo(String(ce)):void 0,Ke=kd(aa)?aa:void 0,jt=Ke&&"anchorName"in Ke&&Ke.anchorName,wi=[...(Ht(jt)?Ud(jt,", "):[]).map(Mo),...Ge?[Ge]:[],...Ue?[Ue]:[]],Mt=Ro(wi,1/0,", "),xo=Ke!=null&&"inset"in Ke&&Ke.inset!==void 0&&Ke.inset!==null&&Ke.inset!=="",Bn={...Ke??{},...Mt?{anchorName:Mt}:{},...O!==void 0&&!xo?{"--js\u2022inset":O}:{}},La=Yv({popoverTarget:ie||void 0,popoverTargetAction:je||void 0}),Si=(0,s.useCallback)(ko=>{o.current=ko,oa(t,ko)},[t]);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(nr,{...ee,...La,ref:Si,"arc-button":n?"custom"
2979:"","arc-scheme":K,"arc-shadow":kr||void 0,disabled:!S&&q||void 0,href:S||void 0,title:wr?void 0:w||void 0,type:sr,"data-layout":vr,"data-shape":hr,"data-size":pr,"data-variant":Mr,"data-hierarchy":dr,"has-large-icon":m?"":void 0,"is-deprecated":br,"is-floating":er?"":void 0,"is-on-media":J?"":void 0,"is-active":p?"":void 0,"is-processing":g||v&&yr?"":void 0,"is-processing-with-text":v&&!yr?"":void 0,"is-disabled":q||tr?"":void 0,"aria-disabled":tr,"aria-describedby":Re||void 0,style:Bn,children:[(0,i.jsxs)("span",{"arc-button-content":"",children:[!!C&&(0,i.jsx)("span",{"arc-button-icon":"",children:typeof C=="string"?(0,i.jsx)(Ar,{icon:C}):C}),!!or&&(0,i.jsx)("span",{"arc-button-label":"",children:or}),!!$&&(0,i.jsx)("span",{"arc-button-icon":"",children:typeof $=="string"?(0,i.jsx)(Ar,{icon:$}):$})]}),N,ar]}),wr&&(0,i.jsx)(mc,{...Lr,id:ce,alternateAnchor:Lr?.alternateAnchor??(()=>o.current),anchorName:Ue})]})});Br.displayName="ArcButton",Cr("ArcButton",Kv);const Go=(0,s.forwardRef)((r,e)=>(0,i.jsx)(Br,{...r,ref:e,"arc-popover-button":""})),pu=({isInverse:r=!1,isOpen:e,...a})=>(0,i.jsx)(Br,{icon:"fa-regular fa-xmark",text:"Dismiss",...a,layout:"icon",shape:"square",size:"sm",variant:"common",hierarchy:"tertiary",isInverse:r,"arc-popover-dismiss":""}),Zv=({isInverse:r=!1,...e})=>(0,i.jsx)(Br,{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":""}),Jv=({children:r,isSticky:e,showDivider:a,showDismiss:t,dismissProps:o,showGoBack:n,goBackProps:c,headerSlotEnd:l,tag:u="header",...h})=>(0,i.jsx)(u,{...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)(Zv,{...c}),r]}),(0,i.jsxs)("div",{"arc-popover-header-slot":"end",children:[l,t&&(0,i.jsx)(pu,{...o})]})]})}),Qv=({children:r,tag:e="article",...a})=>(0,i.jsx)(e,{...a,"arc-popover-body":"",children:(0,i.jsx)("div",{"arc-popover-display":"",children:r})}),rf=({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})});Go.displayName="ArcPopoverButton";const X=d`--arc-popover`,xe=d`--arcâ¢popover`,lr=d`--arcâ¢trailâ¢mix`,bs=d`${xe}â¢radius`,ef=d`${xe}â¢content`,$c=d`${xe}â¢outline`,xr=d`${xe}â¢offset`,Aa=d`${xe}â¢header`,af=d`${xe}â¢body`,$s=d`${xe}â¢divider`,yc=d`${xe}â¢footer`,$a=d`${xe}â¢tail`,Er=d`${$a}â¢top`,_r=d`${$a}â¢left`,Uo=d`${$a}â¢size`,ke=d`${$a}â¢x`,we=d`${$a}â¢y`,ys=d`${xe}â¢fontâ¢size`,xc=d`${xe}â¢padding`,Fr=d`${xe}â¢margin`,Xt=d`${Aa}â¢padding`,ia=d`${af}â¢padding`,za=d`${yc}â¢padding`,gu=d`${xe}â¢fg`,kc=d`${xe}â¢bg`,wc=d`${ef}â¢bg`,Sc=d`${$a}â¢fillâ¢a`,Cc=d`${$a}â¢fillâ¢b`,Ac=d`${$a}â¢edgeâ¢a`,zc=d`${$a}â¢edgeâ¢b`,tf=d` 2980 2981 ${xe}â¢fallback: none; 2982 ${$c}: var(${X}-outline-size, var(--arc-border-width-md)); 2983 ${bs}: var(${X}-border-radius, var(--arc-border-radius-lg)); 2984 ${xr}: var(${X}-offset, var(--jsâ¢offset, 0px)); 2985 2986 /* space & padding */ 2987 ${xc}: 0.875em; 2988 2989 /* tail metrics - starts at defaults for anchor-at='bottom-start' */ 2990 ${lr}: 47.5%; /* mix-ratio for tail to match gradient outline for: 'popover[variant=ai]' */ 2991 ${ke}: var(${X}-tail-x, 1.75em); 2992 ${we}: var(${X}-tail-y, 1.125em); 2993 ${Uo}: 0px; 2994 2995 &:where([has-tail]) { 2996 ${Uo}: var(${X}-tail-size, var(--jsâ¢tail, 8px)); 2997 2998 /* offset calculation magic number - 'sqrt(2) / 2' for half of 45° rotated tailSize */ 2999 ${xr}: calc(var(${X}-offset, var(--jsâ¢offset, 0px)) + var(${Uo}) * (sqrt(2) / 2)); 3000 } 3001 3002 &:has([arc-popover-body]) { 3003 ${xc}: 0;
3004 &:has([arc-popover-header]:not([has-divider])) { ${ia}â¢blockâ¢start: 0; } 3005 &:has([arc-popover-footer]:not([has-divider])) { ${ia}â¢blockâ¢end: 0; } 3006 } 3007 3008`,of=d` 3009 3010 /* default variant: common */ 3011 &[variant] { 3012 ${gu}: var(--arc-color-fg-primary); 3013 ${kc}: var(${X}-background, var(--arc-color-bg-mono)) border-box; 3014 ${wc}: var(${X}-background, var(--arc-color-bg-mono)) padding-box; 3015 ${Sc}: var(${X}-background, var(--arc-color-bg-mono)); 3016 ${Cc}: var(${X}-background, var(--arc-color-bg-mono)); 3017 ${Ac}: var(${X}-background, var(--arc-color-bg-mono)); 3018 ${zc}: var(${X}-background, var(--arc-color-bg-mono)); 3019 ${xe}â¢shadow: var(--arc-shadow-lg); 3020 ${$s}: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 3021 } 3022 3023 &[variant=brand] { 3024 ${kc}: var(--arc-color-border-brand-mid) border-box; 3025 ${wc}: var(--arc-color-bg-brand-muted) padding-box; 3026 ${Sc}: var(--arc-color-bg-brand-muted); 3027 ${Cc}: var(--arc-color-bg-brand-muted); 3028 ${Ac}: var(--arc-color-border-brand-mid); 3029 ${zc}: var(--arc-color-border-brand-mid); 3030 } 3031 3032 &[variant=ai] { 3033 ${kc}: var(--arc-gradient-ai-200) border-box; 3034 ${wc}: var(--arc-gradient-ai-50) padding-box; 3035 ${Sc}: var(${X}-ai-purple-50); 3036 ${Cc}: var(${X}-ai-blue-50); 3037 ${Ac}: var(${X}-ai-purple-200); 3038 ${zc}: var(${X}-ai-blue-200); 3039 } 3040 3041`,nf=d` 3042 3043 /* default density: compact */ 3044 &:not([density=comfortable]) { 3045 ${ys}: 0.75em; 3046 ${Aa}â¢gap: 0.75em; 3047 ${Xt}â¢block: 0.75em; 3048 ${Xt}â¢inline: 0.75em; 3049 3050 ${ia}â¢block: 0.75em; 3051 ${ia}â¢inline: 0.75em; 3052 3053 ${yc}â¢gap: 0.75em; 3054 ${za}â¢inline: 0.75em; 3055 ${za}â¢blockâ¢start: 0.75em; 3056 ${za}â¢blockâ¢end: 0.75em; 3057 } 3058 3059 &[density=comfortable] { 3060 ${ys}: 0.875em; 3061 ${Aa}â¢gap: 1.125em; 3062 ${Xt}â¢block: 1em; 3063 ${Xt}â¢inline: 1.25em; 3064 3065 ${ia}â¢block: 1.25em; 3066 ${ia}â¢inline: 1.25em; 3067 3068 ${yc}â¢gap: 1.125em; 3069 ${za}â¢inline: 1.25em; 3070 ${za}â¢blockâ¢start: 1em; 3071 ${za}â¢blockâ¢end: 1.25em; 3072 3073 &:not(:has([arc-popover-body])) { 3074 ${xc}: 1.25em; 3075 } 3076 } 3077 3078`,Ko={TOP:d` 3079 &[anchor-at*='top-'] { 3080 ${Fr}: 0 0 var(${xr}) 0; 3081 ${Er}: 100%; 3082 } 3083 &[anchor-at='top-start'] { 3084 position-area: block-start span-inline-end; 3085 ${lr}: 95%; 3086 ${_r}: calc(0% + var(${ke})); 3087 } 3088 &[anchor-at='top-center'] { 3089 position-area: block-start; 3090 ${lr}: 75%; 3091 ${_r}: 50%; 3092 } 3093 &[anchor-at='top-end'] { 3094 position-area: block-start span-inline-start; 3095 ${lr}: 53.5%; 3096 ${_r}: calc(100% - var(${ke})); 3097 } 3098 `,RIGHT:d` 3099 &[anchor-at*='right-'] { 3100 ${Fr}: 0 0 0 var(${xr}); 3101 ${_r}: 0%; 3102 } 3103 &[anchor-at='right-start'] { 3104 position-area: inline-end span-block-end; 3105 ${lr}: 53.5%; 3106 ${Er}: calc(0% + var(${we})); 3107 } 3108 &[anchor-at='right-center'] { 3109 position-area: inline-end; 3110 ${lr}: 75%; 3111 ${Er}: 50%; 3112 } 3113 &[anchor-at='right-end'] { 3114 position-area: inline-end span-block-start; 3115 ${lr}: 95%; 3116 ${Er}: calc(100% - var(${we})); 3117 } 3118 `,BOTTOM:d` 3119 &[anchor-at*='bottom-'] { 3120 ${Fr}: var(${xr}) 0 0 0; 3121 ${Er}: 0%; 3122 } 3123 &[anchor-at='bottom-end'] { 3124 position-area: block-end span-inline-start; 3125 ${lr}: 5%; 3126 ${_r}: calc(100% - var(${ke})); 3127 } 3128 &[anchor-at='bottom-center'] { 3129 position-area: block-end; 3130 ${lr}: 25%; 3131 ${_r}: 50%; 3132 } 3133 &[anchor-at='bottom-start'] { 3134 position-area: block-end span-inline-end; 3135 ${lr}: 47.5%; 3136 ${_r}: calc(0% + var(${ke})); 3137 } 3138 `,LEFT:d` 3139 &[anchor-at*='left-'] { 3140 ${Fr}: 0 var(${xr}) 0 0; 3141 ${_r}: 100%; 3142 } 3143 &[anchor-at='left-end'] { 3144 position-area: inline-start span-block-start; 3145 ${lr}: 47.5%; 3146 ${Er}: calc(100% - var(${we})); 3147 } 3148 &[anchor-at='left-center'] { 3149 position-area: inline-start; 3150 ${lr}: 25%; 3151 ${Er}: 50%; 3152 } 3153 &[anchor-at='left-start'] { 3154 position-area: inline-start span-block-end; 3155 ${lr}: 5%; 3156 ${Er}: calc(0% + var(${we})); 3157 } 3158 `,CENTER_AND_CORNERS:d` 3159 &:is([anchor-at='center'], [anchor-at*='corner']) { ${$a}â¢display: none; } 3160 &[anchor-at='center'] { position-area: center center; ${Fr}: 0; } 3161 &[anchor-at*='corner'] { ${Fr}: var(${xr}); } 3162 &[anchor-at='nw-corner'] { position-area: top left; } 3163 &[anchor-at='ne-corner'] { position-area: top right; } 3164 &[anchor-at='se-corner'] { position-area: bottom right; } 3165 &[anchor-at='sw-corner'] { position-area: bottom left; } 3166 `},qt={FLIP_BLOCK:d` 3167 &[anchor-at*='top-'] { ${Fr}: 0 0 var(${xr}) 0; } 3168 &[anchor-at='top-start']::before { ${lr}: 47.5%; ${Er}: 0%; } 3169 &[anchor-at='top-center']::before { ${lr}: 25%; ${Er}: 0%; } 3170 &[anchor-at='top-end']::before { ${lr}: 5%; ${Er}: 0%; } 3171 3172 &[anchor-at='right-start']::before { ${lr}: 95%; ${Er}: calc(100% - var(${we})); } 3173 &[anchor-at='right-end']::before { ${lr}: 53.5%; ${Er}: calc(0% + var(${we})); } 3174 3175 &[anchor-at*='bottom-'] { ${Fr}: var(${xr}) 0 0 0; } 3176 &[anchor-at='bottom-end']::before { ${lr}: 53.5%; ${Er}: 100%; } 3177 &[anchor-at='bottom-center']::before { ${lr}: 75%; ${Er}: 100%; } 3178 &[anchor-at='bottom-start']::before { ${lr}: 95%; ${Er}: 100%; } 3179 3180 &[anchor-at='left-end']::before { ${lr}: 5%; ${Er}: calc(0% + var(${we})); } 3181 &[anchor-at='left-start']::before { ${lr}: 47.5%; ${Er}: calc(100% - var(${we})); } 3182 `,FLIP_INLINE:d` 3183 &[anchor-at='top-start']::before { ${lr}: 53.5%; ${_r}: calc(100% - var(${ke})); } 3184 &[anchor-at='top-end']::before { ${lr}: 95%; ${_r}: calc(0% + var(${ke})); } 3185 3186 &[anchor-at*='right-'] { ${Fr}: 0 var(${xr}) 0 0; } 3187 &[anchor-at='right-start']::before { ${lr}: 5%; ${_r}: 100%; } 3188 &[anchor-at='right-center']::before { ${lr}: 25%; ${_r}: 100%; } 3189 &[anchor-at='right-end']::before { ${lr}: 47.5%; ${_r}: 100%; } 3190 3191 &[anchor-at='bottom-end']::before { ${lr}: 47.5%; ${_r}: calc(0% + var(${ke})); } 3192 &[anchor-at='bottom-start']::before { ${lr}: 5%; ${_r}: calc(100% - var(${ke})); } 3193 3194 &[anchor-at*='left-'] { ${Fr}: 0 0 0 var(${xr}); } 3195 &[anchor-at='left-end']::before { ${lr}: 95%; ${_r}: 0%; } 3196 &[anchor-at='left-center']::before { ${lr}: 75%; ${_r}: 0%; } 3197 &[anchor-at='left-start']::before { ${lr}: 53.5%; ${_r}: 0%; } 3198 `,FLIP_BLOCK_INLINE:d` 3199 &[anchor-at*='top-'] { ${Fr}: 0 0 var(${xr}) 0; } 3200 &[anchor-at='top-start']::before { ${lr}: 5%; ${Er}: 0%; ${_r}: calc(100% - var(${ke})); } 3201 &[anchor-at='top-end']::before { ${lr}: 47.5%; ${Er}: 0%; ${_r}: calc(0% + var(${ke})); } 3202 3203 &[anchor-at*='right-'] { ${Fr}: 0 var(${xr}) 0 0; } 3204 &[anchor-at='right-start']::before { ${lr}: 47.5%; ${Er}: calc(100% - var(${we})); ${_r}: 100%; } 3205 &[anchor-at='right-end']::before { ${lr}: 5%; ${Er}: calc(0% + var(${we})); ${_r}: 100%; } 3206 3207 &[anchor-at*='bottom-'] { ${Fr}: var(${xr}) 0 0 0; } 3208 &[anchor-at='bottom-end']::before { ${lr}: 95%; ${Er}: 100%; ${_r}: calc(0% + var(${ke})); } 3209 &[anchor-at='bottom-start']::before { ${lr}: 53.5%; ${Er}: 100%; ${_r}: calc(100% - var(${ke})); } 3210 3211 &[anchor-at*='left-'] { ${Fr}: 0 0 0 var(${xr}); } 3212 &[anchor-at='left-end']::before { ${lr}: 53.5%; ${Er}: calc(0% + var(${we})); ${_r}: 0%; } 3213 &[anchor-at='left-start']::before { ${lr}: 95%; ${Er}: calc(100% - var(${we})); ${_r}: 0%; } 3214 `},cf=d` 3215 @position-try --jsâ¢try-top-start { position-area: block-start span-inline-end; margin: 0 0 var(${xr}) 0; } 3216 @position-try --jsâ¢try-top-center { position-area: block-start; margin: 0 0 var(${xr}) 0; } 3217 @position-try --jsâ¢try-top-end { position-area: block-start span-inline-start; margin: 0 0 var(${xr}) 0; } 3218 @position-try --jsâ¢try-right-start { position-area: inline-end span-block-end; margin: 0 0 0 var(${xr}); } 3219 @position-try --jsâ¢try-right-center { position-area: inline-end; margin: 0 0 0 var(${xr}); } 3220 @position-try --jsâ¢try-right-end { position-area: inline-end span-block-start; margin: 0 0 0 var(${xr}); } 3221 @position-try --jsâ¢try-bottom-start { position-area: block-end span-inline-end; margin: var(${xr}) 0 0 0; } 3222 @position-try --jsâ¢try-bottom-center { position-area: block-end; margin: var(${xr}) 0 0 0; } 3223 @position-try --jsâ¢try-bottom-end { position-area: block-end span-inline-start; margin: var(${xr}) 0 0 0; } 3224 @position-try --jsâ¢try-left-start { position-area: inline-start span-block-end; margin: 0 var(${xr}) 0 0; } 3225 @position-try --jsâ¢try-left-center { position-area: inline-start; margin: 0 var(${xr}) 0 0; } 3226 @position-try --jsâ¢try-left-end { position-area: inline-start span-block-start; margin: 0 var(${xr}) 0 0; } 3227 @position-try --jsâ¢try-center { position-area: center center; margin: 0; } 3228 @position-try --jsâ¢try-nw-corner { position-area: top left; margin: var(${xr}); } 3229 @position-try --jsâ¢try-ne-corner { position-area: top right; margin: var(${xr}); } 3230 @position-try --jsâ¢try-se-corner { position-area: bottom right; margin: var(${xr}); } 3231 @position-try --jsâ¢try-sw-corner { position-area: bottom left; margin: var(${xr}); } 3232`,qr={"top-start":d` 3233 ${Fr}: 0 0 var(${xr}) 0; 3234 &::before { ${lr}: 95%; ${Er}: 100%; ${_r}: calc(0% + var(${ke})); } 3235 `,"top-center":d` 3236 ${Fr}: 0 0 var(${xr}) 0; 3237 &::before { ${lr}: 75%; ${Er}: 100%; ${_r}: 50%; } 3238 `,"top-end":d` 3239 ${Fr}: 0 0 var(${xr}) 0; 3240 &::before { ${lr}: 53.5%; ${Er}: 100%; ${_r}: calc(100% - var(${ke})); } 3241 `,"right-start":d` 3242 ${Fr}: 0 0 0 var(${xr}); 3243 &::before { ${lr}: 53.5%; ${_r}: 0%; ${Er}: calc(0% + var(${we})); } 3244 `,"right-center":d` 3245 ${Fr}: 0 0 0 var(${xr}); 3246 &::before { ${lr}: 75%; ${_r}: 0%; ${Er}: 50%; } 3247 `,"right-end":d` 3248 ${Fr}: 0 0 0 var(${xr}); 3249 &::before { ${lr}: 95%; ${_r}: 0%; ${Er}: calc(100% - var(${we})); } 3250 `,"bottom-start":d` 3251 ${Fr}: var(${xr}) 0 0 0; 3252 &::before { ${lr}: 47.5%; ${Er}: 0%; ${_r}: calc(0% + var(${ke})); } 3253 `,"bottom-center":d` 3254 ${Fr}: var(${xr}) 0 0 0; 3255 &::before { ${lr}: 25%; ${Er}: 0%; ${_r}: 50%; } 3256 `,"bottom-end":d` 3257 ${Fr}: var(${xr}) 0 0 0; 3258 &::before { ${lr}: 5%; ${Er}: 0%; ${_r}: calc(100% - var(${ke})); } 3259 `,"left-start":d` 3260 ${Fr}: 0 var(${xr}) 0 0; 3261 &::before { ${lr}: 5%; ${_r}: 100%; ${Er}: calc(0% + var(${we})); } 3262 `,"left-center":d` 3263 ${Fr}: 0 var(${xr}) 0 0; 3264 &::before { ${lr}: 25%; ${_r}: 100%; ${Er}: 50%; } 3265 `,"left-end":d` 3266 ${Fr}: 0 var(${xr}) 0 0; 3267 &::before { ${lr}: 47.5%; ${_r}: 100%; ${Er}: calc(100% - var(${we})); } 3268 `},sf=d` 3269 @supports (container-type: anchored) { 3270 @container anchored(fallback: --jsâ¢try-top-start) { [arc-popover][try-fallbacks][has-tail] { ${qr["top-start"]} } } 3271 @container anchored(fallback: --jsâ¢try-top-center) { [arc-popover][try-fallbacks][has-tail] { ${qr["top-center"]} } } 3272 @container anchored(fallback: --jsâ¢try-top-end) { [arc-popover][try-fallbacks][has-tail] { ${qr["top-end"]} } } 3273 @container anchored(fallback: --jsâ¢try-right-start) { [arc-popover][try-fallbacks][has-tail] { ${qr["right-start"]} } } 3274 @container anchored(fallback: --jsâ¢try-right-center) { [arc-popover][try-fallbacks][has-tail] { ${qr["right-center"]} } } 3275 @container anchored(fallback: --jsâ¢try-right-end) { [arc-popover][try-fallbacks][has-tail] { ${qr["right-end"]} } } 3276 @container anchored(fallback: --jsâ¢try-bottom-start) { [arc-popover][try-fallbacks][has-tail] { ${qr["bottom-start"]} } } 3277 @container anchored(fallback: --jsâ¢try-bottom-center) { [arc-popover][try-fallbacks][has-tail] { ${qr["bottom-center"]} } } 3278 @container anchored(fallback: --jsâ¢try-bottom-end) { [arc-popover][try-fallbacks][has-tail] { ${qr["bottom-end"]} } } 3279 @container anchored(fallback: --jsâ¢try-left-start) { [arc-popover][try-fallbacks][has-tail] { ${qr["left-start"]} } } 3280 @container anchored(fallback: --jsâ¢try-left-center) { [arc-popover][try-fallbacks][has-tail] { ${qr["left-center"]} } } 3281 @container anchored(fallback: --jsâ¢try-left-end) { [arc-popover][try-fallbacks][has-tail] { ${qr["left-end"]} } } 3282 } 3283`,lf=d` 3284 &[data-resolved-at='top-start'] { ${qr["top-start"]} } 3285 &[data-resolved-at='top-center'] { ${qr["top-center"]} } 3286 &[data-resolved-at='top-end'] { ${qr["top-end"]} } 3287 &[data-resolved-at='right-start'] { ${qr["right-start"]} } 3288 &[data-resolved-at='right-center'] { ${qr["right-center"]} } 3289 &[data-resolved-at='right-end'] { ${qr["right-end"]} } 3290 &[data-resolved-at='bottom-start'] { ${qr["bottom-start"]} } 3291 &[data-resolved-at='bottom-center'] { ${qr["bottom-center"]} } 3292 &[data-resolved-at='bottom-end'] { ${qr["bottom-end"]} } 3293 &[data-resolved-at='left-start'] { ${qr["left-start"]} } 3294 &[data-resolved-at='left-center'] { ${qr["left-center"]} } 3295 &[data-resolved-at='left-end'] { ${qr["left-end"]} } 3296`,df=d` 3297 ${cf} 3298 3299 [arc-popover] { 3300 position: fixed; 3301 inset: auto; 3302 padding: 0; 3303 margin: var(${Fr}); 3304 3305 container-type: anchored; 3306 position-anchor: var(${X}-anchor-name, var(--jsâ¢anchor)); 3307 3308 ${Ko.TOP} 3309 ${Ko.RIGHT} 3310 ${Ko.BOTTOM} 3311 ${Ko.LEFT} 3312 ${Ko.CENTER_AND_CORNERS} 3313 3314 &[try-fallbacks] { 3315 /* '--jsâ¢fallbacks' is set by the component: automatic flip keywords by default, 3316 or an ordered list of managed '@position-try' idents when 'fallbackAnchors' is used. */ 3317 position-try-fallbacks: var(--jsâ¢fallbacks, flip-block, flip-inline, flip-block flip-inline); 3318 } 3319 } 3320 3321 @supports (container-type: anchored) { 3322 @container anchored(fallback: flip-block) { 3323 [arc-popover][try-fallbacks][has-tail] { 3324 ${qt.FLIP_BLOCK} 3325 } 3326 } 3327 3328 @container anchored(fallback: flip-inline) { 3329 [arc-popover][try-fallbacks][has-tail] { 3330 ${qt.FLIP_INLINE} 3331 } 3332 } 3333 3334 @container anchored(fallback: flip-block flip-inline) { 3335 [arc-popover][try-fallbacks][has-tail] { 3336 ${qt.FLIP_BLOCK_INLINE} 3337 } 3338 } 3339 } 3340 3341 /* Managed fallback placements ('fallbackAnchors') â native '@position-try' tail re-pointing. */ 3342 ${sf} 3343 3344 /* @note â tail fallback mitigation */ 3345 @supports not (container-type: anchored) { 3346 /* @note â inline center anchor placement mitigation for Firefox */ 3347 [arc-popover] { 3348 &[anchor-at='right-center'] { 3349 position-area: inline-end center; 3350 } 3351 &[anchor-at='left-center'] { 3352 position-area: inline-start center; 3353 } 3354 } 3355 3356 [arc-popover][try-fallbacks][has-tail] { 3357 &[data-fallbacks='flip-block'] { 3358 ${qt.FLIP_BLOCK} 3359 } 3360 &[data-fallbacks='flip-inline'] { 3361 ${qt.FLIP_INLINE} 3362 } 3363 &[data-fallbacks='flip-block-inline'] { 3364 ${qt.FLIP_BLOCK_INLINE} 3365 } 3366 3367 /* Managed fallback placements ('fallbackAnchors') â resolved-anchor tail re-pointing. */ 3368 ${lf} 3369 } 3370 } 3371`,Yt={BACKDROP:d` 3372 [arc-popover]::backdrop { 3373 background: var(${X}-backdrop, transparent); 3374 } 3375 `,CONTENT:d` 3376 [arc-popover-content] { 3377 flex: var(${X}-flex, 1); 3378 position: relative; 3379 display: var(${X}-content-display, flex); 3380 flex-direction: var(${X}-content-flex-direction, column); 3381 gap: var(${X}-content-gap, 0); 3382 3383 overflow: var(${X}-overflow, auto); 3384 overscroll-behavior: var(${X}-overscroll-behavior, contain); 3385 3386 color: var(${X}-color, var(${gu})); 3387 padding: var(${X}-padding, var(${xc})); 3388 margin: var(${X}-margin, unset); 3389 background: var(${X}-content-background, var(${wc})); 3390 border-radius: calc(var(${bs}) - var(${$c})); 3391 border: var(${X}-border, none); 3392 3393 height: var(${X}-height, auto); 3394 min-height: var(${X}-min-height, auto); 3395 max-height: var(${X}-max-height, 65vh); 3396 resize: var(${X}-resize, none); 3397 } 3398 `,HEADER:d` 3399 [arc-popover-header] { 3400 flex: var(${X}-header-flex, none); 3401 display: var(${X}-header-display, flex); 3402 justify-content: var(${X}-header-justify-content, space-between); 3403 align-items: var(${X}-header-align-items, baseline); 3404 gap: var(${X}-header-gap, var(${Aa}â¢gap)); 3405 3406 padding: var(${X}-header-padding, 3407 var(${Xt}â¢block) 3408 var(${Xt}â¢inline) 3409 ); 3410 3411 color: var(${X}-header-color, inherit); 3412 background: var(${X}-header-background, none); 3413 3414 &[is-sticky] { 3415 position: sticky; 3416 z-index: var(${X}-header-z-index, 2); 3417 top: var(${X}-header-top, 0); 3418 } 3419
3420 &:has([arc-popover-go-back]) { 3421 padding-inline-start: 0.875em; 3422 } 3423 3424 &:has([arc-popover-dismiss]) { 3425 padding-inline-end: 0.875em; 3426 } 3427 3428 &:where([has-divider]) { 3429 border-bottom: var(${X}-header-border-bottom, var(${$s})); 3430 } 3431 3432 :where([arc-button]) { 3433 margin: var(${X}-header-button-margin, -0.5em); 3434 } 3435 } 3436 3437 [arc-popover-header-slot='start'] { 3438 ${Aa}â¢slotâ¢flex: 1; 3439 ${Aa}â¢slotâ¢gap: 1em; 3440 } 3441 3442 [arc-popover-header-slot='end'] { 3443 ${Aa}â¢slotâ¢flex: none; 3444 ${Aa}â¢slotâ¢gap: 1.5em; 3445 } 3446 3447 [arc-popover-header-slot] { 3448 min-width: 0%; 3449 flex: var(${Aa}â¢slotâ¢flex); 3450 display: var(${X}-header-display, flex); 3451 justify-content: var(${X}-header-justify-content, unset); 3452 align-items: var(${X}-header-align-items, baseline); 3453 gap: var(${X}-header-slot-gap, var(${Aa}â¢slotâ¢gap)); 3454 } 3455 3456 /* Header-less Popover: DismissButton typical starting spot */ 3457 [arc-popover]:not([arc-popover-header]) > [arc-popover-dismiss] { 3458 --arc-button-position: absolute; 3459 --arc-button-z-index: var(${X}-dismiss-z-index, 2); 3460 inset: var(${X}-dismiss-inset, 0.5em 0.5em auto auto); 3461 margin: var(${X}-dismiss-margin, 0); 3462 } 3463 `,BODY:d` 3464 [arc-popover-body] { 3465 flex: var(${X}-body-flex, 1); 3466 display: var(${X}-body-display, block); 3467 flex-direction: var(${X}-body-flex-direction, unset); 3468 3469 padding: var(${X}-body-padding, 3470 var(${ia}â¢blockâ¢start, var(${ia}â¢block)) 3471 var(${ia}â¢inline) 3472 var(${ia}â¢blockâ¢end, var(${ia}â¢block)) 3473 var(${ia}â¢inline) 3474 ); 3475 } 3476 `,FOOTER:d` 3477 [arc-popover-footer] { 3478 flex: var(${X}-footer-flex, none); 3479 display: var(${X}-footer-display, flex); 3480 flex-direction: var(${X}-footer-flex-direction, row-reverse); 3481 justify-content: var(${X}-footer-justify-content, space-between); 3482 align-items: var(${X}-footer-align-items, center); 3483 gap: var(${X}-footer-gap, var(${yc}â¢gap)); 3484 3485 padding: var(${X}-footer-padding, 3486 var(${za}â¢blockâ¢start) 3487 var(${za}â¢inline) 3488 var(${za}â¢blockâ¢end) 3489 var(${za}â¢inline) 3490 ); 3491 3492 background: var(${X}-footer-background, none); 3493 color: var(${X}-footer-color, inherit); 3494 3495 &[is-sticky] { 3496 position: sticky; 3497 z-index: var(${X}-footer-z-index, 2); 3498 bottom: var(${X}-footer-bottom, 0); 3499 } 3500 3501 &:where([has-divider]) { 3502 border-top: var(${X}-footer-border-top, var(${$s})); 3503 } 3504 } 3505 `,TAIL:d` 3506 [arc-popover][has-tail]::before { 3507 content: ''; 3508 box-sizing: content-box; 3509 position: absolute; 3510 display: var(${$a}â¢display, block); 3511 3512 inset: auto; 3513 top: var(${Er}, auto); 3514 left: var(${_r}, auto); 3515 3516 translate: -50% -50%; 3517 rotate: 45deg; 3518 3519 width: var(${Uo}); 3520 height: var(${Uo}); 3521 border-radius: 0.125em; 3522 3523 background: color-mix(in srgb, 3524 var(${Sc}) var(${lr}), 3525 var(${Cc}) clamp(0%, 100% - var(${lr}), 100%) 3526 ); 3527 3528 border: var(${$c}) solid color-mix(in srgb, 3529 var(${Ac}) var(${lr}), 3530 var(${zc}) clamp(0%, 100% - var(${lr}), 100%) 3531 ); 3532 } 3533 `},uf=d` 3534 [arc-popover] { 3535 will-change: opacity; 3536 overflow: visible; /* For the tail â content overflow is set on '[arc-popover-content]' */ 3537 3538 /* @note â this line-height magic number fixes asymmetrical outline/border issues with certain placements 3539 on low DPI displays. It's based on the default (--arc-line-height-standard) of 1.4 */ 3540 line-height: var(${X}-line-height, 1.395); 3541 3542 /* @note â this font-size is intended NOT to be altered; it is locked in as a reset (browser baseline) 3543 for various popover calculations. The effective popover font size is set on '[arc-popover-display]'. */ 3544 font-size: initial; 3545 3546 background: var(${X}-background, var(${kc})); 3547 border: var(${$c}) solid transparent; 3548 border-radius: var(${bs}); 3549 box-shadow: var(${X}
3549-shadow, var(${xe}â¢shadow)); 3550 width: var(${X}-width, auto); 3551 height: var(${X}-height, auto); 3552 min-width: var(${X}-min-width, auto); 3553 min-height: var(${X}-min-height, auto); 3554 max-width: var(${X}-max-width, 100vw); 3555 max-height: var(${X}-max-height, 65vh); 3556 } 3557 3558 /* @note â font-size control for header|footer|body padding calculations */ 3559 [arc-popover-display] { 3560 display: contents; 3561 font-size: var(${X}-font-size, var(${ys})); 3562 } 3563 3564 ${Yt.CONTENT} 3565 ${Yt.HEADER} 3566 ${Yt.BODY} 3567 ${Yt.FOOTER} 3568 ${Yt.TAIL} 3569 ${Yt.BACKDROP} 3570`,Wo={SETUP:tf,ANCHORS:df,VARIANTS:of,DENSITIES:nf,ELEMENT:uf},hf=d` 3571@layer arc-components { 3572 3573 /* Shared defaults from _Internal/Components.css.js */ 3574 ${Iv} 3575 3576 [arc-popover] { 3577 ${Wo.SETUP} 3578 ${Wo.VARIANTS} 3579 ${Wo.DENSITIES} 3580 } 3581 3582 ${Wo.ANCHORS} 3583 ${Wo.ELEMENT} 3584 3585 /* POPOVER anchoring mitigation ----------------------------------⢠*/ 3586 3587 [arc-popover][is-floating] { 3588 position-area: none; 3589 position-try-fallbacks: none; 3590 margin: 0; /* zero out the gap on the Floating UI path to prevent doubled offsets */ 3591 } 3592 3593 /* POPOVER transition --------------------------------------------⢠*/ 3594 3595 [arc-popover] { 3596 z-index: var(--arc-popover-z-index, 10000); /* default for floating-ui fallback */ 3597 transition-timing-function: ease-out; 3598 transition-duration: var(--arc-popover-transition-duration, 240ms); 3599 transition-behavior: allow-discrete; 3600 transition-property: display, opacity; 3601 3602 @supports (overlay: auto) { 3603 transition-property: display, overlay, opacity; 3604 } 3605 3606 opacity: 0; 3607 &:popover-open { opacity: 1; } 3608 3609 &::backdrop { transition: inherit; opacity: 0; } 3610 &:popover-open::backdrop { opacity: 1; } 3611 } 3612 3613 @starting-style { 3614 [arc-popover]:popover-open { opacity: 0; } 3615 [arc-popover]:popover-open::backdrop { opacity: 0; } 3616 } 3617} 3618 3619`,vu=(0,s.forwardRef)(({children:r,popover:e=Me.popover,anchorAt:a=Me.anchorAt,anchorName:t,anchorProps:o,alternateAnchorId:n,alternateAnchor:c,boundary:l=Me.boundary,tryFallbacks:u=Me.tryFallbacks,fallbackAnchors:h=Me.fallbackAnchors,density:p=Me.density,variant:f=Me.variant,scheme:g=Me.scheme,isInverse:v,hasTail:m,tailSize:y=Me.tailSize,offset:S=Me.offset,hidePopoverButton:k,headerSlot:w,showHeaderDivider:z,isHeaderSticky:x,showDismiss:_,dismissProps:P,showGoBack:R,goBackProps:U,headerSlotEnd:T,footerSlot:L,isFooterSticky:G,showFooterDivider:I,tag:H="div",contentTag:V="div",onToggle:er,...O},J)=>{const nr=(0,s.useRef)(null),sr=(0,s.useRef)(null),yr=(0,s.useRef)(null),q=(0,s.useRef)(er);(0,s.useImperativeHandle)(J,()=>sr.current);const[tr,Mr]=(0,s.useState)(!1),dr=(0,s.useMemo)(()=>g==="auto"?void 0:v?"inverse":g,[v,g]),br=(0,s.useCallback)(()=>{if(typeof document>"u")return nr.current??null;const Y=na(nr.current??sr.current)??document;return n?Y.getElementById(n):typeof c=="string"?Y.getElementById(c):c instanceof HTMLElement?c:typeof c=="function"?c():c&&typeof c=="object"&&"current"in c?c.current:nr.current??null},[c,n]),hr=u||l==="flip",pr=hr?Md(h):[],vr=pr.length?pr.map(Ld).join(", "):"flip-block, flip-inline, flip-block flip-inline",kr=!!m&&!jd.includes(a),K=Dd({canHaveTail:kr,tailSize:y}),or=(0,s.useMemo)(()=>{const Y=t||n||(typeof c=="string"?c:void 0)||o?.id||O.id||void 0;return rs(String(Y))},[t,o?.id,O.id,c,n]),C=(0,s.useMemo)(()=>({popoverTarget:O.id,"aria-haspopup":!0,"aria-controls":O.id,"aria-expanded":tr}),[O.id,tr]),$=(0,s.useMemo)(()=>({isOpen:tr,"aria-label":"Dismiss",...C,...P}),[P,tr,C]),N=(0,s.useMemo)(()=>({ref:nr,...C,...o,tooltip:tr?void 0:o?.tooltip,anchorName:or||""}),[o,C,or,tr]),ar=(0,s.useMemo)(()=>({"--js\u2022anchor":N?.anchorName||"","--js\u2022offset":Number(S)===0?"":`${S}px`,"--js\u2022tail":K.cssTailVar,"--js\u2022fallbacks":vr}),[N?.anchorName,S,K.cssTailVar,vr]);et(()=>{const Y=br();if(yr.current=Y,!!Y)return Bd(Y,N.anchorName)},[br,N.anchorName,tr]),(0,s.useEffect)(()=>{q.current=er},[er]),(0,s.useEffect)(()=>{const Y=sr.current;if(!Y)return;const cr=ir=>{const{newState:wr}=ir,Lr=wr==="open";Mr(Lr),Lr&&(yr.current=br()),q.current?.(ir)};return Y.addEventListener("toggle",cr),()=>Y.removeEventListener("toggle",cr)},[br]),Bg({anchorEl:yr.current,popoverEl:sr.current,anchorAt:a,tryFallbacks:hr,fallbackAnchors:pr,offsetPx:Number(S)||0,tailSizePx:K.floatingTailPx,hasTail:kr,isOpen:tr}),Vg({anchorEl:yr.current,popoverEl:sr.current,anchorAt:a,tryFallbacks:hr,fallbackAnchors:pr,hasTail:kr,isOpen:tr});const E=!!(w||R||T),F=!!L;return(0,i.jsxs)(i.Fragment,{children:[!((n||c)&&k)&&(0,i.jsx)(Go,{...N}),(0,i.jsxs)(H,{...O,ref:sr,"arc-popover":"","arc-scheme":dr,"anchor-at":a,"is-floating":Rd?"":void 0,"try-fallbacks":hr?"":void 0,popover:e,variant:f,density:p,"has-tail":kr?"":void 0,role:O.role??"dialog",style:{...O.style,...ar},children:[(0,i.jsxs)(V,{"arc-popover-content":"",children:[E&&(0,i.jsx)(Jv,{showDivider:z,showGoBack:R,goBackProps:U,headerSlotEnd:T,showDismiss:_,dismissProps:$,isSticky:x,children:w}),E||F?(0,i.jsx)(Qv,{children:r}):(0,i.jsx)(V,{"arc-popover-display":"",children:r}),F&&(0,i.jsx)(rf,{showDivider:I,isSticky:G,children:L})]}),_&&!E&&(0,i.jsx)(pu,{...$})]})]})});vu.displayName="ArcPopover";const xs=vu;xs.handlePopover=Od,xs.Button=Go;const ya=xs;Cr("ArcPopover",hf);const pf=d` 3620@layer arc-components { 3621 3622 [arc-avatar-overflow] { 3623 /* Inter-Component Communication ⢠ArcPopover ------------------⢠*/ 3624 --arc-popover-font-size: var(--arc-font-size-body-md); 3625 --arc-popover-translate: -100% 0.5em; 3626 --arc-popover-width: max-content; 3627 --arc-popover-max-width: 18em; 3628 --arc-popover-padding: 0; 3629 3630 /* For Neutral/Anonymous avatars -------------------------------⢠*/ 3631 [data-element=list] { 3632 margin: 0; 3633 padding: var(${b}â¢4) var(${b}â¢0); 3634 } 3635 3636 [data-element=list-item] { 3637 display: flex; 3638 align-items: center; 3639 gap: var(${b}â¢6); 3640 padding: var(${b}â¢4) var(${b}â¢8); 3641 } 3642 3643 ${Bi} 3644 ${yd} 3645 } 3646 3647} 3648`,gf=r=>(0,i.jsx)("ul",{...r,"data-element":"list"}),vf=r=>(0,i.jsx)("li",{...r,"data-element":"list-item"}),ff=({count:r,anchorId:e,overflowId:a,shouldShowOverflow:t,...o})=>(0,i.jsx)(qi,{title:`+${r}`,children:(0,i.jsx)(ya.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})}),mf=({children:r,id:e,size:a="sm",overflowCount:t=0,shouldShowOverflow:o=!1,anchorAt:n="bottom-end",tryFallbacks:c=!0,...l})=>{const u=Math.min(t,999),h=Or(e,"arc-avatar-overflow"),p=(0,s.useMemo)(()=>`${h}-anchor`,[h]),f=(0,s.useMemo)(()=>s.Children.toArray(r),[r]);return(0,i.jsxs)(i.Fragment,{children:[u>0&&(0,i.jsx)(ff,{count:u,anchorId:p,overflowId:h,shouldShowOverflow:o}),o&&u>0&&(0,i.jsx)(ya,{...l,scheme:"inverse","arc-avatar-overflow":"",id:h,anchorAt:n,tryFallbacks:c,alternateAnchorId:p,hidePopoverButton:!0,variant:"common","data-size":a,children:(0,i.jsx)(gf,{children:f.map((g,v)=>(0,i.jsx)(vf,{children:g},v))})})]})};Cr("ArcAvatarOverflow",pf);const fu=({fg:r,bg:e})=>d` 3649 &:has(>[data-color=mono-inverse]) { 3650 ${r}â¢high: var(--arc-color-fg-on-mono-inverse); 3651 ${e}â¢high: var(--arc-color-bg-mono-inverse); 3652 ${r}â¢low: var(--arc-color-fg-on-subtle); 3653 ${e}â¢low: var(--arc-color-bg-neutral-subtle); 3654 } 3655 3656 &:has(>[data-color=brand]) { 3657 ${r}â¢high: var(--arc-color-fg-on-stark); 3658 ${e}â¢high: var(--arc-color-bg-brand-stark); 3659 ${r}â¢low: var(--arc-color-fg-brand-stark); 3660 ${e}â¢low: var(--arc-color-bg-brand-subtle); 3661 } 3662 3663 &:has(>[data-color=mono]) { 3664 ${r}â¢high: var(--arc-color-fg-on-mono); 3665 ${e}â¢high: var(--arc-color-bg-mono); 3666 ${r}â¢low: var(--arc-color-fg-on-mono); 3667 ${e}â¢low: var(--arc-color-bg-mono); 3668 } 3669 3670 &:has(>[data-color=blue]) { 3671 ${r}â¢high: var(--arc-color-fg-on-stark); 3672 ${e}â¢high: var(--arc-color-bg-blue-stark); 3673 ${r}â¢low: var(--arc-color-fg-blue-stark); 3674 ${e}â¢low: var(--arc-color-bg-blue-subtle); 3675 } 3676 3677 &:has(>[data-color=neutral]) { 3678 ${r}â¢high: var(--arc-color-fg-on-heavy); 3679 ${e}â¢high: var(--arc-color-bg-neutral-heavy); 3680 ${r}â¢low: var(--arc-color-fg-neutral-stark); 3681 ${e}â¢low: var(--arc-color-bg-neutral-subtle); 3682 } 3683 3684 &:has(>[data-color=purple]) { 3685 ${r}â¢high: var(--arc-color-fg-on-stark); 3686 ${e}â¢high: var(--arc-color-bg-purple-stark); 3687 ${r}â¢low: var(--arc-color-fg-purple-stark); 3688 ${e}â¢low: var(--arc-color-bg-purple-subtle); 3689 } 3690 3691 &:has(>[data-color=green]) { 3692 ${r}â¢high: var(--arc-color-fg-on-stark); 3693 ${e}â¢high: var(--arc-color-bg-green-stark); 3694 ${r}â¢low: var(--arc-color-fg-green-stark); 3695 ${e}â¢low: var(--arc-color-bg-green-subtle); 3696 } 3697 3698 &:has(>[data-color=yellow]) { 3699 ${r}â¢high: var(--arc-color-fg-on-stark); 3700 ${e}â¢high: var(--arc-color-bg-yellow-stark); 3701 ${r}â¢low: var(--arc-color-fg-yellow-stark); 3702 ${e}â¢low: var(--arc-color-bg-yellow-subtle); 3703 } 3704 3705 &:has(>[data-color=red]) { 3706 ${r}â¢high: var(--arc-color-fg-on-stark); 3707 ${e}â¢high: var(--arc-color-bg-red-stark); 3708 ${r}â¢low: var(--arc-color-fg-red-stark); 3709 ${e}â¢low: var(--arc-color-bg-red-subtle); 3710 } 3711 3712 &:has(>
3712[data-color=maroon]) { 3713 ${r}â¢high: var(--arc-color-fg-on-stark); 3714 ${e}â¢high: var(--arc-color-bg-maroon-stark); 3715 ${r}â¢low: var(--arc-color-fg-maroon-stark); 3716 ${e}â¢low: var(--arc-color-bg-maroon-subtle); 3717 } 3718 3719 &:has(>[data-color=mint]) { 3720 ${r}â¢high: var(--arc-color-fg-on-stark); 3721 ${e}â¢high: var(--arc-color-bg-mint-stark); 3722 ${r}â¢low: var(--arc-color-fg-mint-stark); 3723 ${e}â¢low: var(--arc-color-bg-mint-subtle); 3724 } 3725 3726 &:has(>[data-color=orange]) { 3727 ${r}â¢high: var(--arc-color-fg-on-stark); 3728 ${e}â¢high: var(--arc-color-bg-orange-stark); 3729 ${r}â¢low: var(--arc-color-fg-orange-stark); 3730 ${e}â¢low: var(--arc-color-bg-orange-subtle); 3731 } 3732 3733 &:has(>[data-color=ai]) { 3734 ${r}â¢high: var(--arc-color-fg-on-heavy); 3735 ${e}â¢high: var(--arc-gradient-ai-300); 3736 ${r}â¢low: var(--arc-color-fg-on-subtle); 3737 ${e}â¢low: var(--arc-gradient-ai-100); 3738 } 3739 3740 &:has(>[data-color=overlay-light]) { 3741 ${r}â¢high: var(--arc-color-mono-black); 3742 ${e}â¢high: var(--arc-color-alpha-white-80); 3743 ${r}â¢low: var(--arc-color-alpha-heavy); 3744 ${e}â¢low: var(--arc-color-alpha-white-20); 3745 } 3746 3747 &:has(>[data-color=overlay-dark]) { 3748 ${r}â¢high: var(--arc-color-mono-white); 3749 ${e}â¢high: var(--arc-color-alpha-black-70); 3750 ${r}â¢low: var(--arc-color-mono-white); 3751 ${e}â¢low: var(--arc-color-alpha-black-40); 3752 } 3753`,mu=({fg:r,bg:e})=>d` 3754 &:has(>[data-contrast=high]) { 3755 ${r}: var(${r}â¢high); 3756 ${e}: var(${e}â¢high); 3757 } 3758 3759 &:has(>[data-contrast=low]) { 3760 ${r}: var(${r}â¢low); 3761 ${e}: var(${e}â¢low); 3762 } 3763`,mr=d`--arcâ¢badge`,ks=d`${mr}â¢fg`,ws=d`${mr}â¢bg`,bf=fu({fg:ks,bg:ws}),$f=mu({fg:ks,bg:ws}),yf=d` 3764 &:has(>[data-size=lg]) { 3765 ${mr}â¢fontâ¢size: var(${b}â¢14); 3766 ${mr}â¢fontâ¢sizeâ¢caps: var(${b}â¢12); 3767 ${mr}â¢size: var(${b}â¢24); 3768 ${mr}â¢minâ¢size: var(${b}â¢30); 3769 ${mr}â¢paddingâ¢inline: var(${b}â¢8); 3770 ${mr}â¢borderâ¢radius: var(${b}â¢4); 3771 ${mr}â¢gap: var(${b}â¢4); 3772 } 3773 3774 &:has(>[data-size=md]) { 3775 ${mr}â¢fontâ¢size: var(${b}â¢12); 3776 ${mr}â¢fontâ¢sizeâ¢caps: var(${b}â¢10); 3777 ${mr}â¢size: var(${b}â¢20); 3778 ${mr}â¢minâ¢size: var(${b}â¢24); 3779 ${mr}â¢paddingâ¢inline: var(${b}â¢6); 3780 ${mr}â¢borderâ¢radius: var(${b}â¢4); 3781 ${mr}â¢gap: var(${b}â¢4); 3782 } 3783 3784 &:has(>[data-size=sm]) { 3785 ${mr}â¢fontâ¢size: var(${b}â¢10); 3786 ${mr}â¢fontâ¢sizeâ¢caps: var(${b}â¢8); 3787 ${mr}â¢size: var(${b}â¢16); 3788 ${mr}â¢minâ¢size: var(${b}â¢18); 3789 ${mr}â¢paddingâ¢inline: var(${b}â¢4); 3790 ${mr}â¢borderâ¢radius: var(${b}â¢4); 3791 ${mr}â¢gap: var(${b}â¢4); 3792 } 3793 3794 /** @default ⢠relative equivalent of 'md' at 100% ⢠(16 x 75% = 12) */ 3795 &:has(>[data-size=inherit]) { 3796 ${mr}â¢fontâ¢size: 1em; 3797 ${mr}â¢fontâ¢sizeâ¢text: 0.75em; 3798 ${mr}â¢fontâ¢sizeâ¢caps: 0.625em; 3799 ${mr}â¢size: 1.25em; 3800 ${mr}â¢minâ¢size: 1.5em; 3801 ${mr}â¢paddingâ¢inline: 0.375em; 3802 ${mr}â¢borderâ¢radius: 0.25em; 3803 ${mr}â¢gap: 0.25em; 3804 } 3805`,xf=d` 3806 &:has(>[data-layout=fill]) { 3807 ${mr}â¢flex: auto; /* same as 1 (1 1 auto) but with clearer intent */ 3808 ${mr}â¢display: flex; 3809 ${mr}â¢minâ¢width: var(${mr}â¢minâ¢size); 3810 3811 /* Inter-Component Communication ⢠ArcIconText -------------------⢠*/ 3812 --arc-icon-text-overflow: hidden; 3813 --arc-icon-text-white-space: nowrap; 3814 --arc-icon-text-text-overflow: ellipsis; 3815 } 3816 3817 &:has(>[data-layout=hug]) { 3818 ${mr}â¢flex: none; /* same as 0 0 auto but with clearer intent */ 3819 ${mr}â¢display: inline-flex; 3820 ${mr}â¢minâ¢width: min-content; 3821 } 3822`,kf=d` 3823@layer arc-components { 3824 3825 [arc-badge-wrapper] { 3826 ${bf} 3827 ${$f} 3828 ${yf} 3829 ${xf} 3830 3831 /* Inter-Component Communication ⢠ArcIconText -------------------⢠*/ 3832 --arc-icon-height: 1lh; 3833 --arc-icon-text-align-items: center; 3834 --arc-icon-text-gap: var(${mr}â¢gap); 3835 --arc-icon-text-svg-width: var(--arc-badge-svg-width, 1em); 3836 } 3837 3838 /* CORE ------------------------------------------------------------⢠*/ 3839 3840 [arc-badge-wrapper]:not([hidden]) { 3841 flex: var(--arc-badge-flex, var(${mr}â¢flex, unset)); 3842 align-self: var(--arc-badge-align-self, flex-start); 3843 display: var(${mr}â¢display, inline-flex); 3844 align-items: center; 3845 justify-content: center; 3846 height: 1lh; 3847 max-height: 1lh; 3848 vertical-align: bottom; 3849 3850 &:has(>[data-is-flexible]) { 3851 min-width: var(--arc-badge-min-width, var(${mr}â¢minâ¢width)); 3852 } 3853 } 3854 3855 [arc-badge] { 3856 font-size: var(--arc-badge-font-size, var(${mr}â¢fontâ¢size)); 3857 font-weight: var(--arc-font-weight-600); 3858 3859 flex: var(${mr}â¢flex); 3860 display: var(${mr}â¢display, inline-flex); 3861 align-items: center; 3862 justify-content: center; 3863 height: var(${mr}â¢size); 3864 padding-inline: var(${mr}â¢paddingâ¢inline); 3865 3866 overflow: hidden; 3867 white-space: nowrap; 3868 line-height: 1; 3869 3870 color: var(--arc-badge-color, var(${ks})); 3871 background: var(--arc-badge-background, var(${ws})); 3872 border-radius: var(${mr}â¢borderâ¢radius); 3873 mix-blend-mode: var(--arc-badge-mix-blend-mode, unset); 3874 3875 :is([data-element=icon], [data-element=text]) { 3876 font-size: var(${mr}â¢fontâ¢sizeâ¢text, 1em); 3877 } 3878 3879 &[data-is-uppercase] [data-element=text] { 3880 text-transform: uppercase; 3881 font-size: var(${mr}â¢fontâ¢sizeâ¢caps); 3882 } 3883 } 3884 3885} 3886`,bu=["brand","blue","neutral","purple","green","yellow","red","orange","mint","maroon","mono","mono-inverse","ai","overlay-light","overlay-dark"],wf=["brand",...bu.filter(r=>r!=="brand")],Sf=["neutral",...bu.filter(r=>r!=="neutral")],Cf=$e(ht,wf),Af=$e(ht,Sf),zf=$e(ze,["inherit","lg","md","sm"]),Ef=$e(pa,["hug","fill"]),_f=["high","low"],Pf=$e(Ur,["brand-blue","brand-black","neutral","info","success","warning","critical","ai","overlay-light","overlay-dark"]),Tf={"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"},If=({children:r,icon:e,text:a,isFlipped:t,isFlexible:o,isUppercase:n,color:c,variant:l,size:u="inherit",layout:h="hug",contrast:p="high",...f})=>{const g=c??Tf[l??"brand-blue"],v=r||(0,i.jsx)(ue,{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":p,"data-color":g,"data-layout":h,"data-size":u,"data-is-flexible":m?"":void 0,"data-is-uppercase":n?"":void 0,children:v})})};Cr("ArcBadge",kf);const Yr=d`--arcâ¢badgeâ¢count`,Ss=d`${Yr}â¢fg`,Cs=d`${Yr}â¢bg`,Rf=fu({fg:Ss,bg:Cs}),jf=mu({fg:Ss,bg:Cs}),Mf=d` 3887 &:has(>[data-size=lg]) { 3888 ${Yr}â¢fontâ¢size: var(${b}â¢14); 3889 ${Yr}â¢size: var(${b}â¢24); 3890 ${Yr}â¢paddingâ¢inline: var(${b}â¢4); 3891 } 3892 3893 &:has(>[data-size=md]) { 3894 ${Yr}â¢fontâ¢size: var(${b}â¢12); 3895 ${Yr}â¢size: var(${b}â¢20); 3896 ${Yr}â¢paddingâ¢inline: var(${b}â¢4); 3897 } 3898 3899 &:has(>[data-size=sm]) { 3900 ${Yr}â¢fontâ¢size: var(${b}â¢10); 3901 ${Yr}â¢size: var(${b}â¢16); 3902 ${Yr}â¢paddingâ¢inline: var(${b}â¢4); 3903 } 3904 3905 &:has(>[data-size=inherit]) { /** @default ⢠scalable based on 'md' size */ 3906 ${Yr}â¢fontâ¢size: 1em; 3907 ${Yr}â¢fontâ¢sizeâ¢text: 0.75em; 3908 ${Yr}â¢size: 1.25em; 3909 ${Yr}â¢paddingâ¢inline: 0.25em; 3910 } 3911`,Lf=d` 3912 &:has(>[data-shape=square]) { 3913 ${Yr}â¢borderâ¢radius: var(${b}â¢4); 3914 } 3915 3916 &:has(>[data-shape=circle]) { 3917 ${Yr}â¢borderâ¢radius: var(--arc-border-radius-pill); 3918 } 3919`,Df=d` 3920@layer arc-components { 3921 3922[arc-badge-count-wrapper] { 3923 ${Rf} 3924 ${jf} 3925 ${Mf} 3926 ${Lf} 3927} 3928 3929/* CORE ------------------------------------------------------------⢠*/ 3930 3931[arc-badge-count-wrapper]:not([hidden]) { 3932 flex: none; 3933 align-self: var(--arc-badge-count-align-self, flex-start); 3934 display: inline-flex; 3935 align-items: center; 3936 justify-content: center; 3937 height: 1lh; 3938 max-height: 1lh; 3939 vertical-align: bottom; 3940} 3941 3942[arc-badge-count] { 3943 font-size: var(--arc-badge-count-font-size, var(${Yr}â¢fontâ¢size)); 3944 font-weight: var(--arc-font-weight-600); 3945 3946 flex: none; 3947 display: inline-flex; 3948 align-items: center; 3949 justify-content: center; 3950 height: var(${Yr}â¢size); 3951 min-width: var(${Yr}â¢size); 3952 padding-inline: var(${Yr}â¢paddingâ¢inline); 3953 3954 white-space: nowrap; 3955 line-height: normal; 3956 3957 color: var(--arc-badge-count-color, var(${Ss})); 3958 background: var(--arc-badge-count-background, var(${Cs})); 3959 border-radius: var(${Yr}â¢borderâ¢radius); 3960 mix-blend-mode: var(--arc-badge-count-mix-blend-mode, unset); 3961 3962 [data-element=text] { 3963 font-size: var(${Yr}â¢fontâ¢sizeâ¢text, 1em); 3964 } 3965} 3966 3967`,Of=$e(ze,["inherit","lg","md","sm"]),Bf=$e(Ur,["neutral","brand","critical","warning","success","inverse"]),Nf=["low","high"],Ff=$e(wo,["square","circle"]),Hf={neutral:"neutral",brand:"brand",critical:"red",warning:"yellow",success:"green",inverse:"mono"},Vf=({children:r,text:e,color:a,variant:t,contrast:o,size:n="inherit",shape:c="square",...l})=>{const u=r||(0,i.jsx)("span",{"data-element":"text",children:e}),h=a??Hf[t??"neutral"],p=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":p,"data-shape":c,"data-size":n,children:u})})};Cr("ArcBadgeCount",Df);const sa=d`--arcâ¢banner`,Le=d`${sa}â¢bg`,Pe=d`${sa}â¢fg`,ra=d`${sa}â¢columns`,Fa=d`${sa}â¢border`,As=d`${sa}â¢borderâ¢radius`,Xo=d`${sa}â¢padding`,kt=d`${sa}â¢minâ¢height`,Ec=d`${sa}â¢body`,Zt=d`${Ec}â¢fontâ¢size`,_c=d`${Ec}â¢gap`,$u=d`${Ec}â¢flexâ¢direction`,yu=d`${Ec}â¢minâ¢width`,zs=d`${sa}â¢icon`,Jt=d`${zs}â¢fontâ¢size`,Es=d`${zs}â¢padding`,tt=d`${zs}â¢color`,xu=d`${sa}â¢action`,_s=d`${xu}â¢justify`,Ps=d`${xu}â¢gap`,qo=d`${sa}â¢columnâ¢gap`,Ts=d`${sa}â¢rowâ¢gap`,Gf=d` 3968 &:where([variant=ai]) { 3969 ${Pe}: var(--arc-color-fg-primary); 3970 /* Note: uses components-specific gradient style from: bannerStyles import */ 3971 ${Le}: var(--arc-banner-gradient-ai-50) padding-box, var(--arc-banner-gradient-ai-100) border-box; 3972 ${Fa}: var(--arc-border-width-sm) solid transparent; 3973 } 3974 3975 &:where([variant=announcement]) { 3976 ${Pe}: var(--arc-color-fg-primary); 3977 ${tt}: var(--arc-color-fg-brand-mid); 3978 ${Le}: var(--arc-color-bg-blue-muted); 3979 ${Fa}: var(--arc-border-width-sm) solid var(--arc-color-border-blue-subtle); 3980 } 3981 3982 &:where([variant=critical]) { 3983 ${Pe}: var(--arc-color-fg-primary); 3984 ${tt}: var(--arc-color-fg-critical-mid); 3985 ${Le}: var(--arc-color-bg-critical-muted); 3986 ${Fa}: var(--arc-border-width-sm) solid var(--arc-color-border-critical-subtle); 3987 } 3988
3989 &:where([variant=info]) { 3990 ${Pe}: var(--arc-color-fg-primary); 3991 ${tt}: var(--arc-color-fg-info-mid); 3992 ${Le}: var(--arc-color-bg-info-muted); 3993 ${Fa}: var(--arc-border-width-sm) solid var(--arc-color-border-info-subtle); 3994 } 3995 3996 &:where([variant=neutral]) { 3997 ${Pe}: var(--arc-color-fg-secondary); 3998 ${tt}: var(--arc-color-fg-secondary); 3999 ${Le}: var(--arc-color-alpha-muted); 4000 ${Fa}: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 4001 } 4002 4003 &:where([variant=success]) { 4004 ${Pe}: var(--arc-color-fg-primary); 4005 ${tt}: var(--arc-color-fg-success-mid); 4006 ${Le}: var(--arc-color-bg-success-muted); 4007 ${Fa}: var(--arc-border-width-sm) solid var(--arc-color-border-success-subtle); 4008 } 4009 4010 &:where([variant=warning]) { 4011 ${Pe}: var(--arc-color-fg-primary); 4012 ${tt}: var(--arc-color-fg-warning-mid); 4013 ${Le}: var(--arc-color-bg-warning-muted); 4014 ${Fa}: var(--arc-border-width-sm) solid var(--arc-color-border-warning-subtle); 4015 } 4016`,Uf=d` 4017 &:where([variant=ai]) { 4018 ${Pe}: var(--arc-color-fg-on-stark); 4019 /* Note: uses components-specific gradient style from: bannerStyles import */ 4020 ${Le}: var(--arc-banner-gradient-ai-300); 4021 } 4022 4023 &:where([variant=announcement]) { 4024 ${Pe}: var(--arc-color-fg-on-stark); 4025 ${Le}: var(--arc-color-bg-blue-stark); 4026 } 4027 4028 &:where([variant=critical]) { 4029 ${Pe}: var(--arc-color-fg-on-stark); 4030 ${Le}: var(--arc-color-bg-critical-mid); 4031 } 4032 4033 &:where([variant=info]) { 4034 ${Pe}: var(--arc-color-fg-on-stark); 4035 ${Le}: var(--arc-color-bg-info-stark); 4036 } 4037 4038 &:where([variant=neutral]) { 4039 ${Pe}: var(--arc-color-fg-on-stark); 4040 ${Le}: var(--arc-color-bg-neutral-stark); 4041 } 4042 4043 &:where([variant=success]) { 4044 ${Pe}: var(--arc-color-fg-on-stark); 4045 ${Le}: var(--arc-color-bg-success-stark); 4046 } 4047 4048 &:where([variant=warning]) { 4049 ${Pe}: var(--arc-color-fg-on-mid); 4050 ${Le}: var(--arc-color-bg-warning-mid); 4051 } 4052`,Kf=d` 4053 ${_c}: 0.375em; 4054 ${$u}: column; 4055 ${yu}: 7em; 4056 ${Ps}: 0.75em; 4057 ${qo}: 0.75em; 4058 ${Ts}: 0.75em; 4059 4060 /* INSET SETUP ---------------------------------------------------⢠*/ 4061 4062 &[layout=inset] { 4063 ${Gf} 4064 4065 ${Xo}: 0 0.75em 0 1em; 4066 ${As}: var(--arc-border-radius-lg); 4067 ${_c}: 0.125em; 4068 ${Es}: 0.0625em; 4069 ${qo}: 0.625em; 4070 4071 ${kt}: 5em; 4072 4073 &:where([density=comfortable]) { 4074 &:not(:has([arc-banner-actions], [arc-banner-dismiss]))) { 4075 ${kt}: 4.75em; 4076 } 4077 &:has([arc-banner-heading]):not(:has([arc-banner-message])), 4078 &:has([arc-banner-message]):not(:has([arc-banner-heading])), 4079 &:not(:has([arc-banner-message], [arc-banner-heading])) { 4080 ${kt}: 3.5em; 4081 ${Ts}: 0.25em; 4082 4083 &:has([arc-banner-actions]) { 4084 ${kt}: 3.75em; 4085 } 4086 } 4087 } 4088 4089 &[action-placement=bottom] { 4090 ${_s}: flex-start; 4091 4092 &[density=compact] { 4093 ${Xo}: 0 0.25em 0 0.5em; 4094 } 4095 } 4096 4097 &[density=compact]:where([action-placement=inline]) { 4098 line-height: normal; 4099 4100 [arc-banner-grid] { 4101 font-size: var(${Zt}); 4102 } 4103 } 4104 } 4105 4106 /* BLEED SETUP ---------------------------------------------------⢠*/ 4107 4108 &[layout=bleed] { 4109 ${Uf} 4110 4111 ${kt}: 4em; 4112 ${Xo}: 0 0.75em 0 1em; 4113 ${Fa}: none; 4114 ${As}: 0; 4115 ${_c}: 0.125em; 4116 ${qo}: 1em; 4117 ${_s}: flex-end; 4118 ${Es}: 0.125em; 4119 4120 &[density=compact], 4121 &[alignment=center] { 4122 ${Jt}: 1.125em; 4123 line-height: normal; 4124 4125 [arc-banner-grid] { 4126 font-size: var(${Zt}); 4127 } 4128 } 4129 } 4130 4131 /* DENSITIES -----------------------------------------------------⢠*/ 4132 4133 &[density=comfortable] { 4134 ${Jt}: 1em; 4135 ${Zt}: 0.875em; 4136 } 4137 4138 &[density=compact] { 4139 ${kt}: 2em; 4140 ${Xo}: 0 0.25em 0 0.5em; 4141 ${Zt}: 0.75em; 4142 ${Ps}: 0.5em; 4143 ${qo}: 0.5em; 4144 4145 &[action-placement=inline] { 4146 ${Jt}: 1em; 4147 } 4148 4149 &[action-placement=bottom] { 4150 ${Jt}: 0.875em; 4151 } 4152 4153 [arc-banner-grid] { 4154 align-self: center; 4155 } 4156 } 4157 4158 /* Inter-component communication ⢠ArcIcon/ArcIconText/ArcLink ---⢠*/ 4159 4160 &[layout=inset] { 4161 &[density=compact]:where([action-placement=inline]) { 4162 --arc-icon-text-icon-color: var(--arc-banner-icon-color, var(${tt})); 4163 --arc-icon-text-gap: 0.375em; 4164 } 4165 4166 [arc-banner-icon] { 4167 --arc-icon-color: var(--arc-banner-icon-color, var(${tt})); 4168 } 4169 } 4170 4171 &[layout=bleed] { 4172 &:where([density=compact], [alignment=center]) { 4173 --arc-icon-text-gap: 0.375em; 4174 } 4175 4176 &[alignment=center] [arc-banner-grid] { 4177 --arc-icon-height: 100%; 4178 --arc-icon-max-height: 100%; 4179 --arc-icon-text-icon-size: var(${Jt}); 4180 } 4181 } 4182 4183 &[density=compact] [arc-banner-body] { 4184 --arc-icon-height: 100%; 4185 --arc-icon-max-height: 100%; 4186 --arc-icon-text-icon-size: 1.125em; 4187 } 4188 4189`,Wf=d` 4190 &[layout=inset] { 4191 [arc-banner-grid] { 4192 margin-block: 0.75em; 4193 } 4194 4195 &[density=compact] { 4196 &[action-placement=bottom] { 4197 [arc-banner-grid] { 4198 margin-block: 0.25em 0.625em; 4199 } 4200 } 4201 4202 &:not([action-placement=bottom]) { 4203 [arc-banner-grid] { 4204 margin-block: 0.25em; 4205 line-height: normal; 4206 } 4207 4208 [arc-banner-icon], 4209 [arc-banner-body] { 4210 align-self: center; 4211 } 4212 } 4213 } 4214 4215 &[action-placement=bottom] { 4216 [arc-banner-actions] { grid-row: 2; }
4217 &:has([arc-banner-icon]) [arc-banner-actions] { grid-column: 2 / -1; } 4218 &:not(:has([arc-banner-icon])) [arc-banner-actions] { grid-column: 1 / -1; } 4219 } 4220 } 4221`,Xf=d` 4222 &[layout=bleed] { 4223 &[density=compact] { 4224 [arc-banner-grid] { 4225 margin-block: 0.25em; 4226 } 4227 } 4228 4229 [arc-banner-grid] { 4230 margin-block: 0.5em; 4231 align-self: center; 4232 align-items: center; 4233 } 4234 4235 &[alignment=center] { 4236 [arc-banner-grid] { 4237 font-size: var(${Zt}); 4238 place-items: center; 4239 line-height: normal; 4240 } 4241 } 4242 } 4243`,qf=d` 4244 &:where([action-placement=inline]) { 4245 align-items: flex-start; 4246 4247 &[density=compact] { 4248 ${ra}: 1fr auto auto; 4249 4250 &:not(:has([arc-banner-actions])):has([arc-banner-dismiss]), 4251 &:not(:has([arc-banner-dismiss])):has([arc-banner-actions]) { 4252 ${ra}: 1fr auto; 4253 } 4254 } 4255 4256 &[density=comfortable] { 4257 ${ra}: auto 1fr auto auto; 4258 4259 &:has([arc-banner-icon]):has([arc-banner-actions]):not(:has([arc-banner-dismiss])), 4260 &:has([arc-banner-icon]):has([arc-banner-dismiss]):not(:has([arc-banner-actions])) { 4261 ${ra}: auto 1fr auto; 4262 } 4263 4264 &:not(:has([arc-banner-icon])):has([arc-banner-actions]):has([arc-banner-dismiss]) { 4265 ${ra}: 1fr auto auto; 4266 } 4267 4268 &:has([arc-banner-icon]):not(:has([arc-banner-actions])):not(:has([arc-banner-dismiss])) { 4269 ${ra}: auto 1fr; 4270 } 4271 &:not(:has([arc-banner-icon])):has([arc-banner-actions]):not(:has([arc-banner-dismiss])), 4272 &:not(:has([arc-banner-icon])):has([arc-banner-dismiss]):not(:has([arc-banner-actions])) { 4273 ${ra}: 1fr auto; 4274 } 4275 } 4276 4277 &:not(:has([arc-banner-icon], [arc-banner-dismiss], [arc-banner-actions])) { 4278 ${ra}: 1fr; 4279 } 4280 } 4281 4282 &:where([action-placement=bottom]) { 4283 ${ra}: auto 1fr auto; 4284 4285 &:not(:has([arc-banner-icon])) { 4286 ${ra}: 1fr auto; 4287 } 4288 4289 &:not(:has([arc-banner-dismiss])) { 4290 ${ra}: auto 1fr; 4291 } 4292 4293 &:not(:has([arc-banner-icon])):not(:has([arc-banner-dismiss])) { 4294 ${ra}: 1fr; 4295 } 4296 } 4297`,Yf=d` 4298 width: var(--arc-banner-width, 100%); 4299 max-width: 100%; 4300 border: var(--arc-banner-border, var(${Fa})); 4301 background: var(--arc-banner-background, var(${Le})); 4302 border-radius: var(--arc-banner-border-radius, var(${As})); 4303 padding: var(--arc-banner-padding, var(${Xo})); 4304 min-height: var(--arc-banner-min-height, var(${kt}, auto)); 4305 font-size: var(--arc-banner-font-size, initial); 4306 line-height: var(--arc-line-height-loose); 4307 overflow: var(--arc-banner-overflow, unset); 4308 4309 &:not([hidden]) { 4310 display: flex; 4311 align-items: center; 4312 } 4313 4314 ${qf} 4315 4316 [arc-banner-grid] { 4317 color: var(--arc-banner-color, var(${Pe})); 4318 flex: 1; 4319 4320 display: grid; 4321 align-items: baseline; 4322 grid-template-columns: var(${ra}); 4323 column-gap: var(${qo}); 4324 row-gap: var(${Ts}); 4325 } 4326 4327 [arc-banner-body] { 4328 color: var(--arc-banner-color, var(${Pe})); 4329 flex: 1; 4330 min-width: var(--arc-banner-body-min-width, var(${yu})); 4331 4332 display: flex; 4333 flex-direction: var(${$u}); 4334 gap: var(${_c}); 4335 } 4336 4337 [arc-banner-icon] { 4338 font-size: var(${Jt}); 4339 padding-inline: var(${Es}); 4340 } 4341 4342 [arc-banner-heading], 4343 [arc-banner-message] { 4344 flex: none; 4345 } 4346 4347 [arc-banner-heading], 4348 [arc-banner-message], 4349 [arc-banner-actions] { 4350 font-size: var(${Zt}); 4351 margin: 0; 4352 } 4353 4354 [arc-banner-actions] { 4355 display: flex; 4356 flex-flow: row wrap; 4357 align-items: flex-start; 4358 justify-content: var(--arc-banner-action-justify, var(${_s})); 4359 gap: var(--arc-banner-action-gap, var(${Ps})); 4360 } 4361 4362`,Zf=d` 4363@layer arc-components { 4364 ${jv} 4365 4366 [arc-banner] { 4367 /* CORE VARIABLES -----------------------------------------------⢠*/ 4368 ${Kf} 4369 4370 /* CORE STYLES --------------------------------------------------⢠*/ 4371 ${Yf} 4372 4373 /* INSET LAYOUT -------------------------------------------------⢠*/ 4374 ${Wf} 4375 4376 /* BLEED LAYOUT -------------------------------------------------⢠*/ 4377 ${Xf} 4378 } 4379 4380} 4381`,Jf=["comfortable","compact"],Qf=["inset","bleed"],rm=["inline","bottom"],em=["left","center"],am=[...Da],tm=[...Ur,"announcement"],om=$e(tm,["ai","announcement","critical","info","neutral","success","warning"]),ot={layout:"inset",variant:"neutral",density:"comfortable",actionPlacement:"inline",alignment:"left",showDismiss:!0},nm=r=>r==="critical"||r==="warning"?"alert":"status",cm=({children:r,id:e,icon:a,dismissProps:t,heading:o,density:n=ot.density,layout:c=ot.layout,actionPlacement:l=ot.actionPlacement,alignment:u=ot.alignment,actionSlot:h,showDismiss:p=ot.showDismiss,message:f,variant:g=ot.variant,onClose:v,...m})=>{const y=Or(e,"arc-banner"),S=Xi(a),k=u==="center",w=c==="bleed",z=c==="inset",x=n==="compact",_=l==="inline",P=!!S,U=z&&g==="ai"?"ai-200":void 0,T={variant:g,layout:c,density:n,alignment:u,"action-placement":l},L=()=>(0,i.jsx)(Ar,{icon:S,gradient:U}),G=()=>(0,i.jsx)(i.Fragment,{children:!!h&&(0,i.jsx)("span",{"arc-banner-actions":"",children:h})}),I=()=>(0,i.jsx)("div",{"arc-banner-dismiss":"",children:(0,i.jsx)(Br,{icon:"fa-regular fa-xmark-large",layout:"icon",variant:z||w&&g==="warning"?"common":"alpha",hierarchy:"tertiary",shape:"square","aria-label":"Dismiss",size:x?"sm":"md",...t,onClick:er=>{t?.onClick?.(er),v?.()}})}),H=({showActions:er=!0})=>(0,i.jsx)("div",{"arc-banner-body":"",children:r||(0,i.jsxs)(ue,{icon:(0,i.jsx)(L,{}),children:[!!o&&(0,i.jsx)("strong",{children:o})," ",f," ",er&&h]})}),V=()=>(0,i.jsxs)(i.Fragment,{children:[P&&(0,i.jsx)("span",{"arc-banner-icon":"",children:(0,i.jsx)(L,{})}),(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:nm(g??ot.variant),...m,...T,"arc-banner":"",id:y,children:(0,i.jsxs)("div",{"arc-banner-grid":"",children:[k?(0,i.jsx)(H,{}):(0,i.jsxs)(i.Fragment,{children:[x&&_?(0,i.jsx)(H,{showActions:!1}):(0,i.jsx)(V,{}),(0,i.jsx)(G,{})]}),p&&(0,i.jsx)(I,{})]})})};Cr("ArcBanner",Zf);const Ha=d`--arcâ¢label`,Yo=d`${Ha}â¢cursor`,Zo=d`${Ha}â¢opacity`,im=d` 4382@layer arc-components { 4383 4384 [arc-label] { 4385 /* Inter-Component Communication -------------------------------⢠*/ 4386 /* also applies to nested ArcLabelContent */ 4387 ${Zo}: var(--arc-label-opacity, unset); 4388 ${Zo}â¢disabled: var(--arc-label-opacity-disabled, var(--arc-alpha-40)); 4389 4390 /* Internal STYLES ---------------------------------------------⢠*/ 4391 ${Ha}â¢display: var(--arc-label-display, inline-flex); 4392 ${Ha}â¢gap: var(--arc-label-gap, var(${b}â¢8)); 4393 ${Ha}â¢alignâ¢items: var(--arc-label-align-items, baseline); 4394 4395 ${Yo}: var(--arc-label-cursor, pointer); 4396 ${Yo}â¢disabled: var(--arc-label-cursor-disabled, not-allowed); 4397 4398 &:has(:disabled) { 4399 ${Yo}: var(${Yo}â¢disabled); 4400 ${Zo}: var(${Zo}â¢disabled); 4401 } 4402 4403 &[data-layout=fill] { 4404 ${Ha}â¢display: flex; 4405 } 4406 } 4407 4408 /* CORE STYLES ---------------------------------------------------⢠*/ 4409 [arc-label]:not([hidden]) { 4410 display: var(${Ha}â¢display); 4411 align-items: var(${Ha}â¢alignâ¢items); 4412 gap: var(${Ha}â¢gap); 4413 cursor: var(${Yo}); 4414 } 4415 4416} 4417`,sm=fr(pa,["hug","fill"]),wt=({layout:r,...e})=>(0,i.jsx)("label",{...e,"arc-label":"","data-layout":r});Cr("ArcLabel",im);const lm=d` 4418@layer arc-components { 4419 4420 [arc-label-content] { 4421 opacity: var(--arc-label-opacity, var(${Zo}, unset)); 4422 transition: var(--arc-label-transition, opacity 100ms ease-out); 4423 user-select: var(--arc-label-user-select, none); 4424 -webkit-user-select: var(--arc-label-user-select, none); 4425 } 4426 4427} 4428`,St=r=>(0,i.jsx)("span",{...r,"arc-label-content":""});Cr("LabelContent",lm);const dm={checkbox:"checkbox",radio:"radio",switch:"radio"},Jo=({id:r,indeterminate:e,type:a,onChange:t,...o}
4428)=>{const n=a==="checkbox"&&!!e,c=(0,s.useRef)(null),l=Or(r,`arc-${a}`),u=h=>p=>{if(!(p?.target instanceof HTMLInputElement))return;const f={checked:p?.target.checked,indeterminate:p?.target?.indeterminate,name:p?.target?.name,value:o?.value};h?.(f,p)};return(0,s.useEffect)(()=>{c.current?.type==="checkbox"&&(c.current.indeterminate=!!e)},[e]),(0,i.jsx)("input",{...o,id:l,ref:c,type:dm[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:u(t)})},um=d` 4429@layer arc-components { 4430 4431 [arc-input-mask] { 4432 ${W}â¢borderâ¢width: var(--arc-border-width-sm); 4433 ${W}â¢border: var(${W}â¢borderâ¢width) solid var(${W}â¢borderâ¢color); 4434 4435 /* Inter-Component Communication ---------------------------------⢠*/ 4436 4437 /* for: ArcIcon */ 4438 --arc-icon-size: var(${W}â¢iconâ¢size); /* ArcIcon */ 4439 4440 /* STATES --------------------------------------------------------⢠*/ 4441 4442 &:has(:disabled) { 4443 ${W}â¢cursor: not-allowed; 4444 } 4445 4446 &:has(:focus:focus-visible) { 4447 ${W}â¢outline: var(${W}
4447â¢borderâ¢width) solid var(--arc-color-border-focus); 4448 } 4449 } 4450 4451 /* CORE STYLES -----------------------------------------------------⢠*/ 4452 4453 [arc-input-mask-wrapper] { 4454 align-self: normal; 4455 display: flex; 4456 align-items: center; 4457 justify-content: center; 4458 max-height: 1lh; 4459 } 4460 4461 [arc-input-mask] { 4462 position: relative; 4463 display: inline-flex; 4464 align-items: center; 4465 justify-content: center; 4466 width: var(${W}â¢width); 4467 height: var(${W}â¢height); 4468 opacity: var(${W}â¢opacity, var(--arc-alpha-100)); 4469 4470 color: var(${W}â¢color, transparent); 4471 background: var(${W}â¢background); 4472 border: var(${W}â¢border); 4473 border-radius: var(${W}â¢borderâ¢radius); 4474 translate: var(${W}â¢translate, unset); 4475 4476 outline: var(${W}â¢outline, none); 4477 outline-offset: var(${W}â¢borderâ¢width); 4478 4479 transition-duration: 100ms; 4480 transition-behavior: allow-discrete; 4481 transition-timing-function: ease-in-out; 4482 transition-property: 4483 opacity, 4484 background, 4485 color, 4486 border-color, 4487 outline; 4488 4489 [arc-input-type] { 4490 flex: none; 4491 outline: none; 4492 appearance: none; 4493 position: absolute; 4494 inset: calc(var(${W}â¢borderâ¢width) * -1); 4495 cursor: var(${W}â¢cursor, pointer); 4496 margin: 0; 4497 padding: 0; 4498 border: 0; 4499 z-index: var(${W}â¢zâ¢index, unset); 4500 } 4501 } 4502 4503} 4504`,Pc=({type:r,...e})=>(0,i.jsx)("span",{"arc-input-mask-wrapper":"",children:(0,i.jsx)("span",{...e,"arc-input-mask":r})});Cr("ArcBooleanInputMask",um);const he=d`--arcâ¢checkbox`,hm=d` 4505@layer arc-components { 4506 4507 [arc-checkbox] { 4508 /* SIZES -------------------------------------------------------⢠*/ 4509 &[data-size=inherit] { 4510 ${he}â¢fontâ¢size: 1em; 4511 ${he}â¢iconâ¢size: 0.625em; 4512 ${he}â¢size: 1.125em; 4513 ${he}â¢gap: 0.5em; 4514 } 4515 4516 &[data-size=md] { 4517 ${he}â¢fontâ¢size: var(${b}â¢14); 4518 ${he}â¢iconâ¢size: var(${b}â¢10); 4519 ${he}â¢size: var(${b}â¢18); 4520 ${he}â¢gap: var(${b}â¢8); 4521 } 4522 4523 &[data-size=sm] { 4524 ${he}â¢fontâ¢size: var(${b}â¢12); 4525 ${he}â¢iconâ¢size: var(${b}â¢10); 4526 ${he}â¢size: var(${b}â¢16); 4527 ${he}â¢gap: var(${b}â¢6); 4528 } 4529 4530 /* Inter-Component Communication -------------------------------⢠*/ 4531 /* for: ArcBooleanInputMask */ 4532 ${W}â¢borderâ¢radius: var(${b}â¢4); 4533 ${W}â¢size: var(${he}â¢size); 4534 ${W}â¢iconâ¢size: var(${he}â¢iconâ¢size); 4535 ${W}â¢width: var(${he}â¢size); 4536 ${W}â¢height: var(${he}â¢size); 4537 ${W}â¢translate: 0 var(${b}â¢1m);⢠4538 4539 /* for: ArcLabel */ 4540 --arc-label-gap: var(${he}â¢gap); 4541 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask 4542 to stay inline with the label text 4543 regardless of applied line-height */ 4544 } 4545 4546 /* CORE STYLES ---------------------------------------------------⢠*/ 4547 [arc-checkbox]:not([hidden]) { 4548 font-size: var(${he}â¢fontâ¢size); 4549 display: var(--arc-checkbox-display, inline-flex); 4550 min-height: 1lh; 4551 4552 /* UNCHECKED, NOT-DISABLED, +HOVER ⢠default state */ 4553 &:not(:has(:checked, :indeterminate)) { 4554 ${W}â¢color: transparent; 4555 ${W}â¢borderâ¢color: var(--arc-color-border-stark); 4556 ${W}â¢background: transparent; 4557 4558 &:hover { 4559 ${W}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 4560 ${W}â¢background: var(--arc-color-bg-theme-subtle); 4561 } 4562 4563 &:has(:disabled) { 4564 ${W}â¢borderâ¢color: var(--arc-color-border-disabled); 4565 ${W}â¢background: var(--arc-color-bg-disabled); 4566 } 4567 } 4568 4569 /* DISABLED */ 4570 &:has(:disabled) { 4571 color: var(--arc-color-fg-disabled); 4572 } 4573 4574 /* PRIMARY, +DISABLED */ 4575 &[data-variant=primary] { 4576 &:has(:checked, :indeterminate) { 4577 ${W}â¢color: var(--arc-color-fg-on-theme-heavy); 4578 ${W}â¢borderâ¢color: transparent; 4579 ${W}â¢background: var(--arc-color-bg-theme-heavy); 4580 4581 &:not(:has(:disabled)):hover { 4582 ${W}â¢color: var(--arc-color-fg-on-theme-stark); 4583 ${W}â¢background: var(--arc-color-bg-theme-stark); 4584 } 4585 4586 &:has(:disabled) { 4587 ${W}â¢color: var(--arc-color-fg-on-theme-mid); 4588 ${W}â¢background: var(--arc-color-bg-theme-mid); 4589 } 4590 } 4591 } 4592 4593 /* SECONDARY, +DISABLED */ 4594 &[data-variant=secondary] { 4595 &:has(:checked, :indeterminate) { 4596 ${W}â¢color: var(--arc-color-fg-theme-heavy); 4597 ${W}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 4598 ${W}â¢background: transparent; 4599 4600 &:not(:has(:disabled)):hover { 4601 ${W}â¢color: var(--arc-color-fg-theme-stark); 4602 ${W}â¢borderâ¢color: var(--arc-color-border-theme-stark); 4603 } 4604 4605 &:has(:disabled) { 4606 ${W}â¢color: var(--arc-color-fg-theme-subtle); 4607 ${W}â¢borderâ¢color: var(--arc-color-border-theme-mid); 4608 } 4609 } 4610 } 4611 } 4612 4613} 4614`,pm=fr(pa,["hug","fill"]),gm=fr(ze,["inherit","md","sm"]),vm=fr(Ur,["primary","secondary"]),ku=({children:r,label:e,layout:a,size:t="md",variant:o="primary",useMask:n=!0,...c})=>{const{className:l,title:u,...h}=c,p={className:l,title:u},f=r??e,g=(0,i.jsx)(Jo,{...h,type:"checkbox"}),v=n&&(0,i.jsxs)(Pc,{type:"checkbox",children:[g,(0,i.jsx)(Ar,{icon:h?.indeterminate?"fa-solid fa-minus arc-fw":"fa-solid fa-check arc-fw"})]}),m=!!f&&(0,i.jsxs)(wt,{layout:a,children:[v||g,(0,i.jsx)(St,{children:f})]});return(0,i.jsx)("span",{...p,"arc-checkbox":"","data-size":t,"data-variant":
4614o,children:m||v||g})};Cr("ArcCheckbox",hm);const Ct=()=>{},At=d`--arcâ¢cb`,Se=d`${At}â¢o`,Is=d`${Se}â¢icon`,Rs=d`${Se}â¢text`,wu=d`${At}â¢fs`,Su=d`${At}â¢br`,js=d`${At}â¢di`,Cu=d`${At}â¢pd`,Au=d`${At}â¢gp`,zu=d`${At}â¢bg`,Qo=d`${Se}â¢fg`,Tc=d`${Se}â¢bg`,Eu=d`${Se}â¢bc`,Ms=d`${Se}â¢bw`,Ic=d`${Se}â¢br`,_u=d`${Se}â¢fw`,Pu=d`${Se}â¢ol`,Tu=d`${Se}â¢ow`,Iu=d`${Se}â¢oo`,Ru=d`${Se}â¢lh`,Rc={BAR:d` 4615 ${wu}: var(${b}â¢14); 4616 ${Su}: var(${b}â¢8); 4617 4618 &:is([data-layout=hug], :not([data-layout])) { /** @default */ 4619 ${js}: inline-flex; 4620 } 4621 4622 &[data-layout=fill] { 4623 ${js}: flex; 4624 } 4625 `,OPTIONS:d` 4626 ${Qo}: var(--arc-color-fg-secondary); 4627 ${Tc}: transparent; 4628 ${Eu}: transparent; 4629 ${Ms}: var(${b}â¢1); 4630 ${Ru}: calc(var(${Se}â¢sz) - var(${Ms}) * 2); 4631 ${Tu}: var(${b}â¢2); 4632 ${Iu}: 0; 4633 `,SOLID:d` 4634 ${zu}: transparent; 4635 ${Cu}: 0; 4636 ${Au}: var(${b}â¢2); 4637 4638 ${Ic}: var(${b}â¢8); 4639 4640 /* Solid sizes */ 4641 &:is([data-size=lg], :not([data-size])) { 4642 ${Se}â¢sz: var(${b}â¢40); 4643 ${Is}â¢pd: var(${b}â¢8); 4644 ${Rs}â¢pd: var(${b}â¢12); 4645 } 4646 4647 &[data-size=md] { 4648 ${Se}â¢sz: var(${b}â¢32); 4649 ${Is}â¢pd: var(${b}â¢6); 4650 ${Rs}â¢pd: var(${b}â¢8); 4651 } 4652 `,SOLID_OPTION_STATES:d` 4653 &:not(:has(:disabled, :checked)) { 4654 &:hover { 4655 ${Qo}: var(--arc-color-fg-on-hover-default); 4656 ${Tc}: var(--arc-color-bg-hover-default); 4657 } 4658 } 4659 4660 &:has(:checked) { 4661 ${Qo}: var(--arc-color-fg-primary); 4662 ${Tc}: var(--arc-color-bg-secondary); 4663 ${_u}: var(--arc-font-weight-500); 4664 } 4665 4666 &:has(:disabled) { 4667 ${Qo}: var(--arc-color-fg-disabled); 4668 } 4669 4670 &:has(:focus-within:focus-visible) { 4671 ${Pu}: var(${Tu}) solid var(--arc-color-border-focus); 4672 } 4673 `},fm=d` 4674@layer arc-components { 4675 4676 [arc-checkbox-bar] { 4677 ${Rc.BAR} 4678 ${Rc.OPTIONS} 4679 4680 /* Inter-Component Communication -------------------------------⢠*/ 4681 --arc-label-opacity-disabled: 1; /* intrinsic disabled opacity not needed here; letting tokens handle it */ 4682 --arc-label-align-items: stretch; /* control ArcLabel's vertical footprint; 4683 allows long label text to wrap 4684 without compromising option's 4685 visual border */ 4686 4687 ${Rc.SOLID} 4688 4689 [arc-checkbox-bar-option] { 4690 ${Rc.SOLID_OPTION_STATES} 4691 } 4692 } 4693 4694 /* CORE STYLES ---------------------------------------------------- */ 4695 [arc-checkbox-bar-option] { 4696 flex: 1 1 auto; 4697 display: flex; 4698 position: relative; 4699 border-radius: var(${Ic}); 4700 } 4701 4702 [arc-checkbox-bar]:not([hidden]) { 4703 font-size: var(--arc-checkbox-bar-font-size, var(${wu})); 4704 display: var(${js}); 4705 gap: var(${Au}); 4706 background: var(${zu}); 4707 border-radius: var(${Su}); 4708 padding: var(${Cu}); 4709 margin: 0; 4710 4711 [arc-checkbox] { 4712 flex: 1; 4713 display: flex; 4714 justify-content: center; 4715 border-radius: var(${Ic}); 4716 outline: var(${Pu}, none); 4717 outline-offset: var(${Iu}); 4718 } 4719 4720 /* INPUT ELEMENT -----------------------------------------------⢠*/ 4721 [arc-input-type=checkbox] { 4722 position: absolute; 4723 appearance: none; 4724 pointer-events: none; 4725 opacity: 0; 4726 } 4727 4728 /* Inter-Component Communication -------------------------------⢠*/ 4729 [arc-label] { 4730 flex: 1; 4731 line-height: var(${Ru}); 4732 overflow: hidden; 4733 } 4734 4735 [arc-label-content] { 4736 flex: 1; 4737 display: flex; 4738 align-items: safe center; 4739 justify-content: center; 4740 4741 height: var(${Se}â¢sz); 4742 min-width: var(${Se}â¢sz); 4743 4744 border-radius: var(${Ic}); 4745 border: var(${Ms}
4745) solid var(${Eu}); 4746 background: var(${Tc}); 4747 color: var(${Qo}); 4748 font-weight: var(${_u}, unset); 4749 4750 transition-duration: 200ms; 4751 transition-timing-function: ease-out; 4752 transition-property: 4753 border, 4754 background, 4755 color, 4756 font-weight; 4757 4758 &:has([data-element=text]) { 4759 padding: 0 var(${Rs}â¢pd); 4760 } 4761 4762 &:not(:has([data-element=text])) { 4763 padding: 0 var(${Is}â¢pd); 4764 } 4765 } 4766 4767 [arc-icon-text] [data-element] { 4768 min-width: min-content; 4769 overflow: hidden; 4770 overflow-wrap: break-word; 4771 } 4772 } 4773 4774} 4775`,mm=fr(pa,["hug","fill"]),bm=fr(ze,["lg","md"]),$m=fr(Ur,["solid"]),ju=({children:r,label:e,icon:a,...t})=>{const o=r||(0,i.jsx)(ue,{icon:a,text:e});return(0,i.jsx)("li",{"arc-checkbox-bar-option":"","data-is-checked":t?.checked||void 0,children:(0,i.jsx)(ku,{...t,layout:"fill",useMask:!1,label:o,onChange:t.onChange??Ct})})},ym=({children:r,size:e="lg",layout:a="hug",variant:t="solid",name:o,options:n,values:c,isDisabled:l,onChange:u,...h})=>{const p=Or(o,"arc-checkbox-bar");return(0,i.jsx)("ul",{...h,"arc-checkbox-bar":"","data-size":e,"data-layout":a,"data-variant":t,"is-disabled":l?"":void 0,role:"group",children:n?n.map(({hidden:f,onChange:g,value:v,...m})=>f||v==null||v===""?null:(0,s.createElement)(ju,{...m,key:String(v),name:p,value:v,checked:c?.includes(v)??!1,disabled:l||m.disabled,onChange:g??u??Ct})):r})};Cr("ArcCheckboxBar",fm);const pe=r=>d`max(${r}px, ${r/16}em)`,Ea=d`--arcâ¢chip`,rn=d`${Ea}â¢fg`,en=d`${Ea}â¢bg`,an=d`${Ea}â¢border`,jc=d`${Ea}â¢height`,Mc=d`${Ea}â¢padding`,Lc=d`${Ea}â¢leadingâ¢edge`,Dc=d`${Ea}â¢dismissâ¢edge`,Ls=d`${Ea}â¢avatarâ¢gap`,Oc=d`${Ea}â¢iconâ¢gap`,Bc=d`${Ea}â¢dismissâ¢gap`,xm=d`:where(:hover, [data-simulate=hover], :has([data-simulate=hover]))`,km=d`:not([is-selected], [is-disabled])`,wm=d` 4776 ${rn}: var(--arc-chip-color, var(--arc-color-fg-primary)); 4777 ${en}: var(--arc-chip-background, var(--arc-color-bg-primary)); 4778 ${an}: var(--arc-chip-border-color, var(--arc-color-border-mid)); 4779 ${Ls}: ${pe(6)}; 4780`,Sm=d` 4781 &[data-size=sm] { 4782 ${jc}: ${pe(24)}; 4783 ${Mc}: ${pe(8)}; 4784 ${Lc}: ${pe(1)}; 4785 ${Dc}: 0; 4786 ${Oc}: ${pe(4)}; 4787 ${Bc}: 0; 4788 } 4789 4790 &[data-size=md] { 4791 ${jc}: ${pe(32)}; 4792 ${Mc}: ${pe(12)}; 4793 ${Lc}: ${pe(3)}; 4794 ${Dc}: ${pe(3)}; 4795 ${Oc}: ${pe(8)}; 4796 ${Bc}: ${pe(2)}; 4797 } 4798 4799 &[data-size=lg] { 4800 ${jc}: ${pe(40)}; 4801 ${Mc}: ${pe(16)}; 4802 ${Lc}: ${pe(3)}; 4803 ${Dc}: ${pe(7)}; 4804 ${Oc}: ${pe(8)}; 4805 ${Bc}: ${pe(4)}; 4806 4807 &[has-dismiss] { 4808 ${Ls}: ${pe(8)}; 4809 } 4810 } 4811`,Cm=d` 4812 /* WRAPPER â visible pill ----------------------------------------⢠*/ 4813 display: inline-flex; 4814 align-items: center; 4815 vertical-align: middle; 4816 gap: var(${Bc}); 4817 height: var(${jc}); 4818 border-radius: var(--arc-border-radius-pill); 4819 border: var(--arc-border-width-sm) solid var(${an}); 4820 background: var(${en}); 4821 color: var(${rn}); 4822 font-family: var(--arc-font-family-body); 4823 font-size: var(--arc-chip-font-size, initial); 4824 transition: 4825 background-color 200ms ease-out, 4826 border-color 200ms ease-out, 4827 color 200ms ease-out; 4828 4829 &:has([arc-chip-body]:focus-visible) { 4830 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 4831 outline-offset: var(--arc-border-width-md); 4832 4833 [arc-chip-body]:focus-visible { outline: none; } 4834 } 4835`,Am=d` 4836 /* BODY â content surface + inner slots --------------------------⢠*/ 4837 [arc-chip-body] { 4838 flex: 1; 4839 appearance: none; 4840 display: inline-flex; 4841 align-items: center; 4842 height: 100%; 4843 padding: 0 var(${Mc}); 4844 margin: 0; 4845 background: transparent; 4846 border: none; 4847 4848 /* Asymmetric left padding when an avatar is present â matches the avatar's vertical inset. */ 4849 &:has([arc-avatar-text]) { 4850 padding-inline-start: var(${Lc}); 4851 } 4852 4853 /* Inter-Component Communication ⢠ArcAvatarText ------------⢠*/ 4854 --arc-avatar-text-gap: var(${Ls}); 4855 4856 /* Inter-Component Communication ⢠ArcIconText --------------⢠*/ 4857 --arc-icon-text-gap: var(${Oc}); 4858 --arc-icon-text-line-height: var(--arc-line-height-tight); 4859 } 4860 4861 /* When a dismiss sibling is present, pull body flush right and reserve outer space for it. */ 4862 &[has-dismiss] { 4863 padding-inline-end: var(${Dc}); 4864 [arc-chip-body] { padding-inline-end: 0; } 4865 } 4866`,zm=d` 4867 /* DISMISS â sibling of body -------------------------------------⢠*/ 4868 [data-slot=dismiss]:where(:hover, [data-simulate=hover]) { 4869 background: var(--arc-color-alpha-subtle); 4870 } 4871`,Em=d` 4872 /* INTERACTIVE â only set on interactive wrappers ----------------⢠*/ 4873 &[is-interactive] { 4874 cursor: pointer; 4875 user-select: none; 4876 4877 [arc-chip-body] { 4878 color: inherit; 4879 cursor: inherit; 4880 } 4881 4882 &${xm}${km} { 4883 ${en}: var(--arc-color-bg-hover-default); 4884 ${an}: var(--arc-color-border-hover); 4885 } 4886 } 4887 4888 /* SELECTED ------------------------------------------------------⢠*/ 4889 &[is-selected] { 4890 ${en}: var(--arc-color-bg-blue-muted); 4891 ${an}: var(--arc-color-border-selected); 4892 ${rn}: var(--arc-color-fg-brand-heavy); 4893 } 4894 4895 /* DISABLED ------------------------------------------------------⢠*/ 4896 &[is-disabled] { 4897 ${en}: transparent; 4898 ${an}: var(--arc-color-border-disabled); 4899 ${rn}: var(--arc-color-fg-disabled);
4900 cursor: not-allowed; 4901 } 4902`,_m=d` 4903 &:where([data-variant=ai]) { 4904 background: var(--arc-gradient-ai-50); 4905 4906 &[is-selected] { 4907 background: var(--arc-gradient-ai-100) padding-box, var(--arc-gradient-ai-200) border-box; 4908 border-color: transparent; 4909 ${rn}: var(--arc-color-fg-primary); 4910 } 4911 } 4912`,Pm=d` 4913@layer arc-components { 4914 4915 [arc-chip]:not([hidden]) { 4916 /* SETUP --------------------------------------------------------⢠*/ 4917 ${wm} 4918 4919 /* SIZES --------------------------------------------------------⢠*/ 4920 ${Sm} 4921 4922 /* CORE STYLES --------------------------------------------------⢠*/ 4923 ${Cm} 4924 4925 /* BODY ---------------------------------------------------------⢠*/ 4926 ${Am} 4927 4928 /* DISMISS ------------------------------------------------------⢠*/ 4929 ${zm} 4930 4931 /* STATES -------------------------------------------------------⢠*/ 4932 ${Em} 4933 4934 /* VARIANTS -----------------------------------------------------⢠*/ 4935 ${_m} 4936 } 4937 4938} 4939`,Tm=fr(Ur,["common","ai"]),Im=$e(ze,["sm","md","lg"]),Rm={sm:"xs",md:"sm",lg:"md"},jm={sm:"sm",md:"md",lg:"md"},Ds={variant:"common",size:"md"},Mm=({children:r,text:e,variant:a=Ds.variant,size:t=Ds.size,isSelected:o,isDisabled:n,isStrong:c,icon:l,isFlipped:u,avatar:h,onClick:p,onDismiss:f,dismissProps:g,...v})=>{const m=p!==void 0||o!==void 0,y=m?"button":"span",S=r||e,k=!!h,w=!!l;return(0,i.jsxs)("span",{...v,"arc-chip":"","data-size":t,"data-variant":a,"is-selected":o?"":void 0,"is-disabled":n?"":void 0,"is-interactive":m?"":void 0,"has-dismiss":f?"":void 0,children:[(0,i.jsx)(y,{"arc-chip-body":"",...m&&{type:"button",disabled:n,"aria-pressed":o,"aria-disabled":n||void 0,onClick:n?void 0:p},children:k?(0,i.jsx)(ec,{avatar:{...h,isActive:!n},isStrong:c,size:Rm[t],overflow:"truncate",children:S}):(w||S)&&(0,i.jsx)(ue,{icon:l,isFlipped:u,isStrong:c,size:jm[t],overflow:"truncate",children:S})}),f&&(0,i.jsx)(Br,{"aria-label":typeof e=="string"?`Remove ${e}`:"Dismiss",icon:"fa-regular fa-xmark",...g,layout:"icon",hierarchy:"tertiary",shape:"round",size:"sm","data-slot":"dismiss",disabled:n,onClick:z=>{g?.onClick?.(z),f()}})]})};Cr("ArcChip",Pm);const Lm=["normal","simple","add","edit"],Dm=["solid","gradient"],Om=["swatch","gradient-stop","gradient"],Bm=["standalone","embedded"],Nc=["gradient-field","gradient-stops","angle-slider","angle-presets"],Os=["color-field","eye-dropper","hue-slider","alpha-slider","alpha-input","hex-input","palettes"],Mu=["eye-dropper","alpha-slider","hex-input","palettes"],Nm=[...Os,...Nc],Lu=r=>r.kind==="gradient",Du=r=>r.activePanel==="solid",Fm=r=>r.activePanel==="gradient",Ce={colorPicker:"Color Picker",heading:"Color",panelSolid:"Solid",panelGradient:"Gradient",colorField:"Color Saturation and Value",saturation:"Saturation",value:"Value",colorFieldReadout:(r,e)=>`Saturation ${r}%. Value ${e}%.`,hue:"Hue",hueValue:r=>`Hue ${r}\xB0`,opacity:"Opacity",opacityValue:r=>`Opacity ${r}%`,hex:"Hex",hexInvalid:"Please enter six hex digits \u2192 A1B2C3",hexRgbOnly:"Use six hex digits (RGB only). Opacity is not available.",hexExpandHint:r=>`Please enter six hex digits \u2192 ${r}.`,hexApplyAlphaHint:(r,e)=>`Change to \u2192 #${r} at ${e}% opacity?`,applyExpandedHex:"Apply expanded six-digit hex",applyExpandedHexValue:r=>`Apply expanded hex ${r}`,applyHexWithAlpha:(r,e)=>`Apply #${r} and ${e}% opacity`,eyeDropper:"Dropper",eyeDropperTooltip:"Pick a color",colorPalette:"Color palette",addSwatch:"Add Swatch",addCurrentColor:"Add Current Color",saveColor:"Save Color",save:"Save",cancel:"Cancel",done:"Done",removeColor:"Remove color",removeGradient:"Remove gradient",gradient:"Gradient",gradientStops:"Stops",stopPosition:r=>`Stop ${r} position`,addColorStop:"Add Color Stop",editColorStop:"Edit Color Stop",insertColorStop:"Insert Color Stop",removeColorStop:"Remove Color Stop",distributeColorStops:"Distribute Color Stops",angle:"Angle",gradientAngle:"Gradient angle",gradientAngleOption:r=>`${r}\xB0`},Fc=r=>r?{...Ce,...r}:Ce,Bs=1e-10,Hc=1e-6,tn=1e-4,Ou=2,Z=(r,e,a)=>Math.min(a,Math.max(e,r)),xa=(r,e)=>{const a=10**e;return Math.round(r*a)/a},Bu=(r,e=Hc)=>Math.abs(r)<e?0:Math.abs(1-r)<e?1:r,Hm=r=>{if(!Number.isFinite(r)||r<=0)return Ou;let e=r,a=0;for(;a<12;){const t=Math.round(e);if(Math.abs(e-t)<Bs)return a;e*=10,a+=1}return Ou},Vm=(r,e,a,t)=>[{test:e<0&&a>=0,value:(r<0?Math.abs(e):a)>0?xa(r/(r<0?Math.abs(e):a)*100,t):0},{test:a<0,value:e<0?xa(r/Math.abs(e)*100,t):0},{test:e>=0,value:a>0?xa(r/a*100,t):0}].find(({test:o})=>o)?.value??0,Ns=({value:r,min:e=0,max:a=100,step:t=1,precision:o})=>{const n=Number(e),c=Number(a),l=Math.min(n,c),u=Math.max(n,c),h=Number(t),p=Number(r),f=u-l,g=Number.isFinite(h)&&h>0&&f>0?h/f*100:0,v=o??Hm(g),m=Z(p,l,u),y=f===0?0:(m-l)/f,S=xa(y*100,v),k=xa(100-S,v),w=Vm(m,l,u,v);return{toValue:S,fromValue:k,pctSigned:w}},on=r=>parseInt(r,16),ge=r=>Z(xa(r,0),0,255),Vc=r=>xa((r%360+360)%360,2),Nu=(r,e)=>Bu(xa(Z(r,0,1),e)),De=r=>{const e=(r.h%360+360)%360,a=Z(r.s,0,1),t=Z(r.v,0,1),o=Z(r.a,0,1),n=t*a,c=n*(1-Math.abs(e/60%2-1)),l=t-n;let u=0,h=0,p=0;
4939return e<60?[u,h,p]=[n,c,0]:e<120?[u,h,p]=[c,n,0]:e<180?[u,h,p]=[0,n,c]:e<240?[u,h,p]=[0,c,n]:e<300?[u,h,p]=[c,0,n]:[u,h,p]=[n,0,c],{r:(u+l)*255,g:(h+l)*255,b:(p+l)*255,a:o}},nn=(r,e)=>{const a=Z(r.r,0,255)/255,t=Z(r.g,0,255)/255,o=Z(r.b,0,255)/255,n=Math.max(a,t,o),c=Math.min(a,t,o),l=n-c,u=n===0?0:l/n,h=n;let p=e??0;return l>Bs?(n===a?p=60*((t-o)/l%6):n===t?p=60*((o-a)/l+2):p=60*((a-t)/l+4),p<0&&(p+=360)):p=(p%360+360)%360,{h:p,s:u,v:h,a:Z(r.a,0,1)}},Fu=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,u=0,h=0;return e<60?[l,u,h]=[o,n,0]:e<120?[l,u,h]=[n,o,0]:e<180?[l,u,h]=[0,o,n]:e<240?[l,u,h]=[0,n,o]:e<300?[l,u,h]=[n,0,o]:[l,u,h]=[o,0,n],{r:(l+c)*255,g:(u+c)*255,b:(h+c)*255,a:r.a}},Hu=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 u=(o+n)/2,h=c===0?0:c/(1-Math.abs(2*u-1));return{h:l,s:h,l:u,a:r.a}},Vu=r=>{const e=zt(r.r),a=zt(r.g),t=zt(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),u=Math.cbrt(n),h=Math.cbrt(c),p=.2104542553*l+.793617785*u-.0040720468*h,f=1.9779984951*l-2.428592205*u+.4505937099*h,g=.0259040371*l+.7827717662*u-.808675766*h,v=Math.sqrt(f*f+g*g);let m=Math.atan2(g,f)*180/Math.PI;return m<0&&(m+=360),{L:Z(p,0,1),C:v,h:m,a:Z(r.a,0,1)}},Gu=r=>{const e=Z(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,u=n*n*n,h=c*c*c,p=l*l*l,f=4.0767416621*u-3.3077115913*h+.2309699292*p,g=-1.2684380046*u+2.6097574011*h-.3413193965*p,v=-.0041960863*u-.7034186147*h+1.707614701*p,m=y=>{const S=y<=.0031308?y*12.92:1.055*y**.4166666666666667-.055;return Math.round(Z(S,0,1)*255)};return{r:m(f),g:m(g),b:m(v),a:Z(r.a,0,1)}},zt=r=>{const e=ge(r)/255;return e<=.04045?e/12.92:((e+.055)/1.055)**2.4},Uu=r=>{const e=zt(r.r),a=zt(r.g),t=zt(r.b);return .2126*e+.7152*a+.0722*t},Gc=(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:ge(r.r*t+e.r*o),g:ge(r.g*t+e.g*o),b:ge(r.b*t+e.b*o),a:Nu(a,2)}},cn=(r,e,a,t)=>{const o=t?t(r):r,n=t?t(e):e;return Math.abs(o-n)<=a},Qt=(r,e,a)=>cn(r,e,a,Math.round),Fs=(r,e,a)=>cn(r,e,a),Uc=(r,e)=>!e||!r?!1:Qt(r.r,e.r,1)&&Qt(r.g,e.g,1)&&Qt(r.b,e.b,1)&&Fs(r.a,e.a,1/255+Hc),Hs=(r,e)=>!r||!e?!1:ge(r.r)===ge(e.r)&&ge(r.g)===ge(e.g)&&ge(r.b)===ge(e.b)&&Math.abs(r.a-e.a)<Hc,Vs=(r,e)=>!e||!r?!1:Qt(r.r,e.r,3)&&Qt(r.g,e.g,3)&&Qt(r.b,e.b,3)&&Fs(r.a,e.a,.02),sn=(r,e)=>cn(r.h,e.h,tn)&&cn(r.s,e.s,tn)&&cn(r.v,e.v,tn)&&Fs(r.a,e.a,tn),ro=r=>String(Math.round(Z(r,0,1)*100)),Ku=r=>{const e=r.trim();if(!e)return null;if(e.endsWith("%")){const t=Number(e.slice(0,-1).trim());return Number.isFinite(t)?Z(t/100,0,1):null}if(e.startsWith(".")||e.includes(".")){const t=Number(e);return Number.isFinite(t)?Z(t,0,1):null}const a=Number(e);return Number.isFinite(a)?Z(a/100,0,1):null},Kc=r=>Z(Number(r.toFixed(2)),0,1).toString(),Gm=/^[0-9a-f]+$/i,Um=500,eo=new Map,Gs=r=>({...r}),Km=(r,e)=>{if(eo.size>=Um){const a=eo.keys().next().value;a&&eo.delete(a)}eo.set(r,e?Gs(e):null)},Us=r=>r.split("").map(e=>e+e).join(""),Ks=r=>r.length===3?Us(r):r,Va=r=>r.replace(/#/g,"").trim(),Wu=r=>{const e=r.trim().toLowerCase().replace(/^#/,"");if(![3,4,6,8].includes(e.length))return null;const a=e.length<=4?Us(e):e;if(!Gm.test(a))return null;const t=on(a.slice(0,2)),o=on(a.slice(2,4)),n=on(a.slice(4,6)),c=a.length===8?on(a.slice(6,8))/255:1;return[t,o,n,c].some(l=>Number.isNaN(l))?null:{r:t,g:o,b:n,a:Z(c,0,1)}},_a=r=>{const e=Number(r.trim());return Number.isFinite(e)?e:null},Ws=r=>{const e=r.trim();if(e.endsWith("%")){const t=_a(e.slice(0,-1));return t==null?null:Z(t/100*255,0,255)}const a=_a(e);return a==null?null:Z(a,0,255)},Xs=r=>{const e=r.trim();if(e.endsWith("%")){const t=_a(e.slice(0,-1));return t==null?null:Z(t/100,0,1)}const a=_a(e);return a==null?null:Z(a,0,1)},qs=(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=>
4939h.trim()):n.split(/\s+/).filter(Boolean),u=c&&c.length?c:null;return{channels:l,alphaPart:u}},Wm=r=>{const e=qs(r,/^rgba?\((.*)\)$/);if(!e)return null;let{channels:a,alphaPart:t}=e;if(a.length===4&&t===null&&(t=a[3]??null,a=a.slice(0,3)),a.length!==3)return null;const o=Ws(a[0]),n=Ws(a[1]),c=Ws(a[2]);if(o==null||n==null||c==null)return null;let l=1;if(t){const u=Xs(t);if(u==null)return null;l=u}return{r:o,g:n,b:c,a:l}},Xm=r=>{const e=qs(r,/^hsla?\((.*)\)$/);if(!e)return null;let{channels:a,alphaPart:t}=e;if(a.length===4&&t===null&&(t=a[3]??null,a=a.slice(0,3)),a.length!==3)return null;const o=p=>Number(p.replace("deg","").trim()),n=p=>{if(!p.endsWith("%"))return null;const f=_a(p.slice(0,-1));return f==null?null:f/100},c=o(a[0]),l=n(a[1]),u=n(a[2]);if(!Number.isFinite(c)||l==null||u==null)return null;let h=1;if(t){const p=Xs(t);if(p==null)return null;h=p}return Fu({h:c,s:l,l:u,a:h})},qm=r=>{const e=qs(r,/^oklch\((.*)\)$/);if(!e)return null;const{channels:a,alphaPart:t}=e;if(a.length!==3)return null;const o=p=>{const f=p.trim();if(f.endsWith("%")){const v=_a(f.slice(0,-1));return v!=null?Z(v/100,0,1):null}const g=_a(f);return g!=null?Z(g,0,1):null},n=p=>{const f=p.trim();if(f.endsWith("%")){const v=_a(f.slice(0,-1));return v!=null&&v>=0?v/100*.4:null}const g=_a(f);return g!=null&&g>=0?g:null},c=o(a[0]),l=n(a[1]),u=_a(a[2].trim());if(c==null||l==null||u==null||!Number.isFinite(u))return null;let h=1;if(t){const p=Xs(t);if(p==null)return null;h=p}return Gu({L:c,C:l,h:u,a:h})},Kr=r=>{if(!r||typeof r!="string")return null;const e=r.toLowerCase().trim();if(eo.has(e)){const t=eo.get(e);return t?Gs(t):null}let a=null;return e.startsWith("#")?a=Wu(e):e.startsWith("rgb")?a=Wm(e):e.startsWith("hsl")?a=Xm(e):e.startsWith("oklch")&&(a=qm(e)),Km(e,a),a?Gs(a):null},Xu=(r,e,a)=>{const t=Kr(`#${r}`);return t?a?.shouldApplyParsedAlpha===!0&&(r.length===4||r.length===8)?t:{...t,a:e.a}:null},qu=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)},Yu=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"},Zu=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"},Oe=(r,e=!1)=>{const a=l=>Z(Math.round(l),0,255).toString(16).padStart(2,"0"),t=a(r.r),o=a(r.g),n=a(r.b),c=a(Z(r.a,0,1)*255);return e?`#${t}${o}${n}${c}`:`#${t}${o}${n}`},ao=r=>Oe({...r,a:1},!1).slice(1),Ju=(r,e,a,t,o)=>{const n=Kr(`#${r}`)??e,c={...n,[a]:ge(n[a]+t*o)};return ao(c)},Ys=r=>{const e=Hu(r),a=Math.round(e.h),t=Math.round(e.s*100),o=Math.round(e.l*100);return`hsl(${a} ${t}% ${o}% / ${Kc(Z(e.a,0,1))})`},Ga=r=>{const e=Z(Math.round(r.r),0,255),a=Z(Math.round(r.g),0,255),t=Z(Math.round(r.b),0,255),o=Z(r.a,0,1);return o<1?`rgb(${e} ${a} ${t} / ${Kc(o)})`:`rgb(${e} ${a} ${t})`},Zs=r=>{const e=Vu(r),a=Math.round(e.L*1e3)/10,t=Math.round(e.C/.4*1e3)/10,o=Math.round(e.h),n=Z(e.a,0,1);return n<1?`oklch(${a}% ${t}% ${o} / ${Kc(n)})`:`oklch(${a}% ${t}% ${o})`},qe={ALPHA_MIN:0,ALPHA_MAX:100,ALPHA_SNAP_STEP:10,HUE_MIN:0,HUE_MAX:360,HUE_SNAP_STEP:15,SATURATION_MIN:0,SATURATION_MAX:100,SATURATION_SNAP_STEP:10,VALUE_MIN:0,VALUE_MAX:100,VALUE_SNAP_STEP:10},Qu={auto:r=>r.a<1?Ga(r):Oe({...r,a:1},!1),hex:r=>Oe({...r,a:1},!1),hexa:r=>Oe(r,!0),rgb:r=>Ga(r),hsl:r=>Ys(r),oklch:r=>Zs(r)},Ym=(r,e)=>(Qu[r]??Qu.hex)(e),Dr=r=>typeof r=="string"?r:r.color,Wc=(r,e)=>typeof r!="string"&&r.name?r.name:e??void 0,rh=r=>{const e=Dr(r),a=Kr(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?Oe({...a,a:1},!1):null}},Xc=(r,e)=>{if(Zu(r))return r;const a=(Yu(r)?r:null)??Kr(r)??Kr(e)??{r:0,g:0,b:0,a:1};return nn(a)},nt=(r,e)=>{const a=e?.fallbackHex??"#000000",t=e?.format??"hex",o=Xc(r,a),n={h:(o.h%360+360)%360,s:Z(o.s,0,1),v:Z(o.v,0,1),a:Z(o.a,0,1)},c=De(n),l={r:ge(c.r),g:ge(c.g),b:ge(c.b),a:n.a},u=Ym(t,l);let h,p,f,g,v;const m=l.a<1?"rgb":"hex",y=l.a<1?Ga(l):Oe({...l,a:1},!1),S=no(u,{contrastBias:e?.contrastBias,bgColor:e?.contrastBgColor});return{format:t,value:u,alpha:l.a,autoFormat:m,autoValue:y,contrastColor:S,hsv:n,rgba:l,get hex(){return h??=Oe({...l,a:1},!1)},get hexa(){return p??=Oe(l,!0)},get rgb(){return f??=Ga(l)},get hsl(){return g??=Ys(l)},get oklch(){return v??=Zs(l)}}},eh=(r,e)=>({...nt(r.hsv,{format:e}),name:r.name}),Js=(r,e)=>({color:Dr(r),name:Wc(r,e)}),ln=r=>({color:`#${`00${Math.floor(Math.random()*16777216).toString(16)}`.slice(-6)}`,name:r}),to=r=>Dr(r).trim().toLowerCase(),oo=(r,e)=>{if(to(r)===to(e))return!0;
4939const a=Kr(Dr(r)),t=Kr(Dr(e));return!!a&&!!t&&Uc(a,t)},Qs=(r,e,a)=>{const t=a?.skipIndex;return r.some((o,n)=>n!==t?oo(o,e):!1)},Zm=(r,e)=>Qs(r,e)?r:[...r,e],Zr=r=>typeof r=="object"&&r!==null&&"stops"in r&&Array.isArray(r.stops),ah={r:255,g:255,b:255,a:1},th={r:42,g:42,b:42,a:1},Jm=r=>{let e=r,a=0;for(;e;){const t=e.getAttribute("arc-scheme");if(t==="light")return a%2===0?ah:th;if(t==="dark")return a%2===0?th:ah;t==="inverse"&&(a+=1),e=e.parentElement}return null},Qm=r=>{let e=null;try{e=r?document.documentElement?.querySelector?.(r):document.documentElement}catch{return null}if(e==null)return null;let a=null,t=e,o=0;for(;t&&o<12;){const n=Kr(window.getComputedStyle(t).backgroundColor);if(n&&n.a>0){if(a=a?Gc(a,n):n,n.a===1)break}else{const c=Jm(t);if(c){a=a?Gc(a,c):c;break}}t=t.parentElement,o+=1}return a},no=(r,e)=>{const a=Kr(Dr(r));if(!a||a.a===0)return e?.useScheme?"auto":"inherit";const{darkColor:t,lightColor:o,contrastBias:n,bgColor:c,bgElement:l}=e??{},u=e?.useScheme?"light":t??"#000000",h=e?.useScheme?"dark":o??"#ffffff",p=Z(n??-4,-7,7);let f=a;if(a.a<1){const y=Kr(c??""),S=y&&y.a>0?y:null,k=S?null:Qm(l);f=Gc(a,S??k??{r:255,g:255,b:255,a:1})}const g=Uu(f),v=(g+.05)/.05,m=1.05/(g+.05);return v+p>=m?u:h},rl=r=>r==null?null:{comparisonKey:to(r),selectedRgba:Kr(Dr(r))},oh=(r,e)=>{if(!e)return!1;if(to(r)===e.comparisonKey)return!0;if(!e.selectedRgba)return!1;const a=Kr(Dr(r));return!!a&&Uc(a,e.selectedRgba)},rr={ANGLE:90,ANGLE_MIN:0,ANGLE_MAX:360,ANGLE_SNAP_STEP:15,ANGLE_PRESETS:[0,180,135,225,90,270,45,315],STOPS:[],STOP_MIN:0,STOP_MAX:100},nh=r=>[{color:Dr(r??ln()),at:rr.STOP_MIN},{color:Dr(ln()),at:rr.STOP_MAX}],ka=r=>r.map((e,a)=>({stop:e,index:a})).sort((e,a)=>e.stop.at-a.stop.at||e.index-a.index),ch=r=>ka(r).map(e=>e.stop),Et=(r,e=rr.STOP_MIN,a=rr.STOP_MAX)=>r.map(t=>({...t,at:Z(Math.round(t.at),e,a)})),el=(r,e,a)=>r!=null&&a<=r+1||e!=null&&a>=e-1,rb=(r,e,a)=>el(r[e-1]?.stop.at,r[e+1]?.stop.at,a),dn=(r,e)=>{if((r.angle??rr.ANGLE)!==(e.angle??rr.ANGLE))return!1;const a=r.stops??[],t=e.stops??[];return a.length!==t.length?!1:a.every((o,n)=>o.at===t[n].at&&o.color===t[n].color)},al=(r,e)=>dn({stops:Et(r.stops??[]),angle:r.angle??rr.ANGLE},{stops:Et(e.stops??[]),angle:e.angle??rr.ANGLE}),ct=(r,e)=>r.name===e.name&&Ua(r)===Ua(e),un=(r,e)=>Z(Math.round((r+e)/2),rr.STOP_MIN,rr.STOP_MAX),ih=(r,e,a=rr.STOP_MIN,t=rr.STOP_MAX)=>e<=1?a:a+r/(e-1)*(t-a),sh=r=>{const e=ka(r);if(e.length<=1)return r;const a=[...r];return e.forEach((t,o)=>{a[t.index]={...t.stop,at:Z(Math.round(ih(o,e.length)),rr.STOP_MIN,rr.STOP_MAX)}}),a},lh=(r,e,a)=>{const t=Kr(Dr(r.color)),o=Kr(Dr(e.color));if(!t||!o)return Dr(r.color);const n=e.at-r.at,c=n===0?0:Z((a-r.at)/n,0,1),l={r:t.r+(o.r-t.r)*c,g:t.g+(o.g-t.g)*c,b:t.b+(o.b-t.b)*c,a:t.a+(o.a-t.a)*c};return Oe(l,l.a<1)},eb=r=>{const e=ka(r).map(o=>o.stop);if(e.length<2)return null;let a=0,t=0;for(let o=0;o<e.length-1;o+=1){const n=e[o+1].at-e[o].at;n>a&&(a=n,t=o)}return[e[t],e[t+1]]},dh=(r,e,a="#000000")=>{const t=ka(r);if(e.kind==="between"){const o=t[e.sortedIndex-1],n=t[e.sortedIndex];if(!o||!n)return{color:Dr(a),at:tl(r)};const c=un(o.stop.at,n.stop.at),l=lh(o.stop,n.stop,c);return{color:Dr(l),at:c}}return{color:Dr(a),at:tl(r)}},uh=(r,e)=>{if(r.length===0)return[{color:e??Dr(ln()),at:un(rr.STOP_MIN,rr.STOP_MAX)}];const a=ka(r),t=a[a.length-1],o=a[a.length-2],n=rr.STOP_MAX,c=o?.stop.at??rr.STOP_MIN,l=un(c,n),u={color:e??Dr(t.stop.color),at:n};return r.map((h,p)=>p===t.index?{...h,at:l}:h).concat(u)},tl=r=>{const e=(rr.STOP_MIN+rr.STOP_MAX)/2;if(r.length===0)return e;if(r.length===1)return Z(r[0].at>=e?rr.STOP_MIN:rr.STOP_MAX,rr.STOP_MIN,rr.STOP_MAX);const a=eb(r);return a?un(a[0].at,a[1].at):e},Ua=r=>{const{stops:e=[],angle:a=rr.ANGLE}=r,t=ka(e);if(t.length===0)return"transparent";if(t.length===1)return Dr(t[0].stop.color);const o=t.map(({stop:n})=>`${Dr(n.color)} ${n.at}%`);return`linear-gradient(${a}deg, ${o.join(", ")})`},hh=(r,e)=>r?.name??e??void 0,qc=(r,e="")=>{const a=r.stops??[];if(a.length===0)return Dr(e);const t=ka(a);if(t.length===1)return Dr(t[0].stop.color);let o=0,n=0,c=0,l=0,u=0;for(let p=0;p<t.length;p+=1){const f=t[p-1]?.stop.at??t[p].stop.at,g=t[p].stop.at,v=t[p+1]?.stop.at??g,m=(g-f)/2+(v-g)/2,y=Kr(Dr(t[p].stop.color));y&&(o+=y.r*m,n+=y.g*m,c+=y.b*m,l+=y.a*m,u+=m)}if(u===0)return Dr(e);const h={r:Math.round(o/u),g:Math.round(n/u),b:Math.round(c/u),a:l/u};return Oe(h,h.a<1)},hn=(r,e)=>{const a={stops:r.stops??[],angle:r.angle??rr.ANGLE,...r.name!=null?{name:r.name}:{}},t=qc(a,e?.fallbackColor),o=no(t,{contrastBias:e?.contrastBias,bgColor:e?.contrastBgColor});return{gradient:a,value:Ua(a),baseColor:t,contrastColor:o,...r.name!=null?{name:r.name}:{}}},ph=(r,e)=>{const a=r.stops?.length?r.stops:nh(e),t=r.angle??rr.ANGLE,o={stops:a,angle:t,...r.name!=null?{name:r.name}:{}},n=e?Dr(e):void 0,c=qc(o,n),l=no(c);return{gradient:o,value:Ua(o),baseColor:c,contrastColor:l,...r.name!=null?{name:r.name}:{}}},gh=r=>{const{stops:e=[],angle:a=rr.ANGLE}=r;return e?.length?e.length===1?String(e[0].color):Ua({stops:e,angle:a}):"transparent"},vh=(r,e,a,t,o,n,c,l,u=!0)=>
4939{if(n<=0)return Z(c,c,l);const h=o*Math.PI/180,p=Math.cos(h),f=Math.sin(h),v=(((r-a)*p+(e-t)*f)/n+1)/2*100,m=u?Math.round(v):v;return Z(m,c,l)},ol=(r,e,a,t)=>Math.atan2(e-t,r-a)*180/Math.PI,fh=(r,e,a,t=rr.ANGLE_MIN,o=rr.ANGLE_MAX)=>{let n=a-e;for(;n>180;)n-=360;for(;n<-180;)n+=360;const c=((r+n)%360+360)%360;return Z(c,t,o)},mh=(r,e=rr.ANGLE_SNAP_STEP,a=rr.ANGLE_MIN,t=rr.ANGLE_MAX)=>Z(Math.round(r/e)*e,a,t),ab=(r,e,a=rr.ANGLE_SNAP_STEP,t=rr.ANGLE_MIN,o=rr.ANGLE_MAX)=>{const n=r%a===0;return e>0?Z(n?r+a:Math.ceil(r/a)*a,t,o):Z(n?r-a:Math.floor(r/a)*a,t,o)},tb=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"]),bh=(r,e,a=1)=>{if(!tb.has(r))return null;const o=(e-90)*Math.PI/180,n=Math.cos(o),c=Math.sin(o),l={ArrowRight:[1,0],ArrowLeft:[-1,0],ArrowDown:[0,1],ArrowUp:[0,-1]},[u,h]=l[r],p=u*n+h*c;return p>0?a:p<0||r==="ArrowLeft"||r==="ArrowUp"?-a:a},ob=196.6,nl="arc-color-solid-preview",cl=new WeakMap,il=(r,e)=>{const a=r.getContext("2d",{alpha:!1});if(!a)return;const{width:t,height:o}=r;if(!t||!o)return;const n=`${t}:${o}:${e}`;if(cl.get(r)===n)return;const c=a.createImageData(t,o),l=c.data;let u=0;for(let h=0;h<o;h+=1){const p=1-(o<=1?0:h/(o-1)),f=De({h:e,s:0,v:p,a:1}),g=De({h:e,s:1,v:p,a:1}),{r:v,g:m,b:y}=f,{r:S,g:k,b:w}=g;for(let z=0;z<t;z+=1){const x=t<=1?0:z/(t-1);l[u++]=ge(v+(S-v)*x),l[u++]=ge(m+(k-m)*x),l[u++]=ge(y+(w-y)*x),l[u++]=255}}a.putImageData(c,0,0),cl.set(r,n)},nb=(0,s.memo)(function({value:e,label:a,step:t=.01,stepLarge:o=.1,isDisabled:n=!1,showLabel:c=!1,labels:l,onChange:u}){const h=l??Ce,p=a??h.colorField,f=Or(void 0,"color-field"),g=(0,s.useRef)(null),v=(0,s.useRef)(null),m=(0,s.useRef)(!1),y=(0,s.useRef)(null),S=(0,s.useRef)(null),k=(0,s.useRef)(null),w=(0,s.useRef)(null),z=(0,s.useRef)(null),x=(0,s.useRef)(null),[_,P]=(0,s.useState)(!1),[R,U]=(0,s.useState)(null),[T,L]=(0,s.useState)(null),G=Z(R?.saturation??e.saturation,0,1),I=Z(R?.value??e.value,0,1),H=Math.round(G*100),V=Math.round(I*100),er=(0,s.useMemo)(()=>{const K=e.hue;return typeof K=="number"&&Number.isFinite(K)?K:ob},[e.hue]),O=(0,s.useMemo)(()=>Vc(er),[er]),J=(0,s.useCallback)((K,or,C="commit")=>{u({hue:er,saturation:Z(K,0,1),value:Z(or,0,1)},C)},[er,u]),nr=(0,s.useCallback)(()=>{m.current&&(m.current=!1,U(null),J(G,I,"commit"))},[J,G,I]),sr=(0,s.useCallback)((K,or)=>{const C=Z(K,0,1),$=Z(or,0,1);m.current=!0,U({saturation:C,value:$}),J(C,$,"preview")},[J]),yr=(0,s.useCallback)(K=>{const or=v.current;if(!or||!m.current)return;const C=K.relatedTarget;C instanceof Node&&or.contains(C)||nr()},[nr]),q=(0,s.useCallback)((K,or,C,$="preview")=>{const N=Z((K-C.left)/C.width,0,1),ar=Z((or-C.top)/C.height,0,1),E=N,F=1-ar;$==="preview"&&U({saturation:E,value:F}),J(E,F,$)},[J]),tr=(0,s.useCallback)(K=>{if(n)return;K.preventDefault(),K.stopPropagation(),m.current=!1;const{clientX:or,clientY:C,pointerId:$,currentTarget:N}=K,ar=N.getBoundingClientRect();k.current=$,S.current=ar,w.current={clientX:or,clientY:C},z.current=null,x.current=null,N.focus(),N.setPointerCapture($),P(!0),q(or,C,ar)},[n,q]),Mr=(0,s.useCallback)(K=>{if(n)return;const{clientX:or,clientY:C,currentTarget:$,pointerId:N}=K;if(k.current!==N)return;const ar=S.current??$.getBoundingClientRect();if(K.shiftKey){const E=w.current;if(E){if(z.current===null){const ir=Math.abs(or-E.clientX),wr=Math.abs(C-E.clientY);z.current=ir>=wr?"s":"v",x.current={clientX:or,clientY:C}}const F=x.current??E,Y=z.current==="s"?or:F.clientX,cr=z.current==="v"?C:F.clientY;q(Y,cr,ar);return}}else z.current=null,x.current=null;q(or,C,ar)},[n,q]),dr=(0,s.useCallback)(()=>{const K=k.current!=null;k.current=null,S.current=null,w.current=null,z.current=null,x.current=null,P(!1),U(null),m.current=!1,K&&J(G,I,"commit")},[J,G,I]),br=(0,s.useCallback)(K=>{if(n)return;const or=K.shiftKey?o:t;let C=G,$=I;switch(K.key){case"ArrowLeft":C=G-or;break;case"ArrowRight":C=G+or;break;case"ArrowUp":$=I+or;break;case"ArrowDown":$=I-or;break;case"Home":C=0,$=1;break;case"End":C=1,$=0;break;default:return}K.preventDefault(),sr(C,$)},[n,t,o,sr,G,I]),hr=(0,s.useCallback)(K=>{if(n||!K.key.startsWith("Arrow"))return;const or=K.shiftKey?o:t,C=K.key==="ArrowLeft"||K.key==="ArrowDown"?-or:or;K.preventDefault(),sr(G+C,I)},[n,t,o,sr,G,I]),pr=(0,s.useCallback)(K=>{if(n||!K.key.startsWith("Arrow"))return;const or=K.shiftKey?o:t,C=K.key==="ArrowLeft"||K.key==="ArrowDown"?-or:or;K.preventDefault(),sr(G,I+C)},[n,t,o,sr,G,I]),vr=(0,s.useMemo)(()=>({"--js\u2022s":String(G),"--js\u2022v":String(1-I)}),[G,I]),kr=(0,s.useRef)(O);return kr.current=O,et(()=>{const K=g.current,or=y.current;if(!K||!or)return;const C=()=>{const F=K.getBoundingClientRect(),Y=Math.max(1,Math.round(F.width)),cr=Math.max(1,Math.round(F.height)),ir=typeof window>"u"?1:Math.max(window.devicePixelRatio||1,1),wr=Math.max(1,Math.round(Y*ir)),Lr=Math.max(1,Math.round(cr*ir));or.width!==wr&&(or.width=wr),or.height!==Lr&&(or.height=Lr),il(or,kr.current)};C();const $=new ResizeObserver(()=>{C()});$.observe(K);const N=()=>{cl.delete(or),C()};or.addEventListener("contextrestored",N);const ar=K.closest("[arc-color-picker]"),E=F=>{const{detail:Y}=F,cr=Y?.h;typeof cr!="number"||!Number.isFinite(cr)||il(or,Vc(cr))};return ar?.addEventListener(nl,E),()=>{$.disconnect(),or.removeEventListener("contextrestored",N),ar?.removeEventListener(nl,E)}},[]),et(()=>{const K=y.current;K&&il(K,O)}
4939,[O]),(0,i.jsxs)("div",{ref:v,"arc-color-field":"","is-disabled":n?"":void 0,"is-interacting":_?"":void 0,"sr-focus":T??void 0,onBlurCapture:yr,children:[c&&!!p&&(0,i.jsx)("label",{htmlFor:f,children:p}),(0,i.jsxs)("div",{id:f,ref:g,"arc-color-surface":"field",style:vr,tabIndex:n?-1:0,role:"application","aria-label":p,"aria-describedby":`${f}-readout`,onPointerDown:tr,onPointerMove:Mr,onPointerUp:dr,onPointerCancel:dr,onKeyDown:br,children:[(0,i.jsx)("canvas",{ref:y,"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":T==="saturation"?"":void 0,"aria-hidden":"true"}),(0,i.jsx)("div",{"arc-color-field-slice":"value","has-focus":T==="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:n?-1:0,"aria-label":h.saturation,"aria-orientation":"horizontal","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":H,onKeyDown:hr,onFocus:()=>L("saturation"),onBlur:()=>L(null)}),(0,i.jsx)("div",{"arc-color-field-sr-slider":"value",role:"slider",tabIndex:n?-1:0,"aria-label":h.value,"aria-orientation":"vertical","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":V,onKeyDown:pr,onFocus:()=>L("value"),onBlur:()=>L(null)})]}),(0,i.jsx)("div",{id:`${f}-readout`,"arc-color-field-readout":"","arc-color-field-sr":"",children:h.colorFieldReadout(H,V)})]})}),cb=d`--arcâ¢buttonâ¢bar`,pn=d`${cb}â¢axis`,ib=d` 4940@layer arc-components { 4941 4942 [arc-button-bar=horizontal] { 4943 ${pn}: row; 4944 4945 &[is-flipped] { 4946 ${pn}: row-reverse; 4947 } 4948 } 4949 4950 [arc-button-bar=vertical] { 4951 ${pn}: column; 4952 4953 &[is-flipped] { 4954 ${pn}: column-reverse; 4955 } 4956 } 4957 4958 [arc-button-bar] { 4959 flex: var(--arc-button-bar-flex, 1); 4960 display: var(--arc-button-bar-display, flex); 4961 flex-direction: var(--arc-button-bar-flex-direction, var(${pn})); 4962 align-items: var(--arc-button-bar-align-items, center); 4963 justify-content: var(--arc-button-bar-justify-content, flex-end); 4964 gap: var(--arc-button-bar-gap, var(${M}â¢8)); 4965 padding: var(--arc-button-bar-padding, 0); 4966 margin: 0; 4967 } 4968 4969} 4970`,co=({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})};Cr("ArcButtonBar",ib);function _t(r){const e=(0,s.useRef)(r);e.current=r;const a=(0,s.useCallback)((...t)=>e.current?.(...t),[]);return r?a:void 0}const sb=({activeColor:r})=>
4970{const[e,a]=(0,s.useState)(r),t=r!=null,o=t?r:e;(0,s.useEffect)(()=>{a(r)},[r]);const n=(0,s.useCallback)(c=>{t||a(c)},[t]);return{isSelectionControlled:t,activeSelectedColor:o,setUncontrolledSelectedColor:a,selectColor:n}},lb=({palette:r,isSelectionControlled:e,onAddColor:a,emitColorChange:t,setLocalColors:o,setUncontrolledSelectedColor:n,initialColorValue:c,shouldOpenPopover:l=!0,notifyAddColorToggle:u,showPopover:h,hidePopover:p})=>{const f=(0,s.useCallback)(()=>c??ln(),[c]),[g,v]=(0,s.useState)(null),[m,y]=(0,s.useState)(f),S=(0,s.useCallback)(()=>{v(null),y(f())},[f]),k=(0,s.useCallback)(T=>{o(L=>Zr(T)?L.some(H=>Zr(H)&&ct(H,T))?L:[...L,T]:L.some(I=>!Zr(I)&&oo(I,T))?L:[...L,T])},[o]),w=(0,s.useCallback)((T,L)=>{a?.(r,T,L),Zr(T)||(t(T),e||n(T))},[t,e,a,r,n]),z=(0,s.useCallback)((T,L)=>{k(T),w(T,L??void 0)},[k,w]),x=(0,s.useCallback)(()=>{if(g!=null)return;const T=f();let L=-1;o(G=>(L=G.length,[...G,T])),v(L),y(T),u?.(!0),l&&h()},[g,f,u,o,l,h]),_=(0,s.useCallback)(T=>{g!=null&&y(T)},[g]),P=(0,s.useCallback)(T=>{T?.preventDefault(),T?.stopPropagation(),g!=null&&o(L=>L.filter((G,I)=>I!==g)),S(),u?.(!1),l&&p()},[g,p,u,S,o,l]),R=(0,s.useCallback)((T,L)=>{const I=(er=>typeof er?.preventDefault=="function")(T)?T:L;if(I?.preventDefault(),I?.stopPropagation(),g==null||m==null){u?.(!1),l&&p();return}const V=(r.colors??[]).map((er,O)=>O===g?m:er);o(V),w(m,I??void 0),S(),u?.(!1),l&&p()},[g,m,w,p,u,r.colors,S,o,l]),U=(0,s.useCallback)((T,L)=>{L?.preventDefault(),L?.stopPropagation(),z(T,L??void 0)},[z]);return{draftColorIndex:g,draftColorValue:m,startAddDraft:x,updateDraftColor:_,cancelDraftColor:P,saveDraftColor:R,saveCurrentColor:U}};let $h=!1;const gn=new Set,sl=r=>{$h=r,gn.forEach(e=>{e.setState(r),r||e.onRelease?.()})},yh=r=>{(r.metaKey||r.key==="Meta")&&sl(!0)},xh=r=>{sl(!!r.metaKey)},kh=()=>{sl(!1)},db=r=>
4970{const[e,a]=(0,s.useState)($h),t=(0,s.useRef)(r);return t.current=r,(0,s.useEffect)(()=>{const o={setState:a,onRelease:()=>t.current?.()};return gn.add(o),gn.size===1&&(window.addEventListener("keydown",yh),window.addEventListener("keyup",xh),window.addEventListener("blur",kh)),a(e),()=>{gn.delete(o),gn.size===0&&(window.removeEventListener("keydown",yh),window.removeEventListener("keyup",xh),window.removeEventListener("blur",kh))}},[]),e},Be=d`--arc-popover`,io=d`--arcâ¢colorâ¢picker`,Jr=d`${io}â¢thumb`,so=d`${io}â¢tools`,Pa=d`${io}â¢dropper`,wh=d` 4971 background-image: 4972 linear-gradient( 4973 to right, 4974 transparent, 4975 var(--jsâ¢hex, transparent) 4976 ), 4977 conic-gradient( 4978 var(--arc-color-alpha-subtle) 0 25%, 4979 var(--arc-color-alpha-muted) 0 50%, 4980 var(--arc-color-alpha-subtle) 0 75%, 4981 var(--arc-color-alpha-muted) 0 100% 4982 ); 4983 4984 background-size: 100% 100%, 1em 1em; 4985 background-position: 50% 50%, 50% 50%; 4986`,ub=d` 4987 background-image: 4988 linear-gradient( 4989 to right, 4990 #f00 0%, 4991 #ff0 16.66%, 4992 #0f0 33.33%, 4993 #0ff 50%, 4994 #00f 66.66%, 4995 #f0f 83.33%, 4996 #f00 100% 4997 ); 4998`,ll=d`3.75em`,Sh={POPOVER:d` 4999 /* Inter-Component Communication: ArcPopover */ 5000 ${Be}-width: 14em; /* 224px */ 5001 ${Be}-min-width: 10.5em; /* 140px */ 5002 ${Be}-max-width: 15.75em; /* 252px */ 5003 ${Be}-line-height: normal; /* @note â allows elements to resolve to design-spec heights */ 5004 ${Be}-outline-size: 0px; /* @note â default outline-size causes divider lines to not extend to the edges of the popover shell. */ 5005 ${Be}-padding: 0; 5006 ${Be}-overflow: hidden auto; 5007 5008 ${Be}-header-padding: 0.75em 1em; 5009 ${Be}-header-background: var(--arc-color-bg-mono); 5010 ${Be}-header-align-items: center; 5011 5012 ${Be}-body-padding: 0; 5013 5014 ${Be}-footer-padding: 1em; 5015 ${Be}-footer-background: var(--arc-color-bg-mono); 5016 5017 /* Inter-Component Communication: inner ArcTooltips ⢠UX enhancement: transition speed-up */ 5018 [arc-popover-content] { 5019 ${Be}-transition-duration: 30ms; 5020 } 5021 5022 &:has([arc-color-picker=simple]) { 5023 ${Be}-width: 12.25em; /* 196px */ 5024 } 5025 5026 /* Inter-Component Communication: ArcButtonBar via ArcPopoverFooter */ 5027 [arc-popover-footer]:has([arc-button-bar]) { 5028 --arc-button-bar-justify-content: stretch; 5029 --arc-button-flex: 1; 5030 } 5031 `,PICKER:d` 5032 ${Jr}â¢shadow: 0 0 0 max(4px, 0.25em) var(--arc-color-alpha-white-95), 0 0 max(6px, 0.375em) max(3px, 0.1875em) var(--arc-color-alpha-black-30); 5033 ${Jr}â¢size: max(10px, 0.625em); 5034 ${Jr}â¢transition: 200ms ease-out; 5035 5036 ${io}â¢padding: 1em; 5037 &[is-inline] { ${io}â¢padding: 0; } 5038 5039 &[arc-color-picker=simple] { 5040 ${Pa}â¢alignâ¢self: end; 5041 ${so}â¢gap: 1em 0.5em; 5042 5043 [arc-color-slider] { 5044 grid-column: 1 / -1; 5045 } 5046 } 5047 5048 [arc-color-input=hex] { 5049 --arc-input-prefix-opacity: var(--arc-alpha-40); 5050 --arc-input-suffix-opacity: var(--arc-alpha-100); 5051 } 5052 5053 /* This font-size is intended for various scaling calculations. */ 5054 font-size: initial; 5055 position: relative; 5056 display: flex; 5057 flex-direction: column; 5058 z-index: 1; 5059 5060 -webkit-user-select: none; 5061 user-select: none; 5062 5063 /* Inter-Component Communication: ArcInput & ArcLabel ⢠font-size reset for input labels */ 5064 --arc-input-padding-inline: max(6px, 0.375em); 5065 `},hb=d` 5066 5067 [arc-color-field] { 5068 display: grid; 5069 gap: 0.5em; 5070 } 5071 5072 [arc-color-surface=field] { 5073 position: relative; 5074 width: 100%; 5075 aspect-ratio: 1 / 1; 5076 5077 -webkit-user-select: none; 5078 user-select: none; 5079 touch-action: none; 5080 cursor: pointer; 5081 5082 border-radius: var(--arc-border-radius-md); 5083 background: var(--arc-color-bg-mono); 5084 5085 &:focus:focus-visible { 5086 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 5087 outline-offset: 0.25em; 5088 } 5089 5090 &::after { 5091 box-sizing: border-box; 5092 content: ''; 5093 position: absolute; 5094 top: 0; 5095 left: 0; 5096 width: 100%; 5097 height: 100%; 5098 border-radius: inherit; 5099 border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5100 pointer-events: none; 5101 z-index: 2; 5102 } 5103 } 5104 5105 [arc-color-field-canvas] { 5106 position: absolute; 5107 inset: 0; 5108 width: 100%; 5109 height: 100%; 5110 display: block; 5111 border-radius: inherit; 5112 pointer-events: none; 5113 } 5114 5115 [arc-color-field-slice] { 5116 position: absolute; 5117 pointer-events: none; 5118 z-index: 3; 5119 border-radius: var(--arc-border-radius-pill); 5120 transition: left var(${Jr}â¢transition), top var(${Jr}â¢transition); 5121 } 5122 5123 [arc-color-field][sr-focus] [has-focus] { 5124 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 5125 outline-offset: 0.25em; 5126 } 5127 5128 /* Saturation axis at current Value */ 5129 [arc-color-field-slice=saturation] { 5130 inset: calc(var(--jsâ¢v) * 100%) 0 auto 0; 5131 height: var(--arc-border-width-md); 5132 } 5133 5134 /* Value axis at current Saturation */ 5135 [arc-color-field-slice=value] { 5136 inset: 0 auto 0 calc(var(--jsâ¢s) * 100%); 5137 width: var(--arc-border-width-md); 5138 } 5139 5140 [arc-color-field-thumb] { 5141 position: absolute; 5142 left: calc(var(--jsâ¢s) * 100%); 5143 top: calc(var(--jsâ¢v) * 100%); 5144 transform: translate(-50%, -50%); 5145 width: var(${Jr}â¢size); 5146 height: var(${Jr}â¢size); 5147 border: 0; 5148 border-radius: var(--arc-border-radius-circle); 5149 box-shadow: var(${Jr}â¢shadow); 5150 background: var(--jsâ¢rgb); 5151 z-index: 4; 5152 transition: 5153 left var(${Jr}â¢transition), 5154 top var(${Jr}â¢transition); 5155 } 5156 5157 @media (prefers-reduced-motion: reduce) { 5158 [arc-color-field-thumb], 5159 [arc-color-field-slice] { 5160 transition: none; 5161 } 5162 } 5163 5164 [arc-color-field][is-interacting] { 5165 [arc-color-field-thumb], 5166 [arc-color-field-slice] { 5167 transition: none; 5168 } 5169 } 5170 5171 /* Visually hidden but usable (so SR users can access them) */ 5172 [arc-color-field-sr] { 5173 position: absolute; 5174 width: 1px; 5175 height: 1px; 5176 padding: 0; 5177 margin: -1px; 5178 overflow: hidden; 5179 clip: rect(0, 0, 0, 0); 5180 white-space: nowrap; 5181 border: 0; 5182 } 5183 5184 [arc-color-field-sr-slider] { 5185 display: block; 5186 } 5187 5188`,pb=d` 5189 5190 [arc-color-slider] { 5191 &:has([arc-slider-surface=hue]) { ${Jr}â¢bg: var(--jsâ¢hue); } 5192 &:has([arc-slider-surface=alpha]) { ${Jr}â¢bg: transparent; } 5193 5194 /* Inter-Component Communication: ArcSlider --------------------⢠*/ 5195 --arc-slider-input-height: auto; 5196 --arc-slider-progress-display: none; 5197 --arc-slider-track-background: transparent; 5198 --arc-slider-progress-background: transparent; 5199 --arc-slider-track-height: 0.875em; 5200 --arc-slider-thumb-size: var(${Jr}â¢size); 5201 --arc-slider-thumb-size-hover: var(${Jr}â¢size); 5202 --arc-slider-thumb-shadow: var(${Jr}â¢shadow); 5203 --arc-slider-thumb-background: var(${Jr}â¢bg); 5204 --arc-slider-thumb-outline-offset: 0.3125em; 5205 5206 display: grid; 5207 gap: 0.375em; 5208 5209 [arc-slider-surface=hue] { ${ub} } 5210 [arc-slider-surface=alpha] { ${wh} } 5211 } 5212 5213`,gb=d` 5214 5215 [arc-color-inputs] { 5216 display: grid; 5217 gap: 0.5em; 5218 grid-template-columns: 1fr ${ll}; 5219 align-items: end; 5220 5221 &:not(:has([arc-color-input=hex])) { 5222 grid-template-columns: ${ll} 1fr; 5223 } 5224
5225 &:has([arc-color-input=hex]):not(:has([arc-color-input=alpha])) { 5226 grid-template-columns: 1fr; 5227 } 5228 } 5229 5230 [arc-color-input=hex] { 5231 --arc-icon-color: var(--arc-color-fg-critical-mid); 5232 --arc-input-action-display: contents; 5233 --arc-button-min-width: none; 5234 --arc-button-max-width: 2.25em; 5235 } 5236 5237 :is([arc-color-input=stop], [arc-color-input=alpha]) { 5238 --arc-input-text-align: end; 5239 } 5240 5241`,vb=d` 5242 [arc-gradient-stops] { 5243 display: grid; 5244 gap: 0.125em; 5245 } 5246 5247 [arc-gradient-stop-list] { 5248 display: grid; 5249 gap: 0.125em; 5250 padding: 0; 5251 margin: 0; 5252 list-style: none; 5253 } 5254 5255 [arc-gradient-field-wrapper] { 5256 position: relative; 5257 &:has([is-rotating]) { 5258 --angle-output-opacity: 1; 5259 } 5260 } 5261 5262 [arc-gradient-field-angle-output] { 5263 position: absolute; 5264 bottom: 0; 5265 right: 0; 5266 opacity: var(--angle-output-opacity, 0.4); 5267 transition: opacity 200ms ease-out; 5268 } 5269 5270 [arc-gradient-field] { 5271 position: relative; 5272 width: 100%; 5273 min-height: 2.5em; 5274 aspect-ratio: 1 / 1; 5275 border-radius: var(--arc-border-radius-circle); 5276 touch-action: none; 5277 user-select: none; 5278 cursor: grab; 5279 5280 &[is-rotating] { 5281 cursor: grabbing; 5282 } 5283 5284 &::before { 5285 box-sizing: border-box; 5286 content: ''; 5287 position: absolute; 5288 inset: 0; 5289 border-radius: var(--arc-border-radius-circle); 5290 border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5291 pointer-events: none; 5292 z-index: 1; 5293 } 5294 } 5295 5296 [arc-gradient-stop-thumb] { 5297 position: absolute; 5298 left: 0; 5299 top: 50%; 5300 margin-block-start: calc(var(${Jr}â¢size) / -2); 5301 margin-inline-start: calc(var(${Jr}â¢size) / -2); 5302 width: var(${Jr}â¢size); 5303 height: var(${Jr}â¢size); 5304 border-radius: var(--arc-border-radius-circle); 5305 background: var(${Jr}â¢bg); 5306 box-shadow: var(${Jr}â¢shadow); 5307 cursor: pointer; 5308 z-index: 1; 5309 touch-action: none; 5310 5311 &:focus-visible { 5312 outline: 0.125em solid var(--arc-color-border-focus); 5313 outline-offset: 0.25em; 5314 } 5315 5316 &::after { 5317 content: ''; 5318 position: absolute; 5319 inset: -0.375em; 5320 border-radius: var(--arc-border-radius-circle); 5321 } 5322 } 5323 5324 [arc-gradient-stop-row] { 5325 position: relative; 5326 display: grid; 5327 grid-template-columns: auto ${ll} 1fr auto; 5328 gap: 0.5em; 5329 align-items: center; 5330 padding: 0.25em; 5331 margin-inline: -0.25em; 5332 border-radius: var(--arc-border-radius-md); 5333 5334 &[is-editing-color] { 5335 background: var(--arc-color-bg-selected-default); 5336 } 5337 } 5338 5339 [arc-gradient-stop-insert] { 5340 --arc-button-color: var(--arc-color-alpha-stark); 5341 --arc-button-width: 100%; 5342 --arc-button-z-index: 1; 5343 5344 position: absolute; 5345 inset: -0.375em 0em auto 0em; 5346 display: flex; 5347 justify-content: center; 5348 align-items: center; 5349 border-radius: var(--arc-border-radius-pill); 5350 height: 0.625em; 5351 opacity: var(--arc-alpha-0); 5352 background: transparent; 5353 transition: opacity 200ms ease-out, background 200ms ease-out; 5354 5355 [arc-icon] { 5356 background: var(--arc-color-bg-mono); 5357 padding-inline: 0.25em; 5358 } 5359 5360 &::before { 5361 content: ''; 5362 position: absolute; 5363 inset: 50% 0 auto 0; 5364 translate: 0 -50%; 5365 height: 0.0625em; 5366 background: transparent; 5367 pointer-events: none; 5368 } 5369 5370 &:where(:has(:hover), :focus-within) { 5371 opacity: var(--arc-alpha-80); 5372 5373 &::before { 5374 background: var(--arc-color-bg-neutral-subtle); 5375 } 5376 } 5377 } 5378 5379 *:not([arc-gradient-angle-slider]) + [arc-gradient-presets] { 5380 margin-block-start: 0.75em; 5381 } 5382 5383 [arc-gradient-presets] [arc-color-palette-set] { 5384 --arc-swatch-width: 100%; 5385 --arc-swatch-border-radius: var(--arc-border-radius-md); 5386 5387 display: grid; 5388 grid-template-columns: repeat(4, 1fr); 5389 gap: 0.5em; 5390 min-inline-size: 0; 5391 max-inline-size: none; 5392 padding: 0; 5393 margin: 0; 5394 border: 0; 5395 } 5396`,fb=d` 5397 5398 &[arc-color-picker=simple]:has([arc-color-palettes]) [arc-color-tools] { 5399 padding-top: 0; 5400 } 5401 5402 :is([arc-color-tools=simple], [arc-color-tools=solid]) { 5403 display: grid; 5404 gap: var(${so}â¢gap, 0.5em); 5405 grid-template-columns: var(${so}â¢columns, auto 1fr); 5406 } 5407 5408 [arc-color-tools=gradient] { 5409 display: grid; 5410 gap: 0; 5411 grid-template-columns: var(${so}â¢columns, 1fr); 5412 } 5413 5414 [arc-color-tools=simple] {
5415 &:has([arc-color-input=hex]):not(:has([arc-color-eye-dropper])) { 5416 ${so}â¢columns: 1fr 2em; 5417 } 5418 } 5419 5420 :is([arc-color-field], [arc-color-inputs]) { 5421 grid-column: 1 / -1; 5422 } 5423 5424 [arc-color-eye-dropper] { 5425 align-self: var(${Pa}â¢alignâ¢self, center); 5426 justify-self: var(${Pa}â¢justifyâ¢self, center); 5427 } 5428 5429 [arc-color-sliders] { 5430 grid-column: 1 / -1; 5431 5432 display: grid; 5433 gap: 0.25em; 5434 grid-template-columns: auto; 5435 align-self: center; 5436 } 5437 5438 [arc-color-eye-dropper] + [arc-color-sliders] { 5439 grid-column: 2; 5440 } 5441 5442 /* Finding a good place for the eye dropper in some cases */ 5443 &:has([arc-color-input=hex]):not(:has([arc-color-input=alpha], [arc-color-sliders])), 5444 &:has([arc-color-input=alpha]):not(:has([arc-color-input=hex], [arc-color-sliders])) { 5445 ${Pa}â¢alignâ¢self: end; 5446 ${Pa}â¢justifyâ¢self: end; 5447 5448 &:has([arc-color-eye-dropper]) [arc-color-inputs] { display: contents; } 5449 5450 &:not(:has([arc-color-field])) { ${Pa}â¢row: 1; } 5451 5452 &:not(:has([arc-color-input=hex])) { 5453 ${Pa}â¢justifyâ¢self: start; 5454 ${so}â¢columns: 1fr auto; 5455 ${Pa}â¢column: 1; 5456 } 5457 5458 [arc-color-eye-dropper] { 5459 grid-column: var(${Pa}â¢column, 2); 5460 grid-row: var(${Pa}â¢row, 2); 5461 } 5462 5463 [arc-color-sliders] { grid-column: 1 / -1; } 5464 } 5465 5466 ${hb} 5467 ${pb} 5468 ${gb} 5469 ${vb} 5470 5471`,mb=d` 5472@layer arc-components { 5473 5474 [arc-color-picker-wrapper] { 5475 ${Sh.POPOVER} 5476 } 5477 5478 [arc-color-picker] { 5479 ${Sh.PICKER} 5480 5481 [arc-color-picker-section=control] { 5482 padding: 1em 1em 0 1em; 5483 } 5484 5485 &[is-inline] [arc-color-picker-section=control] { 5486 padding: 0 0 1em 0; 5487 } 5488 5489 [arc-color-picker-section]:not([arc-color-picker-section=control]) { 5490 padding: var(${io}â¢padding); 5491 5492 &:has(+[arc-color-picker-section]) { padding-bottom: 1em; } 5493 +[arc-color-picker-section] { padding-top: 1em; } 5494 5495 &[has-divider=top] { border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); } 5496 &[has-divider=bottom] { border-bottom: var(--arc-border-width-sm) solid var(--arc-color-border-mid); } 5497 } 5498 5499 ${fb} 5500 5501 [arc-color-palettes] { 5502 display: flex; 5503 flex-direction: column; 5504 gap: 1em; 5505 } 5506 5507 [arc-color-section-header] { 5508 display: flex; 5509 justify-content: space-between; 5510 align-items: center; 5511 gap: 0.5em; 5512 padding: 0; 5513 height: 2.5em; 5514 } 5515 5516 [arc-gradient-angle-slider] { 5517 position: sticky; 5518 bottom: 0; 5519 background: var(--arc-color-bg-mono); 5520 border-block-start: 0.0625em solid var(--arc-color-border-mid); 5521 padding-inline: 1em; 5522 margin-inline: -1em; 5523 margin-block-start: 0.75em; 5524 padding-block-end: 0.75em; 5525 } 5526 5527 5528 [arc-color-picker-section=footer] { 5529 position: sticky; 5530 bottom: 0; 5531 border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5532 background: var(--arc-color-bg-mono); 5533 z-index: 2; 5534 } 5535 5536 [arc-color-picker-button-bar] * { 5537 flex: 1; 5538 } 5539 } 5540 5541} 5542`,Ae=d`--arcâ¢colorâ¢chip`,bb=d` 5543@layer arc-components { 5544 5545 [arc-color-chip=swatch] { 5546 ${Ae}â¢radius: var(--arc-border-radius-circle); 5547 ${Ae}â¢width: var(${b}â¢24); 5548 ${Ae}â¢height: var(${b}â¢24); 5549 ${Ae}â¢border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5550 } 5551 5552 [arc-color-chip=gradient-stop] { 5553 ${Ae}â¢radius: var(--arc-border-radius-md); 5554 ${Ae}â¢width: var(${b}â¢24); 5555 ${Ae}â¢height: var(${b}â¢24); 5556 ${Ae}â¢border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5557 } 5558 5559 [arc-color-chip=gradient] { 5560 ${Ae}â¢radius: var(--arc-border-radius-circle); 5561 ${Ae}â¢width: var(${b}â¢24); 5562 ${Ae}â¢height: var(${b}â¢24); 5563 ${Ae}â¢border: none; 5564 5565 &::before { 5566 content: ''; 5567 position: absolute; 5568 inset: 0; 5569 border-radius: var(--arc-swatch-border-radius, var(${Ae}â¢radius)); 5570 border: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5571 opacity: 1; 5572 pointer-events: none; 5573 z-index: 1; 5574 } 5575 5576 &[is-selected]::before { 5577 opacity: 0; 5578 } 5579 } 5580 5581 [arc-color-chip] { 5582 --arc-button-position: relative; 5583 --arc-button-background: var(--jsâ¢gradient, var(--jsâ¢color)); 5584 --arc-button-color: var(--jsâ¢fg, transparent); 5585 --arc-button-width: var(--arc-swatch-width, var(${Ae}â¢width)); 5586 --arc-button-height: var(--arc-swatch-height, var(${Ae}â¢height)); 5587 --arc-button-border-radius: var(--arc-swatch-border-radius, var(${Ae}â¢radius)); 5588 --arc-button-border: var(${Ae}â¢border); 5589 --arc-button-outline-offset: var(--arc-border-width-sm); 5590 --arc-icon-size: var(${b}â¢10); 5591 5592 &[is-transparent] { 5593 --arc-button-background: unset; 5594 ${wh} 5595 } 5596 5597 &[is-translucent] { 5598 --arc-button-background: 5599 var(--jsâ¢color) 5600 linear-gradient( 5601 to right, 5602 var(--jsâ¢hex), 5603 var(--jsâ¢hex) 50%, 5604 transparent 50%, 5605 transparent 5606 ) border-box; 5607 5608 &::after { 5609 content: ''; 5610 position: absolute; 5611 inset: 0 auto 0 50%; 5612 translate: -100% 0; 5613 width: var(--arc-border-width-sm); 5614 background: var(--arc-color-border-mid); 5615 pointer-events: none; 5616 z-index: 1; 5617 } 5618 } 5619 5620 &:is(:hover, [is-selected]) { 5621 --arc-button-border: var(--arc-border-width-sm) solid var(--arc-color-border-heavy
5621); 5622 --arc-button-box-shadow: 0 0 0 var(--arc-border-width-md) var(--arc-color-fg-on-mono-inverse) inset; 5623 } 5624 5625 &[is-draft] { 5626 --arc-button-outline: var(--arc-border-width-md) dotted color-mix(in srgb, transparent 35%, var(--arc-color-border-focus) 65%); 5627 } 5628 5629 &[is-control] { 5630 --arc-button-background: var(--arc-color-alpha-muted); 5631 --arc-button-color: inherit; 5632 } 5633 } 5634 5635} 5636`,Ch=(0,s.memo)(({color:r,gradient:e,name:a,kind:t,isDraft:o,isSelected:n,contrastBias:c,contrastBgColor:l,canRemoveColor:u,icon:h,text:p,tooltip:f,labels:g,onClick:v,style:m,...y})=>{const S=(0,s.useMemo)(()=>Fc(g),[g]),{cssColor:k,isTranslucent:w,isTransparent:z,opaqueHex:x}=(0,s.useMemo)(()=>rh(r??""),[r]),_=e?hh(e,a):Wc(r??"",a),P=p??_??(e?S.gradient:k),R=qu(k)?k.toUpperCase():k,U=f??_??(e?S.gradient:R),T=(0,s.useMemo)(()=>e?qc(e,k):k,[e,k]),L=(0,s.useMemo)(()=>no(T,{contrastBias:c,bgColor:l}),[T,c,l]),[G,I]=(0,s.useState)(!1),[H,V]=(0,s.useState)(!1),[er,O]=(0,s.useState)(!1),[J,nr]=(0,s.useState)(!1),sr=db(()=>V(!1)),q=(t==="swatch"||t==="gradient")&&!!u&&(er&&sr||(sr||H)&&G),tr=q||J,Mr=tr?"fa-regular fa-xmark":h??"fa-solid fa-check",dr=t==="gradient"?S.removeGradient:S.removeColor,br=tr?dr:U;(0,s.useEffect)(()=>{q&&nr(!0)},[q]),(0,s.useEffect)(()=>{!q&&n&&!o&&nr(!1)},[o,q,n]);const hr=(0,s.useCallback)(C=>{const $=q||C.metaKey?"remove":"select",N={...nt(k,{format:"auto",fallbackHex:k,contrastBias:c,contrastBgColor:l}),contrastColor:L,name:_};if(t==="gradient"&&e!=null){v?.({kind:t,colorData:N,gradientData:hn(e,{contrastBias:c,contrastBgColor:l}),action:$,shouldClosePicker:!1},C);return}v?.({kind:t,colorData:N,action:$,shouldClosePicker:!1},C)},[q,v,k,_,t,e,c,l,L]),pr=(0,s.useCallback)(C=>{C.preventDefault(),C.stopPropagation(),hr(C)},[hr]),vr=(0,s.useCallback)(C=>{C.metaKey&&(C.preventDefault(),C.stopPropagation(),hr(C))},[hr]),kr=(0,s.useCallback)(C=>{const $=C.propertyName??"";!($==="color"||$.includes("color"))||q||nr(!1)},[q]),K=(0,s.useCallback)(C=>{C.key!=="Enter"||!q||(C.preventDefault(),C.stopPropagation(),C.currentTarget.click())},[q]),or=(0,s.useMemo)(()=>({...m??{},"--js\u2022hex":z?"transparent":w&&(x??k??T)||"","--js\u2022color":k??T,"--js\u2022gradient":e?Ua(e):"","--js\u2022fg":n&&!o||q?L:""}),[m,z,w,x,k,T,n,o,q,L,e]);return(0,i.jsx)(Br,{...y,_isCustom:!0,"arc-color-chip":t,layout:"icon",tooltip:br,text:P,icon:Mr,"is-draft":o?"":void 0,"is-selected":!o&&n?"":void 0,"is-translucent":w?"":void 0,"is-transparent":z?"":void 0,style:or,onClick:pr,onContextMenu:vr,onMouseEnter:C=>{I(!0),V(C.metaKey)},onMouseMove:C=>{V(C.metaKey)},onMouseLeave:()=>{I(!1),V(!1),nr(!1)},onFocus:()=>O(!0),onBlur:()=>{O(!1),nr(!1)},onKeyDown:K,onTransitionEnd:kr})});Ch.displayName="ArcColorSwatch";const vn=Ch;vn.getColorData=nt,Cr("ArcColorSwatch",bb);const Ah=(r,e)=>{const a=r.colors??[];return Zr(e)?a.some(n=>Zr(n)&&ct(n,e))?r:{...r,colors:[...a,e]}:a.some(o=>!Zr(o)&&oo(o,e))?r:{...r,colors:[...a,e]}},zh=(r,e)=>{const a=r.colors??[],t=Zr(e)?a.filter(o=>!(Zr(o)&&ct(o,e))):a.filter(o=>Zr(o)||!oo(o,e));return t.length===a.length?r:{...r,colors:t}},Eh=(r,e,a)=>r.map(t=>t.id===e.id?Ah(t,a):t),_h=(r,e,a)=>r.map(t=>t.id===e.id?zh(t,a):t),$b=(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 Eh(r,e,a)}return Ah(r,e)},yb=(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 _h(r,e,a)}return zh(r,e)},xb=(r,e,a)=>{const t=r.find(o=>o.id===e);return t?Eh(r,t,a):r},kb=(r,e,a)=>{const t=r.find(o=>o.id===e);return t?_h(r,t,a):r},wb=d` 5637@layer arc-components { 5638 5639 [arc-color-palette] { 5640 display: flex; 5641 flex-direction: column; 5642 gap: var(${M}â¢8); 5643 5644 [arc-color-palette-header] { 5645 display: flex; 5646 flex-direction: column; 5647 gap: var(${M}â¢4); 5648 font-size: var(${b}â¢12); 5649 5650 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 5651 small { opacity: 0.612; } 5652 } 5653 5654 [arc-color-palette-set] { 5655 display: flex; 5656 flex-wrap: wrap; 5657 gap: var(${M}â¢4); 5658 max-width: calc((var(${b}â¢24) + var(${M}â¢4)) * 7 + var(${M}â¢24)); 5659 min-inline-size: 0; 5660 padding: 0; 5661 margin: 0; 5662 border: 0; 5663 } 5664 5665 [arc-color-palette-picker] { 5666 display: grid; 5667 gap: var(${M}â¢8); 5668 padding-top: var(${M}â¢8); 5669 border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 5670 } 5671 5672 [arc-color-palette-inputs] { 5673 display: grid; 5674 gap: var(${M}â¢8); 5675 grid-template-columns: auto auto; 5676 align-items: end; 5677 } 5678 5679 [arc-color-palette-actions] { 5680 display: flex; 5681 justify-content: flex-end; 5682 gap: var(${M}â¢8); 5683 } 5684 5685 [arc-add-color] { 5686 --arc-icon-size: var(${b}â¢10); 5687 } 5688 } 5689 5690} 5691`,fn=({children:r,id:e,heading:a,showHeading:t=!0,setAriaLabel:o,colors:n=[],activeColor:c,activeGradient:l,format:u=wa.format,canAddColor:h=!1,canAddGradient:p=!1,canRemoveColor:f=!1,contrastBgColor:g,addColorFlow:v="standalone",sharedSwatchProps:m,onSwatchClick:y,onAddColor:S,onRemoveColor:k,onColorChange:w,onAddColorToggle:z,labels:x,..._})=>{const P=(0,s.useMemo)(()=>Fc(x),[x]),R=v==="embedded",U=Or(void 0,"add-color-anchor"),T=Or(void 0,"add-color-popover"),L=Or(void 0,"palette-heading"),G=t&&!!a,I=_t(y),H=_t(S),V=_t(k),er=_t(w),O=_t(z),[J,nr]=(0,s.use
5691State)(n),[sr,yr]=(0,s.useState)(!1),[q,tr]=(0,s.useState)(!1),{isSelectionControlled:Mr,activeSelectedColor:dr,setUncontrolledSelectedColor:br,selectColor:hr}=sb({activeColor:c}),pr=(0,s.useMemo)(()=>rl(dr),[dr]),vr=(0,s.useMemo)(()=>J.map(Q=>Zr(Q)?{normalized:Ua(Q),rgba:null}:{normalized:to(Q),rgba:Kr(Dr(Q))}),[J]),kr=(0,s.useMemo)(()=>vr.map(Q=>pr?Q.normalized===pr.comparisonKey?!0:!!pr.selectedRgba&&!!Q.rgba&&Uc(Q.rgba,pr.selectedRgba):!1),[vr,pr]),K=(0,s.useMemo)(()=>kr.some(Boolean),[kr]),or=(0,s.useMemo)(()=>!!l&&J.some(Q=>Zr(Q)&&ct(Q,l)),[l,J]),C=!R&&K?void 0:dr;(0,s.useEffect)(()=>{nr(n)},[n]);const $=(0,s.useCallback)(Q=>{if(typeof Q=="object"&&Q!==null&&"hsv"in Q){er?.(Q);return}const Vr=Dr(Q),Ja=Wc(Q),D=nt(Vr,{format:u,contrastBgColor:g});er?.({...D,name:Ja})},[er,u,g]),N=(0,s.useRef)(!1),ar=(0,s.useCallback)(Q=>{Q&&(N.current=!0,tr(!0)),yr(Q),O?.(e,Q)},[e,O]),E=(0,s.useCallback)(()=>ya?.handlePopover?.(T,"show"),[T]),F=(0,s.useCallback)(()=>ya?.handlePopover?.(T,"hide"),[T]);(0,s.useEffect)(()=>{sr&&N.current&&(N.current=!1,E())},[sr,E]);const Y=(0,s.useMemo)(()=>({id:e,heading:a,showHeading:t,colors:J,activeColor:c,activeGradient:l,format:u,canAddColor:h,canAddGradient:p,canRemoveColor:f,contrastBgColor:g,addColorFlow:v,sharedSwatchProps:m,onSwatchClick:I,onAddColor:H,onRemoveColor:V,onColorChange:er,onAddColorToggle:O}),[e,a,t,J,c,l,u,h,p,f,g,v,m,I,H,V,er,O]),{draftColorIndex:cr,draftColorValue:ir,startAddDraft:wr,updateDraftColor:Lr,cancelDraftColor:re,saveDraftColor:He,saveCurrentColor:Ie}=lb({palette:Y,isSelectionControlled:Mr,onAddColor:H,emitColorChange:$,setLocalColors:nr,setUncontrolledSelectedColor:br,initialColorValue:C,shouldOpenPopover:!R,notifyAddColorToggle:ar,showPopover:E,hidePopover:F}),ce=(0,s.useMemo)(()=>J.map((Q,Vr)=>cr===Vr&&ir!=null?ir:Q),[cr,ir,J]),Re=(0,s.useMemo)(()=>{if(cr==null||ir==null||pr==null||cr<0||cr>=kr.length||Zr(ir))return kr;const Q=[...kr];return Q[cr]=oh(ir,pr),Q},[kr,cr,ir,pr]),Ve=(0,s.useMemo)(()=>Zr(ir)?null:rl(ir),[ir]),aa=(0,s.useMemo)(()=>cr==null||Ve==null?!1:Qs(J.filter(Q=>!Zr(Q)),ir,{skipIndex:cr}),[cr,Ve,ir,J]),ie=(0,s.useCallback)((Q,Vr)=>{if(!Q?.colorData)return;if(Q.kind==="gradient"){const{gradient:D}=Q.gradientData;if(Q.action==="remove"&&f){nr(ur=>ur.filter(Sr=>!(Zr(Sr)&&ct(Sr,D)))),V?.(Y,D,Vr);return}I?.({...Q,shouldClosePicker:!1},Vr);return}
5691const Ja={color:Q.colorData.value,name:Q.colorData.name};if(Q.action==="remove"&&f){nr(D=>{const ur=D.filter(Sr=>Zr(Sr)||!oo(Sr,Ja));return ur.length===D.length?D:ur}),V?.(Y,Ja,Vr);return}hr(Ja),I?.({...Q,shouldClosePicker:!1},Vr),$(Q.colorData)},[f,$,V,I,Y,hr]),je=(0,s.useCallback)(Q=>cr===Q&&ir!=null,[cr,ir]);(0,s.useEffect)(()=>{if(!R||cr==null)return;const Q=(p?l:void 0)??(h?dr:void 0);Q!=null&&Lr(Q)},[l,dr,h,p,cr,R,Lr]);const ee=(0,s.useCallback)(Q=>{const Vr=Q?.newState==="open";yr(Vr),O?.(e,Vr)},[e,O]),Ge=(0,s.useCallback)(Q=>{const Vr=(p?l:void 0)??(h?dr??wa.color:wa.color);Ie(Vr,Q)},[h,p,l,dr,Ie]),Ue=(0,s.useCallback)(Q=>{Q.key!=="Escape"||!sr||re(Q)},[re,sr]),Ke=(0,s.useMemo)(()=>cr==null||!Zr(ir)?!1:J.some((Q,Vr)=>Vr!==cr&&Zr(Q)&&ct(Q,ir)),[cr,ir,J]),jt=h||p,Mt=R&&(!((p?l:void 0)??(h?dr:void 0))||!sr&&(p&&l?or:K)),xo=R?P.addCurrentColor:P.addSwatch,Bn=R&&sr?P.cancel:xo,La=R||!sr,ko=h&&p?void 0:[p?"gradient":"solid"];let Ci=Ge;return R||(Ci=sr?re:wr),(0,i.jsxs)("div",{..._,"arc-color-palette":e,"is-adding-color":sr?"":void 0,children:[G&&(0,i.jsx)("header",{"arc-color-palette-header":"",id:L,children:typeof a=="string"?(0,i.jsx)("strong",{children:a}):(0,i.jsx)(ue,{...a,layout:"inline",isStrong:!0})}),(0,i.jsxs)("fieldset",{"arc-color-palette-set":"",id:U,"aria-labelledby":G?L:void 0,"aria-label":G?void 0:o??P.colorPalette,children:[ce?.map((Q,Vr)=>{if(Zr(Q)){const Ja=`${Ua(Q)}-${Vr}`,D=!!l&&ct(l,Q);return(0,s.createElement)(vn,{...m,key:Ja,kind:"gradient",gradient:Q,name:Q.name,isDraft:je(Vr),isSelected:D,canRemoveColor:f&&!je(Vr),contrastBgColor:g,labels:x,onClick:ie})}return(0,s.createElement)(vn,{...m,key:`${Dr(Q)}-${Vr}`,color:Q,kind:"swatch",isDraft:je(Vr),isSelected:Re[Vr],canRemoveColor:f&&!(R&&je(Vr)),contrastBgColor:g,tooltip:R&&je(Vr)?P.saveColor:void 0,labels:x,onClick:R&&je(Vr)?He:ie})}),jt&&La&&(0,i.jsx)(Br,{"arc-add-color":"",popoverTarget:T,icon:"fa-regular fa-plus",layout:"icon",shape:"round",size:"sm",hierarchy:"secondary",tooltip:Bn,onClick:Ci,isDisabled:Mt})]}),jt&&!R&&q&&(0,i.jsx)(Wa,{mode:"add",heading:"",panels:ko,canTogglePanels:h&&p,color:Zr(ir)?wa.color:ir??wa.color,gradient:Zr(ir)?ir:void 0,format:u,labels:x,onChange:Q=>{Q.activePanel==="solid"?Lr(Q.color.value):Lr(Q.gradient.gradient)},onPreviewColor:Q=>Lr(Q.value),onPreviewGradient:Q=>Lr(Q.gradient),popoverProps:{id:T,popover:"manual",anchorAt:"right-center",alternateAnchorId:U,hidePopoverButton:!0,tryFallbacks:!0,hasTail:!0,onToggle:ee,onKeyDown:Ue,footerSlot:(0,i.jsxs)(co,{"arc-color-picker-button-bar":"",children:[(0,i.jsx)(Br,{"arc-color-picker-button":"cancel",text:P.cancel,hierarchy:"secondary",size:"sm",onClick:re}),(0,i.jsx)(Br,{"arc-color-picker-button":"save",text:P.save,size:"sm",onClick:He,isDisabled:aa||Ke})]})}}),r&&(0,i.jsx)("footer",{"arc-color-palette-footer":"",children:r})]})};fn.addColor=$b,fn.removeColor=yb,Cr("ArcColorPalette",wb);const Sb=(0,s.memo)(function({palette:e,canAddColor:a,canAddGradient:t,canRemoveColor:o,activePaletteColor:n,activePaletteGradient:c,contrastBgColor:l,labels:u,onSwatchClick:h,onAddColor:p,onRemoveColor:f}){const g=(0,s.useCallback)((v,m)=>{h(v,m,e.id)},[e.id,h]);return(0,i.jsx)(fn,{...e,canAddColor:a??e.canAddColor,canAddGradient:t??e.canAddGradient,canRemoveColor:o,addColorFlow:"embedded",activeColor:n,activeGradient:c,contrastBgColor:l,labels:u,onAddColor:p,onRemoveColor:f,onSwatchClick:g})}),Ph=({palettes:r=[],canAddColor:e,canAddGradient:a,canRemoveColor:t,activePaletteColor:o,activePaletteGradient:n,contrastBgColor:c,selectedNameRef:l,hsvRef:u,popoverId:h,labels:p,onAddColor:f,onRemoveColor:g,commitLocalHsv:v,...m})=>{const y=(0,s.useRef)(r);y.current=r;const S=(0,s.useCallback)((k,w,z)=>{const x=y.current.find(P=>P.id===z);if(!x)return;if(w?.preventDefault(),w?.stopPropagation(),k?.action==="remove"&&(t??x.canRemoveColor)){x.onSwatchClick?.(k,w);return}k?.kind!=="gradient"&&k?.colorData&&(l.current=k.colorData.name,v(k.colorData.hsv));try{x.onSwatchClick?.(k,w)}catch{}if((k?.shouldClosePicker??!0)&&h)try{ya.handlePopover(h,"hide")}catch{}},[t,v,h,l]);return r.length?(0,i.jsx)("div",{...m,"arc-color-palettes":"","arc-color-picker-section":"palettes",children:r.map(k=>(0,i.jsx)(Sb,{palette:k,canAddColor:e,canAddGradient:a,canRemoveColor:!!(t??k.canRemoveColor),activePaletteColor:o,activePaletteGradient:n,contrastBgColor:c,labels:p,onSwatchClick:S,onAddColor:f,onRemoveColor:g},k.id))}):null},Th=({onCommit:r})=>{const e=(0,s.useRef)(!1),a=(0,s.useCallback)((t,o)=>{const n=()=>{e.current=!1,o(),r()};return{onChange:({value:c})=>{e.current=!0,t(Number(c))},onPointerUp:n,onPointerCancel:n,onBlur:()=>{e.current&&n()}}},[r]);return{isPreviewingRef:e,createInputProps:a}},Ih=1,Cb=/^[0-9A-Fa-f]{3}$/,Ab=/^[0-9A-Fa-f]{4}$/,zb="[0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8}",Eb="[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}",Rh=r=>{if(Cb.test(r))return{kind:"three",expanded:Ks(r)};if(Ab.test(r)){const e=Kr(`#${r}`);if(e)return{kind:"four",shorthand:r,expanded:ao(e),alphaPercent:Math.round(e.a*100)}}return null},_b=(r,e,a)=>r?.kind==="three"?a.hexExpandHint(r.expanded.toUpperCase()):r?.kind==="four"?e?a.hexApplyAlphaHint(r.expanded.toUpperCase(),r.alphaPercent):a.hexExpandHint(r.expanded.toUpperCase()):a.hexInvalid,Pb=(r,e,a,t=Ce)=>{const o=Va(r),n=Rh(o),c=o.length>0&&(!a&&o.length===8||!e&&o.length!==6&&o.length!==8||Kr(`#${o}`)===null),u=!e&&o.length>0&&o.length!==6&&o.length!==8||!a&&o.length===8?_b(n,a,t):t.hexInvalid,h=!a&&o.length===8?t.hexRgbOnly:u;let p=t.applyExpandedHex;return n?.kind==="four"?p=a?t.applyHexWithAlpha(n.expanded.toUpperCase(),n.alphaPercent):t.applyExpandedHexValue(n.expanded.toUpperCase()):n?.kind==="three"&&(p=t.applyExpandedHexValue(n.expanded.toUpperCase())),{isInvalid:c,errorAid:{tooltip:h,ariaLabel:p,fix:n}}},jh=(r,e,a,t)=>{const o=Kr(`#${r}`);o&&(e(r,{applyHexAlpha:!0,...t}),a(ao(o)))},Tb=(r,e,a,t)=>{if(e){jh(r,a,t);return}const o=Kr(`#${r}`);if(o){const n=ao(o);t(n),a(n)}},Ib=(r,e,a,t)=>{if(e)jh(r,a,t);else{const o=r.slice(0,6);t(o),a(o)}},Rb=(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))},jb=(r,e=!1)=>{const a=Va(r);return!e&&a.length>6?a.slice(0,6):a},Mb=(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},Mh=()=>typeof window<"u"&&"EyeDropper"in window&&typeof window.EyeDropper=="function",dl=Mh(),Lh=dl?window.EyeDropper:void 0,Dh=Lh?new Lh:void 0,Oh=({onColorPicked:r,labels:e,...a})=>
5691{const t=e??Ce,[o,n]=(0,s.useState)(!1),c=async()=>{if(!(!dl||!Dh||o)){n(!0);try{const{sRGBHex:l}=await Dh.open();if(typeof r=="function"){const u=De(Xc(l,"#000000"));r(Oe({...u,a:1},!1))}else console.warn("EyeDropper: onColorPicked prop was not provided")}catch(l){l instanceof DOMException&&l.name==="AbortError"||console.error("EyeDropper failed:",l)}finally{n(!1)}}};return dl?(0,i.jsx)("div",{"arc-color-eye-dropper":"",children:(0,i.jsx)(Br,{...a,onClick:c,layout:"icon",shape:"square",size:"md",variant:"common",hierarchy:"tertiary",icon:"fa-regular fa-eye-dropper",text:t.eyeDropper,tooltip:t.eyeDropperTooltip})}):null},lo=r=>(0,i.jsx)(i.Fragment,{children:!!r.children&&(0,i.jsx)("span",{...r})}),Lb=r=>(0,i.jsx)(i.Fragment,{children:!!r.children&&(0,i.jsx)("span",{...r})}),ul=({children:r,...e})=>(0,i.jsx)(i.Fragment,{children:!!r&&(0,i.jsx)(wt,{...e,children:(0,i.jsx)(St,{children:r})})}),Db=({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}),Ob=()=>(0,i.jsx)("span",{"input-element":"spacer"}),Bb=r=>(0,i.jsx)(lo,{...r,"input-element":"header"}),Nb=r=>(0,i.jsx)(ul,{...r,"input-element":"header-label"}),Fb=r=>(0,i.jsx)(lo,{...r,"input-element":"header-slot"}),Hb=r=>(0,i.jsx)(lo,{...r,"input-element":"body"}),Vb=r=>(0,i.jsx)(ul,{...r,"input-element":"input-prefix"}),Gb=r=>(0,i.jsx)(ul,{...r,"input-element":"input-suffix"}),Ub=r=>(0,i.jsx)(Lb,{...r,"input-element":"input-action"}),Kb=r=>(0,i.jsx)(lo,{...r,"input-element":"footer"}),Wb=r=>(0,i.jsx)(lo,{...r,"input-element":"footer-caption"}),Xb=r=>(0,i.jsx)(lo,{...r,"input-element":"footer-slot"}),qb=r=>e=>{if(!(e?.target instanceof HTMLInputElement))return;const a={name:e?.target?.name,value:e?.target?.value};r?.(a,e)},Wr=d`--arcâ¢input`,Ka=d`${Wr}â¢fg`,Yc=d`${Ka}â¢disabled`,Zc=d`${Ka}â¢readonly`,Jc=d`${Ka}â¢invalid`,la=d`${Wr}â¢bg`,Qc=d`${la}â¢hover`,ri=d`${la}â¢disabled`,ei=d`${la}â¢readonly`,ai=d`${la}â¢invalid`,Yb=d`${Wr}â¢align`,Bh=d`${Yb}â¢items`,Nh=d`${Wr}â¢header`,ti=d`${Nh}â¢labelâ¢color`,Fh=d`${Nh}â¢slotâ¢color`,Hh=d`${Wr}â¢footer`,hl=d`${Hh}â¢captionâ¢color`,Vh=d`${Hh}â¢slotâ¢color`,pl=d`${Wr}â¢border`,gl=d`${pl}â¢radius`,Zb=d`${pl}â¢width`,da=d`${pl}â¢color`,vl=d`${Wr}â¢outline`,Gh=d`${vl}â¢size`,Uh=d`${vl}â¢offset`,Kh=d`${vl}â¢color`,mn=d`${Wr}â¢height`,Jb=d`${Wr}â¢padding`,oi=d`${Jb}â¢inline`,fl=d`${oi}â¢end`,Wh=d`${Wr}â¢slot`,ml=d`${Wh}â¢gap`,bl=d`${Wh}â¢fontâ¢size`,ni=d`${da}â¢hover`,ci=d`${da}â¢disabled`,$l=d`${da}â¢readonly`,bn=d`${da}â¢invalid`,yl=d`${Wr}â¢actionâ¢height`,Xh=d`${Wr}â¢gap`,xl=d`${Wr}â¢fontâ¢size`,Qb=d` 5692@layer arc-components { 5693 5694/* --arc[-internal, -modifier, -computed] ⢠NOT FOR CONSUMER USE ---⢠*/ 5695 5696[arc-input] { 5697 5698 /* SIZES ---------------------------------------------------------⢠*/ 5699 5700 &[data-size=xl] { 5701 ${mn}: var(${b}â¢48); 5702 ${fl}: var(${M}â¢8); 5703 ${yl}: var(${b}â¢48); 5704 } 5705 5706 &:is([data-size=lg], [data-size=inherit]) { /* @default ⢠base size at 100% */ 5707 ${mn}: var(${b}â¢40); 5708 ${yl}: var(${b}â¢40); 5709 } 5710 5711 &[data-size=md] { 5712 ${mn}: var(${b}â¢32); 5713 ${gl}: var(${b}â¢4); 5714 ${yl}: var(${b}â¢32); 5715 } 5716 5717 &:has(select) { 5718 ${oi}: 0; 5719 ${Bh}: stretch; 5720 } 5721 5722 & { 5723 /* Defaults -------------------------⢠*/ 5724 ${xl}: var(${b}â¢14); 5725 ${bl}: var(${b}â¢12); 5726 5727 ${mn}: var(${b}â¢40); /* default size */ 5728 ${Xh}: var(${M}â¢6); 5729 ${ml}: var(${M}â¢4); 5730 ${oi}: var(${M}â¢12); 5731 ${fl}: var(${M}â¢3); 5732 ${gl}: var(${b}â¢8); 5733 ${Zb}: var(${b}â¢1); 5734 ${Gh}: var(${b}â¢2); 5735 ${Uh}: var(${b}â¢2); 5736 5737 &[data-size=inherit] { 5738 ${xl}: 0.875em; /* 14px at 100% */ 5739 ${bl}: 0.75em; /* 12px at 100% */ 5740 } 5741 } 5742 5743 /* VARIANTS ------------------------------------------------------⢠*/ 5744 5745 & { 5746 ${Ka}: var(--arc-color-fg-primary); 5747 ${ti}: inherit; 5748 ${Fh}: var(--arc-color-fg-secondary); 5749 ${hl}: var(--arc-color-fg-secondary); 5750 ${Vh}: var(--arc-color-fg-secondary); 5751 5752 &[data-variant=outline] { /* @default */ 5753 ${la}: var(--arc-color-bg-primary); 5754 ${Qc}: var(--arc-color-bg-primary); 5755 ${da}: var(--arc-color-border-mid); 5756 ${ni}
5756: var(--arc-color-border-heavy); 5757 5758 ${Yc}: var(--arc-color-fg-disabled); 5759 ${ri}: var(--arc-color-bg-secondary); 5760 ${ci}: var(--arc-color-border-mid); 5761 5762 ${Zc}: var(--arc-color-fg-primary); 5763 ${ei}: var(--arc-color-bg-disabled); 5764 ${$l}: var(--arc-color-border-mid); 5765 5766 ${Jc}: var(--arc-color-fg-critical-mid); 5767 ${ai}: var(--arc-color-bg-primary); 5768 ${bn}: var(--arc-color-fg-critical-mid); 5769 } 5770 5771 &[data-variant=solid] { 5772 ${la}: var(--arc-color-bg-secondary); 5773 ${Qc}: var(--arc-color-bg-hover-default); 5774 ${da}: transparent; 5775 ${ni}: var(--arc-color-border-stark); 5776 5777 ${Jc}: var(--arc-color-fg-critical-mid); 5778 ${ai}: var(--arc-color-bg-critical-muted); 5779 ${bn}: transparent; 5780 5781 ${Yc}: var(--arc-color-fg-disabled); 5782 ${ri}: var(--arc-color-bg-disabled); 5783 ${ci}: transparent; 5784 5785 ${Zc}: var(--arc-color-fg-primary); 5786 ${ei}: var(--arc-color-bg-disabled); 5787 ${bn}: var(--arc-color-fg-critical-mid); 5788 } 5789 5790 &[data-variant=plain] { 5791 ${la}: transparent; 5792 ${Qc}: var(--arc-color-bg-hover-default); 5793 ${da}: transparent; 5794 ${ni}: transparent; 5795 5796 ${Jc}: var(--arc-color-fg-critical-mid); 5797 ${ai}: transparent; 5798 ${bn}: var(--arc-color-fg-critical-mid); 5799 5800 ${Yc}: var(--arc-color-fg-disabled); 5801 ${ri}: transparent; 5802 ${ci}: transparent; 5803 5804 ${Zc}: var(--arc-color-fg-primary); 5805 ${ei}: var(--arc-color-bg-disabled); 5806 ${$l}: transparent; 5807 } 5808 } 5809 5810 /* STATES --------------------------------------------------------⢠*/ 5811 5812 &:where(:not(:has( 5813 input:where(:disabled, :read-only), 5814 select:where(:disabled, [data-readonly]) 5815 ))) { 5816 &:where( 5817 :hover, 5818 [data-simulate=hover] 5819 ) { 5820 ${da}: var(--arc-input-border-color-hover, var(${ni})); 5821 ${la}: var(--arc-input-background-hover, var(${Qc})); 5822 } 5823 5824 &:has([input-element=body]) { 5825 &:where( 5826 :focus-within, 5827 [data-simulate=focus], 5828 [data-simulate=active], 5829 :has(:focus, :focus-visible) 5830 ) { 5831 ${Kh}: var(--arc-color-border-focus); 5832 } 5833 } 5834 } 5835 5836 &:where(:has( 5837 input[type=range]:not(:disabled), 5838 select:not(:disabled, [data-readonly]) 5839 )) { 5840 ${Wr}â¢cursor: pointer; 5841 } 5842 5843 &:where(:has( 5844 input:not([type=range]):read-only, 5845 select[data-readonly] 5846 )) { 5847 ${Wr}â¢cursor: default; 5848 ${Ka}: var(${Zc}); 5849 ${la}: var(${ei}); 5850 ${da}: var(${$l}); 5851 } 5852 5853 &:has(input:disabled, select:disabled) { 5854 ${Wr}â¢cursor: not-allowed; 5855 ${Ka}: var(${Yc}); 5856 ${la}: var(${ri}); 5857 ${da}: var(${ci}); 5858 ${ti}: var(--arc-color-fg-primary); 5859 } 5860 5861 &[data-simulate=invalid], 5862 &:has( 5863 input:user-invalid:not(:focus), 5864 select:user-invalid:not(:focus) 5865 ) { 5866 ${la}: var(${ai}); 5867 ${ti}: var(${Ka}); 5868 ${da}: var(${bn}); 5869 ${hl}: var(${Jc}); 5870 } 5871 5872 /* LAYOUTS -------------------------------------------------------⢠*/ 5873 5874 &[data-layout=fill] { /* @default */ 5875 ${Wr}â¢display: flex; 5876 } 5877 5878 &[data-layout=hug] { 5879 ${Wr}â¢display: inline-flex; 5880 } 5881 5882 & { 5883 ${Wr}â¢border: var(--arc-border-width-sm) solid var(${da}); 5884 ${Wr}â¢outline: var(${Gh}) solid var(${Kh}, transparent); 5885 } 5886} 5887 5888/* Inter-Component Communications ----------------------------------⢠*/ 5889 5890[arc-input] { 5891 --arc-icon-text-line-height: normal; 5892 --arc-label-cursor: var(${Wr}â¢cursor, inherit); /* ArcLabel ⢠cursor syncing */ 5893 5894 &[arc-text-input][data-size=md] { 5895 --arc-button-border-radius: var(--arc-border-radius-sm); 5896 --arc-button-outline-offset: 0; 5897 --arc-button-height: 80%; /* ArcButton ⢠the input size 'md' needs 5898 a slightly smaller "input-action" button 5899 footprint; there's no direct access to 5900 ArcButton['size'] prop in this context */ 5901 } 5902} 5903 5904[arc-input]:not([hidden]) { 5905 display: var(${Wr}â¢display, flex); 5906 flex-direction: column; 5907 gap: var(${ml}); 5908 color: var(--arc-input-color, var(${Ka})); 5909 5910 :is([input-element=header], [input-element=footer]) { 5911 flex: none; 5912 display: flex; 5913 justify-content: space-between; 5914 font-size: var(--arc-input-slot-font-size, var(${bl})); 5915 gap: var(${ml}); 5916 } 5917 5918 [input-element=spacer] { 5919 display: safe flex-end; 5920 } 5921 5922 [input-element=header] {
5923 align-items: safe flex-end; 5924 } 5925 5926 [input-element=header-label] { 5927 flex: 1; 5928 color: var(--arc-input-header-label-color, var(${ti})); 5929 opacity: var(--arc-input-header-label-opacity, unset); 5930 font-weight: var(--arc-input-header-label-font-weight, var(--arc-font-weight-600)); 5931 } 5932 5933 [input-element=header-slot] { 5934 color: var(--arc-input-header-slot-color, var(${Fh})); 5935 min-width: var(--arc-input-header-slot-min-width, fit-content); 5936 } 5937 5938 [input-element=footer] { 5939 align-items: baseline; 5940 } 5941 5942 [input-element=footer-caption] { 5943 flex: 1; 5944 color: var(--arc-input-footer-caption-color, var(${hl})); 5945 } 5946 5947 [input-element=footer-slot] { 5948 color: var(--arc-input-footer-slot-color, var(${Vh})); 5949 min-width: var(--arc-input-footer-slot-min-width, fit-content); 5950 } 5951 5952 [input-element=body] { 5953 flex: none; 5954 position: relative; 5955 display: flex; 5956 align-items: var(${Bh}, center); 5957 gap: var(--arc-input-gap, var(${Xh})); 5958 height: var(--arc-input-height, var(${mn})); 5959 font-size: var(${xl}); 5960 5961 color: var(--arc-input-color, var(${Ka})); 5962 background-color: var(--arc-input-background, var(${la})); 5963 border: var(--arc-input-border, var(${Wr}â¢border)); 5964 border-radius: var(--arc-input-border-radius, var(${gl})); 5965 outline: var(${Wr}â¢outline, none); 5966 outline-offset: var(--arc-input-outline-offset, var(${Uh})); 5967 5968 transition-property: border, background, color, height; 5969 transition-duration: 200ms; 5970 transition-timing-function: ease-out; 5971 5972 cursor: var(${Wr}â¢cursor, unset); 5973 5974 padding-inline: var(--arc-input-padding-inline, var(${oi})); 5975 5976 &:has([input-element=input-action]) { 5977 padding-inline-end: var(${fl}); 5978 } 5979 5980 input { 5981 cursor: inherit; 5982 appearance: none; 5983 align-self: stretch; 5984 flex: 1; 5985 font: inherit; 5986 color: inherit; 5987 padding: 0; 5988 margin: 0; 5989 outline: none; 5990 line-height: normal; 5991 width: var(--arc-input-width, 100%); 5992 min-width: var(--arc-input-min-width, 1em); 5993 max-width: var(--arc-input-max-width, 100%); 5994 text-align: var(--arc-input-text-align, unset); 5995 5996 &:not([type=range]) { 5997 border: var(--arc-border-width-sm) solid transparent; 5998 background: transparent; 5999 } 6000 6001 /* @note - textfield appearance suppresses native spinners for number inputs */ 6002 &[arc-input-type=number][is-appearance=textfield] { 6003 appearance: textfield; 6004 6005 &::-webkit-inner-spin-button, 6006 &::-webkit-outer-spin-button { 6007 appearance: none; 6008 } 6009 } 6010 6011 &[arc-input-type=search]::-webkit-search-cancel-button { 6012 appearance: none; 6013 display: none; 6014 } 6015 } 6016 6017 /* @note - reset font-size for nested input elements */ 6018 [input-element] { font-size: var(--arc-input-element-font-size, 1em); } 6019 } 6020 6021 [input-element=input-prefix] { 6022 flex: none; 6023 opacity: var(--arc-input-prefix-opacity, unset); 6024 font-weight: var(--arc-input-prefix-font-weight, unset); 6025 } 6026 6027 [input-element=input-suffix] { 6028 flex: none; 6029 opacity: var(--arc-input-suffix-opacity, var(--arc-alpha-40)); 6030 } 6031 6032 [input-element=input] { 6033 flex: 1; 6034 display: flex; 6035 } 6036 6037 [input-element=input-action] { 6038 flex: none; 6039 cursor: inherit; 6040 align-self: stretch; 6041 display: var(--arc-input-action-display, flex); 6042 align-items: center; 6043 justify-content: center; 6044 } 6045} 6046 6047} 6048`,r$={onChangeHandler:qb,Wrapper:Db,Spacer:Ob,Header:Bb,HeaderLabel:Nb,HeaderSlot:Fb,InputBody:Hb,InputPrefix:Vb,InputSuffix:Gb,InputAction:Ub,Footer:Kb,FooterCaption:Wb,FooterSlot:Xb};Cr("ArcInput",Qb);const Pr=r$,e$="[input-element=body]",a$=24;function t$({inputRef:r,onChange:e,enabled:a,deltaPerStep:t=a$}){const o=(0,s.useRef)(e);o.current=e,(0,s.useEffect)(()=>{if(!a||t<=0)return;let n=0;const c=()=>r.current,l=()=>{const v=c();if(!(v instanceof Element))return null;const m=v.closest(e$);return m instanceof HTMLElement?m:null},u=(v,m)=>{const y=o.current;if(!y)return;const S={name:v.name,value:m};y(S,{target:v,currentTarget:v})},h=()=>{n=0},p=v=>{const m=c();if(!m||document.activeElement!==m||m.type!=="number"||m.disabled||m.readOnly)return;v.preventDefault(),v.stopPropagation();const y=Number(m.step)||1,S=Number(m.min),k=Number(m.max),w=Number.isFinite(S)?S:void 0,z=Number.isFinite(k)?k:void 0;let x=Number(m.value);if(!Number.isFinite(x))return;n+=v.deltaY;
6048const _=t,P=()=>{const T=Math.max(w??-1/0,x-y);return T===x?!1:(x=T,u(m,String(T)),!0)},R=()=>{const T=Math.min(z??1/0,x+y);return T===x?!1:(x=T,u(m,String(T)),!0)};for(;n>=_;){if(!P()){n=0;break}n-=_}for(;n<=-_;){if(!R()){n=0;break}n+=_}},f=l(),g=c();if(!(!f||!g||g.type!=="number"))return g.addEventListener("blur",h),f.addEventListener("wheel",p,{passive:!1}),()=>{g.removeEventListener("blur",h),f.removeEventListener("wheel",p)}},[a,t,r])}const ii=fr(pa,["fill","hug"]),si=fr(ze,["inherit","xl","lg","md"]),kl=fr(Ur,["outline","solid","plain"]),o$=ii,n$=si,c$=fr(kl,["outline","solid"]),i$=["text","number","password","email","url"],uo=(0,s.forwardRef)(({layout:r="hug",size:e="inherit",variant:a="outline",inputProps:t,headerLabel:o,headerSlot:n,inputPrefix:c,inputAction:l,inputSuffix:u,footerCaption:h,footerSlot:p,...f},g)=>{const{id:v,wheelControl:m,appearance:y,onChange:S,...k}=t,w="arc-search"in f,z=w?"search":k?.type||"text",x=k?.disabled||void 0,_=k?.readOnly||void 0,P=k?.required||void 0,R=!!(o||n),U=!!(h||p),T=(0,s.useRef)(null),L=(0,s.useCallback)(H=>{T.current=H,oa(g,H)},[g]),G=typeof m=="object"?m.deltaPerStep:void 0;t$({enabled:z==="number"&&m!==!1,deltaPerStep:G,inputRef:T,onChange:S});const I=l&&(0,s.isValidElement)(l)?(0,s.cloneElement)(l,{size:"md"}):l;return(0,i.jsxs)(Pr.Wrapper,{...f,"arc-text-input":"","arc-input":z,layout:r,size:e,variant:a,children:[R&&(0,i.jsxs)(Pr.Header,{children:[(0,i.jsx)(Pr.HeaderLabel,{htmlFor:v,children:o}),!!n&&(0,i.jsx)(Pr.Spacer,{}),(0,i.jsx)(Pr.HeaderSlot,{children:n})]}),(0,i.jsxs)(Pr.InputBody,{children:[(0,i.jsx)(Pr.InputPrefix,{htmlFor:v,children:c}),(0,i.jsx)("input",{...k,...w?{type:z}:{}
6048,ref:L,id:v,"arc-input-type":z,onChange:Pr.onChangeHandler(S),"aria-disabled":x,"aria-readonly":_,"aria-required":P,"is-appearance":y??void 0}),(0,i.jsx)(Pr.InputSuffix,{htmlFor:v,children:u}),(0,i.jsx)(Pr.InputAction,{children:I})]}),U&&(0,i.jsxs)(Pr.Footer,{children:[(0,i.jsx)(Pr.FooterCaption,{children:h}),!!p&&(0,i.jsx)(Pr.Spacer,{}),(0,i.jsx)(Pr.FooterSlot,{children:p})]})]})}),qh=({commitDraft:r,setIsEditing:e,onRevert:a})=>{const t=(0,s.useCallback)(()=>{e(!0)},[e]),o=(0,s.useCallback)(()=>{e(!1),r()},[e,r]),n=(0,s.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}},Yh=({hsv:r,draftValue:e,label:a,showLabel:t=!0,setIsEditing:o,commitDraft:n,setDraftValue:c,expandHexShorthand:l=!1,hasAlphaTools:u=!0,labels:h})=>{const p=h??Ce,f=a??p.hex,g=Or(void 0,"hex-input"),v=(0,s.useRef)(null),m=ao(De(r)),[y,S]=(0,s.useState)(!1),{isInvalid:k,errorAid:w}=(0,s.useMemo)(()=>Pb(e,l,u,p),[e,l,u,p]),{onFocus:z,onBlur:x,onKeyDown:_}=qh({commitDraft:n,setIsEditing:o,onRevert:()=>c(m)}),P=(0,s.useCallback)(()=>{S(!0);const H=Va(e);if(H.length===8){Ib(H,u,n,c),x();return}if(l&&H.length===3){const V=Ks(H);c(V),n(V),o(!1),x();return}l&&H.length===4&&Tb(H,u,n,c),x()},[e,l,u,c,n,o,x]),R=(0,s.useCallback)(H=>{if(H.key!=="ArrowUp"&&H.key!=="ArrowDown")return;const V=H.key==="ArrowUp"?Ih:-Ih,er=H.altKey?"r":H.metaKey?"g":"b",O=H.shiftKey?16:1,J=Ju(Va(e),De(r),er,V,O);c(J),n(J,{phase:"preview"}),H.preventDefault()},[e,r,c,n]),U=(0,s.useCallback)(H=>{if(R(H),!H.defaultPrevented){if(H.key==="Enter"){H.preventDefault(),o(!1),H.currentTarget.blur();return}H.key==="Escape"&&_(H)}},[R,o,_]),T=({value:H})=>{const V=jb(H??"",u);c(V),V.length===6&&n(V,{phase:"preview"})},L=k&&y,G=L?w.tooltip:void 0,I=(0,s.useCallback)(()=>{const H=Rh(Va(e));H&&Rb(H,n,c,u),queueMicrotask(()=>{v.current?.focus()})},[e,n,c,u]);return(0,i.jsx)(uo,{ref:v,"arc-color-input":"hex",size:"md",variant:"solid",headerLabel:t?f:void 0,inputPrefix:"#",inputAction:L?(0,i.jsx)(Br,{layout:"icon",icon:"fa-solid fa-exclamation-circle",variant:"tertiary",tooltip:w.tooltip,"aria-label":w.ariaLabel,onClick:I}):void 0,inputProps:{id:g,"aria-label":f,placeholder:"...",value:e,pattern:u?zb:Eb,maxLength:u?9:6,title:G,"aria-invalid":L?!0:void 0,style:{textTransform:"uppercase",letterSpacing:"0.0625ch"},onFocus:z,onBlur:P,onKeyDown:U,onChange:T}})},Zh=["value","pct","pctSigned","min","max"],Jh=new RegExp(`\\{#(${Zh.join("|")})\\}`,"g"),s$=ii,l$=si,d$=kl,u$=["top","inline"],Qh=({text:r,value:e,toValue:a,pctSigned:t,min:o,max:n})=>{const c={value:String(e??""),pct:String(a??""),pctSigned:String(t??""),min:String(o??""),max:String(n??"")};return typeof r=="string"?r.replace(Jh,(l,u)=>c[u]):typeof r=="function"?r({...c,toValue:a,pctSigned:t}):r},h$=10,wl=r=>r==="ArrowUp"||r==="ArrowDown"||r==="ArrowLeft"||r==="ArrowRight",Sl=(r,{shiftKey:e},{step:a=1,stepLarge:t=h$}={})=>
6048{if(!wl(r))return null;const o=e?t:a;return r==="ArrowDown"||r==="ArrowLeft"?-o:o},r0=(r,e,{min:a=-1/0,max:t=1/0}={})=>Z(r+e,a,t),p$=(r,{getValue:e,onStep:a,min:t,max:o,step:n,stepLarge:c})=>{const l=Sl(r.key,r,{step:n,stepLarge:c});if(l==null)return!1;r.preventDefault();const u=r0(e(),l,{min:t,max:o});return a(u,r),!0},e0=(...r)=>e=>{r.some(a=>(a(e),e.defaultPrevented))},a0=(r,e,a,t)=>Z(Math.round(r/e)*e,a,t),t0=(r,e,a,t,o)=>{const n=r%a===0;return e>0?Z(n?r+a:Math.ceil(r/a)*a,t,o):Z(n?r-a:Math.floor(r/a)*a,t,o)},o0=({snapStep:r,min:e,max:a,step:t=1,value:o,onChange:n,onKeyDown:c,onPointerDown:l,onPointerMove:u,onPointerUp:h,onPointerCancel:p})=>{const f=(0,s.useRef)(!1),g=(0,s.useRef)(null),v=(0,s.useCallback)(()=>{g.current?.(),g.current=null},[]),m=(0,s.useCallback)(()=>{if(g.current||typeof window>"u")return;const x=_=>{f.current=_.shiftKey};window.addEventListener("keydown",x,!0),window.addEventListener("keyup",x,!0),g.current=()=>{window.removeEventListener("keydown",x,!0),window.removeEventListener("keyup",x,!0)}},[]);(0,s.useEffect)(()=>v,[v]);const y=(0,s.useCallback)(x=>{f.current=x.shiftKey,m(),l?.(x)},[l,m]),S=(0,s.useCallback)(x=>{f.current=!1,v(),h?.(x)},[h,v]),k=(0,s.useCallback)(x=>{f.current=!1,v(),p?.(x)},[p,v]),w=(0,s.useCallback)((x,_)=>{if(!r||!f.current){n?.(x,_);return}const P=a0(Number(x.value),r,e,a);n?.({...x,value:String(P)},_)},[r,e,a,n]),z=(0,s.useCallback)(x=>{if(!r||!x.shiftKey||!wl(x.key)){c?.(x);return}const _=Sl(x.key,x,{step:t,stepLarge:r});if(_==null){c?.(x);return}x.preventDefault();
6048const P=t0(o,_>0?1:-1,r,e,a),R={value:String(P)};n?.(R,x)},[r,t,e,a,o,n,c]);return r?{onChange:w,onKeyDown:z,onPointerDown:y,onPointerMove:u,onPointerUp:S,onPointerCancel:k}:{onChange:n,onKeyDown:c,onPointerDown:l,onPointerMove:u,onPointerUp:h,onPointerCancel:p}},Ne=d`--arcâ¢slider`,ea=d`${Ne}â¢track`,Ir=d`${Ne}â¢thumb`,ho={BASE:d` 6049 ${ea}â¢bg: var(--arc-slider-track-background, var(--arc-color-border-mid)); 6050 ${ea}â¢progressâ¢bg: var(--arc-slider-progress-background, var(--arc-color-bg-theme-heavy)); 6051 ${ea}â¢height: var(--arc-slider-track-height, max(4px, 0.25em)); 6052 6053 ${Ir}â¢size: var(--arc-slider-thumb-size, max(16px, 1em)); 6054 ${Ir}â¢sizeâ¢hover: var(--arc-slider-thumb-size-hover, max(16px, 1em)); 6055 ${Ir}â¢sizeâ¢anchor: var(--arc-slider-thumb-size-hover, var(--arc-slider-thumb-size, max(16px, 1em))); 6056 ${Ir}â¢sizeâ¢rest: var(${Ir}â¢sizeâ¢anchor); 6057 6058 ${Ir}â¢bg: var(--arc-slider-thumb-background, var(--arc-color-bg-theme-heavy)); 6059 ${Ir}â¢shadow: var(--arc-slider-thumb-shadow, var(--arc-shadow-md)); 6060 6061 &:has([has-small-thumb]) { 6062 ${Ir}â¢size: var(--arc-slider-thumb-size, max(8px, 0.5em)); 6063 ${Ir}â¢sizeâ¢rest: var(--arc-slider-thumb-size, max(8px, 0.5em)); 6064 } 6065 6066 &:has( 6067 [arc-slider-surface]:hover, 6068 [arc-slider-surface]:active, 6069 [arc-slider-surface]:focus-within 6070 ):not(:has([arc-slider-input]:disabled)) { 6071 ${Ir}â¢size: var(${Ir}â¢sizeâ¢hover); 6072 } 6073 6074 &:has([arc-slider-input]:disabled) { 6075 ${Ir}â¢bg: var(--arc-slider-thumb-background-disabled, var(--arc-color-bg-neutral-mid)); 6076 ${ea}â¢progressâ¢bg: var(--arc-slider-progress-background-disabled, var(--arc-color-bg-neutral-mid)); 6077 ${ea}â¢bg: var(--arc-slider-track-background-disabled, var(--arc-color-bg-disabled)); 6078 ${Ir}â¢shadow: var(--arc-slider-thumb-shadow-disabled, none); 6079 } 6080 6081 ${Ir}â¢shift: calc((var(${ea}â¢height) - var(${Ir}â¢size)) / 2); 6082 ${Ir}â¢shiftâ¢anchor: calc((var(${ea}â¢height) - var(${Ir}â¢sizeâ¢anchor)) / 2); 6083 6084 ${Ne}â¢radius: var(--arc-border-radius-pill); 6085 ${Ne}â¢vx: calc((100% - var(${Ir}â¢size)) * (var(--jsâ¢v, 0) / 100)); 6086 ${Ne}â¢vxâ¢anchor: calc((100% - var(${Ir}â¢sizeâ¢anchor)) * (var(--jsâ¢v, 0) / 100)); 6087 6088 ${Ir}â¢cxâ¢nudge: calc( 6089 (var(--jsâ¢v, 0) / 100 - 0.5) * (var(${Ir}â¢sizeâ¢anchor) - var(${Ir}â¢sizeâ¢rest)) 6090 ); 6091 6092 ${Ne}â¢tx: calc(var(${Ne}â¢vxâ¢anchor) + var(${Ir}â¢cxâ¢nudge)); 6093 ${Ne}â¢ty: var(${Ir}â¢shiftâ¢anchor); 6094 `,THUMB:d` 6095 appearance: none; 6096 width: var(${Ir}â¢size); 6097 height: var(${Ir}â¢size); 6098 border: none; 6099 background: var(${Ir}â¢bg); 6100 translate: 0 0; 6101 box-sizing: border-box; 6102 border-radius: var(--arc-border-radius-circle); 6103 box-shadow: var(${Ir}â¢shadow); 6104 transition-property: translate, width, height, background; 6105 transition-duration: 200ms; 6106 transition-timing-function: ease-out; 6107 `,THUMB_FOCUS:d` 6108 outline: var(--arc-border-width-md) solid var(--arc-color-border-focus); 6109 outline-offset: var(--arc-slider-thumb-outline-offset, 0.125em); 6110 `,TRACK:d` 6111 display: flex; 6112 align-items: center; 6113 height: var(${ea}â¢height); 6114 border-radius: var(${Ne}â¢radius); 6115 background: var(${ea}â¢bg); 6116 `},g$=d` 6117@layer arc-components { 6118 6119 /* SETUP ---------------------------------------------------------⢠*/ 6120 6121 [arc-slider] { 6122 ${ho.BASE} 6123 font-size: initial; 6124 6125 --arc-input-header-label-font-weight: var(--arc-slider-label-font-weight, unset); 6126 --arc-input-prefix-font-weight: var(--arc-slider-label-font-weight, var(--arc-font-weight-600)); 6127 6128 --arc-input-header-label-opacity: var(--arc-slider-label-opacity, unset); 6129 --arc-input-prefix-opacity: var(--arc-slider-label-opacity, unset); 6130 6131 ::-webkit-inner-spin-button { 6132 appearance: none; 6133 } 6134 6135 ::-webkit-list-button { 6136 appearance: none; 6137 } 6138 6139 ::-moz-number-spin-box { 6140 display: none; 6141 } 6142 6143 [arc-label-content] { 6144 display: contents; 6145 } 6146 6147 > [input-element=body] { 6148 --arc-input-gap: var(${b}â¢16); 6149 --arc-input-padding-inline: 0; 6150 --arc-input-height: var(--arc-slider-input-height, unset); 6151 --arc-label-align-items: center; 6152 } 6153 6154 [input-element=input-prefix] { 6155 --arc-input-element-font-size: max(12px, 0.75em); 6156 } 6157 6158 [arc-slider-surface] { 6159 --arc-input-min-width: 3em; 6160 --arc-tooltip-text-align: center; 6161 --arc-tooltip-min-width: 2.5em; 6162 } 6163 6164 [arc-slider-output] { 6165 --arc-input-text-align: center; 6166 --arc-input-width: var(--arc-slider-number-input-width, max(38px, 4ch)); 6167 --arc-input-action-height: 100%; 6168 --arc-input-outline-offset: var(${b}â¢2); /* matches the Button component's outline-offset */ 6169 } 6170 } 6171 6172 /* CORE ----------------------------------------------------------⢠*/ 6173 6174 [arc-slider] { 6175 max-width: var(--jsâ¢maxâ¢width, var(--arc-slider-max-width, 100%)); 6176 6177 [arc-slider-surface] { 6178 flex: 1; 6179 position: relative; 6180 display: flex; 6181 align-items: center; 6182 min-width: 0; 6183 height: var(${ea}â¢height); 6184 border-radius: var(${Ne}â¢radius); 6185 6186 -webkit-user-select: none; 6187 user-select: none; 6188 6189 /* track progress (fill to thumb center); logical inset follows dir so RTL mirrors like native range */ 6190 &::before { 6191 content: ''; 6192 position: absolute; 6193 display: var(--arc-slider-progress-display, block); 6194 inset-block: calc(50% - var(${ea}â¢height) / 2); 6195 inset-inline-start: 0; 6196 inset-inline-end: auto; 6197 width: calc(var(${Ir}â¢size) / 2 + var(${Ne}â¢vx)); 6198 height: var(${ea}â¢height); 6199 border-radius: var(${Ne}â¢radius); 6200 background: var(${ea}â¢progressâ¢bg); 6201 pointer-events: none; 6202 transition: background 200ms ease-out; 6203 } 6204 6205 &:has(:focus:focus-visible) { 6206 [arc-slider-thumb] { ${ho.THUMB_FOCUS} } 6207 } 6208 } 6209 6210 [arc-slider-input] { 6211 ${ho.TRACK} 6212 6213 &::-moz-range-track { ${ho.TRACK} } 6214 &::-moz-focus-outer { border: 0; } 6215 6216 &::-moz-range-thumb { ${ho.THUMB} } 6217 &::-webkit-slider-thumb { ${ho.THUMB} } 6218 } 6219 6220 &:has( 6221 [arc-slider-surface]:hover, 6222 [arc-slider-surface]:active, 6223 [arc-slider-surface]:focus-within 6224 ):not(:has([arc-slider-input]:disabled)) { 6225 [arc-slider-input]::-webkit-slider-thumb { translate: var(${Ir}â¢cxâ¢nudge) 0; } 6226 [arc-slider-input]::-moz-range-thumb { translate: var(${Ir}â¢cxâ¢nudge) 0; } 6227 6228 &:dir(rtl) { 6229 [arc-slider-input]::-webkit-slider-thumb { translate: calc(-1 * var(${Ir}â¢cxâ¢nudge)) 0; } 6230 [arc-slider-input]::-moz-range-thumb { translate: calc(-1 * var(${Ir}â¢cxâ¢nudge)) 0; } 6231 } 6232 } 6233 6234 [arc-slider-thumb] { 6235 position: absolute; 6236 width: var(${Ir}â¢sizeâ¢anchor); 6237 height: var(${Ir}â¢sizeâ¢anchor); 6238 inset-block-start: var(${Ne}â¢ty); 6239 inset-inline-start: var(${Ne}â¢tx); 6240 border-radius: var(${Ne}â¢radius); 6241 pointer-events: none; 6242 } 6243 } 6244 6245 [arc-slider-captions] { 6246 position: absolute; 6247 inset: 0.5em 0 auto 0; 6248 display: flex; 6249 align-items: center; 6250 justify-content: space-between; 6251 gap: 0.25em; 6252 color: var(--arc-color-fg-secondary); 6253 } 6254 6255 [arc-slider-caption] { 6256 font-size: max(10px, 0.625em); 6257 } 6258 6259 [arc-slider-output] { 6260 --arc-input-action-display: contents; 6261 --arc-button-height: var(--arc-slider-output-button-height, 100%); 6262 6263 /* 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 6264 --arc-input-suffix-opacity: var(--arc-slider-output-opacity, 61.2%); 6265 6266 flex: none;
6267 align-self: stretch; 6268 display: flex; 6269 align-items: center; 6270 justify-content: center; 6271 gap: max(6px, 0.375em); 6272 } 6273} 6274 6275`,n0=(0,s.forwardRef)(({id:r,layout:e="hug",size:a="inherit",variant:t="solid",headerLabel:o,labelPlacement:n="top",displayPrecision:c=0,headerSlot:l,inputIdPrefix:u="arc-slider",inputProps:h,inputAction:p,inputSuffix:f,footerCaption:g,footerSlot:v,valueInputProps:m={},tooltipProps:y={},renderOutput:S,snapStep:k,style:w,...z},x)=>{const _=(0,s.useRef)(null),P=Or(r,u),{minLabel:R,maxLabel:U,surfaceName:T,smallThumbAtRest:L=!1,onChange:G,value:I,min:H=0,max:V=100,step:er=1,disabled:O,onKeyDown:J,onPointerDown:nr,onPointerMove:sr,onPointerUp:yr,onPointerCancel:q,...tr}=h,Mr=Number(H),dr=Number(V),br=Math.min(Mr,dr),hr=Math.max(Mr,dr),pr=(0,s.useRef)(!1),vr=(0,s.useRef)(Number(I));pr.current||(vr.current=Number(I));const kr=(0,s.useCallback)((ee,Ge)=>{if(pr.current){const Ue=Number(ee.value);Number.isFinite(Ue)&&(vr.current=Ue)}G?.(ee,Ge)},[G]),K=(0,s.useCallback)(ee=>{pr.current=!0,vr.current=Number(I),nr?.(ee)},[nr,I]),or=(0,s.useCallback)(ee=>{pr.current=!1,yr?.(ee)},[yr]),C=(0,s.useCallback)(ee=>{pr.current=!1,q?.(ee)},[q]),$=o0({snapStep:k,min:br,max:hr,step:Number(er),value:Number(I),onChange:kr,onKeyDown:J,onPointerDown:K,onPointerMove:sr,onPointerUp:or,onPointerCancel:C}),N=pr.current?vr.current:I,ar=(0,s.useMemo)(()=>({...tr,id:P,value:N,min:br,max:hr,step:er,disabled:O}),[tr,P,N,br,hr,er,O]),{showTooltip:E=!1,text:F,...Y}=y,{toValue:cr,pctSigned:ir=0}=Ns({value:Number(N),min:Number(br),max:Number(hr),step:Number(er)}),wr=(0,s.useMemo)(()=>({value:N,toValue:xa(cr,Number(c)),pctSigned:xa(ir,Number(c)),min:br,max:hr}),[c,hr,br,ir,cr,N]),Lr=(0,s.useMemo)(()=>E?Qh({text:F,...wr}):void 0,[E,F,wr]),re=(0,s.useMemo)(()=>Pr.onChangeHandler($.onChange),[$.onChange]),He=(0,s.useCallback)((ee,Ge)=>{const Ue=String(ee.value??I??br);G?.({...ee,value:Ue},Ge)},[G,I,br]),Ie=(0,s.useMemo)(()=>{const{deltaPerStep:ee,showValueInput:Ge=!1,...Ue}=m;return S&&typeof S=="function"?S(wr):(f||Ge||p)&&(0,i.jsxs)(i.Fragment,{children:[f&&(0,i.jsx)(Pr.InputSuffix,{htmlFor:P,children:Qh({text:f,...wr})}),Ge&&(0,i.jsx)(uo,{"arc-slider-number-input":"",layout:"hug",size:a,variant:t,inputProps:{onKeyDown:$.onKeyDown,onPointerDown:$.onPointerDown,onPointerMove:$.onPointerMove,onPointerUp:$.onPointerUp,onPointerCancel:$.onPointerCancel,...Ue,...ar,id:`${P}-text`,type:"number",appearance:"textfield",wheelControl:ee?{deltaPerStep:ee}:void 0,onChange:He}}),p&&(0,i.jsx)(Pr.InputAction,{children:p})]})},[m,f,p,S,wr,P,a,t,ar,$.onKeyDown,$.onPointerDown,$.onPointerMove,$.onPointerUp,$.onPointerCancel,He]),ce=(0,s.useMemo)(()=>!!o,[o]),Re=(0,s.useMemo)(()=>ce&&n==="top",[ce,n]),Ve=(0,s.useMemo)(()=>ce&&n==="inline",[ce,n]),aa=(0,s.useMemo)(()=>!!(Re||l),[Re,l]),ie=(0,s.useMemo)(()=>!!(g||v),[g,v]),je=(0,s.useMemo)(()=>({...w,"--js\u2022v":String(cr)}),[w,cr]);return(0,i.jsxs)(Pr.Wrapper,{...z,"arc-slider":"","arc-input":"range",layout:e,size:a,style:je,children:[aa&&(0,i.jsxs)(Pr.Header,{children:[Re&&(0,i.jsx)(Pr.HeaderLabel,{htmlFor:P,children:o}),!!l&&(0,i.jsx)(Pr.Spacer,{}),(0,i.jsx)(Pr.HeaderSlot,{children:l})]}),(0,i.jsxs)(Pr.InputBody,{children:[Ve&&(0,i.jsx)(Pr.InputPrefix,{htmlFor:P,children:o}),(0,i.jsxs)("span",{"arc-slider-surface":T??"","has-small-thumb":L?"":void 0,children:[(0,i.jsx)("label",{"arc-slider-thumb":"",ref:_,htmlFor:P,"aria-hidden":!0}),(0,i.jsx)(mc,{...Y,isEnabled:E&&!O,text:Lr||String(N),alternateAnchor:_,children:(0,i.jsx)("input",{...tr,onKeyDown:$.onKeyDown,onPointerDown:$.onPointerDown,onPointerMove:$.onPointerMove,onPointerUp:$.onPointerUp,onPointerCancel:$.onPointerCancel,ref:x,id:P,"arc-slider-input":"","arc-input-type":"range",type:"range",value:N,min:br,max:hr,step:er,disabled:O,"aria-disabled":O,onChange:re})}),(R||U)&&(0,i.jsxs)("span",{"arc-slider-captions":"",children:[R&&(0,i.jsx)("label",{"arc-slider-caption":"min",htmlFor:P,children:R}),!!U&&(0,i.jsx)(Pr.Spacer,{}),U&&(0,i.jsx)("label",{"arc-slider-caption":"max",htmlFor:P,children:U})]})]}),Ie&&(0,i.jsx)("span",{"arc-slider-output":"",children:Ie})]}),ie&&(0,i.jsxs)(Pr.Footer,{children:[(0,i.jsx)(Pr.FooterCaption,{children:g}
6275),!!v&&(0,i.jsx)(Pr.Spacer,{}),(0,i.jsx)(Pr.FooterSlot,{children:v})]})]})});n0.displayName="ArcSlider";const Cl=n0;Cr("ArcSlider",g$);const Al=({inputProps:r,snapStep:e,...a})=>{const{id:t,...o}=r;return(0,i.jsx)(Cl,{"arc-color-slider":r.surfaceName,...a,snapStep:e,inputIdPrefix:t,inputProps:o})},c0=({getValue:r,onStep:e,min:a,max:t,step:o,stepLarge:n})=>(0,s.useCallback)(c=>{p$(c,{getValue:r??(()=>Number(c.currentTarget.value)),onStep:e,min:a,max:t,step:o,stepLarge:n})},[r,e,a,t,o,n]),v$=({hsv:r,draftValue:e,label:a,showLabel:t=!1,setIsEditing:o,commitDraft:n,setDraftValue:c,labels:l})=>{const h=a??(l??Ce).opacity,p=Or(void 0,"alpha-input"),{onFocus:f,onBlur:g,onKeyDown:v}=qh({commitDraft:n,setIsEditing:o,onRevert:()=>c(ro(r.a))}),m=c0({min:0,max:100,getValue:()=>Number(e),onStep:k=>{const w=String(k);c(w),n(w)}}),y=e0(m,v),S=({value:k})=>{c(String(k??1))};return(0,i.jsx)(uo,{"arc-color-input":"alpha",size:"md",variant:"solid",inputSuffix:"%",headerLabel:t?h:void 0,inputProps:{id:p,"aria-label":h,placeholder:"...",value:e,type:"number",appearance:"textfield",min:0,max:100,step:1,onFocus:f,onBlur:g,onKeyDown:y,onChange:S}})},i0=r=>Oe({...r,a:1},!1).replace(/^#/,""),s0=(0,s.memo)(function({color:e,hsv:a,isSimpleMode:t,selectedNameRef:o,hsvRef:n,commitLocalHsv:c,tools:l,expandHexShorthand:u,labels:h,...p}){const f=h??Ce,g=(0,s.useRef)(!1),[v,m]=(0,s.useState)(()=>{const $=Kr(Dr(e));return $?i0($):"000000"}),[y,S]=(0,s.useState)(ro(a.a)),[k,w]=(0,s.useState)(!1),[z,x]=(0,s.use
6275State)(null),_=(0,s.useMemo)(()=>z??a,[z,a]),P=(0,s.useCallback)(($,N,ar)=>{ar==="preview"&&!sn($,N)&&x($)},[]),R=(0,s.useCallback)($=>{if(g.current)return;const N=i0($);m(ar=>{if(ar===N)return ar;if(!u){const E=Va(ar);if(E.length===3||E.length===4||E.length===8){const F=Kr(`#${E}`);if(F){const Y={...F,a:$.a};if(Hs(Y,$))return ar}}}return N})},[u]),U=(0,s.useCallback)(($,N="commit")=>{o.current=void 0;const ar=n.current,E={...ar,...$};P(E,ar,N),N==="preview"&&R(De(E)),c(E,{phase:N})},[c,n,o,R,P]),[T,L]=(0,s.useState)(null),[G,I]=(0,s.useState)(null),H=(0,s.useCallback)(()=>{c(n.current,{phase:"commit"})},[c,n]),{createInputProps:V}=Th({onCommit:H}),er=(0,s.useCallback)(($,N)=>V(ar=>{N(ar),U($(ar),"preview")},()=>N(null)),[V,U]),O=(0,s.useCallback)(($,N="commit")=>U({s:$.saturation,v:$.value},N),[U]),J=(0,s.useCallback)($=>{m(Va($))},[]),nr=(0,s.useCallback)($=>{S($)},[]),sr=(0,s.useCallback)($=>{g.current=$},[]),yr=(0,s.useCallback)($=>{w($),$&&S(ro(n.current.a))},[n]);(0,s.useEffect)(()=>{!z||!sn(a,z)||x(null)},[a,z]),(0,s.useEffect)(()=>{R(De(a))},[a,R]);const q=(0,s.useMemo)(()=>k?y:ro(_.a),[k,y,_.a]),tr=(0,s.useMemo)(()=>({hue:_.h,saturation:_.s,value:_.v}),[_]),Mr=(0,s.useMemo)(()=>Z(Math.round(a.a*100),qe.ALPHA_MIN,qe.ALPHA_MAX),[a.a]),dr=G??Mr,br=T??a.h,hr=(0,s.useMemo)(()=>({text:f.hueValue(Math.round(br)),showTooltip:!0}),[br,f]),pr=(0,s.useMemo)(()=>({text:f.opacityValue(Math.round(dr)),showTooltip:!0}),[dr,f]),vr=(0,s.useMemo)(()=>!l||l.length===0?null:{colorField:!!l?.includes("color-field"),hueSlider:!!l?.includes("hue-slider"),alphaSlider:!!l?.includes("alpha-slider"),sliderTools:!!l?.includes("hue-slider")||!!l?.includes("alpha-slider"),hexInput:!!l?.includes("hex-input"),alphaInput:!!l?.includes("alpha-input"),inputTools:!!l?.includes("hex-input")||!!l?.includes("alpha-input"),alphaTools:!!l?.includes("alpha-slider")||!!l?.includes("alpha-input"),eyeDropper:Mh()&&!!l?.includes("eye-dropper")},[l]),kr=vr?.alphaTools??!1,K=(0,s.useCallback)(($,N)=>{o.current=void 0;const ar=Va($??v);if(!Mb(ar,u??!1,kr,N))return;const E=De(n.current),F=Xu(ar,E,{shouldApplyParsedAlpha:N?.applyHexAlpha===!0}),Y=N?.phase??"commit";if(!F||Hs(F,E)&&Y==="preview")return;const cr=n.current,ir=nn(F,cr.h);P(ir,cr,Y),c(ir,{phase:Y})},[c,u,kr,v,n,o,P]),or=(0,s.useCallback)(($,N)=>{o.current=void 0;const ar=Ku($??y);ar!=null&&(U({a:ar},N?.phase??"commit"),(N?.phase??"commit")==="commit"&&S(ro(ar)))},[y,o,U]),C=(0,s.useCallback)($=>{const N=Xc($,"#000000");c(N)},[c]);return vr?(0,i.jsx)("div",{...p,"arc-color-tools":t?"simple":"solid","arc-color-picker-section":"tools",children:t?(0,i.jsxs)(i.Fragment,{children:[vr.hexInput&&(0,i.jsx)(Yh,{hsv:a,draftValue:v,setIsEditing:sr,commitDraft:K,setDraftValue:J,expandHexShorthand:u,hasAlphaTools:vr.alphaTools,labels:h}),vr.eyeDropper&&(0,i.jsx)(Oh,{onColorPicked:C,labels:h}),vr.alphaSlider&&(0,i.jsx)(Al,{headerLabel:f.opacity,tooltipProps:pr,snapStep:qe.ALPHA_SNAP_STEP,inputProps:{id:"alpha-slider",surfaceName:"alpha",min:qe.ALPHA_MIN,value:dr,max:qe.ALPHA_MAX,step:1,"aria-label":f.opacity,...er($=>({a:Z($/100,0,1)}),I)}})]}):(0,i.jsxs)(i.Fragment,{children:[vr.colorField&&(0,i.jsx)(nb,{value:tr,onChange:O,labels:h}),vr.eyeDropper&&(0,i.jsx)(Oh,{onColorPicked:C,labels:h}),vr.sliderTools&&(0,i.jsxs)("div",{"arc-color-sliders":"",children:[vr.hueSlider&&(0,i.jsx)(Al,{tooltipProps:hr,snapStep:qe.HUE_SNAP_STEP,inputProps:{id:"hue-slider",surfaceName:"hue",min:qe.HUE_MIN,value:br,max:qe.HUE_MAX,step:1,"aria-label":f.hue,...er($=>({h:Z($,qe.HUE_MIN,qe.HUE_MAX)}),L)}}),vr.alphaSlider&&(0,i.jsx)(Al,{tooltipProps:pr,snapStep:qe.ALPHA_SNAP_STEP,inputProps:{id:"alpha-slider",surfaceName:"alpha",min:qe.ALPHA_MIN,value:dr,max:qe.ALPHA_MAX,step:1,"aria-label":f.opacity,...er($=>({a:Z($/100,0,1)}),I)}})]}),vr.inputTools&&(0,i.jsxs)("div",{"arc-color-inputs":"",children:[vr.hexInput&&(0,i.jsx)(Yh,{hsv:a,draftValue:v,setIsEditing:sr,commitDraft:K,setDraftValue:J,expandHexShorthand:u,hasAlphaTools:vr.alphaTools,labels:h}),vr.alphaInput&&(0,i.jsx)(v$,{hsv:a,showLabel:!vr.hexInput,draftValue:q,setIsEditing:yr,commitDraft:or,setDraftValue:nr,labels:h})]})]})}):null}),f$=({color:r,hsv:e,hsvRef:a,tools:t,palettes:o,activePaletteColor:n,popoverId:c,selectedNameRef:l,expandHexShorthand:u,commitLocalHsv:h,labels:p})=>{const f=o&&o.length>0,g=t&&t.length>0;return(0,i.jsxs)(i.Fragment,{children:[f&&(0,i.jsx)(Ph,{palettes:o,activePaletteColor:n,commitLocalHsv:h,selectedNameRef:l,hsvRef:a,popoverId:c,labels:p}),g&&(0,i.jsx)(s0,{isSimpleMode:!0,color:r,hsv:e,hsvRef:a,selectedNameRef:l,commitLocalHsv:h,tools:t,expandHexShorthand:u,labels:p})]})},ve=d`--arcâ¢radio`,m$=d` 6276@layer arc-components { 6277 6278 [arc-radio] { 6279 /* SIZES -------------------------------------------------------⢠*/ 6280 &[data-size=inherit] { 6281 ${ve}â¢fontâ¢size: 1em; 6282 ${ve}â¢iconâ¢size: 0.625em; 6283 ${ve}â¢size: 1.125em; 6284 ${ve}â¢gap: 0.5em; 6285 } 6286 6287 &[data-size=md] { 6288 ${ve}â¢fontâ¢size: var(${b}â¢14); 6289 ${ve}â¢iconâ¢size: var(${b}â¢10); 6290 ${ve}â¢size: var(${b}â¢18); 6291 ${ve}â¢gap: var(${b}â¢8); 6292 } 6293 6294 &[data-size=sm] { 6295 ${ve}â¢fontâ¢size: var(${b}â¢12); 6296 ${ve}â¢iconâ¢size: var(${b}â¢10); 6297 ${ve}â¢size: var(${b}â¢16); 6298 ${ve}â¢gap: var(${b}â¢6); 6299 } 6300 6301 /* Inter-Component Communication -------------------------------⢠*/ 6302 /* for: Setup defaults for ArcBooleanInputMask */ 6303 ${W}â¢borderâ¢radius: var(--arc-border-radius-circle); 6304 ${W}â¢size: var(${ve}â¢size); 6305 ${W}â¢iconâ¢size: var(${ve}â¢iconâ¢size); 6306 ${W}â¢width: var(${ve}â¢size); 6307 ${W}â¢height: var(${ve}â¢size); 6308 ${W}â¢translate: 0 var(${b}â¢1m); 6309 6310 /* for: ArcLabel */ 6311 --arc-label-gap: var(${ve}â¢gap); 6312 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask 6313 to stay inline with the label text 6314 regardless of applied line-height */ 6315 } 6316 6317 /* CORE STYLES ---------------------------------------------------⢠*/ 6318 [arc-radio]:not([hidden]) { 6319 font-size: var(${ve}â¢fontâ¢size); 6320 display: var(--arc-radio-display, inline-flex); 6321 min-height: 1lh; 6322 6323 /* UNCHECKED, NOT-DISABLED, +HOVER ⢠default state */ 6324 &:not(:has(:checked)) { 6325 ${W}â¢color: transparent; 6326 ${W}â¢background: transparent; 6327 ${W}â¢borderâ¢color: var(--arc-color-border-stark); 6328 6329 &:hover { 6330 ${W}â¢background: var(--arc-color-bg-theme-subtle); 6331 ${W}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 6332 } 6333 6334 &:has(:disabled) { 6335 ${W}â¢background: var(--arc-color-bg-disabled); 6336 ${W}â¢borderâ¢color: var(--arc-color-border-disabled); 6337 } 6338 } 6339 6340 /* DISABLED */ 6341 &:has(:disabled) { 6342 color: var(--arc-color-fg-disabled); 6343 } 6344 6345 /* CHECKED, ?NOT-DISABLED+HOVER, ?DISABLED */ 6346 &:has(:checked) { 6347 ${W}â¢color: var(--arc-color-fg-on-theme-heavy); 6348 ${W}â¢background: var(--arc-color-bg-theme-heavy); 6349 ${W}â¢borderâ¢color: transparent; 6350 6351 &:not(:has(:disabled)):hover { 6352 ${W}â¢background: var(--arc-color-bg-theme-stark); 6353 } 6354 6355 &:has(:disabled) { 6356 ${W}â¢color: var(--arc-color-fg-on-theme-mid); 6357 ${W}â¢background: var(--arc-color-bg-theme-mid); 6358 } 6359 } 6360 } 6361 6362} 6363`,b$=fr(pa,["hug","fill"]),$$=fr(ze,["inherit","md","sm"]),l0=({children:r,label:e,layout:a,size:t="md",useMask:o=!0,...n})=>{const{className:c,title:l,...u}=n,h={className:c,title:l},p=r??e,f=(0,i.jsx)(Jo,{...u,type:"radio"}),g=o&&(0,i.jsxs)(Pc,{type:"radio",children:[f,(0,i.jsx)(Ar,{icon:"fa-solid fa-circle-small arc-fw"})]}),v=!!p&&(0,i.jsxs)(wt,{layout:a,children:[g||f,(0,i.jsx)(St,{children:p})]});return(0,i.jsx)("span",{...h,"arc-radio":"","data-size":t,children:v||g||f})};Cr("ArcRadio",m$);
6363const Pt=d`--arcâ¢rb`,oe=d`${Pt}â¢o`,$n=d`${oe}â¢icon`,yn=d`${oe}â¢text`,d0=d`${Pt}â¢fs`,u0=d`${Pt}â¢br`,zl=d`${Pt}â¢di`,El=d`${Pt}â¢pd`,_l=d`${Pt}â¢gp`,Pl=d`${Pt}â¢bg`,it=d`${oe}â¢fg`,st=d`${oe}â¢bg`,li=d`${oe}â¢bc`,Tl=d`${oe}â¢bw`,h0=d`${oe}â¢bs`,xn=d`${oe}â¢br`,Il=d`${oe}â¢fw`,Rl=d`${oe}â¢ol`,jl=d`${oe}â¢ow`,p0=d`${oe}â¢oo`,g0=d`${oe}â¢lh`,po={BAR:d` 6364 ${d0}: var(${b}â¢14); /* font size */ 6365 ${u0}: var(${b}â¢8); /* border radius */ 6366 6367 &:is([data-layout=hug], :not([data-layout])) { /** @default */ 6368 ${zl}: inline-flex; 6369 } 6370 6371 &[data-layout=fill] { 6372 ${zl}: flex; 6373 } 6374 `,OPTIONS:d` 6375 ${it}: var(--arc-color-fg-secondary); 6376 ${st}: transparent; 6377 ${li}: transparent; 6378 ${Tl}: var(${b}â¢1); 6379 ${g0}: calc(var(${oe}â¢sz) - var(${Tl}) * 2); 6380 ${jl}: var(${b}â¢2); 6381 ${p0}: 0; 6382 `,COMMON:d` 6383 ${Pl}: var(--arc-color-bg-secondary); 6384 ${El}: var(${b}â¢4); 6385 ${_l}: var(${b}â¢2); 6386 6387 ${xn}: var(${b}â¢6); 6388 6389 /* Common sizes */ 6390 &:is([data-size=lg], :not([data-size])) { /* @default */ 6391 ${oe}â¢sz: var(${b}â¢32); 6392 ${$n}â¢pd: var(${b}â¢8); 6393 ${yn}â¢pd: var(${b}â¢12); 6394 } 6395 6396 &[data-size=md] { 6397 ${oe}â¢sz: var(${b}â¢24); 6398 ${$n}â¢pd: var(${b}â¢6); 6399 ${yn}â¢pd: var(${b}â¢8); 6400 } 6401 `,COMMON_OPTION_STATES:d` 6402 &:not(:has(:disabled, :checked)) { 6403 &:hover { 6404 ${it}: var(--arc-color-fg-on-hover-default); 6405 ${st}: var(--arc-color-bg-hover-default); 6406 } 6407 } 6408 6409 &:has(:checked) { 6410 ${it}: var(--arc-color-mono-black); 6411 ${st}: var(--arc-color-mono-white); 6412 ${Il}: var(--arc-font-weight-500); 6413 6414 &:not(:has(:disabled)) { 6415 ${h0}: var(--arc-shadow-sm); 6416 } 6417 } 6418 6419 &:has(:disabled) { 6420 ${it}: var(--arc-color-fg-disabled); 6421 6422 &:has(:checked) { 6423 ${st}: var(--arc-color-bg-disabled); 6424 ${li}: var(--arc-color-border-disabled); 6425 } 6426 } 6427 6428 &:has(:focus-within:focus-visible) { 6429 ${Rl}: var(${jl}) solid var(--arc-color-border-focus); 6430 } 6431 `,SOLID:d` 6432 ${Pl}: transparent; 6433 ${El}: 0; 6434 ${_l}: var(${b}â¢4); 6435 6436 ${xn}: var(${b}â¢8); 6437 6438 /* Solid sizes */ 6439 &:is([data-size=lg], :not([data-size])) { 6440 ${oe}â¢sz: var(${b}â¢40); 6441 ${$n}â¢pd: var(${b}â¢8); 6442 ${yn}â¢pd: var(${b}â¢12); 6443 } 6444 6445 &[data-size=md] { 6446 ${oe}â¢sz: var(${b}â¢32); 6447 ${$n}â¢pd: var(${b}â¢6); 6448 ${yn}â¢pd: var(${b}â¢10); 6449 } 6450 `,SOLID_OPTION_STATES:d` 6451 &:not(:has(:disabled, :checked)) { 6452 &:hover { 6453 ${it}: var(--arc-color-fg-on-hover-default); 6454 ${st}: var(--arc-color-bg-hover-subtle); 6455 } 6456 } 6457 6458 &:has(:checked) { 6459 ${it}: var(--arc-color-fg-primary); 6460 ${st}: var(--arc-color-bg-secondary); 6461 ${Il}: var(--arc-font-weight-500); 6462 } 6463 6464 &:has(:disabled) { 6465 ${it}: var(--arc-color-fg-disabled); 6466 6467 &:has(:checked) { 6468 ${st}: var(--arc-color-bg-disabled); 6469 ${li}: var(--arc-color-border-disabled); 6470 } 6471 } 6472 6473 &:has(:focus-within:focus-visible) { 6474 ${Rl}: var(${jl}) solid var(--arc-color-border-focus); 6475 } 6476 `},y$=d` 6477@layer arc-components { 6478 6479 [arc-radio-bar] { 6480 ${po.BAR} 6481 ${po.OPTIONS} 6482 6483 /* Inter-Component Communication -------------------------------⢠*/ 6484 --arc-label-opacity-disabled: 1; /* intrinsic disabled opacity not needed here; letting tokens handle it */ 6485 --arc-label-align-items: stretch; /* control ArcLabel's vertical footprint; 6486 allows long label text to wrap 6487 without compromising option's 6488 visual border */ 6489 6490 /* VARIANTS ----------------------------------------------------⢠*/ 6491 &:is([data-variant=common], :not([data-variant])) { /* @default */ 6492 ${po.COMMON} 6493 6494 [arc-radio-bar-option] { 6495 ${po.COMMON_OPTION_STATES} 6496 } 6497 } 6498 6499 &[data-variant=solid] { 6500 ${po.SOLID} 6501 6502 [arc-radio-bar-option] { 6503 ${po.SOLID_OPTION_STATES} 6504 } 6505 } 6506 } 6507 6508 /* CORE STYLES ---------------------------------------------------⢠*/ 6509 [arc-radio-bar-option] { 6510 flex: 1 1 auto; 6511 display: flex; 6512 position: relative; 6513 box-shadow: var(${h0}, none); 6514 border-radius: var(${xn}); 6515 } 6516 6517 [arc-radio-bar]:not([hidden]) { 6518 font-size: var(--arc-radio-bar-font-size, var(${d0})); 6519 display: var(${zl}); 6520 gap: var(${_l}); 6521 border-radius: var(${u0}); 6522 background: var(${Pl}); 6523 padding: var(${El}); 6524 margin: 0; 6525 6526 [arc-radio] { 6527 flex: 1; 6528 display: flex; 6529 justify-content: center; 6530 border-radius: var(${xn}); 6531 outline: var(${Rl}, none); 6532 outline-offset: var(${p0}); 6533 } 6534 6535 /* INPUT ELEMENT -----------------------------------------------⢠*/ 6536 [arc-input-type=radio] { 6537 position: absolute; 6538 appearance: none; 6539 pointer-events: none; 6540 opacity: 0; 6541 } 6542 6543 /* Inter-Component Communication -------------------------------⢠*/ 6544 [arc-label] { 6545 flex: 1; 6546 line-height: var(${g0}); 6547 overflow: hidden; 6548 } 6549 6550 [arc-label-content] { 6551 flex: 1; 6552 display: flex; 6553 align-items: safe center; 6554 justify-content: center; 6555 6556 height: var(${oe}â¢sz); 6557 min-width: var(${oe}â¢sz); 6558 6559 border-radius: var(${xn}); 6560 border: var(${Tl}) solid var(${li}); 6561 background: var(${st}); 6562 color: var(${it}); 6563 font-weight: var(${Il}, unset); 6564 6565 transition-duration: 200ms; 6566 transition-timing-function: ease-out; 6567 transition-property: 6568 border, 6569 background, 6570 color, 6571 font-weight; 6572 6573 &:has([data-element=text]) { 6574 padding: 0 var(${yn}â¢pd); 6575 } 6576 6577 &:not(:has([data-element=text])) { 6578 padding: 0 var(${$n}â¢pd); 6579 } 6580 } 6581 6582 [arc-icon-text] [data-element] { 6583 min-width: min-content; 6584 overflow: hidden; 6585 overflow-wrap: break-word; 6586 } 6587 } 6588 6589} 6590`,x$=fr(pa,["hug","fill"]),k$=fr(ze,["lg","md"]),w$=fr(Ur,["common","solid"]),Ml=({children:r,label:e,icon:a,name:t,value:o,...n})=>{const c=r||(0,i.jsx)(ue,{icon:a,text:e});return(0,i.jsx)("li",{"arc-radio-bar-option":"","data-is-checked":n?.checked||void 0,children:(0,i.jsx)(l0,{...n,name:t,value:o,label:c,layout:"fill",useMask:!1,onChange:n.onChange??Ct})})},v0=({children:r,size:e="lg",layout:a="hug",variant:t="common",name:o,options:n,value:c,isDisabled:l,onChange:u,...h})=>{const p=Or(o,"arc-radio-bar");return(0,i.jsx)("ul",{...h,"arc-radio-bar":"","data-size":e,"data-layout":a,"data-variant":t,"is-disabled":l?"":void 0,role:"radiogroup",children:n?n.map(({hidden:f,onChange:g,value:v,...m})=>f||v==null||v===""?null:(0,s.createElement)(Ml,{...m,key:String(v),name:p,value:v,checked:c===v,disabled:l||m.disabled,onChange:g??u??Ct})):r})};Cr("ArcRadioBar",y$);const S$=(r,e)=>r==="gradient"?e.panelGradient:e.panelSolid,C$=({canTogglePanels:r,panels:e,activePanel:a,setActivePanel:t,labels:o=Ce})=>(0,i.jsx)(i.Fragment,{children:r&&(0,i.jsx)("div",{"arc-color-picker-section":"control",children:(0,i.jsx)(v0,{layout:"fill",size:"md",children:e.map(n=>(0,i.jsx)(Ml,{name:"color-picker-panel",value:n,label:S$(n,o),checked:n===a,onChange:()=>t(n)},n))})})}),A$=({color:r,hsv:e,hsvRef:a,tools:t,palettes:o,activePaletteColor:n,popoverId:c,selectedNameRef:l,expandHexShorthand:u,commitLocalHsv:h,onAddColor:p,onRemoveColor:f,labels:g})=>{const v=o&&o.length>0,m=t&&t.length>0;return(0,i.jsxs)(i.Fragment,{children:[m&&(0,i.jsx)(s0,{color:r,hsv:e,selectedNameRef:l,hsvRef:a,commitLocalHsv:h,tools:t,expandHexShorthand:u,labels:g}),(0,i.jsx)(Ph,{palettes:v?o:void 0,activePaletteColor:n,commitLocalHsv:h,selectedNameRef:l,hsvRef:a,popoverId:c,onAddColor:p??Ct,onRemoveColor:f,labels:g,"has-divider":m?"top":void 0})]})},Ll=r=>{const e=(0,s.useRef)(null),a=(0,s.useRef)(null),t=(0,s.useRef)(r);t.current=r;const o=(0,s.useCallback)(()=>{e.current=null;const h=a.current;a.current=null,h&&t.current(h.value)},[]),n=(0,s.useCallback)(h=>{a.current={value:h},e.current==null&&(e.current=requestAnimationFrame(o))}
6590,[o]),c=(0,s.useCallback)(()=>{e.current!=null&&(cancelAnimationFrame(e.current),e.current=null),a.current=null},[]),l=(0,s.useCallback)(()=>{e.current!=null&&(cancelAnimationFrame(e.current),o())},[o]),u=(0,s.useCallback)(()=>e.current!=null,[]);return(0,s.useEffect)(()=>c,[c]),{schedule:n,cancel:c,flush:l,hasPending:u}},f0=.05,m0=.5,z$=4,E$=(0,s.memo)(function({entry:e,sortedIndex:a,angle:t,isDragging:o,stopPositionLabel:n,onAtChange:c,onDragStart:l}){const{stop:u,index:h}=e,p=Z(u.at,rr.STOP_MIN,rr.STOP_MAX),f=(0,s.useCallback)(v=>{const m=bh(v.key,t);if(m==null)return;v.preventDefault();const y=Z(p+m,rr.STOP_MIN,rr.STOP_MAX);c(h,y,!0)},[t,p,c,h]),g=(0,s.useCallback)(v=>{v.preventDefault(),v.stopPropagation(),l(h,v.pointerId)},[l,h]);return(0,i.jsx)("div",{"arc-gradient-stop-thumb":"",role:"slider",tabIndex:0,"aria-valuemin":rr.STOP_MIN,"aria-valuemax":rr.STOP_MAX,"aria-valuenow":Math.round(p),"aria-label":n(a+1),"is-dragging":o?"":void 0,style:{left:`${p}%`,background:String(u.color),zIndex:a+1},onPointerDown:g,onKeyDown:f})}),b0=(r,e)=>{const a=r.getBoundingClientRect(),t=r.offsetWidth/2;return{centerX:a.left+a.width/2,centerY:a.top+a.height/2,axisHalfLength:t,axisAngleDeg:e-90}},_$=({stops:r,angle:e=rr.ANGLE,onUpdateStops:a,onUpdateAngle:t,labels:o})=>{const n=o??Ce,c=(0,s.useRef)(null),l=(0,s.useRef)(null),u=(0,s.useRef)(null),h=(0,s.useRef)(null),p=(0,s.useRef)(null),f=(0,s.useRef)(null),g=(0,s.useRef)(null),v=(0,s.useRef)(null),[m,y]=(0,s.useState)(null),[S,k]=(0,s.useState)(null),[w,z]=(0,s.useState)(null),[x,_]=(0,s.useState)(!1),P=S??e,R=(0,s.useMemo)(()=>m??r??[],[m,r]),U=(0,s.useMemo)(()=>ka(R),[R]),T=(0,s.useMemo)(()=>{const E=R.length>0?R:rr.STOPS;return m?Et(E,rr.STOP_MIN,rr.STOP_MAX):E},[m,R]),L=(0,s.useMemo)(()=>({background:gh({stops:T,angle:rr.ANGLE}),rotate:`${P-90}deg`}),[T,P]),G=(0,s.useCallback)(E=>{a?.(E,"preview")},[a]),I=(0,s.useCallback)((E,F=!1)=>{const Y=Et(E,rr.STOP_MIN,rr.STOP_MAX);a?.(F?ch(Y):Y,"commit")},[a]),H=(0,s.useCallback)(E=>{t?.(E,"preview")},[t]),V=(0,s.useCallback)(E=>{t?.(E,"commit")},[t]),er=(0,s.useCallback)((E,F,Y=!1)=>{const cr=r??[],ir=cr[E];if(!ir||Math.abs(ir.at-F)<f0)return;const wr=cr.map((Lr,re)=>re===E?{...Lr,at:F}:Lr);I(wr,Y)},[I,r]),O=(0,s.useCallback)((E,F,Y)=>{const cr=u.current,ir=c.current;if(!ir)return null;const wr=cr??b0(ir,P);return vh(E,F,wr.centerX,wr.centerY,wr.axisAngleDeg,wr.axisHalfLength,rr.STOP_MIN,rr.STOP_MAX,Y)},[P]),J=(0,s.useCallback)(E=>{if(!Number.isFinite(E))return;const F=Math.round(E),Y=f.current??e;Math.abs(Y-F)<m0||(f.current=F,k(F),(v.current==null||Math.abs(v.current-F)>=m0)&&(v.current=F,H(F)))},[e,H]),nr=(0,s.useCallback)((E,F)=>{const Y=p.current??r??[],cr=Y[E];if(!cr||Math.abs(cr.at-F)<f0)return;const ir=Y.map((He,Ie)=>Ie===E?{...He,at:F}:He);p.current=ir,y(ir);const wr=Et(ir,rr.STOP_MIN,rr.STOP_MAX),Lr=g.current,re=P;(!Lr||!dn({stops:Lr,angle:re},{stops:wr,angle:re}))&&(g.current=wr,G(wr))},[G,P,r]),sr=(0,s.useCallback)(E=>{const F=l.current;if(F==null)return;const Y=O(E.clientX,E.clientY,!1);Y!=null&&nr(F,Y)},[nr,O]),{schedule:yr,cancel:q,flush:tr}=Ll(sr),Mr=(0,s.useCallback)(E=>{const F=h.current;if(!F||!F.hasExceededThreshold)return;const Y=ol(E.clientX,E.clientY,F.centerX,F.centerY),cr=fh(F.startAngle,F.startPointerAngleDeg,Y,rr.ANGLE_MIN,rr.ANGLE_MAX);J(E.shiftKey?mh(cr):cr)},[J]),{schedule:dr,cancel:br,flush:hr}=Ll(Mr),pr=(0,s.useCallback)((E,F)=>{const Y=c.current;Y&&(Y.setPointerCapture(F),l.current=E,u.current=b0(Y,P),p.current=[...r??[]],g.current=Et(p.current,rr.STOP_MIN,rr.STOP_MAX),y(p.current),z(E))},[P,r]),vr=(0,s.useCallback)((E,F)=>{if(U.length===0)return;const Y=O(E,F,!0);if(Y==null)return;const cr=U.reduce((ir,wr)=>{const Lr=Math.abs(wr.stop.at-Y);return!ir||Lr<ir.distance?{stopIndex:wr.index,distance:Lr}:ir},null);cr&&er(cr.stopIndex,Y,!0)},[er,O,U]),kr=(0,s.useCallback)(()=>{const E=h.current;if(E?.hasExceededThreshold&&hr(),br(),h.current=null,!!E){if(E.hasExceededThreshold){const F=f.current;F!=null&&V(F)}else vr(E.startClientX,E.startClientY);f.current=null,v.current=null,k(null),_(!1)}},[br,V,vr,hr]),K=(0,s.useCallback)(()=>{tr(),q();const E=p.current;E&&I(E,!0),l.current=null,u.current=null,p.current=null,g.current=null,y(null),z(null)},[q,I,tr]),or=(0,s.useCallback)(E=>{if(!t){vr(E.clientX,E.clientY);return}const F=c.current;if(!F)return;const Y=F.getBoundingClientRect(),cr=Y.left+Y.width/2,ir=Y.top+Y.height/2;F.setPointerCapture(E.pointerId);const wr=Number.isFinite(E.clientX)?E.clientX:0,Lr=Number.isFinite(E.clientY)?E.clientY:0;h.current={pointerId:E.pointerId,startClientX:wr,startClientY:Lr,lastClientX:wr,lastClientY:Lr,startPointerAngleDeg:ol(wr,Lr,cr,ir),startAngle:e,centerX:cr,centerY:ir,hasExceededThreshold:!1}},[e,vr,t]),C=(0,s.useCallback)(E=>{if(l.current!=null){yr({clientX:E.clientX,clientY:E.clientY});return}const F=h.current;if(!F)return;Number.isFinite(E.clientX)&&Number.isFinite(E.clientY)?(F.lastClientX=E.clientX,F.lastClientY=E.clientY):(F.lastClientX+=E.movementX??0,F.lastClientY+=E.movementY??0);const{lastClientX:Y,lastClientY:cr}=F,ir=Math.hypot(Y-F.startClientX,cr-F.startClientY);if(!F.hasExceededThreshold){if(ir<z$)return;F.hasExceededThreshold=!0,_(!0)}dr({clientX:Y,clientY:cr,shiftKey:E.shiftKey})},[yr,dr]),$=(0,s.useCallback)(()=>
6590{if(l.current!=null){K();return}kr()},[K,kr]),N=(0,s.useCallback)(()=>{if(l.current!=null){K();return}kr()},[K,kr]),ar=(0,s.useCallback)(()=>{l.current!=null&&K()},[K]);return(0,i.jsxs)("div",{"arc-gradient-field-wrapper":"",role:"group","aria-label":n.gradientStops,children:[(0,i.jsxs)("small",{"arc-gradient-field-angle-output":"","aria-hidden":"true",children:[P,"\xB0"]}),(0,i.jsx)("div",{ref:c,"arc-gradient-field":"","is-dragging":w!=null||x?"":void 0,"is-rotating":x?"":void 0,style:L,onPointerDown:or,onPointerMove:C,onPointerUp:$,onPointerCancel:N,onLostPointerCapture:ar,children:U.map((E,F)=>(0,i.jsx)(E$,{entry:E,sortedIndex:F,angle:P,isDragging:w===E.index,stopPositionLabel:n.stopPosition,onAtChange:er,onDragStart:pr},`gradient-stop-thumb-${E.index}`))})]})},{STOP_MIN:go,STOP_MAX:vo}=rr,P$=(0,s.memo)(function({stop:e,stopIndex:a,sortedIndex:t,prevNeighborAt:o,nextNeighborAt:n,editingStopIndex:c,labels:l,onOpenColorEdit:u,onRegisterAnchor:h,onInsertStopAt:p,onUpdate:f,onDelete:g}){const v=l??Ce,m=t+1,y=Or(void 0,"gradient-stop-row-anchor"),S=Or(void 0,"gradient-stop-input"),k=(0,s.useRef)(null),w=(0,s.useRef)(t),[z,x]=(0,s.use
6590State)(!1),_=Z(e.at,go,vo),[P,R]=(0,s.useState)(String(_)),U=c===a,T=(0,s.useCallback)(()=>{R(String(Z(e.at,go,vo)))},[e.at]),L=(0,s.useCallback)((q,tr=!1,Mr="commit")=>{const dr=Number(q??P);if(Number.isNaN(dr))return;const br=Z(dr,go,vo),hr=String(br);R(hr);const pr=tr||el(o,n,br);br!==e.at?f(a,{...e,at:br},pr,Mr):pr&&f(a,e,!0,Mr)},[P,n,f,o,e,a]),G=(0,s.useCallback)(()=>{x(!0)},[]),I=(0,s.useCallback)(()=>{x(!1),L(void 0,!0)},[L]),H=c0({min:go,max:vo,getValue:()=>Number(P),onStep:q=>{const tr=String(q);R(tr),L(tr,!1,"preview")}}),V=(0,s.useCallback)(q=>{if(q.key==="Enter"){q.preventDefault(),x(!1),L(void 0,!0),q.currentTarget.blur();return}q.key==="Escape"&&(q.preventDefault(),x(!1),T(),q.currentTarget.blur())},[L,T]),er=e0(H,V);(0,s.useLayoutEffect)(()=>{if(!z){w.current=t;return}if(w.current===t)return;w.current=t;const q=k.current;if(!q)return;const{selectionStart:tr,selectionEnd:Mr}=q;q.focus({preventScroll:!0}),tr!=null&&Mr!=null&&q.setSelectionRange(tr,Mr)},[z,t]),(0,s.useEffect)(()=>{z||R(String(Z(e.at,go,vo)))},[e.at,z]);const O=(0,s.useCallback)(({value:q})=>{const tr=String(q??P);R(tr),L(tr,!1,"preview")},[L,P]),J=z?P:String(_),nr=(0,s.useCallback)(()=>{g(a)},[g,a]),sr=(0,s.useCallback)(()=>{u(a,y)},[u,y,a]),yr=(0,s.useCallback)(()=>{p(t)},[p,t]);return(0,s.useLayoutEffect)(()=>{h?.(a,y)},[h,y,a]),(0,i.jsxs)("li",{"arc-gradient-stop-row":"",id:y,"is-editing-color":U?"":void 0,children:[t>0&&(0,i.jsx)("span",{"arc-gradient-stop-insert":"",children:(0,i.jsx)(Br,{_isCustom:!0,icon:"fa-solid fa-plus fa-2xs",onClick:yr,tooltip:v.insertColorStop,isDisabled:c!=null})}),(0,i.jsx)(vn,{kind:"gradient-stop",color:e.color,onClick:sr}),(0,i.jsx)(uo,{ref:k,"arc-color-input":"stop",inputProps:{type:"number",appearance:"textfield",id:S,"aria-label":v.stopPosition(m),value:J,min:go,max:vo,step:1,onFocus:G,onBlur:I,onKeyDown:er,onChange:O,wheelControl:{deltaPerStep:24}},size:"md",variant:"solid",inputSuffix:"%"}),(0,i.jsx)("span",{"row-spacer":""}),(0,i.jsx)(Br,{layout:"icon",size:"sm",icon:"fa-regular fa-trash",variant:"tertiary",tooltip:v.removeColorStop,onClick:nr,isDisabled:c!=null})]})}),$0=({children:r,sectionName:e,content:a,...t})=>(0,i.jsxs)("header",{"arc-color-section-header":e??"",...t,children:[(0,i.jsx)(ue,{...typeof a=="object"?a:{text:a},size:"sm",isStrong:!0}),r]}),T$=({stops:r,editFallbackColor:e="#000000",format:a=wa.format,onUpdate:t,labels:o})=>{const n=o??Ce,c=(0,s.useMemo)(()=>r??[],[r]),l=(0,s.useMemo)(()=>ka(c),[c]),[u,h]=(0,s.useState)([]),p=Or(void 0,"gradient-stop-edit-popover"),[f,g]=(0,s.useState)(null),v=(0,s.useRef)(null),[m,y]=(0,s.useState)(),[S,k]=(0,s.useState)(e),[w,z]=(0,s.useState)(!1),[x,_]=(0,s.useState)(!1),[P,R]=(0,s.use
6590State)(),[U,T]=(0,s.useState)(0),L=(0,s.useRef)(!1),G=(0,s.useRef)(null),I=(0,s.useRef)(0),H=(0,s.useCallback)(()=>(I.current+=1,`gradient-stop-${I.current}`),[]),V=(0,s.useCallback)(()=>ya.handlePopover?.(p,"show"),[p]),er=(0,s.useCallback)(()=>ya.handlePopover?.(p,"hide"),[p]);(0,s.useEffect)(()=>{h(C=>C.length===c.length?C:C.length<c.length?[...C,...Array.from({length:c.length-C.length},()=>H())]:C.slice(0,c.length))},[H,c.length]);const O=(0,s.useCallback)((C,$)=>{const N=ka(C);h(N.map(ar=>$[ar.index]??H())),t?.(N.map(ar=>ar.stop))},[H,t]),J=(0,s.useCallback)((C={kind:"append"})=>{const $=c.length,N=C.kind==="append"?uh(c):[...c,dh(c,C)];G.current=$,h(ar=>[...ar,H()]),t?.(N)},[H,c,t]),nr=(0,s.useCallback)((C,$,N=!1,ar="commit")=>{const E=c.map((F,Y)=>Y===C?$:F);if(N){O(E,u);return}t?.(E,ar)},[O,c,t,u]),sr=(0,s.useCallback)(C=>{v.current===C&&(er(),v.current=null,g(null),z(!1)),h($=>$.filter((N,ar)=>ar!==C)),t?.(c.filter(($,N)=>N!==C))},[c,er,t]),yr=(0,s.useCallback)((C,$,N="commit")=>{if(!c[C])return;const E=c.map((F,Y)=>Y===C?{...F,color:$}:F);t?.(E,N)},[c,t]),q=(0,s.useCallback)(()=>{er(),v.current=null,g(null),z(!1)},[er]),tr=(0,s.useCallback)((C,$)=>{const N=c[C];if(!N)return;const ar=v.current!=null;v.current=C,_(!0),g(C),y($),k(N.color),ar?T(E=>E+1):(L.current=!0,R($))},[c]),Mr=(0,s.useCallback)((C,$)=>{if(v.current===C){q();return}tr(C,$)},[q,tr]),dr=(0,s.useCallback)((C,$)=>{G.current!==C||!c[C]||(G.current=null,tr(C,$))},[c,tr]);(0,s.useEffect)(()=>{!L.current||f==null||!m||(L.current=!1,V())},[m,f,V]);const br=(0,s.useCallback)(C=>{const $=C?.newState==="open";z($),$||(v.current=null,g(null))},[]),hr=(0,s.useCallback)(C=>{C.key!=="Escape"||!w||q()},[q,w]),pr=(0,s.useCallback)(C=>{const $=v.current;$!=null&&yr($,C,"preview")},[yr]),vr=(0,s.useCallback)(C=>{k(C);const $=v.current;$!=null&&yr($,C,"commit")},[yr]),kr=(0,s.useCallback)(C=>{Du(C)&&vr(C.color.value)},[vr]),K=(0,s.useCallback)(()=>{c.length<2||O(sh(c),u)},[O,c,u]),or=(0,s.useCallback)(C=>{J({kind:"between",sortedIndex:C})},[J]);return(0,i.jsxs)("div",{"arc-gradient-stops":"",children:[(0,i.jsx)($0,{content:n.gradientStops,sectionName:"stops",children:(0,i.jsxs)(co,{children:[(0,i.jsx)(Br,{"arc-gradient-stop-distribute":"",layout:"icon",size:"sm",icon:"fa-regular fa-arrows-left-right-to-line",variant:"tertiary",onClick:K,tooltip:n.distributeColorStops,isDisabled:c.length<2}),(0,i.jsx)(Br,{"arc-gradient-stop-add":"",layout:"icon",size:"sm",icon:"fa-regular fa-plus",variant:"tertiary",onClick:()=>J({kind:"append"}),tooltip:n.addColorStop,isDisabled:f!=null})]})}),(0,i.jsx)("ul",{"arc-gradient-stop-list":"",children:l.map((C,$)=>(0,i.jsx)(P$,{stop:C.stop,stopIndex:C.index,sortedIndex:$,prevNeighborAt:l[$-1]?.stop.at,nextNeighborAt:l[$+1]?.stop.at,editingStopIndex:f,onOpenColorEdit:Mr,onRegisterAnchor:dr,onInsertStopAt:or,onUpdate:nr,onDelete:sr,labels:o},u[C.index]??`gradient-stop-row-${C.index}`))}),x&&(0,i.jsx)(Wa,{mode:"edit",heading:"",panels:["solid"],color:S,_colorSyncKey:U,format:a,labels:o,onPreviewColor:C=>pr(C.value),onChange:kr,popoverProps:{id:p,popover:"manual",anchorAt:"left-center",alternateAnchorId:m,hidePopoverButton:!0,tryFallbacks:!0,hasTail:!0,offset:12,onToggle:br,onKeyDown:hr,footerSlot:(0,i.jsxs)(co,{"arc-color-picker-button-bar":"",children:[(0,i.jsx)("span",{"arc-button-bar-spacer":""}),(0,i.jsx)(Br,{"arc-color-picker-button":"save",text:n.done,size:"sm",onClick:q})]})}},P)]})},{ANGLE_MIN:I$,ANGLE_MAX:R$,ANGLE_SNAP_STEP:j$}=rr,M$=({inputProps:r,labels:e,...a})=>{const{id:t="angle-slider",min:o=I$,max:n=R$,step:c=1,value:l,onChange:u,...h}=r,p=e??Ce,f=Or(void 0,`${t}-label`),g=(0,s.useCallback)(v=>{if(v.shiftKey||!wl(v.key))return;const m=Sl(v.key,v,{step:Number(c)});if(m==null)return;v.preventDefault();const y=r0(Number(l),m,{min:Number(o),max:Number(n)}),S={value:String(y)};u?.(S,v)},[o,n,c,l,u]);return(0,i.jsxs)("div",{"arc-gradient-angle-slider":"",children:[(0,i.jsx)($0,{sectionName:"angle",content:p.angle,id:f}),(0,i.jsx)(Cl,{"arc-angle-slider":"",...a,layout:"fill",size:"md",snapStep:j$,inputIdPrefix:t,inputProps:{...h,min:o,max:n,step:c,value:l,onCh
6590ange:u,onKeyDown:g,"aria-labelledby":f},valueInputProps:{showValueInput:!0},tooltipProps:{showTooltip:!0,text:"{#value}\xB0"}})]})},L$="gradient-angle-presets",D$=(r,e)=>rr.ANGLE_PRESETS.map(a=>({stops:r,angle:a,name:e(a)})),O$=({gradient:r,onSelectAngle:e,labels:a})=>{const t=a??Ce,o=r?.angle??rr.ANGLE,n=(0,s.useMemo)(()=>D$(r?.stops??rr.STOPS,t.gradientAngleOption),[r?.stops,t.gradientAngleOption]),c=(0,s.useMemo)(()=>n.find(u=>u.angle===o),[n,o]),l=u=>{Lu(u)&&e?.(u.gradientData.gradient.angle)};return(0,i.jsx)(fn,{"arc-gradient-presets":"",id:L$,colors:n,activeGradient:c,showHeading:!1,setAriaLabel:t.gradientAngle,onSwatchClick:l,labels:a})},B$=({tools:r,gradient:e,setGradient:a,editFallbackColor:t,format:o,labels:n,...c})=>{const l=(0,s.useMemo)(()=>({stops:e?.stops??[],angle:e?.angle??rr.ANGLE}),[e]),u=(0,s.useCallback)((x,_="commit")=>{a?.({...l,...x},{phase:_})},[l,a]),h=(0,s.useRef)(l.angle),[p,f]=(0,s.useState)(null),g=(0,s.useCallback)(()=>{u({angle:h.current},"commit")},[u]),{isPreviewingRef:v,createInputProps:m}=Th({onCommit:g});(0,s.useEffect)(()=>{v.current||(h.current=l.angle)},[v,l.angle]);const y=(0,s.useMemo)(()=>{const x=_=>Z(_,rr.ANGLE_MIN,rr.ANGLE_MAX);return m(_=>{const P=x(_);h.current=P,f(P),u({angle:P},"preview")},()=>f(null))},[u,m]),S=(0,s.useMemo)(()=>!r||r.length===0?[...Nc]:[...r],[r]),k=(0,s.useMemo)(()=>{const x={gradientField:S.includes("gradient-field"),gradientStops:S.includes("gradient-stops"),angleSlider:S.includes("angle-slider"),anglePresets:S.includes("angle-presets")};return x.gradientField||x.gradientStops||x.angleSlider||x.anglePresets?x:null},[S]);if(!k)return null;const{stops:w,angle:z=rr.ANGLE}=l;return(0,i.jsxs)("div",{...c,"arc-color-tools":"gradient","arc-color-picker-section":"tools",children:[k.gradientField&&(0,i.jsx)(_$,{stops:w,angle:z,onUpdateStops:(x,_)=>u({stops:x},_??"commit"),onUpdateAngle:(x,_)=>u({angle:x},_??"commit"),labels:n}),k.gradientStops&&(0,i.jsx)(T$,{stops:w,editFallbackColor:t,format:o,onUpdate:(x,_)=>u({stops:x},_??"commit"),labels:n}),k.angleSlider&&(0,i.jsx)(M$,{labels:n,inputProps:{surfaceName:"angle",min:rr.ANGLE_MIN,max:rr.ANGLE_MAX,value:p??z,...y}}),k.anglePresets&&(0,i.jsx)(O$,{gradient:l,onSelectAngle:x=>u({angle:x}),labels:n})]})},N$=({tools:r,...e})=>{const a=r&&r.length>0;return(0,i.jsx)(i.Fragment,{children:a&&(0,i.jsx)(B$,{tools:r,...e})})},y0=({heading:r,showGoBack:e,goBackProps:a,...t})=>(0,i.jsx)(ya,{...t,variant:"common","arc-color-picker-wrapper":"",showGoBack:e,goBackProps:a,headerSlot:!!r&&(0,i.jsx)(ue,{...typeof r=="string"?{text:r}:r,"arc-color-picker-heading":"",overflow:"truncate",isStrong:!0})});y0.displayName="ArcColorPickerWrapper";const kn=(r,e)=>r.length===0||r.includes(e)?e:r[0],wa={mode:"normal",color:"#05aff0",format:"auto",heading:Ce.heading,palettes:[]},F$={icon:"fa-regular fa-paint-brush",text:Ce.colorPicker,layout:"icon",shape:"round",size:"md"},H$={stops:rr.STOPS,angle:rr.ANGLE},V$=["solid","gradient"],x0=(r,e)=>r.includes("gradient")?r.length===1||e==="gradient":!1,k0=(r,e,a,t)=>{const o=r.stops??[],n=r.angle??rr.ANGLE;return o.length>0?{stops:o,angle:n}:x0(a,e)?ph(r,t).gradient:{stops:[],angle:n}},Wa=({children:r,mode:e=wa.mode,color:a=wa.color,gradient:t=H$,format:o=wa.format,heading:n=wa.heading,tools:c,omitTools:l,isInline:u=!1,showGoBack:h=!1,goBackProps:p,canTogglePanels:f=!1,panels:g=V$,activePanel:v="solid",onUpdatePanel:m,palettes:y,popoverProps:S,onChange:k,onSnapshotChange:w,onPreviewColor:z,onPreviewGradient:x,onAddColor:_,onRemoveColor:P,expandHexShorthand:R,_colorSyncKey:U,labels:T,...L})=>{const G=(0,s.useMemo)(()=>Fc(T),[T]),I=(0,s.useMemo)(()=>Js(a).color,[a]),H=Or(S?.id??void 0,"color-picker"),[V,er]=(0,s.useState)(()=>kn(g,v)),O=e==="simple",nr=V==="gradient"?"gradient":O?"simple":"solid",sr=(0,s.useCallback)((D,ur=V)=>k0(D,ur,g,I),[V,g,I]),[yr,q]=(0,s.useState)(()=>k0(t,kn(g,v),g,Js(a).color)),[tr,Mr]=(0,s.useState)(()=>{const D=Kr(I);return D?nn(D):{h:0,s:0,v:0,a:1}}),dr=(0,s.useRef)(tr),br=(0,s.useRef)(tr),hr=(0,s.useRef)(null),pr=(0,s.useRef)(!1),vr=(0,s.useRef)(null),kr=(0,s.useRef)(I),K=(0,s.useRef)(null),or=(0,s.useRef)(void 0),C=(0,s.useRef)(v),$=(0,s.useRef)(null),N=(0,s.useRef)(null),ar=(0,s.useRef)(null);(0,s.useEffect)(()=>{dr.current=tr,br.current=tr},[tr]),(0,s.useEffect)(()=>{const D=sr(t,V);q(ur=>dn(ur,D)?ur:D)},[t,V,sr]);const E=(0,s.useCallback)((D,ur,Sr)=>{try{const Tr=Sr?.solidHsv??dr.current,ha={...nt(Tr,{format:o}),name:or.current},Ai=ur??sr(t,D),zi=hn(Ai,{fallbackColor:ha.value});return{activePanel:D,color:ha,gradient:zi,value:D==="gradient"?zi.value:ha.value}}catch{return null}},[o,t,sr]),F=(0,s.useCallback)(D=>
6590{if(z)try{z(nt(D,{format:o}))}catch{}},[o,z]),Y=(0,s.useRef)({}),cr=(0,s.useCallback)(D=>{const ur=D.querySelector('[arc-slider][arc-color-slider="hue"]'),Sr=D.querySelector('[arc-slider][arc-color-slider="alpha"]'),Tr={};ur instanceof HTMLElement&&(Tr.hue=ur),Sr instanceof HTMLElement&&(Tr.alpha=Sr),Y.current=Tr},[]),ir=(0,s.useCallback)((D,ur)=>{const Sr=hr.current;let Tr=Y.current[D];if((!Tr||!Tr.isConnected)&&Sr&&(cr(Sr),Tr=Y.current[D]),!Tr)return;const Ai=D==="hue"?{min:0,max:360,step:1}:D==="alpha"?{min:0,max:100,step:1}:null;if(!Ai)return;const{toValue:zi}=Ns({value:ur,...Ai});Tr.style.setProperty("--js\u2022v",String(zi))},[cr]),wr=(0,s.useCallback)(D=>{const ur=hr.current;if(!ur)return;const Sr=De(D);ur.style.setProperty("--js\u2022hue",`hsl(${D.h} 100% 50%)`),ur.style.setProperty("--js\u2022hex",Oe({...Sr,a:1},!1)),ur.style.setProperty("--js\u2022rgb",Ga(Sr)),ir("hue",D.h),ir("alpha",Z(Math.round(D.a*100),0,100))},[ir]),Lr=(0,s.useCallback)(D=>{const ur=hr.current;if(ur){const Sr=Math.round(Vc(D.h));Sr!==vr.current&&(vr.current=Sr,ur.dispatchEvent(new CustomEvent(nl,{detail:{h:Sr}})))}queueMicrotask(()=>{F(D)})},[F]),{schedule:re,cancel:He}=Ll(Lr),Ie=(0,s.useCallback)(()=>{He(),pr.current=!1,vr.current=null},[He]),ce=(0,s.useCallback)(D=>{pr.current=!0,re(D)},[re]),Re=(0,s.useCallback)(D=>{if(x)try{const ur=Ga(De(dr.current));x(hn(D,{fallbackColor:ur}))}catch{}},[x]),Ve=(0,s.useCallback)((D,ur,Sr)=>{const Tr=E(D,ur,Sr);return Tr?(w?.(Tr),Tr):null},[E,w]),aa=_t(Ve),ie=(0,s.useCallback)((D,ur,Sr)=>{const ha=Sr?.shouldEmitSnapshot!==!1?Ve(D,ur):E(D,ur);if(ha){if(D==="gradient"){k?.({activePanel:"gradient",gradient:ha.gradient});return}kr.current=ha.color.value,K.current=ha.color.rgba,k?.({activePanel:"solid",color:ha.color})}},[E,Ve,k]),je=_t(ie),ee=(0,s.useCallback)((D,ur)=>{if((ur?.phase??"commit")==="preview"){q(Tr=>al(Tr,D)?Tr:D),(!ar.current||!al(ar.current,D))&&(ar.current=D,Re(D));return}ar.current=null,q(Tr=>dn(Tr,D)?Tr:D),ie("gradient",D)},[Re,ie]),Ge=(0,s.useCallback)((D,ur)=>{if(D>0||!x0(g,V))return;const Sr=sr(t,V);if(Sr.stops.length===0)return;const Tr=`${V}:${Sr.stops[0]?.color}`;if($.current!==Tr)if($.current=Tr,ur.emitSnapshot){if(!k&&!w)return;je("gradient",Sr)}else k&&je("gradient",Sr,{shouldEmitSnapshot:!1})},[V,t,k,w,g,sr,je]);(0,s.useEffect)(()=>{const D=t.stops??[];D.length>0&&($.current=null);const ur=N.current===null;if(!ur&&N.current!==V){if(N.current=V,Ie(),w){const Tr=sr(t,V);aa(V,Tr,{solidHsv:br.current})}Ge(D.length,{emitSnapshot:!1});return}ur&&(N.current=V),Ge(D.length,{emitSnapshot:!0})},[Ie,V,t,w,sr,Ge,aa]);const Ue=(0,s.useCallback)(D=>{!k&&!w||(dr.current=D,ie("solid"))},[ie,k,w]),Ke=(0,s.useCallback)((D,ur)=>{const Sr=ur?.phase??"commit";if(!(Sr==="preview"&&sn(D,dr.current))){if(dr.current=D,Sr==="preview"){wr(D),ce(D);return}Ie(),Mr(D),Ue(D)}},[Ie,Ue,ce,wr]),jt=(0,s.useMemo)(()=>{const D=O?"":"manual";return S?.popover??D},[S?.popover,O]),ki=(0,s.useMemo)(()=>Ga(De(tr)),[tr]),wi=(0,s.useMemo)(()=>y?.map(D=>({...D,canAddColor:!1,canRemoveColor:!1}))??[],[y]),Mt=(0,s.useCallback)(()=>{const D=hr.current;if(!D)return;const ur=O?'button[arc-color-chip="swatch"]:not(:disabled)':'[arc-color-surface="field"]';D.querySelector(ur)?.focus()},[O]),xo=S?.onToggle,Bn=(0,s.useCallback)(D=>{D?.newState==="open"&&requestAnimationFrame(Mt),xo?.(D)},[Mt,xo]);et(()=>{U!=null&&(K.current=null)},[U]),(0,s.useEffect)(()=>{if(!pr.current&&I!==kr.current){kr.current=I;try{const D=Kr(I)??{r:0,g:0,b:0,a:1},ur=K.current;if(ur&&Vs(D,ur))return;const Sr=De(dr.current);if(Vs(D,Sr))return;or.current=void 0;const Tr=nn(D,dr.current.h);if(sn(Tr,dr.current))return;dr.current=Tr,Mr(Tr)}catch{}}},[I]);const La=(0,s.useMemo)(()=>{const ur=O?Mu:V==="solid"?Os:Nc,Sr=!c||c.length===0?[...ur]:[...c];if(!l?.length)return Sr;const Tr=new Set(l);return Sr.filter(ha=>!Tr.has(ha))},[c,O,l,V]),Si=(0,s.useMemo)(()=>La.includes("palettes"),[La]);et(()=>{const D=hr.current;if(!D){Y.current={};return}cr(D)},[V,O,cr,La]);const ko=(0,s.useCallback)(D=>{er(ur=>{const Sr=typeof D=="function"?D(ur):D,Tr=kn(g,Sr);return Tr!==ur&&m?.(Tr),Tr})},[g,m]);(0,s.useEffect)(()=>
6590{if(C.current!==v){C.current=v,er(kn(g,v));return}er(D=>{const ur=kn(g,D);return ur!==D&&m?.(ur),ur})},[v,g,m]);const Ci=(0,s.useMemo)(()=>{const D=De(tr);return{"--js\u2022hue":`hsl(${tr.h} 100% 50%)`,"--js\u2022hex":Oe({...D,a:1},!1),"--js\u2022rgb":Ga(D)}},[tr]),Q=(0,i.jsxs)("div",{...L,ref:hr,"arc-color-picker":nr,"is-inline":u?"":void 0,style:Ci,children:[O?(0,i.jsx)(f$,{color:I,hsv:tr,hsvRef:dr,tools:La,palettes:wi,activePaletteColor:ki,commitLocalHsv:Ke,popoverId:H,selectedNameRef:or,expandHexShorthand:R,labels:G}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(C$,{canTogglePanels:f,panels:g,activePanel:V,setActivePanel:ko,labels:G}),V==="solid"?(0,i.jsx)(A$,{color:I,hsv:tr,hsvRef:dr,tools:La,palettes:Si?y:void 0,activePaletteColor:ki,commitLocalHsv:Ke,popoverId:H,selectedNameRef:or,expandHexShorthand:R,onAddColor:_??Ct,onRemoveColor:P,labels:G}):(0,i.jsx)(N$,{tools:La,gradient:yr,setGradient:ee,editFallbackColor:I,format:o,labels:G})]}),r&&(0,i.jsx)("div",{"arc-color-picker-section":"footer",children:r})]});if(u)return Q;const Vr=S?.anchorProps??F$,Ja=O?{...S,anchorAt:S?.anchorAt??"bottom-center",showDismiss:!1,hasTail:!0}:{...S,heading:n??void 0,showGoBack:h??void 0,goBackProps:p??void 0,showHeaderDivider:!0,showFooterDivider:!0,isHeaderSticky:!0,isFooterSticky:!0};return(0,i.jsx)(y0,{...Ja,popover:jt,anchorProps:Vr,id:H,onToggle:Bn,children:Q})};Wa.getColorAs=eh,Wa.getColorData=nt,Wa.getGradientData=hn,Wa.getContrastColor=no,Wa.addColor=xb,Wa.removeColor=kb,Cr("ArcColorPicker",mb);var G$;const Tt={layout:"gutter",variant:"inherit",overflow:"truncate",gapSize:"md",size:"md"},U$=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"}],K$=({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}),w0=(r,e)=>{const{icon:a,itemProps:t}=K$(e);switch(r){case"divider":return(0,i.jsx)("hr",{});case"section-label":return(0,i.jsx)(ue,{...t,...Tt,icon:a,size:"sm",isStrong:!0});case"icon-text":return(0,i.jsx)(ue,{...t,...Tt,icon:a});case"icon-text-detail":return(0,i.jsx)(ue,{...t,...Tt,icon:a,isStrong:!0});case"text":return(0,i.jsx)(ue,{...t,...Tt});case"text-detail":return(0,i.jsx)(ue,{...t,...Tt,subtext:t.subtext??"sub",isStrong:!0});case"user":return(0,i.jsx)(ec,{...t,...Tt,size:"sm"});case"user-detail":return(0,i.jsx)(ec,{...t,...Tt,size:"md",isStrong:!0});default:return r}},px=r=>Object.fromEntries(G$.map(e=>[e,w0(e,r)])),Dl=200,W$=r=>{const e=r.submenuProps&&typeof r.submenuProps=="object"?r.submenuProps.id:void 0;return typeof e=="string"&&e.length>0?e:void 0},X$=r=>{const e=r.submenuProps&&typeof r.submenuProps=="object"?r.submenuProps:{},{menuProps:a,renderItem:t,...o}=e;return{menuProps:a,popoverPassthrough:o}},q$=r=>({ownMenuId:r.menu,parentTriggerId:r.trigger}),Y$=r=>{const e=r.submenuProps;if(!e||typeof e!="object")return;const a=e.renderItem;return typeof a=="function"?a:void 0},di=(r,e,a)=>{if(!(typeof r.renderSubmenu=="function"||Array.isArray(r.items)&&r.items.length>0))return{hasSubmenu:!1};const o=Bl(r,e),n=`${a}-subtrigger-${o}`;let l=W$(r)??`${a}-submenu-${o}`;return l===n&&(l=`${l}-menu`),{hasSubmenu:!0,menuId:l,triggerId:n}},Z$=(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},J$=(r,e)=>{if(typeof document>"u")return!1;const a=ca(r,e);try{return!!a?.matches?.(":popover-open")}catch{return!1}},Ol=r=>r===!0||typeof r=="number"&&r>=0&&Number.isFinite(r),Q$=r=>r===!0?0:r,r1=r=>r===!0?Dl:r,e1={divider:"separator","section-label":"presentation","icon-text-detail":"menuitem","icon-text":"menuitem","user-detail":"menuitem",user:"menuitem","text-detail":"menuitem",text:"menuitem"},Bl=(r,e)=>
6590r.itemId!=null&&String(r.itemId)!==""?String(r.itemId):`auto-${e}`,a1=r=>{let e=null;for(let a=r;a;a=a.parentElement)a.hasAttribute("arc-popover")&&(e=a);return e},S0=(r,e,a,t)=>{if(t||a==="divider"||!!!(e.href||e.onClick))return;a1(r.currentTarget)?.hidePopover?.()},t1=r=>r?.role??e1[wn(r)]??"menuitem",wn=r=>U$(r)?.find(({test:e})=>e())?.value??"text",C0=r=>e=>w0(r,e),Nl=(r,e,a,t)=>{const o=t??di(r,e,a);if(o.hasSubmenu)return o.triggerId;const n=Bl(r,e);return`${a}-mi-${n}`},o1=(r,e,a)=>wn(r)==="divider"||r.isDisabled===!0||r["aria-disabled"]===!0?!1:di(r,e,a).hasSubmenu?!0:!!(r.href||r.onClick),ui=(r,e)=>{const a=[];for(let t=0;t<r.length;t+=1)o1(r[t],t,e)&&a.push(t);return a},A0=(r,e,a)=>{if(typeof document>"u")return;const t=r.children[e];if(!(t instanceof HTMLElement))return;const o=ca(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()},z0=(r,e,a,t)=>{const o=ui(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 n1(r,e,a){return{ArrowUp:t=>{const o=z0(r,e,t,"previous");o>=0&&a(o)},ArrowDown:t=>{const o=z0(r,e,t,"next");o>=0&&a(o)},Home:()=>{const t=ui(r,e);t.length>0&&a(t[0])},End:()=>{const t=ui(r,e);t.length>0&&a(t[t.length-1])}}}function c1(r,e){const{isVisible:a,menuListRef:t,activeItemIndex:o,filteredItems:n,menuDomId:c,isMenuRtlRef:l,submenuBackNavigation:u,listNavByKey:h,hideSubmenu:p,focusTriggerById:f,focusRowAtItemIndex:g,setActiveItemIndex:v,openSubmenuForKeyboard:m}=e;if(!a||!t.current||!(r.target instanceof Node)||!t.current.contains(r.target))return;const y=t.current,S=r.target.closest?.("ul[arc-menu]");if(S&&S!==y)return;let k=Z$(y,r.target);if(k<0&&o>=0&&(k=o),k<0)return;const w=n[k],z=di(w,k,c),x=l.current,_=x?"ArrowLeft":"ArrowRight",P=x?"ArrowRight":"ArrowLeft";if(u&&r.key==="Escape"){r.preventDefault(),r.stopPropagation(),p(u.ownMenuId),f(u.parentTriggerId);return}if(z.hasSubmenu&&J$(z.menuId,y)&&r.key===P){r.preventDefault(),r.stopPropagation(),p(z.menuId),g(k);return}if(u&&r.key===P){r.preventDefault(),r.stopPropagation(),p(u.ownMenuId),f(u.parentTriggerId);return}if(z.hasSubmenu&&(r.key===_||r.key==="Enter")){r.preventDefault(),r.stopPropagation(),v(k),m(z.menuId);return}const R=h[r.key];R&&(r.preventDefault(),r.stopPropagation(),R(k))}function i1(r,e){if(typeof document>"u")return;ca(r,e)?.hidePopover?.()}function s1(r,e){if(typeof document>"u")return;ca(r,e)?.showPopover?.()}function l1(r){r.querySelectorAll("[popover]").forEach(e=>{try{e.matches(":popover-open")&&e.hidePopover?.()}catch{}})}function d1(r,e){typeof document>"u"||requestAnimationFrame(()=>{ca(r,e)?.querySelector("[arc-menu]")?.focus()})}function u1(r,e){if(typeof document>"u")return;ca(r,e)?.focus()}function h1({menuListRef:r,passiveMode:e}){const a=(0,s.useRef)(null),t=(0,s.useRef)(null),o=(0,s.useRef)(null),n=(0,s.useCallback)(()=>{t.current!=null&&(clearTimeout(t.current),t.current=null)},[]),c=(0,s.useCallback)(()=>{o.current!=null&&(clearTimeout(o.current),o.current=null)},[]),l=(0,s.useCallback)(()=>{const m=r.current;m&&l1(m)},[r]),u=(0,s.useCallback)(m=>{i1(m,r.current),a.current===m&&(a.current=null)},[r]),h=(0,s.useCallback)(m=>{typeof document>"u"||(a.current&&a.current!==m&&u(a.current),s1(m,r.current),a.current=m)},[u,r]),p=(0,s.useCallback)(m=>{if(!Ol(e))return;c(),n();const y=Q$(e);if(y<=0){h(m);return}t.current=setTimeout(()=>{t.current=null,h(m)},y)},[e,n,c,h]),f=(0,s.useCallback)(m=>{if(!Ol(e))return;n(),c();const y=r1(e);if(y<=0){u(m);return}o.current=setTimeout(()=>{o.current=null,u(m)},y)},[e,n,c,u]),g=(0,s.useCallback)(m=>{n(),c(),h(m),d1(m,r.current)},[n,c,h,r]),v=(0,s.useCallback)(m=>{u1(m,r.current)},[r]);return{activeSubmenuIdRef:a,cancelPendingSubmenuOpen:n,cancelPendingSubmenuClose:c,closeOpenDescendantPopovers:l,hideSubmenu:u,runShowSubmenu:h,showSubmenuFromPointer:p,requestSubmenuCloseFromPointer:f,openSubmenuForKeyboard:g,focusTriggerById:v}}const p1=d`--arcâ¢menu`,Xa=d`${p1}â¢item`,g1=d` 6591@layer arc-components { 6592 6593 [arc-menu] { 6594 ${Xa}â¢gap: var(${M}â¢8); 6595 ${Xa}â¢fg: inherit; 6596 ${Xa}â¢bg: inherit; 6597 6598 font-size: var(--arc-menu-font-size, var(${b}â¢14)); 6599 list-style: none; 6600 line-height: normal; 6601 6602 display: var(--arc-menu-display, flex); 6603 flex-direction: var(--arc-menu-flex-direction, column); 6604 gap: var(--arc-menu-gap, var(${M}â¢2)); 6605 padding: var(--arc-menu-padding, var(${M}â¢4)); 6606 margin: var(--arc-menu-margin, 0); 6607 6608 outline: var(--arc-menu-outline, none); 6609 } 6610 6611 /* Submenus sit under the same <li> as the row button, so the parent row stays :hover while 6612 pointing at submenu items. Reset the item bg token on submenu lists s
6612o inherited hover from 6613 the parent <li> does not paint every submenu row; each submenu row only picks up hover from its own <li>. */ 6614 [arc-menu-item] > [arc-popover] [arc-menu] { 6615 ${Xa}â¢bg: transparent; 6616 } 6617 6618 [arc-menu-item] { 6619 position: relative; 6620 display: var(--arc-menu-item-display, flex); 6621 flex-direction: var(--arc-menu-item-flex-direction, row); 6622 justify-content: var(--arc-menu-item-justify-content, space-between); 6623 align-items: var(--arc-menu-item-align-items, center); 6624 gap: var(--arc-menu-item-gap, var(${Xa}â¢gap)); 6625 6626 background: var(--arc-menu-item-background, var(${Xa}â¢bg)); 6627 color: var(--arc-menu-item-color, var(${Xa}â¢fg)); 6628 padding: var(--arc-menu-item-padding, 0); 6629 border-radius: var(--arc-menu-item-border-radius, var(--arc-border-radius-md)); 6630 cursor: var(--arc-menu-item-cursor, default); 6631 outline: var(--arc-menu-item-outline, none); 6632 6633 transition: var(--arc-menu-item-transition, 120ms ease-out); 6634 6635 &:has(> [arc-button=custom]:not([is-disabled])) { 6636 &:is(:hover, :has(> [arc-button=custom]:not([is-disabled]):focus-visible)) { 6637 ${Xa}â¢bg: var(--arc-color-bg-hover-default); 6638 } 6639 } 6640 6641 /* Inter-Component Communication ⢠ArcButton -------------------⢠*/ 6642 6643 > [arc-button=custom] { 6644 --arc-button-flex: 1; 6645 --arc-button-font-size: 1em; 6646 --arc-button-border: none; 6647 --arc-button-transition: none; 6648 --arc-button-position: var(--arc-menu-item-position, relative); 6649 --arc-button-gap: var(--arc-menu-item-gap, var(${Xa}â¢gap)); 6650 --arc-button-opacity: var(--arc-menu-item-opacity, unset); 6651 --arc-button-overflow: var(--arc-menu-item-overflow, clip); 6652 --arc-button-outline-offset: var(--arc-menu-item-outline-offset, var(${b}â¢2m)); 6653 6654 [arc-button-content] { 6655 display: contents; 6656 } 6657 } 6658 } 6659 6660 [arc-menu-item=divider] { 6661 margin: 0 var(${M}â¢4m); 6662 6663 hr { 6664 flex: 1; 6665 border: none; 6666 border-top: var(--arc-border-width-sm) solid var(--arc-color-border-mid); 6667 height: 0; 6668 margin: 0; 6669 } 6670 } 6671 6672`,v1=({items:r,filterText:e,renderItem:a,isVisible:t,keepMenuOpen:o,renderSubmenu:n,passiveMode:c,submenuBackNavigation:l,...u})=>{const h=c??Dl,p=(0,s.useId)(),f=(0,s.useRef)(null),{activeSubmenuIdRef:g,cancelPendingSubmenuOpen:v,cancelPendingSubmenuClose:m,closeOpenDescendantPopovers:y,hideSubmenu:S,showSubmenuFromPointer:k,requestSubmenuCloseFromPointer:w,openSubmenuForKeyboard:z,focusTriggerById:x}=h1({menuListRef:f,passiveMode:h}
6672),_=(0,s.useRef)(!1),[P,R]=(0,s.useState)(!1),[U,T]=(0,s.useState)(-1);(0,s.useLayoutEffect)(()=>{const O=f.current;if(O&&typeof getComputedStyle<"u"){const J=getComputedStyle(O).direction==="rtl";_.current=J,R(J)}},[t,r]);const L=(0,s.useMemo)(()=>e?r.filter(O=>Object.values(O).some(J=>J===e)):r,[r,e]),G=(0,s.useRef)(L);G.current=L;const I=(0,s.useCallback)(O=>{if(O<0){T(-1);return}T(O);const J=f.current;if(!J)return;const nr=Nl(L[O],O,p);A0(J,O,nr)},[L,p]),H=(0,s.useMemo)(()=>n1(L,p,I),[L,p,I]),V=O=>c1(O,{isVisible:!!t,menuListRef:f,activeItemIndex:U,filteredItems:L,menuDomId:p,isMenuRtlRef:_,submenuBackNavigation:l,listNavByKey:H,hideSubmenu:S,focusTriggerById:x,focusRowAtItemIndex:I,setActiveItemIndex:T,openSubmenuForKeyboard:z}),er=(0,s.useMemo)(()=>L.map((O,J)=>{const nr=Bl(O,J),{itemId:sr,role:yr,keepMenuOpen:q,items:tr,renderSubmenu:Mr,submenuProps:dr,...br}=O,hr=di(O,J,p),{hasSubmenu:pr}=hr,vr=pr?hr.menuId:"",kr=pr?{menu:hr.menuId,trigger:hr.triggerId}:void 0,K=wn(O)||"",or=yr||t1(O)||"menuitem",C=J===U,$=Nl(O,J,p,hr),N={filterText:e,isCurrent:C,menuControlId:$,itemId:nr,role:yr,keepMenuOpen:q??o,isRtl:P,...pr?{hasSubmenu:!0,ids:kr}:{hasSubmenu:!1}},ar=a?.(br,J,N);return pr?(0,i.jsxs)("li",{"arc-menu-item":K,role:"presentation",onFocusCapture:()=>T(J),onMouseEnter:()=>{k(vr)},onMouseLeave:Ol(h)?()=>w(vr):void 0,onClick:E=>S0(E,O,K,q??o),children:[ar,n?.({ids:kr,items:tr??[],item:O,filterText:e,passiveMode:h,isRtl:P})]},nr):(0,i.jsx)("li",{"arc-menu-item":K,role:or,onFocusCapture:()=>T(J),onClick:E=>S0(E,O,K,q??o),children:ar},nr)}),[U,e,L,o,a,p,P,h,n,k,w]);return(0,s.useEffect)(()=>{if(!t){v(),m(),y(),g.current=null,T(-1);return}const O=G.current,J=ui(O,p);if(J.length>0){const nr=J[0],sr=f.current;if(T(nr),sr){const yr=Nl(O[nr],nr,p);A0(sr,nr,yr)}}},[t,p,v,m,y,g]),(0,s.useEffect)(()=>()=>{v(),m(),y(),g.current=null},[v,m,y,g]),(0,i.jsx)("ul",{...u,ref:f,"arc-menu":"",role:"menu",onKeyDown:V,onMouseLeave:()=>T(-1),tabIndex:t?0:-1,children:er})};Cr("ArcMenu",g1);const E0=["items","renderItem","renderSubmenu","keepMenuOpen","onToggle","id","menuProps","passiveMode","submenuBackNavigation","offset","ref"],_0=r=>{const{startSlot:e,endSlot:a,onClick:t,href:o,target:n,containerProps:c,isDisabled:l,"aria-disabled":u,tooltip:h,id:p,popoverTarget:f,popoverTargetAction:g,"aria-haspopup":v,"aria-controls":m,"aria-expanded":y,...S}=r,k=wn(S),w=(0,s.useMemo)(()=>C0(k),[k]),z=u??l,x=k==="divider",_=!!(o||t||f),P=!x,R=P&&e?"":void 0,U=P&&a?"":void 0,T=(0,s.useMemo)(()=>({...c,onClick:t,tooltip:h,href:o,target:n,id:p,popoverTarget:f,popoverTargetAction:g,"aria-haspopup":v,"aria-controls":m,"aria-expanded":y}),[c,t,h,o,n,p,f,g,v,m,y]),L=(0,s.useMemo)(()=>({...c}),[c]);return _?(0,i.jsxs)(Br,{...T,role:f?"menuitem":T.role,"aria-disabled":z?"true":void 0,isDisabled:!!z,_isCustom:!0,"arc-dropdown-item":k??"","has-start-slot":R,"has-end-slot":U,children:[P&&e,(0,i.jsx)(w,{...S,"is-item-content":"interactive"}),P&&a]}):(0,i.jsxs)("div",{...L,"arc-dropdown-item":k??"","has-start-slot":R,"has-end-slot":U,children:[P&&e,(0,i.jsx)(w,{...S,"is-item-content":"inert"}),P&&a]})},f1=d`--arcâ¢dropdown`,m1=d`${f1}â¢menu`,Te=d`${m1}â¢item`,b1=d` 6673@layer arc-components { 6674 6675 /* ITEM SETUP ----------------------------------------------------⢠*/ 6676 6677 [arc-dropdown-item] { 6678 ${Te}â¢padding: var(${M}â¢8) var(${M}â¢12); 6679 ${Te}â¢minâ¢height: var(${b}â¢36); 6680 ${Te}â¢gap: var(${M}â¢8); 6681 6682 &[arc-dropdown-item=text-detail] { 6683 ${Te}â¢minâ¢height: var(${b}â¢48); 6684 } 6685 6686 &[arc-dropdown-item=section-label] { 6687 ${Te}â¢minâ¢height: var(${b}â¢32); 6688 } 6689 6690 &[arc-dropdown-item=user] { 6691 ${Te}â¢minâ¢height: var(${b}â¢40); 6692 6693 &:not([has-start-slot]) { 6694 ${Te}â¢padding: var(${M}â¢8) var(${M}â¢12) var(${M}â¢8) var(${M}â¢10); 6695 } 6696 } 6697 6698 &[arc-dropdown-item=user-detail] { 6699 ${Te}â¢minâ¢height: var(${b}â¢48); 6700 6701 &:not([has-start-slot]) { 6702 ${Te}â¢padding: var(${M}â¢8) var(${M}â¢12) var(${M}â¢8) var(${M}â¢6); 6703 } 6704 } 6705 6706 &[arc-dropdown-item=divider] { 6707 ${Te}â¢minâ¢height: var(${b}â¢8); 6708 ${Te}â¢padding: 0; 6709 } 6710 } 6711 6712 /* DROPDOWN ELEMENTS ---------------------------------------------⢠*/ 6713 6714 [arc-dropdown] { 6715 --arc-popover-font-size: initial; 6716 --arc-popover-width: var(--arc-dropdown-width, auto); 6717 --arc-popover-min-width: var(--arc-dropdown-min-width, 3em); 6718 --arc-popover-max-width: var(--arc-dropdown-max-width, 50em); 6719 --arc-popover-padding: var(--arc-dropdown-padding, 0em); 6720 --arc-popover-outline-size: 0em; 6721 --arc-popover-overflow: var(--arc-dropdown-overflow, auto); 6722 6723 --arc-menu-item-gap: var(${Te}â¢gap); 6724 --arc-badge-align-self: center; 6725 --arc-badge-count-align-self: center; 6726 } 6727 6728 [arc-dropdown-submenu] { 6729 &:where([anchor-at="left-start"], [anchor-at="right-start"]) { 6730 margin-top: var(--arc-dropdown-submenu-offset, var(${M}â¢4m)); 6731 } 6732 6733 &:where([anchor-at="left-end"], [anchor-at="right-end"]) { 6734 margin-top: var(--arc-dropdown-submenu-offset, var(${M}â¢4)); 6735 } 6736 } 6737 6738 [arc-dropdown-item] { 6739 flex: 1; 6740 display: flex; 6741 align-items: center; 6742 gap: var(${Te}â¢gap); 6743 text-align: start; 6744 min-height: var(${Te}â¢minâ¢height); 6745 6746 &:not([arc-button]) { 6747 padding: var(${Te}â¢padding); 6748 max-width: 100%; 6749 } 6750 6751 &[arc-button] { 6752 --arc-button-padding: var(${Te}â¢padding); 6753 --arc-button-min-height: var(${b}â¢40); 6754 } 6755 6756 [is-item-content] { 6757 flex: 1; 6758 } 6759 6760 [arc-dropdown-submenu-icon] { 6761 --arc-icon-color: var(--arc-dropdown-submenu-icon-color, var(--arc-color-fg-secondary)); 6762 } 6763 } 6764 6765} 6766`,Sn={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"},$1=(r,e)=>({anchorAt:r?Sn.ANCHOR_AT_LTR:Sn.ANCHOR_AT_RTL,offset:e??Sn.OFFSET}),P0=(0,s.forwardRef)((r,e)=>(0,i.jsx)(Go,{...r,ref:e,"arc-dropdown-menu-button":""})),y1=r=>{const e={...r};return E0.forEach(a=>{Reflect.deleteProperty(e,a)}),e},x1=r=>r?Sn.ICON_RTL:Sn.ICON_LTR,k1=(r,e)=>r===void 0?x1(e):typeof r=="function"?r(e):r,hi=r=>{const{items:e,renderItem:a,keepMenuOpen:t,menuProps:o,passiveMode:n,submenuBackNavigation:c,renderSubmenu:l,submenuIcon:u,submenuOffset:h,ref:p,...f}
6766=r,[g,v]=(0,s.useState)(!1),m=(0,s.useRef)(r);m.current=r;const y=(0,s.useRef)(null),S=(0,s.useCallback)(_=>{if(typeof document>"u")return;ca(_,y.current)?.hidePopover?.()},[]),k=(0,s.useCallback)(_=>{y.current=_,oa(p,_)},[p]),w=(0,s.useCallback)(_=>{const P=m.current,R=y1(P),U=Y$(_.item)??P.renderItem,{ids:T}=_,L=P.keepMenuOpen;if(_.item.renderSubmenu)return _.item.renderSubmenu({items:_.items,renderItem:U,keepMenuOpen:L,filterText:_.filterText,passiveMode:_.passiveMode,ids:T,closeSubmenu:()=>{S(T.menu)},inheritedFromParent:R});const{menuProps:G,popoverPassthrough:I}=X$(_.item);return(0,i.jsx)(hi,{...R,...$1(_.isRtl,P.submenuOffset),...I,id:T.menu,"arc-dropdown-submenu":"",submenuBackNavigation:q$(T),alternateAnchorId:T.trigger,hidePopoverButton:!0,passiveMode:_.passiveMode,items:_.items,renderItem:U,keepMenuOpen:L,menuProps:G})},[S]),z=(0,s.useCallback)((..._)=>{const[P,,R]=_;if(a)return a(..._);const{ids:U,isRtl:T,menuControlId:L}=R,{endSlot:G,...I}=P,H=!!U,V=k1(m.current.submenuIcon,!!T),er=G||H?(0,i.jsxs)(i.Fragment,{children:[G,H?(0,i.jsx)(Ar,{"arc-dropdown-submenu-icon":"",icon:V}):null]}):void 0;return(0,i.jsx)(_0,{...I,id:L,endSlot:er,...U?{popoverTarget:U.menu,popoverTargetAction:"toggle","aria-haspopup":"menu","aria-controls":U.menu}:{}})},[a]),x=_=>{v(_.newState==="open"),r?.onToggle?.(_)};return(0,i.jsx)(ya,{...f,ref:k,"arc-dropdown":"",variant:"common",onToggle:x,children:(0,i.jsx)(v1,{...o,"arc-dropdown-menu":"",passiveMode:n,submenuBackNavigation:c,items:e??[],renderItem:z,isVisible:g,keepMenuOpen:t,renderSubmenu:w})})};P0.displayName="ArcDropdownButton",hi.Button=P0,hi.Item=_0,Cr("ArcDropdownMenu",b1);const T0=({size:r="md",layout:e="icon",variant:a="common",hierarchy:t="tertiary",...o})=>(0,i.jsx)(Br,{...o,"arc-input-action":"",size:r,layout:e,variant:a,hierarchy:t}),pi=d`--arcâ¢link`,Ta=d`${pi}â¢fg`,Cn=d`${Ta}â¢hover`,An=d`${Ta}â¢disabled`,Fl=d`${pi}â¢outline`,I0=d`${Fl}â¢size`,Hl=d`${Fl}â¢offset`,w1=d`${pi}â¢cursor`,zn=d`${pi}â¢focusâ¢color`,S1=d` 6767@layer arc-components { 6768${Tv} 6769 6770[arc-link] { 6771 6772 /* VARIANTS ------------------------------------------------------⢠*/ 6773 6774 &[data-variant=inherit] { /* @default */ 6775 ${Ta}: currentcolor; 6776 ${Cn}: color-mix(in srgb, currentcolor, transparent 38.75%); 6777 ${An}: color-mix(in srgb, currentcolor, transparent 70%); 6778 6779 ${zn}: var(--arc-color-border-focus); 6780 } 6781 6782 &[data-variant=primary] { 6783 ${Ta}: var(--arc-color-fg-primary); 6784 ${Cn}: var(--arc-color-fg-secondary); 6785 ${An}: var(--arc-color-fg-disabled); 6786 ${zn}: var(--arc-color-border-focus); 6787 } 6788 6789 &[data-variant=secondary] { 6790 ${Ta}: var(--arc-color-fg-secondary); 6791 ${Cn}: var(--arc-color-fg-primary); 6792 ${An}: var(--arc-color-fg-disabled); 6793 ${zn}: var(--arc-color-border-focus); 6794 } 6795 6796 /* @deprecated */ 6797 &[data-variant=inverse] { 6798 ${Ta}: var(--arc-color-fg-on-mono-inverse); 6799 ${Cn}: var(--arc-link-fg-hover-inverse); 6800 ${An}: var(--arc-link-fg-disabled-inverse); 6801 ${zn}: var(--arc-link-focus-disabled-inverse); 6802 } 6803 6804 & { 6805 ${I0}: 0.125em; /* 2px */ 6806 ${Hl}: 0.0625em; /* 1px */ 6807 } 6808 6809 6810 /* STATES --------------------------------------------------------⢠*/ 6811 6812 &:not([data-is-disabled]):hover { 6813 ${Ta}: var(--arc-link-color-hover, var(${Cn})); 6814 } 6815 6816 &:where(:focus, :focus-within):focus-visible { 6817 ${Fl}: var(${I0}) solid var(--arc-link-color-focus, var(${zn})); 6818 ${Hl}: var(${Hl}); 6819 6820 * { 6821 outline: none; 6822 } 6823 } 6824 6825 &[data-is-disabled] { 6826 ${Ta}: var(--arc-link-color-disabled, var(${An})); 6827 ${w1}: not-allowed; 6828 } 6829 6830 6831 & { 6832 6833 /* Inter-Component Communication -------------------------------⢠*/ 6834 --arc-icon-color: var(--arc-link-color, var(${Ta})); /** ArcIcon color */ 6835 6836 } 6837 6838} 6839 6840 6841/* CORE STYLES ------------------------------------------------------ */ 6842 6843[arc-link] { 6844 color: var(--arc-link-color, var(${Ta})); 6845 border-radius: var(--arc-border-radius-sm); /* for focus outline */ 6846 text-decoration: var(--arc-link-text-decoration, underline); 6847 6848 [data-element=icon] { 6849 text-decoration: none; 6850 } 6851 6852 [data-element=text] { 6853 text-decoration: var(--arc-link-text-decoration, underline); 6854 text-decoration-color: currentcolor; 6855 } 6856} 6857 6858} 6859`,C1=fr(Ur,["inherit","primary","secondary","inverse"]),A1=({children:r,layout:e="gutter",size:a="inherit",variant:t="inherit",tag:o="a",href:n,icon:c,text:l,overflow:u,iconSize:h,gapSize:p,isFlipped:f,isDisabled:g,...v})=>(0,i.jsx)(o,{...v,href:g?void 0:n,"arc-link":"","data-variant":t,"aria-disabled":g,"data-is-disabled":g?"":void 0,children:r||(0,i.jsx)(ue,{icon:c,text:l,overflow:u,iconSize:h,gapSize:p,size:a,layout:e,isFlipped:f})});Cr("ArcLink",S1);const z1=[...Da],E1=fr(Ur,["common"]),_1=fr(Ur,["common","critical"]),P1=fr(Ur,["common","brand","info","success","warning","error","processing"]),T1=["auto","dark","light","none"],I1=["auto","all","top-bottom","left-right","left-right-top","left-right-bottom","top-bottom-left","top-bottom-right","none"],R1=fr(ze,["xl","lg","md","sm","custom","fullscreen"]),j1=["cancel","escape","outside","button:dismiss","button:back","button:primary","button:secondary","button:tertiary","confirm:discard","confirm:cancel"],Vl=r=>r?.matches(":modal"),Gl=(r,e)=>e.target===r,M1=(r,e)=>e.clientX<r.left||e.clientX>
6859r.right||e.clientY<r.top||e.clientY>r.bottom,En=({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)},Ul=({modalRef:r,shouldConfirm:e,setIsConfirming:a,onClose:t,onToggle:o})=>{(0,s.useEffect)(()=>{const n=r.current;if(!n)return;const c=u=>{Vl(n)&&Gl(n,u)&&(e?(u.preventDefault(),u.stopPropagation(),a?.(!0)):t?.("outside",u))},l=u=>{Gl(n,u)&&(a?.(!1),t?.(n.returnValue,u),o?.(!1,u))};return n.addEventListener("close",l),n.addEventListener("cancel",c),()=>{n.removeEventListener("close",l),n.removeEventListener("cancel",c)}},[r,e,a,t,o])},Kl=({modalRef:r,isOpen:e,isTopLayer:a})=>{(0,s.useEffect)(()=>{const t=r.current;t&&(e&&!t.open&&(a?t.showModal():t.show()),!e&&t.open&&t.close())},[e,a])},Wl=({modalRef:r,isOpen:e,autoFocusId:a})=>{(0,s.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])},R0=(r,e)=>(typeof r.composedPath=="function"?r.composedPath():[]).includes(e)||r.target instanceof Node&&e.contains(r.target),j0=({modalRef:r,isOpen:e=!1,closeOnBackdrop:a=!1,attemptCloseModal:t})=>{(0,s.useEffect)(()=>{const o=r.current;if(!o||!e||!a||!Vl(o))return;let n=!1;const c=u=>{n=R0(u,o)},l=u=>{if(n||R0(u,o))return;const h=o.getBoundingClientRect();M1(h,u)&&t("outside")(u)};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])},M0=({modalRef:r,isOpen:e=!1,closeOnEsc:a=!1,closedBy:t="closerequest",attemptCloseModal:o})=>{(0,s.useEffect)(()=>{const n=r.current;if(!n||!e||!a||!Vl(n))return;const c=l=>{if(l.key==="Escape"&&Gl(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])},Xl=r=>(0,i.jsx)(Br,{"aria-label":"Dismiss",text:"Dismiss",...r,variant:"common",hierarchy:"tertiary",icon:"fa-regular fa-xmark-large",layout:"icon",shape:"square",size:"md"}),L1=r=>(0,i.jsx)(Br,{"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"}),gi=(0,s.forwardRef)(({inert:r,...e},a)=>(0,i.jsx)("div",{...e,ref:a,"arc-modal-content":"",inert:r}));gi.displayName="ModalContent";const L0=({showDivider:r,...e})=>(0,i.jsx)("header",{...e,"arc-modal-header":"","has-divider":r?"":void 0}),D1=({glyph:r,variant:e="common"})=>(0,i.jsx)(i.Fragment,{children:r&&(0,i.jsx)(Ar,{icon:r,"arc-modal-glyph":"","arc-icon-status":e})}),ql=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)(ue,{...e})})})},O1=({message:r,...e})=>(0,i.jsx)(i.Fragment,{children:r&&(0,i.jsx)("p",{...e,"arc-modal-message":"",children:r})}),Yl=({tag:r="section",padding:e,...a})=>(0,i.jsx)(r,{...a,"arc-modal-body":"","data-padding":e==="auto"?void 0:e}),Zl=({showDivider:r,...e})=>(0,i.jsx)("footer",{...e,"arc-modal-footer":"","has-divider":r?"":void 0}),B1=r=>e=>{if(e.key==="Escape"){if(r==="none"){e.stopPropagation(),e.preventDefault();return}return"escape"}},$r=d`--arcâ¢modal`,_n=d`${$r}â¢layout`,N1=d`${$r}â¢header`,vi=d`${$r}â¢body`,Pn=d`${$r}â¢footer`,D0=d`${$r}â¢fg`,fi=d`${$r}â¢bg`,Ia=d`${$r}â¢backdrop`,lt=d`${$r}â¢scale`,fo=d`${N1}â¢padding`,Xr=d`${vi}â¢padding`,dt=d`${Pn}â¢padding`,F1=d` 6860 ${$r}â¢fontâ¢size: var(${b}â¢14); 6861 ${$r}â¢gap: var(${M}â¢16); 6862 6863 ${_n}â¢rows: auto 1fr auto; 6864 ${_n}â¢columns: auto; 6865 6866 &:not(:has([arc-modal-footer])):has([arc-modal-header]) { 6867 ${_n}â¢rows: auto 1fr; 6868 } 6869
6870 &:not(:has([arc-modal-header])):has([arc-modal-footer]) { 6871 ${_n}â¢rows: 1fr auto; 6872 } 6873 6874 &:not(:has([arc-modal-header])):not(:has([arc-modal-footer])) { 6875 ${_n}â¢rows: auto; 6876 } 6877 6878 ${D0}: var(--arc-color-fg-primary); 6879 ${fi}: var(--arc-color-bg-primary); 6880 ${$r}â¢border: none; 6881 ${$r}â¢borderâ¢radius: var(--arc-border-radius-lg); 6882 ${$r}â¢divider: var(${b}â¢1) solid var(--arc-color-border-mid); 6883 6884 ${$r}â¢maxâ¢width: calc(100vw - var(${M}â¢32)); 6885 ${$r}â¢minâ¢width: unset; 6886 ${$r}â¢width: auto; 6887 6888 ${$r}â¢maxâ¢height: calc(100vh - var(${M}â¢32)); 6889 ${$r}â¢minâ¢height: unset; 6890 ${$r}â¢height: max-content; 6891 6892 ${lt}: 1; 6893 ${lt}â¢start: 0.95; 6894 6895 ${vi}â¢textâ¢align: unset; 6896 ${Pn}â¢justifyâ¢content: flex-end; 6897 6898 ${Ia}â¢bg: var(--arc-color-overlay-stark); 6899 ${Ia}â¢pointerâ¢events: none; 6900 ${Ia}â¢cursor: default; 6901 6902 &:where([is-backdrop=light]) { 6903 ${Ia}â¢bg: var(--arc-color-overlay-subtle); 6904 } 6905 6906 &:where([is-backdrop=dark]) { 6907 ${Ia}â¢bg: var(--arc-color-overlay-stark); 6908 } 6909 6910 &:where([is-backdrop=none]) { 6911 ${Ia}â¢bg: transparent; 6912 } 6913`,H1=d` 6914 &[data-size=sm] { 6915 ${$r}â¢width: 28em; 6916 } 6917 6918 &[data-size=md] { 6919 ${$r}â¢width: 40em; 6920 } 6921 6922 &[data-size=lg] { 6923 ${$r}â¢width: 50em; 6924 } 6925 6926 &[data-size=xl] { 6927 ${$r}â¢width: 64em; 6928 } 6929 6930 &[data-size=custom] { 6931 ${$r}â¢width: auto; 6932 ${$r}â¢height: max-content; 6933 } 6934 6935 &[data-size=fullscreen] { 6936 ${$r}â¢width: 100vw; 6937 ${$r}â¢height: 100vh; 6938 ${$r}â¢minâ¢width: 100vw; 6939 ${$r}â¢minâ¢height: 100vh; 6940 ${$r}â¢maxâ¢width: 100vw; 6941 ${$r}â¢maxâ¢height: 100vh; 6942 ${$r}â¢borderâ¢radius: var(--arc-border-radius-none); 6943 6944 ${lt}: 1; 6945 ${lt}â¢start: 1.125; 6946 } 6947`,V1=d` 6948 &[is-confirm] { 6949 ${Pn}â¢justifyâ¢content: flex-end; 6950 6951 &[is-confirm=critical] [arc-modal-title] { 6952 --arc-icon-text-icon-color: var(--arc-color-fg-critical-mid); 6953 } 6954 } 6955 6956 &[is-alert] { 6957 ${vi}â¢textâ¢align: center; 6958 ${Pn}â¢justifyâ¢content: center; 6959 6960 ${Xr}â¢blockâ¢start: var(${M}â¢40); 6961 ${Xr}â¢blockâ¢end: var(${M}â¢20); 6962 6963 ${dt}â¢blockâ¢start: var(${M}â¢12); 6964 ${dt}â¢blockâ¢end: var(${M}â¢40); 6965 6966 ${$r}â¢glyphâ¢size: var(${b}â¢48); 6967 6968 [arc-modal-spinner] { 6969 --arc-spinner-circle-opacity: 9.8%; /* 9.8% = neutral-200 on white */ 6970 --arc-spinner-size: var(${$r}â¢glyphâ¢size); 6971 } 6972 6973 [arc-modal-glyph] { 6974 --arc-icon-display: flex; 6975 --arc-icon-size: var(${$r}â¢glyphâ¢size); 6976 --arc-icon-height: var(--arc-icon-size); 6977 --arc-icon-max-height: var(--arc-icon-size); 6978 } 6979 6980 [arc-modal-body] { 6981 display: flex; 6982 flex-direction: column; 6983 align-items: center; 6984 justify-content: center; 6985 gap: var(${M}â¢12); 6986 } 6987 } 6988 6989 &:not([is-top-layer]) { 6990 z-index: var(--arc-modal-z-index, 1000); 6991 } 6992`,G1=d` 6993 [arc-modal-content] { 6994 &:has([arc-modal-header]) { 6995 ${Xr}â¢blockâ¢start: var(${M}â¢10); 6996 } 6997 6998 &:has([arc-modal-footer]) { 6999 ${Xr}â¢blockâ¢end: var(${M}â¢10); 7000 } 7001 7002 &:has([arc-modal-header][has-divider]) { 7003 ${fo}â¢blockâ¢end: var(${M}â¢20); 7004 ${Xr}â¢blockâ¢start: var(${M}â¢20); 7005 } 7006 7007 &:has([arc-modal-footer][has-divider]) { 7008 ${Xr}â¢blockâ¢end: var(${M}â¢20); 7009 ${dt}â¢blockâ¢start: var(${M}â¢12); 7010 ${dt}â¢blockâ¢end: var(${M}â¢12); 7011 } 7012 7013 &:has([arc-modal-body][data-padding=top-bottom]) { 7014 ${Xr}â¢inlineâ¢start: 0; 7015 ${Xr}â¢inlineâ¢end: 0; 7016 } 7017 7018 &:has([arc-modal-body][data-padding=left-right]) { 7019 ${Xr}â¢blockâ¢start: 0; 7020 ${Xr}â¢blockâ¢end: 0; 7021 } 7022 7023 &:has([arc-modal-body][data-padding=left-right-top]) { 7024 ${Xr}â¢blockâ¢end: 0; 7025 } 7026 7027 &:has([arc-modal-body][data-padding=left-right-bottom]) { 7028 ${Xr}â¢blockâ¢start: 0; 7029 } 7030 7031 &:has([arc-modal-body][data-padding=top-bottom-left]) { 7032 ${Xr}â¢inlineâ¢end: 0; 7033 } 7034 7035 &:has([arc-modal-body][data-padding=top-bottom-right]) { 7036 ${Xr}â¢inlineâ¢start: 0; 7037 } 7038 7039 &:has([arc-modal-body][data-padding=all]) { 7040 ${Xr}â¢blockâ¢start: var(${M}â¢20); 7041 ${Xr}â¢inlineâ¢end: var(${M}â¢24); 7042 ${Xr}â¢blockâ¢end: var(${M}â¢20); 7043 ${Xr}â¢inlineâ¢start: var(${M}â¢24); 7044 } 7045 7046 &:has([arc-modal-go-back]) { 7047 ${fo}â¢inlineâ¢start: var(${M}â¢20); 7048 } 7049 7050 ${fo}: 7051 var(${M}â¢20) 7052 var(${M}â¢24) 7053 var(${fo}â¢blockâ¢end, var(${M}â¢10)) 7054 var(${fo}â¢inlineâ¢start, var(${M}â¢24)); 7055 7056 ${Xr}: 7057 var(${Xr}â¢blockâ¢start, var(${M}â¢20)) 7058 var(${Xr}â¢inlineâ¢end, var(${M}â¢24)) 7059 var(${Xr}â¢blockâ¢end, var(${M}â¢20)) 7060 var(${Xr}â¢inlineâ¢start, var(${M}â¢24)); 7061 7062 ${dt}: 7063 var(${dt}â¢blockâ¢start, var(${M}â¢10)) 7064 var(${M}â¢24) 7065 var(${dt}â¢blockâ¢end, var(${M}â¢20)) 7066 var(${M}â¢24); 7067 7068 &:has([arc-modal-body][data-padding=none]) { 7069 ${Xr}: 0; 7070 } 7071 } 7072`,U1=d` 7073 [arc-modal] { 7074 transition-behavior: allow-discrete, smooth; 7075 transition-duration: var(--arc-modal-transition-duration, 240ms); 7076 transition-property: display, opacity, scale; 7077 transition-timing-function: ease-out; 7078 7079 &::after { 7080 transition: inherit; 7081 } 7082 7083 &::backdrop { 7084 transition: inherit; 7085 } 7086 } 7087 7088 @supports (overlay: auto) { 7089 [arc-modal] { 7090 transition-behavior: allow-discrete; 7091 transition-property: display, overlay, opacity, scale; 7092 } 7093 } 7094`,K1=d` 7095 [arc-modal] { 7096 opacity: 0; 7097 scale: var(--arc-modal-scale, var(${lt})); 7098 7099 &::after { 7100 opacity: 0; 7101 } 7102 7103 &::backdrop { 7104 opacity: 0; 7105 } 7106 7107 &[open] { 7108 display: flex; 7109 flex-direction: column; 7110 opacity: 1; 7111 } 7112 7113 &[open]::after { 7114 opacity: 1; 7115 } 7116 7117 &[open]::backdrop { 7118 opacity: 1; 7119 } 7120 } 7121 7122 @starting-style { 7123 [arc-modal][open] { 7124 opacity: 0; 7125 scale: var(--arc-modal-scale-start, var(${lt}â¢start)); 7126 } 7127 7128 [arc-modal][open]::after { 7129 opacity: 0; 7130 } 7131 7132 [arc-modal][open]::backdrop { 7133 opacity: 0; 7134 } 7135 } 7136`,Jl=d` 7137@layer arc-components { 7138 7139 /* SETUP ---------------------------------------------------------⢠*/ 7140 7141 [arc-modal] { 7142 ${F1} 7143 ${H1} 7144 ${V1} 7145 ${G1} 7146 } 7147 7148 /* REDUCED MOTION ------------------------------------------------⢠*/ 7149 7150 @media (prefers-reduced-motion: reduce) { 7151 [arc-modal] { 7152 ${lt}: 1; 7153 ${lt}â¢start: 1; 7154 } 7155 } 7156 7157 /* CORE ----------------------------------------------------------⢠*/ 7158 7159 [arc-modal] { 7160 will-change: opacity, scale; 7161 contain: layout style paint; 7162 7163 inset: var(--arc-modal-inset, 0); 7164 translate: var(--arc-modal-translate, none); 7165 margin: var(--arc-modal-margin, auto); 7166 7167 padding: 0; 7168 color: var(--arc-modal-color, var(${D0})); 7169 background: var(--arc-modal-background, var(${fi})); 7170 border: var(--arc-modal-border, var(${$r}â¢border)); 7171 border-radius: var(--arc-modal-border-radius, var(${$r}â¢borderâ¢radius)); 7172 box-shadow: var(--arc-modal-box-shadow, var(--arc-shadow-lg)); 7173 outline: var(--arc-modal-outline, none); 7174 7175 width: var(--arc-modal-width, var(${$r}â¢width)); 7176 height: var(--arc-modal-height, var(${$r}â¢height)); 7177 min-width: var(--arc-modal-min-width, var(${$r}â¢minâ¢width)); 7178 min-height: var(--arc-modal-min-height, var(${$r}â¢minâ¢height)); 7179 max-width: var(--arc-modal-max-width, var(${$r}â¢maxâ¢width)); 7180 max-height: var(--arc-modal-max-height, var(${$r}â¢maxâ¢height)); 7181 7182 &::backdrop { 7183 will-change: opacity; 7184 contain: layout style paint; 7185 7186 background: var(--arc-modal-backdrop-background, var(${Ia}â¢bg)); 7187 pointer-events: var(${Ia}â¢pointerâ¢events, none); 7188 cursor: var(${Ia}â¢cursor, default); 7189 } 7190 7191 [arc-modal-content] { 7192 font-size: var(--arc-modal-font-size, var(${$r}â¢fontâ¢size)); 7193 flex: 1 1 min-content; 7194 display: flex; 7195 flex-direction: column; 7196 overflow: hidden; 7197 position: relative; 7198 z-index: 1; 7199 7200 /* Force remove margin from controlled title and message elements */ 7201 :is([arc-modal-title], [arc-modal-message]) { margin: 0 !important; } 7202 } 7203 7204 [arc-modal-header] { 7205 flex: none; 7206 position: relative; 7207 z-index: 1; 7208 7209 display: flex; 7210 align-items: var(--arc-modal-header-align-items, unset); 7211 justify-content: space-between; 7212 gap: var(--arc-modal-header-gap, var(${$r}â¢gap)); 7213 7214 padding: var(${fo}); 7215 background: var(--arc-modal-header-background, var(${fi})); 7216 max-width: 100%; 7217
7218 &:where([has-divider]) { 7219 border-bottom: var(--arc-modal-header-divider, var(${$r}â¢divider)); 7220 } 7221 7222 :where([header-slot]) { 7223 display: flex; 7224 align-items: inherit; 7225 gap: inherit; 7226 } 7227 7228 :where([header-slot=content]) { 7229 flex: 1; 7230 align-self: flex-start; 7231 } 7232 7233 :where([header-slot=dismiss]) { 7234 margin: var(${M}â¢4m) var(${M}â¢8m) var(${M}â¢4m) var(${M}â¢4m); 7235 } 7236 7237 :where([header-slot=go-back]) { 7238 margin: var(${M}â¢4m) 0 var(${M}â¢4m) var(${M}â¢4m); 7239 } 7240 } 7241 7242 [arc-modal-title] { 7243 --arc-icon-text-gap: var(${M}â¢8); 7244 7245 [data-element=subtext] { 7246 font-family: var(--arc-font-family-body); 7247 font-weight: var(--arc-font-weight-body); 7248 font-size: var(--arc-font-size-body-md); 7249 color: inherit; 7250 margin-top: var(${M}â¢4); 7251 } 7252 } 7253 7254 [arc-modal-body] { 7255 flex: 1; 7256 padding: var(${Xr}); 7257 overflow: auto; 7258 overscroll-behavior: var(--arc-modal-overscroll-behavior, contain); 7259 min-height: var(--arc-modal-body-min-height, 3em); 7260 text-align: var(--arc-modal-body-text-align, var(${vi}â¢textâ¢align)); 7261 } 7262 7263 [arc-modal-footer] { 7264 flex: none; 7265 position: relative; 7266 z-index: 1; 7267 7268 display: flex; 7269 flex-direction: var(--arc-modal-footer-flex-direction, unset); 7270 align-items: var(--arc-modal-footer-align-items, center); 7271 justify-content: var(--arc-modal-footer-justify-content, var(${Pn}â¢justifyâ¢content)); 7272 gap: var(--arc-modal-footer-gap, var(${$r}â¢gap)); 7273 7274 background: var(--arc-modal-footer-background, var(${fi})); 7275 padding: var(--arc-modal-footer-padding, var(${dt})); 7276 max-width: 100%; 7277 7278 &[has-divider] { 7279 border-top: var(--arc-modal-footer-divider, var(${$r}â¢divider)); 7280 } 7281 7282 [footer-slot=content] { 7283 flex: var(--arc-modal-footer-content-flex, none); 7284 display: var(--arc-modal-footer-content-display, flex); 7285 gap: inherit; 7286 } 7287 } 7288 7289 [arc-modal-dismiss] { 7290 position: var(--arc-modal-dismiss-position, absolute); 7291 inset: var(--arc-modal-dismiss-inset, var(${M}â¢16) var(${M}â¢16) auto auto); 7292 width: var(--arc-modal-dismiss-width, auto); 7293 overflow: visible; 7294 z-index: 2; 7295 } 7296 7297 /* Nested confirm modal */ 7298 &:not([is-top-layer]):has([arc-modal][is-confirm][open])::after { 7299 content: ''; 7300 position: absolute; 7301 inset: 0; 7302 background: var(--arc-modal-backdrop-background, var(${Ia}â¢bg)); 7303 z-index: var(--arc-modal-confirm-z-index, 2); 7304 } 7305 7306 /* Nested modals */ 7307 [arc-modal] { 7308 --arc-modal-min-width: var(--arc-modal-nested-min-width, none); 7309 --arc-modal-min-height: var(--arc-modal-nested-min-height, none); 7310 } 7311 7312 [arc-modal][is-alert] { 7313 --arc-modal-min-width: var(--arc-modal-nested-alert-min-width, none); 7314 --arc-modal-min-height: var(--arc-modal-nested-alert-min-height, none); 7315 } 7316 7317 [arc-modal][is-confirm] { 7318 --arc-modal-width: var(--arc-modal-confirm-width, 25em); 7319 --arc-modal-height: var(--arc-modal-confirm-height, max-content); 7320 --arc-modal-min-width: var(--arc-modal-confirm-min-width, none); 7321 --arc-modal-min-height: var(--arc-modal-confirm-min-height, none); 7322 --arc-modal-max-width: var(--arc-modal-confirm-max-width, calc(100% - var(${M}â¢32))); 7323 --arc-button-bar-flex: none; 7324 7325 z-index: var(--arc-modal-confirm-z-index, 3); 7326 7327 inset: var(--arc-modal-confirm-inset, 0); 7328 translate: var(--arc-modal-confirm-translate, none); 7329 margin: var(--arc-modal-confirm-margin, auto); 7330 } 7331 } 7332 7333 ${U1} 7334 ${K1} 7335`,ut={variant:"common",backdropColor:"auto",message:"You have unsaved changes. Discard them?",onCloseOverride:void 0,isTopLayer:!0,isInverse:!1,scheme:"auto"},O0=({children:r,headerProps:e,bodyProps:a,footerProps:t,...o})=>{const n=(0,s.useRef)(null),{isOpen:c,autoFocusId:l,isTopLayer:u=ut.isTopLayer,isInverse:h=ut.isInverse,scheme:p=ut.scheme,backdropColor:f=ut.backdropColor,variant:g=ut.variant,message:v=ut.message,onCloseOverride:m=ut.onCloseOverride,onConfirmDiscard:y,onConfirmCancel:S,contentRef:k,...w}=o,{slotStart:z,TitleElement:x,titleContent:_,slotEnd:P,...R}=e||{},{primaryButton:U,secondaryButton:T,...L}=t||{},G=!!(_||z||P),I=p==="auto"?void 0:p,H=!!m,V=nr=>
7335H?m?.("confirm:discard",nr,n.current??void 0):y?.("confirm:discard",nr),er=nr=>H?m?.("confirm:cancel",nr,n.current??void 0):S?.("confirm:cancel",nr);Ul({modalRef:n,onClose:m}),Kl({modalRef:n,isOpen:c,isTopLayer:u}),Wl({modalRef:n,isOpen:c,autoFocusId:l});const O=nr=>{er(nr),T?.onClick?.(nr)},J=nr=>{V(nr),U?.onClick?.(nr)};return(0,i.jsx)("dialog",{...w,ref:n,"arc-modal":"","arc-scheme":h?"inverse":I,"is-confirm":g||"","is-inverse":h?"":void 0,"is-top-layer":u?"":void 0,"is-backdrop":f==="auto"?void 0:f,"data-size":"sm",closedby:"none",onKeyDown:B1("none"),children:(0,i.jsxs)(gi,{ref:k,children:[G&&(0,i.jsxs)(L0,{...R,children:[z&&(0,i.jsx)("div",{"header-slot":"start",children:z}),(0,i.jsx)("div",{"header-slot":"content",children:(0,i.jsx)(ql,{TitleElement:x,titleContent:_})}),P&&(0,i.jsx)("div",{"header-slot":"end",children:P})]}),(0,i.jsx)(Yl,{...a,children:r||v&&(0,i.jsx)("p",{style:{margin:0},children:v})}),(0,i.jsx)(Zl,{...L,children:(0,i.jsxs)(co,{children:[(0,i.jsx)(Br,{...T,text:T?.text||"Cancel",variant:"common",hierarchy:"secondary",isInverse:h,onClick:O}),(0,i.jsx)(Br,{...U,text:U?.text||"Discard",variant:g??"common",hierarchy:"primary",isInverse:h,onClick:J})]})})]})})};Cr("ArcModalConfirm",Jl);const Fe={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}},W1=({children:r,confirmProps:e,headerProps:a,bodyProps:t,dismissProps:o,footerProps:n,...c})=>{const l=(0,s.useRef)(null),[u,h]=(0,s.useState)(!1),{isOpen:p,autoFocusId:f,isTopLayer:g=Fe.isTopLayer,isInverse:v=Fe.isInverse,scheme:m=Fe.scheme,backdropColor:y=Fe.backdropColor,hasConfirmFlow:S=Fe.hasConfirmFlow,hasUnsavedChanges:k=Fe.hasUnsavedChanges,onCloseOverride:w=Fe.onCloseOverride,bypassConfirmWhen:z=Fe.bypassConfirmWhen??{},size:x=Fe.size,closeOnBackdrop:_=Fe.closeOnBackdrop,closeOnEsc:P=Fe.closeOnEsc,showDismiss:R=Fe.showDismiss,onActionError:U,onClose:T,onToggle:L,width:G,height:I,style:H,contentRef:V,...er}=c,{showGoBack:O,goBackProps:J,slotStart:nr,TitleElement:sr,titleContent:yr,slotEnd:q,showDivider:tr=Fe.headerProps?.showDivider,...Mr}=a??{},{slotStart:dr,primaryButton:br,secondaryButton:hr,tertiaryButton:pr,showDivider:vr=Fe.footerProps?.showDivider,...kr}=n??{},K=!!(O||yr||nr||q),or=!!(br||hr||pr),C=!!(or||dr),$=!!(S&&k),N=P?"closerequest":"none",ar=m==="auto"?void 0:m,{didPressEscapeKey:E,didClickBackdrop:F,didClickGoBackButton:Y,didClickDismissButton:cr,didClickPrimaryButton:ir,didClickSecondaryButton:wr,didClickTertiaryButton:Lr}=z,re=En({modalRef:l,shouldConfirm:$,setIsConfirming:h,onCloseOverride:w});Ul({modalRef:l,shouldConfirm:$,setIsConfirming:h,onClose:T,onToggle:L}),Kl({modalRef:l,isOpen:p,isTopLayer:g}),Wl({modalRef:l,isOpen:p,autoFocusId:f}),j0({modalRef:l,isOpen:p,closeOnBackdrop:_,attemptCloseModal:F?En({modalRef:l,shouldConfirm:$&&!F,setIsConfirming:h}):re}),M0({modalRef:l,isOpen:p,closeOnEsc:P,closedBy:N,attemptCloseModal:E?En({modalRef:l,shouldConfirm:$&&!E,setIsConfirming:h}):re});const He=()=>h(!1),Ie=(Re,Ve)=>re(Re)(Ve),ce=(Re,Ve,aa)=>async ie=>{ie?.preventDefault?.(),ie?.stopPropagation?.();const je=()=>Ve?En({modalRef:l,shouldConfirm:$&&!Ve,setIsConfirming:h})(Re,aa?.onCloseCallback)(ie):re(Re,aa?.onCloseCallback)(ie);try{await aa?.onClick?.(ie),je()}catch(ee){U?.(ee,{reason:Re,event:ie})}};return(0,i.jsxs)("dialog",{...er,ref:l,"arc-modal":"","arc-scheme":v?"inverse":ar,"is-inverse":v?"":void 0,"is-top-layer":g?"":void 0,"is-backdrop":y==="auto"?void 0:y,"data-size":x,closedby:N,style:{"--arc-modal-width":G??"","--arc-modal-height":I??"",...H},children:[!K&&R&&(0,i.jsx)("div",{"arc-modal-dismiss":"",children:(0,i.jsx)(Xl,{...o,isInverse:v,onClick:ce("button:dismiss",cr,o)})}),(0,i.jsxs)(gi,{ref:V,inert:u?"":void 0,children:[K&&(0,i.jsxs)(L0,{...Mr,showDivider:tr,children:[O&&(0,i.jsx)("div",{"header-slot":"go-back",children:(0,i.jsx)(L1,{...J,isInverse:v,onClick:ce("button:back",Y,J)})}),nr&&(0,i.jsx)("div",{"header-slot":"start",children:nr}),(0,i.jsx)("div",{"header-slot":"content",children:(0,i.jsx)(ql,{TitleElement:sr,titleContent:yr})}),q&&(0,i.jsx)("div",{"header-slot":"end",children:q}),R&&(0,i.jsx)("div",{"header-slot":"dismiss",children:(0,i.jsx)(Xl,{...o,isInverse:v,onClick:ce("button:dismiss",cr,o)})})]}),(0,i.jsx)(Yl,{...t,children:r}),C&&(0,i.jsxs)(Zl,{...kr,showDivider:vr,children:[dr&&(0,i.jsx)("div",{"footer-slot":"content",children:dr}),or&&(0,i.jsxs)(co,{children:[pr&&(0,i.jsx)(Br,{...pr,text:pr?.text||"Button",isInverse:v,variant:"common",hierarchy:"tertiary",onClick:ce("button:tertiary",Lr,pr)}
7335),hr&&(0,i.jsx)(Br,{...hr,text:hr?.text||"Cancel",isInverse:v,variant:"common",hierarchy:"secondary",onClick:ce("button:secondary",wr,hr)}),br&&(0,i.jsx)(Br,{...br,text:br?.text||"Action",isInverse:v,variant:"common",hierarchy:"primary",onClick:ce("button:primary",ir,br)})]})]})]}),S&&(0,i.jsx)(O0,{isOpen:u,isInverse:v,isTopLayer:g,backdropColor:y,...e,onConfirmDiscard:Ie,onConfirmCancel:He})]})};Cr("ArcModal",Jl);const qa={variant:"common",backdropColor:"auto",showDismiss:!0,closeOnBackdrop:!1,closeOnEsc:!0,onCloseOverride:void 0,isTopLayer:!0,isInverse:!1,scheme:"auto"},X1={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)(is,{"arc-modal-spinner":""})},q1=({children:r,dismissProps:e,bodyProps:a,footerProps:t,...o})=>{const n=(0,s.useRef)(null),{isOpen:c,autoFocusId:l,isTopLayer:u=qa.isTopLayer,isInverse:h=qa.isInverse,scheme:p=qa.scheme,backdropColor:f=qa.backdropColor,closeOnBackdrop:g=qa.closeOnBackdrop,closeOnEsc:v=qa.closeOnEsc,variant:m=qa.variant,icon:y,TitleElement:S,titleContent:k,message:w,showDismiss:z,onCloseOverride:x=qa.onCloseOverride,onClose:_,onToggle:P,contentRef:R,...U}=o,{primaryButton:T,...L}=t??{},G=y||X1[m],I=v?"closerequest":"none",H=p==="auto"?void 0:p,V=En({modalRef:n,onCloseOverride:x});return Ul({modalRef:n,onClose:_,onToggle:P}),Kl({modalRef:n,isOpen:c,isTopLayer:u}),Wl({modalRef:n,isOpen:c,autoFocusId:l}),j0({modalRef:n,isOpen:c,closeOnBackdrop:g,attemptCloseModal:V}),M0({modalRef:n,isOpen:c,closeOnEsc:v,closedBy:I,attemptCloseModal:V}),(0,i.jsxs)("dialog",{...U,ref:n,"arc-modal":"","arc-scheme":h?"inverse":H,"is-alert":m||"","is-inverse":h?"":void 0,"is-top-layer":u?"":void 0,"is-backdrop":f==="auto"?void 0:f,"data-size":"sm",closedby:I,children:[z&&(0,i.jsx)("div",{"arc-modal-dismiss":"",children:(0,i.jsx)(Xl,{...e,isInverse:h,onClick:V("button:dismiss",e?.onClick)})}),(0,i.jsxs)(gi,{ref:R,children:[(0,i.jsx)(Yl,{...a,children:r||(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(D1,{glyph:G,variant:m}),(0,i.jsx)(ql,{TitleElement:S,titleContent:k}),(0,i.jsx)(O1,{message:w})]})}),(0,i.jsx)(Zl,{...L,children:(0,i.jsx)(co,{orientation:"vertical",children:(0,i.jsx)(Br,{...T,text:T?.text||"Close",variant:"common",hierarchy:"primary",isInverse:h,onClick:V("button:primary",T?.onClick)})})})]})]})};Cr("ArcModalAlert",Jl);var B0=ta(68563),fe,Qr,Sa,Ya;function Y1(r=!1){if(typeof r!="boolean")throw new Error("defaultValue must be `true` or `false`");const[e,a]=fe(r),t=Qr(()=>{a(!0)},[]),o=Qr(()=>{a(!1)},[]),n=Qr(()=>{a(c=>!c)},[]);return{value:e,setValue:a,setTrue:t,setFalse:o,toggle:n}}var Ca=typeof window<"u"?s.useLayoutEffect:s.useEffect;function ua(r,e,a,t){const o=(0,s.useRef)(e);Ca(()=>{o.current=e},[e]),(0,s.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 gx(r){ua("click",e=>{r(e)})}function vx(){const[r,e]=fe(null),a=Qr(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 Z1(r){const[e,a]=fe(r??0),t=Qr(()=>{a(c=>c+1)},[]),o=Qr(()=>{a(c=>c-1)},[]),n=Qr(()=>{a(r??0)},[r]);return{count:e,increment:t,decrement:o,reset:n,setCount:a}}function J1(r,e){const a=Sa(r);Ca(()=>{a.current=r},[r]),Ya(()=>{if(e===null)return;const t=setInterval(()=>{a.current()},e);return()=>{clearInterval(t)}},[e])}function fx({countStart:r,countStop:e=0,intervalMs:a=1e3,isIncrement:t=!1}){const{count:o,increment:n,decrement:c,reset:l}=Z1(r),{value:u,setTrue:h,setFalse:p}=Y1(!1),f=Qr(()=>{p(),l()},[p,l]),g=Qr(()=>{if(o===e){p();return}t?n():c()},[o,e,c,n,t,p]);return J1(g,u?a:null),[o,{startCountdown:h,stopCountdown:p,resetCountdown:f}]}function mi(r){const e=(0,s.useRef)(()=>{throw new Error("Cannot call an event handler while rendering.")});return Ca(()=>{e.current=r},[r]),(0,s.useCallback)((...a)=>{var t;return(t=e.current)==null?void 0:t.call(e,...a)},[e])}var Ql=typeof window>"u";function rd(r,e,a={}){const{initializeWithValue:t=!0}=a,o=(0,s.useCallback)(g=>
7335a.serializer?a.serializer(g):JSON.stringify(g),[a]),n=(0,s.useCallback)(g=>{if(a.deserializer)return a.deserializer(g);if(g==="undefined")return;const v=e instanceof Function?e():e;let m;try{m=JSON.parse(g)}catch(y){return console.error("Error parsing JSON:",y),v}return m},[a,e]),c=(0,s.useCallback)(()=>{const g=e instanceof Function?e():e;if(Ql)return g;try{const v=window.localStorage.getItem(r);return v?n(v):g}catch(v){return console.warn(`Error reading localStorage key \u201C${r}\u201D:`,v),g}},[e,r,n]),[l,u]=(0,s.useState)(()=>t?c():e instanceof Function?e():e),h=mi(g=>{Ql&&console.warn(`Tried setting localStorage key \u201C${r}\u201D even though environment is not a client`);try{const v=g instanceof Function?g(c()):g;window.localStorage.setItem(r,o(v)),u(v),window.dispatchEvent(new StorageEvent("local-storage",{key:r}))}catch(v){console.warn(`Error setting localStorage key \u201C${r}\u201D:`,v)}}),p=mi(()=>{Ql&&console.warn(`Tried removing localStorage key \u201C${r}\u201D even though environment is not a client`);const g=e instanceof Function?e():e;window.localStorage.removeItem(r),u(g),window.dispatchEvent(new StorageEvent("local-storage",{key:r}))});(0,s.useEffect)(()=>{u(c())},[r]);const f=(0,s.useCallback)(g=>{g.key&&g.key!==r||u(c())},[r,c]);return ua("storage",f),ua("local-storage",f),[l,h,p]}var Q1=null;function N0(r,{defaultValue:e=!1,initializeWithValue:a=!0}={}){const t=l=>Q1?e:window.matchMedia(l).matches,[o,n]=fe(()=>a?t(r):e);function c(){n(t(r))}return Ca(()=>{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}var ry="(prefers-color-scheme: dark)",ey="usehooks-ts-dark-mode";function mx(r={}){const{defaultValue:e,localStorageKey:a=ey,initializeWithValue:t=!0}=r,o=N0(ry,{initializeWithValue:t,defaultValue:e}),[n,c]=rd(a,e??o??!1,{initializeWithValue:t});return Ca(()=>{o!==n&&c(o)},[o]),{isDarkMode:n,toggle:()=>{c(l=>!l)},enable:()=>{c(!0)},disable:()=>{c(!1)},set:l=>{c(l)}}}function F0(r){const e=(0,s.useRef)(r);e.current=r,(0,s.useEffect)(()=>()=>{e.current()},[])}function bi(r,e=500,a){const t=(0,s.useRef)();F0(()=>{t.current&&t.current.cancel()});const o=(0,s.useMemo)(()=>{const n=B0(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,s.useEffect)(()=>{t.current=B0(r,e,a)},[r,e,a]),o}function bx(r,e,a){const t=a?.equalityFn??((h,p)=>h===p),o=r instanceof Function?r():r,[n,c]=fe(o),l=Sa(o),u=bi(c,e,a);return t(l.current,o)||(u(o),l.current=o),[n,u]}function $x(r,e={}){const{preserveTitleOnUnmount:a=!0}=e,t=Sa(null);Ca(()=>{t.current=window.document.title},[]),Ca(()=>{window.document.title=r},[r]),F0(()=>{!a&&t.current&&(window.document.title=t.current)})}function yx(r){const[e,a]=fe(!1),t=()=>{a(!0)},o=()=>{a(!1)};return ua("mouseenter",t,r),ua("mouseleave",o,r),e}function xx({threshold:r=0,root:e=null,rootMargin:a="0%",freezeOnceVisible:t=!1,initialIsIntersecting:o=!1,onChange:n}={}){var c;const[l,u]=fe(null),[h,p]=fe(()=>({isIntersecting:o,entry:void 0})),f=Sa();f.current=n;const g=((c=h.entry)==null?void 0:c.isIntersecting)&&t;Ya(()=>{if(!l||!("IntersectionObserver"in window)||g)return;let y;const S=new IntersectionObserver(k=>{const w=Array.isArray(S.thresholds)?S.thresholds:[S.thresholds];k.forEach(z=>{const x=z.isIntersecting&&w.some(_=>z.intersectionRatio>=_);p({isIntersecting:x,entry:z}),f.current&&f.current(x,z),x&&t&&y&&(y(),y=void 0)})},{threshold:r,root:e,rootMargin:a});return S.observe(l),()=>{S.disconnect()}},[l,JSON.stringify(r),e,a,g,t]);const v=Sa(null);Ya(()=>{var y;!l&&((y=h.entry)!=null&&y.target)&&!t&&!g&&v.current!==h.entry.target&&(v.current=h.entry.target,p({isIntersecting:o,entry:void 0}))},[l,h.entry,t,g,o]);const m=[u,!!h.isIntersecting,h.entry];return m.ref=m[0],m.isIntersecting=m[1],m.entry=m[2],m}function kx(){const[r,e]=fe(!1);return Ya(()=>{e(!0)},[]),r}function ay(){const r=Sa(!1);return Ya(()=>(r.current=!0,()=>{r.current=!1}),[]),Qr(()=>r.current,[])}function wx(r=new Map){const[e,a]=fe(new Map(r)),t={set:Qr((o,n)=>{a(c=>{const l=new Map(c);return l.set(o,n),l})}
7335,[]),setAll:Qr(o=>{a(()=>new Map(o))},[]),remove:Qr(o=>{a(n=>{const c=new Map(n);return c.delete(o),c})},[]),reset:Qr(()=>{a(()=>new Map)},[])};return[e,t]}function Sx(r,e,a="mousedown",t={}){ua(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 H0=null;function Cx(r,e={}){let{initializeWithValue:a=!0}=e;H0&&(a=!1);const t=Qr(u=>{if(e.deserializer)return e.deserializer(u);if(u==="undefined")return;let h;try{h=JSON.parse(u)}catch(p){return console.error("Error parsing JSON:",p),null}return h},[e]),o=Qr(()=>{if(H0)return null;try{const u=window.localStorage.getItem(r);return u?t(u):null}catch(u){return console.warn(`Error reading localStorage key \u201C${r}\u201D:`,u),null}},[r,t]),[n,c]=fe(()=>{if(a)return o()});Ya(()=>{c(o())},[r]);const l=Qr(u=>{u.key&&u.key!==r||c(o())},[r,o]);return ua("storage",l),ua("local-storage",l),n}var V0=null;function Ax(r){const{ref:e,box:a="content-box"}=r,[{width:t,height:o},n]=fe(V0),c=ay(),l=Sa({...V0}),u=Sa(void 0);return u.current=r.onResize,Ya(()=>{if(!e.current||typeof window>"u"||!("ResizeObserver"in window))return;const h=new ResizeObserver(([p])=>{const f=a==="border-box"?"borderBoxSize":a==="device-pixel-content-box"?"devicePixelContentBoxSize":"contentBoxSize",g=G0(p,f,"inlineSize"),v=G0(p,f,"blockSize");if(l.current.width!==g||l.current.height!==v){const y={width:g,height:v};l.current.width=g,l.current.height=v,u.current?u.current(y):c()&&n(y)}});return h.observe(e.current,{box:a}),()=>{h.disconnect()}},[a,e,c]),{width:t,height:o}}function G0(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 U0=null;function zx(r={}){let{initializeWithValue:e=!0}=r;U0&&(e=!1);const a=()=>{if(!U0)return window.screen},[t,o]=fe(()=>{if(e)return a()}),n=bi(o,r.debounceDelay);function c(){const l=a(),u=r.debounceDelay?n:o;if(l){const{width:h,height:p,availHeight:f,availWidth:g,colorDepth:v,orientation:m,pixelDepth:y}=l;u({width:h,height:p,availHeight:f,availWidth:g,colorDepth:v,orientation:m,pixelDepth:y})}}return ua("resize",c),Ca(()=>{c()},[]),t}var $i=null;function ty(r){const e=document.querySelector(`script[src="${r}"]`),a=e?.getAttribute("data-status");return{node:e,status:a}}function Ex(r,e){const[a,t]=fe(()=>!r||e?.shouldPreventLoad?"idle":typeof window>"u"?"loading":$i.get(r)??"loading");return Ya(()=>{if(!r||e?.shouldPreventLoad)return;const o=$i.get(r);if(o==="ready"||o==="error"){t(o);return}const n=ty(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 u=h=>{const p=h.type==="load"?"ready":"error";c?.setAttribute("data-status",p)};c.addEventListener("load",u),c.addEventListener("error",u)}const l=u=>{const h=u.type==="load"?"ready":"error";t(h),$i.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(),$i.delete(r))}},[r,e?.shouldPreventLoad,e?.removeOnUnmount,e?.id]),a}var oy=null;function _x(r={}){const{autoLock:e=!0,lockTarget:a,widthReflow:t=!0}=r,[o,n]=fe(!1),c=Sa(null),l=Sa(null),u=()=>{if(c.current){const{overflow:p,paddingRight:f}=c.current.style;if(l.current={overflow:p,paddingRight:f},t){const g=c.current===document.body?window.innerWidth:c.current.offsetWidth,v=parseInt(window.getComputedStyle(c.current).paddingRight,10)||0,m=g-c.current.scrollWidth;c.current.style.paddingRight=`${m+v}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 Ca(()=>{if(!oy)return a&&(c.current=typeof a=="string"?document.querySelector(a):a),c.current||(c.current=document.body),e&&u(),()=>{h()}},[e,a,t]),{isLocked:o,lock:u,unlock:h}}var ed=typeof window>"u";function ny(r,e,a={}){const{initializeWithValue:t=!0}=a,o=(0,s.useCallback)(g=>
7335a.serializer?a.serializer(g):JSON.stringify(g),[a]),n=(0,s.useCallback)(g=>{if(a.deserializer)return a.deserializer(g);if(g==="undefined")return;const v=e instanceof Function?e():e;let m;try{m=JSON.parse(g)}catch(y){return console.error("Error parsing JSON:",y),v}return m},[a,e]),c=(0,s.useCallback)(()=>{const g=e instanceof Function?e():e;if(ed)return g;try{const v=window.sessionStorage.getItem(r);return v?n(v):g}catch(v){return console.warn(`Error reading sessionStorage key \u201C${r}\u201D:`,v),g}},[e,r,n]),[l,u]=(0,s.useState)(()=>t?c():e instanceof Function?e():e),h=mi(g=>{ed&&console.warn(`Tried setting sessionStorage key \u201C${r}\u201D even though environment is not a client`);try{const v=g instanceof Function?g(c()):g;window.sessionStorage.setItem(r,o(v)),u(v),window.dispatchEvent(new StorageEvent("session-storage",{key:r}))}catch(v){console.warn(`Error setting sessionStorage key \u201C${r}\u201D:`,v)}}),p=mi(()=>{ed&&console.warn(`Tried removing sessionStorage key \u201C${r}\u201D even though environment is not a client`);const g=e instanceof Function?e():e;window.sessionStorage.removeItem(r),u(g),window.dispatchEvent(new StorageEvent("session-storage",{key:r}))});(0,s.useEffect)(()=>{u(c())},[r]);const f=(0,s.useCallback)(g=>{g.key&&g.key!==r||u(c())},[r,c]);return ua("storage",f),ua("session-storage",f),[l,h,p]}function Px(r){const[e,a]=fe(1),t=e+1<=r,o=e-1>0,n=Qr(h=>{const p=h instanceof Function?h(e):h;if(p>=1&&p<=r){a(p);return}throw new Error("Step not valid")},[r,e]),c=Qr(()=>{t&&a(h=>h+1)},[t]),l=Qr(()=>{o&&a(h=>h-1)},[o]),u=Qr(()=>{a(1)},[]);return[e,{goToNextStep:c,goToPrevStep:l,canGoToNextStep:t,canGoToPrevStep:o,setStep:n,reset:u}]}var cy="(prefers-color-scheme: dark)",iy="usehooks-ts-ternary-dark-mode";function Tx({defaultValue:r="system",localStorageKey:e=iy,initializeWithValue:a=!0}={}){const t=N0(cy,{initializeWithValue:a}),[o,n]=rd(e,r,{initializeWithValue:a});return{isDarkMode:o==="dark"||o==="system"&&t,ternaryDarkMode:o,setTernaryDarkMode:n,toggleTernaryDarkMode:()=>{const u=["light","system","dark"];n(h=>{const p=(u.indexOf(h)+1)%u.length;return u[p]})}}}function Ix(r,e){const a=Sa(r);Ca(()=>{a.current=r},[r]),Ya(()=>{if(!e&&e!==0)return;const t=setTimeout(()=>{a.current()},e);return()=>{clearTimeout(t)}},[e])}function Rx(r){const[e,a]=fe(!!r),t=Qr(()=>{a(o=>!o)},[]);return[e,t,a]}var sy=null;function jx(r={}){let{initializeWithValue:e=!0}=r;sy&&(e=!1);const[a,t]=fe(()=>e?{width:window.innerWidth,height:window.innerHeight}:{width:void 0,height:void 0}),o=bi(t,r.debounceDelay);function n(){(r.debounceDelay?o:t)({width:window.innerWidth,height:window.innerHeight})}return ua("resize",n),Ca(()=>{n()},[]),a}const ly=(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}))},dy=({defaultValue:r="",value:e,debounceMs:a,inputElementRef:t,onClear:o,onKeyDown:n,onSearch:c})=>
7335{const l=e!==void 0,u=c!==void 0&&a!==void 0,[h,p]=(0,s.useState)(r),f=l?e??"":h,g=(0,s.useRef)(!1),v=bi(w=>{c?.(w)},a??0),m=(0,s.useCallback)(()=>{v.cancel()},[v]),y=(0,s.useCallback)(w=>{l||p(w)},[l]);(0,s.useEffect)(()=>m,[m]),(0,s.useEffect)(()=>{if(u){if(!g.current){g.current=!0;return}m(),v(f)}},[m,v,f,u]);const S=(0,s.useCallback)(()=>{m();const w=t.current;if(w){ly(w,""),o?.(),w.focus();return}l||p(""),o?.()},[m,t,l,o]),k=(0,s.useCallback)(w=>{n?.(w),!(w.defaultPrevented||w.key!=="Enter"||!c)&&(m(),c(f))},[m,n,c,f]);return{resolvedValue:f,handleValueChange:y,handleClear:S,handleKeyDown:k}},uy=ii,hy=si,py=fr(kl,["outline","solid"]),K0="Search",gy="Clear search",ad={layout:"hug",size:"inherit",variant:"outline"},vy=({canClear:r,isDisabled:e,onClear:a})=>{if(r)return(0,i.jsx)(T0,{"aria-label":gy,disabled:e,icon:"fa-regular fa-xmark",onClick:a})},fy=({ariaLabel:r,ariaLabelledBy:e,headerLabel:a})=>r??(!a&&!e?K0:void 0),W0=(0,s.forwardRef)(({debounceMs:r,inputProps:e,layout:a=ad.layout,onClear:t,onSearch:o,size:n=ad.size,variant:c=ad.variant,headerLabel:l,headerSlot:u,footerCaption:h,footerSlot:p,onChange:f,...g},v)=>{const{id:m,value:y,defaultValue:S="",onChange:k,onKeyDown:w,placeholder:z=K0,disabled:x,readOnly:_,required:P,"aria-label":R,"aria-labelledby":U,...T}=e,L=Or(m,"arc-search"),G=(0,s.useRef)(null),{resolvedValue:I,handleValueChange:H,handleClear:V,handleKeyDown:er}=dy({defaultValue:S,value:y,debounceMs:r,inputElementRef:G,onClear:t,onKeyDown:w,onSearch:o}),O=!x&&!_&&I.length>0,J=fy({ariaLabel:R,ariaLabelledBy:U,headerLabel:l}),nr=vy({canClear:O,isDisabled:x,onClear:V}),sr=q=>{G.current=q,oa(v,q)},yr=(q,tr)=>{H(tr.target.value),k?.(q,tr)};return(0,i.jsx)(uo,{...g,"arc-search":"",layout:a,size:n,variant:c,ref:sr,onChange:f,headerLabel:l,headerSlot:u,inputPrefix:(0,i.jsx)(Ar,{icon:"fa-regular fa-search"}),inputAction:nr,footerCaption:h,footerSlot:p,inputProps:{...T,id:L,value:I,disabled:x,placeholder:z,readOnly:_,required:P,onChange:yr,onKeyDown:er,"aria-disabled":x||void 0,"aria-label":J,"aria-labelledby":U,"aria-readonly":_||void 0,"aria-required":P||void 0}})});W0.displayName="ArcSearch";const my=ii,by=si,$y=fr(Ur,["outline","solid","plain"]),X0=()=>typeof globalThis?.CSS?.supports=="function"&&globalThis.CSS.supports("appearance","base-select"),yi=r=>Array.isArray(r.options),mo=r=>{const e=r?.variant;return e!=="divider"&&e!=="section-label"},q0=r=>r?.variant==="section-label"&&!!(r.text||r.icon),Y0=r=>{},Z0=(r=[])=>r.flatMap(e=>yi(e)?e.options:[e]).some(e=>mo(e)&&e.value===""),J0=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"},Tn=d`--arcâ¢select`,Ye=d`${Tn}â¢picker`,Q0=d`${Ye}â¢fg`,rp=d`${Ye}â¢bg`,td=d`${Tn}â¢option`,In=d`${td}â¢fg`,Rn=d`${td}â¢bg`,It=d`${td}â¢icon`,yy=d` 7336 ${Q0}: currentcolor; 7337 ${rp}: var(--arc-color-bg-mono); 7338 ${Tn}â¢placeholderâ¢fg: var(--arc-select-placeholder-color, var(--arc-color-fg-secondary)); 7339 7340 ${Ye}â¢width: auto; 7341 ${Ye}â¢minâ¢width: 3em; 7342 ${Ye}â¢borderâ¢radius: var(--arc-border-radius-lg); 7343 ${Ye}â¢shadow: var(--arc-shadow-lg); 7344 7345 ${In}: currentcolor; 7346 ${Rn}: transparent; 7347 7348 ${It}â¢display: none; 7349 ${It}â¢color: var(${In}); 7350`,xy=d` 7351 &[data-layout=fill] { 7352 ${Ye}â¢width: 100%; /* fallback */ 7353 ${Ye}â¢width: anchor-size(inline); 7354 } 7355`,ky=d` 7356 [arc-select] ::picker(select) { 7357 transition-behavior: allow-discrete, smooth; 7358 transition-duration: var(--arc-select-transition-duration, 240ms); 7359 transition-property: display, opacity; 7360 transition-timing-function: ease-out; 7361 } 7362 7363 @supports (overlay: auto) { 7364 [arc-select] ::picker(select) { 7365 transition-behavior: allow-discrete; 7366 transition-property: display, overlay, opacity; 7367 } 7368 } 7369`,wy=d` 7370 [arc-select] { 7371 ::picker(select) { 7372 opacity: 0; 7373 } 7374 7375 ::picker(select):popover-open { 7376 opacity: 1; 7377 } 7378 } 7379 7380 @starting-style { 7381 [arc-select] ::picker(select):popover-open { 7382 opacity: 0; 7383 } 7384 } 7385`,Sy=d` 7386@layer arc-components { 7387 7388 /* SETUP ---------------------------------------------------------⢠*/ 7389 7390 [arc-select] { 7391 ${yy} 7392 ${xy} 7393 } 7394 7395 /* CORE ----------------------------------------------------------⢠*/ 7396 7397 [arc-select] { 7398 select, 7399 ::picker(select) { 7400 appearance: base-select; 7401 } 7402 7403 ::picker(select) { 7404 flex: 1; 7405 display: var(${Ye}â¢display, none); 7406 flex-direction: column; 7407 gap: var(${M}â¢4); 7408 border: none; 7409 color: var(${Q0}); 7410 width: var(--arc-select-picker-width, var(${Ye}â¢width)); 7411 min-width: var(--arc-select-picker-min-width, var(${Ye}â¢minâ¢width)); 7412 margin: var(--arc-select-picker-margin, var(${M}â¢4) 0);
7413 padding: var(--arc-select-picker-padding, var(${M}â¢4)); 7414 background: var(--arc-select-picker-background, var(${rp})); 7415 border-radius: var(--arc-select-picker-border-radius, var(${Ye}â¢borderâ¢radius)); 7416 box-shadow: var(--arc-select-picker-shadow, var(${Ye}â¢shadow)); 7417 } 7418 7419 ::picker(select):popover-open { 7420 ${Ye}â¢display: flex; 7421 } 7422 7423 /* Hide default picker icon */ 7424 ::picker-icon { 7425 display: none; 7426 } 7427 7428 select { 7429 cursor: inherit; 7430 flex: 1; 7431 align-items: center; 7432 font: inherit; 7433 color: inherit; 7434 background: transparent; 7435 border: none; 7436 padding: 0; 7437 margin: 0; 7438 outline: none; 7439 padding-inline: var(${b}â¢12); 7440 max-width: var(--arc-select-max-width, var(--jsâ¢maxâ¢width, none)); 7441 } 7442 7443 [arc-select-button] { 7444 display: flex; 7445 align-items: center; 7446 gap: var(${M}â¢8); 7447 width: 100%; 7448 } 7449 7450 [arc-select-placeholder] { 7451 flex: 1; 7452 color: var(${Tn}â¢placeholderâ¢fg); 7453 } 7454 7455 selectedcontent { 7456 /* Inter-Component Communication -----------------------------⢠*/ 7457 --arc-icon-text-font-weight: normal; 7458 --arc-icon-text-subtext-display: none; 7459 --arc-avatar-text-font-weight: normal; 7460 --arc-avatar-subtext-display: none; 7461 --arc-avatar-size: var(${b}â¢24); 7462 --arc-avatar-initial-font-size: var(${b}â¢12); 7463 7464 flex: 1; 7465 display: flex; 7466 align-items: center; 7467 width: 100%; 7468 min-width: 0; 7469 7470 [arc-select-icon=selected] { 7471 display: none; 7472 } 7473 } 7474 7475 /* Hide the cloned <selectedcontent> when the placeholder span drives the trigger. */ 7476 select[data-placeholder] selectedcontent { 7477 display: none; 7478 } 7479 7480 [arc-select-option-group-legend] { 7481 font-size: var(${b}â¢12); 7482 font-weight: var(--arc-font-weight-600); 7483 color: var(--arc-select-legend-color, var(--arc-color-fg-secondary)); 7484 padding: var(--arc-select-legend-padding, var(${M}â¢8)); 7485 cursor: default; 7486 } 7487 7488 /* Separator above each legend after the first optgroup. */ 7489 optgroup ~ optgroup [arc-select-option-group-legend] { 7490 border-top: var(${b}â¢1) solid var(--arc-color-border-mid); 7491 margin-top: var(${M}â¢4); 7492 } 7493 7494 [arc-select-option] { 7495 flex: none; 7496 display: grid; 7497 grid-template-columns: 1fr auto; 7498 align-items: center; 7499 gap: var(${M}â¢8); 7500 width: 100%; 7501 min-width: 0; 7502 color: var(${In}); 7503 background: var(--arc-select-option-background, var(${Rn})); 7504 border-radius: var(--arc-select-option-border-radius, var(--arc-border-radius-md)); 7505 padding: var(--arc-select-option-padding, var(${M}â¢8)); 7506 7507 &::checkmark { 7508 display: none; 7509 } 7510 7511 &:disabled { 7512 ${In}: var(--arc-color-fg-disabled); 7513 ${Rn}: transparent; 7514 ${It}â¢display: none; 7515 cursor: var(--arc-select-disabled-cursor, not-allowed); 7516 } 7517 7518 &:not(:disabled):hover { 7519 ${Rn}: var(--arc-color-bg-hover-default); 7520 } 7521 7522 &:not(:disabled):checked { 7523 ${Rn}: var(--arc-color-bg-selected-default); 7524 ${It}â¢display: flex; 7525 ${It}â¢color: var(--arc-select-option-selected-icon-color, var(${In})); 7526 } 7527 7528 [arc-select-icon=selected] { 7529 display: var(${It}â¢display, none); 7530 color: var(${It}â¢color, currentcolor); 7531 } 7532 } 7533 7534 @supports not (appearance: base-select) { 7535 select { 7536 appearance: none; 7537 background: transparent; 7538 outline: none; 7539 7540 /* caret */ 7541 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>"); 7542 background-repeat: no-repeat; 7543 background-size: 0.75em; 7544 background-origin: padding-box; 7545 background-position: calc(100% - 1em) center; 7546 padding-inline-end: 3em; 7547 } 7548 7549 select[data-placeholder] { 7550 color: var(${Tn}â¢placeholderâ¢fg); 7551 } 7552 } 7553 } 7554 7555 ${ky} 7556 ${wy} 7557 7558} 7559`,Cy=(0,s.forwardRef)(({layout:r="hug",size:e="inherit",variant:a="outline",tag:t="span",items:o,placeholder:n,renderItem:c,headerLabel:l,headerSlot:u,footerCaption:h,footerSlot:p,id:f,value:g,defaultValue:v,required:m,disabled:y,readOnly:S,maxWidth:k,inputProps:w,...z},x)=>{const{name:_,onBlur:P,onChange:R,onFocus:U,onInput:T,"aria-describedby":L,"aria-label":G,"aria-labelledby":I,...H}=z,V=Or(f,"arc-select"),er=a==="plain"&&r==="fill"?"hug":r,O=y||void 0,J=S||void 0,nr=m||void 0,sr=X0(),yr=a!=="plain"&&!!(l||u),q=a!=="plain"&&!!(h||p),tr=typeof n=="string"&&n.length>0&&!Z0(o),Mr=v??(tr?"":void 0),dr=g??Mr,br=tr&&dr==="",hr=sr&&tr&&dr==="",pr=J&&dr!=null?String(dr):void 0,vr=o.flatMap($=>yi($)?$.options.filter(mo):mo($)?[$]:(Y0($),[])),kr=new Map(vr.map(($,N)=>[$,N])),K=$=>{const{itemId:N,...ar}=$,E=C0(wn($));return(0,i.jsx)(E,{...ar})},or=$=>{const N=kr.get($)??0,ar=$["aria-disabled"]===!0||$.disabled===!0,E=typeof $.itemId=="string"&&$.itemId.length>0?$.itemId:N,F=String($?.value??$?.itemId??N);return(0,i.jsx)("option",{value:F,disabled:ar||pr!==void 0&&F!==pr||void 0,"arc-select-option":"",children:sr?(0,i.jsxs)(i.Fragment,{children:[c?c($,N):K($),(0,i.jsx)("span",{"arc-select-icon":"selected","aria-hidden":!0,
7559children:(0,i.jsx)(Ar,{icon:"fa-regular fa-check arc-fw"})})]}):J0($)},E)},C=($,N)=>{const ar=$.options.filter(mo);if(ar.length===0)return null;const E=$.options.find(q0);return(0,i.jsxs)("optgroup",{label:$.label,disabled:$.disabled||void 0,children:[sr&&E&&(0,i.jsx)("legend",{"arc-select-option-group-legend":"",children:K(E)}),ar.map(or)]},$.itemId??`${$.label}-${N}`)};return(0,i.jsxs)(t,{...H,"arc-select":"","arc-input":"select","data-layout":er,"data-size":e,"data-variant":a,children:[yr&&(0,i.jsxs)(Pr.Header,{children:[(0,i.jsx)(Pr.HeaderLabel,{htmlFor:V,children:l}),!!u&&(0,i.jsx)(Pr.Spacer,{}),(0,i.jsx)(Pr.HeaderSlot,{children:u})]}),(0,i.jsx)(Pr.InputBody,{children:(0,i.jsxs)("select",{...w,name:w?.name??_,onBlur:w?.onBlur??P,onChange:w?.onChange??R,onFocus:w?.onFocus??U,onInput:w?.onInput??T,"aria-describedby":w?.["aria-describedby"]??L,"aria-label":w?.["aria-label"]??G,"aria-labelledby":w?.["aria-labelledby"]??I,value:g,defaultValue:g==null?Mr:void 0,required:m,disabled:y,ref:x,id:V,"aria-disabled":O,"aria-required":nr,"data-readonly":J,"data-placeholder":br||void 0,style:{...k?{"--js\u2022max\u2022width":k}:{},...w?.style},children:[(0,i.jsxs)("button",{"arc-select-button":"",children:[hr&&(0,i.jsx)(ue,{"arc-select-placeholder":"",text:n,overflow:"truncate"}),(0,i.jsx)("selectedcontent",{}),(0,i.jsx)("span",{"aria-hidden":!0,children:(0,i.jsx)(Ar,{icon:"fa-regular fa-angle-down arc-fw"})})]}),tr&&(0,i.jsx)("option",{value:"",disabled:!0,hidden:!0,children:n}),o.map(($,N)=>yi($)?C($,N):mo($)?or($):null)]})}),q&&(0,i.jsxs)(Pr.Footer,{children:[(0,i.jsx)(Pr.FooterCaption,{children:h}),!!p&&(0,i.jsx)(Pr.Spacer,{}),(0,i.jsx)(Pr.FooterSlot,{children:p})]})]})});Cr("ArcSelect",Sy);const Ay=fr(ze,["inherit","md","sm"]),me={On:"on",Off:"off"},bo={Before:"before",After:"after"},zy=({disabled:r,id:e,name:a,size:t="md",value:o,labelOff:n,labelOn:c,onChange:l,...u})=>{const h=Or(a,"arc-switch-name"),p=Or(e?`${e}-off`:void 0,"arc-switch-off"),f=Or(e?`${e}-on`:void 0,"arc-switch-on"),g=w=>{if(w.code==="Space"){w.preventDefault(),w.stopPropagation();const z=o===me.On?me.Off:me.On;l?.({value:z},w)}},v=w=>{const z={on:Io(c),off:Io(n)};return z?.on&&z?.off?z[w]:!z?.on&&z?.off?`${z?.off}: ${w}`:z?.on&&!z?.off?`${z?.on}: ${w}`:z[w]},m=(0,i.jsxs)(Pc,{type:"switch",onKeyDown:g,children:[(0,i.jsx)(Jo,{type:"switch",name:h,id:p,value:me.Off,checked:o===me.Off,disabled:r,"aria-label":v(me.Off)?.trim(),onChange:l}),(0,i.jsx)(Jo,{type:"switch",name:h,id:f,value:me.On,checked:o===me.On,disabled:r,"aria-label":v(me.On)?.trim(),onChange:l}),(0,i.jsx)("span",{"data-element":"mask"})]}),y=!c&&o===me.Off?f:p,S=!n&&o===me.On?p:f,k=!!(c||n)&&(0,i.jsxs)(i.Fragment,{children:[!!n&&(0,i.jsx)(wt,{htmlFor:y,"arc-switch-label":c?me.Off:"",children:(0,i.jsx)(St,{children:n})}),m,!!c&&(0,i.jsx)(wt,{htmlFor:S,"arc-switch-label":n?me.On:"",children:(0,i.jsx)(St,{children:c})})]});return(0,i.jsx)("span",{...u,"arc-switch":"","data-state":o,"data-size":t,role:"radiogroup",children:k||m})},se=d`--arcâ¢switch`,Hr=d`${se}â¢knob`,Ey=d` 7560@layer arc-components { 7561 7562 [arc-switch] { 7563 ${se}â¢background: var(--arc-color-alpha-white-100); 7564 ${Hr}â¢shadow: var(--arc-shadow-md); 7565 7566 &:has(:disabled) { 7567 ${se}â¢background: var(--arc-color-alpha-white-70); 7568 ${Hr}â¢shadow: var(--arc-shadow-none); 7569 7570 [arc-switch-label] { 7571 --arc-label-cursor: not-allowed; 7572 --arc-label-opacity: var(--arc-alpha-60); 7573 } 7574 } 7575 7576 /* Uses Neutral-ish Colors */ 7577 &[data-state=off] { 7578 ${W}â¢background: var(--arc-color-bg-neutral-subtle); 7579 ${W}â¢borderâ¢color: var(--arc-color-border-stark); 7580 ${Hr}â¢borderâ¢color: var(--arc-color-border-on-stark); 7581 ${Hr}â¢color: var(--arc-color-fg-on-heavy); 7582 7583 &:not(:has(:disabled)):hover { 7584 ${W}â¢borderâ¢color: var(--arc-color-border-heavy); 7585 ${Hr}â¢borderâ¢color: var(--arc-color-border-heavy); 7586 } 7587 7588 &:has(:disabled) { 7589 ${W}â¢background: var(--arc-color-bg-disabled); 7590 ${W}â¢borderâ¢color: var(--arc-color-border-disabled); 7591 ${Hr}â¢borderâ¢color: var(--arc-color-border-on-stark); 7592 ${Hr}â¢color: var(--arc-color-bg-tertiary); 7593 } 7594 } 7595 7596 /* Uses Theme Colors */ 7597 &[data-state=on] { 7598 ${W}â¢background: var(--arc-color-bg-theme-heavy); 7599 ${W}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 7600 ${Hr}â¢borderâ¢color: var(--arc-color-border-theme-heavy); 7601 ${Hr}â¢color: var(--arc-color-fg-on-theme-heavy); 7602 7603 &:not(:has(:disabled)):hover { 7604 ${W}â¢opacity: var(--arc-alpha-60); 7605 } 7606 7607 &:has(:disabled) { 7608 ${W}â¢opacity: var(--arc-alpha-30); 7609 } 7610 } 7611 7612 /* SIZES ------------------------------------------------------⢠*/ 7613 &[data-size=inherit] { 7614 ${se}â¢fontâ¢size: 1em; 7615 ${se}â¢width: 2.5em; 7616 ${se}â¢height: 1.5em; 7617 ${se}â¢gap: 0.5em; 7618 ${Hr}â¢size: 1.5em; 7619 ${Hr}â¢xâ¢shift: 0.25em; 7620 } 7621 7622 &[data-size=md] { /* @default */ 7623 ${se}â¢fontâ¢size: var(${b}â¢14); 7624 ${se}â¢width: var(${b}â¢40); 7625 ${se}â¢height: var(${b}â¢24); 7626 ${se}â¢gap: var(${b}â¢8); 7627 ${Hr}â¢xâ¢shift: var(${b}â¢4); 7628 ${Hr}â¢size: var(${b}â¢24); 7629 } 7630 7631 &[data-size=sm] { 7632 ${se}â¢fontâ¢size: var(${b}â¢12); 7633 ${se}â¢width: var(${b}â¢30); 7634 ${se}â¢height: var(${b}â¢14); 7635 ${se}â¢gap: var(${b}â¢8); 7636 ${Hr}â¢xâ¢shift: var(${b}â¢1); 7637 ${Hr}â¢size: var(${b}â¢16); 7638 } 7639 7640 /* Inter-Component Communication -------------------------------⢠*/ 7641 /* for: Setup defaults for ArcBooleanInputMask */ 7642 ${W}â¢borderâ¢radius: var(--arc-border-radius-pill); 7643 ${W}â¢width: var(${se}â¢width); 7644 ${W}â¢height: var(${se}â¢height); 7645 ${W}â¢xâ¢shift: var(${Hr}â¢xâ¢shift); 7646 ${W}â¢size: var(${Hr}â¢size); 7647 7648 /* for: ArcLabel */ 7649 --arc-label-align-items: stretch; /* ArcLabel ⢠this allows the mask to 7650 stay inline with the label text 7651 regardless of applied line-height */ 7652 7653 /* KNOB PLACEMENT ----------------------------------------------⢠*/ 7654 &[data-state=off] { 7655 ${Hr}â¢translate: calc(-100% + var(${Hr}â¢xâ¢shift)) -50%; 7656 } 7657 7658 &[data-state=on] { 7659 ${Hr}â¢translate: calc(0% - var(${Hr}â¢xâ¢shift)) -50%; 7660 } 7661 } 7662 7663 /* CORE STYLES ---------------------------------------------------⢠*/ 7664 [arc-switch]:not([hidden]) { 7665 font-size: var(--arc-switch-font-size, var(${se}â¢fontâ¢size)); 7666 display: var(--arc-switch-display, inline-flex); 7667 align-items: var(--arc-switch-align-items, center); 7668 gap: var(--arc-switch-gap, var(${se}â¢gap)); 7669 user-select: none; 7670 7671 [arc-switch-label] { 7672 font-size: inherit; 7673 hyphens: auto; 7674 } 7675
7676 [arc-input-type=switch]:where(:not(:checked)) { 7677 ${W}â¢zâ¢index: 1; 7678 } 7679 7680 [arc-input-mask-wrapper] { 7681 height: 1.25em; 7682 } 7683 7684 /* the knob */ 7685 [data-element=mask] { 7686 position: absolute; 7687 top: 50%; 7688 left: 50%; 7689 translate: var(${Hr}â¢translate); 7690 7691 display: inline-flex; 7692 width: var(${Hr}â¢size); 7693 height: var(${Hr}â¢size); 7694 7695 transition-duration: 100ms; 7696 transition-behavior: allow-discrete; 7697 transition-timing-function: ease-in-out; 7698 transition-property: 7699 opacity, 7700 background, 7701 color, 7702 border-color, 7703 outline, 7704 translate; 7705 7706 background: var(${Hr}â¢color); 7707 box-shadow: var(${Hr}â¢shadow); 7708 border: var(${W}â¢borderâ¢width) solid var(${Hr}â¢borderâ¢color); 7709 border-radius: var(--arc-border-radius-circle); 7710 pointer-events: none; 7711 } 7712 } 7713 7714} 7715`,_y=({disabled:r,id:e,name:a,size:t="md",value:o,label:n,labelPosition:c=bo.After,onChange:l,labelOff:u,labelOn:h,...p})=>{const f=Or(a,"arc-switch-name"),g=Or(e,"arc-switch"),v=(S,k)=>{const w=S.checked?me.On:me.Off;l?.({...S,value:w},k)};!n&&(h||u)&&(n=h||u,c=h?bo.After:bo.Before);const m=(0,i.jsxs)(Pc,{type:"checkbox",children:[(0,i.jsx)(Jo,{type:"checkbox",name:f,id:g,checked:o===me.On,disabled:r,role:"switch","aria-checked":o===me.On,"aria-label":n?void 0:"Toggle switch",tabIndex:0,onChange:v}),(0,i.jsx)("span",{"data-element":"mask","aria-hidden":"true",tabIndex:-1})]}),y=(0,i.jsx)(wt,{htmlFor:g,"arc-switch-label":c,children:(0,i.jsx)(St,{children:n})});return u&&h?(0,i.jsx)(zy,{...p,disabled:r,id:e,name:a,labelOff:u,labelOn:h,size:t,value:o,onChange:l}):(0,i.jsxs)("span",{...p,"arc-switch":"","data-state":o,"data-size":t,"data-label-position":c,role:"presentation","aria-live":"off",children:[n&&c===bo.Before&&y,m,n&&c===bo.After&&y]})};Cr("ArcSwitch",Ey);const Py=["title","heading","subheading","body"],ep=["h1","h2","h3","h4","h5","h6"],ap=["code","div","li","p","pre","span"],tp=[...ep,...ap],Ty=[...Da],Iy=["title-inherit","title-lg","title-md","title-sm"],Ry=["heading-inherit","heading-lg","heading-md","heading-sm"],jy=["subheading-inherit","subheading-lg","subheading-md","subheading-sm"],My=fr(Ur,["inherit","primary","primary-inverse"]),Ly=["body-inherit","body-lg","body-md","body-sm","body-xs"],Dy=$e(Ur,["inherit","primary","secondary","primary-inverse","secondary-inverse","critical","warning","success","info"]),Oy=fr(Vn,["inherit","start","center","justify","end"]),By=fr(Gn,["inherit","loose","standard","tight"]),Ny={h1:"title",h2:"heading",h3:"heading",h4:"subheading",h5:"subheading",h6:"subheading",p:"body",span:"body",div:"body",code:"body",pre:"body",li:"body"},Fy=r=>{const{align:e,lineHeight:a,size:t,variant:o,scheme:n="auto",isMonospace:c,tag:l,...u}=r,h=Ny?.[l]??"body",p=t?.includes("inherit")?t?.split("-")?.[0]:t,f=o?.endsWith("-inverse");let g;return n!=="auto"?g=n:f&&(g=void 0),{...u,"arc-text":p||h,"arc-scheme":g,"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}},Za=d`--arcâ¢text`,od=d`${Za}â¢font`,$o=d`${Za}â¢align`,Ra=d`${Za}fg`,op=d`${Za}â¢flex`,np=d`${Za}â¢hyphens`,jn=d`${Za}â¢letterspacing`,ja=d`${Za}â¢lineheight`,cp=d`${Za}â¢opacity`,ip=d`${Za}â¢whitespace`,Rt=d`${od}â¢family`,ne=d`${od}â¢size`,yo=d`${od}â¢weight`,Hy=d` 7716@layer arc-components { 7717 7718[arc-text] { 7719 /* SETUP ---------------------------------------------------------⢠*/ 7720 ${$o}: unset; 7721 ${Ra}: unset; 7722 ${op}: unset; 7723 ${np}: auto; 7724 ${jn}: unset; 7725 ${ja}: unset; 7726 ${cp}: unset; 7727 ${ip}: unset; 7728 7729 ${Rt}: unset; 7730 ${ne}: unset; 7731 ${yo}: unset; 7732 7733 /* LINE HEIGHT ---------------------------------------------------⢠*/ 7734 7735 &[data-line-height=standard] { 7736 ${ja}: var(--arc-line-height-standard); 7737 } 7738 7739 &[data-line-height=loose] { 7740 ${ja}: var(--arc-line-height-loose); 7741 } 7742 7743 &[data-line-height=tight] { 7744 ${ja}: var(--arc-line-height-tight); 7745 } 7746 7747 /* ALIGNMENT -----------------------------------------------------⢠*/ 7748 7749 &[data-align=start] { 7750 ${$o}: start; 7751 } 7752 7753 &[data-align=center] { 7754 ${$o}: center; 7755 } 7756 7757 &[data-align=justify] { 7758 ${$o}: justify; 7759 } 7760 7761 &[data-align=end] { 7762 ${$o}: end; 7763 } 7764 7765 /* VARIANTS ------------------------------------------------------⢠*/ 7766 7767 &[data-variant=primary] { 7768 ${Ra}: var(--arc-color-fg-primary); 7769 } 7770 7771 /* @deprecated */ 7772 &[data-variant=primary-inverse] { 7773 ${Ra}: var(--arc-color-fg-on-mono-inverse); 7774 } 7775 7776 &[data-variant=secondary] { 7777 ${Ra}: var(--arc-color-fg-secondary); 7778 } 7779 7780 /* @deprecated - 61.2% is the opacity equivalent of the secondary-text color token's gray value. */ 7781 &[data-variant=secondary-inverse] { 7782 ${Ra}: color-mix(in srgb, var(--arc-color-fg-on-mono-inverse) 61.2%, transparent); 7783 } 7784 7785 &[data-variant=critical] { 7786 ${Ra}: var(--arc-color-fg-critical-mid); 7787 } 7788 7789 &[data-variant=warning] { 7790 ${Ra}: var(--arc-color-fg-warning-stark); 7791 } 7792 7793 &[data-variant=success] { 7794 ${Ra}: var(--arc-color-fg-success-stark); 7795 } 7796 7797 &[data-variant=info] { 7798 ${Ra}: var(--arc-color-fg-info-stark); 7799 } 7800 7801} 7802 7803/* FONT PROPERTIES -------------------------------------------------⢠*/ 7804 7805[arc-text^=title] { 7806 ${Rt}: var(--arc-font-family-title); 7807 ${yo}: var(--arc-font-weight-title); 7808 ${jn}: var(--arc-letter-spacing-title); 7809 ${ja}: var(--arc-line-height-title); 7810 7811 ${ne}: 2em; /* @default title ⢠32÷16*1em ⢠same as 'title-md' @ 100% */ 7812 7813 &:where([arc-text*=-lg]) { 7814 ${ne}: var(--arc-font-size-title-lg); 7815 } 7816 7817 &:where([arc-text*=-md]) { 7818 ${ne}: var(--arc-font-size-title-md); 7819 } 7820 7821 &:where([arc-text*=-sm]) { 7822 ${ne}: var(--arc-font-size-title-sm); 7823 } 7824} 7825 7826[arc-text^=heading] { 7827 ${Rt}: var(--arc-font-family-heading); 7828 ${yo}: var(--arc-font-weight-heading); 7829 ${jn}: var(--arc-letter-spacing-heading); 7830 ${ja}: var(--arc-line-height-heading); 7831 7832 ${ne}: 1.25em; /* @default heading ⢠20÷16*1em ⢠same as 'heading-md' @ 100% */ 7833 7834 &:where([arc-text*=-lg]) { 7835 ${ne}: var(--arc-font-size-heading-lg); 7836 } 7837 7838 &:where([arc-text*=-md]) { 7839 ${ne}: var(--arc-font-size-heading-md); 7840 } 7841 7842 &:where([arc-text*=-sm]) { 7843 ${ne}: var(--arc-font-size-heading-sm); 7844 } 7845} 7846 7847[arc-text^=subheading] { 7848 ${Rt}: var(--arc-font-family-subheading); 7849 ${yo}: var(--arc-font-weight-subheading); 7850 ${jn}: unset; 7851 ${ja}: var(--arc-line-height-subheading); 7852 7853 ${ne}: 0.875em; /* @default subheading ⢠14÷16*1em ⢠same as 'subheading-md' @ 100% */ 7854 7855 &:where([arc-text*=-lg]) { 7856 ${ne}: var(--arc-font-size-subheading-lg); 7857 } 7858 7859 &:where([arc-text*=-md]) { 7860 ${ne}: var(--arc-font-size-subheading-md); 7861 } 7862 7863 &:where([arc-text*=-sm]) { 7864 ${ne}: var(--arc-font-size-subheading-sm); 7865 } 7866} 7867 7868[arc-text^=body] { 7869 ${Rt}: var(--arc-font-family-body); 7870 ${yo}: var(--arc-font-weight-body); 7871 ${ja}: var(--arc-line-height-body); 7872 ${ne}: 0.875em; /* @default body ⢠14÷16*1em ⢠same as 'body-md' @ 100% */ 7873 7874 &:where([arc-text*=-lg]) { 7875 ${ne}: var(--arc-font-size-body-lg); 7876 } 7877 7878 &:where([arc-text*=-md]) { 7879 ${ne}: var(--arc-font-size-body-md); 7880 } 7881 7882 &:where([arc-text*=-sm]) { 7883 ${ne}: var(--arc-font-size-body-sm); 7884 } 7885
7886 &:where([arc-text*=-xs]) { 7887 ${ne}: var(--arc-font-size-body-xs); 7888 } 7889} 7890 7891[arc-text]:where(pre, code) { 7892 ${ne}: 1em; 7893} 7894 7895[arc-text]:where(pre, code, [data-is-monospace]) { 7896 ${Rt}: var(--arc-font-family-mono); 7897 ${ja}: var(--arc-line-height-mono); 7898} 7899 7900 7901/* CORE STYLES -----------------------------------------------------⢠*/ 7902 7903[arc-text] { 7904 /* conveniences for element properties */ 7905 flex: var(--arc-text-flex, var(${op})); 7906 hyphens: var(--arc-text-hyphens, var(${np})); /* not unset as fallback so text-breaks by default */ 7907 opacity: var(--arc-text-opacity, var(${cp})); 7908 text-align: var(--arc-text-align, var(${$o})); 7909 white-space: var(--arc-text-white-space, var(${ip})); 7910 7911 color: var(--arc-text-color, var(${Ra})); 7912 7913 font-size: var(--arc-text-font-size, var(${ne})); 7914 font-family: var(--arc-text-font-family, var(${Rt})); 7915 font-weight: var(--arc-text-font-weight, var(${yo})); 7916 line-height: var(--arc-text-line-height, var(${ja})); 7917 letter-spacing: var(--arc-text-letter-spacing, var(${jn})); 7918 7919 font-variation-settings: var(--arc-font-variation-settings, var(--arc-internal-font-vs)); 7920} 7921 7922} 7923`,Vy=r=>(0,s.forwardRef)((e,a)=>(0,s.createElement)(r,{...Fy({...e,tag:r}),ref:a})),Gy=[...tp].reduce((r,e)=>({...r,[e]:Vy(e)}),{});Cr("Arc",Hy);const Uy=fr(Ur,["common","ai","critical"]),sp=[...Da],lp=["default","success","warning","error"],dp=fr(ze,["inherit","md"]),up=fr(Ur,["common"]),hp=[...pt],Ky=[...Lt],pp=["top-left","top-center","top-right","center","bottom-left","bottom-center","bottom-right"],Wy=Uy.filter(r=>r!=="critical"),gp={size:dp[1],variant:up[0],scheme:sp[2],popover:hp[2],placement:pp[4],severity:lp[0],showDismiss:!0},vp=(r,e="toggle")=>{const a=document.getElementById(r);({toggle:()=>a?.togglePopover(),show:()=>a?.showPopover(),hide:()=>a?.hidePopover()})[e]()},fp=d`--arcâ¢progress`,Xy=d`${fp}â¢bar`,qy=d`${fp}â¢value`,mp=d`${Xy}â¢bg`,Mn=d`${qy}â¢bg`,Yy=d` 7924@layer arc-components { 7925 7926 /* Shared defaults from _Internal/Components.css.js */ 7927 ${Rv} 7928 7929 [arc-progress-bar] { 7930 ${mp}: var(--arc-color-alpha-subtle); 7931 ${Mn}: var(--arc-color-bg-brand-stark); 7932 7933 &[data-variant=ai] { 7934 ${Mn}: var(--arc-progress-bar-gradient-ai-200); 7935 } 7936 7937 &[data-variant=critical] { 7938 ${Mn}: var(--arc-color-bg-critical-mid); 7939 } 7940 } 7941 7942 [arc-progress-bar] { 7943 appearance: none; 7944 width: 100%; 7945 height: var(${b}â¢8); 7946 7947 /* firefox needs these at this level, other browsers can use these too */ 7948 background: var(--arc-progress-bar-background, var(${mp})); 7949 border-radius: var(--arc-border-radius-pill); 7950 border: none; 7951 7952 /* turn off the default bar background for other browsers */ 7953 &::-webkit-progress-bar { background: none; } 7954 7955 /* firefox's progress-value bar */ 7956 &::-moz-progress-bar { 7957 border-radius: var(--arc-border-radius-pill); 7958 background: var(--arc-progress-bar-value-background, var(${Mn})); 7959 } 7960 7961 /* all the others' progress-value bar */ 7962 &::-webkit-progress-value { 7963 border-radius: var(--arc-border-radius-pill); 7964 background: var(--arc-progress-bar-value-background, var(${Mn})); 7965 } 7966 } 7967 7968} 7969`,Zy=({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,"% "]});Cr("ArcProgressBar",Yy);const Ma=d`--arcâ¢toast`,xi=d`${Ma}â¢content`,bp=d`${Ma}â¢color`,$p=d`${Ma}â¢background`,Ln=d`${Ma}â¢iconâ¢color`,Dn=d`${Ma}â¢transition`,Jy=d` 7970@layer arc-components { 7971 7972 [arc-toast] { 7973 ${xi}â¢gap: var(${M}â¢2); 7974 ${Dn}â¢duration: 300ms; 7975 ${Ln}: currentcolor; 7976 7977 /* SIZES -------------------------------------------------------⢠*/ 7978 &[data-size=md] { /* @default */ 7979 ${Ma}â¢fontâ¢size: var(${b}â¢16); 7980 ${xi}â¢fontâ¢size: var(${b}â¢14); 7981 } 7982 7983 &[data-size=inherit] { 7984 ${Ma}â¢fontâ¢size: 1em; 7985 ${xi}â¢fontâ¢size: 0.875em; 7986 } 7987 7988 /* STATES ------------------------------------------------------⢠*/ 7989 &[data-severity=error] { 7990 ${Ln}: var(--arc-color-fg-critical-mid); 7991 } 7992 7993 &[data-severity=success] { 7994 ${Ln}: var(--arc-color-fg-success-mid); 7995 } 7996 7997 &[data-severity=warning] { 7998 ${Ln}: var(--arc-color-fg-warning-mid); 7999 } 8000 8001 /* VARIANTS ----------------------------------------------------⢠*/ 8002 &[data-variant=common] { /* @default */ 8003 ${$p}: var(--arc-color-bg-mono); 8004 ${bp}: var(--arc-color-fg-primary); 8005 } 8006 8007 /* PLACEMENTS --------------------------------------------------⢠*/ 8008 &[data-placement*=top-] { inset-block-start: var(--arc-toast-inset-block-start, 0); } 8009 &[data-placement*=bottom-] { inset-block-end: var(--arc-toast-inset-block-end, 0); } 8010 &[data-placement*=-left] { inset-inline-start: var(--arc-toast-inset-inline-start, 0); } 8011 &[data-placement*=-right] { inset-inline-end: var(--arc-toast-inset-inline-end, 0); } 8012 &[data-placement*=-center] { inset-inline-start: var(--arc-toast-inset-inline-start, 50%); translate: -50% 0; } 8013 &[data-placement=center] { inset: var(--arc-toast-inset, 0); margin: var(--arc-toast-offset, auto); } 8014 } 8015 8016 /* CORE STYLES ---------------------------------------------------⢠*/ 8017 [arc-toast] { 8018 inset: var(--arc-toast-inset, auto); 8019 margin: var(--arc-toast-offset, var(${M}â¢16)); /* @note: '-offset' here is legacy variable name */ 8020 align-items: center; 8021 8022 font-size: var(${Ma}â¢fontâ¢size); /* @note: see [arc-toast-content] for actual font-size via the [data-size] attribute */ 8023 8024 color: var(--arc-toast-color, var(${bp})); 8025 background-color: var(--arc-toast-background, var(${$p})); 8026 border-radius: var(--arc-toast-border-radius, var(--arc-border-radius-lg)); 8027 padding: var(--arc-toast-padding, var(${M}â¢12) var(${M}â¢12) var(${M}â¢12) var(${M}â¢16)); 8028 box-shadow: var(--arc-shadow-lg); 8029 border: none; 8030 8031 max-width: var(--arc-toast-max-width, 40em); 8032 min-width: var(--arc-toast-min-width, 12em); 8033 min-height: var(--arc-toast-min-height, var(${Ma}â¢minâ¢height, 3.5em)); 8034 8035 &:has([arc-toast-heading] + [arc-toast-subtext]) { 8036 ${Ma}â¢minâ¢height: 5em; 8037 } 8038 8039 [arc-toast-content-grid] { 8040 flex: 1; 8041 display: grid; 8042 grid-template-columns: 1fr auto; 8043 gap: var(${M}â¢8) var(${M}â¢16); 8044 } 8045 8046 [arc-toast-body] { 8047 display: flex; 8048 align-items: baseline; 8049 gap: var(${M}â¢8); 8050 padding: var(${M}â¢4) 0; /* vertical padding to align with action button text */ 8051 min-width: 14em; 8052 8053 p { 8054 margin: 0; 8055 } 8056 } 8057 8058 [arc-toast-icon] { 8059 --arc-icon-color: var(--arc-toast-icon-color, var(${Ln})); 8060 8061 height: 1lh; 8062 padding: 0 var(${M}â¢2); 8063 } 8064 8065 [arc-toast-content] { 8066 flex: 1; 8067 8068 font-size: var(--arc-toast-font-size, var(${xi}â¢fontâ¢size)); 8069 line-height: var(--arc-line-height-loose); 8070 hyphens: auto; 8071 8072 display: block; 8073 8074 &:has([arc-toast-heading] + [arc-toast-subtext]) { 8075 display: flex; 8076 flex-direction: column; 8077 gap: var(${M}â¢2); 8078 } 8079 } 8080 8081 [arc-toast-actions] { 8082 align-self: baseline; 8083 8084 display: flex; 8085 align-items: center; 8086 gap: 0.5em; 8087 } 8088 8089 [arc-toast-progress-bar] { 8090 grid-column: 1 / -1; 8091 } 8092 } 8093 8094 /* POPOVER + state -----------------------------------------------⢠*/ 8095 8096 [arc-toast] { 8097 opacity: 0; 8098 content-visibility: hidden; 8099 transition: 8100 display var(${Dn}â¢duration) allow-discrete, 8101 overlay var(${Dn}â¢duration) allow-discrete, 8102 content-visibility var(${Dn}â¢duration) allow-discrete, 8103 opacity var(${Dn}â¢duration); 8104 } 8105 8106 [arc-toast]:popover-open { 8107 display: flex; 8108 opacity: 1; 8109 content-visibility: visible; 8110 } 8111 8112 @starting-style { 8113 [arc-toast]:popover-open { 8114 opacity: 0; 8115 content-visibility: hidden; 8116 } 8117 } 8118} 8119`,yp=({id:r,children:e,icon:a,heading:t,subtext:o,dismissProps:n,showDismiss:c=!0,onClose:l,actionSlot:u,size:h="md",variant:p="common",scheme:f=gp.scheme,placement:g="bottom-left",getToastId:v,progressBarProps:m,severity:y,...S})=>{const k=()=>{l?.()},w=f==="auto"?void 0:f,z=!!u||c,x=Or(r,"arc-toast"),{variant:_,hierarchy:P,...R}=n||{};(0,s.useEffect)(()=>{v?.(x)},[v,x]);const U=Xi(a);return(0,i.jsx)("div",{...S,"arc-toast":"","arc-scheme":w,"data-size":h,"data-variant":p,"data-placement":g,"data-severity":y||void 0,id:x,children:(0,i.jsxs)("div",{"arc-toast-content-grid":"",children:[(0,i.jsxs)("div",{"arc-toast-body":"",children:[a&&(0,i.jsx)(Ar,{icon:U,"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})]})})]}),z&&(0,i.jsxs)("div",{"arc-toast-actions":"",children:[u,c&&(0,i.jsx)(Br,{icon:"fa-regular fa-xmark-large",layout:"icon",variant:"common",hierarchy:"tertiary",size:"md",shape:"square","aria-label":"Dismiss",...R,popoverTarget:x,onClick:k})]}),m&&(0,i.jsx)(Zy,{...m,variant:y==="error"?"critical":m.variant,"arc-toast-progress-bar":""})]})})};yp.handleToast=vp,Cr("ArcToast",Jy);var On;(function(r){r.None="none",r.Persistent="localStorage",r.Temporary="sessionStorage"})(On||(On={}));const Qy=(r,e,a)=>
8119{const[t,o]=(0,s.useState)(e),[n,c]=ny(r,e),[l,u]=rd(r,e);return a===On.Temporary?[n,c]:a===On.Persistent?[l,u]:[t,o]},rx=["auto","hex","hexa","rgb","hsl","oklch"],ex=()=>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.