https://static.monarch.com/static/js/9685.a9a86ae2.chunk.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t=(new Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="afc9ff9e-6ca5-443e-b65d-34404e2e1f15",e._sentryDebugIdIdentifier="sentry-dbid-afc9ff9e-6ca5-443e-b65d-34404e2e1f15")}catch(e){}}(),(this.webpackChunkweb=this.webpackChunkweb||[]).push([[9685],{29685:(e,t,r)=>{r.r(t),r.d(t,{ThemePlayground:()=>S});var n=r(97920),a=r(68622),l=r(36938),o=r(34327),i=r(30935),s=r(1374),c=r(39368),m=r(4342),d=r(66801),u=r(83747),p=r(34218),g=r(60150),v=r(11359),h=r(70687),f=r(92633),b=r(5693);const E=Object.keys(b.MY),y=E.map((e=>({value:e,label:e}))),x=Object.keys(b.xI),C=[...y,...x.map((e=>({value:e,label:e})))],k=[.45,.75,1],S=()=>{const e=(0,o.d4)(f.$Y);return(0,h.z)(e)?l.createElement(w,{"data-external-id":"theme-playground"}):null},w=()=>{const e=(0,l.useState)(""),t=(0,a.A)(e,2),r=t[0],o=t[1],p=(0,l.useState)(""),h=(0,a.A)(p,2),f=h[0],y=h[1],C=(0,l.useState)(""),S=(0,a.A)(C,2),w=S[0],N=S[1],O=(0,l.useState)(""),P=(0,a.A)(O,2),R=P[0],I=P[1],z=(0,l.useState)(!1),$=(0,a.A)(z,2),j=$[0],_=$[1],G=(0,l.useState)(!1),L=(0,a.A)(G,2),M=L[0],q=L[1],B=(0,l.useState)({primitives:[],semantic:[]}),J=(0,a.A)(B,2),Z=J[0],K=J[1],Y=(0,l.useState)(null),F=(0,a.A)(Y,2),H=F[0],Q=F[1],U=(0,l.useState)(""),V=(0,a.A)(U,2),W=V[0],X=V[1],ee=(0,l.useState)(!1),te=(0,a.A)(ee,2),re=te[0],ne=te[1],ae=(0,l.useState)(""),le=(0,a.A)(ae,2),oe=le[0],ie=le[1],se=(0,l.useRef)({}),ce=(0,l.useRef)(null),me=(0,l.useCallback)((e=>{var t;if(null===(t=ce.current)||void 0===t||t.disconnect(),ce.current=null,!e)return;const r=e=>ne(e<700);if(r(e.getBoundingClientRect().width),"undefined"===typeof ResizeObserver)return;const n=new ResizeObserver((e=>{let t=(0,a.A)(e,1)[0];return r(t.contentRect.width)}));n.observe(e),ce.current=n}),[]),de=(0,s.useThemePlaygroundStore)((e=>e.drafts)),ue=(0,s.useThemePlaygroundStore)((e=>e.activeDraftId)),pe=(0,s.useThemePlaygroundStore)((e=>e.isDrawerOpen)),ge=(0,s.useThemePlaygroundStore)((e=>e.dockSide)),ve=(0,s.useThemePlaygroundStore)((e=>e.snapPoint)),he=de.find((e=>e.id===ue)),fe=(0,l.useMemo)((()=>{var e;return null!==(e=null===he||void 0===he?void 0:he.overrides)&&void 0!==e?e:{}}),[null===he||void 0===he?void 0:he.overrides]),be=(0,l.useMemo)((()=>({light:A("light",fe),dark:A("dark",fe)})),[fe]),Ee="top"===ge||"bottom"===ge,ye=re||"left"===ge||"right"===ge;let xe="top";"left"===ge&&(xe="right"),"right"===ge&&(xe="left"),"top"===ge&&(xe="bottom");const Ce=(0,l.useMemo)((()=>{const e=r.trim().toLowerCase(),t=t=>0===e.length||t.toLowerCase().includes(e);return{primitives:E.filter(t),semantic:x.filter(t)}}),[r]),ke=(0,l.useMemo)((()=>({primitives:D(Ce.primitives),semantic:D(Ce.semantic)})),[Ce]),Se=r.trim();Se!==oe&&(ie(Se),K(Se?{primitives:Object.keys(ke.primitives),semantic:Object.keys(ke.semantic)}:{primitives:[],semantic:[]}));const we=Object.keys(ke.semantic).length>0||Object.keys(ke.primitives).length>0,Ne=(e,t,r,n)=>{const a=(0,i.$)(n);return!!a&&("primitives"===e?s.useThemePlaygroundStore.getState().setPrimitiveOverride(t,r,a):s.useThemePlaygroundStore.getState().setSemanticOverride(t,r,a),!0)},Te=(e,t,r)=>{var a,l,o;if(!x.includes(e))return!1;const i=null===(a=fe.semantic)||void 0===a?void 0:a[e],c=(0,n.A)((0,n.A)({},fe),{},{semantic:(0,n.A)((0,n.A)({},fe.semantic),{},{[e]:{light:"light"===t?{ref:r}:null!==(l=null===i||void 0===i?void 0:i.light)&&void 0!==l?l:{ref:b.xI[e].light},dark:"dark"===t?{ref:r}:null!==(o=null===i||void 0===i?void 0:i.dark)&&void 0!==o?o:{ref:b.xI[e].dark}}})});try{(0,v.qQ)(e,t,c,new Set,!1)}catch(m){const e=m instanceof Error?m.message:"";return y(e.includes("Circular")?"Cannot reference ".concat(r,": circular token reference."):"Cannot resolve token reference: ".concat(r,".")),!1}return s.useThemePlaygroundStore.getState().setSemanticOverride(e,t,{ref:r}),!0},Oe=(e,t)=>{s.useThemePlaygroundStore.getState().clearOverride(e,t)},Pe=()=>{H&&(s.useThemePlaygroundStore.getState().renameDraft(H,W.trim()||"Untitled draft"),Q(null))};return l.createElement(c.GqZ.Root,{"data-external-id":"theme-playground-inner",open:pe,onOpenChange:e=>e?s.useThemePlaygroundStore.getState().openDrawer():s.useThemePlaygroundStore.getState().closeDrawer(),modal:!1,disablePointerDismissal:!0,side:ge,size:Ee?"full":"lg",snapPoints:Ee?[...k]:void 0,snapPoint:Ee?ve:void 0,snapToSequentialPoints:!0,onSnapPointChange:e=>{"number"===typeof e&&s.useThemePlaygroundStore.getState().setSnapPoint(e)}},l.createElement(c.GqZ.Content,{showBackdrop:!1},l.createElement("div",{className:(0,g.cn)("flex min-h-0 flex-col overflow-hidden",Ee?"flex-none":"flex-1",Ee&&"top"===ge&&"mt-auto"),style:Ee?{height:"".concat(100*ve,"dvh")}:void 0},Ee?l.createElement(c.GqZ.Handle,null):null,l.createElement(c.GqZ.Header,null,l.createElement("div",{className:"@container/themeheader flex w-full flex-wrap items-center gap-sm"},l.createElement("div",{className:"flex shrink-0 items-center gap-xs"},l.createElement(c.GqZ.Title,null,"Theme Playground")),l.createElement("div",{className:"flex min-w-0 flex-[1_1_12rem] items-center gap-xs @max-[600px]/themeheader:order-3 @max-[600px]/themeheader:basis-full"},l.createElement(c.NyM,{orientation:"horizontal",className:"min-w-0 flex-1"},l.createElement("div",{className:"flex min-w-max items-center gap-xs p-2xs"},l.createElement("div",{role:"group","aria-label":"Theme drafts",className:"flex items-center gap-xs"},de.map((e=>{const t=e.id===ue,r=e.id!==s.DEFAULT_DRAFT_ID;return l.createElement(c.k_P.Root,{key:e.id,open:H===e.id,onOpenChange:e=>{e||Q(null)}}

1,l.createElement(c.D63.Root,null,l.createElement(c.D63.Trigger,null,l.createElement(c.r8y,{ref:t=>{se.current[e.id]=t},size:"md",rounded:"pill",strong:!0,title:e.name,className:(0,g.cn)("group transition-colors",r&&"max-w-container-3xs",t?"bg-background-tertiary text-content-primary":"\n                                        bg-transparent text-content-secondary\n                                        hover:bg-background-secondary-hover\n                                      ")},l.createElement(c.r8y.Button,{"aria-pressed":t,className:"min-w-0 shrink hover:bg-transparent active:bg-transparent active:shadow-none",onClick:()=>s.useThemePlaygroundStore.getState().setActiveDraft(e.id)},l.createElement(c.r8y.Label,{className:"min-w-0 truncate text-sm/9"},e.name)),r?l.createElement(c.r8y.Dismiss,{className:" pointer-events-none px-1.5 opacity-0 transition-opacity group-focus-within:pointer-events-auto group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:opacity-100 hover:bg-background-tertiary focus-visible:opacity-100 ",render:l.createElement("button",{type:"button","aria-label":"Delete draft ".concat(e.name),onClick:()=>s.useThemePlaygroundStore.getState().deleteDraft(e.id)})}):null)),l.createElement(c.D63.Content,null,r?l.createElement(c.D63.Item,{onClick:()=>{X(e.name),Q(e.id)}},"Rename"):null,l.createElement(c.D63.Item,{onClick:()=>s.useThemePlaygroundStore.getState().duplicateDraft(e.id)},"Duplicate"))),l.createElement(c.k_P.Content,{anchor:se.current[e.id],side:"bottom",align:"start",className:"w-64"},l.createElement(c.D_j,{autoFocus:!0,value:W,"aria-label":"Rename ".concat(e.name),onChange:e=>X(e.currentTarget.value),onBlur:Pe,onKeyDown:e=>{"Enter"===e.key&&Pe()}})))}))),l.createElement(c.SO$,{size:"sm","aria-label":"New draft",className:"shrink-0 rounded-pill border border-dashed border-divider-primary text-content-secondary hover:bg-background-secondary-hover hover:text-content-primary",onClick:()=>s.useThemePlaygroundStore.getState().createDraft()},l.createElement(u.MdsPlusIcon,{size:"md"}))))),l.createElement("div",{className:"flex shrink-0 items-center gap-xs @max-[600px]/themeheader:ml-auto"},l.createElement(c.u$N.Root,{open:M,onOpenChange:q},l.createElement(c.u$N.Trigger,{render:l.createElement(c.SO$,{variant:"minimal","aria-label":"Theme Playground actions",title:"Theme Playground actions"},l.createElement(d.MdsMoreHorizontalIcon,null))}),l.createElement(c.u$N.Content,{side:xe,align:"end",collisionPadding:8,className:"min-w-56"},l.createElement(c.u$N.SubmenuRoot,null,l.createElement(c.u$N.SubmenuTrigger,null,"Position"),l.createElement(c.u$N.Content,{side:"right",align:"start",collisionPadding:8},l.createElement(c.u$N.RadioGroup,{value:ge,onValueChange:e=>{s.useThemePlaygroundStore.getState().setDockSide(e),q(!1)}},["top","right","bottom","left"].map((e=>l.createElement(c.u$N.RadioItem,{key:e,value:e,leading:l.createElement(c.u$N.RadioItemIndicator,null,l.createElement(m.MdsCheckIcon,null))},e)))))),l.createElement(c.u$N.Item,{onClick:()=>s.useThemePlaygroundStore.getState().forceRender()},"Force re-render"),l.createElement(c.u$N.Item,{onClick:async()=>{let e="";try{var t;if(e=JSON.stringify((0,s.exportActiveDraft)(),null,2),null===(t=navigator.clipboard)||void 0===t||!t.writeText)throw new Error("Clipboard API unavailable");await navigator.clipboard.writeText(e),N(""),y("Draft copied.")}catch(r){N(e),y("Clipboard unavailable. Copy the draft below manually.")}}},"Copy draft"),l.createElement(c.u$N.Item,{onClick:()=>_(!0)},"Paste draft"),l.createElement(c.u$N.Separator,null),l.createElement(c.u$N.Item,{variant:"destructive",onClick:()=>s.useThemePlaygroundStore.getState().resetDraft(ue)},"Reset"))),l.createElement(c.hg1.Root,{open:j,onOpenChange:_},l.createElement(c.hg1.Content,null,l.createElement(c.hg1.CloseTrigger,null),l.createElement(c.hg1.Header,null,l.createElement(c.hg1.Title,null,"Paste draft")),l.createElement(c.hg1.Body,null,l.createElement(c.LYY,{className:"min-h-32",placeholder:"Paste JSON artifact",value:R,onChange:e=>I(e.currentTarget.value)})),l.createElement(c.hg1.Footer,null,l.createElement(c.hg1.Close,{render:l.createElement(c.XZZ,{size:"sm",variant:"default"},"Paste"),onClick:()=>{try{const e=JSON.parse(R);if(1!==e.v||!e.name)throw new Error("Invalid artifact");const t=s.useThemePlaygroundStore.getState().importArtifact(e);y(t.dropped.length?"Dropped unknown keys: ".concat(t.dropped.join(", ")):""),I("")}catch(e){y("Could not import that artifact.")}}})))),l.createElement(c.GqZ.Close,{render:l.createElement(c.SO$,{size:"xs","aria-label":"Close drawer"},l.createElement(c.sOb,null))})))),l.createElement(c.GqZ.Body,{className:"flex min-h-0 flex-col gap-sm overflow-hidden"},l.createElement("div",{className:"flex flex-wrap items-center gap-xs"},l.createElement(c.D_j,{className:"min-w-48 flex-1",placeholder:"Search tokens",value:r,onChange:e=>o(e.currentTarget.value)})),f?l.createElement(c.c8D,{className:"text-content-warning"},f):null,w?l.createElement(c.LYY,{readOnly:!0,"aria-label":"Draft artifact to copy manually",value:w,onFocus:e=>e.currentTarget.select(),className:"min-h-32"}):null,!we&&r.trim()?l.createElement(c.c8D,{className:"py-lg text-center text-content-secondary"},"No tokens match your search."):l.createElement("div",{ref:me,className:(0,g.cn)("flex min-h-0 flex-1 gap-lg overflow-hidden",{"flex-col":ye})},l.createElement(T,{kind:"semantic",groups:ke.semantic,overrides:fe,optionColors:be,openGroups:Z.semantic,onOpenGroupsChange:e=>K((t=>(0,n.A)((0,n.A)({},t),{},{semantic:e}))),onCommitColor:Ne,onCommitReference:Te,onClearOverride:Oe}),l.createElement(T,{kind:"primitives",groups:ke.primitives,overrides:fe,optionColors:be,openGroups:Z.primitives,onOpenGroupsChange:e=>K((t=>(0,n.A)((0,n.A)({},t),{},{primitives:e}))),onCommitColor:Ne,onCommitReference:Te,onClearOverride:Oe}))))))},N=e=>e?"value"in e?e.value:e.ref:"",T=e=>{let t=e.kind,r=e.groups,n=e.overrides,o=e.optionColors,i=e.openGroups,s=e.onOpenGroupsChange,m=e.onCommitColor,d=e.onCommitReference,u=e.onClearOverride;return 0===Object.keys(r).length?null:l.createElement("section",{"data-external-id":"token-section",className:"@container/tokens flex min-h-0 flex-1 flex-col gap-xs overflow-hidden"},l.createElement(c.c8D,{render:l.createElement("h2",null),size:"sm",weight:"bold"},"primitives"===t?"Primitives":"Semantic"),l.createElement(c.NyM,{orientation:"vertical",className:"min-h-0 flex-1"},l.createElement(c.bpj,{type:"multiple",value:i,onValueChange:s,className:"flex flex-col gap-0 p-px px-sm"},Object.entries(r).map((e=>{let r=(0,a.A)(e,2),i=r[0],s=r[1];const p=s.filter((e=>{var r;const a=null===(r=n[t])||void 0===r?void 0:r[e];return!!(null!==a&&void 0!==a&&a.light||null!==a&&void 0!==a&&a.dark)})).length,g="".concat(s.length," ").concat(1===s.length?"token":"tokens"),v="".concat(p," ").concat(1===p?"override":"overrides");return l.createElement(c.bpj.Item,{key:i,value:i,className:"contents"},l.createElement(c.bpj.Header,{className:" sticky top-0 z-1 mb-xs rounded-default border border-divider-primary bg-background-primary data-open:mb-0 data-open:rounded-b-none data-open:border-b-0 "},l.createElement(c.bpj.Trigger,{className:"w-full justify-between gap-xs px-sm py-xs text-left"},l.createElement("span",{className:"flex items-center gap-xs"},l.createElement(c.c8D,{render:l.createElement("span",{title:i}),size:"sm",weight:"medium",className:"min-w-0 truncate"},i),l.createElement(c.r8y,{size:"xs",rounded:"pill"},g),l.createElement(c.r8y,{size:"xs",rounded:"pill",strong:p>0,dotColor:p>0?"var(--color-content-brand)":void 0},v)))),l.createElement(c.bpj.Content,{className:"mb-xs rounded-b-default border-x border-b border-divider-primary px-sm pt-0 pb-sm"},l.createElement("div",{className:"flex flex-col gap-2xs"},s.map((e=>{var r;return l.createElement(O,{key:e,kind:t,group:i,tokenKey:e,override:null===(r=n[t])||void 0===r?void 0:r[e],overrides:n,optionColors:o,onCommitColor:m,onCommitReference:d,onClearOverride:u})})))))})))))},O=e=>{let t=e.kind,r=e.group,n=e.tokenKey,a=e.override,o=e.overrides,i=e.optionColors,s=e.onCommitColor,m=e.onCommitReference,d=e.onClearOverride;const u=!!(null!==a&&void 0!==a&&a.light||null!==a&&void 0!==a&&a.dark),v=n.startsWith("".concat(r,"-"))&&n.slice(r.length+1)||n;return l.createElement("div",{"data-external-id":"token-row",className:" grid grid-cols-[minmax(6rem,0.7fr)_minmax(0,1fr)_minmax(0,1fr)] items-center gap-xs border-b border-divider-primary py-xs last:border-b-0 @max-[500px]/tokens:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] "},l.createElement("div",{className:"flex min-w-0 items-center gap-2xs text-sm/5 @max-[500px]/tokens:col-span-2"},l.createElement("span",{className:"min-w-0 truncate",title:n},v),l.createElement(c.SO$,{size:"xs",variant:"minimal","aria-label":"Revert ".concat(n),"aria-hidden":!u,tabIndex:u?0:-1,title:u?"Revert ".concat(n):void 0,disabled:!u,className:(0,g.cn)(!u&&"pointer-events-none invisible"),onClick:()=>d(t,n)},l.createElement(p.MdsUndoIcon,null))),["light","dark"].map((e=>l.createElement(P,{key:e,kind:t,tokenKey:n,mode:e,override:null===a||void 0===a?void 0:a[e],overrides:o,optionColors:i[e],onCommitColor:s,onCommitReference:m}))))},P=e=>{let t=e.kind,r=e.tokenKey,n=e.mode,o=e.override,i=e.overrides,m=e.optionColors,d=e.onCommitColor,u=e.onCommitReference;const p=(0,l.useState)(N(o)),g=(0,a.A)(p,2),h=g[0],f=g[1],E=(0,l.useRef)(h),y=(0,l.useRef)(null),x=(0,l.useState)(!1),k=(0,a.A)(x,2),S=k[0],w=k[1],T=(0,l.useState)(!1),O

1=(0,a.A)(T,2),P=O[0],D=O[1];(0,l.useEffect)((()=>{const e=N(o);E.current=e,f(e),D(!1)}),[o]);const A="primitives"===t?b.MY[r][n]:b.xI[r][n],R=e=>{try{return(0,v.qQ)(e,n,i)}catch(t){return"transparent"}};let I="primitives"===t?A:R(A);o&&"value"in o?I=o.srgb:o&&"ref"in o&&(I=R(o.ref));const z=()=>{const e=E.current;e&&("semantic"===t&&(0,s.isThemeTokenReference)(e)?(D(!1),D(!u(r,n,e))):(()=>{const e=E.current;e&&D(!d(t,r,n,e))})())};return l.createElement("div",{"data-external-id":"token-value-editor",className:"flex min-w-0 flex-col gap-2xs"},l.createElement(c.c8D,{size:"xs",weight:"medium"},"light"===n?"Light":"Dark"),l.createElement(c.i9A,{size:"sm",invalid:P,className:"min-w-0"},l.createElement(c.i9A.Addon,{align:"inline-start",className:"ps-2xs"},"semantic"===t?l.createElement(c.i9A.Button,{"aria-label":"Choose ".concat(r," ").concat(n," reference"),className:"size-5 rounded-sm border border-divider-primary p-0",onClick:()=>{var e;null===(e=y.current)||void 0===e||e.focus(),w(!0)}},l.createElement("span",{className:"size-full rounded-[inherit]",style:{backgroundColor:I}})):l.createElement("span",{className:"size-5 rounded-sm border border-divider-primary",style:{backgroundColor:I}})),l.createElement("div",{className:"min-w-0 flex-1"},"primitives"===t?l.createElement(c.D_j,{size:"sm",className:"w-full border-0 bg-transparent px-2xs shadow-none",value:h,placeholder:A,"aria-label":"".concat(r," ").concat(n),onChange:e=>{E.current=e.currentTarget.value,f(e.currentTarget.value),D(!1)},onBlur:z,onKeyDown:e=>{"Enter"===e.key&&z()}}):l.createElement(c.LJO.Root,{size:"sm",items:C,value:h,open:S,onOpenChange:w,openOnInputClick:!0,onValueChange:(e,t)=>

1{E.current=e,f(e),D(!1),"item-press"===t.reason&&(0,s.isThemeTokenReference)(e)&&(D(!u(r,n,e)),w(!1))}},l.createElement(c.LJO.Input,{ref:y,className:" w-full min-w-0 border-0 bg-transparent px-2xs shadow-none hover:border-0 hover:bg-transparent focus:border-0 focus:bg-transparent ",placeholder:A,"aria-label":"".concat(r," ").concat(n),onBlur:z,onKeyDown:e=>{"Enter"===e.key&&z()}}),l.createElement(c.LJO.Content,{className:"min-w-56"},l.createElement(c.LJO.Empty,null,"No primitive matches"),l.createElement(c.LJO.List,null,(e=>{const t=m.get(e.value);return l.createElement(c.LJO.Option,{key:e.value,value:e.value},t?l.createElement("span",{className:"flex items-center gap-xs"},l.createElement("span",{className:"size-5 rounded-sm border border-divider-primary",style:{backgroundColor:t}}),e.label):e.label)})))))),P?l.createElement(c.c8D,{size:"xs",className:"text-content-danger"},"Enter a valid CSS color."):null)},D=e=>{const t={};return e.forEach((e=>{var r;const n=e.split("-"),l=(0,a.A)(n,1)[0];(null!==(r=t[l])&&void 0!==r?r:t[l]=[]).push(e)})),t},A=(e,t)=>{const r=new Map;

1return C.forEach((n=>{try{r.set(n.value,(0,v.qQ)(n.value,e,t))}catch(a){return}})),r}}}]);
2//# sourceMappingURL=9685.a9a86ae2.chunk.js.map