From 9820c4116e796ddfa8dbffc94bf43d86eae45315 Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Tue, 29 Oct 2024 13:14:49 +0000 Subject: [PATCH 01/62] feat: add step 1 of tutorial --- .../web-components-tutorial/overview.mdx | 98 +++ .../web-components-tutorial/step-1.mdx | 811 ++++++++++++++++++ .../web-components-tutorial/wrapping-up.mdx | 28 + 3 files changed, 937 insertions(+) create mode 100644 src/pages/developing/web-components-tutorial/overview.mdx create mode 100644 src/pages/developing/web-components-tutorial/step-1.mdx create mode 100644 src/pages/developing/web-components-tutorial/wrapping-up.mdx diff --git a/src/pages/developing/web-components-tutorial/overview.mdx b/src/pages/developing/web-components-tutorial/overview.mdx new file mode 100644 index 00000000000..50a5a07bdf0 --- /dev/null +++ b/src/pages/developing/web-components-tutorial/overview.mdx @@ -0,0 +1,98 @@ +--- +title: Wrapping up +description: + Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML + app with the Carbon Design System. +tabs: + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] +--- + +import Preview from 'components/Preview'; + + + +Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML +app using the Carbon Design System. We'll teach you the ins and outs of using +Carbon components, while introducing web development best practices along the +way. + + + + + +Audience +Prerequisites +Outline + + + +Here's a [preview](https://carbon-tutorial-nextjs.vercel.app/) of what you will +build: + + + +## Audience + +This tutorial is intended for people with all amounts of web development +experience. If you want to jump straight to code, you may want to skip this +tutorial and go to the [developers getting started](/developing/get-started) +page. + +## Prerequisites + +### HTML + +This is a web development tutorial that uses HTML. If you're not sure that you +are quite ready then hop over to +[W3Schools](https://www.w3schools.com/html/default.asp) + +### SCSS (CSS preprocessor) + +This tutorial uses SASS, or rather the CSS styled flavour called SCSS. If you +need help with CSS then head again to +[W3Schools](https://www.w3schools.com/css/default.asp) for SCSS head to +[the guide](https://sass-lang.com/guide/) on sass-lang.com. + +### ECMAScript (Javascript) + +Javascript is fundemental to adding interaction to your HTML. There are many +great resources out there [W3Schools](https://www.w3schools.com/js/default.asp) +is more than enough for everything in this tutorial. + +### GitHub + +We'll be using GitHub to build an app together, so if you're new to GitHub, make +sure you've [made an account](https://github.com/join). Their +[getting started guide](https://guides.github.com/activities/hello-world) is a +great way to learn GitHub. + +### Pnpm + +This tutorial uses [Pnpm](https://pnpm.io/) for dependency management as that +was the default for `create-vite`. Make sure that you have +[Pnpm installed](https://pnpm.io/installation) prior to starting the tutorial so +you can follow along step-by-step. + +## Outline + +Each step in this tutorial illustrates a different aspect of developing web +applications with Carbon. We recommend starting with step 1, but you can pick up +any step and take it from there. + +1. [**Installing Carbon**](/developing/web-components-tutorial/step-1) + - Create a web app with the UI shell component. +2. [**Building pages**](/developing/web-components-tutorial/step-2) + - Build out pages with the grid and various components. +3. [**Using APIs**](/developing/web-components-tutorial/step-3) + - Populate the data table with an external data source. +4. [**Creating components**](/developing/web-components-tutorial/step-4) + - Extend Carbon by creating your own components. +5. [**Deploying**](/developing/web-components-tutorial/step-5) + - Build and host your app in a production environment. diff --git a/src/pages/developing/web-components-tutorial/step-1.mdx b/src/pages/developing/web-components-tutorial/step-1.mdx new file mode 100644 index 00000000000..c3fda8992fb --- /dev/null +++ b/src/pages/developing/web-components-tutorial/step-1.mdx @@ -0,0 +1,811 @@ +--- +title: Wrapping up +description: + Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML + app with the Carbon Design System. +tabs: + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] +--- + +import Preview from 'components/Preview'; + + + +Starting from a base `create-vite` app, created using the `Vanilla` and +`Javascript` options, let's install Carbon and begin using Carbon components. By +the end you will have a Vanilla app that uses the UI Shell to navigate between +pages. + + + + + +Fork, clone and branch +Build and start +Install Carbon +Install and build Sass +Add UI Shell +Create pages +Submit pull request + + + +## Preview + +A +[preview](https://carbon-tutorial-web-components-git-step-2-carbon-design-system.vercel.app/) +of what you will build: + + + +## Fork, clone and branch + +This tutorial has an accompanying GitHub repository called +[carbon-tutorial-web-components](https://github.com/carbon-design-system/carbon-tutorial-web-components) +that we'll use as a starting point for each step. + +### Fork + +To begin, fork +[carbon-tutorial-web-components](https://github.com/carbon-design-system/carbon-tutorial-web-components) +using your GitHub account. Please note when forking you must untick “Copy the +main branch only” so you can access all branches / steps of the tutorial. + +### Clone + +Go to your forked repository, copy the SSH or HTTPS URL and in your terminal run +the two commands to get the repository in your local file system and enter that +directory. + +```bash +git clone [your fork SSH/HTTPS] +cd carbon-tutorial-web-components +``` + +### Add upstream remote + +Add a remote called `upstream` so we can eventually submit a pull request once +you have completed this tutorial step. There are two choices: SSH or HTTPS + +#### SSH + +```bash +git remote add upstream git@github.com:carbon-design-system/carbon-tutorial-web-components.git +``` + +#### HTTPS + +```bash +git remote add upstream https://github.com/carbon-design-system/carbon-tutorial-web-components.git +``` + +Verify that your forked repository remotes are correct: + +```bash +git remote -v +``` + +Your terminal should output something like this: + +```bash +origin [your forked repo] (fetch) +origin [your forked repo] (push) +upstream git@github.com:carbon-design-system/carbon-tutorial-web-components.git (fetch) +upstream git@github.com:carbon-design-system/carbon-tutorial-web-components.git (push) +``` + +### Branch + +Now that we have our repository set up, let's check out the branch for this +tutorial step's starting point. Run the two commands: + +```bash +git fetch upstream +git checkout -b step-1 upstream/step-1 +``` + +## Build and start + +We have the repository forked to your GitHub account, cloned down to your +machine, and the starting branch checked out. Next, install the Next.js app's +dependencies with: + +```bash +pnpm i +``` + +After the dependencies are installed, you can start the app with: + +```bash +pnpm dev +``` + +Open Your default browser should open up with an empty page that says: +`Hello Carbon! Well, not quite yet. This is the starting point for the Carbon Web Components tutorial.` + +## Install Carbon + +Even though we installed existing dependencies, we've yet to install our any +Carbon packages. + +Stop your development server with `CTRL-C` and install Carbon dependencies with: + +```bash +pnpm add @carbon/web-components @carbon/styles +``` + +## Install Sass + +We need to run a Sass build as the Carbon styles are authored in Sass, so run +the following command to install `sass` as a dependency. + +```bash +pnpm add sass +``` + +Before restarting our app rename `style.css` to `style.scss` and change the +inport in `main.js` from `import './style.css';` to `import './style.scss';`. + +Then, start the app again. If your app's currently running, you'll need to +restart it for the new packages to be used. + +```bash +pnpm dev +``` + +The app looks as it did before. We, need to import Carbon styles have an impact. + +### Import Carbon styles + +Replace the contents of `style.scss` with + +```scss path=style.scss +@use '@carbon/styles/scss/reset'; +``` + +This has reset the styles to a common base from which Carbon applications are +built. What you see, if you run the application, is a largely unstyled page. It +is however making use of the IBM Plex font, standard in all Carbon applications. + +## A working Carbon button + +### Import the button + +Next, we'll import a `Button` from Carbon to test that our dependencies are +working properly. At the top of `main.js`, import the `Button` and delete +everything else, leaving just: + +```js path=main.js +import './style.scss'; +import '@carbon/web-components/es/components/button/button.js'; +``` + +### Tidy up our HTML file + +In `index.html` first move this script tag up inside the `head` tag, so we don't +accidentally delete it later. It's location does not matter in this tutorial. + +```html path=index.html + +``` + +Then replace the vite logo + +```html path=index.html + +``` + +with the carbon one: + +```html path=index.html + +``` + +Update the title `Vite App` to `Carbon tutorial web components`. + +### Add the button + +```html path=index.html +
+``` + +with: + +```html path=index.html +Click more than once +``` + +Congratulations, you've imported your first component! You should see a Carbon +styled button on the page. + +### Make the button do something + +Before give the button something to do, add the following to `style.scss` which +will allow our button to theme the app. + +```scss path=style.scss +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/themes'; + +:root { + @include theme(themes.$g10); + + @media (prefers-color-scheme: dark) { + @include theme(themes.$g100); + } +} + +.g10 { + @include theme(themes.$g10); +} + +.g100 { + @include theme(themes.$g100); +} +``` + +Then in `main.js` add the following code to hadle the button clicks. + +```js path=main.js +const bodyEl = document.querySelector('body'); + +// button click handler +const handleClick = () => { + bodyEl.classList.toggle('g10'); + bodyEl.classList.toggle('g100'); +}; +document.querySelector('.button').addEventListener('click', handleClick); + +// set initial theme based on preferences +if (matchMedia('prefers-color-scheme').matches) { + bodyEl.classList.add('g100'); +} else { + bodyEl.classList.add('g10'); +} +``` + +After these changes clicking the button will toggle theme classes, which in the +app changes the background color. + +## Add UI Shell + +Now we're going to add the UI shell. + +### UI Shell for the landing page + +First import the header into `main.js` + +```js path=main.js +import '@carbon/web-components/es/components/ui-shell/index'; +``` + + + +**Note:** you can find a description of the different components used in the UI +Shell in our +[Storybook](https://web-components.carbondesignsystem.com/?path=/docs/components-ui-shell--overview) +package. + + + +Before we add the header to `index.html` add the class `app` to the body tag. + +```html path=index.html + +``` + +Wrap the button as follows. + +```html path=index.html +
+ Click more than once +
+``` + +Then above `
` add our header. + +```html path=index.html +
+ + Carbon Tutorial + +
+``` + +Running the application at this point it looks like the button has dissapeared. +Add the following to `style.scss`. + +```path=style.scss +@use '@carbon/styles/scss/spacing' as *; // near top of file + +.app { + display: grid; + grid-template-rows: $spacing-09 1fr; + height: 100vh; + overflow: hidden; +} + +.main { + height: 100%; + overflow-y: auto; +} +``` + +This imports the Carbon `spacing` and establishes a grid to contain our header +and main. The overflow settings are there to ensure it is our `
` that +scrolls if needed. + +### Adding the repositories page + +After the `` closing tag add a link to a new page. + +```html path=index.html + + Repositories + +``` + +Duplicate `index.html` and name it `repositories.html`. + +In this new file replace the contents of the `main` tag with the wordS +`REPOSITORIES PAGE`. + +You can now switch between the two pages by clicking on `Repositories` and +`IBM Carbon Tutorial` in the header. This will look a little glitchy, this is +because it is a genuine page navigation, and the CSS is still being processed. +When using Web Components inside libraries such as Lit, React, Angular, Vue etc +this is resolved by taking control of the routing. We will not investigate +further here. + +### Behaving responsively + +Switch back to the landing page by clicking on `IBM Carbon Tutorial`. + +Checking responsive behavior (window narrower than 1080px) you will notice the +repositories page disappear from the menu. This goes into a sidebar controlled +by a hamburger menu as follows. + +Before the `` tag add + +```html path=index.html + +``` + +Then after the closing `` add + +```html path=index.html + + + + Repositories + + + +``` + +### Global actions + +As part of the Carbon header we can also add global actions this involves making +use of some Carbon Icons so first we will add that dependency. + +```bash +pnpm add @carbon/icons +``` + +There are various ways to add SVGs to our page. Often the SVG is copied directly +into source HTML or a bundler is used to load it. Rather than rely on a bundler +or add them inline, which can make our HTML harder to read, we will use CSS to +add refer directly to the icon files (which have been conveniently copied into +the `./public` folder) from the `@carbon/icons` pacakge. + +```scss path=style.scss +.action-icon { + width: 1.25rem; + height: 1.25rem; + background-color: $text-primary; +} + +.notification .action-icon { + mask: url(./notification.svg) no-repeat center; +} + +.user-avatar .action-icon { + mask: url(./user--avatar.svg) no-repeat center; +} + +.app-switcher .action-icon { + mask: url(./switcher.svg) no-repeat center; +} +``` + +The above CSS allows us to simply add the two classes associated with each icon +to display it in a themable way in our application. + +Next we need to add the global actions and related panels to the `index.html` +file after the closing ``. The Carbon icons are applied to the +slotted icon element using CSS. + +```html path=index.html +
+ +
+ + +
+ + +
+ +
+``` + + + +**Note:** this is the first time we have seen the `slot` attribute. Standard +HTML elements often have the ability to host child content. Web components are +more flexible allowing both the default child and named child areas, it uses the +term `slot` to refer to these. The slot attribute is used to target named slots, +in this case `icon`. + +Further details on slots can be found on the +[mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) +package. + + + +The global action buttons are passed a `panel-id` used to identify the panels +they toggle the visibility of. Just below the last global action add the +follwoing HTML. + +```html path=index.html +Notification Panel +User profile Panel +App switcher Panel +``` + +Note as web components behave like native components we can add event handlers +and interact with them directly. + +The default panel behavior simply toggles the panel when clicked. This can +result in multiple panels being open at once. Adding the following to `main.js` +changes this behavior by listening for clicks and closing the other panels. + +```js path=main.js +const handleGlobalActionClick = (ev) => { + const targetPanelId = ev.currentTarget.getAttribute('panel-id'); + const panels = document.querySelectorAll('cds-header-panel'); + // check to see if other panels are open and close them + panels.forEach((panel) => { + if (panel.id !== targetPanelId) { + panel.expanded = false; + } + }); +}; +const globalActions = document.querySelectorAll('cds-header-global-action'); +[...globalActions].forEach((action) => + action.addEventListener('click', handleGlobalActionClick) +); +``` + +### A better them switcher + +The current theme switcher is not very practical, here we will move it inside +the profile panel. + +First replace the button in `index.html` with `LANDING PAGE` leaving the main +tag looking like this. + +```html path=index.html +
LANDING PAGE
+``` + +In `main.js` remove this code handling the button click and initial load. + +```js path=main.js +// button click handler +const handleClick = () => { + bodyEl.classList.toggle('g10'); + bodyEl.classList.toggle('g100'); +}; +document.querySelector('.button').addEventListener('click', handleClick); + +// set initial theme based on preferences +if (matchMedia('(prefers-color-scheme: dark)')) { + bodyEl.classList.add('g100'); +} else { + bodyEl.classList.add('g10'); +} +``` + +Still in `main.js` add imports for checkbox and content-switcher. + +```js path=main.js +import '@carbon/web-components/es/components/checkbox/index'; +import '@carbon/web-components/es/components/content-switcher/index'; +``` + +Locate the `user-profile-panel` in `index.html` and replace it's content with +the following. + +```html path=index.html +
+

User profile Panel

+ + + +
+ Light theme + + +
+ System theme + + +
+ Dark theme + + + + Global header reverse theme +
+``` + +This adds a content switcher and checkbox to our user profile side panel. If you +view it now it works but is in need of some styling. + +These styles import the Carbon typeography features, define a layout for our +panel, and set the title size. + +```scss path=style.scss +@use '@carbon/styles/scss/type' as *; // place at top of file + +.header-panel__content { + display: flex; + flex-direction: column; + gap: $spacing-05; + padding: $spacing-05; +} + +.header-panel__title { + @include type-style('productive-heading-02'); +} +``` + +As per the global actions we will use additional styling to add icons to our +content switcher. + +```scss path=style.scss +.theme-selector__icon { + width: 1.25rem; + height: 1.25rem; + background-color: $text-primary; +} + +cds-content-switcher-item[selected] .theme-selector__icon { + /* switch icon color when selected */ + background-color: $background; +} + +.theme-selector__icon--light { + -webkit-mask: url(./sun.svg) no-repeat center; + mask: url(./sun.svg) no-repeat center; +} + +.theme-selector__icon--system { + -webkit-mask: url(./brightness-contrast.svg) no-repeat center; + mask: url(./brightness-contrast.svg) no-repeat center; +} + +.theme-selector__icon--dark { + -webkit-mask: url(./moon.svg) no-repeat center; + mask: url(./moon.svg) no-repeat center; +} +``` + +Currently the theme switcher looks good but needs the following Javascript to +switch themes. + +```js path=main.js +const handleSwitch = (ev) => { + // Applies new theme or defers to system preferences by removing theme + switch (ev.detail.item.value) { + case 'light': + bodyEl.classList.remove('g100'); + bodyEl.classList.add('g10'); + break; + case 'dark': + bodyEl.classList.remove('g10'); + bodyEl.classList.add('g100'); + break; + default: + bodyEl.classList.remove('g10'); + bodyEl.classList.remove('g100'); + } +}; +document + .querySelector('.theme-selector') + .addEventListener('cds-content-switcher-selected', handleSwitch); + +const handleHeaderCompliment = (ev) => { + document + .querySelector('cds-header') + .classList.toggle('compliment', ev.target.checked); +}; +document + .querySelector('.theme-header__compliment') + .addEventListener('cds-checkbox-changed', handleHeaderCompliment); +``` + +At this point our theme switcher is mostly working, only the checkbox +`Global header reverse theme` appears to do nothing. In the script above the +class `compliment` is being toggled on and off in the `
` tag. + +A little more CSS is needed to make this functionality work. Add the following +in addition to the existing theme classes. + +```scss path=style.scss +:root .compliment { + @include theme(themes.$g100); + + @media (prefers-color-scheme: dark) { + @include theme(themes.$g10); + } +} + +.g10 .compliment { + @include theme(themes.$g100); +} + +.g100 .compliment { + @include theme(themes.$g10); +} +``` + +Then replace the cds-header tags `g100` class in `index.html` with `compliment`. + +```html path=index.html + +``` + +### Skip to content + +When creating navigation headers, it's important to have a `Skip to content` +link so keyboard users can skip the navigation items and go straight to the main +content. + +Import th ecomponent in `main.js` + +```js path=main.js +import '@carbon/web-components/es/components/skip-to-content/index.js'; +``` + +Add in to our header in `index.html` as the first child of our `cds-header` +component. + +```html path=index.html + + + +``` + +Then update the main ttag to include the id `main-content` + +```html path=index.html +
+``` + +### Update the repositories page + +One final task before completing step 1. Our repositories page has missed out on +all of the HTML updates we have been making to the landing page. Simply copy the +contents of `index.html` to `repositories.html` and replace `LANDING` with +`REPOSITORIES`. + +NOTE: We could do something better than duplicating our pages. This could be +pure Javascript, HTML templates or native Web Components. However, that might +distract from the message that no library is required. + +## Submit pull request + +We're going to submit a pull request to verify completion of this tutorial step +and demonstrate a couple of related concepts. + +### Git commit and push + +Before we can create a pull request, stage and commit all of your changes: + +```bash +git add --all && git commit -m "feat(tutorial): complete step 1" +``` + +Then, push to your repository: + +```bash +git push origin step-1 +``` + + + +**Note:** If your Git remote protocol is HTTPS instead of SSH, you may be +prompted to authenticate with GitHub when you push changes. If your GitHub +account has two-factor authentication enabled, we recommend that you follow +these instructions to +[create a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line). +That lets you use your token instead of password when performing Git operations +over HTTPS. + + + + + +**Note:** If you receive a `non-fast-forward` error, it's likely that your +forked repository is behind the original repository and needs to be updated. +This can happen if the tutorial was updated after you began working on it. To +fix, run `git pull upstream step-1` to merge the changes into your branch, then +you can try pushing again. Or, you can +[manually merge](https://help.github.com/en/articles/syncing-a-fork) in the +upstream changes. + + + +### Pull request (PR) + +Finally, visit +[carbon-react-tutorial](https://github.com/carbon-design-system/carbon-tutorial-web-components) +to "Compare & pull request". In doing so, make sure that you are comparing to +`step-1` into `base: step-1`. Take notice of the +[Netlify](https://www.netlify.com) bot that deploys a preview of your PR every +time that you push new commits. These previews can be shared and viewed by +anybody to assist the PR review process. + + + +**Note:** Expect your tutorial step PRs to be reviewed by the Carbon team but +not merged. We'll close your PR so we can keep the repository's remote branches +pristine and ready for the next person! + + + + + +**Note:** If your PR fails the CircleCI test with the error +`Can't make a request in offline mode`, try running the following command: +`rm -rf .pnpm-offline-mirror node_modules && pnpm cache clean && pnpm install`. +Add and commit the changes once this completes, and try pushing again. + + diff --git a/src/pages/developing/web-components-tutorial/wrapping-up.mdx b/src/pages/developing/web-components-tutorial/wrapping-up.mdx new file mode 100644 index 00000000000..ee609c491d8 --- /dev/null +++ b/src/pages/developing/web-components-tutorial/wrapping-up.mdx @@ -0,0 +1,28 @@ +--- +title: Wrapping up +description: + Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML + app with the Carbon Design System. +tabs: + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] +--- + + + +Thanks for completing our tutorial and helping us improve it along the way. If +you want to show the world your new skills, you can share your deployed +application and showcase the five pull requests you have completed with the +green `status: approved` label. + + + +### How can I show others my completion status? + +- Proof of your completion of the tutorial can be seen by filtering the PR list + to show your five PRs with the `status: approved` label. + +- You can filter the pull request list to show only pull requests authored by + your username. Replace `YOURUSERNAMEHERE` with your username in the following + link: + + - https://github.com/carbon-design-system/carbon-tutorial-web-components/pulls?q=author%3AYOURUSERNAMEHERE From a39378d89ec2913badb6a20f7f25a193c49e9548 Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Wed, 30 Oct 2024 09:47:43 +0000 Subject: [PATCH 02/62] feat: step 2 complete --- .../web-components-tutorial/overview.mdx | 15 +- .../web-components-tutorial/step-1.mdx | 37 +- .../web-components-tutorial/step-2.mdx | 654 ++++++++++++++++++ .../web-components-tutorial/wrapping-up.mdx | 2 +- 4 files changed, 676 insertions(+), 32 deletions(-) create mode 100644 src/pages/developing/web-components-tutorial/step-2.mdx diff --git a/src/pages/developing/web-components-tutorial/overview.mdx b/src/pages/developing/web-components-tutorial/overview.mdx index 50a5a07bdf0..bbe992a9e4a 100644 --- a/src/pages/developing/web-components-tutorial/overview.mdx +++ b/src/pages/developing/web-components-tutorial/overview.mdx @@ -2,7 +2,7 @@ title: Wrapping up description: Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML - app with the Carbon Design System. + app using Web Components from the Carbon Design System. tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] --- @@ -12,9 +12,16 @@ import Preview from 'components/Preview'; Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML -app using the Carbon Design System. We'll teach you the ins and outs of using -Carbon components, while introducing web development best practices along the -way. +app using Web Components from the Carbon Design System. We'll teach you the ins +and outs of using Carbon components, while introducing web development best +practices along the way. + +Web components are native custom components based on standards that can be used +in any modern browser with any JavaScript library or framework just like plain +HTML elements. + +For more information +[see Web Components](https://www.webcomponents.org/introduction). diff --git a/src/pages/developing/web-components-tutorial/step-1.mdx b/src/pages/developing/web-components-tutorial/step-1.mdx index c3fda8992fb..601c981e46c 100644 --- a/src/pages/developing/web-components-tutorial/step-1.mdx +++ b/src/pages/developing/web-components-tutorial/step-1.mdx @@ -2,7 +2,7 @@ title: Wrapping up description: Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML - app with the Carbon Design System. + app using Web Components from the Carbon Design System. tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] --- @@ -182,7 +182,7 @@ Next, we'll import a `Button` from Carbon to test that our dependencies are working properly. At the top of `main.js`, import the `Button` and delete everything else, leaving just: -```js path=main.js +```javascript path=main.js import './style.scss'; import '@carbon/web-components/es/components/button/button.js'; ``` @@ -253,7 +253,7 @@ will allow our button to theme the app. Then in `main.js` add the following code to hadle the button clicks. -```js path=main.js +```javascript path=main.js const bodyEl = document.querySelector('body'); // button click handler @@ -282,7 +282,7 @@ Now we're going to add the UI shell. First import the header into `main.js` -```js path=main.js +```javascript path=main.js import '@carbon/web-components/es/components/ui-shell/index'; ``` @@ -499,7 +499,7 @@ The default panel behavior simply toggles the panel when clicked. This can result in multiple panels being open at once. Adding the following to `main.js` changes this behavior by listening for clicks and closing the other panels. -```js path=main.js +```javascript path=main.js const handleGlobalActionClick = (ev) => { const targetPanelId = ev.currentTarget.getAttribute('panel-id'); const panels = document.querySelectorAll('cds-header-panel'); @@ -530,7 +530,7 @@ tag looking like this. In `main.js` remove this code handling the button click and initial load. -```js path=main.js +```javascript path=main.js // button click handler const handleClick = () => { bodyEl.classList.toggle('g10'); @@ -548,7 +548,7 @@ if (matchMedia('(prefers-color-scheme: dark)')) { Still in `main.js` add imports for checkbox and content-switcher. -```js path=main.js +```javascript path=main.js import '@carbon/web-components/es/components/checkbox/index'; import '@carbon/web-components/es/components/content-switcher/index'; ``` @@ -640,7 +640,7 @@ cds-content-switcher-item[selected] .theme-selector__icon { Currently the theme switcher looks good but needs the following Javascript to switch themes. -```js path=main.js +```javascript path=main.js const handleSwitch = (ev) => { // Applies new theme or defers to system preferences by removing theme switch (ev.detail.item.value) { @@ -710,7 +710,7 @@ content. Import th ecomponent in `main.js` -```js path=main.js +```javascript path=main.js import '@carbon/web-components/es/components/skip-to-content/index.js'; ``` @@ -786,26 +786,9 @@ upstream changes. ### Pull request (PR) Finally, visit -[carbon-react-tutorial](https://github.com/carbon-design-system/carbon-tutorial-web-components) +[carbon-web-components-tutorial](https://github.com/carbon-design-system/carbon-tutorial-web-components) to "Compare & pull request". In doing so, make sure that you are comparing to `step-1` into `base: step-1`. Take notice of the [Netlify](https://www.netlify.com) bot that deploys a preview of your PR every time that you push new commits. These previews can be shared and viewed by anybody to assist the PR review process. - - - -**Note:** Expect your tutorial step PRs to be reviewed by the Carbon team but -not merged. We'll close your PR so we can keep the repository's remote branches -pristine and ready for the next person! - - - - - -**Note:** If your PR fails the CircleCI test with the error -`Can't make a request in offline mode`, try running the following command: -`rm -rf .pnpm-offline-mirror node_modules && pnpm cache clean && pnpm install`. -Add and commit the changes once this completes, and try pushing again. - - diff --git a/src/pages/developing/web-components-tutorial/step-2.mdx b/src/pages/developing/web-components-tutorial/step-2.mdx new file mode 100644 index 00000000000..51f67c5d60e --- /dev/null +++ b/src/pages/developing/web-components-tutorial/step-2.mdx @@ -0,0 +1,654 @@ +--- +title: Wrapping up +description: + Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML + app using Web Components from the Carbon Design System. +tabs: + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] +--- + +import Preview from 'components/Preview'; + + + +Now that we have our app using the UI Shell, it's time to build a few static +pages. In this step, we'll become comfortable with the Carbon grid and various +Carbon components. + + + + + +Fork, clone and branch +Add landing page grid +Build landing page +Style landing page +Add repo page grid +Build repo page +Style repo page +Submit pull request + + + +## Preview + +A +[preview](https://carbon-tutorial-nextjs-git-step-3-carbon-design-system.vercel.app/) +of what you'll build: + + + +## Fork, clone and branch + +This tutorial has an accompanying GitHub repository called +[carbon-tutorial-web-components](https://github.com/carbon-design-system/carbon-tutorial-web-components) +that we'll use as a starting point for each step. If you haven't forked and +cloned that repository yet, and haven't added the upstream remote, go ahead and +do so by following the [step 1 +instructions]([previous step](/developing/web-components-tutorial/step-1#fork-clone-and-branch). + +### Branch + +With your repository all set up, let's check out the branch for this tutorial +step's starting point. + +```bash +git fetch upstream +git checkout -b step-2 upstream/step-2 +``` + + + +**Note:** This builds on top of step 1, but be sure to check out the upstream +step 2 branch because it includes the static assets required to get through this +step. + + + +### Build and start app + +Install the app's dependencies (in case you're starting fresh in your current +directory and not continuing from the previous step): + +```bash +pnpm i +``` + +Then, start the app: + +```bash +pnpm dev +``` + +You should see something similar to where the +[previous step](/developing/web-components-tutorial/step-1#fork-clone-and-branch/step-1) +left off. + +## Add landing page grid + +Let's add our grid elements to our `LandingPage` page component. + +Now the Carbon grid does not currently exist in web component form. This may be +because it is difficult to apply a CSS grid when traversing the shadow DOM of a +grid and column component. This leaves us with writing our grid and columns out +long hand, writing the styles ourselves, or using javascript utility to add +classes to our columns. + +For the purposes of this tutorial the classes are written out long hand. In + +In `index.html` replace `LANDING PAGE` with + +```html path=index.html +
+
+ 1 +
+
+
+
+ 7/16 +
+
+ 8/16 +
+
+
+
+
+
+ 1/4 +
+
+ 1/4 +
+
+ 1/4 +
+
+ 1/4 +
+
+
+
+``` + + + +**Grid education** There are many options for the Carbon Grid. For more +information review +[2x Grid](https://carbondesignsystem.com/elements/2x-grid/overview/) on the +Carbon design system website. If apply classes manually it is also well worth +checking out the +[CSS Grid Demo](https://carbon-elements.netlify.app/grid/examples/css-grid/) to + + + +Then import the grid styles in `style.scss`. + +```scss path=style.scss +@use '@carbon/styles/scss/grid'; +``` + +In order to use the grid, we need to wrap everything in a `cds--css-grid`. +Because we're building with the new CSS Grid, we won't be using typical rows. We +have used a combination of `cds--css-grid-column` classes to create our layout. + +The CSS Grid is a 16 column grid. The column widths and positions are specified +using a combination of `cds--BP:col-span-N` and `cds--BP:col-start-N`classes. +Where BP is the Carbon breakpoint and N is column count or starting position. +For example, `
` means the +column will start at column 9 and span 8 columns when the large (lg) breakpoint +is active. large breakpoint. + +https://carbon-elements.netlify.app/grid/examples/css-grid/ + +We've included the designs for this tutorial app in the `design.figma` file +found as a top-level file in the `carbon-tutorial` repository. But, if you don't +have Sketch installed and available to inspect the design, we'll provide +screenshots. + +![Landing page grid](../shared/step-2/images/landing-layout.png) + +Landing page grid + + + +**Pro tip:** `SHIFT-G` toggles the layout in Figma. + + + +xxx HERE WE ARE + +## Build landing page + +We'll start adding HTML elements and components by row. + +### First row + +In our first row we'll need a `Breadcrumb` component. First, let's import the +components we need. + +```javascript path=main.js +import '@carbon/web-components/es/components/breadcrumb/index'; +``` + +We can now add our component to the first row, replace the content of +`page--landing__banner` with: + +```html path=index.html + + + Getting started + + +

Design & build with Carbon

+``` + +### Second row + +In our second row we'll need `Tabs` and `Button` components. Add the following +import: + +```javascript path=main.js +import '@carbon/web-components/es/components/tabs/index'; +``` + +The tabs come next going inside `page--landing__r2` and before the sub +`cds--subgrid`. + +```html path=index.html + + About + Design + Develop + +``` + +Each of the `cds-tab` components has a `target` attribute. This is used to +identify the content visible when that tab is selected. + +Wrap the subgrid element immediately after the closing `` with the +following. This is where we will place our first tab panel. + +```html path=index.html +
+ ... grid element is here +
+``` + +Replace the content of the first column `7/16` with: + +```html path=index.html +

What is Carbon?

+

+ Carbon is IBM’s open-source design system for digital products and + experiences. With the IBM Design Language as its foundation, the system + consists of working code, design tools and resources, human interface + guidelines, and a vibrant community of contributors. +

+Learn more +``` + +The second column content `8/16` is replaced with: + +```html path=index.html +Carbon illustration +``` + +The `tab-illo.png` image is already located in the `public` folder. + +After the closing `
` of `id="panel-about"`, still inside +`page--landing__r2` we add two further tab panels. This one + +```html path=index.html +
+
+
+
+

+ Rapidly build beautiful and accessible experiences. The Carbon kit + contains all resources you need to get started. +

+
+
+
+
+``` + +and + +```html path=index.html +
+
+
+
+

+ Carbon provides components and styles for all. Whether using Vanilla, + Web Components, React, or another reactive library, you can build with + Carbon. +

+
+
+
+
+``` + +### Third row + +Here we replace all four columns entirely adding some offsets for medium and +large column sizes after the first column. + +```html +
+ The principles +
+
+ Carbon is open +
+
+ Carbon is modular +
+
+ Carbon is consistent +
+``` + +## Style landing page + +### First row + +Row one styling is fairly straight forward with some typography and positional +adjustment so to align it with our other content. + +```scss path=style.scss +.page { + padding: 0; + + > * { + padding-inline: $spacing-06; + margin: 0; + } +} + +.page--landing__banner { + padding-block: $spacing-05 $spacing-13; + background: $layer-01; + box-shadow: $spacing-06 0 0 $layer-01, -1 * $spacing-06 0 0 $layer-01; +} + +.page--landing__heading { + @include type-style('productive-heading-05'); + + margin: 0; +} +``` + +### Second row + +The styling for the second row adds further layout and typography changes. It +also positions the image and prevents it from causing horizontal overflow. In +order to make use of the Carbon SCSS mixin `breakpoint-down` we also add the +breakpoint import to our list of `@use` near the top of the file. + +```scss path=style.scss +@use '@carbon/styles/scss/breakpoint' as *; // add near top of file + +.page--landing__illo { + max-width: 100%; + float: inline-end; + height: auto; +} + +@include breakpoint-down(md) { + .page--landing__illo { + max-width: 528px; + width: 100%; + height: 100%; + float: inline-start; + } +} + +.page--landing__tabs { + margin: -1 * $spacing-08 0 $spacing-08; +} + +.page--landing__tab-content { + padding-block: $spacing-06; +} + +.page--landing__subheading { + @include type-style('productive-heading-03'); + + font-weight: 600; +} + +.page--landing__p { + @include type-style('productive-heading-03'); + margin-top: $spacing-06; + margin-bottom: $spacing-08; +} +``` + +### Third row + +```scss path=style.scss +.page--landing__r3 { + padding-block: $spacing-09; + background: $layer-01; +} +``` + +Ta-da! You should see a step 2 complete landing page! Now we can move on to the +repo page. + +## Add repo page content + +### First a grid to contain our content + +Now in our `repositories` page we will first add a grid wrapping +`REPOSITORIES PAGE` + +```html path=repositories.html +
+
+ REPOSITORIES PAGE +
+
+: +``` + +Add a minimal amount of styling to move our content away from the edge of the +page in `style.scss`. + +```scss style.scss +.repo-page__r1 { + padding-block: $spacing-05; +} +``` + +### Adding a table + +Before we can add the table we need to import it in `main.js` + +```javascript path=main.js +import '@carbon/web-components/es/components/data-table/index.js'; +``` + +Next we add the table header and column titles. + +```html path=repositories.html + + Carbon Repositories + A collection of public Carbon repositories. + + + Name + Created + Updated + Open issues + Stars + Links + + + Table body goes here + +``` + +The table header should already be visible on the repositories page. + +Now we can add the rows replacing `Table body goes here` with: + +```html path=repositories.html + + Repo 1 + Date + Date + 123 + 456 + Links + +Repo description + + Repo 2 + Date + Date + 123 + 456 + Links + +Repo description + + Repo 3 + Date + Date + 123 + 456 + Links + +Repo description +``` + +### Using HTML templates + +With the app running we can see that the repositories page now hosts a table. +However, it is not realistic to populate a table with hard coded data way so +we'll refactor to build the table from data. + +This involves the use of HTML Templates, take a look at +[W3 Schools](https://www.w3schools.com/tags/tag_template.asp) if you need a +quick refresh. + +In `index.html` remove the contents of the `` tag and return it to +`Table body goes here`. + +Then before the end of the HTML document add the following to define our table +row template. + +```html path=repositories.html + +``` + +Next in `main.js` add the following data that we will use to populate the table +rows. + +```javascript path=main.js +// cds-table-row data +let data = [ + { + name: 'Repo A', + created: 'Date', + updated: 'Date', + openIssues: 123, + stars: 456, + links: 'Links', + expansion: 'Row description', + }, + { + name: 'Repo B', + created: 'Date', + updated: 'Date', + openIssues: 123, + stars: 456, + links: 'Links', + expansion: 'Row description', + }, + { + name: 'Repo C', + created: 'Date', + updated: 'Date', + openIssues: 123, + stars: 456, + links: 'Links', + expansion: 'Row description', + }, +]; +``` + +Next we create the function `updateTable` and make a call to it to populate add +our rows. + +```javascript path=main.js +const updateTable = () => { + const tableRowTemplate = document.querySelector( + 'template#template--table-row' + ); + const tableBody = document.querySelector('cds-table-body'); + if (tableBody && tableRowTemplate) { + tableBody.innerHTML = ''; + data.forEach((row) => { + let newRow = tableRowTemplate.content.cloneNode(true); + const keys = Object.keys(row); + keys.forEach((key) => { + const keyEl = newRow.querySelector(`[key="${key}"]`); + keyEl.innerHTML = row[key]; + }); + tableBody.appendChild(newRow); + }); + } +}; + +updateTable(); +``` + +Verify that the table rows are being generated by changing the data and running +the app. + +Congratulations! We've now created our static repo page! + +## Submit pull request + +We're going to submit a pull request to verify completion of this tutorial step. + +### Git commit and push + +Before we can create a pull request, format your code, then stage and commit all +of your changes: + +```bash +pnpm format +git add --all && git commit -m "feat(tutorial): complete step 2" +``` + +Then, push to your repository: + +```bash +git push origin step-2 +``` + + + +**Note:** Having issues pushing your changes? +[Step 1](/developing/web-components-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. + + + +### Pull request (PR) + +Finally, visit +[carbon-web-components-tutorial](https://github.com/carbon-design-system/carbon-tutorial) +to "Compare & pull request". In doing so, make sure that you are comparing to +`step-2` into `base: step-2`. diff --git a/src/pages/developing/web-components-tutorial/wrapping-up.mdx b/src/pages/developing/web-components-tutorial/wrapping-up.mdx index ee609c491d8..7df9e889252 100644 --- a/src/pages/developing/web-components-tutorial/wrapping-up.mdx +++ b/src/pages/developing/web-components-tutorial/wrapping-up.mdx @@ -2,7 +2,7 @@ title: Wrapping up description: Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML - app with the Carbon Design System. + app using Web Components from the Carbon Design System. tabs: ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] --- From ae716da35e424363e526ab69275002a5d2bfa140 Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Wed, 30 Oct 2024 12:10:17 +0000 Subject: [PATCH 03/62] feat: step 3 complete --- .../web-components-tutorial/step-1.mdx | 4 +- .../web-components-tutorial/step-2.mdx | 3 +- .../web-components-tutorial/step-3.mdx | 489 ++++++++++++++++++ 3 files changed, 493 insertions(+), 3 deletions(-) create mode 100644 src/pages/developing/web-components-tutorial/step-3.mdx diff --git a/src/pages/developing/web-components-tutorial/step-1.mdx b/src/pages/developing/web-components-tutorial/step-1.mdx index 601c981e46c..1c0b529b5d4 100644 --- a/src/pages/developing/web-components-tutorial/step-1.mdx +++ b/src/pages/developing/web-components-tutorial/step-1.mdx @@ -114,8 +114,8 @@ git checkout -b step-1 upstream/step-1 ## Build and start We have the repository forked to your GitHub account, cloned down to your -machine, and the starting branch checked out. Next, install the Next.js app's -dependencies with: +machine, and the starting branch checked out. Next, install the app's +dependencies (Vite) with: ```bash pnpm i diff --git a/src/pages/developing/web-components-tutorial/step-2.mdx b/src/pages/developing/web-components-tutorial/step-2.mdx index 51f67c5d60e..4c862079e67 100644 --- a/src/pages/developing/web-components-tutorial/step-2.mdx +++ b/src/pages/developing/web-components-tutorial/step-2.mdx @@ -321,7 +321,7 @@ and Here we replace all four columns entirely adding some offsets for medium and large column sizes after the first column. -```html +```html path=index.html
The principles @@ -598,6 +598,7 @@ const updateTable = () => { const tableBody = document.querySelector('cds-table-body'); if (tableBody && tableRowTemplate) { tableBody.innerHTML = ''; + // iterate over data and render rows data.forEach((row) => { let newRow = tableRowTemplate.content.cloneNode(true); const keys = Object.keys(row); diff --git a/src/pages/developing/web-components-tutorial/step-3.mdx b/src/pages/developing/web-components-tutorial/step-3.mdx new file mode 100644 index 00000000000..1b12a819d77 --- /dev/null +++ b/src/pages/developing/web-components-tutorial/step-3.mdx @@ -0,0 +1,489 @@ +--- +title: Wrapping up +description: + Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML + app using Web Components from the Carbon Design System. +tabs: + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] +--- + +import Preview from 'components/Preview'; + + + +This step takes our static components and populates them with data from the +GitHub GraphQL API – loading states and all. We'll be displaying Carbon +repository information in a data table. + + + + + +Fork, clone and branch +Install dependencies +Fetch data +Populate data table +Add loading +Add pagination +Submit pull request + + + +### Preview + +The [GitHub REST API](https://docs.github.com/en/rest?apiVersion=2022-11-28) is +very well documented, we'll use it to fetch Carbon-related data for this Carbon +tutorial. + +To do so, we'll be using +[Octokit Core](https://github.com/octokit/core.js/#readme), a client that makes +it easy to interact with GitHub's APIs. + +A +[preview](https://carbon-tutorial-nextjs-git-step-4-carbon-design-system.vercel.app/) +of what you will build (see repositories page): + + + +## Fork, clone and branch + +This tutorial has an accompanying GitHub repository called +[carbon-tutorial-web-components](https://github.com/carbon-design-system/carbon-tutorial-web-components) +that we'll use as a starting point for each step. If you haven't forked and +cloned that repository yet, and haven't added the upstream remote, go ahead and +do so by following the [step 1 +instructions]([previous step](/developing/web-components-tutorial/step-1#fork-clone-and-branch). + +### Branch + +With your repository all set up, let's check out the branch for this tutorial +step's starting point. + +```bash +git fetch upstream +git checkout -b step-3 upstream/step-3 +``` + +### Build and start app + +Install the app's dependencies and build the app: + +```bash +pnpm i +``` + +Then, start the app: + +```bash +pnpm start +``` + +You should see something similar to where the +[previous step](/developing/web-components-tutorial/step-1#fork-clone-and-branch/step-2) +left off. Stop your app with `CTRL-C` and let's get everything installed. + +## Install dependencies + +We'll need to install `@octokit/core`, a package that allows us to query GitHub +APIs easily. Stop your development server with `CTRL-C` and install the octokit +dependency with: + +```bash +pnpm add @octokit/core +``` + +Then, start the app again. If your app's currently running, you'll need to +restart it. + +```bash +pnpm dev +``` + +## Fetch and render data + +### Imports + +Add the following import Octokit into `main.js` and create a new instance of +Octokit. + +```javascript path=main.js +import { Octokit } from '@octokit/core'; + +const octokitClient = new Octokit({}); +``` + +### API Request + +Next, we'll assemble our GitHub API request to fetch a list of repositories that +belong to the `carbon-design-system` GitHub organization. + +First empty the data array in `main.js` + +```javascript path=main.js +let data = []; +``` + +Then add the function `fetchData` calling it immediately afterwards. + +```javascript path=smain.js +const fetchData = async () => { + const res = await octokitClient.request('GET /orgs/{org}/repos', { + org: 'carbon-design-system', + per_page: 75, + sort: 'updated', + direction: 'desc', + }); + + if (res.status === 200) { + data = res.data.map((row) => ({ + name: row.name, + created: new Date(row.created_at).toLocaleDateString(), + updated: new Date(row.updated_at).toLocaleDateString(), + openIssues: row.open_issues_count, + stars: row.stargazers_count, + links: 'link', + expansion: row.description, + })); + + // replace table here + // replaceSkeleton(); + } else { + console.log('Error obtaining repository data'); + } +}; +fetchData(); +``` + +### Rendering the data + +If you have the application running then the only change you see is an empty +table. Let's fix that next. + +In `repositories.html` just above the `` add a table skeleton. + +```html path=index.html + +``` + +Then move the `` into a template called `template--table` at the +bottom of the file. + +```html path=index.html + +``` + +With the application running the repositories page now shows the skeleton table. +Skeleton components are used in the Carbon design system to information is still +being loaded. For further details on +[Carbon loading patterns](https://carbondesignsystem.com/patterns/loading-pattern/). + +Returning to `main.js` we will makes use of the fetched data to replace the +skeleton table. Find the current call to `updateTable` + +```javascript path=main.js +updateTable(); +``` + +and replace it with the new function called `replaceSkeleton` below: + +```javascript path=main.js +const replaceSkeleton = () => { + const tableSkeleton = document.querySelector('cds-table-skeleton'); + const tableTemplate = document.querySelector('template#template--table'); + + if (tableSkeleton && tableTemplate) { + tableSkeleton.replaceWith(tableTemplate.content.cloneNode(true)); + // update table rows + updateTable(); +}; +``` + +This function locates the `template--table` and replaces the skeleton with it. +It then makes a call to `updateTable` to add the rows. + +We are now ready to display the data by adjusting the function `fetchData` by +ucommenting the call to `replaceSkeleton`. + +```javascript path=main.js +// replace table here +// replaceSkeleton(); +``` + +to leave: + +```javascript path=main.js +// replace table here +replaceSkeleton(); +``` + +At this point when you refresh the `repositories` page the table skeleton is +briefly shown before the table is populated with data from github. The link +column however just shows `link` we will fix that next. + +At the top of `main.js` import the `cds-link` component. + +```javascript path=main.js +import '@carbon/web-components/es/components/link/index'; +``` + +Find `links: 'link'` in the `fetchData` function and replace it with: + +```javascrpt path=main.js +links: { url: row.html_url, homepage: row.homepage }, +``` + +In our `updateTable` function we need to do something different for the links +key. Replace + +```js +keyEl.innerHTML = row[key]; +``` + +with + +```js +if (key === 'links') { + keyEl.innerHTML = `
    +
  • + Github +
    • +
  • + Homepage +
    • +
`; +} else { + keyEl.innerHTML = row[key]; +} +``` + +Now it we could have added the HTML for the links in `repositories.html` but +this serves to demonstrate that as with standard HTML tags it is possible to +simply insert Carbon Web Components as innerHTML using a string. Just a little +bit of CSS is needed to present this as per our tutorial design. + +Open `styles.scss` and add the following. + +```scss path=style.scss +.link-list { + display: flex; + list-style: none; + padding: 0; +} + +.link-list li:not(:last-child) { + padding-inline-end: $spacing-02; + + &::after { + content: '|'; + display: inline; + } +} + +.link-list li:not(:first-child) { + padding-left: $spacing-02; +} +``` + +## Pagination + +The data rendered in our table produces quite a tall page which grows with each +new Carbon repository. To complete our repositories page we will add pagination +to the table. + +In `main.js` import the pagination component. + +```javascript path=main.js +import '@carbon/web-components/es/components/pagination/index'; +``` + +Now, as part of the `template--table` template we can add the pagination to +`repositories.html` after the closing `` tag. + +```html path=repositories.html + + 10 + 20 + 30 + 40 + 50 + +``` + + + +**Note:** The `Pagination` component isn't inherently connected in any way to +the `DataTable` - we need to tell it what to do when a change occurs using the +`onChange` prop. This includes both page size changes and displaying different +rows. + + + + + +**Note:** Like the other Carbon Web Components components, `Pagination` +component examples can be found in +[Storybook](https://web-components.carbondesignsystem.com/?path=/story/components-pagination--overview) +by browsing the story and knobs. + + + +If you scroll to the bottom of the `repositories` page in the browser you should +see the pagination component rendered. + +Back in `main.js` next to the declaration of our data array add two further +variables to work with the pagination component. Where we declare the data +variable, add variables for page size and row index. + +```javascript path=main.js +let data = []; +let pageSize = 10; +let firstRowIndex = 0; +``` + +Next we need to add some script to handle events raised by the pagination +component and update it with the values defined for `pageSize` and +`firstRowIndex`. + +```javascript path=main.js +const handlePageChangeCurrent = ({ detail }) => { + firstRowIndex = (detail.page - 1) * detail.pageSize; + // Unfortunately not working - seems to lose the expanding column + // https://github.com/carbon-design-system/carbon/issues/#17894 + + udpateTable(); +}; + +const handlePageSizeChange = ({ detail }) => { + // Unfortunately not working + // https://github.com/carbon-design-system/carbon/issues/17713 + + pageSize = detail.pageSize; +}; + +const updatePagination = () => { + // update pagination to match data fetched + const paginationEl = document.querySelector('cds-pagination'); + paginationEl.setAttribute('total-items', data.length); + + setTimeout(() => { + // defer until after the dom is updated + paginationEl.addEventListener( + 'cds-pagination-changed-current', + handlePageChangeCurrent + ); + paginationEl.addEventListener( + 'cds-pagination-changed-page-size', + handlePageSizeChange + ); + }, 10); +}; +``` + +Add a call to `updatePagination` in `replaceSkeleton` just after the call to +`updateTable` + +```javascript path=main.js +// update table rows +updateTable(); + +// update pagination +updatePagination(); +``` + +When triggered the handlers update `firstRowIndex` and `pageSize` before calling +`updateTable` which re-renders our table rows. Before it all works we need to +make a change to `updateTable` to render just the rows on the current page. + +Currently we iterate over the data as follows: + +```javascript path=main.js +// iterate over data and render rows +data.forEach((row) => { + // rows update here +}); +``` + +Change this introducing a filter before the `forEach`. + +```javascript path=main.js +// iterate over data and render rows +data + .filter((v, i) => i >= firstRowIndex && i < firstRowIndex + pageSize) + .forEach((row) => { + // rows update here + }); +``` + +Refreshing the repositories page should now show just ten rows. Try changing the +page size and the current page number, this should result in new data being +loaded. + +That does it! Your data table should fetch GitHub data on first render. You can +expand each row to see the repository's description. You can modify the +pagination items per page and cycle through pages or jump to a specific page of +repositories. + +## Submit pull request + +We're going to submit a pull request to verify completion of this tutorial step. + +### Git commit and push + +Before we can create a pull request, format your code, then stage and commit all +of your changes: + +```bash +pnpm format +git add --all && git commit -m "feat(tutorial): complete step 3" +``` + +Then, push to your repository: + +```bash +git push origin step-3 +``` + + + +**Note:** Having issues pushing your changes? +[Step 1](/developing/web-components-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. + + + +### Pull request (PR) + +Finally, visit +[carbon-tutorial-web-components](https://github.com/carbon-design-system/carbon-tutorial-web-components) +to "Compare & pull request". In doing so, make sure that you are comparing to +`step-3` into `base: step-3`. From 9545c45adeff9bee686f3a9bbc40d94ff0ed76fc Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Wed, 30 Oct 2024 16:06:02 +0000 Subject: [PATCH 04/62] feat: step 4 complete --- .../web-components-tutorial/step-1.mdx | 2 +- .../web-components-tutorial/step-2.mdx | 2 +- .../web-components-tutorial/step-3.mdx | 2 +- .../web-components-tutorial/step-4.mdx | 361 ++++++++++++++++++ 4 files changed, 364 insertions(+), 3 deletions(-) create mode 100644 src/pages/developing/web-components-tutorial/step-4.mdx diff --git a/src/pages/developing/web-components-tutorial/step-1.mdx b/src/pages/developing/web-components-tutorial/step-1.mdx index 1c0b529b5d4..25dfad0f4f2 100644 --- a/src/pages/developing/web-components-tutorial/step-1.mdx +++ b/src/pages/developing/web-components-tutorial/step-1.mdx @@ -1,5 +1,5 @@ --- -title: Wrapping up +title: 1. Installing Carbon description: Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML app using Web Components from the Carbon Design System. diff --git a/src/pages/developing/web-components-tutorial/step-2.mdx b/src/pages/developing/web-components-tutorial/step-2.mdx index 4c862079e67..c4da01d75da 100644 --- a/src/pages/developing/web-components-tutorial/step-2.mdx +++ b/src/pages/developing/web-components-tutorial/step-2.mdx @@ -1,5 +1,5 @@ --- -title: Wrapping up +title: 2. Building pages description: Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML app using Web Components from the Carbon Design System. diff --git a/src/pages/developing/web-components-tutorial/step-3.mdx b/src/pages/developing/web-components-tutorial/step-3.mdx index 1b12a819d77..775ded86ef7 100644 --- a/src/pages/developing/web-components-tutorial/step-3.mdx +++ b/src/pages/developing/web-components-tutorial/step-3.mdx @@ -1,5 +1,5 @@ --- -title: Wrapping up +title: 3. Using APIs description: Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML app using Web Components from the Carbon Design System. diff --git a/src/pages/developing/web-components-tutorial/step-4.mdx b/src/pages/developing/web-components-tutorial/step-4.mdx new file mode 100644 index 00000000000..f499bfae6d1 --- /dev/null +++ b/src/pages/developing/web-components-tutorial/step-4.mdx @@ -0,0 +1,361 @@ +--- +title: 4. Laanding the principles +description: + Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML + app using Web Components from the Carbon Design System. +tabs: + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] +--- + +import Preview from 'components/Preview'; + + + +With two pages comprised mostly of Carbon components, let's revisit the landing +page and complete the principles section using Carbon pictograms and tokens. + + + + + +Fork, clone and branch +Review design +Create templates +Use templates +Add styling +Check accessibility +Submit pull request + + + +## Preview + +Carbon provides a solid foundation for building web applications through its +color palette, layout, spacing, type, as well as common building blocks in the +form of components. So far, we've only used Carbon components to build out two +pages. + +Other tutorials at this point build a component using Carbon, as we are staying +valilla here, and we don't want to turn this into a Web Component tutorial, we +will use a HTML template and BEM class names to prevent our CSS affecting +others. + +A +[preview](https://carbon-tutorial-nextjs-git-step-5-carbon-design-system.vercel.app/) +of what you'll build (see bottom of page): + + + +## Fork, clone and branch + +This tutorial has an accompanying GitHub repository called +[carbon-tutorial-web-components](https://github.com/carbon-design-system/carbon-tutorial-web-components) +that we'll use as a starting point for each step. If you haven't forked and +cloned that repository yet, and haven't added the upstream remote, go ahead and +do so by following the [step 1 +instructions]([previous step](/developing/web-components-tutorial/step-1#fork-clone-and-branch). + +### Branch + +With your repository all set up, let's check out the branch for this tutorial +step's starting point. + +```bash +git fetch upstream +git checkout -b step-4 upstream/step-4 +``` + + + +**Note:** This builds on top of step 3, but be sure to check out the upstream +step 4 branch because it includes the static assets required to get through this +step. + + + +### Build and start app + +Install the app's dependencies (in case you're starting fresh in your current +directory and not continuing from the previous step): + +```bash +pnpm i +``` + +Then, start the app: + +```bash +pnpm dev +``` + +You should see something similar to where the +[previous step](/developing/web-components-tutorial/step-1#fork-clone-and-branch/step-3) +left off. + +## Review design + +Here's what we're building – an informational section that has a heading and +three subheadings. Each subheading has accompanying copy and a pictogram. We'll +assume that this informational section is used elsewhere on the site, meaning +it's a great opportunity to build it as a reusable component. As for naming, +we'll call it an `InfoSection` with three `InfoCard`s as children. + +![Info section layout](../shared/step-4/images/info-layout.png) + +Info section layout + +## The info section + +Inside `page--landing__r3` in `index.html` we will make a couple of small +changes. Add the class `info-section` to the `cds--subgrid` + +```html path=index.html +
+``` + +and replace `The principles` and surrounding column with which changes the +column settings and provides a class for us to style the section heading. + +```html path=index.html +
+

The Principles

+
+``` + +Style the `info-section__heading` with: + +```scss path=style.scss +.info-section__heading { + @include type-style('heading-01'); + + padding-block-end: $spacing-08; +} +``` + +## Create info card + +At the bottom of `index.html` between the closing body and html tags add the +info card template. + +### The template + +```html path=index.html + +``` + +Before we make use of the template we need to remove the column settings from +the remaining three elements `page--landing__title` and replace with `info-card +to leave: + +```html +
Carbon is open
+
Carbon is modular
+
Carbon is consistent
+``` + +### The script + +Now in `main.js` we add the script to create the info card elements. First +adding the data we will use to construct the info cards from. + +```javascript path=main.js +const infoCardDetails = [ + { + strongMsg: 'Open', + bodyMsg: `It's a distributed effort, guided by the principles of the open-source movement. Carbon's users are also it's makers, and everyone is encouraged to contribute.`, + pictogramName: 'advocate', + }, + { + strongMsg: 'Modular', + bodyMsg: `Carbon's modularity ensures maximum flexibility in execution. It's components are designed to work seamlessly with each other, in whichever combination suits the needs of the user.`, + pictogramName: 'accelerating-transformation', + }, + { + strongMsg: 'Consistent', + bodyMsg: `Based on the comprehensive IBM Design Language, every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences.`, + pictogramName: 'globe', + }, +]; +``` + +Then create the utility function `updateInfoCard` + +```javascript path=main.js +const updateInfoCard = (here, { strongMsg, bodyMsg, pictogramName }) => { + const infoCardTemplate = document.querySelector( + 'template#template--info-card' + ); + + if (here && infoCardTemplate) { + const newInfoCard = infoCardTemplate.content.cloneNode(true); + + const strongEl = newInfoCard.querySelector('.info-card__heading--strong'); + strongEl.innerHTML = strongMsg; + + const infoBodyEl = newInfoCard.querySelector('.info-card__body'); + infoBodyEl.innerHTML = bodyMsg; + + const pictogramEl = newInfoCard.querySelector('.info-card__pictogram'); + pictogramEl.classList.add(`info-card__pictogram--${pictogramName}`); + + here.innerHTML = ''; + here.appendChild(newInfoCard); + } +}; +``` + +Followed by a query to find the info card elements and a loop to add our data. + +```javascript path=main.js +const infoCards = document.querySelectorAll('.info-card'); +[...infoCards].forEach((infoCard, index) => { + updateInfoCard(infoCard, infoCardDetails[index]); +}); +``` + +### The styles + +Looking at the landing page you should see the updated information where +previously only the title was rendred. In order to complete our info card we +need to add some styling. + +First up let's make the picograms visible with the following. + +```scss path=style.scss +.info-card__pictogram { + width: $spacing-10; + height: $spacing-10; + background-color: $text-primary; +} + +.info-card__pictogram--accelerating-transformation { + mask: url(./accelerating-transformation.svg) no-repeat center; +} + +.info-card__pictogram--advocate { + mask: url(./advocate.svg) no-repeat center; +} + +.info-card__pictogram--globe { + mask: url(./globe.svg) no-repeat center; +} +``` + +The remaining styling is to make the info cards pleasing on the eye. Use of +Carbon breakpoints, which also control the number of grid columns, keeps our +page looking great even on the narrowest of devices. + +```scss path=style.scss +.info-card { + display: flex; + height: 300px; + flex-direction: column; + justify-content: space-between; + padding-inline: $spacing-05; + border-left: 1px solid $border-subtle; + + @include breakpoint-down(xlg) { + &:nth-of-type(2) { + border-left: none; + padding-left: 0; + } + } + + @include breakpoint-down(lg) { + flex-direction: row-reverse; + border-left: none; + padding-inline: 0; + gap: $spacing-07; + padding-top: $spacing-10; + height: initial; + + &:nth-of-type(2) { + padding-top: 0; + } + } +} + +.info-card__heading { + @include type-style('heading-03'); + + margin-top: 0; +} + +.info-card__body { + @include type-style('body-long-01'); + + margin-top: $spacing-06; +} +``` + +## Check accessibility + +We've added new markup and styles, so it's a good practice to check +[Equal Access Checker](https://www.ibm.com/able/toolkit/tools/) and make sure +our rendered markup is on the right track for accessibility. + +With the browser extension installed, Chrome in this example, open Dev Tools and +run Accessibility Assessment. + +## Submit pull request + +We're going to submit a pull request to verify completion of this tutorial step. + + + +**Note:** Having issues running the CI check? +[Step 1]() +has troubleshooting notes that may help. + + + +### Git commit and push + +Before we can create a pull request, format your code, then stage and commit all +of your changes: + +```bash +pnpm format +git add --all && git commit -m "feat(tutorial): complete step 4" +``` + +Then, push to your repository: + +```bash +git push origin step-4 +``` + + + +**Note:** Having issues pushing your changes? +[Step 1](/developing/web-components-tutorial/step-1#git-commit-and-push) has +troubleshooting notes that may help. + + + +### Pull request (PR) + +Finally, visit +[carbon-tutorial-web-components](https://github.com/carbon-design-system/carbon-tutorial-web-components) +to "Compare & pull request". In doing so, make sure that you are comparing to +`step-4` into `base: step-4`. From c114079887d63bd09bbf219e0facc3a80c3de70d Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Thu, 31 Oct 2024 10:00:40 +0000 Subject: [PATCH 05/62] feat: step 5 deploy --- .../images/step-5/asset-404.png | Bin 0 -> 12560 bytes .../images/step-5/linter-error-details.png | Bin 0 -> 52438 bytes .../images/step-5/linter-error.png | Bin 0 -> 18402 bytes .../images/step-5/spelling-illo.png | Bin 0 -> 32405 bytes .../images/step-5/spelling-suggestions.png | Bin 0 -> 56727 bytes .../web-components-tutorial/step-1.mdx | 23 +- .../web-components-tutorial/step-2.mdx | 77 ++- .../web-components-tutorial/step-3.mdx | 8 +- .../web-components-tutorial/step-4.mdx | 16 +- .../web-components-tutorial/step-5.mdx | 456 ++++++++++++++++++ 10 files changed, 515 insertions(+), 65 deletions(-) create mode 100644 src/pages/developing/web-components-tutorial/images/step-5/asset-404.png create mode 100644 src/pages/developing/web-components-tutorial/images/step-5/linter-error-details.png create mode 100644 src/pages/developing/web-components-tutorial/images/step-5/linter-error.png create mode 100644 src/pages/developing/web-components-tutorial/images/step-5/spelling-illo.png create mode 100644 src/pages/developing/web-components-tutorial/images/step-5/spelling-suggestions.png create mode 100644 src/pages/developing/web-components-tutorial/step-5.mdx diff --git a/src/pages/developing/web-components-tutorial/images/step-5/asset-404.png b/src/pages/developing/web-components-tutorial/images/step-5/asset-404.png new file mode 100644 index 0000000000000000000000000000000000000000..42e4f4fe66be35b3852013eae580d57796ef52ca GIT binary patch literal 12560 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�%I$WA^94KTX5dlnQYj zTj6o=HjVesWy{xFDOv1T=cyDU{@QQg~TJwvzGyriSXz0yul^;aCk_WK<#yK z#>g@cw5~>m^Zqhn7y0N%0v>!1?-w5=(-^ZvXMMP^n&rtE2*IC;@h`eNj;hg<%e*zN zs+LpNaunym83lSJX0rh|CpakReYAr)ZwtM}efi_o)7lnUt1$avpuDGY-DJODV);M= z-q$dTZwqhi(ZM9WNYpX)KftR<{*u((+=@|VsdK>99Two?>Xdy9z-S*!s+b`_ExmN~hg|HfX>+yHQh6~QVL zA3jk5fe1Xdk3k_pOa>J%YLl_cvD~Ls&t6!A(n4UWL|E=zt%`$4NjzHcVle&-Y)p!u z#i&)Qygw`as0wx@D)6If*VC`G(9%g>Y3HsJp~+Hm3hEtfxoIEAq;JDQ+N# zg2@}P6h9YzQJWQ!vfFovpDibj+mm*Y7zOgmU6O0;#Ni?dsGnQ)hWaR-|GdU-^7ujgg@S0k} zKPp9_>m9)x&~%x@Ul`KH`v0t8`70f-U>7gx_@~#V5O~y*twf|RVPF0cOx_L@&dw*c j1oDqkl|ZA;z-Rb%!b|VB*p`)lm1Ze`RAnlqOoRR(6{g;g literal 0 HcmV?d00001 diff --git a/src/pages/developing/web-components-tutorial/images/step-5/linter-error-details.png b/src/pages/developing/web-components-tutorial/images/step-5/linter-error-details.png new file mode 100644 index 0000000000000000000000000000000000000000..4a240f62429c131b8c76751bfed1a95b6faf58ab GIT binary patch literal 52438 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 literal 0 HcmV?d00001 diff --git a/src/pages/developing/web-components-tutorial/images/step-5/linter-error.png b/src/pages/developing/web-components-tutorial/images/step-5/linter-error.png new file mode 100644 index 0000000000000000000000000000000000000000..3929ef4d30397ba2e11738c648a9fbc8b84dbc3e GIT binary patch literal 18402 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 literal 0 HcmV?d00001 diff --git a/src/pages/developing/web-components-tutorial/images/step-5/spelling-illo.png b/src/pages/developing/web-components-tutorial/images/step-5/spelling-illo.png new file mode 100644 index 0000000000000000000000000000000000000000..1355b8335247b9dfbe67c276f99db9ea70d6b6a8 GIT binary patch literal 32405 zcmcG$WmFwYum*|+cX#&?+}+)RyGw9)cXx;2?(Pzt;KAK}<8A@oPR=>^-u2$^x7QkW z_e@uJRn6?~{;IwqLQ!4<0Tve)1Ox;@N>Wq_1Ozl5SYC#P1pXZwX!ZaBf$g;r5mA&9 z5g}G|v@^4?HU$BZj7Uj?Qb}4t^}qZm4GYE$_fJ+7N!SFFgyHiKbVg2z4@QP2Datbv zF>&~`6c`DeilK}0)m{~#g$&msR_E^{Br2qf1;?(kiG&~6dD-d0Hr)*G3uc-*btpNQ6*DpY}L! zsj%g6kCLTI5^F;< zbQ+Y1zH;{#A9Hhf@{7tS2p=`O#o*N(58i(Jq*Nc@efO~*`|%}1_<0`J*(83Jye}b~ zUF6|hN?ffhP>jZDpj4wb`zm*v)x&-Q-KoeoLYWRjyuKuT`~gXI5M>G>Yga`muU~@L zSWJOQ0T-EVD6vX%sG}TJ;1Io$Vvg%4ixK(*E1?XE0LK?@+ejyfdMAu_Q_&Fl*C(1Y zRF9$p%pB^UZk`*0L;NPvKPq*5l_pY(#h^Yv1n^}GC=7m&rHN7BA3k`7l6@Vd{yoI3 zKcr=37~G#r1+TPR%=I<0oq6A0emX|+%#fRh+$d6rRTA8h7)+-Z95o)S!5{f22*MLM zXgnCx%`oK8nZ)bVpTkkN@7?nlM0}DUAZkdKQg*LmvVDCN=+3Z@V)mEf1uL}f`0?|F@T>4 zV6z9I?*)JI2SEnwPmo6K748)RjEd4~!lwo;?0;?&6hzx!c2$si4jVkS*NWxDZxc|%X z8-faair~R7y)xVv49n0d;k11EWBPe01R=Y;X+~JeKHNG&Ysj^J_;i@C{+TPVbR_eE zc6-n+Q2LRFWZ@QB{L!#Z(I{ zzkVrmotIN#08jwXaHC4{EWTMaL2+Xf1Rdrz&U~IZojEuTI)=RSxRY}x^2B~a5E(u; zs$#sr#-t=17@-?RHOJ7R|o$#W=lo^_>uUR&*24g4agzqHmgwqbQ8FDpz zttaEem&Y>?xg8AITjs>6L2dbk<_wV0kY1KtR`^DuLj{j49$_iUJ(GkjCredBnTlc+ffbGvZkLjr9G$$L zd`JV6e3Lwu980UK1W%1SnKb#6e_ymAx+_3Oj$gu8 z^u0{>Ys*(N8mAO>8g*(8>McdzVqrxlRl^E8l~Gk1RjwLG-GgFUp#|9mg_PfM4qxi4JzzOa!-ve$+7)K=85G+5N& zxEcr@kTPVtg&KR|;$g#eB^@P6W>tr%ldzM@ncXVr3(;c*u;qB=BV`-&(=2ypjOJHn zRaswo_J*U8v{;(Go7}a;v|O}WoB6Hgn!uY_nmDXDECuF;PBj1%bDC9++DCy?;~BUt zd}fYjn3KHhw>k7xR>1x`W!-Ww*fvo3e7cGG>NgR)oje)t%U}3kPF}R{6;6?G6ydwz zAt1F8rm%TSEoReMNvfk=bJ(rRtgx-AIo7R~4LL1EIUd|n2OI@RzsT$MdTO_wCafx+_amhtk zpq!xGDw#P!N+& zI(wef8Pz%Qmj0?wxJZaY7{&`}K4*SwcA2|zX|X^0uztF7Dt0UV@Ul|5wDv3OT=(Q{ zd1N{4)T#FfXD%>fig&{M!0PDpb@k)h_R&Raf9(R%0nxtx{uW9eAu^gG;T82S>Ubgz zG*0||{3g0GHf%I}+%B%Ru;P*3x(dw!k{XiF!c$?1!iB=)B1B=Dp;G-?hrLe1ht?Ul z1~n%-GwZ|l$WyResPBw{gb4)KYrJP&;T{;bIpV7l^l{d41)^UfxzX?WS2;Y5@7}O) zu{~t9tE8=!tXEZN!eZrU6*Yu+AG8&+OwT9I3-wU>!TC{7@>H{)7xyYC(z|C9e(#}r6A^b8R~=4gl-Ed$n3kQg#w?Fw z7CmabYfLq9iKre7+1<2$JhNFDNK_mJr6JcPwn?-gj+tX?Z~qPDp&zR*FE%wYR38<` z@Ku{s%h9I%VAe$@_W<(ny#c;Ey0OZpedlIj{8f!n{Y)38T2^zVWz1c*uOgr;uPdlB zqLM}JBgZaHKk>s>Zap&RzMsNa8LokcelIt7fhKLK~&^ zSh`-sif4 zVQZ=T^il37fvpw1rq=w~ss?8wSN*A;(pTfh){p+D;urs^fL(C?N>SBrC^Dp+TG#3t z{vxk$#t1rOwK&}0o!f51KN3o`PFK5K<~w!^x66JX-|8p%o%3UQR-JS1xu3(#q4Av3 z+>0S74$Ow`3^xsLmIRm79L68EV8*4sY+3tOa$C4J>?R+U$CO5t!pX;FkMgn1(%SlX zr24h|u=%?7=5&2zo1N>{vnPBUB7+6akYi=ulH0!Tak6jvI6kS4t&UsUp<~l_=w1Ep zcC>ZMqr;6`)2U|%a6Yv@$=q;x34M%dl*5Cxqnz+)7@a&aPv&`^t`mcgx|#2 z^zmUh+B|;if=Y)HLsBJ5<)8IYc@7&Qa_Oe;E`9m^TEiFX>HQ;j?qfINZZs_*uynt) zcp5%O6^R=@2Okz6;LZQ>+zWRdHIo+NSMk<UIq%arTux8_VyMsr zMs3ntUJlY#4(9*e{|-@-LGHW2ik$*9>vIgF(6+#}i2^?fJ&4LP2yzmXAogtGnRqBo zKe=dJtJDlXh^w=sqLlZkAQ+jtB z`#&Neyzbn(vcKb`#7kEp4Wv7?2(vxS{4@t=MTjqF^U`AA9s4D>&rfAlnUxA@G9*_s>~wMGJRRYfVuL8=!lDWAHOGvGe|I|Npu2za#!1 zNsa%NWMyRhzmosw%KuwZ)ydRR#Lfmdq%;5j-kE=e|L?_r1$i0%SpI)J@sFGTo(1}u zAC{Nlf9@GStPTEF8VHCWh?J<1iaY3;E|fRA7?$5j%3UxzanmoauQapCCC;Kl^lIpz zT^0L63B>q6gVB;kegXxhnJt#SL?)gGk&-0ozUuzaF>7>d@6@4(X%F^z)^&A#c{g|4 z>|*YepP89SlS&X4B*{Zogr*GHo zC_*oX_!|+s_LacW{O$8k4M6xun?J&x$cpfT^vfzF|Eiz}FS-H#?+6B1V37gKpR#C+ z{wj|Std)8FXUdtdAQN(@fpW;dDgbLPNdNR1;;#!d%LvQ5BK|+iAqy`4Gx`5FBP(@_ zD>O+2h>&0r9u{h7FDAss#y|g>`pm4Dv?eDrT@qcjZZrw;;_=nf4Dn$95KG3X37W{x ztwYDYec2`W`hLN{Tc{U(IaA5mgt)x}cagbw*L#;@j_$ydkl;kvX|q-+A9N}?#VJDz z{_|$3qm80!336Ep(9(Wzo;-8q4lhL>n{Ww*-$AjtHBVAQBjed-@*OFMbgNQZldlR^ zM4+-=TMnytTdlL}6rItt_}BYkkG6%&Xi|5-q5N=ME>pt1l=eLHNfF^qwvAb0W*wMa zejCID;Pbi$I!BrT-?UQ^{Y?dcGW()nn_`k1g`M`)&rc zW5TZ_Szl4`xe8%onjwesR@%id;3RJhK13qg!Cex88$XTsibbmBc|N4sG-D<8)!0dl zworJRRwAz-`{$+d1!jje?_HvA`i~ehhIJD8S{vOkJ%SAxMu?19spk+RESM~iUCXf7 zxzbvAQbsc5*;DaPxaHoA`9C;Xexx^vQNEkYQ;^S{@d;1P=E>Ko{bp8h&3&)SdDnB3 z9OUEO)x!N*QTL@&;p<3hvnYO1m_zPwxoa4UU3{OnyMut$`|ptoGk~Ok@L#yBZ|5jC zP3f@XC9c-Ja#nfKpwW$CojdHSPER^a7-~3`SVKX-yH5(SY)kBi#b;56-{vltM(30W zHgu}PeTyrkOx2)uHlS6?urSj{1n`V4c0W>;jT}SkSVR}@u)+tnJ1pnE;=XPQdm8+% z4XpR)if(UgWGAiVcO~=iY=ga@eVtQNo{T3o3zpS*^ZkhiM~=OWobzFTA{6HPDpy@@ zGbdS{a|8X|%b5t3_Kh^m(RRWYuc4 zHnvAd2MK$9gk?$TTYOw9CHN8A+{tL`(HvfGEu*NWMvAsgDa5*o_JM;pAp29n4@eQe zp(;Qw-hv!s90p$OuS(_ASt+xww+{A#nsY$v3u?c}caMqhZHOaovefrO=RdDQhXC$g-e|&FDV87(2@x8F6=S_H-UHyoi`L#KzscWinFi;7F z3O$dp_1+>j4;t#c^{W7;T{-JpAk;!;^~krk2hN0}@m!9X{WQp5+jyCCn`B4FnW@cU zUG0A9;S(O8GRApMPE$y60p-E_&RXqUskY}!k$^^S%e9_4tpq#Y71`4k0<0f~94!VI zy8e<$OW=@H2!{s5o_l=EU{pFzkt%jVN2a0DmLs^fW)+P*(z{{4Xq64Lfvc<$$Z+vU z=2a*Qxx86)-;p4 zF5(NDiZC!K%jGmWcz?g;fTJY2-A+Hqppq}t+yGzo*skK--HHV_fAT{CPnamt4)YAo z&8d4qLb%I!hXurT;EQWP>h0 z{ga8i)fshY;{RxmN$IKxY(l6*~DLJOl8}k2U0;S7dQivQ@!xFg$_>7g+?tPr^zi0 zY$pM5QsyaD|cvdUJ%$6EZxE@YcJCW;Y2yMk| zv&Ir!>8SIz%T|u5RP)*|Ev)BYLaXI{mi5~pb_tlHNv26JhE)xtg@tDT9n_UTZ7G-K zOvHO7IoHZhefP_0=W55Fp(hAX^T^BKc8b{zCt{lH7eKkElLXF$Jhet#>(*XcG2xQB z&t@>Zn7_8!evGh}AWmA%jCavEZ1{}~Y2>Y6jz0jR*6^n$J7xLx9%TI3If|HRAu71Q zTv?E{=b?V7x>;b!>8>qdFbeBZP{iZl#}dwE>3NogNs8$GzO$@=QBH%y(v@AT#tn-a z1&5cAm;D9HH?F5+$G;Nx;$}tXTL%Af{izZ@T3W?+PhcL(0?y;cGxGoAeY zqW`VNPWCDPJ&Q2IPz}Ru)l8}_Uw7uUQGWYj>>J8jxdFr6TE}7Sx&)ray#-QnvA)@B z1j}0O_hrp|XfH2-k|{cvIt$pJZ7s$P#Fux^})u1*u@daMt63<(5;n%S39EzMdv|}rOPRVp%Nw)5T5?v=~OH)ib&lQ^*!N5 zdmbl}l$J9t(|Z6(yChqFdvx81ip#18W89VUpFQ<*oM1?K-Pxtmb)upI##LwXT}|bX zQ#rOWL=Cy^3s>NeV!j$Y`&6l0a6X~6aNIch6r(F`^Y-Q0< zRfX;{=Ey9!SgDZoyzmt`i?!WAw?RNa$hO@~R$x|ggOLOYkhN~VBxkuN_lwIGJ`ss4 z5{5M@T;};-Oyd+E=tURa{@|BfDSdBDFG)Fnh*m45D=o%YJoVckBcD5N@GMnT{gI~f zQArP0tY+A3shYdHw?{)Y@~+!8Ix79B<6?)i;Pe-E7zpM`m(|T1{0C6>{y?3*m z$f*n!xPig5OA+iXN~+1>H)?hBZ8?aEp%fb|Pm22N5hiXWwL)`5!!UPc`{j!gR$VKB zE`~bY@&1`~jb2Z3TEf^edUwu#q>CWiAE$GYgQW}$TF#dV0YCdYJ3H~c$?eL%?l2}Z zQN-gqxgshC?$aqE&SEaYB=#62@!8pOQc_aMsb(HuwQ%fJV8KCepyH~bUbKsq#<6~TUQmE&p@!H3Ij^l#AI%C;Y?nE z4hhzrlE{mH!mjA^6*wE?6M#-+#FpIDqC@T;gBQR2SqJ}sDGIVYY{^mVa{T`w86*%B zPWTrT{ENEsOn|_T28S#~#)w*j&SymPvh_BO-;Yr+SZhzy~!yk9NCrfY$Dp;VYp{=yNr>%n!_E&CYGvIYb7Tp8eR7|C;O(h z5VcACetT;+vZt7w=I{k){xOr))dimmEslFb-NB7)?+$r0E5q>hbg|lEESaXsY!dh7 zW}IPkX(`RN{UFtd3>^bQEZ6si=8H~SyxG)ui{$r3Z95c7_g@(-=EtK{xvbK)>a~R3 z&xcuB>sx*wa$DZFF|M{U+rxNvMPY=V;VsrH!k68Tgc%PTsod71PSbpkzg(7dC8qgb zs|?hr=L#i|I_?*>KgmNO;@1`9b^w!(<>u2lcgx0cuI^5~OZ8y6-oG;e7 z&hZ0$-(DCvd)ok~I944R)aubh%w^~0v=$4Er^vGE ziNrw!HnB5hymI6IbZPGHWX|IC;T*H__d%MzC?O-Gm^v01B16D3H-0>QFE63TK1w41 zn-TGMRe55s|5c-SI$a)O(9a&bE&eF@Q7r<=AWJxxole>k+JMBd)kMU@z!aK!b4BG( zkdU)G17R|Bk-l6!JW(+@oV(mCEG$EiCBrdzbFlw0t`8;MXvJMM=WD_P&j*p`yx|x_1J;lbg zzv3-{4TGCGKb&b6nv2H9HG82?C;zs{{u)pT7GT*Y2$(MyA@ciO&u(z2qM>Dk14h8@ zoOhJtCEr-Qz4NjYM)d9d_j7U0{hHkmjHH_!KCf^6!7#=2`bwZ>$J{Oe@^naSLTGqQ zo4!NCSV#n1QN=hZ45BfC+X)uuvt_2hNTgsXY@d&#T)#ms%0`Y&cM(P;l)jHTQs3(# ztRa(782O4jlMdbj!sQI#my=S|wFJ`%0;aF4vs39z#>Z1UmqjEZq2CheYM?4)x>sxc zKHi;yroyDC)arFNbwyz@U@mRu34sSnt4RA}^aTMj5bRYdv^>>O4{{b zj>S()`hGJFrsL6&@Q@C&(MliIa$}6N8j)zcb;cvH7?oUihKp62MlNoT8*WyYrG4bV zJvDmWTJzD2zEDVnP0NW*;~Eo+!w^-xKVATzXOOUYBw}z)Tf~=>dwFATY1dR@)LU(J z120}*FMnVuO?E$SRxUWK*|fqOf|dr2CQ;43zr7AwK9rZ{piV%dB2(%p2M+p6DaFM! zyULEAPWM4rTR`0-5pb)>R?L;ip~)gE;aaO69*5%D<|R=n%znH-3cT#a39y#JGD^tq z)_H)SRs9~%>K*LmMMXoi7)_*rIQ$eE@QRE|Qbbl1hs`7`Np>8^1$NsT2-AK78 z7g5`UI064WrQ7K`6OF?ndY=x#L}FMR9zjk|FE7j9U{iH>SILJHN2Ye~&XoDZlESBb zHq`I^*}Tub&$-j(R2;ba3|07FcT2<(Lh$@*bJz>c6wQTM4m1qhrUprgB$s8+!_spX zlC{MCEQ$U_s|oqKP2M8-lUlrEug+?#9m6b#&1zBgeswb$v-Y#O49_>BJD?XLrEmx>TZ%xVYPz~P z7zgf!8L&GqHagLY;26OqQ4)Lc>$X7+4L?P|(sCt-1;e~t{`d&?gflEN-Dv{5UvIHl zLoSviF+d5p$+h^xuG)-NP>4VjHM<7FZo5uR54)*fTztJZ0(VKpm@}K`8%SMFrgFlgke&bvidMCn;H0XzOhqS1^h&IeKrxpfj6q(xHqG{XoJ zpt7AdYc1kpc`eDopAeyqK@u<8ua5E9t<#?ZJpA#`t7{9C0l5Pt+gGUJg~XIpYTeFc zR7x4H#V@o7nGHTZot|X0yTv3Lxg)Gyh69lGyIsJA1}3R;lhD7*06B4@9BT4j zbR(AJtydZ9vpypscKty!v7glWPwq(qnYq~Z_e?yIvOU?+_50IH7$09BoB zC150?SfjO|zJT%ZU}#3vCU zULX}xvSp3|ib}UXqh7&fQCslWp%f=msDx;PR6r>~U(wSsE|L<+BrKCy*aP}6z>s(t z`+zHB)aaTs7N<%CI20oKBMbZ?aeFCvA{Dfr#d0$A0uH96+q#1U(+J4AdfQTM`yp-u zRAMZRlne2h&N13UF?GczvqW-=l1|2{o&7fh0;f(%<{R(NcIxwZ*^9J~NP@ z=BRUQI48B$_N5CcRfu2%`02i1B?VtI-z$pp8^jPnN9)FZE`p^4G4LPhhZaD-plB+l zT31lC>v#P$ig#4keGIc1Zx0)g4ZYl3jg5#AS-}7%-v!p_Q(}m()m*{A%RW{>h5%Qo zzq2WU!DXV+EIb($R?Ld#;_(RM(`&+@{wrk#tIel?L1R?LMZ!bh&SL@U1j>i)QNC%m z33LRc4M}D}!(wbT6AM-J+qbf-pNVKc=-^aQRHU)p=#27cfitFQ*?OI1;2?xJ)S*Fa z9-#koAfsy=rC4kP2)VrSuxXjtMUf{?R21&e(zX7%yasXZANxj%s(cnHfS4H2|JF2iJxpVg@w ztNeGze-PxKC^!Zsp&BLJyMx?|2aQexL5m7X5uifeQDOTRE-A*KD8d)vBGq)T{!>o? zCLxp(jw?Da{-lEh*~A5z;w^dG0JDElf}j{F5JZR-R07ogVu}T9Acm;8-mZ{Q{#(b0 z0A_?RB5EqM|3NXv5VST#;mxg{YQ|j)#s6TkPGm-(lo;KVWT$*-W8zq7aW3P^ihslx za6yavD;5VT>E-{C#|I`ORPb9W%>GfX`j4_&NVOfD|I{7+DC@9Xk@=6Z&3~2U>jLcl zqwEk6`$-NNR$Bh6Ebbp=@2@JN{#7(+@zN5>Q9$Dxgd5S{PYG)dEyq&uFL zP_I_H3X+p~O;w+ReDdPbo?<;6#Zwo1;Gf*vltKNByJ@!pCx^5bLG!Z4>z3}Gis8Af zUF6&u>B1h*pH{iR@_qUDPfzG~<3o9iDUjavx*HplLQ~Q@@i5SJO03`EuNQ>X5x_0( zf1#TZhmLnUzYw42@Gs_%ERU|F1ZKGvHzmE&@I32;+%>Od$0?8WxmmdQy$*hHw%l?( zUrzute$kOw;wYD~o7NUvi_Ome*bs;h^zOEJ+FyyCm& zs;0HxC_q=x7Hk59EA_Wrs6_-gU0)TXlT3frIK}&1^&?6kOEL+vsmP`AM_C>F zSf>$Hb$>xTrfLXS`Y-XDL5|fv%B;c(-q=AZRT%O({Wi(4X$s8K)7pvffb-~uwaDVp za0dYf3=h}gp>b-LCh!2-&jFl`Fa48~F%6ATgX%~hj5pBGg?Eh->0hy0F&1NeZGOW0R8kRfBU{%)6tb5$oPyKZhoRnCZV0Pj6F?O-q-qJMS$Zn3G@D zeG|^Od(yCF)~|$8if5^u?ft2kmerbDCNth^s=LlNIy68W$U}B^L6Hb|;}{K~r8VY5 zN7joX#cj?DZX~XIF{W^JBie*uaPs+h=^#6+}lsV^*FG%HRw|hC)3l zrROpX-CADreoUa;2xdFo>7eRo1!xL27g7~1As`g7U@4y%d0w9`9I;_djgFUo*Et0s zmRaNh0y_|sc*Z0h4}CrCJ=vE)@AaI&fe>(K5humO8ou}JUmo;LPE72t)oLpT3=cLr9m!wc!j{WTUiyZudxNt@E7ZPb$XERq;%TKo z-gpI#?6NIOWqX_zTjks1$``g|-Nk^l{-wu=Vgdplp!-Q-E#Xt{Y)Cd_f&e(XT-Y=iBq#ZL?cnI-WeXv-u4aQBLa64 z4<}Ds`g1FjEm0#0G1{}bms8{nKR~K`g3%;2-saSKS~0I4kc!OxRs`v5AlFcC0-1h4 z-GHOFIwh&yJ#hRe5YP66p(G{6NwP2wojU>N87hy;;)%&NBy;_eDrPC?&C_-A)|}SW_3UWCR$uc+?Bq2Dv6TP9C?;9=1gRU z1acz&Vs}^6JaLva1<84%7XCzjvY_9Dt?Ba4VV_+G zv0Ur2YfX>dyWx0c9@Uuz?({6M${4BL_ki($e149+&$?@M$2ok%sMA(XX>if^9$!LU zA1@UyE-sw6dqII1gXmy?Ut>(mbT2B09I6Kbt7iv~%~EtSi-SsEU*8af*XawhaD;bqmd|&01jW$cd?>zzKqU6;AvS#O z8yAB$VSG!pH8;FfqHJI7Iq&duL+cf|DP2%|)-o~No-bFv0|s^G#(YMoNxq1%xW2b| zAbqN1T25wc-xK;UJV)#}SUof#G3+v-(-@;}KJ6~Bi zEVzH~pHH{u5=?l!lG6`v`OVaHduYWEF6eHp^?_Xyz%1m}R7_yic2YsBY(JJ5vwwLm z6xXN=kE$T1_`x0naT{(5b2oC&GxVf4GO^#6L-1`Z5ure8J*dw*47|_%eI(V#IkWhy z)LN@uDZ9;TI1y&|(NuOJ5KW^T)&PVNCk1)=_{xF)Q>j$@f~lEJLqQP&#Fdg^NJJ&S zg|Au5q|6=fD}*9m7nNo~2YLxVUhyoM03wlXuJM!bMXnq<8Xo<;9mh_A700_fll%Iu z6rbvnw-0TuQb)%-L`Uhk1jP>V7BnO=(vZ!}Kq@xg>Urcw$k%s3bxIb zSXeYjXRj}x8tiBsK0L33f_DgTzswTX3wHFe1voNLWR$guI!Ao0-Vw-O=xsV%zd~m6 zT?i$7+`SXrZS`|eq^967D<_>)NYJE) z#!DA86pQBfCgIL{&gBv7>j7{DY!u`h5U0oI7xV#`iy)1`eFRQ_;YncEfMU2ILXh%WdwR#&eA_VHCT2R4@xH>y#2LLjhlLe+q8nH@R5i4#i!BpRE|W7o_#H>jAwS z{DgCNy}@B|!c5#9fAfq}XQE46P9W)#YM*qTJiT6#aoTigf^fyfCJx+DMcw zp0hziEZpmIgsC;sAr)TK4@ua@tU`&$^$dIGXm3vh7y!u&MZirpc!IJ~?WJ4>iJ&&wmOP!3xVl?CEP3jbKu`W$aE_#_<4Z@=&Maj?q;nsG4!3^^KF ze0LW0-g=6vOoon782g9Nl*Z8JNy_<=5@k)C4LihpFzC-F1kgeBgsb16ul$x3zpvCN z<)AMVrIgtoDGiLRZgyOL+?iL*_2*g6ErEJL&TGD^F_e5iVlK1!K$!;&_a)ntrl$J5 z5f0hvR+{R+&SA~(zwkRRd9lz?k!8yhEDOO25K>{oFuy(R#c6FeKwj0!xM>`>Ce1ZM z+g2v(VY_!HXbBGoF$ogvj=LgAQYFe$6~l&-PM@N8Y#IrFsElaD(_cM@Tg2N_$IoXd#sO!!T%R z*`a>6pYG+ueoQKAgBzXaWEQ0plsz|Oj%zpe^yIc#ZHjO`TNc{rbSwS&Q!+m^47R5t zNrVMC+#84(^UWqRzlI?almUOM=vY`1Kr~%aR74)o?T!8L#u!VCa17k+B;bk>+0lG= zc;`INcs8ov|9$2hdB&?FNgXOmfX2cEF<{VhFtBS`5V%fP=y@;hYba}WsG39W;LuXn z&{|x5@yJV)K5|WfXYuyE)_r$N%1tg){;S+tor=*h!^`_-d<#U{cFEFXaprv%wD|S- z;E2TsZqVST`$eyywXe0Wxy6*aUdnH-y2lYj@A*<3t*El!fB|4k3gqKhf!8w@?G9}t z!m6qKx%bCkFlq_}d1x>+cV}|CWxCyxHVczc-}1*2Qec9rZNKfmn1ad>DKeZ$mBeJ! z$H#1T2zSUDD77Gu1$nf!bI+-?c=T#RTUIfMBhZ#y%w4X;`^4L9dyYj(TS9p`k!S2u z?p4m#^AbvN8q8N~tCwww2*W4RA2tJec^OlIvs_+D;Cuj4Q35b`0<-7Q?Rg*UHUL{s+9lA7vmvB#x?8_PcYK5sLm?ZJk}*N5v8Oe-r1t6#>h<65J2>2vV2n-+DQem~ z)Gmspmh(|mcfodtY6kEnw*bk<&ENV*3rYF93|R_&h$lPlv1D(%W-?(HQpL;ws2m^YwE*Z9&rr5MfDIXo@EjWwc*<;svK_NwqOiP>RR zX?+a(;1)3EFRw5|-oTwQHl0)+3M&W+G6Rl#@=qKGb`zF@aF-?+G&owR~Hd07u)l|JPdy!W9E_tT|gpeR@zEnk3Cz>Ggi5#?Yb zIkPx0mKEEAU6BDiWr5pC=fE2P@6YhoH z9NbL40Homyd-kf-0s~y_UrT~v5N3xnqAZMd0r<*c><(T`)};Z; zf)+3n=JsJFXVkxv-dFHG*Gx9Wf|#}0-+pSpid@NB(2IdR7iJ_~6QJE~Aw!y)s| z+!HlZ&;rYq;N3pjcA2-A^ngiu)T?jW&C|UTUt7on&)NC;^%xQHE6H#K_*A!H;oM0B zwefuuAL=S?<`V1_CtcqLk**nobJrRa&1PcFIi|>_^CTmWIpaxda71S}u%d?teo!u4 zuqWao`l^lRx;o}!rdFCbur6TO({~Xb^iJC;PSjzoR03?TMGVhqg!~{fXv`(4-#?BE z$|sHqi(fbd=uzXoJV)-f(oyHk$if$u;V5iS&P&~|x|04Doc&eJ5ZER2!#%8HgDteX zN)Htk8ylJ(yT4|pWb4Z=loZ+fPyWDUhjvAdz=nc%*KDzrPjqa;FPco};MFi34-nu< zLVUz+SGL(7WL~Z~mHtg&rqBk>*nmrs{>XI?<0-0YaUmN-LZhqE zUJN*UTi*LN*!-ml_>PTK>m$n1o}cD0p*TgWF`TUyxGD5J?9I{(Wo3d-NGUzA;-1Sv*xXrs&+Y13c2n z+%3cgS;;t3_3mCp?mTu-FgNSk6-_gYjb6GQLVtMLLwn&L%%$VN4boy{LCb9=1$Wdt zhIk%ZJ7x}*1S96EBC&C9wZ_30-b3vj?}?qp+zedlMJd}qqaZY|CIh|@O} zIu@Kl3T^q?*XR*bMm5=rS50&o&M2Y|cBzv4?%6;9XYP@^-W;s*PP^8MCb9l#Ah|A4 zz;)A+r{wvZk0Fk|PI)tDF38l)Sc^5fEti8$5F#4s#poEd|AuWrjmSo)Y)^>D$rDW_u+^kN;h?Ba{aJs)A)|9#v>nnN-U&{a0CKb6( z1}q_kq6Ay-c7nlJ^*;i?Iu4kr5%CQgj4!`?L?h{6tAM_a4wfA;(&DyNu1f* zk}PrE%D)5>kU#Bn-;$-mVvm4iDfgL+Eij9l+t6tv+HZg3xBkL;FJy|8ko~#xdD|dC zFMx?>ut>fX{Wlb4^|F7p0R!#qsv~zrg1y~s z3w41nYWlF1@2!y?!hcmWh!)Ji4$q1b@=3|itI|dReN;bQ_k{X>(?EI2(7!5#l{od}ix?3RopS~2t@!ml5y+7>%sVk-` zXAA23#r4J`xI^V=A^wGA2CcAgSx{MQ&Lr>lSx>6-AstX+Uz4c(4y35UVI5gUM~8G} z%hF5c(*7JR z$ZG+ovD}VA=Q%f&=4+B4S5E+?%Aw9)=N(;{ldvjT{G~ox`xQ%i{ROI+P)B0wVsn2V zAU|b$p+#r~YVO7`bvYcp&gc;4+MXoL6I0|vgjlCGQPTuWJqI*2Hl8fk8yE1Vk2G1# z{oLBhyiq}VLy^MFK!+0|w%8`>~g0}TVh zo6aphuZNgCT?UkTW63rm}p<2qAR9SA$>oBO+( zB8+i&Xq|)i7uZXw5AuM?36`h=yId6@xx0!%fG68E)=Glvu&3hSI@Vgao#u$zc1k9h zur+8F@k543&r%G_jeh1v1Ma&fucnT&E#OnaWTP3pN9c&gXCrmoB1G8-nN;+9tGnZw zKo3FM_P2+%Ka8dQg9EWYTp~Fe=abnGN`)NRoSYnX7JN-6?5Q9men}b{nm-hdnGLrs zIT#oiR>ytGKozjnE)Nz{Q`4CNBmugp@*fRNIWNY4`P}pb-((C!Em@l91uU&B` zxYD?yW&ideJuoc_zx8zUB`?Ywe}3NI>Y~clzW*}B@F83@>c{W07HQD`qp_TL+CY0u zo>xf1oL8I;*M(j3>)HF_*$_o?+p~J#pyi-*Nmmm@N3ZErZ3ayx>RUPA8QV?N2`RSX zP0oR{Eb5-v%y%SE^Wc7{1pBzGo1PaNvUYtmG0j?kpOmh^>C zvqrcRsgBd{NQR66>%4S{ABDzS0#XL<#8z#e-0PkuPfy1V^t8MOEc|hopPxuK@M&F41d@A1 zfh4~>APXjKD*VWEIxs5jXrj|Hd01%eV07(od_e=U%6C=XxjWhA=IyySXKr&a! z-JNs75s-3G;Daby+qToOZQJhHcE`4Dc5E9bnB4o`oB1_A z4@;-&?7jB4R=xX^Uvh!3x&!kJzzS730c&kaJYKzNlxfr5iCn4vAsmYS4B#0!%M58N zdN(h z-p|tI72%}U>kD!S@F=>_7sVuZjdK6!dD!0=vZyB97tx)!1p)Uon;Tg_xW+`5ji2^D zYb4WQE?dq^qinp#C5m>G&3Q`!*rOEV>B)Z|qq?(eykUz5i4lI8z4TcpaBQFq5)y*ztRwhj>UMsP2;l_i*FO}0Nw#_fi&;gZQ`K!I-xuI8 zfa+mR25)LEVJu(rA;tN1!_^Shh7V(@eRE@_tvfkCtzidv24g1>+N778Jy4m?1_ z#-^4ZLaHEAS69EgVTg`XEEpS`{LOs&dYoGt9Sxh5oG4F-6hL4q!R34sukcG$TzrCJ zz00e`0M9@z@|(Z}0_q@%r}i);_r;uv&I9U0jKwF3O9rX*0DDI>%~_*wSMoZsN=|al zc zpEaGsOII7SkclI9>su3l-7RKG+zGYLeVPEpIh6g>6&|cbl+4#w58+6Ff!(H7*Nj zRHT8X><+B1L>1Zj<$-7c^L>=WCTvpssysL_0tPe&;5Vy*EGj|jR|E{O7?py0NV0=S zi7Dg2&)-ElB1QevSlYuX9yJ~ zRFU=;=I2G2iV%6n?xoWvnVo$8HUt|^LVz%nx;qofCYnSN5)v{=;i3V<$N1|~RgJe2 zRrSk%J?6(V!Tb28X+W)9Jl5TeCw{bLr3v3bG|dlf`Av{qLekSoGSSDry-#2G1h>w| zN1^u&hjf)ZJb?w*pE=*scn(EnK}uHu9DVUfKiG3)8+;5$sBJ=YA*g-XzY5T-fTRgL z6P4iJuKUkOXHA<6N6#lC`ALe{Bsg#KfF;36 zvrm~l;-sJJI`;|Otz8xAUlszNO2KT1iOzo`V8L*MDym0US8__wLV&s?e}ZZXB}f%8 zP#itrzRwsFy?`^)A14!xNWvMtpy5!A_me=8*?d|9o4f={Fy|o62VqEmYsVfha?Xln z>*Bq=*LvZ|$e^fwB-4yqAle z$YM<9-zN3M`z_!J(Jt_{3422SmeJ#)bL2?$x2>5v3Zm|j?cyjA}TDKDWSj_F+hru)W2Yt#!-1Ttzri7qb zH~K?hnyS9{FUoFYYIq~KssN#a7-(ebAJeL`g2)j$zi2F;8?+GDF70;_?kXy-4(AGc z25bo+LaEB3m+;nAqwe}ia94WxBfnF=v;m5oX zO~=J@hgXA{hk7AZ5E!vBF>V?C94a2KyXE{>pycvY6y>DBO2CsrWvWu-t9wnog)k^dY!qjUyD1L3~fUCzm#+%+cNzM=PU z+3-~e;J_HOc@kIgm0g%?YHLfD$Db%*i~J$}AVfQZ)U^e&K5U7SwMx z(k(bWz$t+*Iw>rimTy4-PT$)#jrzlse>{x~ESbg{1UVR~8cm&ZV5(?Uli8Y-V9EpdjZ{;i`qT)P6v!m^P^0(1+X$pd!#8JR0Mz(5 zzn@rlEYt&nTZ`0olwoz!ya5Y?==7Ko6@+DZwb>S&ePI5FBybDN$6r@OzUtx>K*3%)#^E%Qb-;X7Ks%h0yggq;O+8rg zcVO9G@y8EFfq$|9k|&3LAJre?_)wSol|cYhsuKEIeaDP`GHl$L;F*_^Y(8YqVc+G~ zRITk3<_~kLp6FH0MAfk#1vqz_fzFG5)7p>~)E`v%rfwIj0oG!{5xRD>Y*LMmM9&U1 z`rVsSH3cNnHUdV0yMEvE2+`l)rv05A$n-gJ4)-|KXHeh>?PJAtG*9~Fl;F*wiQER{ z*oZDlg@`rjZzn`~yyGFLz7nr^EDn;FjMVtA40sD*>>r2REiwx>yd&K0-GD3Z#G20L zROMGx;FJh~6h%W-GKmVCfBWejNJx$hXlY4;SbOy{zJJa70aW4NLWQdRtV-H{`g!7i z3?#(SfoDPg3IJt+|KM6+5V9_s|I%F?z~6KiM?b~?|Kkc4*if?Dst1q;|9uaTxM(lZ zGo&gONW!+c{bHZe$N%CD&LJt#QeC`ND*j!R0;Gn(x84HNTW0=WVWKYfd)=0A70dtU zegXQ{XJ~#D7W`Lw=;iue8I2L~;{V7sA^u?h#31~Lj{FZh1`TxnA45}JPVu{PJp|}> zHC@CeFcC$bD*yQ5Oxw=`Gt6Jd^sQj7ogqECS5jcVDHmUg(GIkTlj(3jS2*;+vR<8X zgL9PD*q|Bc5DQ< zZ%~tjhBPu`9yDSGQ`Iniflljw(}lSCN_RU2$QtCRR`qsZImtje7|1oB=JN}7n4X(| z2%zSDdTXZUj*iPWymBu3AV_IO7)592iS(Loo_=~cQIC4-@%6$JfuV~8YQLz|$AL|C!-dk@Oc`b27X{}+< zON=FdM~?V(wNbGE%iFePIy)(*B6$UW{n8iu%CSXpeOEs04%9U`%bjT`J)A#NdkMo^c>2sW~uE*A2mb}clJeUi+Cv!vLcW?P_ zuHeizI+cv=njO$IVS&QT2)+w_8lS9PC{qJQ@IVMmgvX(;PtSrC73FkvwTIcOgH<=Lknq^^&}eyhbfCDn^+Z2E2wHquj6}S;#JEI{5#!( zt&PFw0$=`UDiSgJFPZ(GycMb-O^ADWwlwrY+9%Y*l1kulg-MlRt+o#XDaDr=ohM~$ z&y)#ZRQ>BT9(y?nX9}8XepM&+D=o$S%Sf$6u!GwZahn<=76_y^S;Ubcb$?Zm)tEGz zNNNCbVz>9!J$A^i&d+_Z?YL52^AYeoIMJ^CMq4`A<_^!b{QGVg@R|Kx#=HXn{0j3$a4ki3qm46E3g>Qcth?% z4lk|-Dl&RTQvj;Rv2ii!fqeAVa7}i8xmmm%U(=$2jQ$bs!B}9GE8o)=_=?jKMpFdDcZGiD_;sUnEU;Ia9&ZFEX!~lzBoG2Wv{Nh zV>x8f2|hlceEfnKokDyNRx&&s$zNG7r=#CzjBEt6mu|+kAz_FlgodmGhNMvAdfkrZ z(7!d5K$TpdPl}MOm)37ceL4?*Qj*6)&683u(}vMehi(XqL@l}h!^!M(<6vxt%2%Pf zFXv>Xpth`0Ea|H1@AywkB?csEl{sU(a$PiioB(Kb!;nSD68Y=5@FVLiX_)5wAa$ug zXyW}rIfugRPvbxexCo#mG!Z8!l|RoIdmTyeew%4`bfl3qF~f9489q5hQ5&BoB@G&x zS$FevH&dGei^tmy2&A9fQTRuAMrg^t&VSm@qJ{+DL!n_vU?)R38|ZNg2a+Jra**Wr zj4A0Kd7iEO%ka-?#pr2Jk~-3pp`Fa?>+eUC4fifKw{!2PT)-;ra`FrHu{O}+35{ks z@}tl%>pnFO@LRO1800_SjSOQ%MoRc;)b7&bzfW7L3$c-IAB7_0dH5@Da;t((mIyiO zQK08u3Wp3$bI7Gq3qxD(0CMdrYeL%ozlJde5|4Is;uDDzRF(S+_{hf&+q`0o#^@2M zZIkh?_Ox+Rad#>bd4q&I(jgPsK4{V*m;^}^ z+ucGKMz(UV9F6*_8zdC~z9Ol>P#r zHw#*7P=T^cap;|*SIIg;XEOH5;LEBr3%!wpxdyNd`OL^{LibIO(ep}9D8{Ey^`C&K z?e%gv3|K#5MH*u-JgNlwDGqGsE%bD$sf5-JHHn40>g5EyPqOqW&@Mr-YTJ%;N{^}S z`(R;QxQuZ}4r3zY_!3a^_RIZ<%=WC5MWH6MS}i9LY%-6nd*Qm>XI6RstQ~Yhdj3Gk zXrI;b_1epWryCt((MGkDqEWlq6qo`VfsR+0+4X3+**v8l@X=8;uC)^nsV4rO>|xH9 z@W)&@W8+5h3;kLC5{YN>Y-tVn+inURlk-Y~hU!_>Dsb7ye(uEIB?3k!rgFZ;BqzJ| zCz-t2&Ap&2Xg=!S(nNWfvP^03H*a`chi+xwI<0I5w{mv5o_5@v3YRU)m1}K>j3<;SO9?GIIjOf-Kn>4|Ibe4wv$6dpeW!VMH zNPQsEjFN4IPxP$THY44eDAL^?UhVTNEL(cZa%4XrMLEz0V3u5>p+ql@DUL_&V0D6R zvEBr#kig zsD*|>3r~6L_6xTBHk`V(${&&B%$~8q35Y`v97Sl#TOd&CFcPvF90E&i^+>q~)Xk?L zFZM$ z6V+`I5R*GZjHR=Av#a6LVCT@YOn!%m%u4@ck@R7i_| zqK&*;4@luR6Rn~Pc$Oj{CRDt z;Y6fqjPtHO^dkXCGe3(~g07$TeifVdDG#3wwMvW$ErWFwx?QF^Ut|J2h7>BVd5ikyw>zxXfOkmu;;{G+fy80fj$jCtSe@QSLm+*(Pl9@ zf^kot3XN*iqj~i5JF2ghJ#s~3(y-JXt_L)2>}rkzyugp(cq}%KP4WB@>Q(9HXZ&{{ zhCLELuxEBdl-w3qv?5U1g8R?GqD9y7=byfaH=**u>(qJkSq;eIJ1^z`UMyu5gvye< zTp26%76rNU3X0?TE;tojyIg;1J;shy{z?yjNC+a#~DfFm$0ER_{|76ov<<&^iI0wEKUp+*xv?8jpW8km)#i0ww^ zO)hv1`G5<1bcLBUu*}Ek4j)6Ej>g%r*Nqij=uu@%)0j}y)%O|0Us<&{KmIJ?E|fW z9({zM6~ggJQG&%*HPw-L|2sC)1djt}3(c*#$ul6I3Nwnx5HE6aU z7gV7+YVELOcKQ@}-d&eM)CS0Pk{<>IT>YPr3^X!W>4-P8MRmuEYa!QImh_W;376b` z7Zix|k9r9Zu*#l=4#A3g$ss0SX-YDS1Ufy=90spb@!JnQdOk$wjq&J}mSv^hYpkpm z`|>5MXxw2LP;{m7N1zTLr`|J=16=ydqsYDrUPHbP=%U*I{(5zR)G%Vv%}Mbg%Fh6x zpeo5oB4NzW?ALqR{M@jWTzOt&3o4Hdo@z6R00obJ4-h;jj6xPQLLpI0k&tKdpA`1t zy{uB)xMv(}mq0;MadBd?YH@*Vq`1KDW>OwY9_aJlZ0j&Cj+L@>~K{Jw{yNYUu8i7iv; z&(0rn{E+}HFTCI7IvTGjH(IE#t3OGW`i|Dyk&W$6+f_Ol|Bco8X@;>MeRq)w(Vf@h zMqen(oi@u}$X7a(<|lftx%qs6_SJ&mE6H#39`e&xpX3h=AiNx1txzn6g099$EmmtF z1jul5e+lmbGFC)Gv@dCdh|zfY?gqpRM$iQ;MNV`TY=$@I;83_!!{*#ugR~*K8f6Qo*8CZQr(5lZ}&!{P- zW_o4Lsruto&=0Pz@AR5_!O3aLC{7yQu9fu>Z;%;Ea>7}rFImGH$(78N|fn_2>6jT7urq;Nqq>!-qc3R-wSOQ#mCYco8I zlcZ0DTX%;EDE||L!K}7>O8z(TEzE0SE*;{{+7qtiIpwsi?R@aXAgc(wbu#GJe6j}t zoO?$52a(>knrSreTiz(oKan-0^;nct6p3_qNOT=;u9%YLRV^1wond{&OWxd6&5^`E zQus z5fUQ{DkA)S{iICwfF7P-C>^~)r$0U<+gz1meA@aokH)2JK%fp~O_Q$Ob3Zqm55l`NqS zfUl|aTaA(6EcoLKUR=QZZZ_=q>9P#IvL}+&U%J3yr(4@_|?$ zKq^6Cejb)y1_la>5CLHz)>Rx>^ilLb@+LBHJP$H5vczncZ8%+o|1}&I#TzU(trJ} zqW_q2xf{>=|J_D`AtD7!G_@hu(zE5Ovpt!)UDiezj@&Fsi_@pd*TzU|NYGc0n_t1N zUN9Czye!_Gn}gbk%ni`|(pJJgDJersLlNFxTa+md)V*M6N^tmY&@eZNrKsq+Vji!< zb|-K!4+U5{KZ98g%FVGhZY|DGJ#b%JJr+j6o)sKj9Yxv8&(t9~{z-C8Ua((;zR#yL zj^ZO=u^J>nkwV^cWA0)n6hwVAcXz4XN2{*%zvn2{HlWDMU?`dU4=!x ze~->g$;TKpFI!a1IROu4-ILR@LPRm+*Q|H2<~#bvzCo*|FdhuQdnpo8>n2zFHEqM} ziJ(JSskDX$tojouELDJK^R?2vYOFW1!6ExcdvE1M@IjT40mO@^!evG`&+S2EO1a(# zA+tEB*B{TpnAj|-xo&Nv41}|sH$`9Pw|7!0DcTzNL>Eo2qk|)5wy&y$v@q%=sAIeO z@A#YUyy%?xoJ{pzs`3d`<&E6fY)Rq;p3(3Bsmynut~?!e2wV9k%lK<;L%^xI@MOz_0B2jOU{*D>fHH;s0f2yDUHXaGimvyz-Q#>wCNqn$KxY&sz1+rBZl!{-(u(SdCR&rC&p_} z^i7m4Yrx-5YR0=kt}$Vt(zR-5Dxt~MpE(^uMGB=A|J*f)6r+MV@bkzD3=d`n7kx?l z#P)YaEbJp8!_DG@j^{PN=3yd|_~3Gv=qG$}H3q(N2i+Z()VP$9mFzj*5!8$IQ+k)vupsq_Q%DqcCtG{>@E5CenoP^Hq9kWu`a>XIY)zdd#! zbp7OPfj;Wb$|&X=^%4$(AQ?ht{I+DZf1lF6vCAEl>n`l>|ws=2fhcJHV{J-JpJ8PQ2PrRHq;4bi&lAoVKAus z-3Ot1%^|cKaQ@@c$l@oms!IB<9uj8N`@K>5e$Z9YN$u|a=+s&anO(LKX^Yf1kKhN2 zqZI=7l3$Q;RX1yAJP-45zbFQNhEO%0e>Ince|{xc=QTKle%dZy?;~7m92d(VGns!u z_I4P>D}wnd?^}SLBk1{WQ?w*b2!1nVWi6c`3WyXTN+o}=d*~SBA57mBBKfF zKtPTpdH+A-RCN;y(jM_y46km{ei#YGZ9@~B_!tBfXc2qEHBXj6wXsl{tH_UyE?ADV z#cg5qI0f0<3{*PbT~br^Q|JK87=dDD#E-Mp#EPMLNCPGRD;ycax4@6aYYk+VV>B-3 z=LWr1ui_8TM*_VWt0G>Ed5A@6&qNEmsZA-pkS9=|cG!)1I|dF01a>uc*-wko^wB)e z48HC(2G@yp`$;nksYHvd26?6~8gZ*jiH*3%fjnGwbz?H!)Mo1Hs!m1`2-p?l%5fTI z`lRl)$LbfKH7}|dYftJA4->&+-AGFfLWMO*l?rI;WS27-ek=mt+RcqVnxAz65?9cn@>*haE|!L!R5ESJvPgt~v4jKuZcDO945D3;m(5sG zVW>XxOYjp&2q)8{Q~`1&z*apxy*&4PF;Y!t053S%$C> zsRbwMXoRWSa!9?xpG`I}3B4?sX=;*`gKqfiQ5iQ!k*ZYEH6LYA)pZye$|Q+XKd;ww zUiB@Gxu0Meruk#rAT(#U+JEt7c1%$CNs^Z#)U;%;nK4!UqB0Z;x&*`C?~QM7j>z+K z8-Zy#*zg)jR?)3@X2{*GYWCXSwF& z`^#EI|8!$)YzC>cF2v+G?eC$sei}42XayB;%D8~_+?MftHRg$IZ7h=n#TRa?01R}O z3qzZMP*=V%?b}H?ozY>B<%R|0tt9t|9kuZgwU}qU;JaRP3J!;_;>qp33jmBSqf59- z%TVTel|?3+^o{K~SEFOtWt^V-w0@VCbw$M;qc4xw=9ACU-QLOb*Mm#JUq81Y<+ngE28keScouBtN-O)Cg7 zclQ><{vkShnWMT9gC1Fr1#x*7)&|2acQ@`i(6^gaKxNaB|H478Yq*2AnTge$pK{us zFnQvso2%T(Ozcnk?G3$F5&p+pt-yynFzi`;+;tuI(|jd^=eL#2rZ;I63A)X%Ihs~V z8~&a`7Ex8b5P>GaUP>;mb(6OSUz@{6F1Pb)45eRpRvZLy2KqmqLIrC&=M*c;>B4gOexVh!-c{8<9Jgx&EKcW3*#(PP>()G z)XGIPO;z71$t-^&2G>+@90ZOu&01ybYJGT*{|?v(z@QU9y>&ZX^Lf>FJ#l_@ZR`Dl z^TKb~dr(x?kbfJtGuMvgLLW(zV^N7dp+_`thI}v9)rg6pvN;#*Q?`(mG#>xto=9xg zsI{$hH{NsuU}g*zysG;O9Oa8f5~@t|+2_{5y{(rCAG((3b~mpcW`M#C`R|Dk5FpM* z2}F$v7O^4-d7OOEt87R(5ExS-9E<-=7*XYX&7-&io$t;D!`{v>+dM)>9^QCtlJp_X zCs95lZ<2H@Ztl-aK<;??2?+^$7U2IoC}^O-^JZXb3dzI6n$_*MYrVG58;YGno5Pbz z#kC9Mr&pZ+eO<8vr)NIPIhziic1&_@j_ILBSyG|l_BEKO_Gz|z(WMveS&g&a^`m>(j6MnIe)J5pok7^eO^oqDfesgq&Qsx+X(WRUISp zI(!q*ZbbS53JeSs;LnI?&PYdN>`!h24f_2|Kx(wV0s-yo3i>l0BI5U2WBK>$bH%g( zJ-f(vWN2y(EN%jmf~{v;pL+_XKG_)9R<9AZ7F3~vS=6(-+Kh6rLbDnLRiuE7N5UxR zS+<_fho_N?zpN&+xvyK_;2 z?sF00{>ivSBopOuo;oq27Y8s@fm#u01u<}L(s{5_T^lve)vLy-`>tuZbEM5)`~P^ zI0q6Wi!x|1%mgIAj_)|!0jUnF#9c@@r_SwWn?uR+Cmd#}+HTCGfSS0X8dD?_3bv-> zendxY6noYNM}y7z6lxfY5V@ZnECv=Vj5JyzijrXslX>R=xceO+?7blqMetF93{) zRPoR19a4$RQEd+8eR!b2&UK)`pJstkS&>Yg1gk+A)1fWi<>`wUAJJEeu@&1noBrm_ zX4`$R6j`eS@@)YN!yUJ)&ebB0$u;|o=W?R33`G}&KmAdWnbjLdl1&pl72bAKKC=9{OA2`vpo*d9dijBQ zv_>I8nwIJ4#oC|1!2idPtD~jDjx|}wRVyM`nA6G4qS+wrY^qu-Kcxc!dI6|o8h-U^B(vi2;ks%rO<+_eiq1wm0WBr& zzzEM^%1rGx{!na82gi0~cuT8MLu121DzqjOnzcA+gTedtv#6yb_%$_@D&tU*kyHgk zPq-Z-)zZeQR$*fi>e(K0IW$#DWX!MWnhsP_(sj?@f~cUtVj_8()QCN^>^rLwm-Eux zq)Y|w0Wp>6nLbpAf821DzTT1KvV(TnU4hiWkz>KiTkLm}JiL{N4~1(|_P8lIK0cj? zmHJE{+Pn|$3e-|;TGKsfO!i^l0_5-oUbee?FNw7u;i}D<8Ck`jEv#OP=vd?Xd7HhXouR2m znol0@%w9XW(3e4+_|i6t18V@WM!cUWKl7W^{THLNR$*XUz+k1T3vhWoS;%D4dp*cx zGlBzw2Xw?@r=KY3)CvjY%Y)~YnFPb=hPEX9{ocql zllc|6@n<2xP{Wkm$gDOqn03XfT2D_VE#fcG??^aO|Rh1kC^rIJ)jP8sDFPYWcmCFhc$*&HeLs zr%9Y&_C3F#0Ou6lclb4YO-7I>s#V{uw{~H+l+|dxNOZ}#d&#yVG@e68hT6D7`dQVE}s1Zrb&z6`groG&HxRaB0rwkf_@{OhgAU?Uk@BJI^S4r ze06#qb(-#Chlcq-NO(_}$VN%C(;c*UevTMvw}5=(a6TW*X9$SA8Gf&VE_v>FV8X-V zN*<0sFW*;YVbF{wFrn6jz0pX{i1$H^RnIrV^L3~LQoSIX4LKY&uF{}Qn$)M7(bgAk zp0`h!=BxFtI3_w#CaXh+^(PP5C%u48(w|+b#`*E_YSAm>imxTYbnjOXkK|O-a{CZ% zj#cT@)nx6XsCaF^7CkgiZZ`oszMc=Yto7>Ub|)Nix^H(fwa#p7zjQu>CVCzR#38-8 zVDS*5K{Z9;pC5sFU)9A)!8m1JvyV9xxo?w*N{HF75({A3_D`PcOw#S=F`}UHYV0-P zV$c~(IY)=YrDDQ;*~xnhP>+iU87#Q2Pg2yTqM z={6r?yq4PUQF_FM?rGoF&e|M^vK}Tx0~4~H6->ruRGYQ3I8+ zl;u+Ab8*ex^S86dz|M|-yJeFA8aRMVAa9KtaV$hpO^c>9Y#!9asAlgbA&Sai9Qvoz zjY_YkZN3Ym!hp-souf$-nI^g9$TJZjb$MpXVbwVVAVL_P{a()z?4x#XuKPP7TiLSq zU?YuOZsLsm%(8u@O=_E?dXsg0srX!AHecE#0!cA6ty~I4e%7Xxi4wYj1CqQ&FOKNu zH|u-1M8YN)>huQnbNK{k+tFmTwS(`(xg+dE=uk~Kjdn-Dag>&6AGJlUA8urHG$?Lp z;uT3xE@i+N^Kikou+Pm2ig2CjrEAD)0!mn+S8ff##NJK~u_LyrdBRgQFHAVxg#3u6a z-Po+=CkS7qW#kM;=je(7~1j{oXBq*EDJ^(okTLp5~ObWu8Z|schA~U4p2JLJ<;`4wL-BJXfa}tu;obOK1MsB`LFp;+rM2x;gYgKFz+Ys z;paU(LmuJ<&ea<8UL$QC)8Sm6&bh(-?3@(B6gilvJ&ni2t`~4XMq$3!LQOLSIjWDQ zE>N@O+r%P@lHe+e$gPUbxKd{yhzUGG_2vik!GwP>22$ga_jEtDGbnM{1c?XgSRUle zlgg^0w;@&PSslW*2?l}RmO6M6r8U$$n=ZBBOzKF9{I<|^T_x3g8*i*BB9O;^Ab(yf8zWxjaC^~0kwPa! zS2xAt_vQJ{YzqE1%c^Kx?85;W#^_({7Im| zkiSh{#%=HGl82;MelMaE>GsSx2%ogMSWPOVyx{4$x$ln#6+L69tvV!r+%)us(;e=K zIY3NJB9ctm!&XhA=QZ2YvoatPy>}j)zcjc<26SWk8;JKZ=yH zj;}-pssq%VVY-wgutS87Q7SjJVVZ(E%AQbElyb@B(FN}V-#2G?PXRtV(0vAaS_%=!IYpCtnt7*BF8<)GVvvW+;!NoaJJ{+kT92I4w@}*EULAF7Mq+8O zoc_SO70o(6V%5soRqFEHgM-0+g7yYcO@dieNERwIJ+kK z`HL_zCSssv!*Ayh(@t)mdaI@8D^Qz2rS0l6j=^q;I=$al){NWD6PZpOUA5!Kl)%O3&n=v@Hbnou%4VfJ3m7;LG2Q| z{StbsY#7a@OY&-M)i?o6n6g6)P;S^F8YzrF=RW_2%XJF5_4CDWpt326;C8kr z#TuG>);+gu3 z5EF=wNS2$WFKlQBKkFZcn24i|p=hhJr-6=KC;H9TOHf2m8xNUXc?FHozxlZ3dNj@9 zNMKbUg~w$()5BpK!Pl}6H$3PYEmR75%G(e9Nw}aGi7r$a@*i+;P_W|c;qp|UhEnosppT+>0M zrDTGbA~zeH=Txs{3BW+feAycj@jJ2uIH=5SW9b{H7*BK_hLA4t^_Vz}IxIVQ@<0x< zgM^fn9?=G@&ko(<5ht#mVuLPrH$LGh*W7{Wx;+~Dp94EVR49PCJTAqs#t)mea$}JS2cNll-s*=5vP!_(lfr0qz+%S0 zRQaO!L!sWlLdU?oKkI$bKOT3Q*xws|K7`4XfOuo}fdH$~kC#BYyD~-8;hV!px&0fj zOkPHtBCKodY@L)kqk5R1p8{XsPO{g%hZ>QG&T0YG;kT!>&=qiV*-MV*qVhd;kUnG6 zeuOoJ_0mHb_G7b!V(fsu@r6Q%>5P@a>=5b@+#3*~RYyq-n9f4S4v^J*Lyh3k!EcLB z2;KLQg7f95fA~+@9k}}MUO$jubRaXMtOO_``rD%8XMbFXfi^@^7kq^dd*%<5#Y~MU zA?eF|<$_ z2v>`#5=bkml5MWYQ0P1*tIV|bZV!tfJU`3K)S?D~`!!L(c2@N`-T40a)=t3Aiwn04 zSw|B0*N>>ey*v7)%tx@}^{3R4C|Tq2?moUmHYL?0?Ji9jKhn>? zDN+^D;-@9cFYYb!R4AiZr)W&$kf2JVO3gvNs^Fa`r0`zlb1}X0fC`NYSGm3RRvxY3 zw9K@8LRk}_R;X6JR@_M>GTXQUw>+_^PUkRY!KhZyDZMGh-IrUn^`jT)j_cAJDNJAH zG{=_Og8H5Yj~bRh4YlcoG=+AK+Qt{Lklt_kP5JT0rQ4VzNFz$At;*Qb5rf%CMQ@7w z3YVwGST2m2O-_tU(-e6&dLz&@SZY0MTs1^BoHXid`7I`EU~5=vI4n5K1*Qb|)%J!b z)k~{2!TzH|DFiHh#`eazBfRYAnT(|tknx&jTtG)`%NTrKt)zUFE3aA|+?g(m?)dL^ z?=&yv_tEebP+CynUTC6@zUD13n@DCQD~oW>WVbA|cx_3|v1Bp#nbTZ^BkcVkM=^`L zsSK;}>jDBBHft7Q_V>&w231SBy_=ad-+`Y~jhmKhmM;SEm+40>%hYq`NwvdAv%wP< zJ7~iL+bi4i+X>tC^xtq%!coGtaWfLXh85Sv8=O;BEJsYZm$IP^-E-Zrp%mw^ z+cs$eF`Mbi$y2SqZF&R#LJNO+kVxm90UcU(VEaxva2oZ&fhHplVBbxO^rd>B66 zumrdKytA#h4{^V06tOPH&@n6c%$8Q|V1+ zmQza#9g`Wg#4QT{AOfzws7^F=3N7mnT3@leKCqhaic=VXrg^JPY87Wj8ac_<*!Y0p zrW>UyCpy~KQyCu3q^L=*VQ*EmHQ^);+Iq45RE5$SQC(`)xOO%@bpMH2^+5Y&nT+~; z-Jq+=_hP@6td@Y1&=QtU&zUw!x^d6evP-FnFs=SA{!b+S-i0*Ej6m$G(o3~wu=qu^ zKMBtaSNUS)ktRm{j#Q<#o!M#9W%{M6chz&zK|v*I(Hm~|Cd;MPm(7wjMIP1H+X3&) z-!;B_)ZDf-o0D49sJUFO6J2CX;!Zf4ms?_7UD3q-G*i=M*q2YFJ2*LLqk8jc>Tqhg z(Hb10y`;_Ie1A~BoKs)mItB*83#`t+sj2@uQCj6l;;cK`R&Z}{UH{y9lXvGk>bDN7 zTOy*;ia>#uS>aq(&Y$aHYJjRmQGw5$?$~htG=V#%=&be;9&mljq zd+8zPhU?+WNi3dynoChsg|3OfjiF?!pmC#Q5+V`qdGbHsb|9aIk0%BB6hAheC)}1``P@D@S#f&1 z{;b`+oJ+g3sa^d9(Rj1$nD5VaytePh(L_mV1&ANIZ>FBOj?SycdvtAe2ir6}t!{De z4!^5y&m|`_e3q|)p*HL&DuQY$g7HoFy?71F>M5&bK1b^^)WKP|l9Z5k)Jm+0i6;^kGls}gq-PPey8z#&*Hxv|XTrd;@ zB{?0Ew_T1tC6L;h?y0HJ&-y0 zSy?!F|9$@d)ADD=zj~_u>B-K)@psR^TK?ZXRUC}$g>9@LQ#$hh`7-}?{=4zNj=W6& zy!l_8_#d19t%dNJABmUg_c!B5vVPi9fP(r6B`G4P>hcNFb6z!Th-t{NU2*zS%gU{#6GB69*+iktQsBG+Z*gs=I!QjY2W!H4-LcjQX3Mj>}RcLgm-Of$J`RQ;^m9@+0um4P6I>aes&gP*}^`}kN^QIU;41?Vv^yurKM zP69J9a=Flac7~Swqfkr?we>WR!%B@%52!jLqAZKI@ZbbRq=_$b?}J2d!BU9uOF9)I zU(V4>t$JKzXx!{NhL9C0@kF#eZo8#^Fp@~Qb99;>?~iRgpd~jMOBD*o<&N^(4dCIy z;A0&PSZBmhkSjMUI^4CZ7Wj%Fa6eMGJ|R#=Qx(jz%+}dO-A*4`6wgb;JC~AJF_dp+ zlb4kDativF&=zjPS>onJZO5i0Ks0laD{>^^c!|vA$S2I~Z{%G8 z_3m*6%~-8<)Lr~twzN+l7q7vJp8C*y?rC7Q>+#AUxiBylIDc|4l52K}nBcbn7J9>l zg#v7B(Dr_Oed%c(=6h78-<@=Gaq_)wmM!udn|+I-;FS?>k%|fPwWYvY6e* zO~Od_AU+De-#kr5Hs{Ubi>^D;rr_I=GAFZ|GdiGja=L!&!bHM_qf6IRTZ%be$aNbO zY*8}QAg_nWw!0ABASd~Gd`x{4d??c8uDv+%67N(qF-2Pqz|oKJi(ydE6Q>LPld7#T zV-KrVQx&=%6!e;P#981>O_89WZPA|nid8!JwJ@Bto#pGqi7Y`PvxO;58nX96{s9k$ znp)Res%_a$`_4nG;nUY(0Wtau<+&P~;7p&-u~LB6CX5=}HKpK-38VepoM>;hT#rk0 z(J=vz&?q7vanv_6akumHT&zA%V;75iWmEaG!l^u9=zvFGXreDnuXLGi1NfhpT$>j3 zOexRS!(9LsnPrAA1*F~G6Jrzd!1zDfVP(^t=~}PuFz?RCGQ=)jy^gL|TP5gJt@59r zc+5}TYH%LC(oL_|c&!p6R!^@m_1_o6+1fw2ouQS`tS*y)TIABaZ+yt%blnniUsS~XvxO8xf`rD-sAF4uo zwkV=UbBZSUb1B3}0ZF4H-KoQw#%nE)SHggpr;GC!G!nI9fPQoZi)iB|72dK*OjJts)+1(fKgxqC^~ZXL-Vb~2d!(qU>FHo|m@34# z-CHwwJq*~}V>NppHQO}QM2B)oqVYX2@|~CJe6d=p(aqp1>h!FK8^kr` z7*xHyZ97Qlqv2uEc9o#m0ng?GoW%&7T8y%5Y!)2QPZLtnnGW?0oMW5oE9M2bqcTSE zZbf9XEwAZ^M!Ta=&`tC)yeP|WToX`_{^;^7MY4^&!5XK zR%%TZL5U3aeP3n}js@h#$DO1uxT{?6e|G5_5?vWOAJ6!^e<`{{eLi}J8&_16!n*N{ z+ka-zH#Tk(o|&&{y-U^_oSu@DB;V{plG7cCZMM@f^ick8$&rQVtSDFY=YK3+WJ zRmOW)i}=98%^LO^OLb889U0{c)fCsTWc|!jD&<_dVkf`ovHikffpHX7i6*%sf{v5f!q`AEPE+U z7L|;VXBi)#Ab9_zA*bE9#E^gbW+GF-JO35OsvKGE{t#tTL@N2Qz^MC|(SubQE0C^3 z;PB~IJ8YE$Qqia6>QaND=rymUoq3NIYStg>*8QoEp&2vn3m*{YehZ*7J`7-u)eIp1 zWx~tei%NdY!}WCq*#+AvN>k%53VFCFurX_7l_5W09XL~lCl?akEfu|6q+}Ot-s0&i zYWib(*IU>RCze6;)$7txP`gZQ?AKsNv)DdjBGJn|QJ`tvo{wg(o(UQyG608ByGe-6 zd?%WHeWTd5Y3ahv-r*c&2+K88a57)9io0Uk$fJC=(C+QKFj*~n8I`%F%dD`tMlcs% zMLjAiGZQv)MO{Ktn(VFH9nI6j0lodqZV!D0(-!!%V6o6(9_LwwqSCv_qw;b&V4Mys ze~u7xXf9BQ+pf;n{~^67_$0B4Q}nk2hVqL;+!2d%&y0(o+}b9=&24!Pj)$i+?Fw$y z=hmX)OE!FJ`0VwO4#9FC0SWI_^W21MbtUV9lFpHFdiz#=?tsJR~E9zSfJ6TP&HowdFM z{L(eb0x+ZW5?oVdZy5PDG^=7#!VO0AX0qik2Ea-A36(9YAu#h0vpC4Q}3QzXSUl2$p| z-J9fEx!e;TI#E5JEy|}N>n^Y24+`PS$RFES&lceFJ$$;eDDd3op+wEE)-OBACc zn`g|8m!|OjSNpK>iMGOlKVk+&`c7>Jb>9~{}NQdb*+J3syYLlzPm6JF4N@5U9{epmri^z`v%_Kqsn|u;Zl4K zWUGHX?)9pA_>$ZSeg|ta;uSMfwkqo)L-6)IDKt`%meo>0TF&SEPWlxF#&>%q72{9r zhpRq-lmvHhZAr^`Sad|wV;%HauAgwon1r2{xzXp7R`i_*PZr&l_&J{8eO~QueDOi# zL90UW+Vax_Z#?BI;Ffenc~`6Jdr4lO@{7T8wMNM(P;`<$bko`@-$de~0mh(^N^RMh za_as1HzRpQC!2lRmKc%H0WEQo+(I0fltZpj{dv|l#emE;Y4#x;v zO&)wp6-`eN>u^AKG1A>tJ$+Yl&DKn>n|5)%No>;6g8Mhv{~30_{S4p6`MtftZuR|? zd-nl?#sIJFVV*73m{-KS3_V|VYZ}ga-(#+VF;ja=n93G2{9A655&(Z7BjFqtX1timyP>K@3d%y5sJy|+FgJlYeNcnjCcyq9`S5>Uw)f_IjJme zcZEyMDp`qdCspD<#{$k&06#C2Jyn7_5VouP>#(KViJ$g+SJpzg%mBcq2E^k+@A*<$ zZNpI5bNR!04gHJ?Rip8$_Nra`IAa#&(3wPJe)UwzH$8CyuSOj851I2%8775j{$tE* zEM}^Y>YB+z9Ode@0AtbJT3#5EL&w&jIFW*~+dA6~n#)?vYO5ms_`@}&yNz7SV#DvQ ztFc<^$k4wqU&jY%rOKj#Xyzixm zvvb{?VTRDlmoEYG)UAp{frVFmT}s7ypAEDg0k&*bT2yVB*!cJ~&U4^?-R#m*3m(8g z@8|D?zXr)lMb}%~U0Wl|(6Y9+UT-y+DhfBik8P~m1F9OXF=LS zy{fNdIc#IMhY5bXX-Kqr;5I3+;9y=j6$n(;aG?InQ!jb>txnH|#sc+F*<0m0h8F4s zNQ=q7q#l#{;!+j4f^5r)GNg$3cokValBH=`(FVB+cFw5A;Cfc?G|&1WMXqkZDfil#q?9 zLUsOX;iG6s>HP<#`w}63>n&uQyv*lxWa8tFA@;sio%Fohi`3k`NfB{3A1&55N?^#b z0_RVudX9Oo@krC`+K*GwFFKovE#KF&ptzj2fOg{0^B0&swRFP@iD;|UzO_Aef*16M z?3|M@MGB21sNsJ>9cm^RsoY`@x66$$&eBUejt??0L|jhu7zPd7{DAV@@q}*W!GXc| z<`$Ey&*OEd9z{-lrZgInNEMWA>fhqhwbM7Kghd@ZoQz2&6y~MX~_wL z`{UzAkt)QYGtjJJ7&ImFLx7@*3Dw%YLpHum+4kdB&%)J(ZJyRC%{a_^*%fNqK)FoW z-1Mb&5bou7us{Ixk*h-Ot`(NKk2~dABL}iLn~9{<}DU~ za%+`!7;5NRblGK$2ANNxeA@-t%TV;P0o}yZLWY2U&%ifyr{;{d8Cl zo_b!q@etv@vXu0C;qrmih}+ACx}jI%{)nOQ`eziNwEFc}|8O=5zosnS24;Dsk@8?RLk+7xO3hLp@(+cIwE#V;i3I>;b1=d&+xENTRT{&)$n@_(LLYhEM z0_+CeT9|f?Dq-Vl)yzu}%!mYl1t$eG`f9!m-Z?HY;qitcxwaTkGm1q&I&fVJhjW2Si# zo-0tE%08N8+5!gjnYY8L@!8WEm4(@TTlK|)fBT5sahla!@33WM@I`0i5D;j4sijbP zzP$1^a*n>|^I;f+qwA{V-F0+^qA$hw+3bqFQ{abZwx2$DSo^NRc# z2?}mdE=wkxl}_Blx#$#Iz{Y>QV_#O~$8OjJvln6yxZ^rhJVBxP23!+M?ZEN^R!ybnk2}s}U=3ggoCW z`_4sl`$b!>Gx6jV7-5FX;K&j2P(^vs#+W2Dg~h|)s1?6PK2gK8AdMCTp|AB!_?v@aiQK6O;Kw?#t;i z%_K&h7KxBoMA_XUk8v+8nm5>qeID%0o_gQdC|H-zOj@-iyu_kZI9#aR4I%N)il>rK z<(Sxf0SBk>cz4OhB|45pC8r=K7d2u)Z4UkZ7nA+=(R?9U+O zx)`Ix@0!_^XD1un)#iHA$C)X(wJ7c_Gd;iK$2DI+aX!P!_e?Z9Jc(-s=3A+!wH-dC zd)xAEdlYRJnlrxi& zZFY0h=BQ|ybq6>&Fk#vU(bXdgE~dO#o(M=*71O|dY}#bXx!a1}nJ&S*JX&7-;TVp~ zP^jDPjs510w65oA&@_m}2xAZr`5Y3G6814%bv@BbU~Q_< zs13V1Tr@d<9YG)n^V>>lVA+O+h0&HXA71pgB(lnT%0KnF*kB>-;Qa_RTU{tJ%5M9* z#co+`;D|{)|C0b3n35^`08jIT0!8xu+f&?1`i3W)%}RO{F`s!Is^*8qIxFd};N54^ zpH~o1RU$Svw)^&BMDr^7>1HFkj@2yw5EhO1BN-Xlgp&Ks$r@na`Cv{lY$758Wuej_ zB-Tqt21UEgbDkRQo{=7Ko?#uLQp+RcMpZ225^ln9GBhyZvWWj+m%60ZJ z>nO741C-01(;@WP^<~zWF1|r!8mC>GnMmPQPGXyOZ5pQYVeMR0EAsr1>#k?^e1+D0 zGm~|N&1zfK{BpC)WEc*eq32j8pX0&YdjcM3dQoxl@I0hUhU44WJb6mV%NO9Y7)!`+Y1*{D8`9R>rQtRj$zCvv+Z!!j0Fgv-}$Q zhGWovk^~}=IexGRgHQaon^=Q`gCE#p&5nE^LTNlyW3V%xg8&K1q)L%^-+aZs*yxSS zY0^*Wtg~7)h4eFC{7CtGtzN!WV9aKf^3(y&#@Xu~ug&n8>{J^qZi!_du3IWelX0=d zyH*49Z0{a$&MFNRdWN*LwL@q9?A5A`BgZGd&BlpR+GyxQ_Yo`O=4y!-(79(okZE)e z6~g2h&v8q<`AjJd|Myg;)?|o(20%P#6$lry`q|ze{ECQnb!#F|S{gfdfqQ#>;r%zL zqnWZd@bK`8v*p?}jEqqYBsw|@am?(qlxM$nUNM3nIgUXe*iCO{EEkJs-m7(aD-|F- zxz2OpncT)Fw5qW2DQeY8$oPivKEb@yr?Zfm=iB=XqQ+GE1UvXidv%*`n<@sI`J?z? zX9pO9iTTg^cMpfzYz@Jk77-_`d`Y?Z^N@z`x zO=Hi)pb%52HXex(F%uC9yfCdgjC&`&v(%VR3OKOeR?w=U_qefS=G^c zShrXx58{9E^?rz{J=x26@=oFpj%R`y-MZv#Q3AC;DC?~0gIrK$!Eo&4V-9a<^hdCz zN(3Tgh8R(_-VQM&6g3qqTAz3N25q|O)ZF)J19g0;wGYZbccU*YCGhUONeAm_9hz6% zq%s3$&WjFx3l_OffF9~F^79T2j=OQ#xr8Rs`y~}^QsH<^+qq;H2lGnhN^3@NGY6eu zHU{$m?A2*CR8({F7P{yDSc-|XA@ci+-AQ{w0xS{1Un!b$ESRlz8Yj5s8h2qM4nGh6 zEKV}+efmRrxmzwkaxdz`aN#i977#lzWi2D9?Dm675`3AtlJ2qfy!B0LGqrU`!9;U1 z&P=LSMSAWxr)Y&;O<&7`@8SZLCUNk@@;2uf3PjwFG31x+&rcMY=3v{sDH=Cbfg4wP z3;)y!uv67c@TW43@g}Ez6pK&N#dstn@-5p_3t4CsG? zO#KR#5?oXg{`66hfPDMYUCGxOf#(Mbd2Bs0Ub}S>E?nU?HZfNhpCm@@&8AP@#5ziY zCK*)-IKQFL&pUFx42#1%eE?17)uK&%f_@}l-eiG%!O4kjj$Ng#a;Dssoc+%ciFis` z@)b85nv>M2%}qlttI;}x-iX*swYT}XJMG?id%6v_er*qD(p4vE7ZXulQWzCR>K_|9vDx9o9RRd+mrPBj+~*j}ECy5Jz7o^^&H z%ey?b0>F(s;H$;vf4op?%m+p%tZ(GGN`c0BmHN0U!2o#vZL|3*qYv{%N>uY9v`Q{z zt%KE$;EZcOKRZn|1c6VLfKR*a%j&_)}pxX7Mb7Km67xZ=uq+IQftw=3FMZIO)DSj!LG>E{Us zWW0z4ro~HJBw5uB;bq7)u}M{N#P%3UBFw$Pr-1&Qy(&XgR#nv4EjXU%NlkF{tHK;p zUC=Eo46daiodan(-UaLpd1M{D3nFE(88jvNWeYoE;UYwesz)Q!wJ%Nd+=HhmIY3#M zeVxQI?S+Y(>)YztvS#p0AfMKmO`K1v$zjXKl-~#DgU&uE?Y5&G9OnFk<3DwT;iP z_82hb3ZCv0BdSai@$v`x$rT{1vGUcMPW{@R+}ZwVsvjL22f@d?!>hUk6M3TP=}uF7 zM=t$5Ep6Xf1*qcd+V~e@t`H-#oTKSkb4O%XUEKG0gd4-Kx54Avs@92;xWlr2W7zAB zLA3e6$@`vjUb@WpV=;ZJzTliB&XY=UBR=2?Qx><+!;~*F#xH?`M*qeGO`$kg*6e<( zWPTvXUH3o~c3?+$J8L6MHsUd{mF&~aEoNfQ<@Tzv!DBq7Ru>>;i6VLl5{l)s$=jUt z2!$_YBdY?d(MYKG_Z~mRFTr*eiY@wysZ_^rm>qZa4U8}aX7?c}YSrK`>DAxIXXiw> z1gcr{?wN5-SD+9?x=JBUgg1XudhoHJE**g?9`{C^CbH$o(0Z)=z|vF_uod~COkzjN z>0++*ey0Gwr0iSp%Rk)p^-cWvUU4u8q0LS4z*)W^z2>dC!|J`zNA{R(R_dnkbjEg1 zJ=k}I3vU;>F7IK?xwaUJ=XZ^1q+khZ={M)mI`o0HU%!!p zCPqo#U0)b_IiJpZ4K}y}5-Y`PdWb5N1g+T*pV!S&`lMm~QyudUfYOfMLrfo-tQV1x z%oiesG?(?>N^PvKOJrQCFDOdgeSiJT>%tu+N5Uh03TDE`BZdDZ$B^8*9*&=WHY*2( zIufAV3f=4It~POH4b>=zY{VT?ci|_7vJ&NdNzqK6`4HDAjAI{9Jhk8nC7LJ_xXgAls6i%ECEs3h_J6 z;&28}HbR2h2RDGO9Q-6NgZ@tN>%DIZk7abq&cVjVw&pEuu2 zuMq_U{LzC?J)UUGUaF6#YJET{fI6}EB&PEK zOfsd%>;v9Jr!!6_iL^tbE)KCHiMpK?dD**ob$*Y;UaDzc^7HW?8tY_F64Jbi&0N}` z150~6VL+S{Xy`kqa!B-wJ#@mCRG`VGm#F3u^t{vAD6O1qWLl^8cA3ZjLu)6EJXKT~ zX2>eVU!fU4U$qy7L()`Z5y+bv#3uc1I^^6dx!wMUQ>j7v+J?|vDW&zSFBGX~tmJZx zv5W`UzP2y|VUc@~c|PH%X-G7FsaELXd6lEF+$TYImD*dbE0mICfLfaxkx9m(R)lgS zeMQw6 zj#?}=HTBzeDBV3T1DC;pQ5w5zFMB<#!3&h?Y|-T3)I)N!fnBs?(;DA`xwA2(F#fr*cXOYw{ zQxvT!ct1q6c=8S`50uQAh|LQRw(I>JV`G3`-83-f%b&hv$zd;}nHCxzk}9Zi5U){Z z@41{j>9Zp>(EtW;9O1tHhzUyz}y8Tk`ZiP2VDrvDol3;|;m|mhbfN+jJp)Do*SN|5(* zCWBHm$BWonlu%Y+gm>N2oR&OCL|)~pErxGZOzU;pjr!b5eWeeh-KMXD-n^%^v%NxO zx`~>xV{cFEb$w5{P*ZIM~=P zJ5Dq{ZyxT;_Mv647J~~#1j)uhA)dR5GXuEI!*sUUk$tTU3v(qWeH@uF{*I@Emlr2* zK=JJrc#qAtl#y@dB4;e;rB{(EXkh+)W;JODwW-7|=@aWw8jDd~hn^2DX1(cs)SUD` zesCZwl~G&GmfsYelOLyEj?)o`2FgJ|tb6I<_;S=Q&eFz4#CHWVvHe*WIrS z45Xx|Yg2ERnCx7TfN(tA@i^os-0pCj8#3)|$t%7!Z7P*iT8=fyfX*&1-nO~!&CZ}> z6G#Ytg|2bfAm(m4PM+W6SmhUyV;J*xeAW6i#mnu)nz+QbRQSx`mD^ff&Ej;l95oTt zkotb>UFzit;o#`tSMEy-MN<((Hf)}8^_aHH;gE|bY2+d?L+aYyrA|xT^xY#JZ~qhh zuqfg?xi1@-oij>07uzJC-vJjm7U$=u+jPhUIQAg=Di-3!IWhE$!n{lXWu1QbL@TnF@Nz*M*%!IjzhUfaXBg~yjF@j zW`XEek0&4A5iMI6;t>+cAmh@weL)St&t0#p4oa;l(6QTU1kWaRYtqTdZP;ZVVP_x* zuxmaZOrwxKz-22!!cEc5=phx*6;>VTFp+qZ);?sx? zM_-m-=9)BpEVBGY=<~q9PcsN2@Uj+dI53LgWCgh_@t7~@@GS%d8irv$boxKg@GG{@ zI6Y)p$K77R_9fu|$w)w4Kxpkx>uwanTWk#U=;G)pDWArq!dT|2NsTJZhiAtCI{8m? zSqom)@mmGY4>GQDm+PBLy?M$m9opDSrBvEWwHk@w%}oVQ&z6Y39-LY;(+2_yGPVm7 zCu78lWyCe;OXQP0j{LElK9g0Gli(M@aQ!-f9`}9(P?}I9m)pg_e)w(z{8*fguTBHM zQ=iNpO-sHas)dq>;p^7Zd1PQptf=PfarX1$Nr+&~_VzYFNT`!7s_A0SBuThno$Unc=Q_3OVcDbXYR{Bg2Ph3ZDTj#CWc2RoXZ)AF5k zz!vu(UDsegDt_`Kdzxx;a9B7!wrBjlHDWU#Ha>PI-c950lHjz;*1%wKNc1{R6%tknt92;D z_Z+1TS9}$|`j~ju(@Th(-ZFYIeCqJw`A25X+33EKfaewq{_&5T$QF{DV`idxm-PJ5 zjT~>a3p%4*BS3qadswv`)A;`6Y7VGfOZ2<`b^FyO)XI+X%38M(2SIBVW1ey2mk}|! z8i1v@yLF?tmzmqOHsBt-jzuOR?H}Oz+cK9R?o5mlvA=F|M~D&6()oE(sqmmewc2m0 zp6UFQyi_x_9yOb{6QTW#TA8F01i{Wlq#SAbvkYIqeR?dMUOxVDJ0hUC{*_@*q4?hpdDu;c9{_`HW5dtrpe(Q4<`)Cqgvxk4aieoTGoBFz}~ zGEM$LGun>KWAJqx!iK!79S4+02RAW%2~pz2tfM#*zTVLnLM3{wSJ+{3_0vs&Df9v9aQYqP$YZ8_I!jRC|`V zBGQT-&UaU^*7<$z^z-PI zmRlYl`Yx85X^?Fyefn7p&YB9GdcG^HbZu%C8lx@aT`*)9*M1n>um-btVm zk;D8!z|&uRm6Vm0V@t+H(YCkogsl1ffL`x(!T>xRHck#J>sZOPdtyH-ljDPz&+-#2 zrcmCw$h*9+^_i*Zr!K>pBvjq~9)K{}0olI6l_ws(mjquJhDYw6%s22cVdK@GX?hS5 zGcbs+Z7L7MA_){_WFoYL3KKETw0j!;*>y_&q*4{Pm#=4d<>dyA)=RR5-OYowNX*R$ z@nqZN3xzBIDkhJbS8~Q zQgJ*iA>a(SxB5+u|AXaQ(kFdvpSxXwJ-uxd?b{&O`P`XcDwyG124{x7e)H^1b}f!a z3lajme?`_WjQrmr>wKhk-Lnn4s?7_|WJ}x%`eIG;pM;_FjU!*WX*y$hRCw+&_0<>Spv#S@EPT)dnXb2`%HWBo9FrZnXn?yoa&Fvq<%O7>ulCvpopM^@0H$H%(v_y$G$_uLMzp$IJStvtLscbL zXM9>XdBstZN*{{$(h?Jt#kW-Vo_cwnKUdRdu{GqfS37;B9$70o#%eiPiR4Q50R&!Z%T0GP4PRwTA zM)$pBMEKV}5kgrAlo{_H2aUkV1Od4eO&xMReX=#w-3~T9eyTkbj7X)3;{C;Q$axCI z&G8CR7>!fIQH2D$@8<3ts(q~T(~7tGW(gHXTBCxOBX%l%7o$db@G9c-DfudGO%7Zk zRTmX|#dR`^Yc*VN%J|m*lMIDS2+>3Fj08;V-ZG&DnoIJGRE7yjYI)6&vXe^*zRgqFn+#;=^cIEF8^6Smof z0SkTA&2_EMIJ#^V(jCVB`E~C@OS+m{R`&k~x@6y2w<78AXDYW#YIE0IQ=hsV(|PQm9}2~XG%2O^a!-UR z8P^l{=ZxH+na-2~F*EjSH zKvdRHyxR%CR+wauM15^OU8XJrG+su*6h0|F$Fx1 z)T6~(oI{fE;)x(`0_h`S>#65N{>_5}nbsFBc>+F<4VDA_EN=exLgml z)j@qVe43Md8oQ=@t_Fg|Ryp#TL|&XKgoC=h=)}Zw5HyhW-k`T1SEJ5S@*F%?u(M;D zLJUcPj-(ZsX!SBmmF0_Iys_8Hi!}ZzZ3X{g22-y*tkNta?o9SD=AY&K&*g!^3`n~S z=KaXF@QQxM`QXlm+W8SPTJT{DR1)hG!e7iFU`~{5=p?8Jv=Pa z^mw%xIan(BO+iLlvOunNF@^1zFE?%2L~&rPt$=EPM}Aj)rbN<2KC|G*i5}NKsN`+_ zPEMiD2KPk1*Y&51*|SSXE-RB$T=M0>L|SS|%JcR+*d!)O36H1u9#@v;KeC|n3JNAO zTvp8bU6c(i1?mCKdy6{av0q0WuKuX=>#HIij#HU$TDu zP~djlL1(j=iGZX<%{0oECKk**%S`5KgdKERi^&UX#!TT)4DZ}EWv)t&B8tU6_^ zx`oR+QI!-BSGg$e7r*~)0rq`-`8srh#iBi{!DUuNf zy5XG`K@&J+thXdHfsmcQM{W2n3WEvCXJ@D6x|MCff_=1OJ~5@t^pEkxtqEFM>1I6~ zB}K>IGN)`@<<3bFYmVvxGgOGzfx)2ekt6>I+VQ8dy!WQ{!kB;m4nt%8nrJt{Ft* zLUtNxrWOegmSH5)=e9qb(dC?;kO;yeykZ_?kzH~F8!j}Q>Tb%^yN#-^KdV@e3$Dbcjye`JY6Nl*&1;1!?2MGO7 zln~IF0o)MS201~()*KPzfAO#l+8I36{=oE4tbXBFto~f?vCUUQ&Mn;BxoKVkcqVWI z+4g`27ex z>+X5wWsd|JQgalmw-(88uY31QD&W2w|GZ%tHt&?Y;$s%87UHg$e~TaxT~WcL-J%9G zp{55*7$#%g-kajaY3x+k5#`|El8)3S?seweCZvnXrUJA$lIx4jAOaj+r;ur8be=h|0vov^QB0ZE4-%`&45& z{{esYiQ0_b(x6CYF}T)_xP+j-PEPVx<4yN}5t0s_f6`p$Q%uG1(?qTudA-EBN} z`Awn~gKpIb!&-7=>g!Nkwu~C&sXaSQ$i*Tai#s z3uZFX!es%?p|imMhq=EFs%m}TfN@1o1d$e{yF=*)>5fge(i;S%JEf7{ba#Vvhje%7 zCMBi2>$muvqj0{znRn*>@0~d_9B204Ypo~l`+BbXy068F=owC8w{ghV%JyRW<6a=S zwnX}XyIBs(yOrIgHEB*2J?0eGlQ;VY;-4T><(-{aaw6F%Osg@w*tX8JRW-ScjFd#c z>41XAzTxE$Yp299q9VhxC@yzHv{vFQP=QboZu_5l;$8Yt!QNB=`%{MjvHe$u&cJSb|-H~}%LznUcp46;GMQ6Jl0E*FdYoeqzn#{6qjn{Bl{|57uKoQTLH{Myy+ zba02g>GHVC2QiPW<53^j(r9M!&WvJwtje?5U48W&>olpfy)%Lt9E)vP?iIexUmVPr zBh|T=9)lRKP=Wps-_bD(UV&t7{FN(=NtU6(`eWxn=SR|}vXlnJR^%m0m_6OqvHXF6R@LKSajRr)i7Sa7Gg0OM`_(QP;Yc% z*~hT|{P}I;#YO=nDM@bhJfNs*h{>FSWUn7t?4i?Xn$O?Jz8J9&CSJ3*R>9WYB z)AM#FGUCpVVO}-3ux_Hua?4m+u63O0gyU@ekQ_3NS9>j+a)aUH<1_O0jnhyQ_K(3N zt`+r#lWnfSDL&k4EEzpKZ6@bdqaRNf zRA~FG=Iwg5-^FYcqW$$X0xm{eEoCH{LcfKSykKlKbC66TLqd*X<;U$LVICbG=MzZb z&Go4cl}z)c48u*4Syy6G5k4m`>i5}MEp6x+s@ttAi`i_QPt%!hDK1S=9gz9OcUOE6 zv3?({^yyylETfo=!{-!h)uWbR;<1=OKB{hM8OUbY%~B#(jpYo9;qdZBu{8q$PR4(J z{&z|94Fv0Swphzqkc+xCp+mjeoR0h3b1SJtKBpsNCEDGsmDx(un7zd&iku4^=HVf^ zZ)=doW7@Fhiw(&|bTkKQ9UnkDA&E@Q@H|(o{1uBC6ar{RvH}NYj+F3d6#TD(r)q@VyvESx;dpAt&+mbO;46hgjFd2$5iNi*2}YqZWx+J%OY(u|bXp+Y zo_7qp(LOKvSY!;GbF=UWs)oFnH5{thw=fh=wyw9>8n9~Nk*P{}R=$B8l%)mxiv^hv zLeiLBS_u(e8Kso%{b&|!{vKqOk)FQ1V{@XaBvfOQ6_$KX8p-R{+xO|TK4f{skMGUx z#}AXkGI5Al^bmXiMo{#QVWOdlxc90+mr zGMv9Dm)PcA5E~B%xt=N%_q{LDTak9SunEV~oNp?B|3l)*zTQNBRIA=qtfrpx&Wswg z(YczMdVjD1(;a>c?OobG>Y~)d=j?~%WB@hsorYOr&a{F+V1T@zRg(ppJKOJ5v0Dy? zxULXS7_-Hy&ohO_hop$#9IGRi#uIPm6Lk3aP?zq^>3uN5W@v46}tIbKYAF8OE-izb-$E!Fg) z5&dwpY1Oa?Dx2J<%s_|C)qDrDdpO}oWb9|A!ht4J$)_ySR_nV-t2z5Q?qTBRaKh=` z$=C6wK{XPe!dubz0rQR^5yk9O1X)~yK}B0+us(JsBGs@SWU*oeyQP8#9)3yol@{LdV|eoF4e&7m2)sb^%%%CG1{8E z$w8Y3@>&u#`E{mK#ZgAbli#Wf*zcC%32Wotv{#eUg$4Zo6EIeV`Aa>w+06(MDm~;!>;^ zE|gPxX>EQR&X-Q|MRlk)w5ypvXD9NJUzNJVAvTO9wgIZY0ZcAhi?JJ*jbTMm3;L0u z^f@!Fynr8;ySZTJ<5WP!7&$g?I$226^yACb`C5vkG7Q7sr<;@mtZ4-peY`@rH?kxbhrM^rlPrPHc zVQE!ZueaOAz{yU=sDjf~cMaDZ;xHQ21eY50y^6~z>RLNF_*r5)d1cvZJLUb{dF zh-5|a6*}NPb>ZX|Yt{;sG#mtSZ^j$~O&-g>6gN)-F5Q=cr#LjYRgzUBQr(q#(Sq32 z_Ak!?rINm*I3MkESwr)@hD_FQ>TQ*&LlHEQaFALP~WnljLn^le7%|Ck<0XU zuXsg6a8c9qt3T0@lV?krl|7;scR`D@k2-LYsU#n-7<1lj>mkLWR*o5`{GZw$P9kK88!I4F=2Uu(Lyg|97|MKApMI5s&@w0gQhlUn{p(j7$EUQ;F4BE9nm!#t z&0%H@N28yj433lHXg=oeD69Aq{Tt&oNgh*_dUoC1F6u0$Qd`>=sV>$?6gV8N4j`F6 z>RaMSZ%qOZa5YtYa(%h7iV5m6R)IRQhbG@D;_9nE_6&WeD_h3X1e>LLpqI<;jL2oX zL7816tJE^4)JT7fQ(Va9nPxs)r%Q2bx5#9|5sM%{W;2oDiFzmW1%K>jJV}1 zy3r{LK2#{U$`|5qE~=&uKI0_VTt|enIo;G<7ZOQ}WwlG^vtJ&?(ZMq7wqnNDZZk%H z-@8;Cc>9@Fuo$L>eFS(5sRvR^ zWhi|Au=mt>k8f_-7=A9^x)%gJQ;WKFe<=&jx@2kdsDS0>=3X{pjUrs(x_y>2s;*%c zcM&=|E|XBQm~Hl1{rKacZ=d8wUxl{t>5$&U)9u6DnmQV;<4@GVT>s7?yO&4E6fCi- zEI$n+d+{i==D6tlD8vKJHqnB<7#31jp5*i_F=s%3OLM~&}Bs4BW=jXydq^(>n{9XXv)$OO_TQjpn(fk9Nsa(3y zPD5F6ZVKDE!|$oIm4G3l&cG7NC=AVZzL}<0R$-SfP5f6+LLR|PqAc8oRlvyLs2nTd z=SbhSF-aG2LR~Ob>k_Ck3Wez++5Q4o1i7|7DBsdsF0sisVRh1$#{N18^%ESa^qcOt2; z!cswlUSS1VGYJe&6_nddGpc|q2E3GArI}5q0=8u63cXyy6V60bQ{ z)sP{(z@hked>SMoT-bGX^%50}L#`e%z%YA>U_ba=9hd7(Zz% zq@VDW1eG`8jWK4LQKTM2Ej4i<4j_B8H(dbRYI-PTrlf9KaL_+nX$L%o^2+~iUtI%} zp=c&iOWanmsji@Ib!YNNY=PfD#4ez3WCQe#7lZ9-%XE_-2Nf=1p*Oj?jR3GH%yNI@ zoyhW}rdCj)E<=UuOWyiXBg^$S%4D8w0yqaOJhe)jO}7ifC49m9EMZlfCdcUy`B>P- zZw*Qvr!V=sk7|nPz=~_He9K}wU%qYM)!t(w%Qgs$si&c9u+PLOrVRnSnVghg4yac} z%XCs;Z{-}B%MP@odC1x)GcFT>>|oSO+bzjJm8YZXD#wr{u=+~ETu~*!ipR5>bupWn zl#EV7sV)J!csrMQUP+Ey3ETc38U-bn5=JB)^6b~zx{TkTPWq|)yi|tI2U8`A#5$IM z^k6?(4W3TEQ@ot((*5yjN7qH$EZtD2(z@si%U8F?O^oIqdzy74XhZ_Y$w4{dJk!1V zTcM3&w2-3b8C+~JUJ#!xXe|2Z60}74iQt5e9d4%k%cS(3#q&-(u(-8~`P)x35`#4x zM6U$-(Cp))cezO$3dP48lwZ$Im!R|TG+@m(?_mjQFoKRO8ZCK2Q&RjinTmSq;aQj} zxGL`_mbeY{oK&i)b+VMSWUS-BxhB_#XO%xS9PvzFWFU&s9(a zis9BoA;ByCNXixP?GhGxF1SeU9JhhAMUyfwMFxqaquA9R>afgg#)C~$;8tZ$(a7tD zf@F$CCk#%=g>O@=2TxPQsbN^NCSNrMHZ*P>F9*R@BXG+!p@Eq6m1m+9zfdZ%zG*Gz zRB#AXqkM+AyWb-zZlmcSw&{oIs1rrEvm(nMkRP$5{xL6@#u+~?u%I5hlC>zckoCki+!E6}P6N2tqKO)c}9r5q6Zs$_vJwrTq7Pdk<(FHDCJ6~TPF7o=@nQe|1I zs2uW~>-yU`a?ppDvpAwXlG6r49&SvdV{E6y_FARCBo$tza9=lVGz&7P8VFJu*7D6I z9(VBFid*KJl~e5Ib0;)madV#Y*1!-R(~wnwl-{4bT-xZ*gF=zk zMd(bYD0gn@c-u^i#h3pjN&iQc#-dP?OGx)hN*%nkNeW_etl8*oplQnNbj;y-HkVpa z;(eU)KjCL>M#KBS5>&i|5usAn%JMy@n*ueGgvb)CMNeIY32_NVlPYH$$kErP(`jQa~nx5ce*6;EB?qro-hE6sM&rf=bH$p+4>~$t%;Y=X@Q)7^dGMBBb znwQB^|HP4g>6c_-R@vh&ePWY1pQD@l0JyAO;kuN{0dq2HzX`>cuiDN@9{kAOEa=Bb0lhpSDkuOAB425eH z8PvA-A)d96Vs@-L<9qz{a*!~oA4P{s>Zf(Tj)hy-ORkQb%#jvlB=F9*;O|;gwr;9J z{nCIQXp5&CaO`#S zHa1%Q?Y7u3hVrYik+Kh$Lt{Q8DkM9E?Nz1~ii-OYxF7>LXQQidpqdr1T>4vxpr+HP z$~-?@Q?RkAkP5})iUvq%BQxti)(Cgyh6H$aVPRnokj77DcGeR+d-OSw&bmP`mX3cJ z%ij01O0O$Q8j4T{dsnq5DNh%+e@R%13!8oOP$AatNMN&&5e>zsGi4*2OgQz9Ir5J- z{#=crihSLPW2g^N2bI!XXzDPL6tNn4~>B5NE zJWe)XL4J;Zv5p5n2b%GCE^0@6dpEl3c(!^|0lR%saLkh27Stwg3Iesoc!j-0lJJ8@ zW3mM&U#1hM1f5P&BTwyTyNWRE-0*~ggGABuS@n(Iew9`3lePfRWj2E{2L?|Nd^eER z`S#Z!>#o#-qG5nS&E?tsmg3-agqF1O?Lwz*?}-EtH@9(%$K&zL0Jk0=ANpMFMkkvg zo>P?DtZbyj)hmC0cr(^NrAI*2El2HHMimQ6@bTn%-rk87cG02;-p0Q(G)bO5Iy}sH z|K+Lt?aj61rq}4$Sk^X#O5y9LUBJL7E+ta0K4&tQi1e=lq?ikEbW>W0!h%n#b(39R z~o_@I+b&1~5)ukXH05egdlaiQp+$`W?guDSL&kWRRkzw%u?lnak7*1K)>m2ri z35BS!wp?lHnTEguBpDZm567x9A6L_*HfE$m-@B2?E)8kK3sVfn%)hP(tuh?I#^!V5 z29A3PH#e6ScO*DQF3^iqKl$RHD*0Wl*@_VG<)XixRl-Re?+YhY_#})yW2fCeIMO&6*gpE4FfHXDlD(}Aj+j|RbY4CEJKXZ z!xY2b%^^I;cAPX^7PFF$N|$phD@)5XiWC=+4AIrq;Sf~!54(S-V>bb&LpdWK*LSV` z``H^cp9+2HkcJc7fea=Ah_cX+8q18MuRz~r_!&bL9+#bB``h6^$;X4Ag%Bum11-5x zI-Zs1c?So*Ri^HzJF{gaNnG~O84BvZljh+;{9)F}3&OI4DYGyf=TiD)K2E!FKGNzC zAy2P@W}91+^?jaeYYJFS7V_R z0`x>hIU5M!oGkYg5c|ymjZNoq@^hYi&L>-exCj@2DwQa?Phk_&)6)?OzFV_zp-OO} zBg(&<`8D1XACk1*FU(NbySx1NznUHR52x3*r@i|ve{X4VVyRX)!G_5H>jZ4Ug`f7IZQV5tcJuf*O{nYYCER{`#kAEIqvf{Xm(UgZ)M z>QQ`v^qizjC{?fmQ5t_k#teH?jN&HqhZA8a>uz6$!KO7O#S};ya{mncD`dcmaGaMe z4d-DVO-jaHBWkkMP-K2k2ghrzfJf5(dy`83kFs|Qy8AXpBt#Xua1cS;!2o1pj_~GCL!vyNz~D{D z_U_k#1h%mX@E9d4>!iRYCCs0N@W}IkNRAawfmiQ+0U3&aFhlCsel!H>ve1rKvCFD4 zM|*pzkDol113CZ;3m(zjPtG?I!0(c)m9``s!Fy1%Ip^pw`QR|13a_7L?CsUnmGN-u z`|)P?TgC}dvimR9yaJZPl)#Xutr2~1W;;Y6h-dJhXgHu?Qu-0&uaX@|Mu4X$ol(n) z$<1h#fYWMZ#M+)cUQY(HdvB?Vz42e4l}E6+5`g+8t)`@?{Qq#I(L8xmlUyc$TVFl+ z&rw@;E)VoH=;wz++}AL%O(m~)40b9}n2rn#{R024q^OujnxCRhXJhex zrZJskEU!tG%m3n~Q z#C-rnjE!W7ni-GSjU^Y^w#N*11dK8wg1?viJTP~b%)M_OoPcLG8TZ%K)$Q)-5!dE+ zGt%sMB^&f^OkG>YtDClaW1wQxMnrYNuMd4+ja)8=&HFqpeC^ z7JxiRJHUtJ)&KV)I02*Ld4&r{+4FND07-!h{?aYL4JzIB|3*1T3o&6CfOI9&I!6A9 z18oW>sAvd(*CjO>kQF4()dP_?{%;hZ(njUDe^NQPyUgVolj&Pys6l_-ICjN+1ArH* z=9V%FrOGdV_&nf76 zwlJuL#`fP{tQ*UI7dOh-QCcyZYUuUTJU z{n&}1b3@=!^616^`9ALb$K`zP43dAv_@zAvnYMQcPHT=d`N^NB zcm$jO7MK<4tAn>T_mMr99yWhVgn~^43*qHnx;M=mNMyop*r_~4Yh07tgbHrYve0_m zB7638@t5mZNq@)8gWr}y?qf0tI492z*FN^~JBtpm-24rHu@&`hyh^Qzae_fIi-Oz< z6#T(R{aE%T4-;P_t#sIb0(eo47k)$K> zZ29@S#@4Xtb9zOK@OET(d6;GhU&|&*MhNWG-)^VfIUQl)B5isPHyHWhK(Sd;;r2Uz zE$vnfmzW}VpIr{kN+E5)_5p=Zi<0Kk36YEIc@kglkQuIQ^obXTk&fqZaLkuqnvJKM zRO433V6M1nO_aL(d$Ynr-LfKBXSHl)US6IwNI&`V?tZ8gEn(`o%)zo2w3-wIOXtrn zBmMR?>91W0lKiDJMak{TFPDgE9J zpU&311JYkelMlI_?d=Widfg3;Zmn1QHIWM7DPaOVh*R(W@KeHjt8meDdVe8Jr_!o- zEcu$mJYN%KEjEJ`Q;k5D9M(okPTse={VdZVTck2<&6^6=II)r z3v2N;frB4(K3P&y?|)Wti6^_>I^>3$unY5}%E4kh{^yS;3MzakEu@Y{u`)1k*`_BS zFIg0;1iGUM6i$wXk_UxT5aYX3Y19KslE4A!^4hZWmdts|(ZzFMF)(HhZP;i}Gkr`l z-ezw?s5Y%1?l$$ZO@F(iZz|Mil#75pkr=0nT(UNvnEdaxy}EK%b(%- z0NaXqQyxh5edGgibf(n+Od1nW6fVw4Ldho*4SW2EcOjE@9d%lxwPw<_dMzBpyqif^ zbgdG0pCrRo*UpY z#z$=K9MbQl=Ry)uVoAF8Ib%%*w$_&+<$KR@MoGG4dN~FPYQH!XCroff&95R2GVYXe zf%;mdXL?|n8r`QAbb9<=eiuH(rlgn6bfX`RwNfl{F!bkCt2+!7JHO%+UTL*M1(hm3 zrovI+cd8BzTQd)ewkM!nd_jDrubK2`vhL=r`w6_m&B*hEs!!W8V9gvaZg+QCqh6dGn$D zLXZF>PG+Q-v?mSHSTiFw=BV@;ey_q4bo#HdZ=~ay!vPgdH*nIF9&b9`IdUlhG#r_F zT_K=aD}y)|)96C2`bjqbIhwz_!-E(F34F$W!0W! z^n*$7pNuu`T(!<0HmKd1Gv+xp1WJW53s#2sa;h5k#VpG4Fc6dKDvHQ@dh#y4v#%n_ zvVUK46>Oo3?I>8>ECtor>^>vWaBye@eP6r-pU++P@vExFHk?3BeZQ*T0z8p8 z2o!O3+I$-YRG51>H`N}l91nPmTtJG0ZP#&=ymkIFLy)I->Sy5k$~&h1jZ=@(<*;W7 zzf|&2NHnSln9rX>UT{5Av^mibeqthCfE1)fi%YFQay>ZwTV2g|nNW}4xVB3w1Qr=gXDcnUiPH4=9!=>$d&9o--OlM&K$J7yPe3195 zu)HxJ2Ncv^+)=hAy(ql^N4OZWBZ{O01wRxA!s6GqB4UX368y#3W zQs_=S5oBcmd6uVAl8iy4EER&w5kdZy^WnumpzaZ8mA^8NnES%Vcv}TYgykGRe_OEgCF^&rWp6`NPUu^eBK3)P24c}>(=yj_o?Pw)DkZF$ z6}Fp`jII|p)iK%+_sW8g$9%1JcAHvoNrW@XYhG5F6D|!9Tx2-9Y`5=rj;w-ugM%f9 zh3{ES~q@)s(`Egqwnd>*tmQV1gMQMGU~kJF{5 z&VjC( z7-ztw`Qmup9^p%c(5kUPd< zW|0=pWE4{C0>~lB7#T-76RdaV8sQSg1pQvZB`uyhiCNr7!Udfmk12s1cRB>e+=c1H z;Qi1PvGC^#pqvf8#74=C469;n$ryS%`x#3=EP)^4fcL(#;ZQPNk$Po>OcG}gAQmw? zA?XOgU^|i1d*aHvpd$Y_Cq5P?|FCnwG8>c~hBHg_>m| zO|O|aL=O|j!b_kLq*;MjkhN!`k^;Jc6?p_ih{{Gota7fGC&#@_yNxk9o2!7w5sN)0 zwIYf#^blFbSX}9TIj>?e?7Jr^%sS{a5ThhOXe)A@zY)WZ%CB11)^1YFQ zJ1NoJEpgflQJ1F#KN^_S%-!~5Z9cuC|Md}0e?#Z_!Oe2ZG-J|W;m%C00=weFU+)H} z9&xbEx&$cK;SEQX^%v4kxLda5ZvrC`5s9Qd0XbEqK%+ny;P@miB?a;J?hpT-yGOaM zwghu-b*vH*n`mkFA;>zuJMD?zNtS^qAdrs+=ydwv`E{GvT2lG{ zb72N}Z$IHz;hB+L+$&VGsg2{cSMRA_Yj-bI9iPe?^jR$NobCj1#vnzNN!LqkeU(kr z^Xl4+GfI9Jq_w!XNLqgDs$Jxugg(D*=)(Mw=K|(g;1f#pyd*tny}V{Ooz9r>m=fb+&(S(8qwd zJTB4Zi!>lWU@8foJuZ9zErDpw0oy9c#;!8yb{OwiXO;7Kam$x}v)Ntag#L1%#w>xU z$D$vp*iBtx(wq**-AUH2|B_WY7EqvK6IVN*?l8NhajHtMpXhOoa*x&tG6hiMCUxTZ zkvt3Sj&SU|zA$LtU-!iG~7e6)))F-UT2MC(ImT5^ax_zlu}YFTW8`MpsemEBQm6X5|RujB36tXG{Go@|f|~`DNbWwXBV-2MYa3$97DxAFFui#_Y;w z<(v7VCZV3i(MtPgvJzx{?cFO=+N94;38L3;xs=RhAEh9Ek|?R$pf15Yg;i^IYkYyv ztqPO|T#|=19;ONm&wfI=&r6}Z4#`}O#?^&aTi^_iqM5W5=H_j)Jm@iJiK|2~-U?s5 z626c|FK;%=&u+98ZcBrh#+BISTN)NU6S1P$_~aVF#$3=LZS6uJ{pvzodPh*~=G-*{ zJPQJYK%IUMTFJUoRsH|}^uy&V6|CA<%IF7_h4?ayES{KIpS@KI&7S{BnWYE*fUHCw&_*&P|9_A*_kT43Gqn`y!4JWW<>CG`vuBr2tRNQL<< zr!gmB?HLW!5uPF~ZT|fBQIKP^u-ql-So)0k4hPY18ci141Kbqol?!8SHpayPnGiJ&n>l2C zET<1BZD08+iQW&H9PAYlN*Kgf6!YD!vQ75wK#xxLt(kdgedJ2bVQ98b#u&qS-H+v? zC+E-Q0Wh{clHn&LD(Wn@&NReL0w|T4($2f6yVrXnDH@ZD74sq*ZZ0;_UcDmk>FF8G zSE8u}91INF{ZSdMSEWk6Ib}SE_WXpfF!>Yev!|uZuitVHTi3QW0vKWDczNJpDOnTxKh&V>*RzBuM#fJvr0P$wcc zR-8SUu^xIOZ~?@4c*OXf=3BSBwCuc7D>|H-{}8XBAOLxNy%cYA<@X6oTDxUuEBCv_ z$KdhwWZW5dG2#pa@!iK*-DFco+Gty!I9T~3SQ*ztQMdD{KjJ)51RL%t^n&L z;yZ7><8V64B_$<=j~^qA-Q@$-eEvwKUXe?yRW~kmx%5?f18CMVzj0@46jorx=Xr>L z!+asHDCOi3FkVEiEcy1V>hMZ^kyA}Grb2nO6BgnHDg^ORy~a0Ia(GOoSzL!vq&U?c zLr&b~nWq~9vlGmA4R^GpT>lY?N}&mIhpLhrcWoW_zmL=T)oIO8N&ha)j3h5(TK=~7 zA@GIsP+S`_A>tHi@9z@ErWPuGo7M_$p(DUKG?`Fph=AK+*m@pNHCQ*=ZL5dkV7cF3 zSJzsMW(LI6&;4iI;60gHvyAu{(%yrv@sqexZ5j_yia+3f&AiqA(I#idR5F+2~aTC@WaDb&<-wm3sH9gw#6PYWOh?n|M8a5fWApD;PfY@-y{U4kv=0mKHN*T!0rNcF}`X;9rqQ9(n?uc4tafb}uXEpR4{wH9#; zd?iU%(-RWBG*NvTPWO^X>#cKuVxF3~L^RcU0CmB-192}I*7ONG&Ax1Aw>MRu!tuL7 zW%&_#aQ?f#+9YOhM1|S(B&{Y8apLnz0C}}zoci0OW`}*IG5rcv_>upKDAB4%)zsi(&rhZV*xm|82 zUw+kYPmv-ssOGV1^ya{Blpp$v$(2Q5zXjPgP#)_sZnENZd9-319cj?fpz*`vXx4r{ z3MlTxT}$pyml*^JiHIPOqbjSq-i|BCKEH)Be`tA>!C?^g?$eLA<-!o89HWQP(TgaI z3KS1nfEJ7*OA7RH?nXTZk4nq1hj-GIzw~>VN#6nWp90VuL~$4SHj*#b<+( zXMQESU4X4MN_BHWes%o(}jn0aHiaTR3<`#ce@LaXpk}e}}x?=LOgb{dI7|%Ii zf!M#g=c(6^!<%4F-Z#L2ADI!N1qOj0$6cs+H8AsDb~o{104)fcl?d}XuV;qCF3?8# zKTc>pOmA#3zX~CIHEwADRumTse;q)r_Wi7!4g)bVP^s8rC)8Yrf~sfTbXnIufp8_> zE;5^~nP_^=jqFn8nn-vkpU$YVUQ?MJF=H__)8riqF>!nGD7{Wo1D7n3mh7!tw5Hp( zFo-)lwqkcuB!4oWHmffR1Ae^+onE>a9VedG+lTY~y&=6g#>@Xeodd+XyE3Z09@#d{ z(oL8H)sE$X?N8pASuL4n7k)xoDJ7E@mr%HYK*p)2BmM09dWVvu>s;}p^RH0L)?dWs4#$V!-ZZIHM29Wbm}zWmxRgBlPiFHV z{@jU5DF+ff#O48^6W2+3t>M&_Gh0q^{Ov%#UHAy zj#K}QVFF%6-o*?_j7BO@s4hK-ktt9v`g&Mnxpd`NknrCF9z8#ys5qFOGKKr%cZOj_ zD&l7=K{I3g|C|Uy`I{)R?9^x7_a~GdPP;H68)4YChQNxi0Qf)O0FdA-7zv3(WmmBI z!=qGp3_K;(K+HtG59qY?P24GZOthnl4Ce zvX@B7{WuXK6Qz!wI%byr%OyY0c??~hXZhgA_t1c7pQG-zC)j@nSanHHh`@#X_O)Al_qgE zfL#OCyLazKzkO^=U7sveQ`i9B55WA@iTVK_9fl9U&lKR7TKEb-JYN58EFl{k4C-^NSwi&|HIp>lsXeEs|gvI}UtL5@x*^M3;iCBOylnu-1FH!ol^(k48RGr@ebBds zJaWZ+MXER44&MNz*9{~Uy1Sk?fVmcTaH!!vow4SKUgNvzeRy<Ibr>lql&$;CrFqf5L%i)KK2I5xB z4uRbJ?-Mz)Z=xt^y?gV(&WL?!f_|BrwN{JdiGVn(Y;Lt*!r2=Rq&!^4YC72;1_kH| z4Ws{nWPm0vZaVcMIi3GBy;RuF7fy_xohdWX#jYVNEV|;t;&yv|YPDTC)$5N+vJ5oX zhu^)U0C+)2!y~;Y-sNN9K!8~ls$Oqb1iaZ{1m!2+%~=~w;eSBwf(SoLmO1l5OJ$!o zlZN$X6%yGZY4kz8J|O#T?RBp5uDd$u%L3jLz^K>xqU1BTHE_kgo!R;UWw|F$U%b6V z^LYw%JL=eWWXC+r)eaGeNx2dT_sA4vCRQ!@Xcb+q^zem*g5;s6-yKjp=9U&*HN%xY&XWkSNdWSZ1L>O zo*6ky)9!2z>+&3?DJnRvZW0P|{2@AVZMP&MBM`dBo6(lD_9+-KM3tXdOjiwT31idZ zzY?J$Lh=o}pt_G4IG%}YA~reMQ$M|0`pE)X)6ySoRerbkz*wDUkyqm0-%Kj}@<(9( ztp4g9EBw##M&~Y!>6n1}{u5#GMSuv4U(7vFcfTtsVb0-z1^xfoA135RUc1(bJDxml z)0Zm|18cKswk8pEq|l%l?2HPRnJVF9OAh#haEhec5^@iQZgHl`a zq)yEVh;V18MYIyfR2<`E z&+a+E*M$L{wgV+Pgk6C3n0QAZCK)xgL_C`XJrEa;U|p||r&f9>QkYKxjU+j;>&4N# zQ=kI+?i4~sf=1i;wLNmWP1||9@@Wd&oI{)baR}E=7@($;)YsQHAF89cdyh#ZU~A#D zb4-l+_|zE{f!qj9bpDhTa%B?B6#B?)Yonlq_wbG7N=r2!G7hU0zSD0a75Lpg;Dn>o z8G=WHgw4EnGF;E(%YX7VmMQw$U9|Nh9HN-0r~-Cig$0^=%?C?N25rq`*Aul`fHch% z3PAhr<#c5-Rcz+37f$@WvJxl_LY$5_9Fq}O76T}f!-xcZ#elrCvfo7z186W~y9i~K z@)h@OC_jGuNRC`-GQoJGRG`dq3aH4C$ll1t@~=C>)X)QtsN}Ld$B?^Vu@ZmDz)<&_ zxb|pNGD|TJWVN^OKJpjvenhcatCdka)#dC_mQO$A201qiHN(lCN>%s(yVigmu)DDi zeSypVwr%L#x#hHR536%(TWaz5<=n-p^se<&&%z_EF!qb78SSeK`lbAV^dsLPUr z44FM)nC;U@uHNtxYx!Eu$5is;24dJi`K-XuHF2ccLPr+iD>vWS!jqxvxEe8W@$j=V zhk&3Urk)gb%hp8MWNs>;Hd9YZs=td+!oPk_!$pc4yj7~#r4O_$+;}ZZR0CDqIG6V) z_S;Z{Vj_{SakJ^Fm0s?(6RG{jnRIU*dMSO^60L#4jguna;FGeVyE^V1zVa0eTZ?da z&vviq7>*rpTHJwPmj$5HGN6FzKDS}_6xiiXPx*(8BmT!5wRItg=G-p-k2cCe_j>sZ zCN?pVb}iYtSO*lydfBQ-g_or5(cT8P8GcXWrhxt5L?-C-M|T z&1+X)ov-JlNU2%s9|b>+8gvILI*b-`+~N`vR-)mn*xW!Puzo*AmBlNfk! zHFd0d$jXd{@XuEhEHZ&Qr^w~IkFBr`Uq6J5G&*cuUok`Sn%16E{LBbnjh1iTAUj-$yy`@l#1tl3n9+veL# zK3N=+7iMeaL%d8M5wPe#9l+veO4nD}ZpsiS;8dIi1Ox!JpXTn~D4N;1b?rm$*u6nd z63bzCRm*BY_ub}>!zmqimffcYv5W?Rw3;iSnm2E?Qu_k2jD(K0o0ePgx{_K05P8T>rEW1q}%KhB8?FKeb~)DL9-ns2V|tRTTsuk99WK5EbygEpts=R44~l?F;{YDj{EPfji37kQS{`>}Vh z#GN}egikU=f*GOwi=+%TypRdAnAfyC_AV|9L^bf(BE0Q3`8MOoyl1K3;rJH6;EwLk zI<6&wIn`PT!?FSMk1?A)7qK|?#ihOZ+Zz?PvtQ59pXz$ry(W5r#{;_tv^ue1%ff4g z;`2zY4Ru9S4lBaFHqXO6r1(^C16GU6f0WD4VH+x;{E982^z zo@@&MK37O~z^kv`8L+-NJWoUKQpSw~v>}L(2 z%7Dv{bnPJ5F1MbB)a!$fE5IIO8~c2s2BoO#I}wb;H*XizNFTtWhL|)<*E;S1cG7SC zr2FRM4ipQN2ORcM7u%jwku`@&>;ZgM$^P1GYRKD24ggex*<3zw-D+6Kv^3bAeJy{U|P%mg?_}LD`<~W*xGX(hz za7Z%lMmKwe<~>aAs6&+HGSgFDk2|Gl9Skl?aRS%{8bs&+ll~LzH3Et>3IDE zNcfQ>mZK>6OM73-n=vx)qj|?Qypq#^3!|{7;)0(zU^>uqcXi*&B#@Y0Xbv7tA0@Dw zFRnFKld?ljahz@UzJ0NJYO*|VVo;$XR=gcU$#(rp|EjbLpG2Ibf6JpWYH)A?w^j6V z@T*)-#Tw9G*SFXaG;k@A@+FMmg6LbO`z#Q##LT)+l$IkcsJ1)zlZ3MvBRjP zY$D+|Ul^jpv~_j%-2DI8I_sb~w)Jb{u0etX_u#>UyA2W`I0SbI?(Ps^aCc9F1b270 z;BE=-ZeMe9?mg%J>Z_XKkEx*X9xveCk06h zUS)P3RlEk#&o?)xxv#u|5HoWt1u`K|?TO-3J_6GBeD782P9`TY=STYwP0LdzjZ{WL zg7_xbtn_j+YC-k=@Su$ zFl$SeS0@1Ul!nel^19l4D@i_`yB&3d7wB^r@CZDcS$CfNKtM-N0&Y5^CadWapi@i= z1+$9ZTe~-yR<9?-CN(w`Om`KCy)Hg%K1|9oyPb)8HNYD5NYc$gaVLB^ z&)|Y49t@VipOh$)%Pgi?K-XleJISeke!7=ya!_cP@V+@YJy84PWh_A46@tzcZ34r! z;U_gw_Jc7vP-tZmOCUWzLa4nTeyotjOb~JC9!7Y30S#QNTwzQ`aOh{R>^;n|bSbo) zD_6w7*pbVt!_s?%Tl)S~`PpoptOO35~EhaeJuh5Lq$wAq@tYSs zV@dXL$4IQ`YAqs}v5@5A`Xda@WN^DNyO#-9yC3I>F9}LJf&Mz$wn4T<*ErX^we5@_ zB7bI`$a*`k5TVJMkdNpR%INp(`fME_TxzwKF8;cyN|e}qmEjBd*aa-g+pr-dYq(Mx z{om)wKeCs=A~3LsVzzO4EtIxzPy&lx7O$+dQ~2Y!_R=63k6+0^!H7f#E(9YWKUIt0 zu`ggbbwP*%(`^NX%vJr8KLFu?Cz-r!B?37)AjtBS@rBwcUN0z#^J+xuhuf$^i^uD?OnjZd9$ z4u;_w<{Z^1-9f?QWlJv6tyQU+KWBtg#&LxicDHtypz){kes1M~cuFOppdfzuQ=aBj z%&{RMbOa^PQ$_^cJuVk+!!)(NpYZ4O!Ap3{QkpL0SvK5VyBLT2l)#V4^9# z{d{(cL<#H(IIJNnVSx!%k%M}=P94p~oyxIMVM3v*wf|&>`3x|88!7J`i{N=AO5qV)#!n>^4?NiGYLd%^M0^KsEqN}lIiAY zYe+mbB29V_;>4^e6+8G>ULyAgy&0Bw_}#IuRJ8)2H3itcyWxYSijM{L8S!&Qrr;-S zc0Dl8(1MS2ggzI2syv22rlBU(>w>@;kh*&b*y-@&l+(dP2O=^2-T^n1kW3b{bHuKL za4r9yO*GST{5A5el&5|)Z2WAEAGZ}(`MWKve3C0>Q=XqN?w}SZZ!{q{O*7qkFAy)% z5+Af46p2YMh^Cq0A1MqLLmLJ<(Qm8OMVnb8$+Koqs3@HJFZeITv~n0p6PHZLB5t21 zrg4*xBT@vBxQ%uFL7%{+I+_I;y*_3t>6BFPv-yP~P#LHhuSi7Sy98P;{l>sse%BLx z5@Uxy4kI3Ll9c%hhi-#FR5ky%FR?hebb#ZnttRAedjXD9%{tOo=%*) z@eX*+6l-2f_GFuN=zc$SD18n^&NubBAAB8i{lvxt8-kh@X>!7;##&wV(fhG0wQfGc z#R}DnzE7U4?d*$(L=p>%_QMgtu=&AhWy4iA0o4fW@5_lOf{kPYwuLd+!tIB(hE|fv z5CC%QZEPKg1~0r*LniI?7BKuSnqUvH3CQA6%`XMjL^U42qZJ?2E`U+iddzjW zxe>vPYx2o8v5}hbeg%_xD~nHy%zCoA$x;XblUJ{1om*=PzfQ}fj1@;1E7BRuns-}> zB65RDQRA_OY!Z%yzSf#$Tn#Y_c<^1j*?PaqGZdTe6!6*2trIb>?p#w$ir=)yOSR}Q z45f)Oa5OOreqCJbBp_ZhlA6S$u6L3@L#nTHUDp4m;@)|S`fTb%)cZGz*SXka{DgH; z>dym=*Ha6vA`4p`S?ce0?
Py<^Yr6zbxlGMo$7UxCD-;v|G2=x2G$Wa843Otxi zknVWKr$nKAG>bN){61$6>eqDM=oM&cwVq4jUf`=AJBp6^+1U8#Rc@`*xJutSccou< zdge8{%0HC_R$>wNKqS)}2d2(bCZei5$bQ_aiZu4BT?n>G0Hjf&RyZ=(CxioRb$K%lhROmin@Z6>VeEwG zuc8y6)UR%Bv$$y{F8@E8phmfb?iEnEB$P|z5U3kxfmNXC92&cL7krEtQdJDUPGQMW ze1#8!NZtrwm=jmTtGx$y!l|shNY|HRqaFfVt!@TiF=H{2ejp^ib}0hEhm{g%Fl)lW zppu3h4ts4HAQ3aZ)1+qkK|%r|91qW-5+UrDT#e+{pFhYt@m!n0GY-*f6wY9g`%)O= zE;+RSjf#qKAu0{yt}yxvb7MgN^}R2zSXhscYF89z7@b$QJmy_5&TrxkaqUp+p{=lY zf&N9EGjKZ9a<*;05$@sTmTF0!KY-+m1+7SHdK5DW}$k#eWioE5TFp`YGA@fHS(j1cEP*f9D!B)VHHQ_dY zjH)rP?AdG=5H-Mba-n2LVX<;uhTxe$g z3%Q#n=1I!qXl?aGpvdS!d^WE^HT~SrinCNYii3B%AoYUb3nsYVp6N?a9eRObj8yb0 zDKa%4iw#{9>zL@@%1b4>53@36L9gS`t_;4nNrkPJ@#H4Oa!gN5zLAAyB-;vl&>!k{rUHw+mp&-EkrIMyCoYA`VBd;Fk6#w) z|J0n~WGGIrocFTpGTwsro#~Uy#QR<`OF}XzK7Q zPA299D^~|!kh4D#`F8%3`BXD{V!V>+1N|HN8+?dUG~ttnOKEERS@a07E3-OYpmT(C zU~sesjOD91tm8I%a}N- z3(Y>=F||UY;IYj5FDawJAq9$m*P(fgOSo9EU2!>+)j502emr9oW`PAZapU94)U7la zVsLxTkYuJHq&dvMs~+BforI1fNfNL4-oU=zeSz~L78GK2J~Qi@U|wVt>UvOM+?{mZH?VoD(RSWmXIAzEp0`P>T1&?&^&k(P2jp$zQ_LE|97h4oB+P0jM?34aATzml(2Cg0LF}Ul- zG08leE8n(WeQiCRm^eAjJ*QT1bjOhRvOjTVq)J-vsea3nT@#4caf)03Rg3;H^$pgl*Kca zjOavY|1DfC+t#tht`o?04VJY$_@jevh$Az$iF{w=Lj(_L0d`y(!Zuz3pV?|H0rj1SRn_!y3-*IuZky^lDT%W6z62__QEturdOH z6RL1Qh7!$@>A)uzVcF1HL`Li_-&(^kC5a8YBK>{%MPowvLm2%vpw3C|TbOZyUpzU> zQflksQeoX^Falyl_&zwH3=65Tit>#_d z*Mh;5l9OthBj&18b=+(xL2o7s@nBdnNTV50s1)1Zn_w-WFuAVG;Mf3rF%)&T*Sq`XeJF46vL|Tj;nglI-%Jy+iLCY3YRz!QrI6l9 zg$g`XQ<-G7<4{S_8n7Z@<0=h%NRb5cAU*OxvotYknCy=i{_0(6+?^-%gNiEb^4Jcm z^NCsx3gKC7uP!5_pFK{@@KA8l%b}htls3K{TYlYt@bnx9=5-xd7#7EE(AR-ghx`0r@Yrgnw5XPMRs}rIj?mfB14mkBqtFS z6*F*o!+NNF4SEDz-gJq+4O+5Vh4CAb;mgU#p+)JAe?}MrD){_lewlFl|cjkez z_tkht7sH**?Df-aACKzG!^Rp-*^k)ppT5YgzK#k9huFMV5V-aJ@#WrmJ*As;tbpG^ zI`?zBdCnB-%;~~I!)q}OE)M}^63JEhi5;3MQ-Ecu@J+5CkS;!j@A|^s&d5e&U%ZPI zg$_-CRp_DdrmLDB8dIQtX64Igd@^vy=OR#t08~B>s5syvQ;?{hmGO{1Cy^0sZKKM5 z%gNlGK`g*&C7&TGEvQb2NcG9Aagq&o(1M`jtOJ6Nf1vE5ih|h3E2+&T4F3&6M#kWk zTJOaf7LprU!IKE$CbLid{1cKgKKt2H6C$1d@6AceZ@UQzt}5@Mgi?1sOqBOk=nV^d z!XKJ~s1~ zU6f5MDIEpZ4Bm1ewu7?$Hq{CYK&i##>5k9VCNSngiXomM5L5f05#izkX9ke*j~gVe z7qbb5A>oiOJ1-ns1HJ-o;fGO0D^E5}wCdbl)NVEcQ}^|W&s9RBvy^l#zorFEF=;aZKg{!C#NTQFvDh*)*MmKg zfH8&MgZ;F)QF?!Z%R83po6;c)vtV1yl4C)Y!3?XTl=DLru^?S^>r?i<~WpwrmxpeA`a@q#X7;ia&(k&f1}W$EB?_zD?~I zEVC`s&p(?tzv*Hsdx?MMC5qSShNIla840n_ob&o#CL^FM}-7w4HjIfm}x_vu|TDe~0GnzZY|IqCBe(QTR634~0xIPCsk z+^MPG-_zL$lJ-Q1rAl6t*mEj6A9-yDT`NDA2A15mz()^Uxa}8Yi4t3?(lH{dS)Idt zs`qS~*xFDmRr;bmS&&n0r7q3MtvP(hG3efTtIMF%q>RQRcAmOY@|9^RB_@EWE?ESmlgGSS|K z?|0HKQev6$_0f>tyy!cm@#)vYQQNE7NyUyM2VpFHM{#9Rx+qxKrbcMiAu}W59nkycJmGel~lvq8wq+bZ}Y3mA8S6G@n3su>(iyaO6dmoV!K%HE@wXBUF&L|KCk_{)_3~1 z{|O*|!hKB}-os#+tG4C-f-LNCka_j=01c%Xib zxMf>awU7lX&PIevL%#ukVPT?LU4>WDBN#Zvb)*{k7BQkGia0un_}5HA+-X?l=WV() z<<*nc>&;djN>O;Hc$dsZ?Ova{evRMN3QYSmQaem5R)yDXX|0_NwzPGhmgUKjf)Gv6 zfM6Ofqoke>Z~v{t(?V%Tw&&4NeOfQjO&5s5oYA$(GJGRJy)I;dU^sRnL zg}IdcM=XCz02VJVndO?WWs|>fPt$uU&iuBgN!4JKr`v1X-O1X->-lT}ex4oBa=Am{auxY!+3GSsnAp*k(!@YGq@sV>FHD?b+wh@2u?q9K;k2vTf=b z6hcE&@Vhn5d#|UIjvs64x^zEeAX_(Pve~Addj|FFSGZV86Z;41k_ktK2e zu~LBBFmBX9tBY?9-)mD{lYRaho~XYzIb0SH;cl#p1b39bQ8q}u|0?H@|BthSjC8H$ zP9X4vU<-w8Jjc8qg=kGqYFT4SAAdbDFCculwM=T^DieGm>v^wk5QvhgT z6sUwdORb~2DdU8HttDr4P#UHzx7f)`Dh#;UPLAvaIa2r3IYG#{YJg>(e+3xebM34W zWGk1=%}pvMrpt1Dg>rTos2ABj z-DSm1mr4&p%!^H^@-ND*3tf=mljmuW(`413=^;do(f>YRKrHu8su!bJyUaJ9cF!uG zz<;_l_0kS*>I$RX$dvHA!x+Dsz|C3!I~~w+9LUBF}jQk0c%*j=dkb^vtd&?ENTl#rb()8X~|{6@f29q?$mXw+CF zs8#6gHb9Fgx?dfbr?b3o+fLNlD$4SHXWWB1f={3ly1&%mV7$`o78@UbcU^nrS`TMB zi~`t0_D}bgo9Y1H-wzqzAUFVkdc;G=F(4v%DSm{}Z^Ni??d!L)R|`nS1-czy-18YJs=fA- z?#NfSA|3m=tcm$L0^T#Im8E-LFS`_49bJ@YNio~`j{qa{R!!Hfz-qp-XF3Iyu$cIJ z+n+mcKQqD>0$n7-2LJ-xpjvlb^AfDWYVYhJA`}g&A`)~Y<;@%6u4dNm?i zmIXAX7z8XzX8rVbLak*@NADe;0N)PkM7QoWaHf)Y9CniVT=r*1%)-Oq$Wa>_09V5n zpi(CQIt%{dBH$6l+Yt2vqxVNM(*KPH|E=o zM&3@uM>_>X5};xlV?fYRTUS8R!wJSC`yI3bjW=|U;de2JCr5>#5LMBseV_jFc7mfZ z`WrPz(D6!-Zp)_|tcppp((U#HZay^p&Mb1EKGVkdcFv!KFFOgu2T&~mrUDJ1Z){_T zy1KpJOh1z5i%3sc33W^M0QkKp=Q0J(`YCn-c!3zvJSUOGz}mRzW-Zco&rlwy0U+FT z`~JA?b>ZQ_6cC*S4U4)ricPHM@23u5f!h#EW4?F1-rivc+EK zqCp0#`@g1yUYyAheQbMe#)4^?2DnzW&{e_w-8+~dI(QRga4!J$Xt7lJItr6!c^vUz ztvq4BRp|%I@9pJ93sjEofV@Q3Nad&TQ)QaQk<;-#6`$i_JAdOM>;@uYfe1;_w}L7~ zRxsdDz# zkIQOKuTxP1&U#KsnKQ7Sv{CTkBmmK2Gm?wInr%!2v4+^n^^YkPJd1f^g5Xxc{*j$tYL$02?`N)u{j$G7R+UCbM)hR*XEM z2z^?tCudl$1tA0?x9U@2q%h0VjUI!2KgbRsKmgA5fKe`k3z$k8>Zt`K+~=`bleKE zl&~qj?0dp$vd5HX|7eMoFA?D|Ttzn;QZKZM!NUdO?afPj!Icn>e!Iyx>YEdGv8{W;v5J zrsC!uM>BxxVTIHfQbs3&wa$M(g zyZ3R+^{`M73&MhI-5jTI^Q!lK>5qcI1Alm!Aq&XE2Efg}V`rtm?63132ksR@_fNG0 zmBw;jeXDK|W_@O>Q z>JUzMA5ug@Ra(u|WuP5sRjwLd;ZgEe(PSkfG9ih4tD5)0;Iib?y!0=;)R-|J&PHU> z-*27sDX?RV@Cx3E%cy?eu#^2FNH=x`S{6a*3!!0tS6dt;%k5n9-2X7Jx$Q%d$?j5* zerr&6{sEQCC^1^1Ic}vWdiiZyQf8`z%~C^MIE@S9U`B=zE$@(xx11uWuZ!AG&w zdJ+O08tDOinyaHwriQIo4#?(a3)LkJwNr;T`X1)5vss)h5nn-0NNGS)poNxbjjw2k zY&Z)N&2GUn=GkUSrM+uBRH;fO*$_eArO%fmhC(z#sSLx7?|@j~U?0Z#HdCsVwyWEZ z^QxHG70u5ogxsu?tO?ZQ18i+~Fe?lOiQWy66HW$ii72KB)IklnAQNbIqp^S2`2}d# zuxB7mP(j|I7%ibcoqrP}exHvwEe%ircSMHPtjnlcjIPZ48IesGIa2__? zy&EO?ZFUWr=W2N>$>Y8?M#BBlx9!gp+AShv`L4%-5Lv#*)6>Tn8nXLv`R%sW1$Yuw ze%>a**3M7m{k05_-RGq5k9Qw69!7~O?~l!cJ@25fa5cnIS5KqFdgGIfpRbEQO%Adh zMa^+V30()}Dsu$eNum|P*@dzOI{f@jmnrGKbQ?&P@8kXW<4b*E)fXQlu$4N?;-)P# zY3BZOD&1=H1Gt-rhtisfh!$r*-@>kY-Oc08;qO^y0n$9113KkZAL&kHahcVkmD*_8 z-M1Y1Lvo_&**woN$yE%}QEwDtXaqvp`T*N|P>`ZVM(wYzPr%MUPp9h%J+`xhBbBpS z2?MfeFC~abl{8JY%XFCqQZIF;WsDA4&@-sfMS3q%xZ|Xp zzv*FE@ROfJrl&Tkzcr!6sO-#5jj)aCc$Gq$M!D{{1{V)UGhs-@@7&3=(QC@)&vqJj ztMFUDYdLIetA6*$(`%-2mqY9>S!vaXMI9_Mmb#;Z^Si}(D!i(&>2*fy=OrV$<2jQo zcjV)sd25pmmz(it79FAl?X-LO9a|a{B3C}CmuX#z@S?E4C z1Y7B}N?qA5Q&Nq6-E$+>QVktRXYO@hvfndUBsQgb3d2rep<1ED+_b{MA=>^JnIc0V zM{C^9G@+)B*X^G)#MA_$mQObmIAM6F4~aUpjsYR?)uw|9%R|J9Zr%W4q`u83v=c4H zRo&~Dclj`inYRqMeG$f?aYg`orMjatyE(?2hj$cn%V&J~=|Re1YTPcpyl~Yhap}2) z%1VM)#?~y41wmI|4olm^T>?A;cb#g9{MFZ^h3ZM4rlFNPFc^oKN#9$oVuuUqcDx~! zdoqs*(qkCZ*USjwsz&_W;Ry{T!z107N~-va0V4Oy7W%8G#ANYLTNx*2`Wgq~EA#e) zrF0?jxs1jM0-Sl>kr}iEnoZj{>bZ0#UG58H%1htZB){Fnuyq-Pl{PhR5som`=3#i9 z^;YvZ1qBk&mvUG8$UtME`gEH@f9!s$Va5NvfTuno_rwOMA?Hg)3G{dE?lBFp9z$$2RhxfK{U_q#QnDQot;s0 zl8>a0hEtBE@Mi8Ny-QxY5HUWgtKUz@Xou#QJD**5P{pZmr}aS;uJt13SBXZ}7f$7) z+17_2e0PsZ4Mz!fQ9BpdDb?3bx;NyY9A);sIAutL}b5)C#r7_fiO z>m6ZeTTxHI@bm~q3S_Vg7?+_(kwrmQ_NUP)ln(vH%omf=x4~v=hEMq z=^@kXtpf;9O~*r~mz_w}karqbq1Mu%{3EV}aMZ-YI~;lU_yHXS(17ywcaaeAB()h~ zBB+WG!d&>(0716fCLSyGx=9uARwJ$yJej2tX^e(0>|VlXOcuOv>-AeZDi5C~ zLv#}j3I=83tISI519tpP9Qqcvsh^6;d-8`OMf0B;UQ319<7A*4RPy)w zD^MWh*#)Nx+j>)r6EPn0a_LYyS^VrjQ~AuI_w~P6759BRb)i(+9cHDTQ*O#2`jxi) z&HQ0HDPaf9NUGNPFEq;{y=9}m!z|@l48m&nd1G0m-N0-O51BOErEw$8d+Ghm3{#eF zh7Jp;DmI%?CS!Zc9}`9*597X7H(}Ks6LkliBvzQPx9D36+$V-zw?efAfgQSu6w~&v zercFy7r*Iiy+Bwe!){n5phVtuVdpvuGDEn zr8F`~h`lWIBl@PC?2Lwx=1+ea^$9qo>ftKp$i3aI5>9?E&fC>-p)C<44zl5~I|zMX zJr&)Y&R;AbW?u5~+&6d2du|xLxWg-oMUsg?R(Oo0hLrtSc7*t;PDjnbOHcBvbDeM> za-@lAXIFsH-?>`<2REx^4I0n$H_Dfk z3Pa7s48=alaq&42Rp7TIBZHb3ml{A^c;}OkJQ*7o7+>ANtdc8n^94Z@#6@;_%>a$& zV_c`70*Af>j4!f;6r!lWJ0!mce+HTgn9HQRiXlkTuBH@bHpQtA+uVfqJtUjvaskOdf-^x{5%wz#+o!wy-E z@UbAQbjik(afFn->KKP2Z)f@bg3Z8K2!XTvyr3syhpZ}^T}_RB26YS1M_HvpeMtxK zTGZ_-ey2IsYRi^dRcfnD(YFHC?AT(zg8M|$JlbDUN_SA`a@L?9d zP+-%{xQhJ8sDGZ97MIMB?jx!+W!d8*=g_q+H(}y))flZ&)wO)k6~G!ov{o_%I!eYJ6gsYcpzzR@723f)|jmsR!ZwX^EER^?z9gKh;f-T?=_$zdX!`734ke@jJ`p+ep@ zbeBy@7*_?oz3jARbeSaph9MtP6!GSc8otBP*8X_k_IM)qZn10nuIdpxKehh9^dch!09C>FmxcZ}u?dizFaW*p0QE8Q-#j{SuMmAr2nr5g)agip22IA?f?5Wk00RPOc(mN`M-i*KL*sTLDnQn0(UgL zjgBA)?lL@n$Ek~I318`zCd63)n74#d*kfd!DuJc`A6Sf{)E2T@fz$o7lYb+9inPv14zO4NVkiiwL$1HC8;j0R#eNrC3ajeJ1D>W%<8 zdFNJ+LYBZzt8^UoPG+T%n14Z1j4QiUFUIFt?0Z>mK~ z8Z@rbEdW~MB$;M;sU9^Q3($SY6>Hpml?{Yf26N-my-LTM{TuREO6MF0+FApIBT5WV zh#mr9FQyj~SrPBH$Nw)d5(?DfCqF-5%G0yCyQe3GA^qP}B9N@ctyP6f z%kL8=)H%@)aGdjh{xV*B2xO4fD9^7qJjc!FeDXXWlQLoc^M^@iDPD-k{fOjiHuZmq zNU6Vw$c}1$7#1ELjZywjQTqQ7hCn9~Hep7d?Lwfr zZl%xjlds!JB%!s%3uCC{_%Fs#x5K~S7aGF)-h5S&-B;zJs3rR$#QuJ7WeiMhB*&m4zAeOyl(Z{y)| z_LDK7Lr{mm@P5tqqFRvXlltSL{Nv8;RzMc+Ss#f{eu-?_7{CU~0O?>s9Z=Sxch1Pv z6gPQ6FO|CCbRK0q5Rh~z_ablj=YF6;2U0a(q7MgNh_;|GUV)asc7{Ow7#ncC^Rv~P z(*B%V9QzK`zeARl1wdhQYbbs-P`g17no90{L@sz|CIi+04Ve$ngc63sY~V5=`4Ddsz9Cpe z*I|Ui9;k;AOiJOgP$;bV>6PzC#}_8y23};ith{6hc$_qE#ma607+@k$C>z%2HxUev4fxVG6W6a0HYFeUc;{_W?eC;piiTDooNuzKv1w*u|@ zOWxTlV&^^Y$$aTfKW(Rd zRQ^=@BRRq59%t-6PY*)E0WYQPu3*005ekI>IMi4`K#?wz&uA`;6_q;%CN>8i_%|Sc znQx@?d(@IOVmPq}n+bLx9}?A;0@^QXYM)-F-fV+|=?h$^?REK+nje7!W_V#j0Dzw1 zHj{MS2h5Op&X;_i&PmFP$@0zA@wNE?l0nydDKK_M6rJA)VHaKSLGKJItRRYX1!JU- z*aOshw?~h~C5Ast7M5-<7$0DH?c2^pQ5`WRa6fFO_Tw_hRm7*AqsX0~YSdaHQaOKpp;` z)EI-au%e1wZ|s8aGEnF@sV0~|loWXims$6K>@OR;gRoA>;5E#tdxH$j`FPT z>gtLtT?Jxfh7IQ)*Mm7ROW#aYAawUJ5^`FB|H5PX(WkBf4aE_jwHq-qL2Ict%I5l@ zm0DrW`EJJ?(5{2oE0qMBVD81){V)XU4wjp^M&3HURH88209ao>c}G$dVcwX91wf-k zhZ!)9kUW5lLi5~jKmcu@Hz)tnlq@ozIbmp9H6X20nnhNuIXE(?)N5X`;G z7xQ}Xcdhb>#Zzd6b&Y3G^?)dgKExXC>izS5+cR5gJ2G>#;<%<^)c}NliFFeM!p0SF zBX-Xf4v@)wsr=a?ZsW&H zP^q2+YaqOJ3fv9*dow6>Bm{&(I7spbrbhs%%U1s>w%bMkw*%;r{)0L~!cTJ#1Z5!I zV8q~!Dw84nKnKTErRNP97buT{-~Hlb3%}Bwqj&}r3!+eM`98gpv`>wch0o_bj55qB z-wy=1+~Kd+-$OloRB?koFiGX%6sGg2A7D$7x-z`CkGLmhcu74l6dh#esm*=~6zkA< zY<0i1Fysw`P8ITaNvH!kRQ1!SNHa5T2oHVPNfVdjWVEt;MCE&kx%fWAyF+D`uT^Jb zjmsB9b0z9zDQy?HSmK zbNVXKJOB3W`?vc)L#eUfbzBLzc6O2;;A;FFR$+8b0h6kVvpEeSd3{2q1d1|w6$KC5 zNuP%O@qC^!f)XSDF6yO4e_!!AAK{`V!fmY3B*~oy)~>w6E@n0;R)3JlpawTAkD(np z=T`;`gPhmS1ZNChz5DMpD^wB)Xp64Teh>n#?$30rjtceK0Kp$cE8akE=KiQ@%sIvI5yW5}xUX)A1tQ0H zo)F>UouLW>`wNNd-f5qJM$@>)!UZ3s+O1ry8j#BA5_A2@&|Rxo%Wwpd#>;-s%xdh# z3_AC56*3@v4s|;TJV^&q3QOq|1O3%Q^fxfQ>xIA~$(;cx(8v!69qPt7Ggl(ep9V!% zU(5<~%dHgx42|a

TugQMDFx8BpBXC)LgJ0DBQqZ|bC!FAVU~MDt^xVkBG@>P|do zkW<2XRKN^cS0B5?!{XaGM2fm1ee!p7^RS6xP*);L_{j0D*@sZ0A!pEeTe686bJmfE z2DBDt@>{6~0|G&_u0-lX%zA5Pv4dlQD8$BQkg%gjdJ_!>85&#nGM0000%94)`NYil zbd9jn8}s@HQqTnFseqy3Ae6#GyKge8sUCzxRL%nL-XNakf9}lc0sDc3zB-B{>U_>Dpw3?~S5I1%-m>TO5MH%*2F- z_;aQ^a7+e@5_|_kE2G>NNq8B^C>+oEH5ViXRq6}Dcc_j{5|_bZgKdD_1qH?kXZ&?U;CHfNF{N-AMLz7E$_C8?-7f82 zzXZ?6Kp=wudUZ=f5Og)XQcRz(DPE+L;kQC-rkxv|XxT0d5oe))MG6e!%Q&inAPAr} zDR7ANunYQb4J6$W*@+iz4HTRR{yq+HG*`Ko&p;P0bm>UsySg+cI?I0`kc=?Pvkd)S zQA%+I)t9-&{+}a4zB&nqsD@<^cJQ$MNlM`UQPp9qtLL1*Fe(Yk!_siou9@4|*w`M3 z=Z`0PUS}0Bk%XcY`s=ku3Zdi2xd712ii_^IOCXglj_T5L`$l>qbKWBLUn6hr)UbT7;4wZx;-Ew8%( z=dwrPifme{dDa{L8WI*JfHzwKrrBTrb!oh>vMhw(Ip3sRWo|C*WySWz_Ge_p>xK~V zcmJFvY?|yl5t1pdveN-#rTE@?e^=INt*;upL%FB!WwRW*WB9-v{Bz#HzOO#-2di&h zwi+PxFlNq2@#nO&d$Yih8I2{}oK?#7Uc41Sm&0x_z6pMUV5G!3w)%{8>GHCE;_5(kaLWSIs_>oD1{&NOjt`uoR#dvD- zt{)5k{SK61nV0LagyWXsU+?9^#Hz;ETE~&`H|`*GO3m=pwX99OnQ4)QH(xE2o69|a zZz5jmGMDxWW0!dtjQ-0dHWHb4s1eo;k=9S+pV1Q9M4&9CC0b|;;qy2);_=cO3styl zKYTqvF~uC|%KzbYW!1uL?TPUbEr$hkWCjZAj0|q}C{GBGEU|%DOn7Djjv=Kdtn7hf;Qy$C1kM z-GQ1V6JI>Z%UK^op4<H6 z5tOSdsG>{eB2X>WdgmM+DMB2bst<*cP*GZNZ~gnhzqsc!bdBjJEwb|F233Xa>Zc(4 z<5EM|%Yd7pob-?#M&JqNaVFDaS-{#8@vcVSa)|k#1;UKa?_vYdG*D^m<`Q<2X^N)2 zwML%U)g;Vu>=>hQXS*YsnZN>;F7PP9rI~W-=sAf&tAWk}v)2!AMp1I>{N|iw@P{FX z{p{uH>rmaArF7@BHh%a>3@=%MMRg0<)nYb<%B1xK&y%Q#0>cncTHm3=3K%ubc|b*3 z5GQyp%>0q7$!KTuSnBkmO)CaPqRJNkn|S}1PZ_oi!ova&OYe3Ucz7M<(4CKXD7jVv zRO@oO$&dD9Pbw)M8r@rPTXQ9!$|$NJKEBMl@jZ6(kNgb#$^85aby^?dzt;<3;Sh4b zJh?^Yov*A~tiy5L;Ix@%^wBv9ixf?|8l#>GS1o^AqATqRdwsxbCHTp+g{|;F&8t<1 z6i)vsGsEa1+3(#j$lKms_Ly_!qbt#MV#1KJivqZ{rLliffpg$m{#>^20Ho1q5a(Ip z9x<}Hn#51D4h6xvoSrLGeCFZFB_^wCRx5e-@4LFEE~XZ3yRSOlEVbm%LV?gs?jajN)59ZnlbMWzSX<_Dxe(DZexD;Qyd`yn}$LX{*gdw@f2W<5WY}Vv*Hi z%yBj{W3ju$y6oCHRmvTyh$9jA-!)t)4)de{p5Hm)eV?vGw0Y9 zmu}#eop)jVHkM=US+h>9afQJFJIZvYE5fQ822K;x#tRR;=gw)q`625C zoBx!l@@u!;eRutAjqg0u!>k6zvUgu*y?FOdRwk-p$L2QRm|5weg|1t_+Ui<3u1InJ z+v!%C$2G4eb=T!Y_1W)gDuU$#4GpC zh6G!uP8*94yJ{a89%bi#aT#8jcr4h-*>X*@)#HfE0>|YdC*q|61QN?auR?hqG8$FLSIow$he$@>V{% zbrUwGf1kWKP4+@)d|t6yXT_iSruVsaeP6%xkB{ZT>UDcImh64Y`kY%PG^O~a21n$YpoWDE*L@`wtIppxcluV zj~SJHkq_Rlzmvn7e0AfkcOM?>D#TRr2<|93!!T3m&PR@W$DfO@n>I=Ix6?`a+5a2= ze4ADL^w@m1wE6WpEGpAlSFPhKnSPyRb<0AA8M^$djhqG2>^}A>`}TeRMZPc4v;T(Alc2jW%W1D`plr zCQMiB@X;w>dYE}a+OMt2Po6xG2%FO{9hzeQ;ZR)3U7N;q39&qjhP?^<_T_d7yhYJ?%v@r{?y= zX?8Z-ZZCRsq=hrAV&2_q;oZ)Y!rvA@zM?ZTOeSK!sPRYlxY*x|5B&XOqYiKCHM$6` zQ1&uhCY)@3-V5 z8Q&IJ&wAdgBCxi0j_?wxnR9*3wwzE`X8X;;{nGwt(9e%|PHjOHMGqt!t?qu8OuP1j z-|gGf!ezUq+CEPDZnN*kx~n^D!)Mk!y5XrA!~5W1_qD72A180Q!ReAcKcYBx^Fpr= z3z1qF#X>6{YhLYIpuPLno4%Hlrdy`DH@v<4=~j!W63jOp{SLDJE7M9(oJm=}HHIl? l{Yb0S=*dd4IAO9nXACE1$EOZ%wz|+;wWt~$(696W7!<_&C literal 0 HcmV?d00001 diff --git a/src/pages/developing/web-components-tutorial/step-1.mdx b/src/pages/developing/web-components-tutorial/step-1.mdx index 25dfad0f4f2..20a800e3eae 100644 --- a/src/pages/developing/web-components-tutorial/step-1.mdx +++ b/src/pages/developing/web-components-tutorial/step-1.mdx @@ -23,9 +23,9 @@ pages. Fork, clone and branch Build and start Install Carbon -Install and build Sass +Install Sass +A working Carbon button Add UI Shell -Create pages Submit pull request @@ -323,7 +323,7 @@ Running the application at this point it looks like the button has dissapeared. Add the following to `style.scss`. ```path=style.scss -@use '@carbon/styles/scss/spacing' as *; // near top of file +@use '@carbon/styles/scss/spacing' as *; /* near top of file */ .app { display: grid; @@ -420,15 +420,15 @@ the `./public` folder) from the `@carbon/icons` pacakge. } .notification .action-icon { - mask: url(./notification.svg) no-repeat center; + mask: url('./notification.svg') no-repeat center; } .user-avatar .action-icon { - mask: url(./user--avatar.svg) no-repeat center; + mask: url('./user--avatar.svg') no-repeat center; } .app-switcher .action-icon { - mask: url(./switcher.svg) no-repeat center; + mask: url('./switcher.svg') no-repeat center; } ``` @@ -592,7 +592,7 @@ These styles import the Carbon typeography features, define a layout for our panel, and set the title size. ```scss path=style.scss -@use '@carbon/styles/scss/type' as *; // place at top of file +@use '@carbon/styles/scss/type' as *; /* place at top of file */ .header-panel__content { display: flex; @@ -622,18 +622,15 @@ cds-content-switcher-item[selected] .theme-selector__icon { } .theme-selector__icon--light { - -webkit-mask: url(./sun.svg) no-repeat center; - mask: url(./sun.svg) no-repeat center; + mask: url('./sun.svg') no-repeat center; } .theme-selector__icon--system { - -webkit-mask: url(./brightness-contrast.svg) no-repeat center; - mask: url(./brightness-contrast.svg) no-repeat center; + mask: url('./brightness-contrast.svg') no-repeat center; } .theme-selector__icon--dark { - -webkit-mask: url(./moon.svg) no-repeat center; - mask: url(./moon.svg) no-repeat center; + mask: url('./moon.svg') no-repeat center; } ``` diff --git a/src/pages/developing/web-components-tutorial/step-2.mdx b/src/pages/developing/web-components-tutorial/step-2.mdx index c4da01d75da..8d5c9b27c52 100644 --- a/src/pages/developing/web-components-tutorial/step-2.mdx +++ b/src/pages/developing/web-components-tutorial/step-2.mdx @@ -25,7 +25,6 @@ Carbon components. Style landing page Add repo page grid Build repo page -Style repo page Submit pull request @@ -107,14 +106,14 @@ For the purposes of this tutorial the classes are written out long hand. In In `index.html` replace `LANDING PAGE` with ```html path=index.html -

-
+
+
1
-
+
+ class="page-landing__tab-content cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-4 cds--lg:col-span-7"> 7/16
-
+
+ class="page-landing__label cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-2 cds--lg:col-span-4"> 1/4
+ class="page-landing__title cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-2 cds--lg:col-span-4"> 1/4
+ class="page-landing__title cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-2 cds--lg:col-span-4"> 1/4
+ class="page-landing__title cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-2 cds--lg:col-span-4"> 1/4
@@ -207,7 +206,7 @@ import '@carbon/web-components/es/components/breadcrumb/index'; ``` We can now add our component to the first row, replace the content of -`page--landing__banner` with: +`page-landing__banner` with: ```html path=index.html @@ -215,7 +214,7 @@ We can now add our component to the first row, replace the content of Getting started -

Design & build with Carbon

+

Design & build with Carbon

``` ### Second row @@ -227,11 +226,11 @@ import: import '@carbon/web-components/es/components/tabs/index'; ``` -The tabs come next going inside `page--landing__r2` and before the sub +The tabs come next going inside `page-landing__r2` and before the sub `cds--subgrid`. ```html path=index.html - + About Design What is Carbon? -

+

What is Carbon?

+

Carbon is IBM’s open-source design system for digital products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface @@ -269,7 +268,7 @@ The second column content `8/16` is replaced with: ```html path=index.html Carbon illustration` of `id="panel-about"`, still inside -`page--landing__r2` we add two further tab panels. This one +`page-landing__r2` we add two further tab panels. This one ```html path=index.html

-
-

+

+

Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.

@@ -304,8 +303,8 @@ and
-
-

+

+

Carbon provides components and styles for all. Whether using Vanilla, Web Components, React, or another reactive library, you can build with Carbon. @@ -323,19 +322,19 @@ large column sizes after the first column. ```html path=index.html

+ class="page-landing__label cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-2 cds--lg:col-span-4"> The principles
+ class="page-landing__title cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-6 cds--md:col-start-3 cds--lg:col-span-4 cds--lg:col-start-5"> Carbon is open
+ class="page-landing__title cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-6 cds--md:col-start-3 cds--lg:col-span-4 cds--lg:col-start-9"> Carbon is modular
+ class="page-landing__title cds--css-grid-column cds--sm:col-span-4 cds--md:col-span-6 cds--md:col-start-3 cds--lg:col-span-4 cds--lg:col-start-13"> Carbon is consistent
``` @@ -357,13 +356,13 @@ adjustment so to align it with our other content. } } -.page--landing__banner { +.page-landing__banner { padding-block: $spacing-05 $spacing-13; background: $layer-01; box-shadow: $spacing-06 0 0 $layer-01, -1 * $spacing-06 0 0 $layer-01; } -.page--landing__heading { +.page-landing__heading { @include type-style('productive-heading-05'); margin: 0; @@ -378,16 +377,16 @@ order to make use of the Carbon SCSS mixin `breakpoint-down` we also add the breakpoint import to our list of `@use` near the top of the file. ```scss path=style.scss -@use '@carbon/styles/scss/breakpoint' as *; // add near top of file +@use '@carbon/styles/scss/breakpoint' as *; /* add near top of file */ -.page--landing__illo { +.page-landing__illo { max-width: 100%; float: inline-end; height: auto; } @include breakpoint-down(md) { - .page--landing__illo { + .page-landing__illo { max-width: 528px; width: 100%; height: 100%; @@ -395,21 +394,21 @@ breakpoint import to our list of `@use` near the top of the file. } } -.page--landing__tabs { - margin: -1 * $spacing-08 0 $spacing-08; +.page-landing__tabs { + margin: (-1 * $spacing-08) 0 $spacing-08; } -.page--landing__tab-content { +.page-landing__tab-content { padding-block: $spacing-06; } -.page--landing__subheading { +.page-landing__subheading { @include type-style('productive-heading-03'); font-weight: 600; } -.page--landing__p { +.page-landing__p { @include type-style('productive-heading-03'); margin-top: $spacing-06; margin-bottom: $spacing-08; @@ -419,7 +418,7 @@ breakpoint import to our list of `@use` near the top of the file. ### Third row ```scss path=style.scss -.page--landing__r3 { +.page-landing__r3 { padding-block: $spacing-09; background: $layer-01; } @@ -428,7 +427,7 @@ breakpoint import to our list of `@use` near the top of the file. Ta-da! You should see a step 2 complete landing page! Now we can move on to the repo page. -## Add repo page content +## Build repo page ### First a grid to contain our content @@ -436,7 +435,7 @@ Now in our `repositories` page we will first add a grid wrapping `REPOSITORIES PAGE` ```html path=repositories.html -
+
REPOSITORIES PAGE
diff --git a/src/pages/developing/web-components-tutorial/step-3.mdx b/src/pages/developing/web-components-tutorial/step-3.mdx index 775ded86ef7..ddee3cfdbd4 100644 --- a/src/pages/developing/web-components-tutorial/step-3.mdx +++ b/src/pages/developing/web-components-tutorial/step-3.mdx @@ -21,15 +21,13 @@ repository information in a data table. Fork, clone and branch Install dependencies -Fetch data -Populate data table -Add loading -Add pagination +Fetch and render data +Ppagination Submit pull request -### Preview +## Preview The [GitHub REST API](https://docs.github.com/en/rest?apiVersion=2022-11-28) is very well documented, we'll use it to fetch Carbon-related data for this Carbon diff --git a/src/pages/developing/web-components-tutorial/step-4.mdx b/src/pages/developing/web-components-tutorial/step-4.mdx index f499bfae6d1..5698b4e5cb5 100644 --- a/src/pages/developing/web-components-tutorial/step-4.mdx +++ b/src/pages/developing/web-components-tutorial/step-4.mdx @@ -20,8 +20,8 @@ page and complete the principles section using Carbon pictograms and tokens. Fork, clone and branch Review design -Create templates -Use templates +The info section +The info card Add styling Check accessibility Submit pull request @@ -113,7 +113,7 @@ we'll call it an `InfoSection` with three `InfoCard`s as children. ## The info section -Inside `page--landing__r3` in `index.html` we will make a couple of small +Inside `page-landing__r3` in `index.html` we will make a couple of small changes. Add the class `info-section` to the `cds--subgrid` ```html path=index.html @@ -140,7 +140,7 @@ Style the `info-section__heading` with: } ``` -## Create info card +## The info card At the bottom of `index.html` between the closing body and html tags add the info card template. @@ -164,7 +164,7 @@ info card template. ``` Before we make use of the template we need to remove the column settings from -the remaining three elements `page--landing__title` and replace with `info-card +the remaining three elements `page-landing__title` and replace with `info-card to leave: ```html @@ -249,15 +249,15 @@ First up let's make the picograms visible with the following. } .info-card__pictogram--accelerating-transformation { - mask: url(./accelerating-transformation.svg) no-repeat center; + mask: url('./accelerating-transformation.svg') no-repeat center; } .info-card__pictogram--advocate { - mask: url(./advocate.svg) no-repeat center; + mask: url('./advocate.svg') no-repeat center; } .info-card__pictogram--globe { - mask: url(./globe.svg) no-repeat center; + mask: url('./globe.svg') no-repeat center; } ``` diff --git a/src/pages/developing/web-components-tutorial/step-5.mdx b/src/pages/developing/web-components-tutorial/step-5.mdx new file mode 100644 index 00000000000..72407245822 --- /dev/null +++ b/src/pages/developing/web-components-tutorial/step-5.mdx @@ -0,0 +1,456 @@ +--- +title: Wrapping up +description: + Welcome to Carbon! This tutorial will guide you in creating a Vanilla JS/HTML + app using Web Components from the Carbon Design System. +tabs: + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] +--- + +import Preview from 'components/Preview'; + + + +This is an optional step that takes what we've built so far and optimizes the +app for a production environment. + + + + + +Fork, clone and branch +Linting + + + +## Preview + +A [preview](https://carbon-tutorial-nextjs.vercel.app/) of what you'll build +(visually no different, but built for production): + + + +## Fork, clone and branch + +This tutorial has an accompanying GitHub repository called +[carbon-tutorial-web-components](https://github.com/carbon-design-system/carbon-tutorial-web-components) +that we'll use as a starting point for each step. If you haven't forked and +cloned that repository yet, and haven't added the upstream remote, go ahead and +do so by following the [step 1 +instructions]([previous step](/developing/web-components-tutorial/step-1#fork-clone-and-branch). + +### Branch + +With your repository all set up, let's check out the branch for this tutorial +step's starting point. + +```bash +git fetch upstream +git checkout -b step-5 upstream/step-5 +``` + + + +**Note:** This builds on top of step 4, but be sure to check out the upstream +step 5 branch because it includes the static assets required to get through this +step. + + + +### Build and start app + +Install the app's dependencies (in case you're starting fresh in your current +directory and not continuing from the previous step): + +```bash +pnpm i +``` + +Then, start the app: + +```bash +pnpm dev +``` + +You should see something similar to where the +[previous step](/developing/web-components-tutorial/step-1#fork-clone-and-branch/step-4) +left off. + +## Linting + + + +**Note:** Linters are great Linters, spell checkers, code formatters are all +really useful tools to ensure code consistency and guard against potential +errors. They often integrate and run within your IDE and should form an +essential part of your development process. Early really is the best and +cheapest time to avoid issues. + + + +### Stylelint + +While the Carbon component styles are encapsulated in the components there we +have written some SCSS ourselves it would great if we could check we are +applying Carbon as expected. + +Add styellint an carbon plugin as development dependencies. + +```bash +pnpm add -D stylelint stylelint-plugin-carbon-tokens +``` + +In `package.json` add the following script: + +```json path=package.json + "lint:style": "pnpm stylelint '**/*.scss'", +``` + +In the root folder create a file called `.styelintrc.json` and add the following +settings. The +[recommended config](https://github.com/carbon-design-system/stylelint-plugin-carbon-tokens/blob/main/config/recommended.js) +for the plugin checks layout, motion, theme and type usage against expectations. +For more details take a look at the packages +[README.md](https://github.com/carbon-design-system/stylelint-plugin-carbon-tokens/blob/main/README.md) + +```json path=.stylelintrc.json +{ + "extends": ["stylelint-plugin-carbon-tokens/config/recommended"], + "plugins": ["stylelint-plugin-carbon-tokens"], + "reportNeedlessDisables": true, + "reportInvalidScopeDisables": true, + "reportDescriptionlessDisables": true +} +``` + +At the command line you can now run the script `lint:style`. This should +highlight just the one issue with the setting of `font-weight` to 600. + +```shell +$pnpm run lint:style + +> carbon-tutorial-web-components@0.0.0 lint:style /Users/leechase/Source/carbon/carbon-tutorial-web-components +> pnpm stylelint '**/*.scss' + +style.scss + 158:16 ✖ Expected carbon type token, mixin or function for carbon/type-use + "font-weight" found "600". + +✖ 1 problem (1 error, 0 warnings) + 1 error potentially fixable with the "--fix" option. +``` + +If you open the file you will see that `600` is marked with a wiggly underline. + +![Linter error highlight](./images/step-5/linter-error.png) + +Hovering over it you will see a popup explanation. + +![Linter error popup](./images/step-5/linter-error-details.png) + +Change `600` to `font-weight('semibold')` + +Out of scope, but included from [Step 1](#step-1), for this tutorial it is +recommended that you use a more extensive rule set for stylelint. This can help +keep code consistent and auto fix many potential issues. + +If for instance you were to adopt the following configuration it would check for +a number of important issues such as accessiblity, right to left, and even +consistency patterns like nesting depty and CSS class selector pattern. + +Even better the small number of issues that it raises, regarding use of logical +properties, can be auto fixed bringing your CSS up to date. + +```json +{ + "extends": [ + "stylelint-config-standard-scss", + "stylelint-plugin-carbon-tokens/config/recommended" + ], + "plugins": [ + "@double-great/stylelint-a11y", + "stylelint-use-logical-spec", + "stylelint-plugin-carbon-tokens" + ], + "reportNeedlessDisables": true, + "reportInvalidScopeDisables": true, + "reportDescriptionlessDisables": true, + "rules": { + "a11y/media-prefers-reduced-motion": true, + "a11y/no-outline-none": true, + "a11y/selector-pseudo-class-focus": true, + "max-nesting-depth": [ + 3, + { + "ignoreAtRules": ["if", "else", "each", "include", "mixin"] + } + ], + "liberty/use-logical-spec": true, + "selector-class-pattern": [ + "^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$", + { + "message": "should match Harry Roberts'' style BEM block[__element][--modifier]" + } + ] + } +} +``` + +Don't forget to add these packages if you want to try out this config. + +```bash +pnpm add -D @double-great/stylelint-a11y stylelint-config-standard-scss stylelint-use-logical stylelint-use-logical-spec +``` + +Running `pnpm run lint:style --fix` will fix the issues identified. + +### ESLint & Prettier + +In addition to linting styles, it is recommended that you also check your script +for dev time errors and consitency. + +NOTE: If you are using a reactive library then there may well be configurations +better suited to your purposes. + +ESLint checks your code for potential bugs, prettier ensures your whole teams +code uses the same formatting rules. Config for these two is often added at the +same time, the package `eslint-config-prettier` specifically made to help the +two work together. + +Create a file called `.prettierrc` in the root of your project and add the +following. + +```json path=.prettierrc +{ + "bracketSameLine": true, + "bracketSpacing": true, + "printWidth": 120, + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "proseWrap": "always" +} +``` + +Then add a file called `eslint.config.js` in the root of the project and include +the following config. + +```javascript path=eslint.config.js +import js from '@eslint/js'; +import eslintConfigPrettier from 'eslint-config-prettier'; +import globals from 'globals'; + +export default [ + { + languageOptions: { + ecmaVersion: 2024, + globals: { + ...globals.es2024, + ...globals.browser, + }, + }, + }, + { ignores: ['node_modules', 'dist'] }, + js.configs.recommended, + eslintConfigPrettier, +]; +``` + +Add the following dev dependencies + +```bash +pnpm add -D eslint eslint-config-prettier prettier globals +``` + +Two more scripts for `package.json` to run eslint and prettier. + +```json path=package.json +"lint:es": "eslint . main.js --report-unused-disable-directives --max-warnings 0", +"lint:format": "prettier ./**/*.{js,jsx,ts,tsx,md,mdx,scss} --write --ignore-unknown --no-error-on-unmatched-pattern --log-level warn", +``` + +Running these scripts will, not at the time of writing highlight any ESLint +issues. If it does in future it may be possible to auto fix them. + +It will almost certainly refomat the code compared to your chosen editors +preferences. + +### Spell checkers + +If we all had perfect spelling and typing then maybe a spell checker is not +needed. However, given that the word `typo` exists let us assume that somebody +on your team is not the perfect vessel to sit between their keyboard and chair. + +A spell checker ensures that `typo` do not, or at least should not go unnoticed. + +Add `cspell` as a dependency with: + +```bash +pnpm add -D cspell +``` + +There are many config options, including the ability to create and share custom +dictionaries so your brand, pet name or other desirable creations do not get +flagged up as spelling errors. + +Here we will add the following config file `cspell.json`. + +```json path=cspell.json +{ + "version": "0.1", + "language": "en", + "dictionaries": [], + "dictionaryDefinitions": [], + "enabledLanguageIds": [ + "css", + "git-commit", + "html", + "javascript", + "json", + "markdown", + "plaintext", + "scss", + "text" + ], + "ignorePaths": [ + "node_modules", + "dist", + "package.json", + "*.log", + "CHANGELOG.md" + ], + "words": [""] +} +``` + +Add this spelling script to `package.json` + +```json path=package.json +"lint:spell": "cspell lint --quiet \"**/*.{js,css,scss,md}\"", +``` + +Running this script will find a number of spellings `cspell` is not happy with. + +In our style file for instance it will highlight our image name `illo` as not +being a word, which is great because it is not. + +We can also see in our IDE that this is highlighted with a blue wiggly +underline. + +![Spelling of illo highlighted](./images/step-5/spelling-illo.png) + +There are a number of ways to fix this. As this is not a spelling mistake we +will choose `Add: "illo" to config:...` from the list of options. + +![Spelling suggested quick fixes](./images/step-5/spelling-suggestions.png) + +If you view the `cspell.json` file you will find it has been added. + +## Deplying to gh-pages + +Githb packages can use a branch called `gh-pages` to deploy to. In order to do +this a couple of important changes are needed first. Without completing these +steps correctly you will either end up attempting to deploy somewhere you do not +have permission to do so, or deploy a page that cannot find any of its +dependencies. + +Update and/or add `name` and `homepage` to `pacakge.json`. + +```json path=package.json +"name": "carbon-tutorial-web-components", +"homepage": "https://github.com/[YOUR-ORG-OR-NAME]/[REPO-NAME]", +``` + +Back to `package.json` we need one last dependency to automate the deployment +process. + +```bash +pnpm add -D gh-pages +``` + +Next to run the deployment we will add two scripts to `package.json` + +```json path=package.json +"predeploy": "npm run build", +"deploy": "gh-pages -d dist", +``` + +Way back in step 1 you creted a fork of the tutorial repo. It is this URL you +use for the projects homepage. + +Next you will need a `vite.config.js` file to ensure both `index.html` and +`repositories.html` are included in the build. The config may also need to set a +value for `base` that depends on various factors. + +If personal Github it is likely your vite config will look like this: + +```javascript path=vite.config.js +export default { + base: '/[REPO-NAME]/', + build: { + rollupOptions: { + input: { + landing: fileURLToPath(new URL('./index.html', import.meta.url)), + repositories: fileURLToPath( + new URL('./repositories.html', import.meta.url) + ), + }, + }, + }, +}; +``` + +If part of an organisation use `base: '/'` instead. + +After running the deploy script you will have a publicly visible page. You can +locate the page by browsing to the settings page of your Github repository. At +the time of writing the URL shown in the `Pages` section where you can choose to +unpublish if needed. + +For ease of access: + +- Select the `Code` tab/page +- Click on the cog (right side of page) to the right of `About` to view the + repository details. +- Check the `Use your GitHub Pages website` and save changes. The Github pages + URL should now appear on the landing page of your repository. + +### Debugging your deploy + +#### Build + +Run a build and makes sure your assets are all included in the `dist` folder. + +```bash +pnpm build +``` + +This should include the contents of public, the two html files, CSS and +Javascript. If something is missing check your Vite config and `package.json` +against the guidance above and the latest Vite documentation. + +#### Deploy + +Deploy your application with a base value of `/`. If the page does not look +correctc, e.g. not styled or missing icons, then you need to determine what the +difference is between the asset location and your base. + +Open the deveveloper tools and view the console. Any missing assets should cause +messages such as the following to be displayed. + +![Asset not found 404](./images/step-5/asset-404.png) + +In this case + +- Github pages location `https://[ACCOUNT].github.io/[REPO-NAME]` +- Asset location `https://[ACCOUNT].github.io/[ASSET]` + +The fix would be to change your base setting to `/[REPO-NAME]/`. From 24c43b820f229a354959678409cf0691da052913 Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Thu, 31 Oct 2024 10:24:31 +0000 Subject: [PATCH 06/62] fix: mask urls for deploy --- .../developing/web-components-tutorial/step-1.mdx | 14 +++++++------- .../developing/web-components-tutorial/step-2.mdx | 2 +- .../developing/web-components-tutorial/step-4.mdx | 6 +++--- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/developing/web-components-tutorial/step-1.mdx b/src/pages/developing/web-components-tutorial/step-1.mdx index 20a800e3eae..aa6a22725e9 100644 --- a/src/pages/developing/web-components-tutorial/step-1.mdx +++ b/src/pages/developing/web-components-tutorial/step-1.mdx @@ -314,7 +314,7 @@ Then above `
` add our header. ```html path=index.html
- Carbon Tutorial + Carbon Tutorial
``` @@ -420,15 +420,15 @@ the `./public` folder) from the `@carbon/icons` pacakge. } .notification .action-icon { - mask: url('./notification.svg') no-repeat center; + mask: url('/notification.svg') no-repeat center; } .user-avatar .action-icon { - mask: url('./user--avatar.svg') no-repeat center; + mask: url('/user--avatar.svg') no-repeat center; } .app-switcher .action-icon { - mask: url('./switcher.svg') no-repeat center; + mask: url('/switcher.svg') no-repeat center; } ``` @@ -622,15 +622,15 @@ cds-content-switcher-item[selected] .theme-selector__icon { } .theme-selector__icon--light { - mask: url('./sun.svg') no-repeat center; + mask: url('/sun.svg') no-repeat center; } .theme-selector__icon--system { - mask: url('./brightness-contrast.svg') no-repeat center; + mask: url('/brightness-contrast.svg') no-repeat center; } .theme-selector__icon--dark { - mask: url('./moon.svg') no-repeat center; + mask: url('/moon.svg') no-repeat center; } ``` diff --git a/src/pages/developing/web-components-tutorial/step-2.mdx b/src/pages/developing/web-components-tutorial/step-2.mdx index 8d5c9b27c52..c643e404b0c 100644 --- a/src/pages/developing/web-components-tutorial/step-2.mdx +++ b/src/pages/developing/web-components-tutorial/step-2.mdx @@ -211,7 +211,7 @@ We can now add our component to the first row, replace the content of ```html path=index.html - Getting started + Getting started

Design & build with Carbon

diff --git a/src/pages/developing/web-components-tutorial/step-4.mdx b/src/pages/developing/web-components-tutorial/step-4.mdx index 5698b4e5cb5..d618876e378 100644 --- a/src/pages/developing/web-components-tutorial/step-4.mdx +++ b/src/pages/developing/web-components-tutorial/step-4.mdx @@ -249,15 +249,15 @@ First up let's make the picograms visible with the following. } .info-card__pictogram--accelerating-transformation { - mask: url('./accelerating-transformation.svg') no-repeat center; + mask: url('/accelerating-transformation.svg') no-repeat center; } .info-card__pictogram--advocate { - mask: url('./advocate.svg') no-repeat center; + mask: url('/advocate.svg') no-repeat center; } .info-card__pictogram--globe { - mask: url('./globe.svg') no-repeat center; + mask: url('/globe.svg') no-repeat center; } ``` From 2b246f816c35ae929c5f73e97846ed10ecd2be7d Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Thu, 31 Oct 2024 10:42:46 +0000 Subject: [PATCH 07/62] feat: add cdn usage --- .../developing/react-tutorial/wrapping-up.mdx | 11 +-- .../web-components-tutorial/step-5.mdx | 77 ++++++++++++++++++- 2 files changed, 75 insertions(+), 13 deletions(-) diff --git a/src/pages/developing/react-tutorial/wrapping-up.mdx b/src/pages/developing/react-tutorial/wrapping-up.mdx index 1c543e3b237..0c679f36887 100644 --- a/src/pages/developing/react-tutorial/wrapping-up.mdx +++ b/src/pages/developing/react-tutorial/wrapping-up.mdx @@ -4,16 +4,7 @@ description: Welcome to Carbon! This tutorial will guide you in creating a React app using Next.js with the Carbon Design System. tabs: - [ - 'Overview', - 'Step 1', - 'Step 2', - 'Step 3', - 'Step 4', - 'Step 5', - 'Wrapping up', - 'FAQ', - ] + ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up'] --- diff --git a/src/pages/developing/web-components-tutorial/step-5.mdx b/src/pages/developing/web-components-tutorial/step-5.mdx index 72407245822..d39ec74ea3d 100644 --- a/src/pages/developing/web-components-tutorial/step-5.mdx +++ b/src/pages/developing/web-components-tutorial/step-5.mdx @@ -157,9 +157,8 @@ Hovering over it you will see a popup explanation. Change `600` to `font-weight('semibold')` -Out of scope, but included from [Step 1](#step-1), for this tutorial it is -recommended that you use a more extensive rule set for stylelint. This can help -keep code consistent and auto fix many potential issues. +It is recommended that you use a more extensive rule set for stylelint. This can +help keep code consistent and auto fix many potential issues. If for instance you were to adopt the following configuration it would check for a number of important issues such as accessiblity, right to left, and even @@ -454,3 +453,75 @@ In this case - Asset location `https://[ACCOUNT].github.io/[ASSET]` The fix would be to change your base setting to `/[REPO-NAME]/`. + +## A bit of a tidy + +The tutorial, for simplicity, uses a single script file and a single repository +file. This is something you should not do in your real projects. + +## Using the CDN + +Lastly we've been using `main.js` to load components from `node_modules` but Web +Components do not require is to do this. All of Carbon Web Components is +published via a CDN see +[the documentation for further details](https://web-components.carbondesignsystem.com/?path=/docs/introduction-carbon-cdn-style-helpers--overview). + +Remove the component imports from `main.js`. + +```javascript path=main.js +import '@carbon/web-components/es/components/button/button.js'; +import '@carbon/web-components/es/components/ui-shell/index'; +import '@carbon/web-components/es/components/checkbox/index'; +import '@carbon/web-components/es/components/content-switcher/index'; +import '@carbon/web-components/es/components/breadcrumb/index'; +import '@carbon/web-components/es/components/tabs/index'; +import '@carbon/web-components/es/components/data-table/index.js'; +import '@carbon/web-components/es/components/link/index'; +import '@carbon/web-components/es/components/pagination/index'; +``` + +In the `head` of `index.html` add the following script tags. + +```html + + + + + +``` + +We also need to update `repositories.html` with: + +```html + + + + + + +``` + +4. If you run the application again you are running with no dependency on + `node_modules/@carbon/web-components`. From 53ded7eff2d1dc2f8b84971337ff7da441bed0f6 Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Thu, 31 Oct 2024 11:58:35 +0000 Subject: [PATCH 08/62] chore: adjust github instructions --- .../web-components-tutorial/step-1.mdx | 33 ++------ .../web-components-tutorial/step-2.mdx | 50 ++++++------ .../web-components-tutorial/step-3.mdx | 79 +++++++++---------- .../web-components-tutorial/step-4.mdx | 65 +++++++-------- .../web-components-tutorial/step-5.mdx | 67 +++++++++++++--- 5 files changed, 159 insertions(+), 135 deletions(-) diff --git a/src/pages/developing/web-components-tutorial/step-1.mdx b/src/pages/developing/web-components-tutorial/step-1.mdx index aa6a22725e9..0c3e85a9392 100644 --- a/src/pages/developing/web-components-tutorial/step-1.mdx +++ b/src/pages/developing/web-components-tutorial/step-1.mdx @@ -26,7 +26,7 @@ pages. Install Sass A working Carbon button Add UI Shell -Submit pull request +Push to Github @@ -737,14 +737,13 @@ NOTE: We could do something better than duplicating our pages. This could be pure Javascript, HTML templates or native Web Components. However, that might distract from the message that no library is required. -## Submit pull request +## Push to Github -We're going to submit a pull request to verify completion of this tutorial step -and demonstrate a couple of related concepts. +That is it you are done. Just one more push to save your completion of step 1. ### Git commit and push -Before we can create a pull request, stage and commit all of your changes: +First, stage and commit all of your changes: ```bash git add --all && git commit -m "feat(tutorial): complete step 1" @@ -753,7 +752,7 @@ git add --all && git commit -m "feat(tutorial): complete step 1" Then, push to your repository: ```bash -git push origin step-1 +git push -u origin step-1 ``` @@ -767,25 +766,3 @@ That lets you use your token instead of password when performing Git operations over HTTPS. - - - -**Note:** If you receive a `non-fast-forward` error, it's likely that your -forked repository is behind the original repository and needs to be updated. -This can happen if the tutorial was updated after you began working on it. To -fix, run `git pull upstream step-1` to merge the changes into your branch, then -you can try pushing again. Or, you can -[manually merge](https://help.github.com/en/articles/syncing-a-fork) in the -upstream changes. - - - -### Pull request (PR) - -Finally, visit -[carbon-web-components-tutorial](https://github.com/carbon-design-system/carbon-tutorial-web-components) -to "Compare & pull request". In doing so, make sure that you are comparing to -`step-1` into `base: step-1`. Take notice of the -[Netlify](https://www.netlify.com) bot that deploys a preview of your PR every -time that you push new commits. These previews can be shared and viewed by -anybody to assist the PR review process. diff --git a/src/pages/developing/web-components-tutorial/step-2.mdx b/src/pages/developing/web-components-tutorial/step-2.mdx index c643e404b0c..3d251b3e437 100644 --- a/src/pages/developing/web-components-tutorial/step-2.mdx +++ b/src/pages/developing/web-components-tutorial/step-2.mdx @@ -25,7 +25,7 @@ Carbon components. Style landing page Add repo page grid Build repo page -Submit pull request +Push to Github @@ -429,7 +429,7 @@ repo page. ## Build repo page -### First a grid to contain our content +### Add a grid to contain our content Now in our `repositories` page we will first add a grid wrapping `REPOSITORIES PAGE` @@ -454,12 +454,21 @@ page in `style.scss`. ### Adding a table -Before we can add the table we need to import it in `main.js` +Before we can add the table we need to import the web component. As this is only +used in our `repositories.htnl` page lets create a new script file `repos.js` +and then add. -```javascript path=main.js +```javascript path=repos.js import '@carbon/web-components/es/components/data-table/index.js'; ``` +We need to include this file in `repositories.html` which we can do by adding +the following next to the script tag that includes `main.js`. + +```html path=repositories.html + +``` + Next we add the table header and column titles. ```html path=repositories.html @@ -550,10 +559,10 @@ row template. ``` -Next in `main.js` add the following data that we will use to populate the table +Next in `repos.js` add the following data that we will use to populate the table rows. -```javascript path=main.js +```javascript path=repos.js // cds-table-row data let data = [ { @@ -589,7 +598,7 @@ let data = [ Next we create the function `updateTable` and make a call to it to populate add our rows. -```javascript path=main.js +```javascript path=repos.js const updateTable = () => { const tableRowTemplate = document.querySelector( 'template#template--table-row' @@ -618,37 +627,32 @@ the app. Congratulations! We've now created our static repo page! -## Submit pull request +## Push to Github -We're going to submit a pull request to verify completion of this tutorial step. +That is it you are done. Just one more push to save your completion of step 2. ### Git commit and push -Before we can create a pull request, format your code, then stage and commit all -of your changes: +First, stage and commit all of your changes: ```bash -pnpm format git add --all && git commit -m "feat(tutorial): complete step 2" ``` Then, push to your repository: ```bash -git push origin step-2 +git push -u origin step-2 ``` -**Note:** Having issues pushing your changes? -[Step 1](/developing/web-components-tutorial/step-1#git-commit-and-push) has -troubleshooting notes that may help. +**Note:** If your Git remote protocol is HTTPS instead of SSH, you may be +prompted to authenticate with GitHub when you push changes. If your GitHub +account has two-factor authentication enabled, we recommend that you follow +these instructions to +[create a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line). +That lets you use your token instead of password when performing Git operations +over HTTPS. - -### Pull request (PR) - -Finally, visit -[carbon-web-components-tutorial](https://github.com/carbon-design-system/carbon-tutorial) -to "Compare & pull request". In doing so, make sure that you are comparing to -`step-2` into `base: step-2`. diff --git a/src/pages/developing/web-components-tutorial/step-3.mdx b/src/pages/developing/web-components-tutorial/step-3.mdx index ddee3cfdbd4..fe112ec8762 100644 --- a/src/pages/developing/web-components-tutorial/step-3.mdx +++ b/src/pages/developing/web-components-tutorial/step-3.mdx @@ -23,7 +23,7 @@ repository information in a data table. Install dependencies Fetch and render data Ppagination -Submit pull request +Push to Github @@ -108,10 +108,10 @@ pnpm dev ### Imports -Add the following import Octokit into `main.js` and create a new instance of +Add the following import Octokit into `repos.js` and create a new instance of Octokit. -```javascript path=main.js +```javascript path=repos.js import { Octokit } from '@octokit/core'; const octokitClient = new Octokit({}); @@ -122,15 +122,15 @@ const octokitClient = new Octokit({}); Next, we'll assemble our GitHub API request to fetch a list of repositories that belong to the `carbon-design-system` GitHub organization. -First empty the data array in `main.js` +First empty the data array in `repos.js` -```javascript path=main.js +```javascript path=repos.js let data = []; ``` Then add the function `fetchData` calling it immediately afterwards. -```javascript path=smain.js +```javascript path=srepos.js const fetchData = async () => { const res = await octokitClient.request('GET /orgs/{org}/repos', { org: 'carbon-design-system', @@ -166,14 +166,14 @@ table. Let's fix that next. In `repositories.html` just above the `` add a table skeleton. -```html path=index.html +```html path=repositories.html ``` Then move the `` into a template called `template--table` at the bottom of the file. -```html path=index.html +```html path=repositories.html