From 1f7aa464ba39f3b88e5d99141d01e1174f1cad42 Mon Sep 17 00:00:00 2001 From: Alexander Brandon Coles Date: Thu, 18 Jun 2026 23:26:16 +0200 Subject: [PATCH 1/3] Define explicit controller names for OP elements Follows upgrade to Catalyst v1.8.0 and addition of explicit controller names in 0ebf6316. This should resolve issues with incorrectly derived controller names when minified in production builds (e.g. with esbuild). See also https://github.com/github/catalyst/pull/330 --- app/components/primer/open_project/avatar_fallback.ts | 2 +- .../primer/open_project/border_box/collapsible_header.ts | 2 +- app/components/primer/open_project/collapsible_section.ts | 2 +- app/components/primer/open_project/danger_dialog_form_helper.ts | 2 +- app/components/primer/open_project/filterable_tree_view.ts | 2 +- app/components/primer/open_project/page_header_element.ts | 2 +- app/components/primer/open_project/sub_header_element.ts | 2 +- app/components/primer/open_project/zen_mode_button.ts | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/components/primer/open_project/avatar_fallback.ts b/app/components/primer/open_project/avatar_fallback.ts index 51352bd895..0212bf1c26 100644 --- a/app/components/primer/open_project/avatar_fallback.ts +++ b/app/components/primer/open_project/avatar_fallback.ts @@ -13,7 +13,7 @@ import {controller} from '@github/catalyst' * due to a Catalyst bug where @attr accessors aren't properly initialized * when elements have pre-existing attribute values. */ -@controller +@controller('avatar-fallback') export class AvatarFallbackElement extends HTMLElement { private img: HTMLImageElement | null = null private testImage: HTMLImageElement | null = null diff --git a/app/components/primer/open_project/border_box/collapsible_header.ts b/app/components/primer/open_project/border_box/collapsible_header.ts index a341d1a3c1..d18002a351 100644 --- a/app/components/primer/open_project/border_box/collapsible_header.ts +++ b/app/components/primer/open_project/border_box/collapsible_header.ts @@ -1,7 +1,7 @@ import {controller} from '@github/catalyst' import {CollapsibleElement} from '../collapsible' -@controller +@controller('collapsible-header') class CollapsibleHeaderElement extends CollapsibleElement { connectedCallback() { if (!this.closest('.Box')) { diff --git a/app/components/primer/open_project/collapsible_section.ts b/app/components/primer/open_project/collapsible_section.ts index ad6a2adfa4..ccd7733f87 100644 --- a/app/components/primer/open_project/collapsible_section.ts +++ b/app/components/primer/open_project/collapsible_section.ts @@ -1,7 +1,7 @@ import {controller} from '@github/catalyst' import {CollapsibleElement} from './collapsible' -@controller +@controller('collapsible-section') class CollapsibleSectionElement extends CollapsibleElement { get baseClass(): string { return 'CollapsibleSection' diff --git a/app/components/primer/open_project/danger_dialog_form_helper.ts b/app/components/primer/open_project/danger_dialog_form_helper.ts index 5e524fb284..c2951a0325 100644 --- a/app/components/primer/open_project/danger_dialog_form_helper.ts +++ b/app/components/primer/open_project/danger_dialog_form_helper.ts @@ -3,7 +3,7 @@ import type {LiveRegionElement} from '@primer/live-region-element' const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]' -@controller +@controller('danger-dialog-form-helper') class DangerDialogFormHelperElement extends HTMLElement { @target checkbox: HTMLInputElement | undefined @target liveRegion: LiveRegionElement diff --git a/app/components/primer/open_project/filterable_tree_view.ts b/app/components/primer/open_project/filterable_tree_view.ts index 64e0606417..1c02708f50 100644 --- a/app/components/primer/open_project/filterable_tree_view.ts +++ b/app/components/primer/open_project/filterable_tree_view.ts @@ -18,7 +18,7 @@ type NodeState = { const ASYNC_DEBOUNCE_MS = 300 -@controller +@controller('filterable-tree-view') export class FilterableTreeViewElement extends HTMLElement { @target filterInput: HTMLInputElement @target filterModeControlList: HTMLElement diff --git a/app/components/primer/open_project/page_header_element.ts b/app/components/primer/open_project/page_header_element.ts index 375bfb3356..c6db0133f2 100644 --- a/app/components/primer/open_project/page_header_element.ts +++ b/app/components/primer/open_project/page_header_element.ts @@ -1,6 +1,6 @@ import {controller} from '@github/catalyst' -@controller +@controller('page-header') class PageHeaderElement extends HTMLElement { menuItemClick(event: Event) { const currentTarget = event.currentTarget as HTMLButtonElement diff --git a/app/components/primer/open_project/sub_header_element.ts b/app/components/primer/open_project/sub_header_element.ts index fa1c313a9f..d7bf8f7ba7 100644 --- a/app/components/primer/open_project/sub_header_element.ts +++ b/app/components/primer/open_project/sub_header_element.ts @@ -1,6 +1,6 @@ import {controller, target, targets} from '@github/catalyst' -@controller +@controller('sub-header') class SubHeaderElement extends HTMLElement { @target filterInput: HTMLInputElement @targets shownItemsOnExpandedFilter: HTMLElement[] diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts index c7d35436cb..11ec594b08 100644 --- a/app/components/primer/open_project/zen_mode_button.ts +++ b/app/components/primer/open_project/zen_mode_button.ts @@ -1,6 +1,6 @@ import {controller, target} from '@github/catalyst' -@controller +@controller('zen-mode-button') class ZenModeButtonElement extends HTMLElement { @target button: HTMLElement inZenMode = false From 84f618675dbdde15e1bea1160ec01f405efcd3ed Mon Sep 17 00:00:00 2001 From: Alexander Brandon Coles Date: Thu, 18 Jun 2026 23:44:33 +0200 Subject: [PATCH 2/3] Update docs to recommend explicit controller names --- .github/copilot-instructions.md | 2 +- docs/contributors/adding-components.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 21377c0771..a7043fd448 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -135,7 +135,7 @@ Use Catalyst for component behaviors: ```typescript import {controller, target} from '@github/catalyst'; -@controller +@controller('my-component') class MyComponentElement extends HTMLElement { @target button: HTMLElement diff --git a/docs/contributors/adding-components.md b/docs/contributors/adding-components.md index 58ff54b345..3707e954c4 100644 --- a/docs/contributors/adding-components.md +++ b/docs/contributors/adding-components.md @@ -49,7 +49,7 @@ Catalyst has `controller` and `target` decorators which you have to import from ```ts import {controller, target} from '@github/catalyst'; -@controller +@controller('my-component') class MyComponentNameElement extends HTMLElement { @target button: HTMLElement } From 0aabd1af1107499c857ecf0d2ba1311d17db56bf Mon Sep 17 00:00:00 2001 From: myabc <755+myabc@users.noreply.github.com> Date: Mon, 22 Jun 2026 17:19:41 +0000 Subject: [PATCH 3/3] Generating component snapshots --- .../trailing_label_width_medium/default.png | Bin 36234 -> 36221 bytes .../trailing_label_width_medium/focused.png | Bin 36598 -> 36585 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png index f7a7a1cec412c4e77b3f421f4b56d9adb9d7ba26..cb467834a56e679a16e310e2172ec4c1513efe72 100644 GIT binary patch delta 5099 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 delta 5112 zcmXw6c|6qJ_oqUL9@!H@8BC9{WE(~)laO^R5r(XfHNx0Gl_;_l#=c}7`@W66WZ$>3 zlNeJb#yYZpoBI9kU!T{#=bX>`ocBHFo^z6XEBoPe*Wcbu}{5NHP=NyzZB# z3A@SxS}hQ_+4n4UM`XjL=cO|nIt8h%M}dtG|c(OxrB`( zqFbuL_hQe_>QN!KLDTlpOF-q2iZ`u@o^mE)e3QA&_d)GB+-R>D=nd6z*+c%1yORHh zDR+uyrk>+duT3RLc!vN5YWs~RdJulAPy89+6IbR6nyq43TnfWv^^g*p&>I>L52lwO!>Z;XR%C{=JMF4DoF_xnn(PXgiklPECtXS(79OUNjJ=*!URZ(@*_)iKSW) zSPO-E?|p=#Fb0NWCP%C?a?JgXjzSt5OCxI`3D5?xYKWBcNc#Ktuy>&{^=Jg%+r_S! zo?f9E9~?E&3%S8D7$AP= zD?g~zy&YiXu=A?P$sE-NPAjAz*vbf+0klB9@KS3{Rxbm0=?oYDX&RsZ_M@VZl2Dli zj3d!v)$q8OXkyQMsPykbdqaFeX5^gCboa(;MTr6yXr2AdfO;p|4Cq=tM*$-iEOoJM zdQvBSTy||Xb7TF2^H{l>8sQ70@y1V~Vn=zOh0?KviDaHIJvG@tZkv1#@ElzU4CRQA zPypBQ%X9E?*8m+n|E3vi1jk=En;Od=nTo8y+#!9ptT)j^4M)=rsqd{MjukDgyBpiq zI}(1gr!0ZNuLFWrM>}^y)i#ocH!H@Y5YcB%mj2=8Zm|s<}^kvSb=xT@JZWX0oet*6Hoh-tiIJnA5NY z%3l2Ch%f#3dGH)5mCt74S0q|r-FH6XZsV(r^_fRcI6VN7mC4C>SM^&8qtv7F5+zd} zPf89&_G)XQL(5wE(2$e-LRaxC9-iFTWCMghCqmjOX~+`3y%rG{akT$FyT=&ELJ6NP zcO0DNF%PTXSHJm>QFT|!V}V6xSr95TZ?TX{(JS>}If1uwGUC7K>({?$BL;&BK?YQ*HIZ8xEzfoGkcpFHCk5(?vAGXqz5Hu6kh>mz zoiO{1LdDf(`j^^u{Qk>dlG7$(P?`hI8g{`RA65Amuz3FaH*$ zCc?1Q09r7J@T$gMYK2cln$R-8BkF#*?*_~O8TuuA^*W0@zv60|9(09Cht`%9DU$n8 zPU77>-szi5UvLvE(6mlnNUhrf#-3@QqW!}bKr__Os7ThdM!C#2lnPKknG9SNH5L&6 zIg1>ByB(LFm;C){XljP{J&+Pxtvec(S&r7bYNt)8+=` zs~qn_l8#BSSS=aOow%Am70`gzR*D9CG@h4ctmH>_ad?}ht(9@PTE518a&Puv5_qPD zVFcR^&IgDIZ?|nn6KL(_eoj|de)ja9=|Sr=8G@@PA=jEe))Ww}cA~dk$a|5`?ZlP2 zxP6}uR1On4yokpWH$*)T^0+X7(NLX~%~SicjZ+Q`?&sS8XTs!~pd4h%M@59^a>i7< zp#wAIkJ>mH5O&Kxw_coO^Thg6iyK+oF|%@2=%2o|lzWC-87>fL>Z-+66J;OysRZn^U= zfdQwumtm_1+UL|0^^YSTEyM?m<5ydNrzs!_j#^&Oxg7zL*I ziKJd7?{b3V=(?0@kHJ0iCw*CwTQoundpobzCG{mIXIes=Fa+)Nz=PGZN+<4{Z^uC zI6IFCzGv)oz@h8_bCMW-QSnW;DO;n+K9a_0y&%m=JCd7qWwATU`h~mOmq8oqd7{AS?m7wMh8+2V^rk-~MJz?)Ib{cu8j*;St||8tbJB)df_rOP zmFHyCx>Ef1quEtn9?ZBzvE+jLipI!+vDn$w@HU{Ji_{RGc}M2ojix!(!pp?!RVJj& zm@_tsD;DC#>wkmrV}U^vD{Fh-ZjK5Q z-&y0u{LH)mr3~iQIV9gnOslM?mczF+&gvhMlG6;)m{bOE9Rs1kE3IR%o9MVD@{rpd zSXXB}Qwa_}X2;0Vf|M7I{rR~?jrDWhnD!yWuT9rMeof&ol?W{K@@5ofvVH4a@|s0m zQwY>jTIn=vaOy%`(`1=Qr(ZKu%T%aZoz}K> zU^QF(byoh?EPF6wyf8>uVyI9<6JT9+R{9f#P6v<-vKtm_?X#)3o z3S%95M%0gsA{92DP^tbLA|^vbuZ1C1!=wL9KEpMHEI|4#7&>n8!~775RsyE3-I9hrz?G8hzJ zi~dh~&9&};q{76O?WYMCjL-Dt(|MQSA#J7*JCfYA93!-Py|6H;P=Q_8Fcj`;usY54 zj)Q;3-_}Nz%?zvAf*n;2v;Zi?-L=&(Rb+Qlhk7#wKkoJD4nQ zzxE2@eq{8zGE!xXDhgCz40sD2D5_>4)G9GM$?5RqXq2aXHME z#FEyXVls9lBGb%M+oM7*Qp}6ou{EX^=PV2z8am#-86CTG%4wFo`y{h_J)POlX>cFe zykJ()T<$)_D`(WUa))7mcV?U^<1xT zUz_a{>a#xF5wb&K)P`_O=IqJVt%K&i-vpxXNNFj$@KqVjdb^~XTW^W1%*de~TUQf| zQ}QzYb_2dj2Z)bnx#6-j4W8Rt_`?TdT2iHnD-MrjIJI&he;eji(dKP*I&iS6VTE@M z+76Dv1tpzh`iq{5T({{NN80_`)wvFLEV>BGirS zLa_>7+W`C!psJFR{{N{1WAb|lick+QE5>4z+FGy2CV_-4SSiu@GjG^>AP_0`cC#sl@4xUc{AT@rW0>fvprC-oVjon3;)Am_W$M=AjpFs0%)YAZ z`ppj%r%bYz+S+kVVofMoV#T9$mXr@FF&47ihfn$+hG{Q;{8m|B&EcaOTfqX2)zY8? z3|u`H^@^fg(s;jbJ{v$&lU$h0?@Swu^8Je?w9&jF_Y;?dfqF7CtYyl}VOm1Rm!%!N zB#)*>)bW`bKYA|KM)|=D26fg7n@&|*kLm|XS1(vn_U?A%gfY`|L^C5kQUd!?D#qVC zwZVC)r@K4$4GtI?L%1I`i~^{yKW(2}PK{Cm4u=aNp>*`W~7()|g+u+TpR}P6TfN-Jps2@KULO1cUo^Sa6A0*V-wwjcu<)^^O(^=a9}$6I4^?Hc2?h|h+80zX>w?s7%}Yb%iW z(!~biaOS`7gclu6HshYSd7FadLhi8zQ(dC?gN~l7>RQ>SZGZ>J)@zdJ!4uT5W<#23 z9q!E;f5f?QFo^6p>;Ku*t4g#ARM%1?^%%d7fl5^&Ta%7rpS$jV!&%Q1Uq2Y+mJXta zIHp(J|N1K$Bm*GMZZ{Z{M!>NtT1iJ1m*ueczs5oAYH+SWMaDi+5SvNw{98swu+IWf_iq4YZH69W!W%fA{2}G!1$Io#cNY(d*pp7 zZ^NUD-ab}qMFZDfHw6t>7r@Y;qz}E<_i)07U2SU@EdP{NpU?6dSUr}C?Kg|}vmhbG zCuGct`phe0a=BaQE{}q>?L*HwY?@~LMw3{FMctDg1KwJjp3=AVHj$;9_UQe$(__hS z;Dk(2T=s;+x<8Sycf0D*$g?Zg+{Jx*`s0}E%9>ebrY%=a~2^t&(LIp*UF6!pQs(&FSjf#QtWC9kY^e7%`6_}?Yg z>}b^@_VjdS+{6jg_nnaDs@tVjHs0etInB@GS@Olyw7;o(p`ljlp({4t(y8n4x50-o&zaSQxKJQE9bMXK?x6P^bCYI z-M7f++iIV(7~qk0Q1--kWI1LPt}PVSU#wYVY)^r$EUBZwK_%@Ky2IXg;5--14{Ta79jhRC>)d_;yF@S|4=p{METkU3s5I z_7=vFUPSJ&@XZ2#D4kPmZgTnPCp`g3KzK?@xJ(-b%I0hJ@G0)RJ)W(ZHmV_0YL#V+ zP4LAJ&=S)UL+pVcv={ICQs@DV*u=f?o_(DV(-K+NN&5_!D``Mpi_tC)(PPz02lAzj z*vS8@-jBKHHesfQn<9}_W10iD18LkDs8=-8&N+X-Pu1^wswjSou6&t$8(UU zztgv>&au0BU3S#HYxVe-zYXH;Z2e*mN^(KkuSd-`WBo1b&0lPTB`2FZk%F7ci?yyt zQV)5Wc8VM7dnSc@3kUzaUb+G%k4+hs1b_Z{{iq}u{uWsYZ;v5D3lfIe3p5(GFy9${ zQ5Vb~Wa1jq$>u=eCBHuL+{s0~Sa*I&(a&eU>+so`$CXbFzfWi>!^C+ihS;qAq^Gx0 P6k&C^wrc4;%UAycTxI;E diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png index d02befb54af91129eca67b3f2e0c3a2ea5d5ddac..81b7626facf4779310db0edb446076b5c7a1cd4a 100644 GIT binary patch delta 5104 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 xXRQPBMG8V=OOQ&)S`NlVKkn;{vWX49moIx delta 5106 zcmXw6c|4Tu_m=9_OPORzgrYEnLNV5MONQ(WLzW0J7-JdnD5+#CV~H_{#=ezh?AnlJ z?2LU7!x+0^vW*|T-{14k^L#$%KIgu!`##rm&Y|L1H*u^b0ce4`P~>$bC248Ao-DUN zf1Q3>Qc|k_x)Zt@hQX*s%a5yXugGaU?sJBE$1h+x#QcPYIoe&KzWQgW@}z;>HiBe=i!O3@wOhOw%|S8 z+M_h7&)8fB$C1vG0{{?4qKBWWJqC-_0sY|p68qQ>s8?Hei z_(8@q->6xnyWroDK#sDM4~y?Sb8INT#um_BCAHls)KC>hPQZcqoIeGEkygRVmmC+d zojg00PF{YL(p~z_lo#eTv1fK6;7Wu;`>!tjkL@Q*52&pv^oOQu^W=Fh`MlakAe&Y$qLcwxb~VnqPl(sKj?sQBc9N zIy|N|sH7cmlDJ(!KRoBAUyDr`X*=L)o8nA8;Jgz%T^0j(;3H7oU^Cx^u?Ge)S^QYq&* z?%2XKnGi~(!kc@ROhRxf9lMheoR)6Q6;Dr}rca)m{kC4uzY}+{+*QWaXTffrR>=uv zRjKvOn*0QDpy3O54afo6y|Tn*Dzk4Iu45#ItyZ_f%LosB@#+L1&hycGPwdls$C}4g z%6&=D82ww!t$!`@&NEibtzk8^9t@;G>uke*bDI8>yJM+huNmi63aX5LF2X98tgA=G zo=|EDXpPGq%uQkpTWo&0@P13+(X=lKq&a1mrmhMUN+Ou)yLdU^M+djFfh!zZ)a!C` z!+wVngdXThQ3lR%F`QT0E6dhH6n#leg*1UPC8#myRBzs?9_G=oC`ogwOJ2B?{jY%B zY@hFU?4(i7639(?9reV*&V<{Q^w{tKW5WOy8pJq2Y+#0}s=#3ofw>BifsA#=FJ_qM3EX7LqbOy^h`|Q z;Q7VA`7N_odJ7BWG4fRVFpkSWHUGjF78cG2I(KiGEbPMIKNG^Rvj0B*J&8eAvJ>Aw z)&zvAK4M7zSy~Qw?QsaOl-NcAt9%7dt(FC9Z1E+@{Xl-io+(=b(Gr-U@SWC3Y zne~^RrdlnpwxZ8!!necShp63X@EK_U?$~d=W)ybs2WP<9P-u|KG;UvG&o{j=rjx94 zwcENwjOFOT8RlHjbw1^3_A{%TOJ68dU|3S^)9nJ~${Wg)9S_(gK+b~h^r4q8)C%g( z1%aW;HLA0S$pUCil3AA?7SGGxc$AOn$}M{@du(sKYr6i1OE#gPZhABiVGIJojDMsu zr|1b2a}o)_WvVk^Qwx>_E;$FoD#c(@6xaxR23p=Cha~r?d(#4W%@+GH&de$w3qSXLim`xUq0YKMzpKXB;5)!?u`<~v zg$vfUTc5A77SjBSs2>~*i0jLl6=H*Fgp1cSPljtId-QLbhFRupuXq@zos~f#w0jjx zW0%dETOKEXx7*_uKKXM?$SEisIm|5HxGG6r7cNy2Two_{cF$aRVMI~dF*y!c77}$c zoX!{pcrD7EeGAnUe4oAp#3G`POtsg-4HWlvxvoQ|ehp2h76F?i{nYIT@=)gQW<;=R zAmgq0Qr?3u!1*NNN<&$|Qti=XSM{bS#3CBdtfsRqrr>M5>`CF%&cipB2bHT{*+s2( zWRloB8;rI{50B|X0?6e)dr8#KXJ^EXf-JJHBmTTia-uE1oKwrCeaIX#V3=97mbVD@ zzEENh2!U$V03%w2$Fs*iOdGuAgMj!Ai+b8jxWR|y4rEh^3@Ob36{$OLDSNj+U=BOD z#atc@yoKcx!r@o^TXWOB^F52KNS33KmAQN|p>bR!T*ZorqVg|WFDGNq?-*hO=w0eF z8B26dx!P7w_ufvZfi;vQFjY9Znk%4tu}H|W0dSb@E>-#|=FxsY%zHN6(Qq*-y#vLQ zj8rwSmbQQGVhlAY>RDelM;fhpG|!Glceb_s(uq1-L0mJ?jKxAUW!j<#9`n(iW%5Y| zHYJRBS(`KmcMlhLSDL8eY85cXp<+OFF`AZlIOHU$sVmLmR^H79sAtV7|I%EX0EQjr zccO3VDpyb+!NzVO4CcqXGWDC^E7*c~oCk!j_~hqZd7p5((a{+MlE7-ci5i}ROUHm! zq88GXE0!jRMx70}{T5@064!5c|Cu3VaSHw!UXYswHopC8+N8E9ovf<7zrKVE-Hs7V z1<)lyxEs*b}B@V&0ig*LQ$Et`LWJzTdkAC2FX|dT11(1St zjPae1Lk!fw;x4CqO`dDkla80V@pkXIle{#BGa8=;7Srh~yV8sn1@q(_x&OMP69*&( zGoF<2-0JOEfcc3p7L!Q&0*YRQ#q|gfj>8ht@_VrTo1CnM)e{q---dnMrzvZB>W-CD zh4<;0mBE(|Z6KRAUFA(T%V}G%(|ttpb(f{A(&S|ICWCpK#bHEglOD`>a{v!*W7zV( zt?sPb7+{%+jv;SRZl>gnApIHhAXT#ROnZ^otH({rrKOaEnVHVFmDtk|w`)sj?`vo$bbLlg6^s&N zqyNWFFU}Mffx1&oS=G~*y`Gm<8Vv7WZ~x$d@w*&1v1#V6Iv&{oZaozcrIB_eAhXJ2 zmY(Red`0ER174VMSkZ=VWBqI+ce*>lroOmX2e8@9RP^=r;#B7n{hRd*aW=;*^>PF> zG}j{%)$}{}Z9R2*5LKdtK$SUS6**`NhQx37WNl~(Cj?&>uYy_5>A^FTro4K$>ZMg7 zdtAM8hhgH_;+0vX=TE}?w!3<6+4q(a%-A$&3k9pC6eWU_2=je_m@wd& zj2=)!<0=-bt!tX5ynY?tKalG1bO>buV{_=-UwhAo+ zA6#Xz+P2kw_M@@{qA7X?tiIkJ|Gjl=m(JE$xF>&H;K2K4k~AI}VpyT)jautE2Z<)G z$DzLDGg^%Y_}=Ci+ zr9Z`PZ%d(i*d&7@|9`L`u{^N5&yQ)3^g$x$r}y8|k2pCwo;bvOFj452%2(;}V=4#v z52l&tz%6kF1MSL-e+lXFYO=IVXJy^z0Zw4Jxj%`P#K*_q4A&Nc-$$cg-52|BQ4%=M zBEnu?K|vw!G7j7lE@dSs?dHa9X9VFpn#jt{&0S^fVc00Dt}e5LE~952I)%uaE;zhf z>ZbV&4Glpcko#XG5<)W{Tqn#Ym?apUvYxP`qsJE8N0fde96t$?sw~eOdbJkDvOPNd zV39h#sf76$eF3v#4Po2;Qc}j}uZQ`3{VHZ3#16d3{kz8GsW-Vh-{2{hdv4_kG5*N1 zyK05q+hQX%8}H8N9H3fY$+^%{e_){)AAo+E31fxAJ%>qiBDsfY3jkJqf!AxLS; zHGv-KxIVp)E6*k)3MD#piGZ(M+W4egY4&~!EBq?c#aP3(!fs^g$7_OYs(1Edrtwnk z5EVDd!)|zt_39xX6E*KnVdHVZIX)(JLbgt#$cT+jH=A+ReEcdJN)LtU_t0?H|Vv`V%KB)k{=wsHZGJ4(;J~# z2DIFhsoey(VkJN+U*#V&iNF2O&C9>xA^!yVxfma}>)OnIng>{qmebokh3+ypb?3RoT;6)}30S;>2N0UMYCGS36F>)E~ zQ9dbC9)6Jw>|0s%#ZQ=WDB1ebX%@DozqHE|LlZsf)3518Y6#%X{Lv~F<_y}jOtdV# z1iYYYveIcQcgi#(qvRj{!@H6?U)6dm_n}0i_)N16Zrj@=c0ggDH!PIQ(R-iqg!0=z zn;$?2lW>7$I)*xo<9AIUjbbJ+@A}p*CI4_-ei8T2Bdp{wA80NurgFvP|(KH zaPCa8tziUbzmN$~mH+M^7|K5GejovFhUF2)TCBKF&0Io(;xl!b6RS_Ie`YN8vWMNi zSZ59%k+|2$cL@!*e_8;`m)fm+c;p`z;6Nd7b$4QcDuQY4ByR54p?}c8-2W>LW23GqcxI#^nw}5SlN9`+ksq>o(bWw@83oWC*YDMsZwD#t{LwAf>>ZL z^}megjAjq`W;{A-QgFcKfQqj8wP)rz1BjpbM~|wx9X}QYe3R3>J74BnZZ<=qQ6&>= zjz{wg<(P1Q#Wj_AUCW1o!LhX9YD=HwP1i{)gUew|zLdFhigu6E{r0|2V#wIxF@uZn zQIv@c{QOw=2vNavBF;QHe1&*1abK?}9OU-s-M;p{jj!esYO^#;>6Nh6TjTRx6C65I zhSZ|hOOZxp!W#A22pK9kGql$9Ud8_sy)iRlc$d0>(g_BP&7P7g9AD1Q6?vAMX}8el z@SBU7DdyiYW@p>Tfz`Sf_bv(jq4W}~^^L_D^edNGC5{6dl-Fz~ zKN?0VCu_{rGV9TSOsa3Sq`$qHkR za+l4(nD-xt*utfkdf=d_T-Tk|^pmZyiZ zmKHD$HSq=3Q-=wDmHpVGzi(gf&e?h^1;WNrvo0Ikot_ZF3y~m8kE$k~Cx>>)h7YWJ z{DwyktHArN)8Oy>2fyq6eZ)ei&4Klw!$IySOXRy#3Y3t>`-cuX_w?@;-G21q{{Zf3 B2V(#L