From 25402e9aa5190b9346c91180a66bc209ba86d563 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 12 Jun 2024 17:26:43 +0100 Subject: [PATCH 1/5] Add in-progress view to EditInPlace component Adds the InlineSpinner component so we can use it. Also tweaks a lot of the spacing & sizing of the caption icons in EditInPlace to get them right. --- ...InlineSpinner-Default-1-chromium-linux.png | Bin 0 -> 4089 bytes .../EditInPlace/EditInPlace.module.css | 24 +++++++++--- .../EditInPlace/EditInPlace.stories.tsx | 4 ++ .../Form/Controls/EditInPlace/EditInPlace.tsx | 20 ++++++++++ .../InlineSpinner/InlineSpinner.module.css | 35 +++++++++++++++++ .../InlineSpinner/InlineSpinner.stories.tsx | 36 ++++++++++++++++++ .../InlineSpinner/InlineSpinner.test.tsx | 28 ++++++++++++++ .../InlineSpinner/InlineSpinner.tsx | 34 +++++++++++++++++ 8 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 playwright/visual.test.ts-snapshots/InlineSpinner-Default-1-chromium-linux.png create mode 100644 src/components/InlineSpinner/InlineSpinner.module.css create mode 100644 src/components/InlineSpinner/InlineSpinner.stories.tsx create mode 100644 src/components/InlineSpinner/InlineSpinner.test.tsx create mode 100644 src/components/InlineSpinner/InlineSpinner.tsx diff --git a/playwright/visual.test.ts-snapshots/InlineSpinner-Default-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/InlineSpinner-Default-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..db06fb78a1174479902196291f6f6d204e95b884 GIT binary patch literal 4089 zcmeAS@N?(olHy`uVBq!ia0y~yV7dUp9Be?5o#F0tfD~hKkh>GZx^prw85sCCd%8G= zRLpsM*L!tbt7yZ+sY(-BN){~$&{w~bmUOxAHUEVpiwhT+ZkxG%sUL612HyY{*ZQ_c ztfKk}JQ*bl_a>DkT-lkaeNE_uVF6oNfz_%KrDv^k&u7d}-xHC|A8#gq|K7H(Teq4r zFdV4-d9nO2(E1OxN(&en6a;|o65z;SVBlaeVPIfkk^(xDk(Ys?v4M@D!NGxD0de%m3_1=l(M*gO@+s_BA^F|G(RMMi*O(X%xTa2Qu>1Ec`tv__^=BWC%L$%mVED5@ z_mjTN@&5g$)@5&IRP+7G>MR8r5~Z@>{Jgs}Y^(EZ-v4|aUr`uW^>eDKA2Y)NFI}Mv zxApJNdp5t~)5^--r2KfE1%tbzOVG#%H{Lt0(m#Le}4uyb9dR=v%l6>KR@3tKgZwR_HS?Ta{vFi zeDakU@Amy(xAWO7dHq6Q;D=>RY?wE*^2@~b=clyS&!~OJdE>{YcgkP%7k}BBT>SIt^s~2a-TL!;_4;S;|NqE2 zH`m&H|Ie?DmPJ1rZ|*F99;D95kg!yY_r?FJ=Xbw9dvbFBxpw(^v))e6n{R8syD)Fp z%juuH=f98qCBne4<_aq(FlGE$81=>+m`pzWCpkS(H+7AgMqaKQ4Y$#7qe}5Unvg~l z(r7{=sYNuJWk$2iXqFkxGL-bHM$3>vScd#(ROg%EIx#i$7_c+V;OXk;vd$@?2>?b} B50?M{ literal 0 HcmV?d00001 diff --git a/src/components/Form/Controls/EditInPlace/EditInPlace.module.css b/src/components/Form/Controls/EditInPlace/EditInPlace.module.css index a48b526b..0f85345e 100644 --- a/src/components/Form/Controls/EditInPlace/EditInPlace.module.css +++ b/src/components/Form/Controls/EditInPlace/EditInPlace.module.css @@ -91,14 +91,14 @@ limitations under the License. .caption-line { margin-block-start: var(--cpd-space-2x); + display: flex; + gap: var(--cpd-space-2x); } .caption-icon { display: inline-block; - vertical-align: middle; inline-size: 20px; block-size: 20px; - margin-inline-end: var(--cpd-space-2x); } .caption-icon-error { @@ -107,18 +107,28 @@ limitations under the License. .caption-icon-saved { background-color: var(--cpd-color-icon-success-primary); + + /* + * We are trying to match the size of the error icon which + * is displayed 20px big but has 2px of border in an SVG + * with a viewBox of 24x24... + */ + inline-size: calc(20px * (20 / 24)); + block-size: calc(20px * (20 / 24)); + margin: calc(2px * (20 / 24)); border-radius: 20px; text-align: center; - margin-inline-end: var(--cpd-space-2x); svg { color: var(--cpd-color-icon-on-solid-primary); + position: relative; + inset-block-start: -1px; } } .caption-text { - vertical-align: middle; - font-size: 13px; + font-size: var(--cpd-font-body-sm-medium); + font-weight: var(--cpd-font-weight-medium); } .caption-text-error { @@ -128,3 +138,7 @@ limitations under the License. .caption-text-saved { color: var(--cpd-color-text-success-primary); } + +.caption-text-saving { + color: var(--cpd-color-text-secondary); +} diff --git a/src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx b/src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx index 89660a35..1c226ff6 100644 --- a/src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx +++ b/src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx @@ -73,6 +73,9 @@ export default { saveButtonLabel: { type: "string", }, + savingLabel: { + type: "string", + }, cancelButtonLabel: { type: "string", }, @@ -83,6 +86,7 @@ export default { value: "", saveButtonLabel: "Save", cancelButtonLabel: "Cancel", + savingLabel: "Saving...", }, } satisfies Meta; diff --git a/src/components/Form/Controls/EditInPlace/EditInPlace.tsx b/src/components/Form/Controls/EditInPlace/EditInPlace.tsx index b568f484..134a44fa 100644 --- a/src/components/Form/Controls/EditInPlace/EditInPlace.tsx +++ b/src/components/Form/Controls/EditInPlace/EditInPlace.tsx @@ -23,6 +23,7 @@ import useId from "../../../../utils/useId"; import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg"; import CancelIcon from "@vector-im/compound-design-tokens/icons/close.svg"; import ErrorIcon from "@vector-im/compound-design-tokens/icons/error.svg"; +import { InlineSpinner } from "../../../InlineSpinner/InlineSpinner"; type Props = { /** @@ -67,6 +68,11 @@ type Props = { */ saveButtonLabel: string; + /** + * The label for the 'in progress' saving caption + */ + savingLabel: string; + /** * True to disable the save button, false to enable. * Default: false (enabled) @@ -96,6 +102,7 @@ export const EditInPlace = forwardRef( disableSaveButton, error, savedLabel, + savingLabel, ...props }, ref, @@ -211,6 +218,19 @@ export const EditInPlace = forwardRef( )} + {saving && ( +
+ + + {savingLabel} + +
+ )} {savedLabel && showSaved && (
; + +export const Default = { + args: {}, + parameters: {}, +}; diff --git a/src/components/InlineSpinner/InlineSpinner.test.tsx b/src/components/InlineSpinner/InlineSpinner.test.tsx new file mode 100644 index 00000000..e8993ca3 --- /dev/null +++ b/src/components/InlineSpinner/InlineSpinner.test.tsx @@ -0,0 +1,28 @@ +/* +Copyright 2024 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { describe, it, expect } from "vitest"; +import { render } from "@testing-library/react"; +import React from "react"; + +import { InlineSpinner } from "./InlineSpinner"; + +describe("InlineSpinner", () => { + it("renders", () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/src/components/InlineSpinner/InlineSpinner.tsx b/src/components/InlineSpinner/InlineSpinner.tsx new file mode 100644 index 00000000..6ce4f132 --- /dev/null +++ b/src/components/InlineSpinner/InlineSpinner.tsx @@ -0,0 +1,34 @@ +/* +Copyright 2024 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { forwardRef } from "react"; +import styles from "./InlineSpinner.module.css"; +import SpinnerIcon from "@vector-im/compound-design-tokens/icons/spinner.svg"; + +type InlineSpinnerProps = { + size?: number; +} & React.HTMLAttributes; + +export const InlineSpinner = forwardRef( + function InlineSpinner({ size = 20 }: InlineSpinnerProps) { + return ( + + ); + }, +); From f8c865db6a8ac964910dae370700c1f0f6ad8e62 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 12 Jun 2024 17:31:19 +0100 Subject: [PATCH 2/5] Add missing prop to test --- src/components/Form/Controls/EditInPlace/EditInPlace.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Form/Controls/EditInPlace/EditInPlace.test.tsx b/src/components/Form/Controls/EditInPlace/EditInPlace.test.tsx index 13a63461..48a29267 100644 --- a/src/components/Form/Controls/EditInPlace/EditInPlace.test.tsx +++ b/src/components/Form/Controls/EditInPlace/EditInPlace.test.tsx @@ -48,6 +48,7 @@ describe("EditInPlace", () => { cancelButtonLabel="Cancel" savedLabel={"Saved"} disableSaveButton={props.disableSaveButton} + savingLabel="Saving..." /> From a99ccaa918c92e5872f19d252346e4a114179238 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 12 Jun 2024 17:34:37 +0100 Subject: [PATCH 3/5] Add test snapshot --- .../__snapshots__/InlineSpinner.test.tsx.snap | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/InlineSpinner/__snapshots__/InlineSpinner.test.tsx.snap diff --git a/src/components/InlineSpinner/__snapshots__/InlineSpinner.test.tsx.snap b/src/components/InlineSpinner/__snapshots__/InlineSpinner.test.tsx.snap new file mode 100644 index 00000000..82eb91f7 --- /dev/null +++ b/src/components/InlineSpinner/__snapshots__/InlineSpinner.test.tsx.snap @@ -0,0 +1,21 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`InlineSpinner > renders 1`] = ` + + + + + +`; From 9123a1d15651caa6fe91fe5a3e11ae9951833326 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 12 Jun 2024 17:41:37 +0100 Subject: [PATCH 4/5] Update screenshots --- ...ditInPlace-With-Error-1-chromium-linux.png | Bin 6909 -> 7401 bytes ...InlineSpinner-Default-1-chromium-linux.png | Bin 4089 -> 4259 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/playwright/visual.test.ts-snapshots/Form-Controls-EditInPlace-With-Error-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Form-Controls-EditInPlace-With-Error-1-chromium-linux.png index c5ad4de4defa222532623c6ff7747bb513ba4798..b9c70a589fd4a746b6e3daa0d6202d7cff4b6b9e 100644 GIT binary patch literal 7401 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 Wd;YCZZSX@O0CV*|Tl3A;+y4W>!-$;# literal 6909 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 diff --git a/playwright/visual.test.ts-snapshots/InlineSpinner-Default-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/InlineSpinner-Default-1-chromium-linux.png index db06fb78a1174479902196291f6f6d204e95b884..9e763573054bc912fcf7298e81e1a11264d78862 100644 GIT binary patch delta 839 zcmV-N1GxP8AEP0VFng^Os_s$~R45QGt7NY+AJ)xt%zi$c?Kv;iafFr9hlLq*L#$MJo8+UTN1 zatJU0f&wX?Ey@%#^fB569R;#)8nycsYH{H07bpQbHqS;uj zR;wikKKA$%^UYgsn-eD=n=AHTJ_oOS)$HGQ*}V4JgR^J%?j=_N0KkiG(SSa7;^chg z>))E~?d|#4M?N?=ynpr0ON|BqfHT5kk8nKm%;~xL+qccu*4BLS3!j@yFL}jMqX7Wm zjIr2Dgg?0RNAtv!Pt8X^`~mR{0KiMuA_2Wxt>*4~4$ZDz=gd3ae*F?70RZ5Pv`9cd za`f2zN^WU~kKBS(+T-n|$2at8naXN6@R;n=ZbuD|XL zb9D3g9DeXOFMs&H`wu@j$4@*uZ+pv|ynF}%z*%9j??AurJ@1@dyUv;K+;;n%eC+Z6 zdj0W}kIt>%yJL3mK5yRpt{av*1^@u8)nWm?_k#21#!r2GPMvyYzVy{^%unyS_dj0y zlb`*3zWlYD=k&AB&P|{BC?~7!$&sf`4u~N z?wAAn_ZrR4ojcdH5&!_!YOMhc001vFi@ih$0093FvvCA+3$yS7j{z6KzW}IL)!8lV RJ-`3}002ovPDHLkV1gs;#XJB2 delta 653 zcmV;80&@MMA^9JWFnnTUa5}1VBIbpi&uE`# zyjW`wUp61#-nO;1wKV_$zW&(^;>8E{@X6Z82|uSxkUr|?8e3%I&}XWeeKxH%v^u{b+f*{Z^;t?0PvmK zwzajjwZx(`XU@#+cicIjfBw(8_Yc3Hg9q=KtFO9hiPZoAaM4)o4fJn+ckg`h#lPl_ z*N@JwwY8-&410!dFI*YzIFDgr=Ok8 z&CS`j_vR%|0|3BEEfUbXcCF3&t$XLshaa3zKRx}8bEi-LZ4MuKXzsrIuDRx#A1`ql z0035Mk$|3=dGwKo=gKRun0@Q}zy1>8|9bW4vAJd6?Q`9=*Up1S{g4tFPwo|M+aqojW(b`SpQ0a`=JSxpU`ICjkIp zr4|k7|9a=$_vYluzs`pro|^5KZl66ryK!#1>6i11pYK`v6aWCM)CCD>008)*TI@H_ n008j+vta})43oeE;THb^Ck~KBk!4lJ00000NkvXXu0mjfPrqAJ From 04e4984e34f759d18979e0549d6bf5ce960e112f Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 13 Jun 2024 11:58:02 +0100 Subject: [PATCH 5/5] Fix vertical alignment --- ...ditInPlace-With-Error-1-chromium-linux.png | Bin 7401 -> 7419 bytes .../EditInPlace/EditInPlace.module.css | 1 + 2 files changed, 1 insertion(+) diff --git a/playwright/visual.test.ts-snapshots/Form-Controls-EditInPlace-With-Error-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Form-Controls-EditInPlace-With-Error-1-chromium-linux.png index b9c70a589fd4a746b6e3daa0d6202d7cff4b6b9e..ac2e286ae8d170ec1bee8cac93d35748ba1605ce 100644 GIT binary patch delta 4036 zcmXY!d011|y2dx9KrJe*9tS|cQxWQA62c&})+)`z)EW4XGPcpBUtIiKjw z^7?sbSM@!PoTjF0n6-hoIU)6RBXN#j0KjSi=c~mGZ2(wb`LXcAw>LoleM?xh$ElRS zO!jkbsjLTfxuc{vA|vx?WUBBvR}08WK%#rT>#o0wi0;n*g*>wVqSe({%vu|>^AUUdB2Z!&g&fdf^LbmfA1Z= zXLy!j6fFq=c78{k2A}SVI=uB+w3GL8tH+d=eSIx77t;paPQIE2lg?b`=I2-@Bp71i6LksO*GA)_$8)@^omzP6+&94u{e6l9 zhJ@s_38FvV+3O$xw7<4DSb`*kExrYV94I#~T4>}ov3awab8EQmSpFH3=N9kIomUYq z*}8=@Gfhoz5?ilkbPZ_E;!enx5z2T}pzJu|YXBIFAJop6^_0cj`uopST=%E(*|gq7 zf>=-UdMHJ2(Qa^QkevTn}Me}66L#iBPV*ZB7naM1GT+zj<3SQ zk;0?H0PvuLs3Tb~PYaQb+r@Wa#FA7m&9phA4XyTVd*t<9w^eY=21w7WKs7xQGw#Be zzT$S)(0ZFRBxBrXw5|8OA3;^~EMa-h&ujjDL)*rdVM{PNLp^=T5VMnSO%NOrmgD0N z(&Sr1ithp7uka!LCGdz9b*{jwIfJ}gS_@lQiR_Os!$cNG5MnqyrF8E%)g@}FbIsAQ zw7HqGo&J(&{tLvO<6BsRtD4r8QD=N;LA2OF?H@WZL6O|gtFu2>YF>s}t*6LxJh9&Z zSqLBB+L1U9<9nAmuUNyBBZe&kFQo8z%WMj_abVrPEzPh+76D&@q5muE#M&4DfV)#uJXQfJe}>#OM6qh@A4GW-!7WV$P11^^!+ZAQ;8&Q?FbJHYTtNVc zyDukIRd_zarCHQu{t(1L^*ceUl6^T-|E$&mc321vE4(7DMU}!)vJ?D6&>sco^CZ&w znNty!<0+zq{%ioaZta12H&UkRGhmO}x1s*@Q5}%nN1^@1AC5h^Z3qCzgF22yKAx{p zN}h8K)6UDLaG+a_3+kh>)_EZ7^+#;q1tDFg{)G%%&JsZau+!e(sO5hJxu{N5doWO- zZSW|g>K8r9`sR_uD|)~?Fk`I)R=)Y*P~dl87AAdL310uGHRT+YkzH(qW+p=0d9dF$ zyn352tc^fGZ_?&gC7PZ8{DS@x0DAtV(KaBiJn#1DU_RGwgRJ6k7Quh+0tIRmk{y*Y zs_GILN!@H7Uaqw-*SW0gJU??0w4^Tby_biej$Fgu5}b0t@l{A9%J`F8ty;J34fPZV zBg=n2T1gPam3#qY+1qP|&@3-*q|-7cfGX;;7e1SXZHxsY)W}80C|5}Eayi<|9ap(C z;g>P>+CPNcai-q9EOT=o($K}$!1Pw?f4iDS~gTxzhsMf zvp>d|-XPRE004A`#~y`R2T82N8qY&f0QHgC% zhNki-+lpUT+7~-LwqG8mZr8VXa>K??(-U`ffaAXY`b$T+{L=h~#x2;@EW1p%UCk`1 z85#eaGABS_`1-FB)=U^by-3mJKD4z(r zrdVq$Z|S(id*@bYd%MHTyd9$nCZNrW(-4r1V^fav#!KoPLh}?Rfa1Cu+Twk4hw%xD zq2m+$6pA4k!7Fh50^|n+}H$*s!I!wU0+tLZMF`0Fs z#U>O-rr?iuf~u(y3`Ykk6f*j<4}@U57b$b226;C*b|@2XuLL$J0XxNa$NQd;31qW_ zuG@1B?X%2OlcZ~-6XkU!;bl5ddU;62mEr36bb?)qMlytyNMm^F-I%Gh^tp{$!DDre zGIaopm+?wm$*xdO+D}!nz=+VccFJluHyRW%(BsK?`J-)p;4k-^{Rykt#kP|h`yTcb z1H9_LKloN}tSylnUfBfkH+xp`@(*wv&cUI;N3;I6LH&71h!^XG1x!kIXoCtx$tZqs z#4v>Z&pf5Np0dqBFFXZ1&xHFhAu)nXRo$}`$ov6b8S>|`D&Digh>C4w5a=L206ytx zd}|&Q2(pW#a_u@jUU_2@ljn${fo|MG& zzaW{z6{1d;yqfhM>)q*IibkW5EMOtxfhP~UbXGpnmIYQTbcX7Je|=)9naM57=!smt zMTf|tc7dmtp(n7l1Q`=#esxdZBXEXXSBG`^vWy@KbJ5(0HovETG=@#nF*H2hH{5?E ztcvTELQXYHNre!uYbW(Y>UG_0Q(taA)kXY*da8Gu##M|;7{ z%zoRDVzrrfk*9jjDeSW=oLEh`Sxi`u3c*d9?A1`@1)Zg$r)RXLyrL8b^X%vgiYoHR z`<#~&fu_)UcfFT7)7Z{lGW*FF;S=iSR=r_^L8Ws!-eaQ$#m&vH1QQJJgSXQ-%>7=k zL321|ff(i@xG{$$nD({1p?QSecy+d-L@)``=LBK~M3#o3G)MSo((s)ykl)CBP|=#M zd(7_4ni+6CeWWN$RIXAs`BxRpT$$|jy~xUqEPCKb*=THU!O{{YKBk%~XwZP{kvC*D zI7HE9@_ZR-_jkKK2q+ogUA7=!s!>c42ao55ygJ-#3Ad=q{4KUp(~K~!Ios)oj#gzO zL^8&w3a*hiVSqM60)zN*(Q%&&g&sTa5K1UmhuR*7hlN?xB!9kbAnRP@4PvoZ%cc=1Vp{(lkmg#_X`Jw*R7{;~(=>IBh` zN$fQZ?7g!~g02C=(zNqX7_epCIQCf63rBR^_@+eFo7YS;jgUq=6Evb!)7w9Vwz;{m zD%@O+JJW+59Gm884>g29BRqaD2>3GuE#P+WP^+%u1?oM!HT}6{*yR#e61mAceTnqL`A0;6hC^j$AnD*$7_V* zb1+{!x`RH;!@E$Uq{loXds}%WT~vUZ>_G*|u4v&6M15UULE+v?Xr!QQLBJ?UQN)fl z$&h7J3!=weP<11`~+`Ipx1n}?BAXT8`=w*-j1fH4!NH5VCl_Aoj@ zaL76Dfah!Ti-GaG~x*TfzXhXs?e2-+1wn^E8`h}|G(1q$9Vv~PO@jh|}k{$ct z_SN1Cda*t2Oa>9VwMVI==`1|F0Eu?D!F7V-squBRcb_td)!zk$!Lkiz*CDmG8~w^?0XhYf32v}QQ| z*8ZYz34+JRCCL5*Gc@X-KI}U>!S49vS(A?4OPYM5UTVR9+tA8+GgUMvb8XvEp=dE3 zn|cB#yE}IryHZ`UU50bQIR@&-0YEv*?+eAEkxE)+EH8xNLT|T z(SlGbOCc0w2?4DjvV=v05J=cV*h0t#2}$NM-}mSJ-TOQ5eV_9z=g94O_D|1&<%kR4 zUQRAsn+h++pmAIQ=hBrRFW8Xd(0MmCZL7e){z~*XvESp7Zl^}g#gqFl{&-=p-q#0V z7lu!{T`+xU@+^3`c(~=C`4@+tWotgt+_(3i7oPEO{L1F#-hw|?PZhlBLnv97_5jo2(IVBum}EQX4p#Wu z>|-)gDV+P<5x#cMHf%~S`h9mGy=`iUoyKQ?)2(8nqC7DEeT{9UV#wcrvnisnLg*mvx~cZ zG$@F;VG8plh^ADXa}R9bbLB?;#YFWA;gT_xlgTcfF<1D5b7Sz=sXjK730{>!U~=@y zvYnB}Rhpl~WesV`%WCmgEtC?TKfmaD2mq3Qik>-gjcT*f5#wf~5)DSCB;SxN4uGQ0 z>DzM?VaM|eW9c1-%7w+{1SV7DY~_lhr=HR`9Q>dInyp}47slf2f=i$KOzEeG1_e}k zXTW_S*sJO<>MT7M8^HPVEujAL`ru#mE#a#8u`7b*GD^L^PISy(TVbtpXYMMY*5a9k zQPLlBRC9Wvb$Q5%nKtu~HV=UrM5R|ynSrFq0;RiGT<4!g1HqtVvxcJBa=q=)1VN}( zeXXF07f7idj+c`VglzlFs=0^bh=>S>>@w1$I%ga!NtOYMuLn3djxK#U1OQnbm0yUa zWq5x%kAZdF7QN)z?F^apc4IRfNj=9&UDgrQRV@QHBX;608RiP(8ug3FGd{NY0QqQph4Oq&J!)39) zaJ%Aja>o09M*7z^m#Rz<68Uu6=*_5s$9*b`w+aP=@ z-G5*c{h{;2C;j+oWq4!GxZ<<6f#vI1SV;G3Gj^n5?w9W#q@|9~Bi#c`eY{sH9+kh2 z0D#Zzyu%PM8<)?@7JdrcUm-N(_qPkyK(vLheChh-4EuDmLx?FE3< zpH>=Q@|-Zft>oCqN;2ph;4o3@0A4~Z(AN8G(c^6v1EMD|@17gfkrYvGc&ST`|EL>FwyFpwxUg8+Z##Qt$j#ZgMYY5Y z8*FzhZTJcRj%Z5_6Rs^fZH!t?c-}^e9@d?&>yXL3>057deIa?3-;%x4!+hePY-dwE zjtw~{u}Rr)G5BQT^8j$R!~tVOU_0^+1y05Xme{BrILXtaL;%h=j|e;<30Os?+zf6dZ>t-V|L3qy1dRu> zrg^2Y@>KjH$9Z;O_kUWXcgiipx~9S#o3d|`52Efy^KLT0tXD4i?qMX`5r~Y}FPo)L zl~PsKe%W^9(dw$0RouiG_{@SSdWMJ%?@j=KAuCN(QnbWDjHF5_wD!}&KdsS)Cb~%1 z6Zmr>ar|$4&=6RaA(F3n(B&I_D9q{;kUeXN>wYd^r>*;Nei1foZl2ja!N#0Cnw9p< z!3dk&S6D5RuZ*N|r+6(~wpMMxR6lPIaJ_k=66wRO_k6KJ1fRa-QbzMxHioZwd$a)n ziDqB;d)_(Sli>)264*n8?a^SbU2`a)1fAMg{h(cjh z3HFYxW#jFytFl~Y=%EuV4xtHGmD9Zm_3>7T@*BRkN^0OA*Y!?+oj0X;6BJ~>F_DAW zL6};_r$98h;-kHU=j`|%CT$mvBw;cndHUe5;6sRIQn%5+rN#_QIBk^W!5dSA2YLcb zk=_sTx;&X{G1cfdTm4Ew^N2$%9}@}j$>Yi>`AxlSc_ry60}(gGt?TP&WW-hV>l|3jg{7wyWf}yL!u4IFi+aWseMKPQ&HW9Z zX2sbR>{bBW?lOCse~;|A{=vEF<#Y)Vsa9(>)M!2su}gWrer7dr=Id$;+% zeXr|@sp}~8w%moFy#HjxMLy*1s46?I#LEqnPer(F^F-`4Frd}JQkjD)J{?B4zz=3S zPr!iAQJ?tena=~C7EH!BJ_R-?&$OxdDv$CMnEN$_AYykgXh199WZ?#lFt6)iUYuCO z)r|QN7T6uxp~#MuF{KSlc&t}B&U@b&_Wkd#YI|pG>BdhOEobrdA(kJfNY-N+C;MQE zjfc$C>cZH$5r@PNO%zroa_VpoElJ@d49-ZkVauix3~`|&BZNamLAmZ>yd?r1Y0*Nu$PPG&cKKtTf7Ts*hYPPM+eZq-M!t6q?fq>z$_tx2*{?k>pb4i9Yzs z3aYD{&NVoUZHL(p5%alzoW^ zLJACrmKl~%KsUOgpwY<5GDW0g<##OuEy1Zcp_>NEo@l8iu#xaFzpsN7e*n2Mk7#pp zk!&*tKXY9oih2U8ynTBPW?F}wK@eVYX;4fq(GXrjWYLZK}bgIB% zf(RA>C2$&oP$5@${ibH@h~>$=V8sgRRx3F%z1u}j98X~75W2cVF#kfx!et#4n`Ffi~Svb0;wYjPsVkgOaO!kx|*e-Y1^UtjYoFL%aEB*)j^M)Q^@l~3>cIBe`g%3R3jeHq*>Qnw9l|RIS>eqU|cWi@9!hShpv; zs5Z>SI0Um!aSx+emnu0rB~8B6v0KDH#OJ^?O2)0qppDAoIXOmt0oa?Dq}g(u$lb<# zt~)9ayCLxVkeO-uha@-QSn9?Bjymw{5$vaMlGADRow+NHptH>%2`T#u*LNN-?olOw zipHvbTTYwq(u$hQKOIKOr6FCd*D?*uJR%~R`cXrT)*kK5az9pPbL6<>V$XBxh(q|l zo18>36FOv~#9#ddj`?jkZ}|rXlHb2kX#PUH?`rK23~(os#rP${sCUtbP0ltBs~R4! zPo(wgj^bEg4&m|pF4(XW)BKrj`2 z*zTK0@kpP(tyrRrNu|yz{6YoedZDu@a7U^o7GcCabw0b(mp^JdJ)Bk;8$#WhOu{S& zGJN|!*Zaq>RarKs#842^9zHrtGa!54vH0vOM~`8 zjsKHQdsvV2Ehzrx|1g>)K*xK{38Y6{Wmn%olryJda5 z!^-mBVbcTmU9B11L)oJ6QkjAm;t2_f%+sTpL$1j(v*!nm!?E8=TINYaJL$)$kdt%) zjLLWc>b>A*w>2z@xfq_K1%f3Cx8L$oHLjihR~u{B)h}K$3~4?CLC|@_O+ye@@xC`G}b| zodWYIud&WlOc!cJvCHlrdIiV)K*uG?-qWL2%!9~<^+7CWVM@*}dRFk?_Y7crLe!1| zcNTBS%%PQc