add doc

also, improves the implementation of subscriptions

.github/workflows/deploy.yml

@@ -0,0 +1,28 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm run test
+    - run: npm run check-formatting
+    - run: npm run build

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /dist
+
 npm-debug.log
 
 # misc
@@ -14,4 +15,20 @@ yarn-debug.log*
 yarn-error.log*
 
 package-lock.json
-.vscode
+yarn.lock
+
+#ide's
+.vscode
+.idea
+
+node_modules
+
+# Extras temp file
+/tools/owl.js
+
+release-notes.md
+
+.rpt2_cache
+
+# useful in some cases
+/temp

CHANGELOG.md

@@ -0,0 +1,766 @@
+# Changelog
+
+This document contains an overview of all changes between Owl 1.x and
+Owl 2.x, with some pointers on how to update the code.
+
+Note that some of these changes can be magically implemented (for example, by
+patching the `setup` method of `Component` to auto register all the lifecycle
+methods as hooks). This will be done for the transition period, but will be
+removed after.
+
+## From Owl 1.x to Owl 2.0
+
+All changes are documented here in no particular order.
+
+**Components**
+
+- components can now have empty content or multiple root nodes (htmlelement or text) ([details](#31-components-can-now-have-arbitrary-content))
+- breaking: component.el is removed ([details](#9-componentel-is-removed))
+- new `useEffect` hook ([doc](doc/reference/hooks.md#useeffect))
+- new `onWillDestroy`, `onWillRender` and `onRendered` hooks ([doc](doc/reference/component.md#lifecycle))
+- breaking: lifecycle methods are removed ([details](#1-component-lifecycle-methods-are-removed))
+- breaking: can no longer be mounted on detached DOM ([details](#2-components-can-no-longer-be-mounted-in-a-detached-dom-element))
+- breaking: standalone `mount` method API is simpler ([details](#4-mount-method-api-is-simpler))
+- breaking: components can no longer be instantiated and mounted by hand ([details](#5-components-can-no-longer-be-instantiated-and-mounted-by-hand))
+- breaking: components can no longer be unmounted/remounted ([details](#6-components-can-no-longer-be-unmountedremounted))
+- breaking: template name is no longer inferred from the class name ([details](#7-template-name-is-no-longer-inferred-from-the-class-name))
+- breaking: components no longer have a `shouldUpdate` method ([details](#8-components-no-longer-have-a-shouldupdate-method))
+- breaking: components can no longer be mounted with position=self ([details](#11-components-can-no-longer-be-mounted-with-positionself))
+- breaking: `render` method does not return a promise anymore ([details](#35-render-method-does-not-return-a-promise-anymore))
+- breaking: `catchError` method is replaced by `onError` hook ([details](#36-catcherror-method-is-replaced-by-onerror-hook))
+- breaking: Support for inline css (`css` tag and static `style`) has been removed ([details](#37-support-for-inline-css-css-tag-and-static-style-has-been-removed))
+- new: prop validation system can now describe that additional props are allowed (with `*`) ([doc](doc/reference/props.md#props-validation))
+- breaking: prop validation system does not allow default prop on a mandatory (not optional) prop ([doc](doc/reference/props.md#props-validation))
+- breaking: rendering a component does not necessarily render child components ([details](#40-rendering-a-component-does-not-necessarily-render-child-components))
+
+
+
+**Templates**
+
+- breaking: `t-foreach` should always have a corresponding `t-key` ([details](#20-t-foreach-should-always-have-a-corresponding-t-key))
+- breaking: `t-ref` does not work on components ([details](#29-t-ref-does-not-work-on-component))
+- breaking: `t-raw` directive has been removed (replaced by `t-out`) ([details](#38-t-raw-directive-has-been-removed-replaced-by-t-out))
+- new: add support for synthetic events ([doc](doc/reference/event_handling.md#synthetic-events))
+- breaking: style/class on components are now regular props ([details](#10-styleclass-on-components-are-now-regular-props))
+- new: components can use the `.bind` suffix to bind function props ([doc](doc/reference/props.md#binding-function-props))
+- breaking: `t-on` does not accept expressions, only functions ([details](#30-t-on-does-not-accept-expressions-only-functions))
+- new: an error is thrown if an handler defined in a `t-on-` directive is not a function (failed silently previously in some cases)
+- breaking: `t-component` no longer accepts strings ([details](#17-t-component-no-longer-accepts-strings))
+- new: the `this` variable in template expressions is now bound to the component
+
+
+**Reactivity**
+
+- finer grained reactivity: owl 2 tracks change per key/component
+- finer grained reactivity: sub components can reobserve state ([doc](doc/reference/reactivity.md))
+- new: `reactive` function: create reactive state (without being linked to a component) ([doc](doc/reference/reactivity.md#reactive))
+- new: `markRaw` function: mark an object or array so that it is ignored by the reactivity system ([doc](doc/reference/reactivity.md#markraw))
+- new: `toRaw` function: given a reactive objet, return the raw (non reactive) underlying object ([doc](doc/reference/reactivity.md#toraw))
+
+
+**Slots**
+
+- breaking: `t-set` does not define a slot any more ([details](#3-t-set-will-no-longer-work-to-define-a-slot))
+- slots capabilities have been improved ([doc](doc/reference/slots.md))
+  - params can be give to slot content (to pass information from slot owner to slot user)
+  - slots are given as a `prop` (and can be manipulated/propagated to sub components )
+  - slots can define scopes (to pass information from slot user to slot owner)
+
+
+**Portal**
+
+- Portal are now defined with `t-portal` ([details](#33-portal-are-now-defined-with-t-portal))
+- portals can now have arbitrary content (no longer restricted to one single child)
+- breaking: does no longer transfer dom events ([details](#13-portal-does-no-longer-transfer-dom-events))
+- breaking: does render as an empty text node instead of `<portal/>` ([details](#14-portal-does-render-as-an-empty-text-node-instead-of-portal))
+
+
+**Miscellaneous**
+
+- improved performance
+- much simpler code 
+- new App class to encapsulate a root Owl component (with the config for that application) ([doc](doc/reference/app.md))
+- new `useEffect` hook ([doc](doc/reference/hooks.md#useeffect))
+- breaking: `Context` is removed ([details](#15-context-is-removed))
+- breaking: `env` is now totally empty ([details](#16-env-is-now-totally-empty))
+- breaking: `env` is now frozen ([details](#28-env-is-now-frozen))
+- new hook: `useChildSubEnv` (only applies to child components) ([details](#27-usechildsubenv-only-applies-to-child-components))
+- breaking: most exports are exported at top level ([details](#18-most-exports-are-exported-at-top-level))
+- breaking: properties are no longer set as attributes ([details](#19-properties-are-no-longer-set-as-attributes))
+- breaking: `EventBus` api changed: it is now an `EventTarget` ([details](#21-eventbus-api-changed-it-is-now-an-eventtarget))
+- breaking: `Store` is removed ([details](#22-store-is-removed))
+- breaking: `Router` is removed ([details](#23-router-is-removed))
+- breaking: transition system is removed ([details](#24-transition-system-is-removed))
+- breaking: no more global components or templates ([details](#25-no-more-global-components-or-templates))
+- breaking: `AsyncRoot` utility component is removed ([details](#26-asyncroot-utility-component-is-removed))
+- breaking: `renderToString` function on qweb has been removed ([details](#32-rendertostring-on-qweb-has-been-removed))
+- breaking: `debounce` utility function has been removed ([details](#34-debounce-utility-function-has-been-removed))
+- breaking: `browser` object has been removed ([details](#39-browser-object-has-been-removed))
+
+## Details/Rationale/Migration
+
+All changes are listed in no particular order.
+
+### 1. component lifecycle methods are removed
+
+There was two ways to define hooks: the component methods (`willStart`, `mounted`, ...) and the hooks (`onWillStart`, `onMounted`, ...). In Owl 2, the component methods have been removed.
+
+Rationale: it makes the implementation simpler and slightly faster. Hooks are more composable
+than component methods. It enforces a single entry point to check all the useful lifecycle
+calls (instead of it being scattered in the component definition). It feels more "modern".
+
+Migration: lifecycle methods should be defined in the `setup`:
+
+```js
+class MyComponent extends Component {
+  mounted() {
+    // do something
+  }
+}
+```
+should become:
+```js
+class MyComponent extends Component {
+  setup() {
+    onMounted(() => {
+      // do something
+    });
+  }
+}
+```
+
+Documentation: [Component Lifecycle](doc/reference/component.md#lifecycle)
+
+### 2. components can no longer be mounted in a detached dom element
+
+Nor document fragment.
+
+Rationale: it is actually very difficult to do it: this implies that a component
+can be mounted more than once, that we need to check every time different status,
+that some elements is in the dom, and was a cause for bugs. Also, we don't use it
+in practice. Removing this means that we have a much simpler mental model of what
+happens.
+
+Migration: well, not really easy. The code needs to be refactored in a different way.
+
+
+### 3. **`t-set` will no longer work to define a slot**
+
+The `t-set` directive cannot define a slot anymore. Only the `t-set-slot` directive
+can do it.
+
+Rationale: it was left for compatibility reason, but was deprecated anyway.
+
+Migration: `t-set` should be changed to `t-set-slot` (when defining a slot)
+
+Example:
+
+```xml
+<SideBar><t t-set="content">content</t></SideBar>
+```
+should become:
+```xml
+<SideBar><t t-set-slot="content">content</t></SideBar>
+```
+
+### 4. `mount` method API is simpler
+
+Before, the `mount` method was used like this:
+
+```js
+await mount(Root, { target: document.body });
+```
+
+It is now simpler and takes the root component and a target argument:
+
+```js
+await mount(Root, document.body);
+```
+
+Rationale: the `mount` method is only useful anyway for small toy examples,
+because real applications will need to configure the templates, the translations,
+and other stuff. All complex usecases need to go through the new `App` class,
+that encapsulates the root of an owl application.
+
+Documentation: [Mounting a component](doc/reference/app.md#mount-helper)
+
+### 5. components can no longer be instantiated and mounted by hand
+
+In Owl 1, it was possible to instantiate a component by hand:
+
+```js
+const root = new Root();
+await root.mount(document.body);
+```
+
+Now, it is no longer possible. All component instantiations should be done by
+the owl framework itself.
+
+Rationale: the `mount` method does not make sense for all non root components.
+Also, the fact that it was possible for a component to be sometimes root,
+sometimes a child made for a weird constructor signature. This changes makes it
+simpler.
+
+Migration: all code doing that should use either the `mount` method (if the use
+case is simple enough, or the `App` class):
+
+```js
+const app = new App(Root);
+app.configure({ templates: ..., ...});
+await app.mount(document.body);
+```
+
+### 6. components can no longer be unmounted/remounted
+
+Rationale: this is a very difficult feature to implement (it adds a lot of possible
+state transitions), compared to its benefit.
+
+Migration: all code using it should find a way to export and reimport the state
+
+### 7. template name is no longer inferred from the class name
+
+Before, it was possible to define a component without specifying its template:
+
+```js
+class Blabla extends Component {
+    // no static template here!
+}
+```
+with the `Blabla` template. It also worked with subclasses. But then, this means
+that the code had to look up all the super classes names to find the correct
+template.
+
+Rationale: in practice, it is not really useful, since all templates are usually
+namespaced: `web.SomeComponent` anyway. All the trouble to do that was just not
+worth it.
+
+Migration: simply explicitely defines the template key everytime:
+
+```js
+class Blabla extends Component {}
+Blabla.template = "Blabla";
+```
+
+### 8. components no longer have a `shouldUpdate` method
+
+Rationale: `shouldUpdate` is a dangerous method to use, that may cause a lot of
+issues. Vue does not have such a mechanism (see https://github.com/vuejs/vue/issues/4255),
+because the reactivity system in Vue is smart enough to only rerender the minimal
+subset of components that is subscribed to a piece of state. Now, Owl 2 features
+a much more powerful reactivity system, so the same rationale applies: in a way,
+it's like each Owl 2 component has a `shouldUpdate` method that precisely tracks
+every value used by the component.
+
+Migration code: remove the `shouldUpdate` methods, and it should work as well
+as before.
+
+### 9. component.el is removed
+
+This comes from the fact that Owl 2 supports fragments (arbitrary content).
+
+Migration: if one need a reference to the root htmlelement of a template, it is
+suggested to simply add a `ref` on it, and access the reference as needed.
+
+Documentation: [Refs](doc/reference/refs.md)
+
+### 10. style/class on components are now regular props
+
+Before, it was possible to do this in a template:
+
+```xml
+<Child style="..." class="..."/>
+```
+(or with `t-att-style` and `t-att-class`). This does no longer work, as they are
+now considered normal props.
+
+Rationale: with the move to fragments, the semantics of where the style/class
+attribute should be set is unclear. Also, it is actually very hard to implement
+properly, in particular with higher order components. And another issue is that
+it (slightly) breaks the encapsulation of behaviour from the `Child` component
+perspective.
+
+Migration: each component that wishes to be customized should explicitely add
+the `class` and `style` attributes in its template. Also, the parent component
+should be aware that since we are talking about props, it should be a javascript expression:
+
+In parent:
+
+```xml
+<Child class="'o_my_god'"/>
+```
+and in child:
+
+```xml
+    <div t-att-class="props.class">
+        ...
+    </div>
+```
+
+### 11. components can no longer be mounted with position=self
+
+Rationale: this is due to the implementation of owl 2 virtual dom. The hack
+necessary to support position=self does not work. This position also is not
+compatible with the fact that a component can have a root `<div>` then later,
+change it to something else, or even a text node.
+
+Migration: no real way to do the same. Owl application needs to be appended or
+prepended in something, maybe a `div`. Remember that you the root component
+can have multiple roots
+
+Documentation:
+- [Fragments](doc/reference/templates.md#fragments)
+- [Mounting a component](doc/reference/app.md#mount-helper)
+
+
+### 13. Portal does no longer transfer DOM events
+
+In Owl 1, a Portal component would listen to events emitted on its portalled
+child, and redispatch them on itself. It no longer works.
+
+Rationale: Portal now supports an arbitrary content (so, more than one child,
+and potentially no html element), so it is already unclear what it should listen
+to. Also, redispatching events was an hack. And this changes allows the portal
+to render itself as a text node, which is nice. This is also in line with the
+fact that modern Owl moves toward using callback instead of `t-on` for communication.
+
+Migration: use callback if possible to communicate. Otherwise, use a sub env.
+
+### 14. Portal does render as an empty text node instead of `<portal/>`
+
+That is pretty nice. No real migration needed.
+
+### 15. Context is removed
+
+Context was an abstraction in Owl that was used to define some reactive state
+and to let some components subscribe to it, then only them would be rerendered
+if the context was updated. This has been removed.
+
+Rationale: first, the Context api and code was kind of awkward, which is a sign
+that the abstraction is not well thought. But the good news is that it is actually
+completely replaced by the new reactivity system, which is even more powerful,
+since it can tracks changes key by key.
+
+Migration: replace all uses of Context with the new reactivity system.
+
+```js
+// somewhere, maybe in a service, or in the global env
+const context = observe({some: "state"})
+
+// in a component that would previously get a reference to the context:
+
+setup() {
+    this.context = useState(context);
+    // now the component is subscribed to the context and will react to any
+    // change for any key read by the component, and only those changes
+}
+```
+
+### 16. `env` is now totally empty
+
+In Owl 1, the `env` object had to contain a QWeb instance. This was the way
+components would get a reference to their template function. It no longer works
+that way: the `env` object is now totally empty (from the perspective of Owl).
+It is now a user space concept, useful for the application.
+
+Rationale: first, there is no longer a QWeb class. Also, this changes simplifies
+the way components works internally.
+
+Migration: there is no proper way to get an equivalent. The closest is to get
+a reference to the root App using `this.__owl__.app`. If you need to do this,
+let us know. If this is a legitimate usecase, we may add a `useApp` hook.
+
+Documentation: [Environment](doc/reference/environment.md)
+
+### 17. `t-component` no longer accepts strings
+
+In owl 1, we could write this:
+
+```xml
+<t t-component="Coucou"/>
+```
+
+This meant that Owl would look for the component class like this: `components["Coucou"]`,
+so, essentially equivalent to `<Coucou/>`. In Owl 2, the `t-component` directive
+is assumed to be an expression evaluating to a component class:
+
+```js
+class Parent extends Component {
+  static template = xml`<t t-component="Child"/>`;
+  Child = Child;
+}
+```
+
+Rationale: it simply seems more consistent with the way directive works. Also,
+the implementation is slightly simpler.
+
+Migration: simply using `constructor.components.Coucou` instead of `Coucou` will
+do the trick.
+
+Documentation: [Component](doc/reference/component.md#dynamic-sub-components)
+
+### 18. most exports are exported at top level
+
+Most exports are flattened: for ex, `onMounted` is in owl, not in `owl.hooks`.
+
+Rationale: this makes it easier to work with, instead of importing stuff from 
+`owl`, then `owl.hooks` and `owl.tags` for example.
+
+Migration: all import code simply need to be slightly adapted.
+
+### 19. Properties are no longer set as attributes
+
+Formerly, html properties `<input type="checkbox" t-att-checked="blah"/>` were
+set as property and as attribute, so, they would be visible in the DOM:
+`<input type="checkbox" checked="blah"/>`. Now, they are treated as property only:
+`<input type="checkbox"/>`.
+
+Rationale: this is actually simple to do, is faster, and makes more sense to me.
+
+### 20. `t-foreach` should always have a corresponding `t-key`
+
+It was possible in Owl 1 to write a `t-foreach` without a `t-key`. In that case,
+the index was used as key.  Since it was clearly a possible bug, Owl 1 had a
+warning in some cases, when it could detect that there was definitely not a `t-key`.
+However, this was imperfect, and in some cases no warning was displayed. In Owl 2,
+the tag with a `t-foreach` has to have a corresponding `t-key`.
+
+Rationale: this makes it easier to avoid bugs.
+
+Migration: simply move the `t-key` to the tag with the `t-foreach`. If this is
+a situation where there is really not a need for a `t-key`, you can still add
+it with the `_index` suffix:
+
+```xml
+<div t-foreach="items" t-as="item" t-key="item_index">
+  ...
+</div>
+```
+
+### 21. `EventBus` api changed: it is now an `EventTarget`
+
+In Owl 1, the `EventBus` class was done manually, with a custom API. In Owl 2,
+it simply extends `EventTarget` (the native Dom class), so its implementation
+is basically only 5 lines long. This means that it has now the usual DOM interface:
+
+```js
+bus.addEventListener('event-name', callback);
+```
+
+Rationale: it makes it easier to have just one interface to remember, it makes
+the code simpler
+
+Migration: most bus methods need to be adapted. So, `bus.on("event-type", owner, (info) => {...})` has to be
+rewritten like this: `bus.addEventListener("event-type", (({detail: info}) => {...}).bind(owner))`.
+
+Do not forget to similarly replace `bus.off(...)` by `bus.removeEventListener(...)`
+
+Documentation: [EventBus](doc/reference/utils.md#eventbus)
+
+### 22. `Store` is removed
+
+The Store system had been abandoned in owl 2.
+
+Rationale: first, it was complicated to maintain. Second, it was not really
+used in Odoo. Finally, the new reactivity system seems to be a pretty good basis
+to write a store, and it should not take much work. Also, this can be done in
+user space (so, not necessarily at the framework level). Another point is that
+the store API was invented before the hooks, then was still a little awkward.
+
+Migration:
+- rewrite the code not to use a store
+- probably use the reactivity system instead and build a store class and a few
+  hooks on top of it.
+
+### 23. `Router` is removed
+
+Rationale: Router was not used that much, and it felt like it did not fit in Owl 2.
+Its API needs to be reworked, and we are not confident that it is a good
+experience to use it. Also, it can be done in userspace (it does not need specific
+integration at the framework level)
+
+Migration: reimport all missing piece from the code in Owl 1.
+
+### 24. transition system is removed
+
+Rationale: this was a high ratio cost/value, with a lot of potential for bugs.
+We feel like there should be a way to reimplement in userspace the simple cases.
+
+Maybe something like: add a `t-ref` in the template, and define a hook `useFadeOut`
+that takes the ref, and add a fadeout class at initial render, then in mounted,
+wait for a micro tick and remove it.
+
+Migration: try to reimplement it manually. 
+
+### 25. no more global components or templates
+
+It was possible in Owl 1 to register globally a component or a template. This is
+no longer the case in Owl 2.
+
+Rationale: first, this was a tradeoff: ease of use was gained, but at the cost
+of a higher complexity. Users had to know that there was a magic mechanism. Also,
+it was not used much in practice, and the cost of having to import manually components
+is low.  Finally, this can be mostly done in user space (for example, by subclassing
+`Component`).
+
+Migration: import manually all required global components, or find a way to organize
+the code to do it.
+
+### 26. `AsyncRoot` utility component is removed
+
+Rationale: it was difficult to understand, never used, and not really useful.
+It seems better to control the asynchrony of an application by simply controlling
+how/when the state is updated, and how each component is loading/updating itself.
+
+Migration: remove the `AsyncRoot` component, then possibly, reorganize the code
+to fetch data in a higher order component, and using a `t-if/t-else` to display
+either a fallback when the data is not ready, or the actual component with data
+as props.  If there is no escape, and `AsyncRoot` is needed, please reach out to
+us so we can study this usecase.
+
+### 27. `useChildSubEnv` (only applies to child components)
+
+In Owl, a call to `useSubEnv` would define a new environment for the children
+AND the component. It is very useful, but in some cases, one only need to update
+the children component environment. This can now be done with a new hook:
+[`useChildSubEnv`](doc/reference/hooks.md#usesubenv-and-usechildsubenv)
+
+### 28. `env` is now frozen
+
+In Owl 2, the `env` object is frozen. It can no longer be modified (structurally)
+arbitrarily. 
+
+Rationale: it seems like the `env` object purpose is to have a global channel of
+communication between components. It is however scary if anyone can add something
+to it.  The usual use case is to add something to the environment for some child
+components. This use case still works with `useSubEnv`.
+
+Migration: use `useSubEnv` instead of writing directly to the env.  Also, note
+that the environment given to the App can initially contain anything.
+
+Documentation: [Environment](doc/reference/environment.md)
+
+### 29. `t-ref` does not work on component
+
+Before, `t-ref` could be used to get a reference to a child component. It no
+longer works.
+
+Rationale: the possibility of having a ref to a child component breaks the
+encapsulation provided by Owl components: a child component now has a private
+and a public interface.  Another issue is that it may be unclear when the ref
+should be set: is the component active on setup, or on mounted? Also, it is
+kind of awkward to implement.
+
+Migration: the `env` and `props` should provide a communication channel wide enough:
+the sub component can expose its public API by calling a callback at the proper
+timing, or by triggering an event.
+
+### 30. `t-on` does not accept expressions, only functions
+
+In Owl 1, it was possible to define simple expressions inline, in a template:
+
+```xml
+<button t-on-click="state.value = state.value + 1">blabla</button>
+<button t-on-click="someFunction(someVar)">blabla</button>
+```
+
+This does not work anymore. Now, the `t-on` directive assumes that what it get is
+a function.
+
+Rationale: the fact that owl 1 had to support expressions meant that it was not
+possible to properly inject the event in general. With this restriction, Owl 2
+can support more general use cases. Also, the examples above can simply be
+wrapped in a lambda function. 
+
+Migration: use lambda functions. For example, the two examples above can be
+adapted like this:
+
+```xml
+<button t-on-click="() => state.value = state.value + 1">blabla</button>
+<button t-on-click="() => this.someFunction(someVar)">blabla</button>
+```
+
+Documentation: [Event Handling](doc/reference/event_handling.md)
+
+### 31. components can now have arbitrary content
+
+Before Owl 2, components had to limit themselves to one single htmlelement as
+root. Now, the content is arbitrary: it can be empty, or multiple html elements.
+So, the following template works for components:
+
+```xml
+  <div>1</div>
+  <div>2</div>
+  hello
+```
+
+Documentation: [Fragments](doc/reference/templates.md#fragments)
+
+### 32. `renderToString` on QWeb has been removed
+
+Rationale: the `renderToString` function was a qweb method, which made sense because
+the qweb instance knew all templates. But now, the closest analogy is the `App`
+class, but it is not as convenient, since the `app` instance is no longer visible
+to components (while before, `qweb` was in the environment).
+
+Also, this can easily be done in userspace, by mounting a component in a div.  For example:
+
+```js
+export async function renderToString(template, context) {
+  class C extends Component {
+    static template = template;
+    setup () {
+        Object.assign(this, context);
+    }
+  }
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const app = new App(C);
+  await app.mount(div);
+  const result = div.innerHTML;
+  app.destroy();
+  div.remove();
+  return result;
+}
+```
+
+The function above works for most cases, but is asynchronous.  An alternative
+function could look like this:
+
+```js
+const { App, blockDom } = owl;
+const app = new App(Component); // act as a template repository
+
+function renderToString(template, context = {}) {
+  app.addTemplate(template, template, { allowDuplicate: true });
+  const templateFn = app.getTemplate(template);
+  const bdom = templateFn(context, {});
+  const div = document.createElement('div')
+  blockDom.mount(bdom, div);
+  return div.innerHTML;
+}
+```
+
+This is a synchronous function, so it will not work with components, but it should
+be useful for most simple templates.
+
+Also note that these two examples do not translate their templates. To do that,
+they need to be modified to pass the proper translate function to the `App`
+configuration.
+
+### 33. Portal are now defined with `t-portal`
+
+Before Owl 2, one could use the `Portal` component by importing it and using it.
+Now, it is no longer available. Instead, we can simply use the `t-portal` directive:
+
+```xml
+<div>
+  some content
+  <span t-portal="'body'">
+    portalled content
+  </span>
+<div>
+```
+
+Rationale: it makes it slightly simpler to use (just need the directive, instead
+of having to import and use a sub component), it makes the implementation slightly
+simpler as well. Also, it prevents subclassing the Portal component, which could
+be dangerous, since it is really doing weird stuff under the hood, and could
+easily be broken inadvertendly.
+
+### 34. `debounce` utility function has been removed
+
+Rationale: it did not really help that much, is available as utility function
+elsewhere, so, we decided to have a smaller footprint by focusing Owl on what
+it does best.
+
+### 35. `render` method does not return a promise anymore
+
+Rationale: using the `render` method directly and waiting for it to complete
+was slightly un-declarative. Also, it can be done using the lifecycle hooks
+any way.
+
+Migration: if necessary, one can use the lifecycle hooks to execute code after
+the next mounted/patched operation.
+
+### 36. `catchError` method is replaced by `onError` hook
+
+The `catchError` method was used to provide a way to components to handle errors
+occurring during the component lifecycle. This has been replaced by a `onError`
+hook, with a similar API.
+
+Rationale: `catchError` felt a little big awkward, when most of the way we
+interact with componentss is via hooks.  Using hooks felt more natural and
+consistent.
+
+Migration: mostly replace all `catchError` methods by `onError` hooks in the
+`setup` method.
+
+Documentation: [Error Handling](doc/reference/error_handling.md)
+
+
+## 37. Support for inline css (`css` tag and static `style`) has been removed
+
+Rationale: Owl tries to focus on what it does best, and supporting inline css
+was not a priority.  It used to support some simplified scss language, but it
+was feared that it would cause more trouble than it was worth. Also, it seems
+like it can be done in userspace.
+
+Migration: it seems possible to implement an equivalent solution using hooks. A
+simple implementation could look like this:
+
+```js
+let cache = {};
+
+function useStyle(css) {
+  if (!css in cache) {
+    const sheet = document.createElement("style");
+    sheet.innerHTML = css;
+    cache[css] = sheet;
+    document.head.appendChild(sheet);
+  }
+}
+```
+
+## 38. `t-raw` directive has been removed (replaced by `t-out`)
+
+To match the Odoo qweb server implementation, Owl does no longer implement `t-raw`.
+It is replaced by the `t-out` directive, which is safer: it requires the data
+to be marked explicitely as markup if it is to be inserted without escaping.
+Otherwise, it will be escaped (just like `t-esc`).
+
+Migration: replace all `t-raw` uses by `t-out`, and uses the `markup` function
+to mark all the js values.
+
+Documentation: [Outputting data](doc/reference/templates.md#outputting-data)
+
+## 39. `browser` object has been removed
+
+Rationale: the `browser` object caused more trouble than it was worth. Also, it
+seems like this should be done in user space, not at the framework level.  
+
+Migration: code should just be adapted to either use another browser object,
+or to use native browser function (and then, just mock them directly).
+
+## 40. Rendering a component does not necessarily render child components
+
+Before, if one had the following component tree:
+
+```mermaid
+  graph TD;
+      A-->B;
+      A-->C;
+```
+
+when `A` would render, it would also render `B` and `C`. Now, in Owl 2, it will 
+(shallow) compare the before and after props, and `B` or `C` will only be rerendered
+if their props have changed.
+
+Now, the question is what happens if the props have changed, but in a deeper way?
+In that case, Owl will know, because each props are now reactive. So, if some
+inner value read by `B` was changed, then only `B` will be updated.
+
+Rationale: This was just not possible in Owl 1, but it now possible. This is
+due to the rewriteof the underlying rendering engine and the reactivity
+system. The goal is to have a big performance boost in large screen with many
+components: now Owl only rerender what is strictly useful.
+

COPYRIGHT

@@ -0,0 +1,14 @@
+
+Most of the files are
+
+  Copyright (c) 2004-2015 Odoo S.A.
+
+Many files also contain contributions from third
+parties. In this case the original copyright of
+the contributions can be traced through the
+history of the source version control system.
+
+When that is not the case, the files contain a prominent
+notice stating the original copyright and applicable
+license, or come with their own dedicated COPYRIGHT
+and/or LICENSE file.

LICENSE

@@ -1,12 +1,9 @@
-
-For copyright information, please see the COPYRIGHT file.
-
-Odoo is published under the GNU LESSER GENERAL PUBLIC LICENSE, Version 3
+OWL is published under the GNU LESSER GENERAL PUBLIC LICENSE, Version 3
 (LGPLv3), as included below. Since the LGPL is a set of additional
 permissions on top of the GPL, the text of the GPL is included at the
 bottom as well.
 
-Some external libraries and contributions bundled with Odoo may be published
+Some external libraries and contributions bundled with OWL may be published
 under other GPL-compatible licenses. For these, please refer to the relevant
 source files and/or license files, in the source code tree.
 

README.md

@@ -1,130 +1,128 @@
-# 🦉 Odoo Web Lab 🦉
+<h1 align="center">🦉 <a href="https://odoo.github.io/owl/">Owl Framework</a> 🦉</h1>
+
+ [![License: LGPL v3](https://img.shields.io/badge/License-LGPL%20v3-blue.svg)](https://www.gnu.org/licenses/lgpl-3.0)
+[![npm version](https://badge.fury.io/js/@odoo%2Fowl.svg)](https://badge.fury.io/js/@odoo%2Fowl)
+[![Downloads](https://img.shields.io/npm/dm/@odoo%2Fowl.svg)](https://www.npmjs.com/package/@odoo/owl)
+
+_Class based components with hooks, reactive state and concurrent mode_
+
+**Try it online!** you can experiment with the Owl framework in an online [playground](https://odoo.github.io/owl/playground).
 
 ## Project Overview
 
-Odoo Web Lab (OWL) is a project to collect some useful, reusable, (hopefully)
-well designed building blocks for building web applications. However, since this is the basis for the Odoo web client, we will not hesitate
-to design the code here to better match the Odoo architecture/design principles.
+The Odoo Web Library (Owl) is a smallish (~<20kb gzipped) UI framework built by
+[Odoo](https://www.odoo.com/) for its products. Owl is a modern
+framework, written in Typescript, taking the best ideas from React and Vue in a
+simple and consistent way. Owl's main features are:
 
-The most important element of this repository is certainly the component system.
-It is designed to be:
+- a declarative component system,
+- a fine grained reactivity system similar to Vue,
+- hooks
+- fragments
+- asynchronous rendering
 
-1. **declarative:** the user interface should be described in term of the state
-   of the application, not as a sequence of imperative steps.
+Owl components are defined with ES6 classes and xml templates, uses an
+underlying virtual DOM, integrates beautifully with hooks, and the rendering is
+asynchronous.
 
-2. **composable:** each widget can seamlessly be created in a parent widget by
-   a simple directive in its template.
+Quick links:
 
-3. **asynchronous rendering:** the framework will transparently wait for each
-   subwidgets to be ready before applying the rendering. It uses native promises
-   under the hood.
+- [documentation](#documentation),
+- [changelog](CHANGELOG.md) (from Owl 1.x to 2.x),
+- [playground](https://odoo.github.io/owl/playground)
 
-4. **uses QWeb as a template system:** the templates are described in XML
-   and follow the QWeb specification. This is a requirement for Odoo.
+## Example
 
-5. **with an imperative escape hatch:** if necessary, sub widgets can easily be
-   manually created/destroyed.
+Here is a short example to illustrate interactive components:
 
-Note: the code is written in typescript. This does not mean that the main web
-client will ever be converted to typescript (even though I would really like it).
+```javascript
+const { Component, useState, mount, xml } = owl;
 
-## Installing/Building
+class Counter extends Component {
+  static template = xml`
+    <button t-on-click="() => state.value = state.value + props.increment">
+      Click Me! [<t t-esc="state.value"/>]
+    </button>`;
 
-To install every dependency needed to play with this code:
+  state = useState({ value: 0 });
+}
 
-```
-npm install
+class Root extends Component {
+  static template = xml`
+    <span>Hello Owl</span>
+    <Counter increment="2"/>`;
+
+  static components = { Counter };
+}
+
+mount(Root, document.body);
 ```
 
-To build a bundle of this as a library:
+Note that the counter component is made reactive with the [`useState` hook](doc/reference/hooks.md#usestate).
+Also, all examples here uses the [`xml` helper](doc/reference/templates.md#inline-templates) to define inline templates.
+But this is not mandatory, many applications will load templates separately.
 
-```
-npm run build
-```
-
-To run tests:
-
-```
-npm run test
-npm run test:watch
-```
-
-Note that the test scripts also run the example tests suites.
+More interesting examples can be found on the
+[playground](https://odoo.github.io/owl/playground) application.
 
 ## Documentation
 
-The complete documentation can be found [here](doc/readme.md). The most important sections are:
+### Learning Owl
 
-- [Quick Start](doc/quick_start.md)
-- [Tutorial](doc/tutorial.md)
-- [Component](doc/component.md)
-- [QWeb](doc/qweb.md)
+Are you new to Owl? This is the place to start!
 
-# Examples
+- [Tutorial: create a TodoList application](doc/learning/tutorial_todoapp.md)
+- [How to start an Owl project](doc/learning/quick_start.md)
+- [How to test Components](doc/learning/how_to_test.md)
+- [How to organize Owl code](doc/miscellaneous/organizing_code.md)
 
-Here is a minimal Hello World example:
+### Reference
 
-```javascript
-class HelloWorld extends owl.core.Component {
-  inlineTemplate = `<div>Hello <t t-esc="state.name"/></div>`;
-}
+- [Overview](doc/readme.md)
+- [App](doc/reference/app.md)
+- [Component](doc/reference/component.md)
+- [Component Lifecycle](doc/reference/component.md#lifecycle)
+- [Concurrency Model](doc/reference/concurrency_model.md)
+- [Dev mode](doc/reference/app.md#dev-mode)
+- [Dynamic sub components](doc/reference/component.md#dynamic-sub-components)
+- [Environment](doc/reference/environment.md)
+- [Error Handling](doc/reference/error_handling.md)
+- [Event Handling](doc/reference/event_handling.md)
+- [Form Input Bindings](doc/reference/input_bindings.md)
+- [Fragments](doc/reference/templates.md#fragments)
+- [Hooks](doc/reference/hooks.md)
+- [Loading Templates](doc/reference/app.md#loading-templates)
+- [Mounting a component](doc/reference/app.md#mount-helper)
+- [Portal](doc/reference/portal.md)
+- [Props](doc/reference/props.md)
+- [Props Validation](doc/reference/props.md#props-validation)
+- [Reactivity](doc/reference/reactivity.md)
+- [Rendering SVG](doc/reference/templates.md#rendering-svg)
+- [Refs](doc/reference/refs.md)
+- [Slots](doc/reference/slots.md)
+- [Sub components](doc/reference/component.md#sub-components)
+- [Sub templates](doc/reference/templates.md#sub-templates)
+- [Templates (Qweb)](doc/reference/templates.md)
+- [Translations](doc/reference/translations.md)
+- [Utils](doc/reference/utils.md)
 
-const env = {
-  qweb: new owl.core.QWeb()
-};
+### Other Topics
 
-const hello = new HelloWorld(env, { name: "World" });
-hello.mount(document.body);
+- [Notes On Owl Architecture](doc/miscellaneous/architecture.md)
+- [Comparison with React/Vue](doc/miscellaneous/comparison.md)
+- [Why did Odoo build Owl?](doc/miscellaneous/why_owl.md)
+- [Changelog (from owl 1.x to 2.x)](CHANGELOG.md)
+- [Notes on compiled templates](doc/miscellaneous/compiled_template.md)
+
+## Installing Owl
+
+Owl is available on `npm` and can be installed with the following command:
+
+```
+npm install @odoo/owl
 ```
 
-The next example show how interactive widgets can be created and how widget
-composition works:
+If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-```javascript
-class Counter extends owl.core.Component {
-  inlineTemplate = `
-    <div>
-      <button t-on-click="increment(-1)">-</button>
-      <span style="font-weight:bold">Value: <t t-esc="state.value"/></span>
-      <button t-on-click="increment(1)">+</button>
-    </div>`;
+- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
 
-  constructor(parent, props) {
-    super(parent, props);
-    this.state = {
-      value: props.initialState || 0
-    };
-  }
-
-  increment(delta) {
-    this.updateState({ value: this.state.value + delta });
-  }
-}
-
-class App extends owl.core.Component {
-  inlineTemplate = `
-    <div>
-        <t t-widget="Counter" t-props="{initialState: 1}"/>
-        <t t-widget="Counter" t-props="{initialState: 42}"/>
-    </div>`;
-
-  widgets = { Counter };
-}
-
-const env = {
-  qweb: new owl.core.QWeb()
-};
-
-const app = new App(env);
-app.mount(document.body);
-```
-
-More interesting examples on how to work with this web framework can be found in the _examples/_ folder:
-
-- [Todo Application](examples/readme.md#todo-app)
-- [Web Client](examples/readme.md#web-client-example)
-- [Benchmarks](examples/readme.md#benchmarks)
-
-## License
-
-React is [GPL licensed](./LICENSE).

doc/component.md

@@ -1,30 +0,0 @@
-# Component
-
-Components are the reusable, composable widgets. They are designed to be low
-level, to be declarative, and with asynchronous rendering.
-
-For example:
-
-```javascript
-export class Counter extends Component {
-  inlineTemplate = `
-    <div t-name="counter">
-      <button t-on-click="increment(-1)">-</button>
-      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-      <button t-on-click="increment(1)">+</button>
-    </div>`;
-
-  state = {
-    counter: 0
-  };
-
-  constructor(parent, props) {
-    super(parent, props);
-    this.state.counter = props.initialState || 0;
-  }
-
-  increment(delta) {
-    this.updateState({ counter: this.state.counter + delta });
-  }
-}
-```

doc/learning/how_to_test.md

@@ -0,0 +1,95 @@
+# 🦉 How to test Components 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Unit Tests](#unit-tests)
+
+## Overview
+
+It is a good practice to test applications and components to ensure that they
+behave as expected. There are many ways to test a user interface: manual
+testing, integration testing, unit testing, ...
+
+In this section, we will discuss how to write unit tests for components.
+
+## Unit Tests
+
+Writing unit tests for Owl components really depends on the testing framework
+used in a project. But usually, it involves the following steps:
+
+- create a test file: for example `SomeComponent.test.js`,
+- in that file, import the code for `SomeComponent`,
+- add a test case:
+  - create a real DOM element to use as test fixture,
+  - create a test environment
+  - create an instance of `SomeComponent`, mount it to the fixture
+  - interact with the component and assert some properties.
+
+To help with this, it is useful to have a `helper.js` file that contains some
+common utility functions:
+
+```js
+let lastFixture = null;
+
+export function makeTestFixture() {
+  let fixture = document.createElement("div");
+  document.body.appendChild(fixture);
+  if (lastFixture) {
+    lastFixture.remove();
+  }
+  lastFixture = fixture;
+  return fixture;
+}
+
+export async function nextTick() {
+  await new Promise((resolve) => setTimeout(resolve));
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+}
+```
+
+With such a file, a typical test suite for Jest will look like this:
+
+```js
+// in SomeComponent.test.js
+import { SomeComponent } from "../../src/ui/SomeComponent";
+import { nextTick, makeTestFixture } from '../helpers';
+
+
+//------------------------------------------------------------------------------
+// Setup
+//------------------------------------------------------------------------------
+let fixture: HTMLElement;
+let env: Env;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+describe("SomeComponent", () => {
+  test("component behaves as expected", async () => {
+    const props = {...}; // depends on the component
+    const comp = await mount(SomeComponent, fixture, { props });
+
+    // do some assertions
+    expect(...).toBe(...);
+
+    fixture.querySelector('button').click();
+    await nextTick();
+
+    // some other assertions
+    expect(...).toBe(...);
+  });
+});
+```
+
+Note that Owl does wait for the next animation frame to actually update the DOM.
+This is why it is necessary to wait with the `nextTick` (or other methods) to
+make sure that the DOM is up-to-date.

doc/learning/quick_start.md

@@ -0,0 +1,399 @@
+# 🦉 How to start an Owl project 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Simple html file](#simple-html-file)
+- [With a static server](#with-a-static-server)
+- [Standard Javascript project](#standard-javascript-project)
+
+## Overview
+
+Each software project has its specific needs. Many of these needs can be solved
+with some tooling: `webpack`, `gulp`, css preprocessor, bundlers, transpilers, ...
+
+Because of that, it is usually not simple to just start a project. Some
+frameworks provide their own tooling to help with that. But then, you have to
+integrate and learn how these applications work.
+
+Owl is designed to be used with no tooling at all. Because of that, Owl can
+"easily" be integrated in a modern build toolchain. In this section, we will
+discuss a few different setups to start a project. Each of these setups has
+advantages and disadvantages in different situations.
+
+## Simple html file
+
+The simplest possible setup is the following: a simple javascript file with your
+code. To do that, let us create the following file structure:
+
+```
+hello_owl/
+  index.html
+  owl.js
+  app.js
+```
+
+The file `owl.js` can be downloaded from the last release published at
+[https://github.com/odoo/owl/releases](https://github.com/odoo/owl/releases). It
+is a single javascript file which export all Owl into the global `owl` object.
+Note that there are multiple files, and in this case, we need one of the two
+files suffixed with `.iife`: they are built to be directly used in a browser.
+
+Now, `index.html` should contain the following:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Hello Owl</title>
+    <script src="owl.js"></script>
+  </head>
+  <body>
+    <script src="app.js"></script>
+  </body>
+</html>
+```
+
+And `app.js` should look like this:
+
+```js
+const { Component, mount, xml } = owl;
+
+// Owl Components
+class Root extends Component {
+  static template = xml`<div>Hello Owl</div>`;
+}
+
+mount(Root, document.body);
+```
+
+Now, simply loading this html file in a browser should display a welcome message.
+This setup is not fancy, but it is extremely simple. There are no tooling at
+all required. It can be slightly optimized by using the minified build of Owl.
+
+## With a static server
+
+The previous setup has a big disadvantage: the application code is located in a
+single file. Obviously, we could split it in several files and add multiple
+`<script>` tags in the html page, but then we need to make sure the script are
+inserted in the proper order, we need to export each file content in global
+variables and we lose autocompletion across files.
+
+There is a low tech solution to this issue: using native javascript modules.
+This however has a requirement: for security reasons, browsers will not accept
+modules on content served through the `file` protocol. This means that we need
+to use a static server.
+
+Let us start a new project with the following file structure:
+
+```
+hello_owl/
+  src/
+    index.html
+    main.js
+    owl.js
+    root.js
+```
+
+As previously, the file `owl.js` can be downloaded from the last release published at
+[https://github.com/odoo/owl/releases](https://github.com/odoo/owl/releases).
+Note that there are multiple files, and in this case, we need one of the two
+files suffixed with `.iife`: they are built to be directly used in a browser.
+
+Now, `index.html` should contain the following:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Hello Owl</title>
+    <script src="owl.js"></script>
+  </head>
+  <body>
+    <script src="main.js" type="module"></script>
+  </body>
+</html>
+```
+
+Not that the `main.js` script tag has the `type="module"` attribute. This means
+that the browser will parse the script as a module, and load all its dependencies.
+
+Here is the content of `root.js` and `main.js`:
+
+```js
+// root.js ----------------------------------------------------------------------
+const { Component, mount, xml } = owl;
+
+export class Root extends Component {
+  static template = xml`<div>Hello Owl</div>`;
+}
+
+// main.js ---------------------------------------------------------------------
+import { Root } from "./root.js";
+
+mount(Root, document.body);
+```
+
+The `main.js` file imports the `root.js` file. Note that the import statement has
+a `.js` suffix, which is important. Most text editor can understand this syntax
+and will provide autocompletion.
+
+Now, to execute this code, we need to serve the `src` folder statically. A low
+tech way to do that is to use for example the python `SimpleHTTPServer` feature:
+
+```
+$ cd src
+$ python -m SimpleHTTPServer 8022    # now content is available at localhost:8022
+```
+
+Another more "javascripty" way to do it is to create a `npm` application. To do
+that, we can add the following `package.json` file at the root of the project:
+
+```json
+{
+  "name": "hello_owl",
+  "version": "0.1.0",
+  "description": "Starting Owl app",
+  "main": "src/index.html",
+  "scripts": {
+    "serve": "serve src"
+  },
+  "author": "John",
+  "license": "ISC",
+  "devDependencies": {
+    "serve": "^11.3.0"
+  }
+}
+```
+
+We can now install the `serve` tool with the command `npm install`, and then,
+start a static server with the simple `npm run serve` command.
+
+## Standard Javascript project
+
+The previous setup works, and is certainly good for some usecases, including
+quick prototyping. However, it lacks some useful features, such as livereload,
+a test suite, or bundling the code in a single file.
+
+Each of these features, and many others, can be done in many different ways.
+Since it is really not trivial to configure such a project, we provide here an
+example that can be used as a starting point.
+
+Our standard Owl project has the following file structure:
+
+```
+hello_owl/
+  public/
+    index.html
+  src/
+    components/
+      Root.js
+    main.js
+  tests/
+    components/
+      Root.test.js
+    helpers.js
+  .gitignore
+  package.json
+  webpack.config.js
+```
+
+This project as a `public` folder, meant to contain all static assets, such as
+images and styles. The `src` folder has the javascript source code, and finally,
+`tests` contains the test suite.
+
+Here is the content of `index.html`:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Hello Owl</title>
+  </head>
+  <body></body>
+</html>
+```
+
+Note that there are no `<script>` tag here. They will be injected by webpack.
+Now, let's have a look at the javascript files:
+
+```js
+// src/components/Root.js -------------------------------------------------------
+import { Component, xml, useState } from "@odoo/owl";
+
+export class Root extends Component {
+  static template = xml`
+    <div t-on-click="update">
+      Hello <t t-esc="state.text"/>
+    </div>`;
+
+  state = useState({ text: "Owl" });
+  update() {
+    this.state.text = this.state.text === "Owl" ? "World" : "Owl";
+  }
+}
+
+// src/main.js -----------------------------------------------------------------
+import { utils, mount } from "@odoo/owl";
+import { Root } from "./components/Root";
+
+mount(Root, document.body);
+
+// tests/components/Root.test.js ------------------------------------------------
+import { Root } from "../../src/components/Root";
+import { makeTestFixture, nextTick, click } from "../helpers";
+import { mount } from "@odoo/owl";
+
+let fixture;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("Root", () => {
+  test("Works as expected...", async () => {
+    await mount(Root, fixture);
+    expect(fixture.innerHTML).toBe("<div>Hello Owl</div>");
+
+    click(fixture, "div");
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div>Hello World</div>");
+  });
+});
+
+// tests/helpers.js ------------------------------------------------------------
+import { Component } from "@odoo/owl";
+import "regenerator-runtime/runtime";
+
+export async function nextTick() {
+  await new Promise((resolve) => setTimeout(resolve));
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+export function makeTestFixture() {
+  let fixture = document.createElement("div");
+  document.body.appendChild(fixture);
+  return fixture;
+}
+
+export function click(elem, selector) {
+  elem.querySelector(selector).dispatchEvent(new Event("click"));
+}
+```
+
+Finally, here is the configuration files `.gitignore`, `package.json` and
+`webpack.config.js`:
+
+```
+node_modules/
+package-lock.json
+dist/
+```
+
+```json
+{
+  "name": "hello_owl",
+  "version": "0.1.0",
+  "description": "Demo app",
+  "main": "src/index.html",
+  "scripts": {
+    "test": "jest",
+    "build": "webpack --mode production",
+    "dev": "webpack-dev-server --mode development"
+  },
+  "author": "Someone",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "babel-jest": "^25.1.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^25.1.0",
+    "regenerator-runtime": "^0.13.3",
+    "serve": "^11.3.0",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.2"
+  },
+  "dependencies": {
+    "@odoo/owl": "^1.0.4"
+  },
+  "babel": {
+    "plugins": ["@babel/plugin-proposal-class-properties"],
+    "env": {
+      "test": {
+        "plugins": ["transform-es2015-modules-commonjs"]
+      }
+    }
+  },
+  "jest": {
+    "verbose": false,
+    "testRegex": "(/tests/.*(test|spec))\\.js?$",
+    "moduleFileExtensions": ["js"],
+    "transform": {
+      "^.+\\.[t|j]sx?$": "babel-jest"
+    }
+  }
+}
+```
+
+```js
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const host = process.env.HOST || "localhost";
+
+module.exports = function (env, argv) {
+  const mode = argv.mode || "development";
+  return {
+    mode: mode,
+    entry: "./src/main.js",
+    output: {
+      filename: "main.js",
+      path: path.resolve(__dirname, "dist"),
+    },
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          loader: "babel-loader",
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    resolve: {
+      extensions: [".js", ".jsx"],
+    },
+    devServer: {
+      contentBase: path.resolve(__dirname, "public/index.html"),
+      compress: true,
+      hot: true,
+      host,
+      port: 3000,
+      publicPath: "/",
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: path.resolve(__dirname, "public/index.html"),
+      }),
+    ],
+  };
+};
+```
+
+With this setup, we can now use the following script commands:
+
+```
+npm run build # build the full application in prod mode in dist/
+
+npm run dev # start a dev server with livereload
+
+npm run test # run the jest test suite
+```

doc/learning/tutorial_todoapp.md

@@ -0,0 +1,992 @@
+# 🦉 OWL Tutorial: TodoApp 🦉
+
+For this tutorial, we will build a very simple Todo list application. The app
+should satisfy the following requirements:
+
+- let the user create and remove tasks
+- tasks can be marked as completed
+- tasks can be filtered to display active/completed tasks
+
+This project will be an opportunity to discover and learn some important Owl
+concepts, such as components, store, and how to organize an application.
+
+## Content
+
+1. [Setting up the project](#1-setting-up-the-project)
+2. [Adding a first component](#2-adding-a-first-component)
+3. [Displaying a list of tasks](#3-displaying-a-list-of-tasks)
+4. [Layout: some basic css](#4-layout-some-basic-css)
+5. [Extracting Task as a subcomponent](#5-extracting-task-as-a-subcomponent)
+6. [Adding tasks (part 1)](#6-adding-tasks-part-1)
+7. [Adding tasks (part 2)](#7-adding-tasks-part-2)
+8. [Toggling tasks](#8-toggling-tasks)
+9. [Deleting tasks](#9-deleting-tasks)
+10. [Using a store](#10-using-a-store)
+11. [Saving tasks in local storage](#11-saving-tasks-in-local-storage)
+12. [Filtering tasks](#12-filtering-tasks)
+13. [The Final Touch](#13-the-final-touch)
+14. [Final Code](#final-code)
+
+## 1. Setting up the project
+
+For this tutorial, we will do a very simple project, with static files and
+no additional tooling. The first step is to create the following file structure:
+
+```
+todoapp/
+    index.html
+    app.css
+    app.js
+    owl.js
+```
+
+The entry point for this application is the file `index.html`, which should have
+the following content:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>OWL Todo App</title>
+    <link rel="stylesheet" href="app.css" />
+  </head>
+  <body>
+    <script src="owl.js"></script>
+    <script src="app.js"></script>
+  </body>
+</html>
+```
+
+Then, `app.css` can be left empty for now. It will be useful later on to style
+our application. `app.js` is where we will write all our code. For now, let's
+just put the following code:
+
+```js
+(function () {
+  console.log("hello owl", owl.__info__.version);
+})();
+```
+
+Note that we put everything inside an immediately executed function to avoid leaking
+anything to the global scope.
+
+Finally, `owl.js` should be the last version downloaded from the Owl repository (you can use `owl.min.js` if you prefer). Be aware that you should download the `owl.iife.js` or `owl.iife.min.js`, because these files
+are built to run directly on the browser, and rename it `owl.js` (other files such as `owl.cjs.js` are
+built to be bundled by other tools).
+
+Now, the project should be ready. Loading the `index.html` file into a browser
+should show an empty page, with the title `Owl Todo App`, and it should log a
+message such as `hello owl 2.x.y` in the console.
+
+## 2. Adding a first component
+
+An Owl application is made out of [components](../reference/component.md), with
+a single root component. Let us start by defining a `Root` component. Replace the
+content of the function in `app.js` by the following code:
+
+```js
+const { Component, mount, xml } = owl;
+
+// Owl Components
+class Root extends Component {
+  static template = xml`<div>todo app</div>`;
+}
+
+mount(Root, document.body);
+```
+
+Now, reloading the page in a browser should display a message.
+
+The code is pretty simple: we define a component with an inline template, then
+mount it in the document body.
+
+Note 1: in a larger project, we would split the code in multiple files, with
+components in a sub folder, and a main file that would initialize the application.
+However, this is a very small project, and we want to keep it as simple as possible.
+
+Note 2: this tutorial uses the static class field syntax. This is not yet
+supported by all browsers. Most real projects will transpile their code, so this
+is not a problem, but for this tutorial, if you need the code to work on every
+browser, you will need to translate each `static` keyword to an assignation to
+the class:
+
+```js
+class App extends Component {}
+App.template = xml`<div>todo app</div>`;
+```
+
+Note 3: writing inline templates with the [`xml` helper](../reference/templates.md#inline-templates)
+is nice, but there is no syntax highlighting, and this makes it very easy to
+have malformed xml. Some editors support syntax highlighting for this situation.
+For example, VS Code has an addon `Comment tagged template`, which, if installed,
+will properly display tagged templates:
+
+```js
+    static template = xml /* xml */`<div>todo app</div>`;
+```
+
+Note 4: Large applications will probably want to be able to translate templates.
+Using inline templates makes it slightly harder, since we need additional tooling
+to extract the xml from the code, and to replace it with the translated values.
+
+## 3. Displaying a list of tasks
+
+Now that the basics are done, it is time to start thinking about tasks. To
+accomplish what we need, we will keep track of the tasks as an array of objects
+with the following keys:
+
+- `id`: a number. It is extremely useful to have a way to uniquely identify
+  tasks. Since the title is something created/edited by the user, it offers
+  no guarantee that it is unique. So, we will generate a unique `id` number for
+  each task.
+- `text`: a string, to explain what the task is about.
+- `isCompleted`: a boolean, to keep track of the status of the task
+
+Now that we decided on the internal format of the state, let us add some demo
+data and a template to the `App` component:
+
+```js
+class Root extends Component {
+  static template = xml/* xml */ `
+    <div class="task-list">
+        <t t-foreach="tasks" t-as="task" t-key="task.id">
+            <div class="task">
+                <input type="checkbox" t-att-checked="task.isCompleted"/>
+                <span><t t-esc="task.text"/></span>
+            </div>
+        </t>
+    </div>`;
+
+  tasks = [
+    {
+      id: 1,
+      text: "buy milk",
+      isCompleted: true,
+    },
+    {
+      id: 2,
+      text: "clean house",
+      isCompleted: false,
+    },
+  ];
+}
+```
+
+The template contains a [`t-foreach`](../reference/templates.md#loops) loop to iterate
+through the tasks. It can find the `tasks` list from the component, since the
+component is the rendering context. Note that we use the `id` of each task as a
+`t-key`, which is very common. There are two css classes: `task-list` and `task`,
+that we will use in the next section.
+
+Finally, notice the use of the `t-att-checked` attribute:
+prefixing an attribute by [`t-att`](../reference/templates.md#dynamic-attributes) makes
+it dynamic. Owl will evaluate the expression and set it as the value of the
+attribute.
+
+## 4. Layout: some basic css
+
+So far, our task list looks quite bad. Let us add the following to `app.css`:
+
+```css
+.task-list {
+  width: 300px;
+  margin: 50px auto;
+  background: aliceblue;
+  padding: 10px;
+}
+
+.task {
+  font-size: 18px;
+  color: #111111;
+}
+```
+
+This is better. Now, let us add an extra feature: completed tasks should be
+styled a little differently, to make it clearer that they are not as important.
+To do that, we will add a dynamic css class on each task:
+
+```xml
+    <div class="task" t-att-class="task.isCompleted ? 'done' : ''">
+```
+
+```css
+.task.done {
+  opacity: 0.7;
+}
+```
+
+Notice that we have here another use of a dynamic attribute.
+
+## 5. Extracting Task as a subcomponent
+
+It is now clear that there should be a `Task` component to encapsulate the look
+and behavior of a task.
+
+This `Task` component will display a task, but it cannot _own_ the state of the
+task: a piece of data should only have one owner. Doing otherwise is asking for
+trouble. So, the `Task` component will get its data as a `prop`. This means that
+the data is still owned by the `App` component, but can be used by the `Task`
+component (without modifying it).
+
+Since we are moving code around, it is a good opportunity to refactor the code
+a little bit:
+
+```js
+// -------------------------------------------------------------------------
+// Task Component
+// -------------------------------------------------------------------------
+class Task extends Component {
+  static template = xml /* xml */`
+    <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
+      <input type="checkbox" t-att-checked="props.task.isCompleted"/>
+      <span><t t-esc="props.task.title"/></span>
+    </div>`;
+  static props = ["task"];
+}
+
+// -------------------------------------------------------------------------
+// Root Component
+// -------------------------------------------------------------------------
+class Root extends Component {
+  static template = xml /* xml */`
+    <div class="task-list">
+      <t t-foreach="tasks" t-as="task" t-key="task.id">
+        <Task task="task"/>
+      </t>
+    </div>`;
+    static components = { Task };
+
+    tasks = [
+        ...
+    ];
+}
+
+// -------------------------------------------------------------------------
+// Setup
+// -------------------------------------------------------------------------
+mount(Root, document.body, {dev: true});
+```
+
+A lot of stuff happened here:
+
+- first, we have now a sub component `Task`, defined on top of the file,
+- whenever we define a sub component, it needs to be added to the static
+  [`components`](../reference/component.md#static-properties)
+  key of its parent, so Owl can get a reference to it,
+- the `Task` component has a `props` key: this is only useful for validation
+  purpose. It says that each `Task` should be given exactly one prop, named
+  `task`. If this is not the case, Owl will throw an
+  [error](../reference/props.md#props-validation). This is extremely
+  useful when refactoring components
+- finally, to activate the props validation, we need to set Owl's
+  [mode](../reference/app.md#configuration) to `dev`. This is done in the last argument
+  of the `mount` function. Note that this should be removed when an app is used in a real
+  production environment, since `dev` mode is slightly slower, due to extra
+  checks and validations.
+
+## 6. Adding tasks (part 1)
+
+We still use a list of hardcoded tasks. It's really time to give the user a way
+to add tasks himself. The first step is to add an input to the `Root` component.
+But this input will be outside of the task list, so we need to adapt `Root`
+template, js, and css:
+
+```xml
+<div class="todo-app">
+    <input placeholder="Enter a new task" t-on-keyup="addTask"/>
+    <div class="task-list">
+        <t t-foreach="tasks" t-as="task" t-key="task.id">
+            <Task task="task"/>
+        </t>
+    </div>
+</div>
+```
+
+```js
+addTask(ev) {
+    // 13 is keycode for ENTER
+    if (ev.keyCode === 13) {
+        const text = ev.target.value.trim();
+        ev.target.value = "";
+        console.log('adding task', text);
+        // todo
+    }
+}
+```
+
+```css
+.todo-app {
+  width: 300px;
+  margin: 50px auto;
+  background: aliceblue;
+  padding: 10px;
+}
+
+.todo-app > input {
+  display: block;
+  margin: auto;
+}
+
+.task-list {
+  margin-top: 8px;
+}
+```
+
+We now have a working input, which log to the console whenever the user adds a
+task. Notice that when you load the page, the input is not focused. But adding
+tasks is a core feature of a task list, so let us make it as fast as possible by
+focusing the input.
+
+We need to execute code when the `Root` component is ready (mounted). Let's do
+that using the `onMounted` hook. We will also need to get a reference to the
+input, by using the `t-ref` directive with the [`useRef`](../reference/hooks.md#useref) hook:
+
+```xml
+<input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
+```
+
+```js
+// on top of file:
+const { Component, mount, xml, useRef, onMounted } = owl;
+```
+
+```js
+// in App
+setup() {
+    const inputRef = useRef("add-input");
+    onMounted(() => inputRef.el.focus());
+}
+```
+
+This is a very common situation: whenever we need to perform some actions depending
+on the lifecycle of a component, we need to do it in the `setup` method, by using
+one of the lifecycle hook. Here, we first get a reference to the `inputRef`,
+then in the `onMounted` hook, we simply focus the html element.
+
+## 7. Adding tasks (part 2)
+
+In the previous section, we did everything except implement the code that actually
+create tasks! So, let us do that now.
+
+We need a way to generate unique `id` numbers. To do that, we will simply add a
+`nextId` number in `App`. At the same time, let us remove the demo tasks in `App`:
+
+```js
+nextId = 1;
+tasks = [];
+```
+
+Now, the `addTask` method can be implemented:
+
+```js
+addTask(ev) {
+    // 13 is keycode for ENTER
+    if (ev.keyCode === 13) {
+        const text = ev.target.value.trim();
+        ev.target.value = "";
+        if (text) {
+            const newTask = {
+                id: this.nextId++,
+                text: text,
+                isCompleted: false,
+            };
+            this.tasks.push(newTask);
+        }
+    }
+}
+```
+
+This almost works, but if you test it, you will notice that no new task is ever
+displayed when the user press `Enter`. But if you add a `debugger` or a
+`console.log` statement, you will see that the code is actually running as
+expected. The problem is that Owl has no way of knowing that it needs to rerender
+the user interface. We can fix the issue by making `tasks` reactive, with the
+[`useState`](../reference/hooks.md#usestate) hook:
+
+```js
+// on top of the file
+const { Component, mount, xml, useRef, onMounted, useState } = owl;
+
+// replace the task definition in App with the following:
+tasks = useState([]);
+```
+
+It now works as expected!
+
+## 8. Toggling tasks
+
+If you tried to mark a task as completed, you may have noticed that the text
+did not change in opacity. This is because there is no code to modify the
+`isCompleted` flag.
+
+Now, this is an interesting situation: the task is displayed by the `Task`
+component, but it is not the owner of its state, so ideally, it should not modify it.
+However, for now, that's what we will do (this will be improved in a later step).
+In `Task`, change the `input` to:
+
+```xml
+<input type="checkbox" t-att-checked="props.task.isCompleted" t-on-click="toggleTask"/>
+```
+
+and add the `toggleTask` method:
+
+```js
+toggleTask() {
+  this.props.task.isCompleted = !this.props.task.isCompleted;
+}
+```
+
+## 9. Deleting tasks
+
+Let us now add the possibility do delete tasks. This is different from the previous
+feature: deleting task has to be done on the task itself, but the actual operation
+need to be done on the task list. So, we need to communicate the request to the
+`Root` component. This is usually done by providing a callback in a prop.
+
+First, let us update the `Task` template, css and js:
+
+```xml
+<div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
+    <input type="checkbox" t-att-checked="props.task.isCompleted" t-on-click="toggleTask"/>
+    <span><t t-esc="props.task.text"/></span>
+    <span class="delete" t-on-click="deleteTask">🗑</span>
+</div>
+```
+
+```css
+.task {
+  font-size: 18px;
+  color: #111111;
+  display: grid;
+  grid-template-columns: 30px auto 30px;
+}
+
+.task > input {
+  margin: auto;
+}
+
+.delete {
+  opacity: 0;
+  cursor: pointer;
+  text-align: center;
+}
+
+.task:hover .delete {
+  opacity: 1;
+}
+```
+
+```js
+static props = ["task", "onDelete"];
+
+deleteTask() {
+    this.props.onDelete(this.props.task);
+}
+```
+
+And now, we need to provide the `onDelete` callback to each tasks in the `Root`
+component:
+
+```xml
+  <Task task="task" onDelete.bind="deleteTask"/>
+```
+
+```js
+deleteTask(task) {
+    const index = this.tasks.findIndex(t => t.id === task.id);
+    this.tasks.splice(index, 1);
+}
+```
+
+Notice that the `onDelete` prop is defined with a `.bind` suffix: this is a special
+suffix that makes sure the function callback is bound to the component.
+
+## 10. Using a store
+
+Looking at the code, it is apparent that all the code handling tasks is scattered
+all around the application. Also, it mixes UI code and business logic
+code. Owl does not provide any high level abstraction to manage business logic,
+but it is easy to do it with the basic reactivity primitives (`useState` and `reactive`).
+
+Let us use it in our application to implement a central store. This is a pretty
+large refactoring (for our application), since it involves extracting all task
+related code out of the components. Here is the new content of the `app.js` file:
+
+```js
+const { Component, mount, xml, useRef, onMounted, useState, reactive, useEnv } = owl;
+
+// -------------------------------------------------------------------------
+// Store
+// -------------------------------------------------------------------------
+function useStore() {
+  const env = useEnv();
+  return useState(env.store);
+}
+
+// -------------------------------------------------------------------------
+// TaskList
+// -------------------------------------------------------------------------
+class TaskList {
+  nextId = 1;
+  tasks = [];
+
+  addTask(text) {
+    text = text.trim();
+    if (text) {
+      const task = {
+        id: this.nextId++,
+        text: text,
+        isCompleted: false,
+      };
+      this.tasks.push(task);
+    }
+  }
+
+  toggleTask(task) {
+    task.isCompleted = !task.isCompleted;
+  }
+
+  deleteTask(task) {
+    const index = this.tasks.findIndex((t) => t.id === task.id);
+    this.tasks.splice(index, 1);
+  }
+}
+
+function createTaskStore() {
+  return reactive(new TaskList());
+}
+
+// -------------------------------------------------------------------------
+// Task Component
+// -------------------------------------------------------------------------
+class Task extends Component {
+  static template = xml/* xml */ `
+    <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
+      <input type="checkbox" t-att-checked="props.task.isCompleted" t-on-click="() => store.toggleTask(props.task)"/>
+      <span><t t-esc="props.task.text"/></span>
+      <span class="delete" t-on-click="() => store.deleteTask(props.task)">🗑</span>
+    </div>`;
+
+  static props = ["task"];
+
+  setup() {
+    this.store = useStore();
+  }
+}
+
+// -------------------------------------------------------------------------
+// Root Component
+// -------------------------------------------------------------------------
+class Root extends Component {
+  static template = xml/* xml */ `
+    <div class="todo-app">
+      <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
+      <div class="task-list">
+        <t t-foreach="store.tasks" t-as="task" t-key="task.id">
+          <Task task="task"/>
+        </t>
+      </div>
+    </div>`;
+  static components = { Task };
+
+  setup() {
+    const inputRef = useRef("add-input");
+    onMounted(() => inputRef.el.focus());
+    this.store = useStore();
+  }
+
+  addTask(ev) {
+    // 13 is keycode for ENTER
+    if (ev.keyCode === 13) {
+      this.store.addTask(ev.target.value);
+      ev.target.value = "";
+    }
+  }
+}
+
+// -------------------------------------------------------------------------
+// Setup
+// -------------------------------------------------------------------------
+const env = {
+  store: createTaskStore(),
+};
+mount(Root, document.body, { dev: true, env });
+```
+
+## 11. Saving tasks in local storage
+
+Now, our TodoApp works great, except if the user closes or refresh the browser!
+It is really inconvenient to only keep the state of the application in memory.
+To fix this, we will save the tasks in the local storage. With our current
+codebase, it is a simple change: we need to save tasks to local storage and
+listen to any change.
+
+```js
+class TaskList {
+  constructor(tasks) {
+    this.tasks = tasks || [];
+    const taskIds = this.tasks.map((t) => t.id);
+    this.nextId = taskIds.length ? Math.max(...taskIds) + 1 : 1;
+  }
+  // ...
+}
+
+function createTaskStore() {
+  const saveTasks = () => localStorage.setItem("todoapp", JSON.stringify(taskStore.tasks));
+  const initialTasks = JSON.parse(localStorage.getItem("todoapp") || "[]");
+  const taskStore = reactive(new TaskList(initialTasks), saveTasks);
+  saveTasks();
+  return taskStore;
+}
+```
+
+The key point is that the `reactive` function takes a callback that will be called
+every time an observed value is changed. Note that we need to call the `saveTasks`
+method initially to make sure we observe all current values.
+
+## 12. Filtering tasks
+
+We are almost done, we can add/update/delete tasks. The only missing feature is
+the possibility to display the task according to their completed status. We will
+need to keep track of the state of the filter in `Root`, then filter the visible
+tasks according to its value.
+
+```js
+class Root extends Component {
+  static template = xml /* xml */`
+    <div class="todo-app">
+      <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
+      <div class="task-list">
+        <t t-foreach="displayedTasks" t-as="task" t-key="task.id">
+          <Task task="task"/>
+        </t>
+      </div>
+      <div class="task-panel" t-if="store.tasks.length">
+        <div class="task-counter">
+          <t t-esc="displayedTasks.length"/>
+          <t t-if="displayedTasks.length lt store.tasks.length">
+              / <t t-esc="store.tasks.length"/>
+          </t>
+          task(s)
+        </div>
+        <div>
+          <span t-foreach="['all', 'active', 'completed']"
+            t-as="f" t-key="f"
+            t-att-class="{active: filter.value===f}"
+            t-on-click="() => this.setFilter(f)"
+            t-esc="f"/>
+        </div>
+      </div>
+    </div>`;
+
+  setup() {
+    ...
+    this.filter = useState({ value: "all" });
+  }
+
+  get displayedTasks() {
+    const tasks = this.store.tasks;
+    switch (this.filter.value) {
+      case "active": return tasks.filter(t => !t.isCompleted);
+      case "completed": return tasks.filter(t => t.isCompleted);
+      case "all": return tasks;
+    }
+  }
+
+  setFilter(filter) {
+    this.filter.value = filter;
+  }
+}
+```
+
+```css
+.task-panel {
+  color: #0088ff;
+  margin-top: 8px;
+  font-size: 14px;
+  display: flex;
+}
+
+.task-panel .task-counter {
+  flex-grow: 1;
+}
+
+.task-panel span {
+  padding: 5px;
+  cursor: pointer;
+}
+
+.task-panel span.active {
+  font-weight: bold;
+}
+```
+
+Notice here that we set dynamically the css class of the filter with the object
+syntax.
+
+## 13. The Final Touch
+
+Our list is feature complete. We can still add a few extra details to improve
+the user experience.
+
+1. Add a visual feedback when the user mouse is over a task:
+
+```css
+.task:hover {
+  background-color: #def0ff;
+}
+```
+
+2. Make the text of a task clickable, to toggle its checkbox:
+
+```xml
+<input type="checkbox" t-att-checked="props.task.isCompleted"
+    t-att-id="props.task.id"
+    t-on-click="dispatch('toggleTask', props.task.id)"/>
+<label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
+```
+
+3. Strike the text of completed task:
+
+```css
+.task.done label {
+  text-decoration: line-through;
+}
+```
+
+## Final code
+
+Our application is now complete. It works, the UI code is well separated from
+the business logic code, it is testable, all under 150 lines of code (template
+included!).
+
+For reference, here is the final code:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>OWL Todo App</title>
+    <link rel="stylesheet" href="app.css" />
+    <script src="owl.js"></script>
+    <script src="app.js"></script>
+  </head>
+  <body></body>
+</html>
+```
+
+```js
+(function () {
+  const { Component, mount, xml, useRef, onMounted, useState, reactive, useEnv } = owl;
+
+  // -------------------------------------------------------------------------
+  // Store
+  // -------------------------------------------------------------------------
+  function useStore() {
+    const env = useEnv();
+    return useState(env.store);
+  }
+
+  // -------------------------------------------------------------------------
+  // TaskList
+  // -------------------------------------------------------------------------
+  class TaskList {
+    constructor(tasks) {
+      this.tasks = tasks || [];
+      const taskIds = this.tasks.map((t) => t.id);
+      this.nextId = taskIds.length ? Math.max(...taskIds) + 1 : 1;
+    }
+
+    addTask(text) {
+      text = text.trim();
+      if (text) {
+        const task = {
+          id: this.nextId++,
+          text: text,
+          isCompleted: false,
+        };
+        this.tasks.push(task);
+      }
+    }
+
+    toggleTask(task) {
+      task.isCompleted = !task.isCompleted;
+    }
+
+    deleteTask(task) {
+      const index = this.tasks.findIndex((t) => t.id === task.id);
+      this.tasks.splice(index, 1);
+    }
+  }
+
+  function createTaskStore() {
+    const saveTasks = () => localStorage.setItem("todoapp", JSON.stringify(taskStore.tasks));
+    const initialTasks = JSON.parse(localStorage.getItem("todoapp") || "[]");
+    const taskStore = reactive(new TaskList(initialTasks), saveTasks);
+    saveTasks();
+    return taskStore;
+  }
+
+  // -------------------------------------------------------------------------
+  // Task Component
+  // -------------------------------------------------------------------------
+  class Task extends Component {
+    static template = xml/* xml */ `
+      <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
+        <input type="checkbox"
+          t-att-id="props.task.id"
+          t-att-checked="props.task.isCompleted"
+          t-on-click="() => store.toggleTask(props.task)"/>
+        <label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
+        <span class="delete" t-on-click="() => store.deleteTask(props.task)">🗑</span>
+      </div>`;
+
+    static props = ["task"];
+
+    setup() {
+      this.store = useStore();
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Root Component
+  // -------------------------------------------------------------------------
+  class Root extends Component {
+    static template = xml/* xml */ `
+      <div class="todo-app">
+        <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
+        <div class="task-list">
+          <t t-foreach="displayedTasks" t-as="task" t-key="task.id">
+            <Task task="task"/>
+          </t>
+        </div>
+        <div class="task-panel" t-if="store.tasks.length">
+          <div class="task-counter">
+            <t t-esc="displayedTasks.length"/>
+            <t t-if="displayedTasks.length lt store.tasks.length">
+                / <t t-esc="store.tasks.length"/>
+            </t>
+            task(s)
+          </div>
+          <div>
+            <span t-foreach="['all', 'active', 'completed']"
+              t-as="f" t-key="f"
+              t-att-class="{active: filter.value===f}"
+              t-on-click="() => this.setFilter(f)"
+              t-esc="f"/>
+          </div>
+        </div>
+      </div>`;
+    static components = { Task };
+
+    setup() {
+      const inputRef = useRef("add-input");
+      onMounted(() => inputRef.el.focus());
+      this.store = useStore();
+      this.filter = useState({ value: "all" });
+    }
+
+    addTask(ev) {
+      // 13 is keycode for ENTER
+      if (ev.keyCode === 13) {
+        this.store.addTask(ev.target.value);
+        ev.target.value = "";
+      }
+    }
+
+    get displayedTasks() {
+      const tasks = this.store.tasks;
+      switch (this.filter.value) {
+        case "active":
+          return tasks.filter((t) => !t.isCompleted);
+        case "completed":
+          return tasks.filter((t) => t.isCompleted);
+        case "all":
+          return tasks;
+      }
+    }
+
+    setFilter(filter) {
+      this.filter.value = filter;
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Setup
+  // -------------------------------------------------------------------------
+  const env = { store: createTaskStore() };
+  mount(Root, document.body, { dev: true, env });
+})();
+```
+
+```css
+.todo-app {
+  width: 300px;
+  margin: 50px auto;
+  background: aliceblue;
+  padding: 10px;
+}
+
+.todo-app > input {
+  display: block;
+  margin: auto;
+}
+
+.task-list {
+  margin-top: 8px;
+}
+
+.task {
+  font-size: 18px;
+  color: #111111;
+  display: grid;
+  grid-template-columns: 30px auto 30px;
+}
+
+.task:hover {
+  background-color: #def0ff;
+}
+
+.task > input {
+  margin: auto;
+}
+
+.delete {
+  opacity: 0;
+  cursor: pointer;
+  text-align: center;
+}
+
+.task:hover .delete {
+  opacity: 1;
+}
+
+.task.done {
+  opacity: 0.7;
+}
+.task.done label {
+  text-decoration: line-through;
+}
+
+.task-panel {
+  color: #0088ff;
+  margin-top: 8px;
+  font-size: 14px;
+  display: flex;
+}
+
+.task-panel .task-counter {
+  flex-grow: 1;
+}
+
+.task-panel span {
+  padding: 5px;
+  cursor: pointer;
+}
+
+.task-panel span.active {
+  font-weight: bold;
+}
+```

doc/miscellaneous/architecture.md

@@ -0,0 +1,68 @@
+# 🦉 Notes On Owl Architecture 🦉
+
+We explain here how Owl is designed
+
+Warning: these notes are technical by nature, and intended for people working
+on Owl (or interested in understanding its design).
+
+## Overview
+
+Roughly speaking, Owl has 5 main parts:
+
+- a virtual dom system (in `src/blockdom`)
+- a component system (in `src/component`)
+- a template compiler (located in the `src/compiler` folder)
+- a small runtime code to tie them together (in `src/app`)
+- a reactivity system (in `src/reactivity.ts`)
+
+There are some other files, but the core of Owl can be understood with these
+five main parts.
+
+The virtual dom is an optimized virtual dom based on blocks, which supports
+multi blocks (for fragments). Everything that owl renders is internally
+represented by a virtual node. The job of the virtual dom is to efficiently
+represent the current state of the application, and to build an actual DOM
+representation when needed, or update the DOM whenever it is needed.
+
+- some other helpers/smaller scale stuff
+  A rendering occurs in two phases:
+
+- virtual rendering: this generates the virtual dom in memory, asynchronously
+- patch: applies a virtual tree to the screen (synchronously)
+
+There are several classes involved in a rendering:
+
+- components
+- a scheduler
+- fibers: small objects containing some metadata, associated with a rendering of
+  a specific component
+
+Components are organized in a dynamic component tree, visible in the user
+interface. Whenever a rendering is initiated in a component `C`:
+
+- a fiber is created on `C` with the rendering props information
+- the virtual rendering phase starts on C (will asynchronously render all the
+  child components)
+- the fiber is added to the scheduler, which will poll continuously, every
+  animation frame, if the fiber is done
+- once it is done, the scheduler will call the task callback, which will apply
+  the patch (if it was not cancelled in the meantime).
+
+# 🦉 VDom 🦉
+
+Owl is a declarative component system: we declare the structure of the component
+tree, and Owl will translate that to a list of imperative operations. This
+translation is done by a virtual dom. This is the low level layer of Owl, most
+developer will not need to call directly the virtual dom functions.
+
+The main idea behind a virtual dom is to keep a in-memory representation of the
+DOM (called a virtual node), and whenever some change is needed, to regenerate
+a new representation, compute the difference between the old and the new, then
+apply the changes.
+
+`vdom` exports two functions:
+
+- `h`: create a new virtual node
+- `patch`: compare two virtual nodes, and apply the difference.
+
+Note: Owl's virtual dom is a fork of [snabbdom](https://github.com/snabbdom/snabbdom).

doc/miscellaneous/comparison.md

@@ -0,0 +1,255 @@
+# Comparison with Vue/React
+
+OWL, React and Vue have the same main feature: they allow developers to build
+declarative user interfaces. To do that, all these frameworks uses a virtual dom. However, there are still obviously many differences.
+
+In this page, we try to highlight some of these differences. Obviously, a lot of
+effort was put to be fair. However, if you disagree with some of the points
+discussed, feel free to open an issue/submit a PR to correct this text.
+
+## Content
+
+- [Size](#size)
+- [Class Based](#class-based)
+- [Tooling/Build Step](#toolingbuild-step)
+- [Templating](#templating)
+- [Asynchronous rendering](#asynchronous-rendering)
+- [Reactivity](#reactivity)
+- [Hooks](#hooks)
+
+## Size
+
+OWL is intended to be small and to work at a slightly lower level of abstraction
+than React and Vue. Also, jQuery is not the same kind of framework, but it is interesting to compare.
+
+| Framework                | Size (minified, gzipped) |
+| ------------------------ | ------------------------ |
+| OWL                      | 18kb                     |
+| Vue + VueX               | 30kb                     |
+| Vue + VueX + Vue Router  | 39kb                     |
+| React + ReactDOM + Redux | 40kb                     |
+| jQuery                   | 30kb                     |
+
+Note that those comparisons are not entirely fair, because we do not compare
+the same exact set of features. For example, VueX and Vue Router support more
+advanced use cases.
+
+## Class Based
+
+Both React and Vue moved away from defining components with classes. They prefer
+a more functional approach, in particular, with the new `hooks` mechanisms.
+
+This has some advantages and disadvantages. But the end result is that React
+and Vue both offers multiple different ways of defining new components. In
+contrast, Owl has only one mechanism: class-based components. We believe that Owl
+components are fast enough for all our usecases, and making it as simple as
+possible for developers is more valuable (for us).
+
+Also, functions or class based components are more than just syntax. Functions
+come with a mindset of composition and class are about inheritance. Clearly,
+both of these are important mechanisms for reusing code. Also, one does not
+exclude the other.
+
+It certainly looks like the world of UI frameworks is moving toward composition,
+for many very good reasons. Owl is still good at composition (for example,
+Owl supports slots, which is the primary mechanism to make generic reusable
+components). But it can also use inheritance (and this is very important since
+templates can also be inherited with `xpaths` transformations).
+
+## Tooling/Build step
+
+OWL is designed to be easy to use in a standalone way. For various reasons,
+Odoo does not want to rely on standard web tools (such as webpack), and OWL can
+be used by simply adding a script tag to a page.
+
+```html
+<script src="owl.min.js" />
+```
+
+In comparison, React encourages using JSX, which necessitate a build step, and
+most Vue applications uses single file components, which also necessitate a build step.
+
+On the flipside, external tooling may make it harder to use in some case, but it
+also brings a lot of benefits. And React/Vue have both a large ecosystem.
+
+Note that since Owl is not dependant on any external tool nor libraries, it is
+very easy to integrate into any build toolchain. Also, since we cannot rely on
+additional tools, we made a lot of effort to make the most of the web platform.
+
+For example, Owl uses the standard `xml` parser that comes with every browser.
+Because of that, Owl did not have to write its own template parser. Another
+example is the [`xml`](../reference/templates.md#inline-templates) tag helper function, which makes use of
+native template literals to allow in a natural way to write `xml` templates
+directly in the javascript code. This can be easily integrated with editor
+plugins to have autocompletion inside the template.
+
+## Templating
+
+OWL uses its own QWeb engine, which compiles templates on the
+frontend, as they are needed. This is extremely convenient for our use case, in
+particular because templates are described in XML files, and can be modified by
+XPaths. Since Odoo is at its heart a modular application, this is an important
+feature for us.
+
+```xml
+<div>
+  <button t-on-click="increment">Click Me! [<t t-esc="state.value"/>]</button>
+</div>
+```
+
+Vue is actually kind of similar. Its template language is kind of close to QWeb,
+with the `v` replaced by the `t`. However, it is also more fully featured. For
+example, Vue templates have slots, or event modifiers. A large difference is that
+most Vue applications will need to be built ahead of time, to compile the templates
+into javascript functions. Note that Vue has a separate build which includes the
+template compiler.
+
+In contrast, most React applications do not use a templating language, but write
+some JSX code, which is precompiled into plain JavaScript by a build step. This
+example is done with the (kind of outdated) React class system:
+
+```jsx
+class Clock extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
+      </div>
+    );
+  }
+}
+```
+
+This has the advantage of having the full power of Javascript, but is less
+structured than a template language. Note that the tooling is quite impressive:
+there is a syntax highlighter for jsx here on github!
+
+By comparison, here is the equivalent Owl component, written with the
+[`xml`](../reference/templates.md#inline-templates) tag helper:
+
+```js
+class Clock extends Component {
+  static template = xml`
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>It is {props.date.toLocaleTimeString()}.</h2>
+      </div>
+    `;
+}
+```
+
+## Asynchronous Rendering
+
+This is actually a big difference between OWL and React/Vue: components in OWL
+are totally asynchronous. They have two asynchronous hooks in their lifecycle:
+
+- `willStart` (before the component starts rendering)
+- `willUpdateProps` (before new props are set)
+
+Both these methods can be implemented and return a promise. The rendering will
+then wait for these promises to be completed before patching the DOM. This is
+useful for some use cases: for example, a component may want to fetch an external
+library (a calendar component may need a specialized calendar rendering library),
+in its willStart hook.
+
+```javascript
+class MyCalendarComponent extends owl.Component {
+    ...
+
+    willStart() {
+        return utils.lazyLoad('static/libs/fullcalendar/fullcalendar.js');
+    }
+    ...
+}
+```
+
+This may be dangerous (to stop the rendering waiting for the network), but it is
+extremely powerful as well, as demonstrated by the Odoo Web Client.
+
+Lazy loading static libraries can obviously be done with React/Vue, but it is
+more convoluted. For example, in Vue, you need to use a dynamic import keyword
+that needs to be transpiled at build time in order for the component to be loaded
+asynchronously (see [the documentation](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components)).
+
+## Reactivity
+
+React has a simple model: whenever the state changes, it is
+replaced with a new state (via the `setState` method). Then, the DOM is patched.
+This is simple, efficient, and a little bit awkward to write.
+
+Vue is a little bit different: it replace magically the properties in the state
+by getters/setters. With that, it can notify components whenever the state that
+they read was changed.
+
+Owl is closer to vue: it also tracks magically the state properties, but it does
+only increment an internal counter whenever it changes. Note that it is done
+with a `Proxy`, which means that it is totally transparent to the developers.
+Adding new keys is supported. Once any part of the state has been changed, a
+rendering is scheduled in the next microtask tick (promise queue).
+
+## Hooks
+
+[Hooks](https://reactjs.org/docs/hooks-intro.html#motivation) recently took over
+the React world. They solve a lot of seemingly unconnected problems: attach
+reusable behavior to a component, in a composable way, extract stateful logic
+from a component or reuse stateful logic between component, without changing your
+component hierarchy.
+
+Here is an example of the React `useState` hook:
+
+```js
+import React, { useState } from "react";
+
+function Example() {
+  // Declare a new state variable, which we'll call "count"
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}
+```
+
+Because of the way React designed the hooks API, they only work for functional
+components. But in that case, they really are powerful. Every major React library
+is in the process of redesigning their API with hooks (for example,
+[Redux](https://react-redux.js.org/next/api/hooks)).
+
+Vue 2 does not have hooks, but the Vue project is working on its next version,
+which will feature its new [composition API](https://vue-composition-api-rfc.netlify.com/).
+This work is based on the new ideas introduced by React hooks.
+
+From the way React and Vue introduce their hooks, it may look like hooks are not
+compatible with class components. However, this is not the case, as shown by
+Owl [hooks](../reference/hooks.md). They are inspired by both React and Vue. For example,
+the `useState` hook is named after React, but its API is closer to the `reactive`
+Vue hook.
+
+Here is what the `Counter` example above look like in Owl:
+
+```js
+import { Component, Owl } from "owl";
+import { xml } from "owl/tags";
+
+class Example extends Component {
+  static template = xml`
+      <div>
+        <p>You clicked {count.value} times</p>
+        <button t-on-click="increment">Click me</button>
+      </div>`;
+
+  count = useState({ value: 0 });
+
+  increment() {
+    this.state.value++;
+  }
+}
+```
+
+Since the Owl framework had hooks from early in its life, its main APIs
+are designed to be interacted with hooks from the start. For example, the
+`Context` abstraction.

doc/miscellaneous/compiled_template.md

@@ -0,0 +1,98 @@
+# 🦉 Notes On Owl Compiled Templates 🦉
+
+This page will explain what an Owl compiled template look like. This is a
+technical document intended for developers interested in understanding how Owl
+works internally.
+
+Broadly speaking, Owl compiles templates into a javascript function (a closure)
+that returns a function (the "render" function). The point of the closure is to
+have a place to store all values specific to the template (in particular, "blocks").
+Once a template is compiled, its closure function is called once to get the
+render function, and from then on, only the render function is used.
+
+The render function takes some context (and some additional information) and
+return a virtual dom representation of the rendered template, as a block tree.
+A block tree is a very light weight representation that only contains the dynamic
+part of the template, and its structure. It is actually independant of the
+static part of the templates (which are contained in the blocks captured by the
+closure). This means that the work performed at render time is only to collect
+dynamic data, and to describe the block structure of the result.
+
+It looks like this, in pseudo code:
+
+```js
+function closure(bdom, helpers) {
+    // here is some place to put stuff specific to the template, such as
+    // blocks
+    ...
+
+    return function render(context, node, key) {
+        // only build here all dynamic parts of the template
+        // build a block tree
+        return tree;
+    }
+}
+```
+
+Now, let us see an example. Consider the following template:
+
+```xml
+<div class="some-class">
+    <div class="blabla">
+        <span><t t-esc="state.value"/></span>
+    </div>
+    <t t-if="state.info">
+        <p class="info" t-att-class="someAttribute">
+            <t t-esc="state.info"/>
+        </p>
+    </t>
+    <SomeComponent value="value"/>
+</div>
+```
+
+If you look carefully, there are 5 dynamic things:
+
+- a text value (the first `t-esc`),
+- a sub block (the `t-if`),
+- a dynamic attribute (the `t-att-class` attribute),
+- another text value (the second `t-esc`),
+- and finally, a sub component
+
+Here is the compiled code for this template:
+
+```js
+function closure(bdom, helpers) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+
+  let block1 = createBlock(
+    `<div class="some-class"><div class="blabla"><span><block-text-0/></span></div><block-child-0/><block-child-1/></div>`
+  );
+  let block2 = createBlock(`<p class="info" block-attribute-0="class"><block-text-1/></p>`);
+
+  return function render(ctx, node, key = "") {
+    let b2, b3;
+    let txt1 = ctx["state"].value;
+    if (ctx["state"].info) {
+      let attr1 = ctx["someAttribute"];
+      let txt2 = ctx["state"].info;
+      b2 = block2([attr1, txt2]);
+    }
+    b3 = component(`SomeComponent`, { value: ctx["value"] }, key + `__1`, node, ctx);
+    return block1([txt1], [b2, b3]);
+  };
+}
+```
+
+The values captured in the closure capture the static part of the template: we
+define here two blocks (which contains a template node, that can be deep cloned
+whenever a block is mounted). Then the render function only describes the block
+tree structure of the result, depending on the context. This means that we
+minimize the amount of work done at render time.
+
+Then, when we want to patch the dom, Owl will uses the `patch` function from
+blockdom, which then will diff the block tree, and deep clone new blocks whenever
+a new block is inserted, keep track of dynamic parts of each block, and update
+them accordingly.
+
+With this design, the cost of rendering a template is proportional to the number
+of dynamic values, and not to the size of the template.

doc/miscellaneous/organizing_code.md

@@ -0,0 +1,380 @@
+# 🦉 Organising Owl code 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Reactivity](#reactivity)
+- [Asynchrony](#asynchrony)
+- [Basic design: Components and Props](#basic-design-components-and-props)
+- [More advanced design: using the environment](#more-advanced-design-using-the-environment)
+- [Even more advanced: completely separating model management](#even-more-advanced-completely-separating-model-management)
+- [Special case: bypassing reactivity](#special-case-bypassing-reactivity)
+
+## Overview
+
+The topic of this document is to discuss how one could organize an Owl
+application/component/feature/codebase. Clearly, good practices for a system depends
+on its properties/semantics. For Owl 2.x applications, the most important
+ideas to have in mind are the following:
+
+- Owl provides a way to structure a component tree,
+- communication between a parent and a child component is mostly done with props
+  (and callback props to go from child to parent),
+- there is an additional communication channel: information can be propagated
+  through the environment,
+- Owl implements a reactivity system, which tracks each components and values,
+  so that it is able to only rerender the relevant subset of components,
+- asynchrony: owl components can delay renderings with `onWillStart`/`onWillUpdateProps`
+- renderings are batched (10 calls to render in the same call stack will only
+  result in 1 actual rendering)
+
+## Reactivity
+
+With the reactivity system, each value created with the `useState` or the `reactive`
+function is a proxy that allows Owl to trask which keys/values have been read
+by which components. This means that Owl can then only update the components that
+are impacted by a state change.
+
+There are two important reactivity primitives:
+
+- `useState`: a hook to turn a value into a reactive value, linked to a component
+  (so, each time the value is updated, the component is rerendered)
+- `reactive`: a function to create a "standalone" reactive value
+
+Also, it is good to know that one can call `useState` on a reactive value: this will
+create another reactive value, connected to the same source, but linked to a
+different component.
+
+Let us consider the following component tree:
+
+```mermaid
+graph TD
+    A-->B
+    A-->C
+    B-->D
+    B-->E
+    B-->F
+    C-->G
+    C-->H
+```
+
+It is important to know how renderings are applied by Owl:
+
+- if a render is initiated in A, it will render its template
+- whenever it encounter a child component (here, B and C), it will shallow
+  compare the before and after props. If they are different, Owl will render the
+  corresponding child component, otherwise it will stop.
+- each props object received by a (child) component is turned into a reactive
+  object.
+
+Each (non primitive) value given by `A` to `B` and `C` will be transformed into
+a reactive object.
+basically, owl does a useState on props at each level, and compare
+shallowly values
+
+Notes:
+
+- each component can be independently rendered (so, for example, only B and D)
+- one can create reactive objects (just like useState, but not linked to any
+  component) with the `reactive` function
+- escape hatch: one can mark an object as "raw" (non reactive) with `markRaw`, and get the target
+  object (with `toRaw`)
+- note that it is bad practice to keep reference to the raw object: doing so means
+  that some => may miss
+  rendering
+
+- note: reactivity is not free. It may be expensive for some large objects.
+
+## Asynchrony
+
+explain: onWillStart and onWillUpdateProps are async => can delay render
+
+good usecase for lazyloading libs
+
+note: most of the time, update should be done in an atomic way:
+
+```js
+// bad => will cause extra rendering, possibly corrupt
+this.state.something = someValue;
+const otherValue = await this.fetchSomething();
+this.state.otherValue = otherValue;
+```
+
+```js
+// good
+const otherValue = await this.fetchSomething();
+this.state.something = someValue;
+this.state.otherValue = otherValue;
+```
+
+```js
+// bad => will cause extra rendering, possibly corrupt
+const someValue = getsomeValue();
+const otherValue = await this.fetchSomething();
+Object.assign(this.state, {
+  someValue,
+  otherValue,
+});
+```
+
+other note: minimize async stuff
+
+```js
+setup() {
+    // strategy 1: have a loading screen
+    this.state = useState({loading: true});
+}
+```
+
+```xml
+<t t-if="state.loading">
+</t>
+...
+```
+
+// other strategy: not display a loading indicator, and update the UI atomically
+
+```js
+setup() {
+    onWillStart(() => this.loadData());
+    onWillUpdateProps(() => this.updateData());
+}
+```
+
+## Baseline design: Components and props
+
+Here is what I suppose many Owl systems will look like: `useState` in some components,
+state is propagated down the tree with props, and potentially callbacks as well
+(to communicate from child to parent)
+
+     A
+
+/ \
+ B C
+/ | \ | \
+D E F G H
+
+```js
+// in A (and maybe some/all other components)
+this.state = useState(...);
+```
+
+```xml
+<!-- in A -->
+<div>
+    <t t-if="state.message">
+        <span t-esc="state.message"/>
+    </t>
+    <B record="state.records[3]" updateValue.bind="updateValue">
+</div>
+```
+
+Notice the `.bind` suffix here, very convenient.
+
+```xml
+<!-- in B. It is now subscribed to the 'some_field' value -->
+<span t-esc="props.record.some_field"/>
+```
+
+With reactivity, any update to the state will only rerender the affected components.
+So, if some code in `A` update the value of `some_field` (without reading it!),
+only B will be rerendered.
+
+## More advanced design: passing stuff through the environment
+
+It may be tedious/impractical to pass props all along the tree when we have a deep
+component tree.
+
+One can then use the environment to communicate to children. Only issue with that
+is that stuff in the environment bypass the reactivity system: if it comes from
+a `useState` in `A` => only `A` will react to state changes, not the children that
+reads it.
+
+To solve that, one need to use `useState` on it:
+
+```js
+// in root component A
+class A extends Component {
+  setup() {
+    this.posModel = {
+      state: useState(this.state),
+      updateSomeValue: () => this.updateSomeValue(),
+      doSomethingElse: () => this.doSomethingElse(),
+    };
+    useSubEnv({ posModel: this.posModel });
+  }
+}
+
+// in some child component D
+class D extends Component {
+  setup() {
+    // this one is wrong! this.posModel.state is stated
+    this.posModel = this.env.posModel;
+
+    // this.posModel.state === the one in A, linked to the component A
+
+    // this one is ok!
+    this.posModel = useState(this.env.posModel);
+  }
+}
+```
+
+Note that we can slightly simplify the use of the model by a hook:
+
+```js
+function usePosModel() {
+  const env = useEnv();
+  const model = env.posModel;
+  return useState(model);
+}
+```
+
+This is not much simpler, but it makes sure that one does not forget to call
+`useState` on the model from the environment.
+
+## Even more advanced: completely separating model management
+
+The baseline design above it nice for many usecases, but we sometimes may want
+to separate the "model" management from the UI, especially as the model is doing
+more complicated stuff. Useful to code some complex transitions.
+
+Here is how we could use the environment and reactive object to organize code:
+
+```js
+// in my_model.js
+class MyModel {
+    ...
+    constructor() {
+        this.complicatedCacheObject = {};
+
+        markRaw(this.complicatedCacheObject);
+    }
+
+    async load(...) {
+
+    }
+
+    async update(...) {
+
+    }
+
+    async doSomeComplexThing() {
+        this.loading = true;
+
+        // coordinate here some thing
+        // fetch stuff...
+
+        this.loading = false;
+        this.data = ...;
+        ...
+    }
+    ...
+}
+
+// in root component A:
+
+class A extends Component {
+    setup() {
+        const model = useState(new MyModel(...));
+        useSubEnv({ model });
+    }
+}
+
+// in some child component:
+class D extends Component {
+    setup() {
+        // notice the useState: this is necessary to bind model changes to the
+        // component D
+        this.model = useState(this.env.model);
+    }
+}
+
+```
+
+Notes:
+
+- model could be created elsewhere, in a service, in the start code, ...
+- one may want to mark some internal stuff as 'raw'...
+- if created elsewhere, it should probably be done with `reactive`
+- the call to `reactive` could be done in the model constructor directly:
+
+  ```js
+  class MyModel {
+      constructor() {
+          ...
+          return reactive(this);
+      }
+  }
+  ```
+
+- one could slightly simplify the model use with a hook:
+
+```js
+function useModel() {
+  const env = useEnv();
+  const model = env.model;
+  return useState(model);
+}
+```
+
+This can be simply used like this in a child component:
+
+```js
+setup() {
+    this.model = useModel();
+}
+```
+
+## Special case: bypassing reactivity
+
+Sometimes, reactivity is not what we want. For example, the o_spreadsheet
+library has a huge extremely complex model, and each state transition may
+potentially update the full UI, so it needs to be fast anyway, and reactivity
+has a cost that may outweight the benefits.
+
+The strategy here is:
+
+- mark the model as raw (not necessary in all cases, but potentially important
+  if model is passed through some props)
+- find a way to be notified on update change (for example, by an event triggered
+  by an event bus)
+- perform a deep rendering: render(true), at the root component.
+
+Here is how one could organize the code then:
+
+```js
+class MainModel extends EventBus{
+    constructor() {
+        markRaw(this); // make sure this object will never be turned into a reactive
+    }
+
+    doSomething() {
+        ...
+        // need to notify the outside world that a change occurred
+        this.trigger("UPDATE");
+    }
+    ...
+}
+
+// in root component:
+class A extends Component {
+    setup() {
+        const model = new MainModel();
+
+        // notice the 'render(true)', to do a deep render
+        model.addEventListener("UPDATE", () => this.render(true));
+        useSubEnv({ model });
+    }
+}
+
+// in child components:
+class E extends Component {
+    setup() {
+        this.model = this.env.model; // not really necessary, but maybe nice
+    }
+
+    onClick() {
+        this.model.doSomething();
+    }
+}
+```

doc/miscellaneous/why_owl.md

@@ -0,0 +1,180 @@
+# 🦉 Why Owl ? 🦉
+
+The common wisdom is that one should not reinvent the wheel, because that would
+waste effort and resources. It is certainly true in many cases. A javascript
+framework is a considerable investment, so it is quite logical to ask the question:
+why did Odoo decide to make OWL instead of using a standard/well known framework,
+such as React or Vue?
+
+As you might expect, the answer to that question is not simple. But most of the
+reasons discussed in this page are a consequence from a single fact: Odoo is
+extremely modular.
+
+This means, for example, that the core parts of Odoo are not aware, before runtime,
+of what files will be loaded/executed, or what will be the state of the UI. Because
+of that, Odoo cannot rely on a standard build toolchain. Also, this implies that
+the core parts of Odoo need to be extremely generic. In other words, Odoo is not
+really an application with a user interface. It is an application which generates
+a dynamic user interface. And most frameworks are not up to the task.
+
+Betting on Owl was not an easy choice to make, because there certainly are a lot
+of conflicting needs that we want to carefully balance. Choosing anything other
+than a well known framework is bound to be controversial. This page will explain
+some of the reason why we still believe that building Owl is a worthwile
+endeavour.
+
+## Strategy
+
+It is true that we want to keep control of our technology, in the sense that we
+do not want to depend on Facebook or Google, or any other large (or small)
+company. If they decide to change their license, or to go in a direction that
+will not work for us, this may be a problem. This is even more true because
+Odoo is not a conventional javascript application, and our needs are probably
+quite different as most other applications.
+
+## Class components
+
+It is clear that the biggest frameworks are moving away from class components.
+There is an implicit assumption that class components are terrible, and that
+functional programming is the way to go. React even goes as far as to say that
+classes are confusing for developers.
+
+While there is some truth to that, and to the fact that composition is certainly
+a good mechanism for code reuse, we believe that classes and inheritance are
+important tools.
+
+Sharing code between generic components with inheritance is the way Odoo built
+its web client. And it is clear that inheritance is not the root of all evils.
+It is often a perfectly simple and appropriate solution. What matter most is
+the architectural decisions.
+
+Also, Odoo has another specific use out of class components: each method of a
+class provides an extension point for addons. This may not be a clean architecture
+pattern, but it is a pragmatic decision that served Odoo well: classes are
+sometimes monkey-patched to add behaviour from the outside. A little bit like
+mixins, but from the outside.
+
+Using React or Vue would make it significantly harder to monkey patch components,
+because a lot of the state is hidden in their internals.
+
+## Tooling
+
+React or Vue have a huge community, and a lot of effort have been made into their
+tooling. This is wonderful, but at the same time, a pretty big issue for Odoo:
+since the assets are totally dynamic (and could change whenever the user installs
+or removes an addon), we need to have all that kind of tooling on the production
+servers. This is certainly not ideal.
+
+Also, this makes it very complicated to setup Vue or React tools: Odoo code is
+not a simple file that import other files. It changes all the time, assets
+are bundled differently in different contexts. This is the reason why Odoo has
+its own module system, which are resolved at runtime, by the browser. The
+dynamic nature of Odoo means that we often need to delay work as late as possible
+(in other word, we want a JIT user interface!)
+
+Our ideal framework has minimal (mandatory) tooling, which makes it easier to
+deploy. Using React without JSX, or Vue without vue file is not very appealing.
+
+At the same time, Owl is designed to solve this issue: it compiles templates
+by the browser, it doesn't need much code for that, since we use the XML parser
+built into each browser. Owl works with or without any additional tooling. It
+can use template strings to write single file components, and is easy to integrate
+in any html page, with a simple `<script>` tag.
+
+## Template based
+
+Odoo stores templates as XML documents in a database. This is very powerful, since
+this allow the use of xpaths to customize other templates. This is a very
+important feature of odoo, and one of the key to Odoo modularity.
+
+Because of that, we still expect to write our templates in an XML document.
+Weirdly enough, no major framework uses XML to store templates, even though it
+is extremely convenient.
+
+So, using React or Vue means that we need to make a template compiler. For React,
+that would be a compiler that would take a QWeb template, and convert it to a
+React render function. For Vue, it would convert it to a Vue template. Then
+we need to bundle the vue template compiler as well.
+
+Not only this would be complex (compiling a templating language into another is
+not an easy task), but it would negatively impact the developer experience as
+well. Writing Vue or React components in a QWeb template would certainly be
+awkward, and very confusing.
+
+## Developer Experience
+
+This brings us to the following point: developer experience. We see this choice
+as an investment for the future, and we want to make onboarding developers as
+easy as possible.
+
+While many javascript professionals clearly think that react/vue is not difficult
+(which is true to some extent), it is alsy true that many non js specialists are
+overwhelmed with the frontend world: functional components, hooks, and many other
+fancy words. Also, what is available in the compilation context may be difficult,
+there is a lot of black magic going on in pretty much every framework. Vue
+somehow join various namespaces into one, under the hood, and add various internal
+keys. Svelte transform the code. React require that state transformations are
+deep, and not shallow.
+
+Owl is trying very hard to have a simple and familiar API. It uses classes. Its
+reactivity system is explicit, not implicit. The scoping rules are obvious. In
+case of doubt, we err on the side of not implementing a feature.
+
+It is certainly different from React or Vue, but at the same time, kind of
+familiar for experienced developers.
+
+## JIT compilation
+
+There is also a clear trend in the frontend world to compile code
+as much as possible ahead of time. Most frameworks will compile templates ahead
+of time. And now Svelte is trying to compile the JS code away, so it can remove
+itself from the bundle.
+
+This is certainly reasonable for many usecases. However, this is not what Odoo
+needs: Odoo will fetch templates from the database and need to compile them only
+at the last possible moment, so we can apply all necessary xpaths.
+
+Even more: Odoo needs to be able to generate (and compile) templates at runtime.
+Currently, Odoo form views interpret an xml description. But the form view code
+then needs to do a lot of complicated operations. With Owl, we will be able to
+transform a view description into a QWeb template, then compile that and use it
+immediately.
+
+## Reactivity
+
+There are other design choices that we feel are not optimal in other frameworks.
+For example, the reactivity system. We like the way Vue did it, but it has a
+flaw: it is not really optional. There is actually a way to opt out of the reactivity
+system by freezing the state, but then, it is freezed.
+
+And there certainly are situations where we need a state, which is not read-only,
+and not observed. For example, imagine a spreadsheet component. It may have a
+very large internal state, and it knows exactly when it needs to be rendered
+(basically, whenever the user performs some action). Then, observing its state
+is a net performance loss, both for the CPU and the memory.
+
+## Concurrency
+
+Many applications are happy to simply display a spinner whenever a new asynchronous
+action is performed, but Odoo wants a different user experience: most asynchronous
+state changes are not displayed until ready. This is sometimes called a concurrent
+mode: the UI is rendered in memory, and displayed only when it is ready (and
+only if it has not been cancelled by subsequent user actions).
+
+React has now an experimental concurrent mode, but it was not ready when Owl
+started. Vue has not really an equivalent API (suspense is not what we need).
+
+Also, React concurrent mode is complex to use. Concurrency was one of the rare
+strong point of the former Odoo js framework (widgets), and we feel that Owl has
+now a very strong concurrent mode, which is simple and powerful at the same time.
+
+## Conclusion
+
+This lengthy discussion showed that there are many small and not so small reasons
+that current standard frameworks are not tailored to our needs. It is perfectly
+fine, because they each chose a different set of tradeoffs.
+
+However, we feel that there is still room in the framework world for something
+that is different. For a framework that makes choices compatible with Odoo.
+
+And that is why we built Owl 🦉.

doc/quick_start.md

@@ -1,61 +0,0 @@
-# Quick Start
-
-To build an application (or a sub-part of an application), we need two things:
-
-- an environment
-- a root widget
-
-Here are a few steps that may be useful to get started:
-
-- get the templates
-- create a qweb engine, with the templates
-- create an environment
-- create an instance of the root widget
-- mount the root widget to a DOM element
-
-## Simple example
-
-In a oversimplified example, here is what it could look like:
-
-```javascript
-const templates = await loadTemplates();
-
-const qweb = new QWeb();
-qweb.loadTemplates(templates);
-
-const env = {
-  qweb: qweb
-};
-
-const root = new RootWidget(env, { initialState: 17 });
-
-const target = document.getElementById("app");
-root.mount(target);
-```
-
-## Managing state
-
-The environment is propagated to each subchildren. So, it is convenient to use
-to give a reference to some global object. This is potentially very useful
-in a redux-like architecture:
-
-```javascript
-...
-
-const store = new Store();
-
-const env = {
-    qweb: qweb,
-    store: store,
-};
-
-const state = store.getState()
-const root = new RootWidget(env, state);
-
-store.on('state_change', nextState => {
-    root.updateProps(nextState);
-});
-
-const target = document.getElementById('app');
-root.mount(target);
-```

doc/qweb.md

@@ -1,35 +0,0 @@
-# QWeb
-
-QWeb is a template specification. The QWeb class in this repository is:
-
-- an implementation of the QWeb specification
-- which outputs a virtual dom instead of a string
-- and extended with a few extra directives
-
-## QWeb Specification
-
-add here a full description of what QWeb is supposed to be, with some examples
-
-## QWeb Implementation
-
-```javascript
-var qweb = new QWeb();
-qweb.addTemplate("sometemplate", '<div>hello <t t-esc="name"/></div>');
-
-// result is a vnode which represent <div>hello world</div>
-result = qweb.render("sometemplate", { name: "world" });
-```
-
-## QWeb extensions
-
-- t-on directive
-- t-widget, t-props, t-key
-- t-ref
-
-## Note on white spaces
-
-White spaces in a templates are handled in a special way:
-
-- consecutive whitespaces are always condensed to a single whitespace
-- if a whitespace-only text node contains a linebreak, it is ignored
-- the previous rules do not apply if we are in a `<pre>` tag

doc/readme.md

@@ -1,22 +1,48 @@
-# Odoo Web Lab Documentation
+# 🦉 Owl overview 🦉
 
-Currently, this repository contains:
+Here is a list of everything exported by the Owl library:
 
-1. **core**
+Main entities:
 
-   - an implementation/extension of the QWeb template engine that outputs a virtual
-     dom (using the snabbdom library)
-   - a Component class, which uses the QWeb engine as its underlying rendering
-     mechanism. The component class is designed to be declarative, with
-     asynchronous rendering. Also, it uses snabbdom as the virtual dom library.
-   - some utility functions/classes
+- [`App`](reference/app.md): represent an Owl application (mainly a root component,a set of templates, and a config)
+- [`Component`](reference/component.md): the main class to define a concrete Owl component
+- [`mount`](reference/app.md#mount-helper): main entry point for most application: mount a component to a target
+- [`xml`](reference/templates.md#inline-templates): helper to define an inline template
 
-2. **extras**
-   - a Store class and a connect function, to help manage the state of an application (like react-redux)
-   - a Registry: this is a simple key/store mapping
+Reactivity
 
-- [Quick Start](quick_start.md)
-- [Tutorial](tutorial.md)
-- [Component](component.md)
-- [QWeb](qweb.md)
-- [State Management](state_management.md)
+- [`useState`](reference/reactivity.md#usestate): create a reactive object (hook, linked to a specific component)
+- [`reactive`](reference/reactivity.md#reactive): create a reactive object (not linked to any component)
+- [`markRaw`](reference/reactivity.md#markraw): mark an object or array so that it is ignored by the reactivity system
+- [`toRaw`](reference/reactivity.md#toraw): given a reactive objet, return the raw (non reactive) underlying object
+
+Lifecycle hooks:
+
+- [`onWillStart`](reference/component.md#willstart): hook to define asynchronous code that should be executed before component is rendered
+- [`onMounted`](reference/component.md#mounted): hook to define code that should be executed when component is mounted
+- [`onWillPatch`](reference/component.md#willpatch): hook to define code that should be executed before component is patched
+- [`onWillUpdateProps`](reference/component.md#willupdateprops): hook to define code that should be executed before component is updated
+- [`onPatched`](reference/component.md#patched): hook to define code that should be executed when component is patched
+- [`onWillRender`](reference/component.md#willrender): hook to define code that should be executed before component is rendered
+- [`onRendered`](reference/component.md#rendered): hook to define code that should be executed after component is rendered
+- [`onWillUnmount`](reference/component.md#willunmount): hook to define code that should be executed before component is unmounted
+- [`onWillDestroy`](reference/component.md#willdestroy): hook to define code that should be executed before component is destroyed
+- [`onError`](reference/component.md#onerror): hook to define a Owl error handler
+
+Other hooks:
+
+- [`useComponent`](reference/hooks.md#usecomponent): return a reference to the current component (useful to create derived hooks)
+- [`useEffect`](reference/hooks.md#useeffect): define an effect with its dependencies
+- [`useEnv`](reference/hooks.md#useenv): return a reference to the current env
+- [`useExternalListener`](reference/hooks.md#useexternallistener): add a listener outside of a component DOM
+- [`useRef`](reference/hooks.md#useref): get an object representing a reference (`t-ref`)
+- [`useChildSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for child components)
+- [`useSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for current component and child components)
+
+Utility/helpers:
+
+- [`EventBus`](reference/utils.md#eventbus): a simple event bus
+- [`loadFile`](reference/utils.md#loadfile): an helper to load a file from the server
+- [`markup`](reference/templates.md#outputting-data): utility function to define strings that represent html (should not be escaped)
+- [`status`](reference/component.md#status-helper): utility function to get the status of a component (new, mounted or destroyed)
+- [`whenReady`](reference/utils.md#whenready): utility function to execute code when DOM is ready

doc/reference/app.md

@@ -0,0 +1,119 @@
+# 🦉 App 🦉
+
+## Content
+
+- [Overview](#overview)
+- [API](#api)
+- [Configuration](#configuration)
+- [`mount` helper](#mount-helper)
+- [Loading templates](#loading-templates)
+
+## Overview
+
+Every Owl application has a root element, a set of templates, an environment and
+possibly a few other settings. The `App` class is a simple class that represents
+all of these elements. Here is an example:
+
+```js
+const {Component, App } = owl;
+
+class MyComponent extends Component { ... }
+
+const app = new App(MyComponent, { props: {...}, templates: "..."});
+app.mount(document.body);
+```
+
+The basic workflow is: create an `App` instance configured with the root
+component, the templates, and possibly other settings. Then, we mount that
+instance somewhere in the DOM.
+
+## API
+
+- **`constructor(Root[, config])`**: first argument should be a component class (not
+  an instance), and the optional second argument is a configuration object (see below).
+
+- **`mount(target, options)`**: first argument is an html element, and the optional
+  second argument is an object with mounting options (see below). Mount the app
+  to a target in the DOM. Note that this is an asynchronous operation: the `mount`
+  method returns a promise that resolves to the component instance whenever it
+  is complete.
+
+  The `option` object is an object with the following keys:
+
+  - **`position (string)`**: either `first-child` or `last-child`. This option determines
+    the position of the application in the target: either first or last child.
+
+- **`destroy()`**: destroys the application
+
+## Configuration
+
+The `config` object is an object with some of the following keys:
+
+- **`env (object)`**: if given, this will be the shared `env` given to each component
+- **`props (object)`**: the props given to the root component
+- **`dev (boolean, default=false)`**: if `true`, the application is rendered in
+  [`dev` mode](#dev-mode);
+- **`test (boolean, default=false)`**: `test` mode is the same as `dev` mode, except
+  that Owl will not log a message to warn that Owl is in `dev` mode.
+- **`translatableAttributes (string[])`**: a list of additional attributes that should
+  be translated (see [translations](translations.md))
+- **`translateFn (function)`**: a function that will be called by owl to translate
+  templates (see [translations](translations.md))
+- **`templates (string | xml document)`**: all the templates that will be used by
+  the components created by the application.
+
+## `mount` helper
+
+Note that there is a `mount` helper to do that in just a line:
+
+```js
+const { mount, Component } = owl;
+
+class MyComponent extends Component {
+    ...
+}
+
+mount(MyComponent, document.body, { props: {...}, templates: "..."});
+```
+
+Here is the `mount` function signature:
+
+**`mount(Component, target, config)`** with the following arguments:
+
+- **`Component`**: a component class (Root component of the app)
+- **`target`**: an html element, where the component will be mounted as last child
+- **`config (optional)`**: a config object (the same as the App config object)
+
+Most of the time, the `mount` helper is more convenient, but whenever one needs
+a reference to the actual Owl App, then using the `App` class directly is
+possible.
+
+## Loading templates
+
+Most applications will need to load templates whenever they start. Here is
+what it could look like in practice:
+
+```js
+// in the main js file:
+const { loadFile, mount } = owl;
+
+// async, so we can use async/await
+(async function setup() {
+  const templates = await loadFile(`/some/endpoint/that/return/templates`);
+  const env = {
+    _t: someTranslateFn,
+    templates,
+    // possibly other stuff
+  };
+
+  mount(Root, document.body, { env });
+})();
+```
+
+## Dev mode
+
+Dev mode activates some additional checks and developer amenities:
+
+- [Props validation](./props.md#props-validation) is performed
+- [t-foreach](./templates.md#loops) loops check for key unicity
+- Lifecycle hooks are wrapped to report their errors in a more developer-friendly way

doc/reference/component.md

@@ -0,0 +1,454 @@
+# 🦉 Owl Component 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Properties and methods](#properties-and-methods)
+- [Static Properties](#static-properties)
+- [Lifecycle](#lifecycle)
+  - [`setup`](#setup)
+  - [`willStart`](#willstart)
+  - [`willRender`](#willrender)
+  - [`rendered`](#rendered)
+  - [`mounted`](#mounted)
+  - [`willUpdateProps`](#willupdateprops)
+  - [`willPatch`](#willpatch)
+  - [`patched`](#patched)
+  - [`willUnmount`](#willunmount)
+  - [`willDestroy`](#willdestroy)
+  - [`onError`](#onerror)
+- [Sub components](#sub-components)
+- [Dynamic Sub components](#dynamic-sub-components)
+- [`status` helper](#status-helper)
+
+## Overview
+
+An Owl component is a small class which represents some part of the user interface.
+It is part of a component tree, and has an [environment](environment.md) (`env`),
+which is propagated from a parent to its children.
+
+OWL components are defined by subclassing the `Component` class. For example,
+here is how a `Counter` component could be implemented:
+
+```javascript
+const { Component, xml, useState } = owl;
+
+class Counter extends Component {
+  static template = xml`
+    <button t-on-click="increment">
+      Click Me! [<t t-esc="state.value"/>]
+    </button>`;
+
+  state = useState({ value: 0 });
+
+  increment() {
+    this.state.value++;
+  }
+}
+```
+
+In this example, we use the `xml` helper to define inline templates, and the
+`useState` hook, which returns a reactive version of its argument (see the page
+on reactivity).
+
+## Properties and methods
+
+The `Component` class has a very small API.
+
+- **`env (object)`**: the component [environment](environment.md)
+
+- **`props (object)`**: this is an object containing all the [props](props.md) given by
+  the parent to a child component
+
+  Note that `props` are owned by the parent, not by the component.
+  As such, it should not ever be modified by the component (otherwise you risk
+  unintended effects, since the parent may not be aware of the change)!!
+
+  The `props` can be modified dynamically by the parent. In that case, the
+  component will go through the following lifecycle methods: `willUpdateProps`,
+  `willPatch` and `patched`.
+
+* **`render(deep[=false])`**: calling this method directly will cause a rerender. Note
+  that with the reactivity system, this should be rare to have to do it manually.
+  Also, the rendering operation is asynchronous, so the DOM will only be updated
+  slightly later (at the next animation frame, if no component delays the
+  rendering)
+
+  By default, the render initiated by this method will stop at each child
+  component if their props are (shallow) equal. To force a render to update
+  all child components, one can use the optional `deep` argument.
+
+## Static Properties
+
+- **`template (string)`**: this is the name of the template that
+  will render the component. Note that there is a helper `xml` to
+  make it easy to define an inline template.
+
+* **`components (object, optional)`**: if given, this is an object that contains
+  the classes of any sub components needed by the template.
+
+  ```js
+  class ParentComponent extends owl.Component {
+    static components = { SubComponent };
+  }
+  ```
+
+* **`props (object, optional)`**: if given, this is an object that describes the
+  type and shape of the (actual) props given to the component. If Owl mode is
+  `dev`, this will be used to validate the props each time the component is
+  created/updated. See [Props Validation](props.md#props-validation) for more information.
+
+  ```js
+  class Counter extends owl.Component {
+    static props = {
+      initialValue: Number,
+      optional: true,
+    };
+  }
+  ```
+
+- **`defaultProps (object, optional)`**: if given, this object define default
+  values for (top-level) props. Whenever `props` are given to the object, they
+  will be altered to add default value (if missing). Note that it does not
+  change the initial object, a new object will be created instead. See
+  [default props](props.md#default-props) for more information
+
+  ```js
+  class Counter extends owl.Component {
+    static defaultProps = {
+      initialValue: 0,
+    };
+  }
+  ```
+
+## Lifecycle
+
+A solid and robust component system needs a complete lifecycle system to help
+developers write components. Here is a complete description of the lifecycle of
+a Owl component:
+
+| Method                                  | Hook                | Description                                                            |
+| --------------------------------------- | ------------------- | ---------------------------------------------------------------------- |
+| **[setup](#setup)**                     | none                | setup                                                                  |
+| **[willStart](#willstart)**             | `onWillStart`       | async, before first rendering                                          |
+| **[willRender](#willrender)**           | `onWillRender`      | just before component is rendered                                      |
+| **[rendered](#rendered)**               | `onRendered`        | just after component is rendered                                       |
+| **[mounted](#mounted)**                 | `onMounted`         | just after component is rendered and added to the DOM                  |
+| **[willUpdateProps](#willupdateprops)** | `onWillUpdateProps` | async, before props update                                             |
+| **[willPatch](#willpatch)**             | `onWillPatch`       | just before the DOM is patched                                         |
+| **[patched](#patched)**                 | `onPatched`         | just after the DOM is patched                                          |
+| **[willUnmount](#willunmount)**         | `onWillUnmount`     | just before removing component from DOM                                |
+| **[willDestroy](#willdestroy)**         | `onWillDestroy`     | just before component is destroyed                                     |
+| **[error](#onerror)**                   | `onError`           | catch and handle errors (see [error handling page](error_handling.md)) |
+
+### `setup`
+
+_setup_ is run just after the component is constructed. It is a lifecycle method,
+very similar to the _constructor_, except that it does not receive any argument.
+
+It is the proper place to call hook functions. Note that one of the main reason to
+have the `setup` hook in the component lifecycle is to make it possible to
+monkey patch it. It is a common need in the Odoo ecosystem.
+
+```javascript
+setup() {
+  useSetupAutofocus();
+}
+```
+
+### `willStart`
+
+`willStart` is an asynchronous hook that can be implemented to
+perform some (most of the time asynchronous) action before the initial rendering of a component.
+
+It will be called exactly once before the initial rendering. It is useful
+in some cases, for example, to load external assets (such as a JS library)
+before the component is rendered. Another use case is to load data from a server.
+
+The `onWillStart` hook is used to register a function that will be executed at
+this moment:
+
+```javascript
+  setup() {
+    onWillStart(async () => {
+      this.data = await this.loadData()
+    });
+  }
+```
+
+At this point, the component is not yet rendered. Note that slow `willStart`
+code will slow down the rendering of the user interface. Therefore, some care
+should be made to make this method as fast as possible.
+
+Note that if there are more than one `onWillStart` registered callback, then they
+will all be run in parallel.
+
+### `willRender`
+
+It is uncommon but it may happen that one need to execute code just before a
+component is rendered (more precisely, when its compiled template function is executed).
+To do that, one can use the `onWillRender` hook:
+
+```javascript
+  setup() {
+    onWillRender(() => {
+      // do something
+    });
+  }
+```
+
+`willRender` hooks are called just before rendering templates, parent first,
+then children.
+
+### `rendered`
+
+It is uncommon but it may happen that one need to execute code just after a
+component is rendered (more precisely, when its compiled template function is executed).
+To do that, one can use the `onRendered` hook:
+
+```javascript
+  setup() {
+    onRendered(() => {
+      // do something
+    });
+  }
+```
+
+`rendered` hooks are called just after rendering templates, parent first,
+then children. Note that at this moment, the actual DOM may not exist yet (if
+it is the first rendering), or is not updated yet. This will be dom in the next
+animation frame as soon as all the components are ready.
+
+### `mounted`
+
+The `mounted` hook is called each time a component is attached to the
+DOM, after the initial rendering. At this point, the component is considered
+_active_. This is a good place to add some listeners, or to interact with the
+DOM, if the component needs to perform some measure for example.
+
+It is the opposite of `willUnmount`. If a component has been mounted, it will
+always be unmounted at some point in the future.
+
+The mounted method will be called recursively on each of its children. First,
+children, then parents.
+
+It is allowed (but not encouraged) to modify the state in the `mounted` hook.
+Doing so will cause a rerender, which will not be perceptible by the user, but
+will slightly slow down the component.
+
+The `onMounted` hook is used to register a function that will be executed at
+this moment:
+
+```javascript
+  setup() {
+    onMounted(() => {
+      // do something here
+    });
+  }
+```
+
+### `willUpdateProps`
+
+The `willUpdateProps` is an asynchronous hook, called just before new props
+are set. This is useful if the component needs to perform an asynchronous task,
+depending on the props (for example, assuming that the props are
+some record Id, fetching the record data).
+
+The `onWillUpdateProps` hook is used to register a function that will be executed at
+this moment:
+
+```javascript
+  setup() {
+    onWillUpdateProps(nextProps => {
+      return this.loadData({id: nextProps.id});
+    });
+  }
+```
+
+Notice that it receives the next props for the component.
+
+This hook is not called during the first render (but `willStart` is called
+and performs a similar job). Also, as most of the hooks, it is called in the
+usual order: parents first, then children.
+
+### `willPatch`
+
+The willPatch hook is called just before the DOM patching process starts.
+It is not called on the initial render. This is useful to read
+information from the DOM. For example, the current position of the
+scrollbar.
+
+Note that modifying the state is not allowed here. This method is called just
+before an actual DOM patch, and is only intended to be used to save some local
+DOM state. Also, it will not be called if the component is not in the DOM.
+
+The `onWillPatch` hook is used to register a function that will be executed at
+this moment:
+
+```javascript
+  setup() {
+    onWillPatch(() => {
+      this.scrollState = this.getScrollSTate();
+    });
+  }
+```
+
+The `willPatch` is called in the usual parent->children order.
+
+### `patched`
+
+This hook is called whenever a component did actually update its DOM (most
+likely via a change in its state/props or environment).
+
+This method is not called on the initial render. It is useful to interact
+with the DOM (for example, through an external library) whenever the
+component was patched. Note that this hook will not be called if the component is
+not in the DOM.
+
+The `onPatched` hook is used to register a function that will be executed at
+this moment:
+
+```javascript
+  setup() {
+    onPatched(() => {
+      this.scrollState = this.getScrollSTate();
+    });
+  }
+```
+
+Updating the component state in this hook is possible, but not encouraged.
+One needs to be careful, because updates here will create an additional rendering, which in
+turn will cause other calls to the `patched` method. So, we need to be particularly
+careful at avoiding endless cycles.
+
+Like `mounted`, the `patched` hook is called in the order: children first, then
+parent.
+
+### `willUnmount`
+
+`willUnmount` is a hook that is called each time just before a component is
+unmounted from the DOM. This is a good place to remove listeners, for example.
+
+The `onWillUnmount` hook is used to register a function that will be executed at
+this moment:
+
+```javascript
+  setup() {
+    onMounted(() => {
+      // add some listener
+    });
+    onWillUnmount(() => {
+      // remove listener
+    });
+  }
+```
+
+This is the opposite method of `mounted`. Note that if a component is destroyed
+before being mounted, the `willUnmount` method may not be called.
+
+Parent `willUnmount` hooks will be called before children.
+
+### `willDestroy`
+
+Sometimes, components need to do some action in the `setup` and clean it up when
+they are inactive. However, the `willUnmount` hook is not appropriate for the
+cleaning operation, since the component may be destroyed before it has even been
+mounted. The `willDestroy` hook is useful in that situation, since it is always
+called.
+
+The `onWillUnmount` hook is used to register a function that will be executed at
+this moment:
+
+```javascript
+  setup() {
+    onWillDestroy(() => {
+      // do some cleanup
+    });
+  }
+```
+
+The `willDestroy` hooks are first called on children, then on parents.
+
+### `onError`
+
+Sadly, it may happen that components crashes at runtime. This is an unfortunate
+reality, and this is why Owl needs to provide a way to handle these errors.
+
+The `onError` hook is useful when we need to intercept and properly react
+to errors that occur in some sub components. See the page on
+[error handling](error_handling.md) for more detail.
+
+```javascript
+  setup() {
+    onError(() => {
+      // do something
+    });
+  }
+```
+
+## Sub components
+
+It is convenient to define a component using other (sub) components. This is
+called composition, and is very powerful in practice. To do that in Owl, one
+can just use a tag starting with a capital letter in its template, and register
+the sub component class in its static `components` object:
+
+```js
+class Child extends Component {
+  static template = xml`<div>child component <t t-esc="props.value"/></div>`;
+}
+
+class Parent extends Component {
+  static template = xml`
+    <div>
+      <Child value="1"/>
+      <Child value="2"/>
+    </div>`;
+
+  static components = { Child };
+}
+```
+
+This example also shows how one can pass information from the parent component
+to the child component, as props. See the [props section](props.md)
+for more information.
+
+## Dynamic sub components
+
+It is not common, but sometimes we need a dynamic component name. In this case,
+the `t-component` directive can also be used to accept dynamic values. This should
+be an expression that evaluates to a component class. For example:
+
+```js
+class A extends Component {
+  static template = xml`<div>child a</div>`;
+}
+class B extends Component {
+  static template = xml`<span>child b</span>`;
+}
+class Parent extends Component {
+  static template = xml`<t t-component="myComponent"/>`;
+
+  state = useState({ child: "a" });
+
+  get myComponent() {
+    return this.state.child === "a" ? A : B;
+  }
+}
+```
+
+## `status` helper
+
+It is sometimes convenient to have a way to find out in which state a component
+is currently. To do that, one can use the `status` helper:
+
+```js
+const { status } = owl;
+// assume component is an instance of a Component
+
+console.log(status(component));
+// logs either:
+// - 'new', if the component is new and has not been mounted yet
+// - 'mounted', if the component is currently mounted
+// - 'destroyed' if the component is currently destroyed
+```

doc/reference/concurrency_model.md

@@ -0,0 +1,163 @@
+# 🦉 Concurrency Model 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Rendering Components](#rendering-components)
+- [Semantics](#semantics)
+- [Asynchronous Rendering](#asynchronous-rendering)
+
+## Overview
+
+Owl was designed from the very beginning with asynchronous components. This comes
+from the `willStart` and the `willUpdateProps` lifecycle hooks. With these
+asynchronous hooks, it is possible to build complex highly concurrent applications.
+
+Owl concurrent mode has several benefits: it makes it possible to delay the
+rendering until some asynchronous operation is complete, it makes it possible
+to lazy load libraries, while keeping the previous screen completely functional.
+It is also good for performance reasons: Owl uses it to only apply the result of
+many different renderings only once in an animation frame. Owl can cancel
+a rendering that is no longer relevant, restart it, reuse it in some cases.
+
+But even though using concurrency is quite simple (and is the default behaviour),
+asynchrony is difficult, because it introduces an additional dimension that
+vastly increase the complexity of an application. This section will explain
+how Owl manages this complexity, how concurrent rendering works in a general way.
+
+## Rendering Components
+
+The word _rendering_ is a little vague, so, let us explain more precisely the
+process by which Owl components are displayed on a screen.
+
+When a component is mounted or updated, a new rendering is started. It has
+two phases: _virtual rendering_ and _patching_.
+
+### Virtual rendering
+
+This phase represent the process of rendering a template, in memory, which creates
+a virtual representation of the desired component html). The output of this phase is a
+virtual DOM.
+
+It is asynchronous: each subcomponents needs to either be created (so, `willStart`
+will need to be called), or updated (which is done with the `willUpdateProps`
+method). This is completely a recursive process: a component is the root of a
+component tree, and each sub component needs to be (virtually) rendered.
+
+### Patching
+
+Once a rendering is complete, it will be applied on the next animation frame.
+This is done synchronously: the whole component tree is patched to the real
+DOM.
+
+## Semantics
+
+We give here an informal description of the way components are created/updated
+in an application. Here, ordered lists describe actions that are executed
+sequentially, bullet lists describe actions that are executed in parallel.
+
+**Scenario 1: initial rendering** Imagine we want to render the following component tree:
+
+```
+        A
+       / \
+      B   C
+         / \
+        D   E
+```
+
+Here is what happen whenever we mount the root
+component (with some code like `app.mount(document.body)`).
+
+1. `willStart` is called on `A`
+
+2. when it is done, template `A` is rendered.
+
+   - component `B` is created
+     1. `willStart` is called on `B`
+     2. template `B` is rendered
+   - component `C` is created
+     1. `willStart` is called on `C`
+     2. template `C` is rendered
+        - component `D` is created
+          1. `willStart` is called on `D`
+          2. template `D` is rendered
+        - component `E` is created
+          1. `willStart` is called on `E`
+          2. template `E` is rendered
+
+3. each components are patched into a detached DOM element, in the following order:
+   `E`, `D`, `C`, `B`, `A`. (so the actual full DOM tree is created
+   in one pass)
+
+4. the component `A` root element is actually appended to `document.body`
+
+5. The method `mounted` is called recursively on all components in the following
+   order: `E`, `D`, `C`, `B`, `A`.
+
+**Scenario 2: updating a component**. Now, let's assume that the user clicked on some
+button in `C`, and this results in a state update, which is supposed to:
+
+- update `D`,
+- remove `E`,
+- add new component `F`.
+
+So, the component tree should look like this:
+
+```
+        A
+       / \
+      B   C
+         / \
+        D   F
+```
+
+Here is what Owl will do:
+
+1. because of a state change, the method `render` is called on `C`
+2. template `C` is rendered again
+
+   - component `D` is updated:
+     1. hook `willUpdateProps` is called on `D` (async)
+     2. template `D` is rerendered
+   - component `F` is created:
+     1. hook `willStart` is called on `F` (async)
+     2. template `F` is rendered
+
+3. `willPatch` hooks are called recursively on components `C`, `D` (not on `F`,
+   because it is not mounted yet)
+
+4. components `F`, `D` are patched in that order
+
+5. component `C` is patched, which will cause recursively:
+
+   1. `willUnmount` hook on `E`
+   2. destruction of `E`,
+
+6. `mounted` hook is called on `F`, `patched` hooks are called on `D`, `C`
+
+Tags are very small helpers to make it easy to write inline templates. There is
+only one currently available tag: `xml`.
+
+### Asynchronous Rendering
+
+Working with asynchronous code always adds a lot of complexity to a system. Whenever
+different parts of a system are active at the same time, one needs to think
+carefully about all possible interactions. Clearly, this is also true for Owl
+components.
+
+There are two different common problems with Owl asynchronous rendering model:
+
+- any component can delay the rendering (initial and subsequent) of the whole
+  application
+- for a given component, there are two independant situations that will trigger an
+  asynchronous rerendering: a change in the state, or a change in the props.
+  These changes may be done at different times, and Owl has no way of knowing
+  how to reconcile the resulting renderings.
+
+Here are a few tips on how to work with asynchronous components:
+
+1. Minimize the use of asynchronous components!
+2. Lazy loading external libraries is a good use case for async rendering. This
+   is mostly fine, because we can assume that it will only takes a fraction of a
+   second, and only once.

doc/reference/context.md

@@ -0,0 +1,105 @@
+# 🦉 Context 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Example](#example)
+- [Reference](#reference)
+  - [`Context`](#context)
+  - [`useContext`](#usecontext)
+
+## Overview
+
+The `Context` object provides a way to share data between an arbitrary number
+of components. Usually, data is passed from a parent to its children component,
+but when we have to deal with some mostly global information, this can be
+annoying, since each component will need to pass the information to each children,
+even though some or most of them will not use the information.
+
+With a `Context` object, each component can subscribe (with the `useContext` hook)
+to its state, and will be updated whenever the context state is updated.
+
+## Example
+
+Assume that we have an application with various components which needs to render
+differently depending on the size of the device. Here is how we could proceed
+to make sure that the information is properly shared. First, let us create a
+context, and add it to the environment:
+
+```js
+const deviceContext = new Context({ isMobile: true });
+App.env.deviceContext = deviceContext;
+```
+
+If we want to make it completely responsive, we need to update its value whenever
+the size of the screen is updated:
+
+```js
+const isMobile = () => window.innerWidth <= 768;
+window.addEventListener(
+  "resize",
+  owl.utils.debounce(() => {
+    const state = deviceContext.state;
+    if (state.isMobile !== isMobile()) {
+      state.isMobile = !state.isMobile;
+    }
+  }, 15)
+);
+```
+
+Then, each component that want can subscribe and render differently depending on the
+fact that we are in a mobile or desktop mode.
+
+```js
+class SomeComponent extends Component {
+  static template = xml`
+    <div>
+      <t t-if=device.isMobile>
+          some simplified user interface
+      </t>
+      <t t-else="">
+          a more advanced user interface
+      </t>
+    </div>`;
+  device = useContext(this.env.deviceContext);
+}
+```
+
+## Reference
+
+### `Context`
+
+A `Context` object should be created with a state object:
+
+```js
+const someContext = new Context({ some: "key" });
+```
+
+Its state is now available in the `state` key:
+
+```js
+someContext.state.some = "other key";
+```
+
+This is the way some global code (such as the responsive code above) should
+read and update the context state. However, components should not ever read the
+context state directly from the context, they should instead use the `useContext`
+hook to properly register themselves to state changes.
+
+Note that the `Context` hook is different from the React version. For example,
+there is no concept of provider/consumer. So, the `Context` feature does not
+by itself allow the use of a different context state depending on the component
+place in the component tree. However, this functionality can be obtained, if
+necessary, with the use of sub environment.
+
+### `useContext`
+
+The `useContext` hook is the normal way for a component to register themselve
+to context state changes. The `useContext` method returns the context state:
+
+```js
+device = useContext(this.env.deviceContext);
+```
+
+It is a simple observed state (with an owl `Observer`), which contains the shared
+information.

doc/reference/environment.md

@@ -0,0 +1,76 @@
+# 🦉 Environment 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Setting an Environment](#setting-an-environment)
+- [Using a sub environment](#using-a-sub-environment)
+- [Content of an Environment](#content-of-an-environment)
+
+## Overview
+
+An environment is a shared object given to all components in a tree. It is not
+used by Owl itself, but it is useful for application developers to provide a
+simple communication channel between components (in addition to the props).
+
+The `env` given to the [`App`](app.md) is assigned to the `env` component
+property.
+
+```
+    Root
+    /  \
+   A    B
+```
+
+Also, the `env` object is frozen when the application is started. This is done
+to ensure a simpler mental model of what's happening in runtime. Note that it
+is only shallowly frozen, so sub objects can be modified.
+
+## Setting an environment
+
+The correct way to customize an environment is to simply give it to the `App`,
+whenever it is created.
+
+```js
+const env = {
+    _t: myTranslateFunction,
+    user: {...},
+    services: {
+        ...
+    },
+};
+
+new App(Root, { env }).mount(document.body);
+
+// or alternatively
+mount(App, document.body, { env });
+```
+
+## Using a sub environment
+
+It is sometimes useful to add one (or more) specific keys to the environment,
+from the perspective of a specific component and its children. In that case, the
+solution presented above will not work, since it sets the global environment.
+
+There are two hooks for this situation: [`useSubEnv` and `useChildSubEnv`](hooks.md#usesubenv-and-usechildsubenv).
+
+```js
+class SomeComponent extends Component {
+  setup() {
+    useSubEnv({ myKey: someValue }); // myKey is now available for all child components
+  }
+}
+```
+
+## Content of an Environment
+
+The `env` object content is totally up to the application developer. However,
+some good use cases for additional keys in the environment are:
+
+- some configuration keys,
+- session information,
+- generic services (such as doing rpcs).
+- other utility functions that one want to inject, such as a translation function.
+
+Doing it this way means that components are easily testable: we can simply
+create a test environment with mock services.

doc/reference/error_handling.md

@@ -0,0 +1,75 @@
+# 🦉 Error Handling 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Managing Errors](#managing-errors)
+- [Example](#example)
+
+## Overview
+
+By default, whenever an error occurs in the rendering of an Owl application, we
+destroy the whole application. Otherwise, we cannot offer any guarantee on the
+state of the resulting component tree. It might be hopelessly corrupted, but
+without any user-visible feedback.
+
+Clearly, it is usually a little bit extreme to destroy the application. This
+is why we need a mechanism to handle rendering errors (and errors coming
+from lifecycle hooks): the `onError` hook.
+
+The main idea is that the `onError` hook register a function that will be called
+with the error. This function need to handle the situation, most of the time by
+updating some state and rerendering itself, so the application can return to a
+normal state.
+
+## Managing Errors
+
+Whenever the `onError` lifecycle hook is used, all errors coming from
+sub components rendering and/or lifecycle method calls will be caught and given
+to the `onError` method. This allows us to properly handle the error, and to
+not break the application.
+
+There are important things to know:
+
+- If an error that occured in the internal rendering cycle is not caught, then
+  Owl will destroy the full application. This is done on purpose, because Owl
+  cannot guarantee that the state is not corrupted from this point on.
+
+- errors coming from event handlers are NOT managed by `onError` or any other
+  owl mechanism. This is up to the application developer to properly recover
+  from an error
+
+- if an error handler is unable to properly handle an error, it can just rethrow
+  an error, and Owl will try looking for another error handler up the component
+  tree.
+
+## Example
+
+For example, here is how we could implement a generic component `ErrorBoundary`
+that render its content, and a fallback if an error happened.
+
+```js
+class ErrorBoundary extends Component {
+  static template = xml`
+    <t t-if="error" t-slot="fallback">An error occurred</t>
+    <t t-else="" t-slot="content"`;
+
+  setup() {
+    this.state = useState({ error: false });
+    onError(() => (this.state.error = true));
+  }
+}
+```
+
+Using the `ErrorBoundary` is then simple simple:
+
+```xml
+<ErrorBoundary>
+  <SomeOtherComponent/>
+  <t t-set-slot="fallback">Some specific error message</t>
+</ErrorBoundary>
+```
+
+Note that we need to be careful here: the fallback UI should not throw any
+error, otherwise we risk going into an infinite loop (also, see the page on
+[slots](slots.md) for more information on the `t-slot` directive).

doc/reference/event_handling.md

@@ -0,0 +1,119 @@
+# 🦉 Event Handling 🦉
+
+## Content
+
+- [Event Handling](#event-handling)
+- [Modifiers](#modifiers)
+- [Synthetic Events](#synthetic-events)
+- [On Components](#on-components)
+
+## Event Handling
+
+In a component's template, it is useful to be able to register handlers on DOM
+elements to some specific events. This is what makes a template _alive_. This
+is done with the `t-on` directive. For example:
+
+```xml
+<button t-on-click="someMethod">Do something</button>
+```
+
+This will be roughly translated in javascript like this:
+
+```js
+button.addEventListener("click", component.someMethod.bind(component));
+```
+
+The suffix (`click` in this example) is simply the name of the actual DOM
+event. The value of the `t-on` expression should be a valid javascript expression
+that evaluates to a function in the context of the current component. So, one
+can get a reference to the event, or pass some additional arguments. For example,
+all the following expressions are valid:
+
+```xml
+<button t-on-click="someMethod">Do something</button>
+<button t-on-click="() => this.increment(3)">Add 3</button>
+<button t-on-click="ev => this.doStuff(ev, 'value')">Do something</button>
+```
+
+Notice the use of the `this` keyword in the lambda function: this is the
+correct way to call a method on the component in a lambda function.
+
+One could use the following expression:
+
+```xml
+<button t-on-click="() => increment(3)">Add 3</button>
+```
+
+But then, the increment function may be unbound (unless the component binds it
+in its setup function, for example).
+
+## Modifiers
+
+In order to remove the DOM event details from the event handlers (like calls to
+`event.preventDefault`) and let them focus on data logic, _modifiers_ can be
+specified as additional suffixes of the `t-on` directive.
+
+| Modifier     | Description                                                                                                              |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
+| `.stop`      | calls `event.stopPropagation()` before calling the method                                                                |
+| `.prevent`   | calls `event.preventDefault()` before calling the method                                                                 |
+| `.self`      | calls the method only if the `event.target` is the element itself                                                        |
+| `.capture`   | bind the event handler in [capture](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) mode. |
+| `.synthetic` | define a synthetic event handler (see below)                                                                             |
+
+```xml
+<button t-on-click.stop="someMethod">Do something</button>
+```
+
+Note that modifiers can be combined (ex: `t-on-click.stop.prevent`), and that
+the order may matter. For instance `t-on-click.prevent.self` will prevent all
+clicks while `t-on-click.self.prevent` will only prevent clicks on the element
+itself.
+
+Finally, empty handlers are tolerated as they could be defined only to apply
+modifiers. For example,
+
+```xml
+<button t-on-click.stop="">Do something</button>
+```
+
+This will simply stop the propagation of the event.
+
+## Synthetic Events
+
+In some cases, attaching an event handler for each element of large lists has
+a non trivial cost. Owl provides a way to efficiently improve the performance:
+with synthetic event, it actually adds only one handler on the document body,
+and will properly call the handler, just as expected.
+
+The only difference with regular events is that the event is caught at the document
+body, so it cannot be stopped before it actually gets there. Since it may be
+surprising in some cases, it is not enabled by default.
+
+To enable it, one can just use the `.synthetic` suffix:
+
+```xml
+<div>
+    <t t-foreach="largeList" t-as="elem" t-key="elem.id">
+        <button t-on-click.synthetic="doSomething" ...>
+            <!-- some content -->
+        </button>
+    </t>
+</div>
+```
+
+## On Components
+
+The `t-on` directive also works on a child component:
+
+```xml
+<div>
+    in some template
+    <Child t-on-click="dosomething"/>
+</div>
+```
+
+This will catch all click events on any html element contained in the `Child`
+sub component. Note that if the child component is reduced to one (or more) text
+nodes, then clicking on it will not call the handler, since the event will be
+dispatched by the browser on the parent element (a `div` in this case).

doc/reference/hooks.md

@@ -0,0 +1,324 @@
+# 🦉 Hooks 🦉
+
+## Content
+
+- [Overview](#overview)
+- [The Hook Rule](#the-hook-rule)
+- [Lifecycle hooks](#lifecycle-hooks)
+- [Other hooks](#other-hooks)
+  - [`useState`](#usestate)
+  - [`useRef`](#useref)
+  - [`useSubEnv` and `useChildSubEnv`](#usesubenv-and-usechildsubenv)
+  - [`useExternalListener`](#useexternallistener)
+  - [`useComponent`](#usecomponent)
+  - [`useEnv`](#useenv)
+  - [`useEffect`](#useeffect)
+- [Example: Mouse Position](#example-mouse-position)
+
+## Overview
+
+Hooks were popularised by React as a way to solve the following issues:
+
+- help reusing stateful logic between components
+- help organizing code by feature in complex components
+- use state in functional components, without writing a class.
+
+Owl hooks serve the same purpose, except that they work for class components
+(note: React hooks do not work on class components, and maybe because of that,
+there seems to be the misconception that hooks are in opposition to class. This
+is clearly not true, as shown by Owl hooks).
+
+Hooks work beautifully with Owl components: they solve the problems mentioned
+above, and in particular, they are the perfect way to make your component
+reactive.
+
+## The Hook Rule
+
+There is only one rule: every hook for a component has to be called in the _setup_ method, or in class fields:
+
+```js
+// ok
+class SomeComponent extends Component {
+  state = useState({ value: 0 });
+}
+
+// also ok
+class SomeComponent extends Component {
+  setup() {
+    this.state = useState({ value: 0 });
+  }
+}
+
+// not ok: this is executed after the constructor is called
+class SomeComponent extends Component {
+  async willStart() {
+    this.state = useState({ value: 0 });
+  }
+}
+```
+
+## Lifecycle Hooks
+
+All lifecycle hooks are documented in detail in their specific [section](component.md#lifecycle).
+
+| Hook                                                  | Description                                                            |
+| ----------------------------------------------------- | ---------------------------------------------------------------------- |
+| **[onWillStart](component.md#willstart)**             | async, before first rendering                                          |
+| **[onWillRender](component.md#willrender)**           | just before component is rendered                                      |
+| **[onRendered](component.md#rendered)**               | just after component is rendered                                       |
+| **[onMounted](component.md#mounted)**                 | just after component is rendered and added to the DOM                  |
+| **[onWillUpdateProps](component.md#willupdateprops)** | async, before props update                                             |
+| **[onWillPatch](component.md#willpatch)**             | just before the DOM is patched                                         |
+| **[onPatched](component.md#patched)**                 | just after the DOM is patched                                          |
+| **[onWillUnmount](component.md#willunmount)**         | just before removing component from DOM                                |
+| **[onWillDestroy](component.md#willdestroy)**         | just before component is destroyed                                     |
+| **[onError](component.md#onerror)**                   | catch and handle errors (see [error handling page](error_handling.md)) |
+
+## Other Hooks
+
+### `useState`
+
+The `useState` hook is certainly the most important hook for Owl components:
+this is what allows a component to be reactive, to react to state change.
+
+The `useState` hook has to be given an object or an array, and will return
+an observed version of it (using a `Proxy`).
+
+```javascript
+const { useState, Component } = owl;
+
+class Counter extends Component {
+  static template = xml`
+    <button t-on-click="increment">
+        Click Me! [<t t-esc="state.value"/>]
+    </button>`;
+
+  state = useState({ value: 0 });
+
+  increment() {
+    this.state.value++;
+  }
+}
+```
+
+It is important to remember that `useState` only works with objects or arrays. It
+is necessary, since Owl needs to react to a change in state.
+
+### `useRef`
+
+The `useRef` hook is useful when we need a way to interact with some inside part
+of a component, rendered by Owl. It only work on a html element tagged by the
+`t-ref` directive:
+
+```xml
+<div>
+    <input t-ref="someDiv"/>
+    <span>hello</span>
+</div>
+```
+
+In this example, the component will be able to access the `div` and the component
+`SubComponent` with the `useRef` hook:
+
+```js
+class Parent extends Component {
+  inputRef = useRef("someComponent");
+
+  someMethod() {
+    // here, if component is mounted, refs are active:
+    // - this.inputRef.el is the input HTMLElement
+  }
+}
+```
+
+As shown by the example above, the actual HTMLElement instance is accessed with
+the `el` key.
+
+The `t-ref` directive also accepts dynamic values with string interpolation
+(like the [`t-attf-`](templates.md#dynamic-attributes) and
+`t-component` directives). For example,
+
+```xml
+<div t-ref="component_{{someCondition ? '1' : '2'}}"/>
+```
+
+Here, the references need to be set like this:
+
+```js
+this.ref1 = useRef("component_1");
+this.ref2 = useRef("component_2");
+```
+
+References are only guaranteed to be active while the parent component is mounted.
+If this is not the case, accessing `el` or `comp` on it will return `null`.
+
+### `useSubEnv` and `useChildSubEnv`
+
+The environment is sometimes useful to share some common information between
+all components. But sometimes, we want to _scope_ that knowledge to a subtree.
+
+For example, if we have a form view component, maybe we would like to make some
+`model` object available to all sub components, but not to the whole application.
+This is where the `useChildSubEnv` hook may be useful: it lets a component add some
+information to the environment in a way that only its children
+can access it:
+
+```js
+class FormComponent extends Component {
+  setup() {
+    const model = makeModel();
+    // model will be available on this.env for this component and all children
+    useSubEnv({ model });
+    // someKey will be available on this.env for all children
+    useChildSubEnv({ someKey: "value" });
+  }
+}
+```
+
+The `useSubEnv` and `useChildSubEnv` hooks take one argument: an object which
+contains some key/value that will be added to the current environment. These hooks
+will create a new env object with the new information:
+
+- `useSubEnv` will assign this new `env` to itself and to all children components
+- `useChildSubEnv` will only assign this new `env` to all children components.
+
+As usual in Owl, [environments](environment.md) created with these two hooks are
+frozen, to prevent unwanted modifications.
+
+Note that both these hooks can be called an arbitrary number of times. The `env`
+will then be updated accordingly.
+
+### `useExternalListener`
+
+The `useExternalListener` hook helps solve a very common problem: adding and removing
+a listener on some target whenever a component is mounted/unmounted. For example,
+a dropdown menu (or its parent) may need to listen to a `click` event on `window`
+to be closed:
+
+```js
+useExternalListener(window, "click", this.closeMenu);
+```
+
+### `useComponent`
+
+The `useComponent` hook is useful as a building block for some customized hooks,
+that may need a reference to the component calling them.
+
+```js
+function useSomething() {
+  const component = useComponent();
+  // now, component is bound to the instance of the current component
+}
+```
+
+### `useEnv`
+
+The `useEnv` hook is useful as a building block for some customized hooks,
+that may need a reference to the env of the component calling them.
+
+```js
+function useSomething() {
+  const env = useEnv();
+  // now, env is bound to the env of the current component
+}
+```
+
+### `useEffect`
+
+This hook will run a callback when a component is mounted and patched, and
+will run a cleanup function before patching and before unmounting the
+the component (only if some dependencies have changed).
+
+It has almost the same API as the React `useEffect` hook, except that the dependencies
+are defined by a function instead of just the dependencies.
+
+The `useEffect` hook takes two function: the effect function and the dependency
+function. The effect function perform some task and return (optionally) a cleanup
+function. The dependency function returns a list of dependencies. If any of these
+dependencies changes, then the current effect will be cleaned up and reexecuted.
+
+Here is an example without any dependencies:
+
+```js
+useEffect(
+  () => {
+    window.addEventListener("mousemove", someHandler);
+    return () => window.removeEventListener("mousemove", someHandler);
+  },
+  () => []
+);
+```
+
+In the example above, the dependency list is empty, so the effect is only cleaned
+up when the component is unmounted.
+
+If the dependency function is skipped, then the effect will be cleaned up and
+rerun at every patch.
+
+Here is another example, of how one could implement a `useAutofocus` hook with
+the `useEffect` hook:
+
+```js
+function useAutofocus(name) {
+  let ref = useRef(name);
+  useEffect(
+    (el) => el && el.focus(),
+    () => [ref.el]
+  );
+}
+```
+
+This hook takes the name of a valid `t-ref` directive, which should be present
+in the template. It then checks whenever the component is mounted or patched if
+the reference is not valid, and in this case, it will focus the node element.
+This hook can be used like this:
+
+```js
+class SomeComponent extends Component {
+  static template = xml`
+    <div>
+        <input />
+        <input t-ref="myinput"/>
+    </div>`;
+
+  setup() {
+    useAutofocus("myinput");
+  }
+}
+```
+
+## Example: mouse position
+
+Here is the classical example of a non trivial hook to track the mouse position.
+
+```js
+const { useState, onWillDestroy, Component } = owl;
+
+// We define here a custom behaviour: this hook tracks the state of the mouse
+// position
+function useMouse() {
+  const position = useState({ x: 0, y: 0 });
+
+  function update(e) {
+    position.x = e.clientX;
+    position.y = e.clientY;
+  }
+  window.addEventListener("mousemove", update);
+  onWillDestroy(() => {
+    window.removeEventListener("mousemove", update);
+  });
+
+  return position;
+}
+
+// Main root component
+class Root extends Component {
+  static template = xml`<div>Mouse: <t t-esc="mouse.x"/>, <t t-esc="mouse.y"/></div>`;
+
+  // this hooks is bound to the 'mouse' property.
+  mouse = useMouse();
+}
+```
+
+Note that we use the prefix `use` for hooks, just like in React. This is just
+a convention.

doc/reference/input_bindings.md

@@ -0,0 +1,92 @@
+# 🦉 Form Input Bindings 🦉
+
+It is very common to need to be able to read the value out of an html `input` (or
+`textarea`, or `select`) in order to use it (note: it does not need to be in a
+form!). A possible way to do this is to do it by hand:
+
+```js
+class Form extends owl.Component {
+  state = useState({ text: "" });
+
+  _updateInputValue(event) {
+    this.state.text = event.target.value;
+  }
+}
+```
+
+```xml
+<div>
+  <input t-on-input="_updateInputValue" />
+  <span t-esc="state.text" />
+</div>
+```
+
+This works. However, this requires a little bit of _plumbing_ code. Also, the
+plumbing code is slightly different if you need to interact with a checkbox,
+or with radio buttons, or with select tags.
+
+To help with this situation, Owl has a builtin directive `t-model`: its value
+should be an observed value in the component (usually `state.someValue`). With
+the `t-model` directive, we can write a shorter code, equivalent to the previous
+example:
+
+```js
+class Form extends owl.Component {
+  state = { text: "" };
+}
+```
+
+```xml
+<div>
+  <input t-model="state.text" />
+  <span t-esc="state.text" />
+</div>
+```
+
+The `t-model` directive works with `<input>`, `<input type="checkbox">`,
+`<input type="radio">`, `<textarea>` and `<select>`:
+
+```xml
+<div>
+    <div>Text in an input: <input t-model="state.someVal"/></div>
+    <div>Textarea: <textarea t-model="state.otherVal"/></div>
+    <div>Boolean value: <input type="checkbox" t-model="state.someFlag"/></div>
+    <div>Selection:
+        <select t-model="state.color">
+            <option value="">Select a color</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+        </select>
+    </div>
+    <div>
+        Selection with radio buttons:
+        <span>
+            <input type="radio" name="color" id="red" value="red" t-model="state.color"/>
+            <label for="red">Red</label>
+        </span>
+        <span>
+            <input type="radio" name="color" id="blue" value="blue" t-model="state.color" />
+            <label for="blue">Blue</label>
+        </span>
+    </div>
+</div>
+```
+
+Like event handling, the `t-model` directive accepts the following modifiers:
+
+| Modifier  | Description                                                          |
+| --------- | -------------------------------------------------------------------- |
+| `.lazy`   | update the value on the `change` event (default is on `input` event) |
+| `.number` | try to parse the value to a number (using `parseFloat`)              |
+| `.trim`   | trim the resulting value                                             |
+
+For example:
+
+```xml
+<input t-model.lazy="state.someVal" />
+```
+
+These modifiers can be combined. For instance, `t-model.lazy.number` will only
+update a number whenever the change is done.
+
+Note: the online playground has an example to show how it works.

doc/reference/portal.md

@@ -0,0 +1,17 @@
+# 🦉 Portal 🦉
+
+It is sometimes useful to be able to render some content outside the boundaries
+of a component. To do that, Owl provides a special directive: `t-portal`:
+
+```js
+class SomeComponent extends Component {
+  static template = xml`
+      <div>this is inside the component</div>
+      <div t-portal="'body'">and this is outside</div>
+    `;
+}
+```
+
+The `t-portal` directive takes a valid css selector as argument. The content of
+the portalled template will be mounted at the corresponding location. Note that
+Owl need to insert an empty text node at the location of the portalled content.

doc/reference/props.md

@@ -0,0 +1,266 @@
+# 🦉 Props 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Definition](#definition)
+- [Binding function props](#binding-function-props)
+- [Dynamic Props](#dynamic-props)
+- [Default Props](#default-props)
+- [Props validation](#props-validation)
+- [Good Practices](#good-practices)
+
+## Overview
+
+In Owl, `props` (short for _properties_) is an object which contains every piece
+of data given to a component by its parent.
+
+```js
+class Child extends Component {
+  static template = xml`<div><t t-esc="props.a"/><t t-esc="props.b"/></div>`;
+}
+
+class Parent extends Component {
+  static template = xml`<div><Child a="state.a" b="'string'"/></div>`;
+  static components = { Child };
+  state = useState({ a: "fromparent" });
+}
+```
+
+In this example, the `Child` component receives two props from its parent: `a`
+and `b`. They are collected into a `props` object by Owl, with each value being
+evaluated in the context of the parent. So, `props.a` is equal to `'fromparent'` and
+`props.b` is equal to `'string'`.
+
+Note that `props` is an object that only makes sense from the perspective of the
+child component.
+
+## Definition
+
+The `props` object is made of every attributes defined on the template, with the
+following exceptions:
+
+- every attribute starting with `t-` are not props (they are QWeb directives),
+
+In the following example:
+
+```xml
+<div>
+    <ComponentA a="state.a" b="'string'"/>
+    <ComponentB t-if="state.flag" model="model"/>
+</div>
+```
+
+the `props` object contains the following keys:
+
+- for `ComponentA`: `a` and `b`,
+- for `ComponentB`: `model`,
+
+## Binding function props
+
+It is common to have the need to pass a callback as a prop. Since Owl components
+are class based, the callback frequently needs to be bound to its owner component.
+So, one can do this:
+
+```js
+class SomeComponent extends Component {
+  static template = xml`
+    <div>
+      <Child callback="doSomething"/>
+    </div>`;
+
+  setup() {
+    this.doSomething = this.doSomething.bind(this);
+  }
+
+  doSomething() {
+    // ...
+  }
+}
+```
+
+However, this is such a common use case that Owl provides a special suffix to do
+just that: `.bind`. This looks like this:
+
+```js
+class SomeComponent extends Component {
+  static template = xml`
+    <div>
+      <Child callback.bind="doSomething"/>
+    </div>`;
+
+  doSomething() {
+    // ...
+  }
+}
+```
+
+## Dynamic Props
+
+The `t-props` directive can be used to specify totally dynamic props:
+
+```xml
+<div t-name="ParentComponent">
+    <Child t-props="some.obj"/>
+</div>
+```
+
+```js
+class ParentComponent {
+  static components = { Child };
+  some = { obj: { a: 1, b: 2 } };
+}
+```
+
+## Default Props
+
+If the static `defaultProps` property is defined, it will be used to complete
+props received by the parent, if missing.
+
+```js
+class Counter extends owl.Component {
+  static defaultProps = {
+    initialValue: 0,
+  };
+  ...
+}
+```
+
+In the example above, the `initialValue` props is now by default set to 0.
+
+## Props Validation
+
+As an application becomes complex, it may be quite unsafe to define props in an informal way. This leads to two issues:
+
+- hard to tell how a component should be used, by looking at its code.
+- unsafe, it is easy to send wrong props into a component, either by refactoring a component, or one of its parents.
+
+A props type system solves both issues, by describing the types and shapes
+of the props. Here is how it works in Owl:
+
+- `props` key is a static key (so, different from `this.props` in a component instance)
+- it is optional: it is ok for a component to not define a `props` key.
+- props are validated whenever a component is created/updated
+- props are only validated in `dev` mode (see [how to configure an app](app.md#configuration))
+- if a key does not match the description, an error is thrown
+- it validates keys defined in (static) `props`. Additional keys given by the
+  parent will cause an error (unless the special prop `*` is present).
+- it is an object or a list of strings
+- a list of strings is a simplified props definition, which only lists the name
+  of the props. Also, if the name ends with `?`, it is considered optional.
+- all props are by default required, unless they are defined with `optional: true`
+  (in that case, it is only done if there is a value)
+- valid types are: `Number, String, Boolean, Object, Array, Date, Function`, and all
+  constructor functions (so, if you have a `Person` class, it can be used as a type)
+- arrays are homogeneous (all elements have the same type/shape)
+
+For each key, a `prop` definition is either a boolean, a constructor, a list of constructors, or an object:
+
+- a boolean: indicate that the props exists, and is mandatory.
+- a constructor: this should describe the type, for example: `id: Number` describe
+  the props `id` as a number
+- a list of constructors. In that case, this means that we allow more than one
+  type. For example, `id: [Number, String]` means that `id` can be either a string
+  or a number.
+- an object. This makes it possible to have more expressive definition. The following sub keys are then allowed (but not mandatory):
+  - `type`: the main type of the prop being validated
+  - `element`: if the type was `Array`, then the `element` key describes the type of each element in the array. If it is not set, then we only validate the array, not its elements,
+  - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. If it is not set, then we only validate the object, not its elements,
+  - `validate`: this is a function which should return a boolean to determine if
+    the value is valid or not. Useful for custom validation logic.
+  - `optional`: if true, the prop is not mandatory
+
+There is a special `*` prop that means that additional prop are allowed. This is
+sometimes useful for generic components that will propagate some or all their
+props to their child components.
+
+Note that default values cannot be defined for a mandatory props. Doing so will
+result in a prop validation error.
+
+Examples:
+
+```js
+class ComponentA extends owl.Component {
+    static props = ['id', 'url'];
+
+    ...
+}
+
+class ComponentB extends owl.Component {
+  static props = {
+    count: {type: Number},
+    messages: {
+      type: Array,
+      element: {type: Object, shape: {id: Boolean, text: String }
+    },
+   date: Date,
+   combinedVal: [Number, Boolean],
+   optionalProp: { type: Number, optional: true }
+  };
+
+  ...
+}
+```
+
+```js
+  // only the existence of those 3 keys is documented
+  static props = ['message', 'id', 'date'];
+```
+
+```js
+  // only the existence of those 3 keys is documented. any other key is allowed.
+  static props = ['message', 'id', 'date', '*'];
+```
+
+```js
+  // size is optional
+  static props = ['message', 'size?'];
+```
+
+```js
+  static props = {
+    messageIds: {type: Array, element: Number},  // list of number
+    otherArr: {type: Array},   // just array. no validation is made on sub elements
+    otherArr2: Array,   // same as otherArr
+    someObj: {type: Object},  // just an object, no internal validation
+    someObj2: {
+      type: Object,
+      shape: {
+        id: Number,
+        name: {type: String, optional: true},
+        url: String
+      ]},    // object, with keys id (number), name (string, optional) and url (string)
+    someFlag: Boolean,     // a boolean, mandatory (even if `false`)
+    someVal: [Boolean, Date],   // either a boolean or a date
+    otherValue: true,     // indicates that it is a prop
+    kindofsmallnumber: {
+      type: Number,
+      validate: n => (0 <= n && n <= 10)
+    },
+    size: {
+      validate:  e => ["small", "medium", "large"].includes(e)
+    },
+  };
+```
+
+## Good Practices
+
+A `props` object is a collection of values that come from the parent. As such,
+they are owned by the parent, and should never be modified by the child:
+
+```js
+class MyComponent extends Component {
+  constructor(parent, props) {
+    super(parent, props);
+    props.a.b = 43; // Never do that!!!
+  }
+}
+```
+
+Props should be considered readonly, from the perspective of the child component.
+If there is a need to modify them, then the request to update them should be
+sent to the parent (for example, with an event).
+
+Any value can go in a props. Strings, objects, classes, or even callbacks could
+be given to a child component (but then, in the case of callbacks, communicating
+with events seems more appropriate).

doc/reference/reactivity.md

@@ -0,0 +1,131 @@
+# 🦉 Reactivity 🦉
+
+## Content
+
+- [Overview](#overview)
+- [`useState`](#usestate)
+- [`reactive`](#reactive)
+- [`markRaw`](#markraw)
+- [`toRaw`](#toraw)
+
+## Overview
+
+Reactivity is a big topic in javascript frameworks. The goal is to provide a
+simple way to manipulate state, in such a way that the interface automatically
+update accordingly to state changes. Also, we obviously want this to happen in
+a performant way.
+
+To solve this issue, Owl provides two reactivity primitives:
+
+- `reactive`, which returns a proxy to its first argument, and tracks all read/update
+  operation going through it,
+- `useState`: a hook, that internally uses `reactive`, and is linked to its
+  owner component: any read operation will be tracked (key by key), and any
+  updates to these tracked values will cause the component to be rerendered.
+
+Most of the time, the `useState` hook is the best solution.
+
+Since version 2.0, Owl applies the fine grained reactivity at the component
+level: props are automatically turned into reactive object, so Owl can track
+which part of these props are consumed by each component, and is therefore able
+to only rerender the impacted components.
+
+## `useState`
+
+Let us start by an example of how `useState` could be used:
+
+```js
+class Counter extends Component {
+  static template = xml`
+    <div t-on-click="increment">
+      <t t-esc="state.value"/>
+    </div>`;
+
+  setup() {
+    this.state = useState({ value: 0 });
+  }
+
+  increment() {
+    this.state.value++;
+  }
+}
+```
+
+If one were to use a simple state object, Owl would not be aware that the value
+was changed and that the component should be rerendered. With the `useState`
+hook, `this.state` is now a reactive object, so this component works as expected.
+
+## `reactive`
+
+The `reactive` function is the basic reactivity primitive. It takes an object
+or an array as first argument, and optionally, a function as the second argument.
+The function will be called whenever any tracked value is updated.
+
+```js
+const obj = reactive({ a: 1 }, () => console.log("changed"));
+
+obj.a = 2; // does not log anything: the 'a' key was not read
+console.log(obj.a); // log 2, and reads the 'a' key => it is now tracked
+obj.a = 3; // log 'changed' because we updated a tracked value
+```
+
+An important property of reactive objects is that they can be reobserved: this
+will create an independant proxy that tracks another set of keys:
+
+```js
+const obj1 = reactive({ a: 1, b: 2 }, () => console.log("observer 1"));
+const obj2 = reactive(obj1, () => console.log("observer 2"));
+
+console.log(obj1.a); // log 1, and reads the 'a' key => it is now tracked by observer 1
+console.log(obj1.b); // log 2, and 'b' is now tracked by observer 1
+console.log(obj2.b); // log 2, and 'b' is now tracked by observer 1
+obj2.a = 3; // log 'observer1', because observer2 does not track a
+obj2.b = 3; // log 'observer1' and 'observer2'
+```
+
+Obviously, one can use `reactive` on the result of a `useState` if wanted, this
+is the proper way to watch for some state changes.
+
+## `markRaw`
+
+Marks an object so that it is ignored by the reactivity system. This function returns its argument.
+
+```js
+const someObject = markRaw(...);
+const state = useState({
+  a: 1,
+  obj: someObject
+});
+// here, state.obj === someObject
+```
+
+This is useful in some rare cases. For example, some complex and large object such
+that going through the reactivity system may cause a non trivial performance slowdown.
+
+However, use this function with caution: this is an escape hatch from the reactivity
+system, and as such, using it may cause subtle and unintended issues!
+
+## `toRaw`
+
+Given a reactive object, this function returns the underlying, non-reactive,
+corresponding object.
+
+```js
+// in setup
+const state = useState({ value: 1 });
+
+// later:
+const rawState = toRaw(this.state);
+rawState.value = 3; // will NOT be picked up by the reactivity system!!!
+```
+
+Here again, this is useful in some situations where we want to explicitely bypass
+Owl, but using this function means that the responsability of coordinating
+state update is given to the user code, instead of Owl. Subtle bugs may arise!
+
+Also, normal (non-reactive objects) will be directly returned by `toRaw`:
+
+```js
+const obj = { a: 1 };
+console.log(toRaw(obj) === obj); // true
+```

doc/reference/refs.md

@@ -0,0 +1,37 @@
+# 🦉 References 🦉
+
+The `useRef` hook is useful when we need a way to interact with some inside part
+of a component, rendered by Owl. It can work either on a DOM node, or on a component,
+targeted by the `t-ref` directive. See the [hooks section](hooks.md#useref) for
+more detail.
+
+As a short example, here is how we could set the focus on a given input:
+
+```xml
+<div>
+    <input t-ref="input"/>
+    <button t-on-click="focusInput">Click</button>
+</div>
+```
+
+```js
+import { useRef } from "owl/hooks";
+
+class SomeComponent extends Component {
+  inputRef = useRef("input");
+
+  focusInput() {
+    this.inputRef.el.focus();
+  }
+}
+```
+
+Be aware that the `el` property will only be set when the target of the `t-ref`
+directive is mounted in the DOM. Otherwise, it will be set to `null`.
+
+The `useRef` hook cannot be used to get a reference to an instance of a sub
+component.
+
+Note that this example uses the suffix `ref` to name the reference. This
+is not mandatory, but it is a useful convention, so we do not forget that it is
+a reference object.

doc/reference/slots.md

@@ -0,0 +1,254 @@
+# 🦉 Slots 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Named slots](#named-slots)
+- [Rendering Context](#rendering-context)
+- [Default Slot](#default-slot)
+- [Default Content](#default-content)
+- [Dynamic slots](#dynamic-slots)
+- [Slots and props](#slots-and-props)
+- [Slot params](#slot-params)
+- [Slot scopes](#slot-scopes)
+
+## Overview
+
+Owl is a template based component system. There is therefore a need to be able
+to make generic components. For example, imagine a generic `Navbar`
+component, which displays a navbar, but with some customizable content. Since
+the specific content is only known to the user of the `Navbar`, it would be nice
+to specify it in the template where `Navbar` is used:
+
+```xml
+  <div>
+    <Navbar>
+      <span>Hello Owl</span>
+    </Navbar>
+  </div>
+```
+
+This is exactly the way slots work! In the example above, the user of the `Navbar`
+component specify some content (here, in the default slot). The `Navbar`
+component can insert that content in its own template at the appropriate location.
+An important information to notice is that the content of the slot is rendered in
+the parent context, not in the navbar. As such, it can access values and methods
+from the parent component.
+
+Here is how the `Navbar` component could be defined, with the `t-slot` directive:
+
+```xml
+<div class="navbar">
+  <t t-slot="default"/>
+  <ul>
+    <!-- rest of the navbar here -->
+  </ul>
+</div>
+```
+
+## Named slots
+
+Default slots are very useful, but sometimes, we may need more than one slot.
+This is what named slots are for! For example, suppose we implement a component
+`InfoBox` that display a title and some specific content. Its template could look
+like this:
+
+```xml
+<div class="info-box">
+  <div class="info-box-title">
+    <t t-slot="title"/>
+    <span class="info-box-close-button" t-on-click="close">X</span>
+  </div>
+  <div class="info-box-content">
+    <t t-slot="content"/>
+  </div>
+</div>
+```
+
+And one could use it with the `t-set-slot` directive:
+
+```xml
+<InfoBox>
+  <t t-set-slot="title">
+    Specific Title. It could be html also.
+  </t>
+  <t t-set-slot="content">
+    <!-- some template here, with html, events, whatever -->
+  </t>
+</InfoBox>
+```
+
+## Rendering context
+
+The content of the slots is actually rendered with the rendering context corresponding
+to where it was defined, not where it is positioned. This allows the user to define
+event handlers that will be bound to the correct component (usually, the
+grandparent of the slot content).
+
+## Default Slot
+
+All elements inside the component which are not a named slot will be treated as
+part of the content of the `default` slot. For example:
+
+```xml
+<div t-name="Parent">
+  <Child>
+    <span>some content</span>
+  </Child>
+</div>
+
+<div t-name="Child">
+  <t t-slot="default"/>
+</div>
+```
+
+One can mix default slot and named slots:
+
+```xml
+<div>
+  <Child>
+    default content
+    <t t-set-slot="footer">
+      content for footer slot here
+    </t>
+  </Child>
+</div>
+```
+
+## Default content
+
+Slots can define a default content, in case the parent did not define them:
+
+```xml
+<div t-name="Parent">
+  <Child/>
+</div>
+
+<span t-name="Child">
+  <t t-slot="default">default content</t>
+</span>
+<!-- will be rendered as: <div><span>default content</span></div> -->
+```
+
+## Dynamic Slots
+
+The `t-slot` directive is actually able to use any expressions, using string
+interplolation:
+
+```xml
+ <t t-slot="{{current}}" />
+```
+
+This will evaluate the `current` expression, and insert the corresponding slot
+at the place of the `t-slot` directive.
+
+## Slots and props
+
+In a sense, slots are almost the same as a prop: they define some information
+to pass to the child component. To make it possible to use it, and to pass it
+down to sub component, Owl actually define a special prop `slots` that contains
+all slot information given to the component. It looks like this:
+
+```js
+{ slotName_1: slotInfo_1, ..., slotName_m: slotInfo_m }
+```
+
+So, a component can pass its slots to a subcomponent like this:
+
+```xml
+<Child slots="props.slots"/>
+```
+
+## Slot params
+
+For advanced usecases, it may be necessary to pass additional information to a
+slot. This can be done by providing extra key/value pairs to the `t-set-slot`
+directive. Then, the generic component can read them in its prop `slots`.
+
+For example, here is how a Notebook component could be implemented (a component
+with multiple page, and a tab bar, which only render the current active page,
+and each page has a title).
+
+```js
+class Notebook extends Component {
+  static template = xml`
+    <div class="notebook">
+      <div class="tabs">
+        <t t-foreach="tabNames" t-as="tab" t-key="tab_index">
+          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab">
+            <t t-esc="props.slots[tab].title"/>
+          </span>
+        </t>
+      </div>
+      <div class="page">
+        <t t-slot="{{currentSlot}}"/>
+      </div>
+    </div>`;
+
+  setup() {
+    this.state = useState({ activeTab: 0 });
+    this.tabNames = Object.keys(this.props.slots);
+  }
+
+  get currentSlot() {
+    return this.tabNames[this.state.activeTab];
+  }
+}
+```
+
+Notice how one can read the `title` value for each slots. Here is how one could
+use this `Notebook` component:
+
+```xml
+<Notebook>
+  <t t-set-slot="page1" title="'Page 1'">
+    <div>this is in the page 1</div>
+  </t>
+  <t t-set-slot="page2" title="'Page 2'" hidden="somevalue">
+    <div>this is in the page 2</div>
+  </t>
+</Notebook>
+```
+
+Slot params works like normal props, so one can use the `.bind` suffix to
+bind a function if needed.
+
+## Slot scopes
+
+For other kinds of advanced use cases, the content of a slot may depends on some
+information specific to the generic component. This is the opposite of the slot
+params.
+
+To solve this kind of problems, one can use the `t-slot-scope` directive along
+with the `t-set-slot`. This defines the name of a variable that can access
+everything given by the child component:
+
+```xml
+<MyComponent>
+    <t t-set-slot="foo" t-slot-scope="scope">
+        content
+        <t t-esc="scope.bool"/>
+        <t t-esc="scope.num"/>
+    </t>
+</MyComponent>
+```
+
+And the child component that includes the slot can provide values like this:
+
+```xml
+<t t-slot="foo" bool="other_var" num="5">
+```
+
+In the case of the default slot, you may declare the slot scope directly on the
+component itself:
+
+```xml
+<MyComponent t-slot-scope="scope">
+    content
+    <t t-esc="scope.bool"/>
+    <t t-esc="scope.num"/>
+</MyComponent>
+```
+
+Slot values works like normal props, so one can use the `.bind` suffix to
+bind a function if needed.

doc/reference/templates.md

@@ -0,0 +1,693 @@
+# 🦉 Templates 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Directives](#directives)
+- [QWeb Template reference](#qweb-template-reference)
+  - [White Spaces](#white-spaces)
+  - [Expression Evaluation](#expression-evaluation)
+  - [Static html Nodes](#static-html-nodes)
+  - [Outputting Data](#outputting-data)
+  - [Setting Variables](#setting-variables)
+  - [Conditionals](#conditionals)
+  - [Dynamic Attributes](#dynamic-attributes)
+  - [Dynamic Class Attribute](#dynamic-class-attribute)
+  - [Dynamic Tag Names](#dynamic-tag-names)
+  - [Loops](#loops)
+  - [Sub Templates](#sub-templates)
+  - [Dynamic Sub Templates](#dynamic-sub-templates)
+  - [Debugging](#debugging)
+- [Fragments](#fragments)
+- [Inline templates](#inline-templates)
+- [Rendering svg](#rendering-svg)
+- [Restrictions](#restrictions)
+
+## Overview
+
+Owl templates are describe using the [QWeb](https://www.odoo.com/documentation/13.0/reference/qweb.html) specification. It is based on the XML format, and used
+mostly to generate HTML. In OWL, QWeb templates are compiled into functions that
+generate a virtual dom representation of the HTML. Also, since Owl is a live
+component system, there are additional directives specific to Owl (such as `t-on`).
+
+```xml
+<div>
+    <span t-if="somecondition">Some string</span>
+    <ul t-else="">
+        <li t-foreach="messages" t-as="message">
+            <t t-esc="message"/>
+        </li>
+    </ul>
+</div>
+```
+
+Template directives are specified as XML attributes prefixed with `t-`, for
+instance `t-if` for conditionals, with elements and other attributes being
+rendered directly.
+
+To avoid element rendering, a placeholder element `<t>` is also available, which
+executes its directive but doesn’t generate any output in and of itself.
+
+We present in this section the templating language, including its Owl specific
+extensions.
+
+## Directives
+
+For reference, here is a list of all standard QWeb directives:
+
+| Name                           | Description                                                     |
+| ------------------------------ | --------------------------------------------------------------- |
+| `t-esc`                        | [Outputting safely a value](#outputting-data)                   |
+| `t-out`                        | [Outputting value, possibly without escaping](#outputting-data) |
+| `t-set`, `t-value`             | [Setting variables](#setting-variables)                         |
+| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                        |
+| `t-foreach`, `t-as`            | [Loops](#loops)                                                 |
+| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                       |
+| `t-call`                       | [Rendering sub templates](#sub-templates)                       |
+| `t-debug`, `t-log`             | [Debugging](#debugging)                                         |
+| `t-translation`                | [Disabling the translation of a node](translations.md)          |
+
+The component system in Owl requires additional directives, to express various
+needs. Here is a list of all Owl specific directives:
+
+| Name                                   | Description                                                     |
+| -------------------------------------- | --------------------------------------------------------------- |
+| `t-component`, `t-props`               | [Defining a sub component](component.md#sub-components)         |
+| `t-ref`                                | [Setting a reference to a dom node or a sub component](refs.md) |
+| `t-key`                                | [Defining a key (to help virtual dom reconciliation)](#loops)   |
+| `t-on-*`                               | [Event handling](event_handling.md)                             |
+| `t-portal`                             | [Portal](portal.md)                                             |
+| `t-slot`, `t-set-slot`, `t-slot-scope` | [Rendering a slot](slots.md)                                    |
+| `t-model`                              | [Form input bindings](input_bindings.md)                        |
+| `t-tag`                                | [Rendering nodes with dynamic tag name](#dynamic-tag-names)     |
+
+## QWeb Template Reference
+
+### White Spaces
+
+White spaces in a template are handled in a special way:
+
+- consecutive whitespaces are always condensed to a single whitespace
+- if a whitespace-only text node contains a linebreak, it is ignored
+- the previous rules do not apply if we are in a `<pre>` tag
+
+### Expression Evaluation
+
+QWeb expressions are strings that will be processed at compile time. Each variable in
+the javascript expression will be replaced with a lookup in the context (so, the
+component). For example, `a + b.c(d)` will be converted into:
+
+```js
+context["a"] + context["b"].c(context["d"]);
+```
+
+It is useful to explain the various rules that apply on these expressions:
+
+1. it should be a simple expression which returns a value. It cannot be a statement.
+
+   ```xml
+   <div><p t-if="1 + 2 === 3">ok</p></div>
+   ```
+
+   is valid, but the following is not valid:
+
+   ```xml
+   <div><p t-if="console.log(1)">NOT valid</p></div>
+   ```
+
+2. it can use anything in the rendering context (typically, the component):
+
+   ```xml
+   <p t-if="user.birthday === today()">Happy bithday!</p>
+   ```
+
+   is valid, and will read the `user` object from the context, and call the
+   `today` function.
+
+3. it can use a few special operators to avoid using symbols such as `<`, `>`,
+   `&` or `|`. This is useful to make sure that we still write valid XML.
+
+   | Word  | replaced with |
+   | ----- | ------------- |
+   | `and` | `&&`          |
+   | `or`  | `\|\|`        |
+   | `gt`  | `>`           |
+   | `gte` | `>=`          |
+   | `lt`  | `<`           |
+   | `lte` | `<=`          |
+
+   So, one can write this:
+
+   ```xml
+   <div><p t-if="10 + 2 gt 5">ok</p></div>
+   ```
+
+### Static Html Nodes
+
+Normal, regular html nodes are rendered into themselves:
+
+```xml
+  <div>hello</div> <!–– rendered as itself ––>
+```
+
+### Outputting Data
+
+The `t-esc` directive is necessary whenever you want to add a dynamic text
+expression in a template. The text is escaped to avoid security issues.
+
+```xml
+<p><t t-esc="value"/></p>
+```
+
+rendered with the value `value` set to `42` in the rendering context yields:
+
+```html
+<p>42</p>
+```
+
+The `t-out` directive is almost the same as `t-esc`, but possibly without the
+escaping. The difference is that the value received by the `t-out` directive
+will only be not-escaped if it has been marked as such, using the `markup`
+utility function:
+
+For example, in the following component:
+
+```js
+const { markup, Component, xml } = owl;
+
+class SomeComponent extends Component {
+  static template = xml`
+    <t t-out="value1"/>
+    <t t-out="value2"/>`;
+
+  value1 = "<div>some text 1</div>";
+  value2 = markup("<div>some text 2</div>");
+}
+```
+
+The first `t-out` will act as a `t-esc` directive, which means that the content
+of `value1` will be escaped. However, since `value2` has been tagged as a markup,
+this will be injected as html.
+
+### Setting Variables
+
+QWeb allows creating variables from within the template, to memoize a computation (to use it multiple times), give a piece of data a clearer name, ...
+
+This is done via the `t-set` directive, which takes the name of the variable to create. The value to set can be provided in two ways:
+
+1. a `t-value` attribute containing an expression, and the result of its
+   evaluation will be set:
+
+   ```xml
+   <t t-set="foo" t-value="2 + 1"/>
+   <t t-esc="foo"/>
+   ```
+
+   will print `3`. Note that the evaluation is done at rendering time, not at
+   compilte time.
+
+2. if there is no `t-value` attribute, the node’s body is saved and its value is
+   set as the variable’s value:
+
+   ```xml
+   <t t-set="foo">
+       <li>ok</li>
+   </t>
+   <t t-esc="foo"/>
+   ```
+
+   will generate `&lt;li&gt;ok&lt;/li&gt;` (the content is escaped as we used the `t-esc` directive)
+
+The `t-set` directive acts like a regular variable in most programming language.
+It is lexically scoped (inner nodes are sub scopes), can be shadowed, ...
+
+### Conditionals
+
+The `t-if` directive is useful to conditionally render something. It evaluates
+the expression given as attribute value, and then acts accordingly.
+
+```xml
+<div>
+    <t t-if="condition">
+        <p>ok</p>
+    </t>
+</div>
+```
+
+The element is rendered if the condition (evaluated with the current rendering
+context) is true:
+
+```xml
+<div>
+    <p>ok</p>
+</div>
+```
+
+but if the condition is false it is removed from the result:
+
+```xml
+<div>
+</div>
+```
+
+The conditional rendering applies to the bearer of the directive, which does not
+have to be `<t>`:
+
+```xml
+<div>
+    <p t-if="condition">ok</p>
+</div>
+```
+
+will give the same results as the previous example.
+
+Extra conditional branching directives `t-elif` and `t-else` are also available:
+
+```xml
+<div>
+    <p t-if="user.birthday == today()">Happy bithday!</p>
+    <p t-elif="user.login == 'root'">Welcome master!</p>
+    <p t-else="">Welcome!</p>
+</div>
+```
+
+### Dynamic Attributes
+
+One can use the `t-att-` directive to add dynamic attributes. Its main use is to
+evaluate an expression (at rendering time) and bind an attribute to its result:
+
+For example, if we have `id` set to 32 in the rendering context,
+
+```xml
+<div t-att-data-action-id="id"/> <!-- result: <div data-action-id="32"></div> -->
+```
+
+If an expression evaluates to a falsy value, it will not be set at all:
+
+```xml
+<div t-att-foo="false"/>  <!-- result: <div></div> -->
+```
+
+It is sometimes convenient to format an attribute with string interpolation. In
+that case, the `t-attf-` directive can be used. It is useful when we need to mix
+literal and dynamic elements, such as css classes.
+
+```xml
+<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>
+<!-- result if values are set to 1,2 and 3: <div foo="a 0 is 1 of 2 ]"></div> -->
+```
+
+If we need completely dynamic attribute names, then there is an additional
+directive: `t-att`, which takes either an object (with keys mapping to their
+values) or a pair `[key, value]`. For example:
+
+```xml
+<div t-att="{'a': 1, 'b': 2}"/> <!-- result: <div a="1" b="2"></div> -->
+
+<div t-att="['a', 'b']"/> <!-- <div a="b"></div> -->
+```
+
+### Dynamic class attribute
+
+For convenience, Owl supports a special case for the `t-att-class` case: one can
+use an object with keys describing the classes, and values boolean value denoting
+if the class is or is not present:
+
+```xml
+<div t-att-class="{'a': true, 'b': true}"/> <!-- result: <div class="a b"></div> -->
+
+<div t-att-class="{'a b': true, 'c': true}"/> <!-- result: <div class="a b c"></div> -->
+```
+
+Note that it can be combined with normal class attribute:
+
+```xml
+<div class="a" t-att-class="{'b': true}"/> <!-- result: <div class="a b"></div> -->
+```
+
+### Dynamic tag names
+
+When writing generic components or templates, the specific concrete tag for an
+HTML element is not known yet. In those situations, the `t-tag` directive is
+useful. It simply evaluates dynamically an expression to use as a tag name. The
+template:
+
+```xml
+<t t-tag="tag">
+    <span>content</span>
+</t>
+```
+
+will be rendered as `<div><span>content</span></div>` if the `tag` context key
+is set to `div`.
+
+### Loops
+
+QWeb has an iteration directive `t-foreach` which take an expression returning the
+collection to iterate on, and a second parameter `t-as` providing the name to use
+for the current item of the iteration:
+
+```xml
+<t t-foreach="[1, 2, 3]" t-as="i" t-key="i">
+    <p><t t-esc="i"/></p>
+</t>
+```
+
+will be rendered as:
+
+```xml
+<p>1</p>
+<p>2</p>
+<p>3</p>
+```
+
+Like conditions, `t-foreach` applies to the element bearing the directive’s attribute, and
+
+```xml
+<p t-foreach="[1, 2, 3]" t-as="i" t-key="i">
+    <t t-esc="i"/>
+</p>
+```
+
+is equivalent to the previous example.
+
+An important difference should be made with the usual `QWeb` behaviour: Owl
+requires the presence of a `t-key` directive, to be able to properly reconcile
+renderings.
+
+`t-foreach` can iterate on an array (the current item will be the current value)
+or an object (the current item will be the current key).
+
+In addition to the name passed via t-as, `t-foreach` provides a few other
+variables for various data points (note: `$as` will be replaced with the name
+passed to `t-as`):
+
+- `$as_value`: the current iteration value, identical to `$as` for lists and
+  integers, but for objects, it provides the value (where `$as` provides the key)
+- `$as_index`: the current iteration index (the first item of the iteration has index 0)
+- `$as_first`: whether the current item is the first of the iteration
+  (equivalent to `$as_index == 0`)
+- `$as_last`: whether the current item is the last of the iteration
+  (equivalent to `$as_index + 1 == $as_size`), requires the iteratee’s size be
+  available
+
+These extra variables provided and all new variables created into the `t-foreach`
+are only available in the scope of the `t-foreach`. If the variable exists outside
+the context of the `t-foreach`, the value is copied at the end of the foreach
+into the global context.
+
+```xml
+<t t-set="existing_variable" t-value="false"/>
+<!-- existing_variable now False -->
+
+<p t-foreach="Array(3)" t-as="i" t-key="i">
+    <t t-set="existing_variable" t-value="true"/>
+    <t t-set="new_variable" t-value="true"/>
+    <!-- existing_variable and new_variable now true -->
+</p>
+
+<!-- existing_variable always true -->
+<!-- new_variable undefined -->
+```
+
+Even though Owl tries to be as declarative as possible, the DOM does not fully
+expose its state declaratively in the DOM tree. For example, the scrolling state,
+the current user selection, the focused element or the state of an input are not
+set as attribute in the DOM tree. This is why we use a virtual dom
+algorithm to make sure we keep the actual DOM node instead of replacing it with
+a new one.
+
+Consider the following situation: we have a list of two items `[{text: "a"}, {text: "b"}]`
+and we render them in this template:
+
+```xml
+<p t-foreach="items" t-as="item" t-key="item_index"><t t-esc="item.text"/></p>
+```
+
+The result will be two `<p>` tags with text `a` and `b`. Now, if we swap them,
+and rerender the template, Owl needs to know what the intent is:
+
+- should Owl actually swap the DOM nodes,
+- or should it keep the DOM nodes, but with an updated text content?
+
+This might look trivial, but it actually matters. These two possibilities lead
+to different results in some cases. For example, if the user selected the text
+of the first `p`, swapping them will keep the selection while updating the
+text content will not.
+
+There are many other cases where this is important: `input` tags with their
+value, css classes and animations, scroll position...
+
+So, the `t-key` directive is used to give an identity to an element. It allows
+Owl to understand if different elements of a list are actually different or not.
+
+The above example could be modified by adding an ID: `[{id: 1, text: "a"}, {id: 2, text: "b"}]`.
+Then, the template could look like this:
+
+```xml
+<p t-foreach="items" t-as="item" t-key="item.id"><t t-esc="item.text"/></p>
+```
+
+The `t-key` directive is useful for lists (`t-foreach`). A key should be
+a unique number or string (objects will not work: they will be cast to the
+`"[object Object]"` string, which is obviously not unique).
+
+Also, the key can be set on a `t` tag or on its children. The following variations
+are all equivalent:
+
+```xml
+<p t-foreach="items" t-as="item" t-key="item.id">
+  <t t-esc="item.text"/>
+</p>
+
+<t t-foreach="items" t-as="item" t-key="item.id">
+  <p t-esc="item.text"/>
+</t>
+
+<t t-foreach="items" t-as="item">
+  <p t-key="item.id" t-esc="item.text"/>
+</t>
+```
+
+If there is no `t-key` directive, Owl will use the index as a default key.
+
+Note: the `t-foreach` directive only accepts arrays (lists) or objects. It does
+not work with other iterables, such as `Set`. However, it is only a matter of
+using the `...` javascript operator. For example:
+
+```xml
+<t t-foreach="...items" t-as="item">...</t>
+```
+
+The `...` operator will convert the `Set` (or any other iterables) into a list,
+which will work with Owl QWeb.
+
+### Sub Templates
+
+QWeb templates can be used for top level rendering, but they can also be used
+from within another template (to avoid duplication or give names to parts of
+templates), using the `t-call` directive:
+
+```xml
+<div t-name="other-template">
+    <p><t t-value="var"/></p>
+</div>
+
+<div t-name="main-template">
+    <t t-set="var" t-value="owl"/>
+    <t t-call="other-template"/>
+</div>
+```
+
+will be rendered as `<div><p>owl</p></div>`. This example shows that the sub
+template is rendered with the execution context of the parent. The sub template
+is actually inlined in the main template, but in a sub scope: variables defined
+in the sub template do not escape.
+
+Sometimes, one might want to pass information to the sub template. In that case,
+the content of the body of the `t-call` directive is available as a special
+magic variable `0`:
+
+```xml
+<t t-name="other-template">
+    This template was called with content:
+    <t t-raw="0"/>
+</t>
+
+<div t-name="main-template">
+    <t t-call="other-template">
+        <em>content</em>
+    </t>
+</div>
+```
+
+will result in :
+
+```xml
+<div>
+    This template was called with content:
+    <em>content</em>
+</div>
+```
+
+This can be used to define variables scoped to a sub template:
+
+```xml
+<t t-call="other-template">
+    <t t-set="var" t-value="1"/>
+</t>
+<!-- "var" does not exist here -->
+```
+
+### Dynamic sub templates
+
+The `t-call` directive can also be used to dynamically call a sub template,
+using string interpolation. For example:
+
+```xml
+<div t-name="main-template">
+    <t t-call="{{template}}">
+        <em>content</em>
+    </t>
+</div>
+```
+
+Here, the name of the template is obtained from the `template` value in the
+template rendering context.
+
+### Debugging
+
+The javascript QWeb implementation provides two useful debugging directives:
+
+`t-debug` adds a debugger statement during template rendering:
+
+```xml
+<t t-if="a_test">
+    <t t-debug=""/>
+</t>
+```
+
+will stop execution if the browser dev tools are open.
+
+`t-log` takes an expression parameter, evaluates the expression during rendering and logs its result with console.log:
+
+```xml
+<t t-set="foo" t-value="42"/>
+<t t-log="foo"/>
+```
+
+will print 42 to the console.
+
+## Fragments
+
+Owl 2 supports templates with an arbitrary number of root elements, or even just
+a text node. So, the following templates are all valid:
+
+```xml
+hello owl. This is just a text node!
+```
+
+```xml
+<div>hello</div>
+```
+
+```xml
+<div>hello</div>
+<div>ola</div>
+```
+
+```xml
+<div t-if="someCondition"><SomeChildComponent/></div>
+```
+
+```xml
+<t t-if="someCondition"><SomeChildComponent/></t>
+```
+
+## Inline templates
+
+Most real applications will define their templates in a XML file, to benefit
+from the XML ecosystem, and to do some additional processing, such as translating
+them. However, in some cases, it is convenient to be able to define a template
+inline. To do so, one can use the `xml` helper function:
+
+```js
+const { Component, xml } = owl;
+
+class MyComponent extends Component {
+  static template = xml`
+      <div>
+          <span t-if="somecondition">text</span>
+          <button t-on-click="someMethod">Click</button>
+      </div>
+  `;
+
+    ...
+}
+
+mount(MyComponent, document.body);
+```
+
+This function simply generates an unique string id, and register the template
+under that id in the internals of Owl, then return the id.
+
+## Rendering svg
+
+Owl components can be used to generate dynamic SVG graphs:
+
+```js
+class Node extends Component {
+  static template = xml`
+        <g>
+            <circle t-att-cx="props.x" t-att-cy="props.y" r="4" fill="black"/>
+            <text t-att-x="props.x - 5" t-att-y="props.y + 18"><t t-esc="props.node.label"/></text>
+            <t t-set="childx" t-value="props.x + 100"/>
+            <t t-set="height" t-value="props.height/(props.node.children || []).length"/>
+            <t t-foreach="props.node.children || []" t-as="child">
+                <t t-set="childy" t-value="props.y + child_index*height"/>
+                <line t-att-x1="props.x" t-att-y1="props.y" t-att-x2="childx" t-att-y2="childy" stroke="black" />
+                <Node x="childx" y="childy" node="child" height="height"/>
+            </t>
+        </g>
+    `;
+  static components = { Node };
+}
+
+class RootNode extends Component {
+  static template = xml`
+        <svg height="180">
+            <Node node="graph" x="10" y="20" height="180"/>
+        </svg>
+    `;
+  static components = { Node };
+  graph = {
+    label: "a",
+    children: [
+      { label: "b" },
+      { label: "c", children: [{ label: "d" }, { label: "e" }] },
+      { label: "f", children: [{ label: "g" }] },
+    ],
+  };
+}
+```
+
+This `RootNode` component will then display a live SVG representation of the
+graph described by the `graph` property. Note that there is a recursive structure
+here: the `Node` component uses itself as a subcomponent.
+
+**Important note:** Owl needs to properly set the namespace for each svg elements.
+Since Owl compile each template separately, it is not able to determine easily
+if a template is supposed to be included in a svg namespace or not. Therefore,
+Owl depends on a heuristic: if a tag is either `svg`, `g` or `path`, then it will
+be considered as svg. In practice, this means that each component or each sub
+templates (included with `t-call`) should have one of these tag as root tag.
+
+## Restrictions
+
+Note that Owl templates forbid the use of tag and or attributes starting with
+the `block-` string. This restriction prevents name collision with the internal
+code of Owl.
+
+```xml
+<div><block-1>this will not be accepted by Owl</block-1></div>
+```

doc/reference/translations.md

@@ -0,0 +1,70 @@
+# 🦉 Translations 🦉
+
+If properly setup, Owl can translate all rendered templates. To do
+so, it needs a translate function, which takes a string and returns a string.
+
+For example:
+
+```js
+const translations = {
+  hello: "bonjour",
+  yes: "oui",
+  no: "non",
+};
+const translateFn = (str) => translations[str] || str;
+
+const app = new App(Root, { templates, tranaslateFn });
+// ...
+```
+
+See the [app configuration page](app.md#configuration) for more info on how to
+configure an Owl application.
+
+Once setup, all rendered templates will be translated using `translateFn`:
+
+- each text node will be replaced with its translation,
+- each of the following attribute values will be translated as well: `title`,
+  `placeholder`, `label` and `alt`,
+- translating text nodes can be disabled with the special attribute `t-translation`,
+  if its value is `off`.
+
+So, with the above `translateFn`, the following templates:
+
+```xml
+<div>hello</div>
+<div t-translation="off">hello</div>
+<div>Are you sure?</div>
+<input placeholder="hello" other="yes"/>
+```
+
+will be rendered as:
+
+```xml
+<div>bonjour</div>
+<div>hello</div>
+<div>Are you sure?</div>
+<input placeholder="bonjour" other="yes"/>
+```
+
+Note that the translation is done during the compilation of the template, not
+when it is rendered.
+
+In some case, it is useful to be able to extend the list of translatable attributes.
+For example, one may want to also translate `data-title` attributes. To do that,
+we can define additional attributes with the `translatableAttributes` option:
+
+```js
+const app = new App(Root, { templates, tranaslateFn, translatableAttributes: ["data-title"] });
+// ...
+```
+
+It is also possible to remove an attribute from the default list by prefixing it with `-`:
+
+```js
+const app = new App(Root, {
+  templates,
+  tranaslateFn,
+  translatableAttributes: ["data-title", "-title"],
+});
+// data-title attribute will be translated, but not title attribute...
+```

doc/reference/utils.md

@@ -0,0 +1,58 @@
+# 🦉 Utils 🦉
+
+Owl export a few useful utility functions, to help with common issues. Those
+functions are all available in the `owl.utils` namespace.
+
+## Content
+
+- [`whenReady`](#whenready): executing code when DOM is ready
+- [`loadFile`](#loadfile): loading a file (useful for templates)
+- [`EventBus`](#eventbus): a simple EventBus
+
+## `whenReady`
+
+The function `whenReady` returns a `Promise` resolved when the DOM is ready (if
+not ready yet, resolved directly otherwise). If called with a callback as
+argument, it executes it as soon as the DOM ready (or directly).
+
+```js
+const { whenReady } = owl;
+
+await whenReady();
+// do something
+```
+
+or alternatively:
+
+```js
+whenReady(function () {
+  // do something
+});
+```
+
+## `loadFile`
+
+`loadFile` is a helper function to fetch a file. It simply
+performs a `GET` request and returns the resulting string in a promise. The
+initial usecase for this function is to load a template file. For example:
+
+```js
+const { loadFile } = owl;
+
+async function makeEnv() {
+  const templates = await loadFile("templates.xml");
+  // do something
+}
+```
+
+## `EventBus`
+
+It is a simple `EventBus`, with the same API as usual DOM elements, and an
+additional `trigger` method to dispatch events:
+
+```js
+const bus = new EventBus();
+bus.addEventListener("event", () => console.log("something happened"));
+
+bus.trigger("event"); // 'something happened' is logged
+```

doc/state_management.md

@@ -1,8 +0,0 @@
-# OWL: State Management
-
-Managing the state in an application is not an easy task. Many different
-architectures/designs/systems/... have been created. We propose here to use
-the idea of a central store.
-
-- Store
-- connect

doc/tutorial.md

@@ -1,3 +0,0 @@
-# Tutorial
-
-todo...

examples/benchmarks/app.css

@@ -1,45 +0,0 @@
-.main {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-
-  display: grid;
-  grid-template-columns: 200px 1fr;
-}
-
-.left-thing {
-  background-color: gray;
-  padding: 20px;
-}
-
-.left-thing button {
-  width: 100%;
-}
-
-.left-thing .counter span {
-  color: white;
-}
-
-.left-thing .counter button {
-  width: 40px;
-}
-
-.right-thing {
-  padding: 20px;
-  overflow: auto;
-}
-
-/* Message widget */
-.message .author {
-  font-weight: bold;
-}
-
-.message {
-  width: 400px;
-  background-color: lightblue;
-  margin: 10px 5px;
-  border-radius: 5px;
-  padding: 5px;
-}

examples/benchmarks/app.js

@@ -1,55 +0,0 @@
-import { Message } from "./message.js";
-import { messages } from "./data.js";
-
-const template = `
-    <div class="main">
-        <div class="left-thing">
-            <div class="counter">
-                <button t-on-click="increment(-1)">-</button>
-                <span style="font-weight:bold">Value: <t t-esc="state.messages.length"/></span>
-                <button t-on-click="increment(1)">+</button>
-            </div>
-            <button t-on-click="setMessageCount(10)">10 messages</button>
-            <button t-on-click="setMessageCount(20)">20 messages</button>
-            <button t-on-click="setMessageCount(500)">500 messages</button>
-            <button t-on-click="setMessageCount(1000)">1000 messages</button>
-            <button t-on-click="setMessageCount(5000)">5000 messages</button>
-            <button t-on-click="setMessageCount(15000)">15000 messages</button>
-        </div>
-        <div class="right-thing">
-            <div class="content">
-                <t t-foreach="state.messages" t-as="message">
-                    <t t-widget="Message" t-att-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
-                </t>
-            </div>
-        </div>
-    </div>`;
-
-export class App extends owl.core.Component {
-  constructor(parent, props) {
-    super(parent, props);
-    this.inlineTemplate = template;
-    this.widgets = { Message };
-    this.state = {
-      messages: messages.slice(0, 10)
-    };
-  }
-
-  setMessageCount(n) {
-    this.updateState({
-      messages: messages.slice(0, n)
-    });
-  }
-
-  removeMessage(data) {
-    const index = messages.findIndex(m => m.id === data.id);
-    const n = this.state.messages.length;
-    messages.splice(index, 1);
-    this.updateState({ messages: messages.slice(0, n - 1) });
-  }
-
-  increment(delta) {
-    const n = this.state.messages.length + delta;
-    this.setMessageCount(n);
-  }
-}

examples/benchmarks/counter.js

@@ -1,18 +0,0 @@
-export class Counter extends owl.core.Component {
-  inlineTemplate = `
-    <div>
-      <button t-on-click="increment(-1)">-</button>
-      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-      <button t-on-click="increment(1)">+</button>
-    </div>`;
-  constructor(parent, props) {
-    super(parent, props);
-    this.state = {
-      counter: props.initialState || 0
-    };
-  }
-
-  increment(delta) {
-    this.updateState({ counter: this.state.counter + delta });
-  }
-}

examples/benchmarks/data.js

@@ -1,22 +0,0 @@
-export const messages = [];
-
-const authors = ["Aaron", "David", "Vincent"];
-const content = [
-  "Lorem ipsum dolor sit amet",
-  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
-  "Excepteur sint occaecat cupidatat non proident"
-];
-
-function chooseRandomly(array) {
-  const index = Math.floor(Math.random() * array.length);
-  return array[index];
-}
-
-for (let i = 1; i < 16000; i++) {
-  messages.push({
-    id: i,
-    author: chooseRandomly(authors),
-    msg: `${i}: ${chooseRandomly(content)}`,
-    likes: 0
-  });
-}

examples/benchmarks/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Odoo WebCore Benchmarks App</title>
-    <link rel="icon" href="data:,">
-
-    <!-- Application JS/CSS -->
-    <script src="/core.js"></script>
-    <link rel="stylesheet" href="/app.css">
-    <script type="module" src="/main.js"></script>
-
-  </head>
-  <body>
-  </body>
-</html>

examples/benchmarks/main.js

@@ -1,13 +0,0 @@
-import { App } from "./app.js";
-
-function createApp(el) {
-  const env = {
-    qweb: new owl.core.QWeb()
-  };
-  const app = new App(env, { initialState: 13 });
-  app.mount(el);
-}
-
-document.addEventListener("DOMContentLoaded", function() {
-  createApp(document.body);
-});

examples/benchmarks/message.js

@@ -1,22 +0,0 @@
-import { Counter } from "./counter.js";
-
-export class Message extends owl.core.Component {
-  inlineTemplate = `
-    <div class="message">
-        <span class="author"><t t-esc="props.author"/></span>
-        <span class="msg"><t t-esc="props.msg"/></span>
-        <button class="remove" t-on-click="removeMessage">Remove</button>
-        <t t-widget="Counter" t-props="{initialState: props.id}"/>
-    </div>`;
-
-  constructor(parent, props) {
-    super(parent, props);
-    this.widgets = { Counter };
-  }
-
-  removeMessage() {
-    this.trigger("remove_message", {
-      id: this.props.id
-    });
-  }
-}

examples/readme.md

@@ -1,46 +0,0 @@
-# Examples
-
-This project features three example to illustrate how to work with the web-core framework:
-
-- _benchmarks_ is a small application to test large number of widgets,
-- _todoapp_ is the classical todo application (from the todomvc project),
-- _web_ is a rethinking of how the odoo web client could be implemented.
-
-## Benchmarks
-
-This example is just a playground to experiment/showcase some features of the framework, with large number of widgets.
-
-```
-npm run example:benchmarks:build # make a build in dist/examples/
-npm run example:benchmarks:dev   # make a build in dist/examples/, and make a live server to access it
-```
-
-The benchmarks application generates a large number of demo messages, and display them in a list, with a few buttons that can
-be used to alter the number of visible widgets.
-
-Note that each message is itself a widget, with a sub widget. This
-example could be made faster (by not using subwidgets), but the point is to observe/measure the overhead of the Component class.
-
-## Todo App
-
-The Todo App is the classical todo application from _http://todomvc.com/_. It is a good mini application with non trivial data structures and interface updates.
-
-```
-npm run example:todoapp:build # make a build in dist/examples/
-npm run example:todoapp:dev   # make a build in dist/examples/, and make a live server to access it
-```
-
-It is implemented with the Store class (as in redux/vuex).
-
-## Web Client Example
-
-The _web_ example,located in the _examples/web/_ folder is a rethink of what the
-web client could look like if it is ever rebuilt from scratch. It is currently an experiment. But obviously, we hope someday to be able to use this work and
-actually rewrite completely the odoo web client.
-
-```
-npm run example:web:build # make a build in dist/examples/
-npm run example:web:dev   # make a build in dist/examples/, and make a live server to access it
-```
-
-Note that it is currently written in typescript.

examples/todoapp/app.css

@@ -1,376 +0,0 @@
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
-button {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: none;
-  font-size: 100%;
-  vertical-align: baseline;
-  font-family: inherit;
-  font-weight: inherit;
-  color: inherit;
-  -webkit-appearance: none;
-  appearance: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1.4em;
-  background: #f5f5f5;
-  color: #4d4d4d;
-  min-width: 230px;
-  max-width: 550px;
-  margin: 0 auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 300;
-}
-
-:focus {
-  outline: 0;
-}
-
-.hidden {
-  display: none;
-}
-
-.todoapp {
-  background: #fff;
-  margin: 130px 0 40px 0;
-  position: relative;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-}
-
-.todoapp input::-webkit-input-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-.todoapp input::-moz-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-.todoapp input::input-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-.todoapp h1 {
-  position: absolute;
-  top: -155px;
-  width: 100%;
-  font-size: 100px;
-  font-weight: 100;
-  text-align: center;
-  color: rgba(175, 47, 47, 0.15);
-  -webkit-text-rendering: optimizeLegibility;
-  -moz-text-rendering: optimizeLegibility;
-  text-rendering: optimizeLegibility;
-}
-
-.new-todo,
-.edit {
-  position: relative;
-  margin: 0;
-  width: 100%;
-  font-size: 24px;
-  font-family: inherit;
-  font-weight: inherit;
-  line-height: 1.4em;
-  border: 0;
-  color: inherit;
-  padding: 6px;
-  border: 1px solid #999;
-  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.new-todo {
-  padding: 16px 16px 16px 60px;
-  border: none;
-  background: rgba(0, 0, 0, 0.003);
-  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
-}
-
-.main {
-  position: relative;
-  z-index: 2;
-  border-top: 1px solid #e6e6e6;
-}
-
-.toggle-all {
-  width: 1px;
-  height: 1px;
-  border: none; /* Mobile Safari */
-  opacity: 0;
-  position: absolute;
-  right: 100%;
-  bottom: 100%;
-}
-
-.toggle-all + label {
-  width: 60px;
-  height: 34px;
-  font-size: 0;
-  position: absolute;
-  top: -52px;
-  left: -13px;
-  -webkit-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-
-.toggle-all + label:before {
-  content: "❯";
-  font-size: 22px;
-  color: #e6e6e6;
-  padding: 10px 27px 10px 27px;
-}
-
-.toggle-all:checked + label:before {
-  color: #737373;
-}
-
-.todo-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.todo-list li {
-  position: relative;
-  font-size: 24px;
-  border-bottom: 1px solid #ededed;
-}
-
-.todo-list li:last-child {
-  border-bottom: none;
-}
-
-.todo-list li.editing {
-  border-bottom: none;
-  padding: 0;
-}
-
-.todo-list li.editing .edit {
-  display: block;
-  width: calc(100% - 43px);
-  padding: 12px 16px;
-  margin: 0 0 0 43px;
-}
-
-.todo-list li.editing .view {
-  display: none;
-}
-
-.todo-list li .toggle {
-  text-align: center;
-  width: 40px;
-  /* auto, since non-WebKit browsers doesn't support input styling */
-  height: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  border: none; /* Mobile Safari */
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.todo-list li .toggle {
-  opacity: 0;
-}
-
-.todo-list li .toggle + label {
-  /*
-		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
-		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
-	*/
-  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center left;
-}
-
-.todo-list li .toggle:checked + label {
-  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
-}
-
-.todo-list li label {
-  word-break: break-all;
-  padding: 15px 15px 15px 60px;
-  display: block;
-  line-height: 1.2;
-  transition: color 0.4s;
-}
-
-.todo-list li.completed label {
-  color: #d9d9d9;
-  text-decoration: line-through;
-}
-
-.todo-list li .destroy {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 10px;
-  bottom: 0;
-  width: 40px;
-  height: 40px;
-  margin: auto 0;
-  font-size: 30px;
-  color: #cc9a9a;
-  margin-bottom: 11px;
-  transition: color 0.2s ease-out;
-}
-
-.todo-list li .destroy:hover {
-  color: #af5b5e;
-}
-
-.todo-list li .destroy:after {
-  content: "×";
-}
-
-.todo-list li:hover .destroy {
-  display: block;
-}
-
-.todo-list li .edit {
-  display: none;
-}
-
-.todo-list li.editing:last-child {
-  margin-bottom: -1px;
-}
-
-.footer {
-  color: #777;
-  padding: 10px 15px;
-  height: 20px;
-  text-align: center;
-  border-top: 1px solid #e6e6e6;
-}
-
-.footer:before {
-  content: "";
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 50px;
-  overflow: hidden;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
-    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
-    0 17px 2px -6px rgba(0, 0, 0, 0.2);
-}
-
-.todo-count {
-  float: left;
-  text-align: left;
-}
-
-.todo-count strong {
-  font-weight: 300;
-}
-
-.filters {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: absolute;
-  right: 0;
-  left: 0;
-}
-
-.filters li {
-  display: inline;
-}
-
-.filters li a {
-  color: inherit;
-  margin: 3px;
-  padding: 3px 7px;
-  text-decoration: none;
-  border: 1px solid transparent;
-  border-radius: 3px;
-}
-
-.filters li a:hover {
-  border-color: rgba(175, 47, 47, 0.1);
-}
-
-.filters li a.selected {
-  border-color: rgba(175, 47, 47, 0.2);
-}
-
-.clear-completed,
-html .clear-completed:active {
-  float: right;
-  position: relative;
-  line-height: 20px;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.clear-completed:hover {
-  text-decoration: underline;
-}
-
-.info {
-  margin: 65px auto 0;
-  color: #bfbfbf;
-  font-size: 10px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  text-align: center;
-}
-
-.info p {
-  line-height: 1;
-}
-
-.info a {
-  color: inherit;
-  text-decoration: none;
-  font-weight: 400;
-}
-
-.info a:hover {
-  text-decoration: underline;
-}
-
-/*
-	Hack to remove background from Mobile Safari.
-	Can't use it globally since it destroys checkboxes in Firefox
-*/
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .toggle-all,
-  .todo-list li .toggle {
-    background: none;
-  }
-
-  .todo-list li .toggle {
-    height: 40px;
-  }
-}
-
-@media (max-width: 430px) {
-  .footer {
-    height: 50px;
-  }
-
-  .filters {
-    bottom: 10px;
-  }
-}

examples/todoapp/components/TodoApp.js

@@ -1,60 +0,0 @@
-import { TodoItem } from "./TodoItem.js";
-
-const { Component } = owl.core;
-const { connect } = owl.extras;
-
-const ENTER_KEY = 13;
-
-function mapStateToProps(state) {
-  return { todos: state.todos };
-}
-
-class TodoApp extends Component {
-  template = "todoapp";
-  widgets = { TodoItem };
-  state = { filter: "all" };
-
-  get visibleTodos() {
-    let todos = this.props.todos;
-    if (this.state.filter === "active") {
-      todos = todos.filter(t => !t.completed);
-    }
-    if (this.state.filter === "completed") {
-      todos = todos.filter(t => t.completed);
-    }
-    return todos;
-  }
-
-  get allChecked() {
-    return this.props.todos.every(todo => todo.completed);
-  }
-
-  get remaining() {
-    return this.props.todos.filter(todo => !todo.completed).length;
-  }
-
-  get remainingText() {
-    const items = this.remaining < 2 ? "item" : "items";
-    return ` ${items} left`;
-  }
-
-  addTodo(ev) {
-    if (ev.keyCode === ENTER_KEY) {
-      const title = ev.target.value;
-      if (title.trim()) {
-        this.env.store.dispatch("addTodo", title);
-      }
-      ev.target.value = "";
-    }
-  }
-
-  clearCompleted() {
-    this.env.store.dispatch("clearCompleted");
-  }
-
-  toggleAll() {
-    this.env.store.dispatch("toggleAll", !this.allChecked);
-  }
-}
-
-export default connect(mapStateToProps)(TodoApp);

examples/todoapp/components/TodoItem.js

@@ -1,49 +0,0 @@
-const ENTER_KEY = 13;
-const ESC_KEY = 27;
-
-export class TodoItem extends owl.core.Component {
-  template = "todoitem";
-
-  state = { isEditing: false };
-
-  removeTodo() {
-    this.env.store.dispatch("removeTodo", this.props.id);
-  }
-
-  toggleTodo() {
-    this.env.store.dispatch("toggleTodo", this.props.id);
-  }
-
-  async editTodo() {
-    await this.updateState({ isEditing: true });
-    this.refs.input.value = "";
-    this.refs.input.focus();
-    this.refs.input.value = this.props.title;
-  }
-
-  handleKeyup(ev) {
-    if (ev.keyCode === ENTER_KEY) {
-      this.updateTitle(ev.target.value);
-    }
-    if (ev.keyCode === ESC_KEY) {
-      ev.target.value = this.props.title;
-      this.updateState({ isEditing: false });
-    }
-  }
-
-  handleBlur(ev) {
-    this.updateTitle(ev.target.value);
-  }
-  updateTitle(title) {
-    const value = title.trim();
-    if (!value) {
-      this.removeTodo(this.props.id);
-    } else {
-      this.env.store.dispatch("editTodo", {
-        id: this.props.id,
-        title: value
-      });
-      this.updateState({ isEditing: false });
-    }
-  }
-}

examples/todoapp/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Odoo Demo App</title>
-    <link rel="icon" href="data:,">
-
-    <!-- Application JS/CSS -->
-    <script src="/core.js"></script>
-    <link rel="stylesheet" href="/app.css">
-    <script type="module" src="/main.js"></script>
-
-  </head>
-  <body>
-  </body>
-</html>

examples/todoapp/main.js

@@ -1,26 +0,0 @@
-import TodoApp from "./components/TodoApp.js";
-import { makeStore } from "./store.js";
-
-async function makeEnv() {
-  const result = await fetch("templates.xml");
-  if (!result.ok) {
-    throw new Error("Error while fetching xml templates");
-  }
-  let templates = await result.text();
-  templates = templates.replace(/<!--[\s\S]*?-->/g, "");
-  const qweb = new owl.core.QWeb();
-  qweb.loadTemplates(templates);
-  return {
-    qweb,
-    store: makeStore()
-  };
-}
-
-document.addEventListener("DOMContentLoaded", async function() {
-  const env = await makeEnv();
-  const app = new TodoApp(env);
-
-  // for debugging purpose
-  window.app = app;
-  await app.mount(document.body);
-});

examples/todoapp/store.js

@@ -1,75 +0,0 @@
-//------------------------------------------------------------------------------
-// ACTIONS
-//------------------------------------------------------------------------------
-
-const actions = {
-  addTodo({ commit }, title) {
-    commit("addTodo", title);
-  },
-  removeTodo({ commit }, id) {
-    commit("removeTodo", id);
-  },
-  toggleTodo({ state, commit }, id) {
-    const todo = state.todos.find(t => t.id === id);
-    commit("editTodo", { id, completed: !todo.completed });
-  },
-  clearCompleted({ state, commit }) {
-    state.todos
-      .filter(todo => todo.completed)
-      .forEach(todo => {
-        commit("removeTodo", todo.id);
-      });
-  },
-  toggleAll({ state, commit }, completed) {
-    state.todos.forEach(todo => {
-      commit("editTodo", { id: todo.id, completed });
-    });
-  },
-  editTodo({ commit }, { id, title }) {
-    commit("editTodo", { id, title });
-  }
-};
-
-//------------------------------------------------------------------------------
-// MUTATIONS
-//------------------------------------------------------------------------------
-
-const mutations = {
-  addTodo(state, title) {
-    const id = state.nextId++;
-    const todo = { id, title, completed: false };
-    state.todos.push(todo);
-  },
-  removeTodo(state, id) {
-    const index = state.todos.findIndex(t => t.id === id);
-    state.todos.splice(index, 1);
-  },
-  editTodo(state, { id, title, completed }) {
-    const todo = state.todos.find(t => t.id === id);
-    if (title !== undefined) {
-      todo.title = title;
-    }
-    if (completed !== undefined) {
-      todo.completed = completed;
-    }
-  }
-};
-
-//------------------------------------------------------------------------------
-// STORE
-//------------------------------------------------------------------------------
-const LOCALSTORAGE_KEY = "todos-odoo";
-
-export function makeStore() {
-  const todos = JSON.parse(
-    window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
-  );
-  const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
-  const state = { todos, nextId };
-  const store = new owl.extras.Store({ state, actions, mutations });
-  store.on("update", null, () => {
-    const state = JSON.stringify(store.state.todos);
-    window.localStorage.setItem(LOCALSTORAGE_KEY, state);
-  });
-  return store;
-}

examples/todoapp/templates.xml

@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-
-    <section t-name="todoapp" class="todoapp">
-        <!-- header -->
-        <header class="header">
-            <h1>todos</h1>
-            <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
-        </header>
-        <!-- main section -->
-        <section class="main" t-if="props.todos.length">
-            <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="toggleAll"/>
-            <label for="toggle-all"></label>
-            <ul class="todo-list">
-                <t t-foreach="visibleTodos" t-as="todo">
-                    <t t-widget="TodoItem" t-props="todo"/>
-                </t>
-            </ul>
-        </section>
-        <!-- footer -->
-        <footer class="footer" t-if="props.todos.length">
-            <span class="todo-count">
-                <strong>
-                    <t t-esc="remaining"/>
-                </strong>
-                <t t-esc="remainingText"/>
-            </span>
-            <ul class="filters">
-                <li>
-                    <a href="#/all" t-on-click="updateState({filter:'all'})" t-att-class="{selected: state.filter === 'all'}">All</a>
-                </li>
-                <li>
-                    <a href="#/active" t-on-click="updateState({filter:'active'})" t-att-class="{selected: state.filter === 'active'}">Active</a>
-                </li>
-                <li>
-                    <a href="#/completed" t-on-click="updateState({filter:'completed'})" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
-                </li>
-            </ul>
-            <button class="clear-completed" t-if="props.todos.length gt remaining" t-on-click="clearCompleted">
-        Clear completed
-            </button>
-        </footer>
-    </section>
-
-    <li t-name="todoitem" class="todo" t-att-class="{completed: props.completed, editing: state.isEditing}">
-        <div class="view">
-            <input class="toggle" type="checkbox" t-on-change="toggleTodo" t-att-checked="props.completed"/>
-            <label t-on-dblclick="editTodo">
-                <t t-esc="props.title"/>
-            </label>
-            <button class="destroy" t-on-click="removeTodo"></button>
-        </div>
-        <input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
-    </li>
-
-</templates>

examples/web/demo_data.js

@@ -1,212 +0,0 @@
-(function(window) {
-  "use strict";
-
-  var menus = [
-    {
-      id: 96,
-      name: "Discuss",
-      parent_id: false,
-      action: "ir.actions.client,131",
-      icon: "fa fa-comment",
-      children: []
-    },
-    {
-      id: 205,
-      name: "Notes",
-      parent_id: false,
-      action: "ir.actions.act_window,250",
-      icon: "fa fa-pen",
-      children: []
-    },
-    {
-      id: 409,
-      name: "CRM",
-      parent_id: false,
-      action: "ir.actions.act_window,597",
-      icon: "fa fa-handshake",
-      children: [
-        {
-          id: 418,
-          name: "Sales",
-          parent_id: 409,
-          action: false,
-          icon: false,
-          children: [
-            {
-              id: 423,
-              name: "My Pipeline",
-              parent_id: 418,
-              action: "ir.actions.act_window,597",
-              icon: false,
-              children: []
-            },
-            {
-              id: 812,
-              name: "My Quotations",
-              parent_id: 418,
-              action: "ir.actions.act_window,1051",
-              icon: false,
-              children: []
-            },
-            {
-              id: 419,
-              name: "Team Pipelines",
-              parent_id: 418,
-              action: "ir.actions.act_window,275",
-              icon: false,
-              children: []
-            }
-          ]
-        },
-        {
-          id: 421,
-          name: "Leads",
-          parent_id: 409,
-          action: false,
-          icon: false,
-          children: [
-            {
-              id: 422,
-              name: "Leads",
-              parent_id: 421,
-              action: "ir.actions.act_window,595",
-              icon: false,
-              children: []
-            },
-            {
-              id: 752,
-              name: "Scoring Rules",
-              parent_id: 421,
-              icon: false,
-              action: "ir.actions.act_window,1083",
-              children: []
-            }
-          ]
-        }
-      ]
-    }
-  ];
-  window.demoData = {
-    menus: menus
-  };
-
-  const actions = [
-    {
-      id: 131,
-      type: "ir.actions.client",
-      target: "current",
-      name: "Discuss",
-      tag: "mail.discuss"
-    },
-    {
-      id: 250,
-      type: "ir.actions.act_window",
-      name: "Notes",
-      target: "current",
-      domain: false,
-      context: "{}",
-      views: [[false, "kanban"], [false, "list"], [false, "form"]],
-      res_id: 0,
-      res_model: "note.note"
-    },
-    {
-      id: 597,
-      type: "ir.actions.act_window",
-      name: "Pipeline",
-      target: "current",
-      domain: false,
-      context: { default_team_id: 1 },
-      views: [[2103, "kanban"], [2106, "list"], [2105, "form"]],
-      res_id: 0,
-      res_model: "crm.lead"
-    },
-    {
-      id: 1051,
-      type: "ir.actions.act_window",
-      name: "Quotations",
-      target: "current",
-      domain: false,
-      context: "{'search_default_my_quotation': 1}",
-      views: [
-        [3387, "list"],
-        [3385, "kanban"],
-        [3389, "form"],
-        [3382, "calendar"],
-        [3384, "pivot"],
-        [3383, "graph"]
-      ],
-      res_id: 0,
-      res_model: "sale.order"
-    },
-    {
-      id: 275,
-      type: "ir.actions.act_window",
-      name: "Team Pipelines",
-      target: "current",
-      context: "{}",
-      domain: "[('use_opportunities', '=', True)]",
-      views: [[false, "kanban"], [false, "form"]],
-      res_id: 0,
-      res_model: "crm.team"
-    },
-    {
-      id: 595,
-      type: "ir.actions.act_window",
-      name: "Leads",
-      target: "current",
-      context:
-        "{ 'default_type':'lead', 'search_default_type': 'lead', 'search_default_to_process':1,  }",
-      domain: "['|', ('type','=','lead'), ('type','=',False)]",
-      views: [
-        [2098, "list"],
-        [2099, "kanban"],
-        [2100, "calendar"],
-        [2108, "pivot"],
-        [2107, "graph"],
-        [false, "form"]
-      ],
-      res_id: 0,
-      res_model: "crm.lead"
-    },
-    {
-      id: 1083,
-      type: "ir.actions.act_window",
-      name: "Scores",
-      target: "current",
-      context: "{}",
-      domain: false,
-      views: [[false, "list"], [false, "kanban"], [false, "form"]],
-      res_id: 0,
-      res_model: "website.crm.score"
-    }
-  ];
-
-  let rpcId = 1;
-  window.demoData.mockAjax = async function(route, params) {
-    let id = rpcId++;
-    console.log(`[RPC Request ${id}]`, route, params);
-
-    // wait some random delay
-    const delay = Math.random() * 1000;
-    return new Promise(resolve => setTimeout(resolve, delay)).then(() => {
-      const result = _mock(route, params);
-      console.log(`[RPC Response ${id}]`, result);
-      return result;
-    });
-  };
-
-  function _mock(route, params) {
-    // mock action
-    if (route === "web/action/load") {
-      const action = actions.find(a => a.id === params.action_id);
-      if (action) {
-        return action;
-      } else {
-        throw new Error("cannot find action");
-      }
-    }
-    // unknown route
-    console.warn("Unknown route", route);
-    return true;
-  }
-})(window);

examples/web/index.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Odoo</title>
-    <link rel="icon" href="data:,">
-
-    <!-- Bootstrap... This sucks. -->
-    <script src="/static/libs/jquery/jquery-3.3.1.slim.min.js"></script>
-    <script src="/static/libs/popper/popper.min.js"></script>
-    <link rel="stylesheet" href="/static/libs/bootstrap/bootstrap.min.css">
-    <script src="/static/libs/bootstrap/bootstrap.min.js"></script>
-
-    <!-- Font awesome -->
-    <link rel="stylesheet" href="/static/libs/fontawesome/css/all.min.css">
-
-    <!-- AMD module system -->
-    <script src="/static/libs/almond/almond.js"></script>
-
-    <!-- Application JS/CSS -->
-    <script src="/main.js"></script>
-    <link rel="stylesheet" href="/app.css">
-
-    <script src="/demo_data.js"></script>
-
-    <script>
-        window.odoo = {};
-
-        // we add demo data here
-        window.odoo.menus = demoData.menus;
-
-        // this will start the main.ts code, which creates the web client
-        require('main');
-    </script>
-
-  </head>
-  <body>
-  </body>
-</html>

examples/web/static/libs/almond/almond.js

@@ -1,434 +0,0 @@
-/**
- * @license almond 0.3.3 Copyright jQuery Foundation and other contributors.
- * Released under MIT license, http://github.com/requirejs/almond/LICENSE
- */
-//Going sloppy to avoid 'use strict' string cost, but strict practices should
-//be followed.
-/*global setTimeout: false */
-
-var requirejs, require, define;
-(function (undef) {
-    var main, req, makeMap, handlers,
-        defined = {},
-        waiting = {},
-        config = {},
-        defining = {},
-        hasOwn = Object.prototype.hasOwnProperty,
-        aps = [].slice,
-        jsSuffixRegExp = /\.js$/;
-
-    function hasProp(obj, prop) {
-        return hasOwn.call(obj, prop);
-    }
-
-    /**
-     * Given a relative module name, like ./something, normalize it to
-     * a real name that can be mapped to a path.
-     * @param {String} name the relative name
-     * @param {String} baseName a real name that the name arg is relative
-     * to.
-     * @returns {String} normalized name
-     */
-    function normalize(name, baseName) {
-        var nameParts, nameSegment, mapValue, foundMap, lastIndex,
-            foundI, foundStarMap, starI, i, j, part, normalizedBaseParts,
-            baseParts = baseName && baseName.split("/"),
-            map = config.map,
-            starMap = (map && map['*']) || {};
-
-        //Adjust any relative paths.
-        if (name) {
-            name = name.split('/');
-            lastIndex = name.length - 1;
-
-            // If wanting node ID compatibility, strip .js from end
-            // of IDs. Have to do this here, and not in nameToUrl
-            // because node allows either .js or non .js to map
-            // to same file.
-            if (config.nodeIdCompat && jsSuffixRegExp.test(name[lastIndex])) {
-                name[lastIndex] = name[lastIndex].replace(jsSuffixRegExp, '');
-            }
-
-            // Starts with a '.' so need the baseName
-            if (name[0].charAt(0) === '.' && baseParts) {
-                //Convert baseName to array, and lop off the last part,
-                //so that . matches that 'directory' and not name of the baseName's
-                //module. For instance, baseName of 'one/two/three', maps to
-                //'one/two/three.js', but we want the directory, 'one/two' for
-                //this normalization.
-                normalizedBaseParts = baseParts.slice(0, baseParts.length - 1);
-                name = normalizedBaseParts.concat(name);
-            }
-
-            //start trimDots
-            for (i = 0; i < name.length; i++) {
-                part = name[i];
-                if (part === '.') {
-                    name.splice(i, 1);
-                    i -= 1;
-                } else if (part === '..') {
-                    // If at the start, or previous value is still ..,
-                    // keep them so that when converted to a path it may
-                    // still work when converted to a path, even though
-                    // as an ID it is less than ideal. In larger point
-                    // releases, may be better to just kick out an error.
-                    if (i === 0 || (i === 1 && name[2] === '..') || name[i - 1] === '..') {
-                        continue;
-                    } else if (i > 0) {
-                        name.splice(i - 1, 2);
-                        i -= 2;
-                    }
-                }
-            }
-            //end trimDots
-
-            name = name.join('/');
-        }
-
-        //Apply map config if available.
-        if ((baseParts || starMap) && map) {
-            nameParts = name.split('/');
-
-            for (i = nameParts.length; i > 0; i -= 1) {
-                nameSegment = nameParts.slice(0, i).join("/");
-
-                if (baseParts) {
-                    //Find the longest baseName segment match in the config.
-                    //So, do joins on the biggest to smallest lengths of baseParts.
-                    for (j = baseParts.length; j > 0; j -= 1) {
-                        mapValue = map[baseParts.slice(0, j).join('/')];
-
-                        //baseName segment has  config, find if it has one for
-                        //this name.
-                        if (mapValue) {
-                            mapValue = mapValue[nameSegment];
-                            if (mapValue) {
-                                //Match, update name to the new value.
-                                foundMap = mapValue;
-                                foundI = i;
-                                break;
-                            }
-                        }
-                    }
-                }
-
-                if (foundMap) {
-                    break;
-                }
-
-                //Check for a star map match, but just hold on to it,
-                //if there is a shorter segment match later in a matching
-                //config, then favor over this star map.
-                if (!foundStarMap && starMap && starMap[nameSegment]) {
-                    foundStarMap = starMap[nameSegment];
-                    starI = i;
-                }
-            }
-
-            if (!foundMap && foundStarMap) {
-                foundMap = foundStarMap;
-                foundI = starI;
-            }
-
-            if (foundMap) {
-                nameParts.splice(0, foundI, foundMap);
-                name = nameParts.join('/');
-            }
-        }
-
-        return name;
-    }
-
-    function makeRequire(relName, forceSync) {
-        return function () {
-            //A version of a require function that passes a moduleName
-            //value for items that may need to
-            //look up paths relative to the moduleName
-            var args = aps.call(arguments, 0);
-
-            //If first arg is not require('string'), and there is only
-            //one arg, it is the array form without a callback. Insert
-            //a null so that the following concat is correct.
-            if (typeof args[0] !== 'string' && args.length === 1) {
-                args.push(null);
-            }
-            return req.apply(undef, args.concat([relName, forceSync]));
-        };
-    }
-
-    function makeNormalize(relName) {
-        return function (name) {
-            return normalize(name, relName);
-        };
-    }
-
-    function makeLoad(depName) {
-        return function (value) {
-            defined[depName] = value;
-        };
-    }
-
-    function callDep(name) {
-        if (hasProp(waiting, name)) {
-            var args = waiting[name];
-            delete waiting[name];
-            defining[name] = true;
-            main.apply(undef, args);
-        }
-
-        if (!hasProp(defined, name) && !hasProp(defining, name)) {
-            throw new Error('No ' + name);
-        }
-        return defined[name];
-    }
-
-    //Turns a plugin!resource to [plugin, resource]
-    //with the plugin being undefined if the name
-    //did not have a plugin prefix.
-    function splitPrefix(name) {
-        var prefix,
-            index = name ? name.indexOf('!') : -1;
-        if (index > -1) {
-            prefix = name.substring(0, index);
-            name = name.substring(index + 1, name.length);
-        }
-        return [prefix, name];
-    }
-
-    //Creates a parts array for a relName where first part is plugin ID,
-    //second part is resource ID. Assumes relName has already been normalized.
-    function makeRelParts(relName) {
-        return relName ? splitPrefix(relName) : [];
-    }
-
-    /**
-     * Makes a name map, normalizing the name, and using a plugin
-     * for normalization if necessary. Grabs a ref to plugin
-     * too, as an optimization.
-     */
-    makeMap = function (name, relParts) {
-        var plugin,
-            parts = splitPrefix(name),
-            prefix = parts[0],
-            relResourceName = relParts[1];
-
-        name = parts[1];
-
-        if (prefix) {
-            prefix = normalize(prefix, relResourceName);
-            plugin = callDep(prefix);
-        }
-
-        //Normalize according
-        if (prefix) {
-            if (plugin && plugin.normalize) {
-                name = plugin.normalize(name, makeNormalize(relResourceName));
-            } else {
-                name = normalize(name, relResourceName);
-            }
-        } else {
-            name = normalize(name, relResourceName);
-            parts = splitPrefix(name);
-            prefix = parts[0];
-            name = parts[1];
-            if (prefix) {
-                plugin = callDep(prefix);
-            }
-        }
-
-        //Using ridiculous property names for space reasons
-        return {
-            f: prefix ? prefix + '!' + name : name, //fullName
-            n: name,
-            pr: prefix,
-            p: plugin
-        };
-    };
-
-    function makeConfig(name) {
-        return function () {
-            return (config && config.config && config.config[name]) || {};
-        };
-    }
-
-    handlers = {
-        require: function (name) {
-            return makeRequire(name);
-        },
-        exports: function (name) {
-            var e = defined[name];
-            if (typeof e !== 'undefined') {
-                return e;
-            } else {
-                return (defined[name] = {});
-            }
-        },
-        module: function (name) {
-            return {
-                id: name,
-                uri: '',
-                exports: defined[name],
-                config: makeConfig(name)
-            };
-        }
-    };
-
-    main = function (name, deps, callback, relName) {
-        var cjsModule, depName, ret, map, i, relParts,
-            args = [],
-            callbackType = typeof callback,
-            usingExports;
-
-        //Use name if no relName
-        relName = relName || name;
-        relParts = makeRelParts(relName);
-
-        //Call the callback to define the module, if necessary.
-        if (callbackType === 'undefined' || callbackType === 'function') {
-            //Pull out the defined dependencies and pass the ordered
-            //values to the callback.
-            //Default to [require, exports, module] if no deps
-            deps = !deps.length && callback.length ? ['require', 'exports', 'module'] : deps;
-            for (i = 0; i < deps.length; i += 1) {
-                map = makeMap(deps[i], relParts);
-                depName = map.f;
-
-                //Fast path CommonJS standard dependencies.
-                if (depName === "require") {
-                    args[i] = handlers.require(name);
-                } else if (depName === "exports") {
-                    //CommonJS module spec 1.1
-                    args[i] = handlers.exports(name);
-                    usingExports = true;
-                } else if (depName === "module") {
-                    //CommonJS module spec 1.1
-                    cjsModule = args[i] = handlers.module(name);
-                } else if (hasProp(defined, depName) ||
-                           hasProp(waiting, depName) ||
-                           hasProp(defining, depName)) {
-                    args[i] = callDep(depName);
-                } else if (map.p) {
-                    map.p.load(map.n, makeRequire(relName, true), makeLoad(depName), {});
-                    args[i] = defined[depName];
-                } else {
-                    throw new Error(name + ' missing ' + depName);
-                }
-            }
-
-            ret = callback ? callback.apply(defined[name], args) : undefined;
-
-            if (name) {
-                //If setting exports via "module" is in play,
-                //favor that over return value and exports. After that,
-                //favor a non-undefined return value over exports use.
-                if (cjsModule && cjsModule.exports !== undef &&
-                        cjsModule.exports !== defined[name]) {
-                    defined[name] = cjsModule.exports;
-                } else if (ret !== undef || !usingExports) {
-                    //Use the return value from the function.
-                    defined[name] = ret;
-                }
-            }
-        } else if (name) {
-            //May just be an object definition for the module. Only
-            //worry about defining if have a module name.
-            defined[name] = callback;
-        }
-    };
-
-    requirejs = require = req = function (deps, callback, relName, forceSync, alt) {
-        if (typeof deps === "string") {
-            if (handlers[deps]) {
-                //callback in this case is really relName
-                return handlers[deps](callback);
-            }
-            //Just return the module wanted. In this scenario, the
-            //deps arg is the module name, and second arg (if passed)
-            //is just the relName.
-            //Normalize module name, if it contains . or ..
-            return callDep(makeMap(deps, makeRelParts(callback)).f);
-        } else if (!deps.splice) {
-            //deps is a config object, not an array.
-            config = deps;
-            if (config.deps) {
-                req(config.deps, config.callback);
-            }
-            if (!callback) {
-                return;
-            }
-
-            if (callback.splice) {
-                //callback is an array, which means it is a dependency list.
-                //Adjust args if there are dependencies
-                deps = callback;
-                callback = relName;
-                relName = null;
-            } else {
-                deps = undef;
-            }
-        }
-
-        //Support require(['a'])
-        callback = callback || function () {};
-
-        //If relName is a function, it is an errback handler,
-        //so remove it.
-        if (typeof relName === 'function') {
-            relName = forceSync;
-            forceSync = alt;
-        }
-
-        //Simulate async callback;
-        if (forceSync) {
-            main(undef, deps, callback, relName);
-        } else {
-            //Using a non-zero value because of concern for what old browsers
-            //do, and latest browsers "upgrade" to 4 if lower value is used:
-            //http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-settimeout:
-            //If want a value immediately, use require('id') instead -- something
-            //that works in almond on the global level, but not guaranteed and
-            //unlikely to work in other AMD implementations.
-            setTimeout(function () {
-                main(undef, deps, callback, relName);
-            }, 4);
-        }
-
-        return req;
-    };
-
-    /**
-     * Just drops the config on the floor, but returns req in case
-     * the config return value is used.
-     */
-    req.config = function (cfg) {
-        return req(cfg);
-    };
-
-    /**
-     * Expose module registry for debugging and tooling
-     */
-    requirejs._defined = defined;
-
-    define = function (name, deps, callback) {
-        if (typeof name !== 'string') {
-            throw new Error('See almond README: incorrect module build, no module name');
-        }
-
-        //This module may not have dependencies
-        if (!deps.splice) {
-            //deps is not an array, so probably means
-            //an object literal or factory function for
-            //the value. Adjust args.
-            callback = deps;
-            deps = [];
-        }
-
-        if (!hasProp(defined, name) && !hasProp(waiting, name)) {
-            waiting[name] = [name, deps, callback];
-        }
-    };
-
-    define.amd = {
-        jQuery: true
-    };
-}());

examples/web/static/libs/fontawesome/LICENSE.txt

@@ -1,34 +0,0 @@
-Font Awesome Free License
--------------------------
-
-Font Awesome Free is free, open source, and GPL friendly. You can use it for
-commercial projects, open source projects, or really almost whatever you want.
-Full Font Awesome Free license: https://fontawesome.com/license/free.
-
-# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
-In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
-packaged as SVG and JS file types.
-
-# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
-In the Font Awesome Free download, the SIL OFL license applies to all icons
-packaged as web and desktop font files.
-
-# Code: MIT License (https://opensource.org/licenses/MIT)
-In the Font Awesome Free download, the MIT license applies to all non-font and
-non-icon files.
-
-# Attribution
-Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
-Awesome Free files already contain embedded comments with sufficient
-attribution, so you shouldn't need to do anything additional when using these
-files normally.
-
-We've kept attribution comments terse, so we ask that you do not actively work
-to remove them from files, especially code. They're a great way for folks to
-learn about Font Awesome.
-
-# Brand Icons
-All brand icons are trademarks of their respective owners. The use of these
-trademarks does not indicate endorsement of the trademark holder by Font
-Awesome, nor vice versa. **Please do not use brand logos for any purpose except
-to represent the company, product, or service to which they refer.**

examples/web/static/libs/fontawesome/css/brands.css

@@ -1,10 +0,0 @@
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-style: normal;
-  font-weight: normal;
-  font-display: auto;
-  src: url("../webfonts/fa-brands-400.eot");
-  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
-
-.fab {
-  font-family: 'Font Awesome 5 Brands'; }

examples/web/static/libs/fontawesome/css/brands.min.css

@@ -1 +0,0 @@
-@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}

examples/web/static/libs/fontawesome/css/regular.css

@@ -1,11 +0,0 @@
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 400;
-  font-display: auto;
-  src: url("../webfonts/fa-regular-400.eot");
-  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
-
-.far {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 400; }

examples/web/static/libs/fontawesome/css/regular.min.css

@@ -1 +0,0 @@
-@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}

examples/web/static/libs/fontawesome/css/solid.css

@@ -1,12 +0,0 @@
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 900;
-  font-display: auto;
-  src: url("../webfonts/fa-solid-900.eot");
-  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
-
-.fa,
-.fas {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900; }

examples/web/static/libs/fontawesome/css/solid.min.css

@@ -1 +0,0 @@
-@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:"Font Awesome 5 Free";font-weight:900}

examples/web/static/libs/fontawesome/css/svg-with-js.css

@@ -1,342 +0,0 @@
-svg:not(:root).svg-inline--fa {
-  overflow: visible; }
-
-.svg-inline--fa {
-  display: inline-block;
-  font-size: inherit;
-  height: 1em;
-  overflow: visible;
-  vertical-align: -.125em; }
-  .svg-inline--fa.fa-lg {
-    vertical-align: -.225em; }
-  .svg-inline--fa.fa-w-1 {
-    width: 0.0625em; }
-  .svg-inline--fa.fa-w-2 {
-    width: 0.125em; }
-  .svg-inline--fa.fa-w-3 {
-    width: 0.1875em; }
-  .svg-inline--fa.fa-w-4 {
-    width: 0.25em; }
-  .svg-inline--fa.fa-w-5 {
-    width: 0.3125em; }
-  .svg-inline--fa.fa-w-6 {
-    width: 0.375em; }
-  .svg-inline--fa.fa-w-7 {
-    width: 0.4375em; }
-  .svg-inline--fa.fa-w-8 {
-    width: 0.5em; }
-  .svg-inline--fa.fa-w-9 {
-    width: 0.5625em; }
-  .svg-inline--fa.fa-w-10 {
-    width: 0.625em; }
-  .svg-inline--fa.fa-w-11 {
-    width: 0.6875em; }
-  .svg-inline--fa.fa-w-12 {
-    width: 0.75em; }
-  .svg-inline--fa.fa-w-13 {
-    width: 0.8125em; }
-  .svg-inline--fa.fa-w-14 {
-    width: 0.875em; }
-  .svg-inline--fa.fa-w-15 {
-    width: 0.9375em; }
-  .svg-inline--fa.fa-w-16 {
-    width: 1em; }
-  .svg-inline--fa.fa-w-17 {
-    width: 1.0625em; }
-  .svg-inline--fa.fa-w-18 {
-    width: 1.125em; }
-  .svg-inline--fa.fa-w-19 {
-    width: 1.1875em; }
-  .svg-inline--fa.fa-w-20 {
-    width: 1.25em; }
-  .svg-inline--fa.fa-pull-left {
-    margin-right: .3em;
-    width: auto; }
-  .svg-inline--fa.fa-pull-right {
-    margin-left: .3em;
-    width: auto; }
-  .svg-inline--fa.fa-border {
-    height: 1.5em; }
-  .svg-inline--fa.fa-li {
-    width: 2em; }
-  .svg-inline--fa.fa-fw {
-    width: 1.25em; }
-
-.fa-layers svg.svg-inline--fa {
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0; }
-
-.fa-layers {
-  display: inline-block;
-  height: 1em;
-  position: relative;
-  text-align: center;
-  vertical-align: -.125em;
-  width: 1em; }
-  .fa-layers svg.svg-inline--fa {
-    -webkit-transform-origin: center center;
-            transform-origin: center center; }
-
-.fa-layers-text, .fa-layers-counter {
-  display: inline-block;
-  position: absolute;
-  text-align: center; }
-
-.fa-layers-text {
-  left: 50%;
-  top: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-  -webkit-transform-origin: center center;
-          transform-origin: center center; }
-
-.fa-layers-counter {
-  background-color: #ff253a;
-  border-radius: 1em;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  color: #fff;
-  height: 1.5em;
-  line-height: 1;
-  max-width: 5em;
-  min-width: 1.5em;
-  overflow: hidden;
-  padding: .25em;
-  right: 0;
-  text-overflow: ellipsis;
-  top: 0;
-  -webkit-transform: scale(0.25);
-          transform: scale(0.25);
-  -webkit-transform-origin: top right;
-          transform-origin: top right; }
-
-.fa-layers-bottom-right {
-  bottom: 0;
-  right: 0;
-  top: auto;
-  -webkit-transform: scale(0.25);
-          transform: scale(0.25);
-  -webkit-transform-origin: bottom right;
-          transform-origin: bottom right; }
-
-.fa-layers-bottom-left {
-  bottom: 0;
-  left: 0;
-  right: auto;
-  top: auto;
-  -webkit-transform: scale(0.25);
-          transform: scale(0.25);
-  -webkit-transform-origin: bottom left;
-          transform-origin: bottom left; }
-
-.fa-layers-top-right {
-  right: 0;
-  top: 0;
-  -webkit-transform: scale(0.25);
-          transform: scale(0.25);
-  -webkit-transform-origin: top right;
-          transform-origin: top right; }
-
-.fa-layers-top-left {
-  left: 0;
-  right: auto;
-  top: 0;
-  -webkit-transform: scale(0.25);
-          transform: scale(0.25);
-  -webkit-transform-origin: top left;
-          transform-origin: top left; }
-
-.fa-lg {
-  font-size: 1.33333em;
-  line-height: 0.75em;
-  vertical-align: -.0667em; }
-
-.fa-xs {
-  font-size: .75em; }
-
-.fa-sm {
-  font-size: .875em; }
-
-.fa-1x {
-  font-size: 1em; }
-
-.fa-2x {
-  font-size: 2em; }
-
-.fa-3x {
-  font-size: 3em; }
-
-.fa-4x {
-  font-size: 4em; }
-
-.fa-5x {
-  font-size: 5em; }
-
-.fa-6x {
-  font-size: 6em; }
-
-.fa-7x {
-  font-size: 7em; }
-
-.fa-8x {
-  font-size: 8em; }
-
-.fa-9x {
-  font-size: 9em; }
-
-.fa-10x {
-  font-size: 10em; }
-
-.fa-fw {
-  text-align: center;
-  width: 1.25em; }
-
-.fa-ul {
-  list-style-type: none;
-  margin-left: 2.5em;
-  padding-left: 0; }
-  .fa-ul > li {
-    position: relative; }
-
-.fa-li {
-  left: -2em;
-  position: absolute;
-  text-align: center;
-  width: 2em;
-  line-height: inherit; }
-
-.fa-border {
-  border: solid 0.08em #eee;
-  border-radius: .1em;
-  padding: .2em .25em .15em; }
-
-.fa-pull-left {
-  float: left; }
-
-.fa-pull-right {
-  float: right; }
-
-.fa.fa-pull-left,
-.fas.fa-pull-left,
-.far.fa-pull-left,
-.fal.fa-pull-left,
-.fab.fa-pull-left {
-  margin-right: .3em; }
-
-.fa.fa-pull-right,
-.fas.fa-pull-right,
-.far.fa-pull-right,
-.fal.fa-pull-right,
-.fab.fa-pull-right {
-  margin-left: .3em; }
-
-.fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-          animation: fa-spin 2s infinite linear; }
-
-.fa-pulse {
-  -webkit-animation: fa-spin 1s infinite steps(8);
-          animation: fa-spin 1s infinite steps(8); }
-
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg); }
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg); } }
-
-@keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg); }
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg); } }
-
-.fa-rotate-90 {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-  -webkit-transform: rotate(90deg);
-          transform: rotate(90deg); }
-
-.fa-rotate-180 {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg); }
-
-.fa-rotate-270 {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-  -webkit-transform: rotate(270deg);
-          transform: rotate(270deg); }
-
-.fa-flip-horizontal {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-  -webkit-transform: scale(-1, 1);
-          transform: scale(-1, 1); }
-
-.fa-flip-vertical {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-  -webkit-transform: scale(1, -1);
-          transform: scale(1, -1); }
-
-.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-  -webkit-transform: scale(-1, -1);
-          transform: scale(-1, -1); }
-
-:root .fa-rotate-90,
-:root .fa-rotate-180,
-:root .fa-rotate-270,
-:root .fa-flip-horizontal,
-:root .fa-flip-vertical,
-:root .fa-flip-both {
-  -webkit-filter: none;
-          filter: none; }
-
-.fa-stack {
-  display: inline-block;
-  height: 2em;
-  position: relative;
-  width: 2.5em; }
-
-.fa-stack-1x,
-.fa-stack-2x {
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0; }
-
-.svg-inline--fa.fa-stack-1x {
-  height: 1em;
-  width: 1.25em; }
-
-.svg-inline--fa.fa-stack-2x {
-  height: 2em;
-  width: 2.5em; }
-
-.fa-inverse {
-  color: #fff; }
-
-.sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px; }
-
-.sr-only-focusable:active, .sr-only-focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  width: auto; }

examples/web/static/libs/fontawesome/css/svg-with-js.min.css

@@ -1 +0,0 @@
-.svg-inline--fa,svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;transform:scale(.25);transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;transform:scale(.25);transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;transform:scale(.25);transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;transform:scale(.25);transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;transform:scale(.25);transform-origin:top left}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s infinite linear}.fa-pulse{animation:fa-spin 1s infinite steps(8)}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}

examples/web/static/libs/fontawesome/js/regular.js

@@ -1,276 +0,0 @@
-(function () {
-  'use strict';
-
-  var _WINDOW = {};
-  var _DOCUMENT = {};
-
-  try {
-    if (typeof window !== 'undefined') _WINDOW = window;
-    if (typeof document !== 'undefined') _DOCUMENT = document;
-  } catch (e) {}
-
-  var _ref = _WINDOW.navigator || {},
-      _ref$userAgent = _ref.userAgent,
-      userAgent = _ref$userAgent === void 0 ? '' : _ref$userAgent;
-
-  var WINDOW = _WINDOW;
-  var DOCUMENT = _DOCUMENT;
-  var IS_BROWSER = !!WINDOW.document;
-  var IS_DOM = !!DOCUMENT.documentElement && !!DOCUMENT.head && typeof DOCUMENT.addEventListener === 'function' && typeof DOCUMENT.createElement === 'function';
-  var IS_IE = ~userAgent.indexOf('MSIE') || ~userAgent.indexOf('Trident/');
-
-  var NAMESPACE_IDENTIFIER = '___FONT_AWESOME___';
-  var PRODUCTION = function () {
-    try {
-      return "production" === 'production';
-    } catch (e) {
-      return false;
-    }
-  }();
-
-  function bunker(fn) {
-    try {
-      fn();
-    } catch (e) {
-      if (!PRODUCTION) {
-        throw e;
-      }
-    }
-  }
-
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
-
-  function _objectSpread(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      var ownKeys = Object.keys(source);
-
-      if (typeof Object.getOwnPropertySymbols === 'function') {
-        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-        }));
-      }
-
-      ownKeys.forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    }
-
-    return target;
-  }
-
-  var w = WINDOW || {};
-  if (!w[NAMESPACE_IDENTIFIER]) w[NAMESPACE_IDENTIFIER] = {};
-  if (!w[NAMESPACE_IDENTIFIER].styles) w[NAMESPACE_IDENTIFIER].styles = {};
-  if (!w[NAMESPACE_IDENTIFIER].hooks) w[NAMESPACE_IDENTIFIER].hooks = {};
-  if (!w[NAMESPACE_IDENTIFIER].shims) w[NAMESPACE_IDENTIFIER].shims = [];
-  var namespace = w[NAMESPACE_IDENTIFIER];
-
-  function defineIcons(prefix, icons) {
-    var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var _params$skipHooks = params.skipHooks,
-        skipHooks = _params$skipHooks === void 0 ? false : _params$skipHooks;
-    var normalized = Object.keys(icons).reduce(function (acc, iconName) {
-      var icon = icons[iconName];
-      var expanded = !!icon.icon;
-
-      if (expanded) {
-        acc[icon.iconName] = icon.icon;
-      } else {
-        acc[iconName] = icon;
-      }
-
-      return acc;
-    }, {});
-
-    if (typeof namespace.hooks.addPack === 'function' && !skipHooks) {
-      namespace.hooks.addPack(prefix, normalized);
-    } else {
-      namespace.styles[prefix] = _objectSpread({}, namespace.styles[prefix] || {}, normalized);
-    }
-    /**
-     * Font Awesome 4 used the prefix of `fa` for all icons. With the introduction
-     * of new styles we needed to differentiate between them. Prefix `fa` is now an alias
-     * for `fas` so we'll easy the upgrade process for our users by automatically defining
-     * this as well.
-     */
-
-
-    if (prefix === 'fas') {
-      defineIcons('fa', icons);
-    }
-  }
-
-  var icons = {
-    "address-book": [448, 512, [], "f2b9", "M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z"],
-    "address-card": [576, 512, [], "f2bb", "M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H48V80h480v352zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2zM360 320h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8z"],
-    "angry": [496, 512, [], "f556", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm0-144c-33.6 0-65.2 14.8-86.8 40.6-8.5 10.2-7.1 25.3 3.1 33.8s25.3 7.2 33.8-3c24.8-29.7 75-29.7 99.8 0 8.1 9.7 23.2 11.9 33.8 3 10.2-8.5 11.5-23.6 3.1-33.8-21.6-25.8-53.2-40.6-86.8-40.6zm-48-72c10.3 0 19.9-6.7 23-17.1 3.8-12.7-3.4-26.1-16.1-29.9l-80-24c-12.8-3.9-26.1 3.4-29.9 16.1-3.8 12.7 3.4 26.1 16.1 29.9l28.2 8.5c-3.1 4.9-5.3 10.4-5.3 16.6 0 17.7 14.3 32 32 32s32-14.4 32-32.1zm199-54.9c-3.8-12.7-17.1-19.9-29.9-16.1l-80 24c-12.7 3.8-19.9 17.2-16.1 29.9 3.1 10.4 12.7 17.1 23 17.1 0 17.7 14.3 32 32 32s32-14.3 32-32c0-6.2-2.2-11.7-5.3-16.6l28.2-8.5c12.7-3.7 19.9-17.1 16.1-29.8z"],
-    "arrow-alt-circle-down": [512, 512, [], "f358", "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z"],
-    "arrow-alt-circle-left": [512, 512, [], "f359", "M8 256c0 137 111 248 248 248s248-111 248-248S393 8 256 8 8 119 8 256zm448 0c0 110.5-89.5 200-200 200S56 366.5 56 256 145.5 56 256 56s200 89.5 200 200zm-72-20v40c0 6.6-5.4 12-12 12H256v67c0 10.7-12.9 16-20.5 8.5l-99-99c-4.7-4.7-4.7-12.3 0-17l99-99c7.6-7.6 20.5-2.2 20.5 8.5v67h116c6.6 0 12 5.4 12 12z"],
-    "arrow-alt-circle-right": [512, 512, [], "f35a", "M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256zm72 20v-40c0-6.6 5.4-12 12-12h116v-67c0-10.7 12.9-16 20.5-8.5l99 99c4.7 4.7 4.7 12.3 0 17l-99 99c-7.6 7.6-20.5 2.2-20.5-8.5v-67H140c-6.6 0-12-5.4-12-12z"],
-    "arrow-alt-circle-up": [512, 512, [], "f35b", "M256 504c137 0 248-111 248-248S393 8 256 8 8 119 8 256s111 248 248 248zm0-448c110.5 0 200 89.5 200 200s-89.5 200-200 200S56 366.5 56 256 145.5 56 256 56zm20 328h-40c-6.6 0-12-5.4-12-12V256h-67c-10.7 0-16-12.9-8.5-20.5l99-99c4.7-4.7 12.3-4.7 17 0l99 99c7.6 7.6 2.2 20.5-8.5 20.5h-67v116c0 6.6-5.4 12-12 12z"],
-    "bell": [448, 512, [], "f0f3", "M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z"],
-    "bell-slash": [640, 512, [], "f1f6", "M633.99 471.02L36 3.51C29.1-2.01 19.03-.9 13.51 6l-10 12.49C-2.02 25.39-.9 35.46 6 40.98l598 467.51c6.9 5.52 16.96 4.4 22.49-2.49l10-12.49c5.52-6.9 4.41-16.97-2.5-22.49zM163.53 368c16.71-22.03 34.48-55.8 41.4-110.58l-45.47-35.55c-3.27 90.73-36.47 120.68-54.84 140.42-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h279.66l-61.4-48H163.53zM320 96c61.86 0 112 50.14 112 112 0 .2-.06.38-.06.58.02 16.84 1.16 31.77 2.79 45.73l59.53 46.54c-8.31-22.13-14.34-51.49-14.34-92.85 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-26.02 5.41-49.45 16.94-69.13 32.72l38.17 29.84C275 103.18 296.65 96 320 96zm0 416c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z"],
-    "bookmark": [384, 512, [], "f02e", "M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm0 428.43l-144-84-144 84V54a6 6 0 0 1 6-6h276c3.314 0 6 2.683 6 5.996V428.43z"],
-    "building": [448, 512, [], "f1ad", "M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"],
-    "calendar": [448, 512, [], "f133", "M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z"],
-    "calendar-alt": [448, 512, [], "f073", "M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "calendar-check": [448, 512, [], "f274", "M400 64h-48V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H160V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V160h352v298a6 6 0 0 1-6 6zm-52.849-200.65L198.842 404.519c-4.705 4.667-12.303 4.637-16.971-.068l-75.091-75.699c-4.667-4.705-4.637-12.303.068-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l44.104 44.461 111.072-110.181c4.705-4.667 12.303-4.637 16.971.068l22.536 22.718c4.667 4.705 4.636 12.303-.069 16.97z"],
-    "calendar-minus": [448, 512, [], "f272", "M124 328c-6.6 0-12-5.4-12-12v-24c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H124zm324-216v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "calendar-plus": [448, 512, [], "f271", "M336 292v24c0 6.6-5.4 12-12 12h-76v76c0 6.6-5.4 12-12 12h-24c-6.6 0-12-5.4-12-12v-76h-76c-6.6 0-12-5.4-12-12v-24c0-6.6 5.4-12 12-12h76v-76c0-6.6 5.4-12 12-12h24c6.6 0 12 5.4 12 12v76h76c6.6 0 12 5.4 12 12zm112-180v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "calendar-times": [448, 512, [], "f273", "M311.7 374.7l-17 17c-4.7 4.7-12.3 4.7-17 0L224 337.9l-53.7 53.7c-4.7 4.7-12.3 4.7-17 0l-17-17c-4.7-4.7-4.7-12.3 0-17l53.7-53.7-53.7-53.7c-4.7-4.7-4.7-12.3 0-17l17-17c4.7-4.7 12.3-4.7 17 0l53.7 53.7 53.7-53.7c4.7-4.7 12.3-4.7 17 0l17 17c4.7 4.7 4.7 12.3 0 17L257.9 304l53.7 53.7c4.8 4.7 4.8 12.3.1 17zM448 112v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "caret-square-down": [448, 512, [], "f150", "M125.1 208h197.8c10.7 0 16.1 13 8.5 20.5l-98.9 98.3c-4.7 4.7-12.2 4.7-16.9 0l-98.9-98.3c-7.7-7.5-2.3-20.5 8.4-20.5zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "caret-square-left": [448, 512, [], "f191", "M272 157.1v197.8c0 10.7-13 16.1-20.5 8.5l-98.3-98.9c-4.7-4.7-4.7-12.2 0-16.9l98.3-98.9c7.5-7.7 20.5-2.3 20.5 8.4zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "caret-square-right": [448, 512, [], "f152", "M176 354.9V157.1c0-10.7 13-16.1 20.5-8.5l98.3 98.9c4.7 4.7 4.7 12.2 0 16.9l-98.3 98.9c-7.5 7.7-20.5 2.3-20.5-8.4zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "caret-square-up": [448, 512, [], "f151", "M322.9 304H125.1c-10.7 0-16.1-13-8.5-20.5l98.9-98.3c4.7-4.7 12.2-4.7 16.9 0l98.9 98.3c7.7 7.5 2.3 20.5-8.4 20.5zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "chart-bar": [512, 512, [], "f080", "M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z"],
-    "check-circle": [512, 512, [], "f058", "M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"],
-    "check-square": [448, 512, [], "f14a", "M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"],
-    "circle": [512, 512, [], "f111", "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"],
-    "clipboard": [384, 512, [], "f328", "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z"],
-    "clock": [512, 512, [], "f017", "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"],
-    "clone": [512, 512, [], "f24d", "M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"],
-    "closed-captioning": [512, 512, [], "f20a", "M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 336H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v276c0 3.3-2.7 6-6 6zm-211.1-85.7c1.7 2.4 1.5 5.6-.5 7.7-53.6 56.8-172.8 32.1-172.8-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7l-17.5 30.5c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2 0 48 51 70.5 92.2 32.6 2.8-2.5 7.1-2.1 9.2.9l19.6 27.7zm190.4 0c1.7 2.4 1.5 5.6-.5 7.7-53.6 56.9-172.8 32.1-172.8-67.9 0-97.3 121.7-119.5 172.5-70.1 2.1 2 2.5 3.2 1 5.7L420 220.2c-1.9 3.1-6.2 4-9.1 1.7-40.8-32-94.6-14.9-94.6 31.2 0 48 51 70.5 92.2 32.6 2.8-2.5 7.1-2.1 9.2.9l19.6 27.7z"],
-    "comment": [512, 512, [], "f075", "M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"],
-    "comment-alt": [512, 512, [], "f27a", "M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288z"],
-    "comment-dots": [512, 512, [], "f4ad", "M144 208c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zM256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"],
-    "comments": [576, 512, [], "f086", "M532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.3 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.2 2.1 18.7 3.7 28.4 4.9C208.1 407.6 281.8 448 368 448c20.8 0 40.8-2.4 59.8-6.8C456.3 459.7 499.4 480 553 480c9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.4-.3-22.5-24.1-37.8-54.8zm-392.8-92.3L122.1 305c-14.1 9.1-28.5 16.3-43.1 21.4 2.7-4.7 5.4-9.7 8-14.8l15.5-31.1L77.7 256C64.2 242.6 48 220.7 48 192c0-60.7 73.3-112 160-112s160 51.3 160 112-73.3 112-160 112c-16.5 0-33-1.9-49-5.6l-19.8-4.5zM498.3 352l-24.7 24.4 15.5 31.1c2.6 5.1 5.3 10.1 8 14.8-14.6-5.1-29-12.3-43.1-21.4l-17.1-11.1-19.9 4.6c-16 3.7-32.5 5.6-49 5.6-54 0-102.2-20.1-131.3-49.7C338 339.5 416 272.9 416 192c0-3.4-.4-6.7-.7-10C479.7 196.5 528 238.8 528 288c0 28.7-16.2 50.6-29.7 64z"],
-    "compass": [496, 512, [], "f14e", "M347.94 129.86L203.6 195.83a31.938 31.938 0 0 0-15.77 15.77l-65.97 144.34c-7.61 16.65 9.54 33.81 26.2 26.2l144.34-65.97a31.938 31.938 0 0 0 15.77-15.77l65.97-144.34c7.61-16.66-9.54-33.81-26.2-26.2zm-77.36 148.72c-12.47 12.47-32.69 12.47-45.16 0-12.47-12.47-12.47-32.69 0-45.16 12.47-12.47 32.69-12.47 45.16 0 12.47 12.47 12.47 32.69 0 45.16zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 448c-110.28 0-200-89.72-200-200S137.72 56 248 56s200 89.72 200 200-89.72 200-200 200z"],
-    "copy": [448, 512, [], "f0c5", "M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"],
-    "copyright": [512, 512, [], "f1f9", "M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 448c-110.532 0-200-89.451-200-200 0-110.531 89.451-200 200-200 110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200zm107.351-101.064c-9.614 9.712-45.53 41.396-104.065 41.396-82.43 0-140.484-61.425-140.484-141.567 0-79.152 60.275-139.401 139.762-139.401 55.531 0 88.738 26.62 97.593 34.779a11.965 11.965 0 0 1 1.936 15.322l-18.155 28.113c-3.841 5.95-11.966 7.282-17.499 2.921-8.595-6.776-31.814-22.538-61.708-22.538-48.303 0-77.916 35.33-77.916 80.082 0 41.589 26.888 83.692 78.277 83.692 32.657 0 56.843-19.039 65.726-27.225 5.27-4.857 13.596-4.039 17.82 1.738l19.865 27.17a11.947 11.947 0 0 1-1.152 15.518z"],
-    "credit-card": [576, 512, [], "f09d", "M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zM54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6zm467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6zM192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"],
-    "dizzy": [496, 512, [], "f567", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-33.8-217.9c7.8-7.8 7.8-20.5 0-28.3L196.3 192l17.9-17.9c7.8-7.8 7.8-20.5 0-28.3-7.8-7.8-20.5-7.8-28.3 0L168 163.7l-17.8-17.8c-7.8-7.8-20.5-7.8-28.3 0-7.8 7.8-7.8 20.5 0 28.3l17.9 17.9-17.9 17.9c-7.8 7.8-7.8 20.5 0 28.3 7.8 7.8 20.5 7.8 28.3 0l17.8-17.8 17.8 17.8c7.9 7.7 20.5 7.7 28.4-.2zm160-92.2c-7.8-7.8-20.5-7.8-28.3 0L328 163.7l-17.8-17.8c-7.8-7.8-20.5-7.8-28.3 0-7.8 7.8-7.8 20.5 0 28.3l17.9 17.9-17.9 17.9c-7.8 7.8-7.8 20.5 0 28.3 7.8 7.8 20.5 7.8 28.3 0l17.8-17.8 17.8 17.8c7.8 7.8 20.5 7.8 28.3 0 7.8-7.8 7.8-20.5 0-28.3l-17.8-18 17.9-17.9c7.7-7.8 7.7-20.4 0-28.2zM248 272c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64z"],
-    "dot-circle": [512, 512, [], "f192", "M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"],
-    "edit": [576, 512, [], "f044", "M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"],
-    "envelope": [512, 512, [], "f0e0", "M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"],
-    "envelope-open": [512, 512, [], "f2b6", "M494.586 164.516c-4.697-3.883-111.723-89.95-135.251-108.657C337.231 38.191 299.437 0 256 0c-43.205 0-80.636 37.717-103.335 55.859-24.463 19.45-131.07 105.195-135.15 108.549A48.004 48.004 0 0 0 0 201.485V464c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V201.509a48 48 0 0 0-17.414-36.993zM464 458a6 6 0 0 1-6 6H54a6 6 0 0 1-6-6V204.347c0-1.813.816-3.526 2.226-4.665 15.87-12.814 108.793-87.554 132.364-106.293C200.755 78.88 232.398 48 256 48c23.693 0 55.857 31.369 73.41 45.389 23.573 18.741 116.503 93.493 132.366 106.316a5.99 5.99 0 0 1 2.224 4.663V458zm-31.991-187.704c4.249 5.159 3.465 12.795-1.745 16.981-28.975 23.283-59.274 47.597-70.929 56.863C336.636 362.283 299.205 400 256 400c-43.452 0-81.287-38.237-103.335-55.86-11.279-8.967-41.744-33.413-70.927-56.865-5.21-4.187-5.993-11.822-1.745-16.981l15.258-18.528c4.178-5.073 11.657-5.843 16.779-1.726 28.618 23.001 58.566 47.035 70.56 56.571C200.143 320.631 232.307 352 256 352c23.602 0 55.246-30.88 73.41-45.389 11.994-9.535 41.944-33.57 70.563-56.568 5.122-4.116 12.601-3.346 16.778 1.727l15.258 18.526z"],
-    "eye": [576, 512, [], "f06e", "M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"],
-    "eye-slash": [640, 512, [], "f070", "M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"],
-    "file": [384, 512, [], "f15b", "M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"],
-    "file-alt": [384, 512, [], "f15c", "M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"],
-    "file-archive": [384, 512, [], "f1c6", "M128.3 160v32h32v-32zm64-96h-32v32h32zm-64 32v32h32V96zm64 32h-32v32h32zm177.6-30.1L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM256 51.9l76.1 76.1H256zM336 464H48V48h79.7v16h32V48H208v104c0 13.3 10.7 24 24 24h104zM194.2 265.7c-1.1-5.6-6-9.7-11.8-9.7h-22.1v-32h-32v32l-19.7 97.1C102 385.6 126.8 416 160 416c33.1 0 57.9-30.2 51.5-62.6zm-33.9 124.4c-17.9 0-32.4-12.1-32.4-27s14.5-27 32.4-27 32.4 12.1 32.4 27-14.5 27-32.4 27zm32-198.1h-32v32h32z"],
-    "file-audio": [384, 512, [], "f1c7", "M369.941 97.941l-83.882-83.882A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48V131.882a48 48 0 0 0-14.059-33.941zM332.118 128H256V51.882L332.118 128zM48 464V48h160v104c0 13.255 10.745 24 24 24h104v288H48zm144-76.024c0 10.691-12.926 16.045-20.485 8.485L136 360.486h-28c-6.627 0-12-5.373-12-12v-56c0-6.627 5.373-12 12-12h28l35.515-36.947c7.56-7.56 20.485-2.206 20.485 8.485v135.952zm41.201-47.13c9.051-9.297 9.06-24.133.001-33.439-22.149-22.752 12.235-56.246 34.395-33.481 27.198 27.94 27.212 72.444.001 100.401-21.793 22.386-56.947-10.315-34.397-33.481z"],
-    "file-code": [384, 512, [], "f1c9", "M149.9 349.1l-.2-.2-32.8-28.9 32.8-28.9c3.6-3.2 4-8.8.8-12.4l-.2-.2-17.4-18.6c-3.4-3.6-9-3.7-12.4-.4l-57.7 54.1c-3.7 3.5-3.7 9.4 0 12.8l57.7 54.1c1.6 1.5 3.8 2.4 6 2.4 2.4 0 4.8-1 6.4-2.8l17.4-18.6c3.3-3.5 3.1-9.1-.4-12.4zm220-251.2L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM256 51.9l76.1 76.1H256zM336 464H48V48h160v104c0 13.3 10.7 24 24 24h104zM209.6 214c-4.7-1.4-9.5 1.3-10.9 6L144 408.1c-1.4 4.7 1.3 9.6 6 10.9l24.4 7.1c4.7 1.4 9.6-1.4 10.9-6L240 231.9c1.4-4.7-1.3-9.6-6-10.9zm24.5 76.9l.2.2 32.8 28.9-32.8 28.9c-3.6 3.2-4 8.8-.8 12.4l.2.2 17.4 18.6c3.3 3.5 8.9 3.7 12.4.4l57.7-54.1c3.7-3.5 3.7-9.4 0-12.8l-57.7-54.1c-3.5-3.3-9.1-3.2-12.4.4l-17.4 18.6c-3.3 3.5-3.1 9.1.4 12.4z"],
-    "file-excel": [384, 512, [], "f1c3", "M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm212-240h-28.8c-4.4 0-8.4 2.4-10.5 6.3-18 33.1-22.2 42.4-28.6 57.7-13.9-29.1-6.9-17.3-28.6-57.7-2.1-3.9-6.2-6.3-10.6-6.3H124c-9.3 0-15 10-10.4 18l46.3 78-46.3 78c-4.7 8 1.1 18 10.4 18h28.9c4.4 0 8.4-2.4 10.5-6.3 21.7-40 23-45 28.6-57.7 14.9 30.2 5.9 15.9 28.6 57.7 2.1 3.9 6.2 6.3 10.6 6.3H260c9.3 0 15-10 10.4-18L224 320c.7-1.1 30.3-50.5 46.3-78 4.7-8-1.1-18-10.3-18z"],
-    "file-image": [384, 512, [], "f1c5", "M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm32-48h224V288l-23.5-23.5c-4.7-4.7-12.3-4.7-17 0L176 352l-39.5-39.5c-4.7-4.7-12.3-4.7-17 0L80 352v64zm48-240c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"],
-    "file-pdf": [384, 512, [], "f1c1", "M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm250.2-143.7c-12.2-12-47-8.7-64.4-6.5-17.2-10.5-28.7-25-36.8-46.3 3.9-16.1 10.1-40.6 5.4-56-4.2-26.2-37.8-23.6-42.6-5.9-4.4 16.1-.4 38.5 7 67.1-10 23.9-24.9 56-35.4 74.4-20 10.3-47 26.2-51 46.2-3.3 15.8 26 55.2 76.1-31.2 22.4-7.4 46.8-16.5 68.4-20.1 18.9 10.2 41 17 55.8 17 25.5 0 28-28.2 17.5-38.7zm-198.1 77.8c5.1-13.7 24.5-29.5 30.4-35-19 30.3-30.4 35.7-30.4 35zm81.6-190.6c7.4 0 6.7 32.1 1.8 40.8-4.4-13.9-4.3-40.8-1.8-40.8zm-24.4 136.6c9.7-16.9 18-37 24.7-54.7 8.3 15.1 18.9 27.2 30.1 35.5-20.8 4.3-38.9 13.1-54.8 19.2zm131.6-5s-5 6-37.3-7.8c35.1-2.6 40.9 5.4 37.3 7.8z"],
-    "file-powerpoint": [384, 512, [], "f1c4", "M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm72-60V236c0-6.6 5.4-12 12-12h69.2c36.7 0 62.8 27 62.8 66.3 0 74.3-68.7 66.5-95.5 66.5V404c0 6.6-5.4 12-12 12H132c-6.6 0-12-5.4-12-12zm48.5-87.4h23c7.9 0 13.9-2.4 18.1-7.2 8.5-9.8 8.4-28.5.1-37.8-4.1-4.6-9.9-7-17.4-7h-23.9v52z"],
-    "file-video": [384, 512, [], "f1c8", "M369.941 97.941l-83.882-83.882A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48V131.882a48 48 0 0 0-14.059-33.941zM332.118 128H256V51.882L332.118 128zM48 464V48h160v104c0 13.255 10.745 24 24 24h104v288H48zm228.687-211.303L224 305.374V268c0-11.046-8.954-20-20-20H100c-11.046 0-20 8.954-20 20v104c0 11.046 8.954 20 20 20h104c11.046 0 20-8.954 20-20v-37.374l52.687 52.674C286.704 397.318 304 390.28 304 375.986V264.011c0-14.311-17.309-21.319-27.313-11.314z"],
-    "file-word": [384, 512, [], "f1c2", "M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm220.1-208c-5.7 0-10.6 4-11.7 9.5-20.6 97.7-20.4 95.4-21 103.5-.2-1.2-.4-2.6-.7-4.3-.8-5.1.3.2-23.6-99.5-1.3-5.4-6.1-9.2-11.7-9.2h-13.3c-5.5 0-10.3 3.8-11.7 9.1-24.4 99-24 96.2-24.8 103.7-.1-1.1-.2-2.5-.5-4.2-.7-5.2-14.1-73.3-19.1-99-1.1-5.6-6-9.7-11.8-9.7h-16.8c-7.8 0-13.5 7.3-11.7 14.8 8 32.6 26.7 109.5 33.2 136 1.3 5.4 6.1 9.1 11.7 9.1h25.2c5.5 0 10.3-3.7 11.6-9.1l17.9-71.4c1.5-6.2 2.5-12 3-17.3l2.9 17.3c.1.4 12.6 50.5 17.9 71.4 1.3 5.3 6.1 9.1 11.6 9.1h24.7c5.5 0 10.3-3.7 11.6-9.1 20.8-81.9 30.2-119 34.5-136 1.9-7.6-3.8-14.9-11.6-14.9h-15.8z"],
-    "flag": [512, 512, [], "f024", "M336.174 80c-49.132 0-93.305-32-161.913-32-31.301 0-58.303 6.482-80.721 15.168a48.04 48.04 0 0 0 2.142-20.727C93.067 19.575 74.167 1.594 51.201.104 23.242-1.71 0 20.431 0 48c0 17.764 9.657 33.262 24 41.562V496c0 8.837 7.163 16 16 16h16c8.837 0 16-7.163 16-16v-83.443C109.869 395.28 143.259 384 199.826 384c49.132 0 93.305 32 161.913 32 58.479 0 101.972-22.617 128.548-39.981C503.846 367.161 512 352.051 512 335.855V95.937c0-34.459-35.264-57.768-66.904-44.117C409.193 67.309 371.641 80 336.174 80zM464 336c-21.783 15.412-60.824 32-102.261 32-59.945 0-102.002-32-161.913-32-43.361 0-96.379 9.403-127.826 24V128c21.784-15.412 60.824-32 102.261-32 59.945 0 102.002 32 161.913 32 43.271 0 96.32-17.366 127.826-32v240z"],
-    "flushed": [496, 512, [], "f579", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm96-312c-44.2 0-80 35.8-80 80s35.8 80 80 80 80-35.8 80-80-35.8-80-80-80zm0 128c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-72c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm-112 24c0-44.2-35.8-80-80-80s-80 35.8-80 80 35.8 80 80 80 80-35.8 80-80zm-80 48c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-72c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm160 144H184c-13.2 0-24 10.8-24 24s10.8 24 24 24h128c13.2 0 24-10.8 24-24s-10.8-24-24-24z"],
-    "folder": [512, 512, [], "f07b", "M464 128H272l-54.63-54.63c-6-6-14.14-9.37-22.63-9.37H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zm0 272H48V112h140.12l54.63 54.63c6 6 14.14 9.37 22.63 9.37H464v224z"],
-    "folder-open": [576, 512, [], "f07c", "M527.9 224H480v-48c0-26.5-21.5-48-48-48H272l-64-64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h400c16.5 0 31.9-8.5 40.7-22.6l79.9-128c20-31.9-3-73.4-40.7-73.4zM48 118c0-3.3 2.7-6 6-6h134.1l64 64H426c3.3 0 6 2.7 6 6v42H152c-16.8 0-32.4 8.8-41.1 23.2L48 351.4zm400 282H72l77.2-128H528z"],
-    "font-awesome-logo-full": [3992, 512, ["Font Awesome"], "f4e6", "M454.6 0H57.4C25.9 0 0 25.9 0 57.4v397.3C0 486.1 25.9 512 57.4 512h397.3c31.4 0 57.4-25.9 57.4-57.4V57.4C512 25.9 486.1 0 454.6 0zm-58.9 324.9c0 4.8-4.1 6.9-8.9 8.9-19.2 8.1-39.7 15.7-61.5 15.7-40.5 0-68.7-44.8-163.2 2.5v51.8c0 30.3-45.7 30.2-45.7 0v-250c-9-7-15-17.9-15-30.3 0-21 17.1-38.2 38.2-38.2 21 0 38.2 17.1 38.2 38.2 0 12.2-5.8 23.2-14.9 30.2v21c37.1-12 65.5-34.4 146.1-3.4 26.6 11.4 68.7-15.7 76.5-15.7 5.5 0 10.3 4.1 10.3 8.9v160.4zm432.9-174.2h-137v70.1H825c39.8 0 40.4 62.2 0 62.2H691.6v105.6c0 45.5-70.7 46.4-70.7 0V128.3c0-22 18-39.8 39.8-39.8h167.8c39.6 0 40.5 62.2.1 62.2zm191.1 23.4c-169.3 0-169.1 252.4 0 252.4 169.9 0 169.9-252.4 0-252.4zm0 196.1c-81.6 0-82.1-139.8 0-139.8 82.5 0 82.4 139.8 0 139.8zm372.4 53.4c-17.5 0-31.4-13.9-31.4-31.4v-117c0-62.4-72.6-52.5-99.1-16.4v133.4c0 41.5-63.3 41.8-63.3 0V208c0-40 63.1-41.6 63.1 0v3.4c43.3-51.6 162.4-60.4 162.4 39.3v141.5c.3 30.4-31.5 31.4-31.7 31.4zm179.7 2.9c-44.3 0-68.3-22.9-68.3-65.8V235.2H1488c-35.6 0-36.7-55.3 0-55.3h15.5v-37.3c0-41.3 63.8-42.1 63.8 0v37.5h24.9c35.4 0 35.7 55.3 0 55.3h-24.9v108.5c0 29.6 26.1 26.3 27.4 26.3 31.4 0 52.6 56.3-22.9 56.3zM1992 123c-19.5-50.2-95.5-50-114.5 0-107.3 275.7-99.5 252.7-99.5 262.8 0 42.8 58.3 51.2 72.1 14.4l13.5-35.9H2006l13 35.9c14.2 37.7 72.1 27.2 72.1-14.4 0-10.1 5.3 6.8-99.1-262.8zm-108.9 179.1l51.7-142.9 51.8 142.9h-103.5zm591.3-85.6l-53.7 176.3c-12.4 41.2-72 41-84 0l-42.3-135.9-42.3 135.9c-12.4 40.9-72 41.2-84.5 0l-54.2-176.3c-12.5-39.4 49.8-56.1 60.2-16.9L2213 342l45.3-139.5c10.9-32.7 59.6-34.7 71.2 0l45.3 139.5 39.3-142.4c10.3-38.3 72.6-23.8 60.3 16.9zm275.4 75.1c0-42.4-33.9-117.5-119.5-117.5-73.2 0-124.4 56.3-124.4 126 0 77.2 55.3 126.4 128.5 126.4 31.7 0 93-11.5 93-39.8 0-18.3-21.1-31.5-39.3-22.4-49.4 26.2-109 8.4-115.9-43.8h148.3c16.3 0 29.3-13.4 29.3-28.9zM2571 277.7c9.5-73.4 113.9-68.6 118.6 0H2571zm316.7 148.8c-31.4 0-81.6-10.5-96.6-31.9-12.4-17 2.5-39.8 21.8-39.8 16.3 0 36.8 22.9 77.7 22.9 27.4 0 40.4-11 40.4-25.8 0-39.8-142.9-7.4-142.9-102 0-40.4 35.3-75.7 98.6-75.7 31.4 0 74.1 9.9 87.6 29.4 10.8 14.8-1.4 36.2-20.9 36.2-15.1 0-26.7-17.3-66.2-17.3-22.9 0-37.8 10.5-37.8 23.8 0 35.9 142.4 6 142.4 103.1-.1 43.7-37.4 77.1-104.1 77.1zm266.8-252.4c-169.3 0-169.1 252.4 0 252.4 170.1 0 169.6-252.4 0-252.4zm0 196.1c-81.8 0-82-139.8 0-139.8 82.5 0 82.4 139.8 0 139.8zm476.9 22V268.7c0-53.8-61.4-45.8-85.7-10.5v134c0 41.3-63.8 42.1-63.8 0V268.7c0-52.1-59.5-47.4-85.7-10.1v133.6c0 41.5-63.3 41.8-63.3 0V208c0-40 63.1-41.6 63.1 0v3.4c9.9-14.4 41.8-37.3 78.6-37.3 35.3 0 57.7 16.4 66.7 43.8 13.9-21.8 45.8-43.8 82.6-43.8 44.3 0 70.7 23.4 70.7 72.7v145.3c.5 17.3-13.5 31.4-31.9 31.4 3.5.1-31.3 1.1-31.3-31.3zM3992 291.6c0-42.4-32.4-117.5-117.9-117.5-73.2 0-127.5 56.3-127.5 126 0 77.2 58.3 126.4 131.6 126.4 31.7 0 91.5-11.5 91.5-39.8 0-18.3-21.1-31.5-39.3-22.4-49.4 26.2-110.5 8.4-117.5-43.8h149.8c16.3 0 29.1-13.4 29.3-28.9zm-180.5-13.9c9.7-74.4 115.9-68.3 120.1 0h-120.1z"],
-    "frown": [496, 512, [], "f119", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z"],
-    "frown-open": [496, 512, [], "f57a", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-48-248c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32zm128-32c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 112c-35.6 0-88.8 21.3-95.8 61.2-2 11.8 9 21.5 20.5 18.1 31.2-9.6 59.4-15.3 75.3-15.3s44.1 5.7 75.3 15.3c11.4 3.5 22.5-6.3 20.5-18.1-7-39.9-60.2-61.2-95.8-61.2z"],
-    "futbol": [496, 512, [], "f1e3", "M483.8 179.4C449.8 74.6 352.6 8 248.1 8c-25.4 0-51.2 3.9-76.7 12.2C41.2 62.5-30.1 202.4 12.2 332.6 46.2 437.4 143.4 504 247.9 504c25.4 0 51.2-3.9 76.7-12.2 130.2-42.3 201.5-182.2 159.2-312.4zm-74.5 193.7l-52.2 6.4-43.7-60.9 24.4-75.2 71.1-22.1 38.9 36.4c-.2 30.7-7.4 61.1-21.7 89.2-4.7 9.3-10.7 17.8-16.8 26.2zm0-235.4l-10.4 53.1-70.7 22-64.2-46.5V92.5l47.4-26.2c39.2 13 73.4 38 97.9 71.4zM184.9 66.4L232 92.5v73.8l-64.2 46.5-70.6-22-10.1-52.5c24.3-33.4 57.9-58.6 97.8-71.9zM139 379.5L85.9 373c-14.4-20.1-37.3-59.6-37.8-115.3l39-36.4 71.1 22.2 24.3 74.3-43.5 61.7zm48.2 67l-22.4-48.1 43.6-61.7H287l44.3 61.7-22.4 48.1c-6.2 1.8-57.6 20.4-121.7 0z"],
-    "gem": [576, 512, [], "f3a5", "M464 0H112c-4 0-7.8 2-10 5.4L2 152.6c-2.9 4.4-2.6 10.2.7 14.2l276 340.8c4.8 5.9 13.8 5.9 18.6 0l276-340.8c3.3-4.1 3.6-9.8.7-14.2L474.1 5.4C471.8 2 468.1 0 464 0zm-19.3 48l63.3 96h-68.4l-51.7-96h56.8zm-202.1 0h90.7l51.7 96H191l51.6-96zm-111.3 0h56.8l-51.7 96H68l63.3-96zm-43 144h51.4L208 352 88.3 192zm102.9 0h193.6L288 435.3 191.2 192zM368 352l68.2-160h51.4L368 352z"],
-    "grimace": [496, 512, [], "f57f", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm16 16H152c-26.5 0-48 21.5-48 48v32c0 26.5 21.5 48 48 48h192c26.5 0 48-21.5 48-48v-32c0-26.5-21.5-48-48-48zm-168 96h-24c-8.8 0-16-7.2-16-16v-8h40v24zm0-40h-40v-8c0-8.8 7.2-16 16-16h24v24zm64 40h-48v-24h48v24zm0-40h-48v-24h48v24zm64 40h-48v-24h48v24zm0-40h-48v-24h48v24zm56 24c0 8.8-7.2 16-16 16h-24v-24h40v8zm0-24h-40v-24h24c8.8 0 16 7.2 16 16v8z"],
-    "grin": [496, 512, [], "f580", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm105.6-151.4c-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.9-3.1-19.4 5.4-17.7 15.3 7.9 47.1 71.3 80 123.3 80s115.3-32.9 123.3-80c1.6-9.8-7.7-18.4-17.7-15.3zM168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z"],
-    "grin-alt": [496, 512, [], "f581", "M200.3 248c12.4-18.7 15.1-37.3 15.7-56-.5-18.7-3.3-37.3-15.7-56-8-12-25.1-11.4-32.7 0-12.4 18.7-15.1 37.3-15.7 56 .5 18.7 3.3 37.3 15.7 56 8.1 12 25.2 11.4 32.7 0zm128 0c12.4-18.7 15.1-37.3 15.7-56-.5-18.7-3.3-37.3-15.7-56-8-12-25.1-11.4-32.7 0-12.4 18.7-15.1 37.3-15.7 56 .5 18.7 3.3 37.3 15.7 56 8.1 12 25.2 11.4 32.7 0zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm105.6-151.4c-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.9-3.1-19.4 5.3-17.7 15.3 7.9 47.2 71.3 80 123.3 80s115.3-32.9 123.3-80c1.6-9.8-7.7-18.4-17.7-15.3z"],
-    "grin-beam": [496, 512, [], "f582", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm105.6-151.4c-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 15.3 7.9 47.1 71.3 80 123.3 80s115.3-32.9 123.3-80c1.6-9.8-7.7-18.4-17.7-15.3zm-235.9-72.9c3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3zm160 0c3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3z"],
-    "grin-beam-sweat": [496, 512, [], "f583", "M440 160c29.5 0 53.3-26.3 53.3-58.7 0-25-31.7-75.5-46.2-97.3-3.6-5.3-10.7-5.3-14.2 0-14.5 21.8-46.2 72.3-46.2 97.3 0 32.4 23.8 58.7 53.3 58.7zM248 400c51.9 0 115.3-32.9 123.3-80 1.7-9.9-7.7-18.5-17.7-15.3-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 15.3 8 47.1 71.4 80 123.3 80zm130.3-168.3c3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.6 6.2 4.6 9.3 3.7zm105.3-52.9c-24.6 15.7-46 12.9-46.4 12.9 6.9 20.2 10.8 41.8 10.8 64.3 0 110.3-89.7 200-200 200S48 366.3 48 256 137.7 56 248 56c39.8 0 76.8 11.8 108 31.9 1.7-9.5 6.3-24.1 17.2-45.7C336.4 20.6 293.7 8 248 8 111 8 0 119 0 256s111 248 248 248 248-111 248-248c0-27-4.4-52.9-12.4-77.2zM168 189.4c12.3 0 23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.8 19.2-21.6 31.5-21.6z"],
-    "grin-hearts": [496, 512, [], "f584", "M353.6 304.6c-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 15.3 7.9 47.2 71.3 80 123.3 80s115.3-32.9 123.3-80c1.6-9.8-7.7-18.4-17.7-15.3zm-152.8-48.9c4.5 1.2 9.2-1.5 10.5-6l19.4-69.9c5.6-20.3-7.4-41.1-28.8-44.5-18.6-3-36.4 9.8-41.5 27.9l-2 7.1-7.1-1.9c-18.2-4.7-38.2 4.3-44.9 22-7.7 20.2 3.8 41.9 24.2 47.2l70.2 18.1zm188.8-65.3c-6.7-17.6-26.7-26.7-44.9-22l-7.1 1.9-2-7.1c-5-18.1-22.8-30.9-41.5-27.9-21.4 3.4-34.4 24.2-28.8 44.5l19.4 69.9c1.2 4.5 5.9 7.2 10.5 6l70.2-18.2c20.4-5.3 31.9-26.9 24.2-47.1zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200z"],
-    "grin-squint": [496, 512, [], "f585", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm105.6-151.4c-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.9-3.1-19.4 5.4-17.7 15.3 7.9 47.1 71.3 80 123.3 80s115.3-32.9 123.3-80c1.6-9.8-7.7-18.4-17.7-15.3zm-234.7-40.8c3.6 4.2 9.9 5.7 15.3 2.5l80-48c3.6-2.2 5.8-6.1 5.8-10.3s-2.2-8.1-5.8-10.3l-80-48c-5.1-3-11.4-1.9-15.3 2.5-3.8 4.5-3.8 11-.1 15.5l33.6 40.3-33.6 40.3c-3.8 4.5-3.7 11.1.1 15.5zm242.9 2.5c5.4 3.2 11.7 1.7 15.3-2.5 3.8-4.5 3.8-11 .1-15.5L343.6 208l33.6-40.3c3.8-4.5 3.7-11-.1-15.5-3.8-4.4-10.2-5.4-15.3-2.5l-80 48c-3.6 2.2-5.8 6.1-5.8 10.3s2.2 8.1 5.8 10.3l80 48z"],
-    "grin-squint-tears": [512, 512, [], "f586", "M117.1 384.1c-25.8 3.7-84 13.7-100.9 30.6-21.9 21.9-21.5 57.9.9 80.3s58.3 22.8 80.3.9C114.3 479 124.3 420.8 128 395c.8-6.4-4.6-11.8-10.9-10.9zm-41.2-41.7C40.3 268 53 176.1 114.6 114.6 152.4 76.8 202.6 56 256 56c36.2 0 70.8 9.8 101.2 27.7 3.8-20.3 8-36.1 12-48.3C333.8 17.2 294.9 8 256 8 192.5 8 129.1 32.2 80.6 80.6c-74.1 74.1-91.3 183.4-52 274 12.2-4.1 27.7-8.3 47.3-12.2zm352.3-187.6c45 76.6 34.9 176.9-30.8 242.6-37.8 37.8-88 58.6-141.4 58.6-30.5 0-59.8-7-86.4-19.8-3.9 19.5-8 35-12.2 47.2 31.4 13.6 65 20.6 98.7 20.6 63.5 0 126.9-24.2 175.4-72.6 78.1-78.1 93.1-195.4 45.2-288.6-12.3 4-28.2 8.1-48.5 12zm-33.3-26.9c25.8-3.7 84-13.7 100.9-30.6 21.9-21.9 21.5-57.9-.9-80.3s-58.3-22.8-80.3-.9C397.7 33 387.7 91.2 384 117c-.8 6.4 4.6 11.8 10.9 10.9zm-187 108.3c-3-3-7.2-4.2-11.4-3.2L106 255.7c-5.7 1.4-9.5 6.7-9.1 12.6.5 5.8 5.1 10.5 10.9 11l52.3 4.8 4.8 52.3c.5 5.8 5.2 10.4 11 10.9h.9c5.5 0 10.3-3.7 11.7-9.1l22.6-90.5c1-4.2-.2-8.5-3.2-11.5zm39.7-25.1l90.5-22.6c5.7-1.4 9.5-6.7 9.1-12.6-.5-5.8-5.1-10.5-10.9-11l-52.3-4.8-4.8-52.3c-.5-5.8-5.2-10.4-11-10.9-5.6-.1-11.2 3.4-12.6 9.1L233 196.5c-1 4.1.2 8.4 3.2 11.4 5 5 11.3 3.2 11.4 3.2zm52 88.5c-29.1 29.1-59.7 52.9-83.9 65.4-9.2 4.8-10 17.5-1.7 23.4 38.9 27.7 107 6.2 143.7-30.6S416 253 388.3 214.1c-5.8-8.2-18.5-7.6-23.4 1.7-12.3 24.2-36.2 54.7-65.3 83.8z"],
-    "grin-stars": [496, 512, [], "f587", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm105.6-151.4c-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 15.3 7.9 47.2 71.3 80 123.3 80s115.3-32.9 123.3-80c1.6-9.8-7.7-18.4-17.7-15.3zm-227.9-57.5c-1 6.2 5.4 11 11 7.9l31.3-16.3 31.3 16.3c5.6 3.1 12-1.7 11-7.9l-6-34.9 25.4-24.6c4.5-4.5 1.9-12.2-4.3-13.2l-34.9-5-15.5-31.6c-2.9-5.8-11-5.8-13.9 0l-15.5 31.6-34.9 5c-6.2.9-8.9 8.6-4.3 13.2l25.4 24.6-6.1 34.9zm259.7-72.7l-34.9-5-15.5-31.6c-2.9-5.8-11-5.8-13.9 0l-15.5 31.6-34.9 5c-6.2.9-8.9 8.6-4.3 13.2l25.4 24.6-6 34.9c-1 6.2 5.4 11 11 7.9l31.3-16.3 31.3 16.3c5.6 3.1 12-1.7 11-7.9l-6-34.9 25.4-24.6c4.5-4.6 1.8-12.2-4.4-13.2z"],
-    "grin-tears": [640, 512, [], "f588", "M117.1 256.1c-25.8 3.7-84 13.7-100.9 30.6-21.9 21.9-21.5 57.9.9 80.3s58.3 22.8 80.3.9C114.3 351 124.3 292.8 128 267c.8-6.4-4.6-11.8-10.9-10.9zm506.7 30.6c-16.9-16.9-75.1-26.9-100.9-30.6-6.3-.9-11.7 4.5-10.8 10.8 3.7 25.8 13.7 84 30.6 100.9 21.9 21.9 57.9 21.5 80.3-.9 22.3-22.3 22.7-58.3.8-80.2zm-126.6 61.7C463.8 412.3 396.9 456 320 456c-76.9 0-143.8-43.7-177.2-107.6-12.5 37.4-25.2 43.9-28.3 46.5C159.1 460.7 234.5 504 320 504s160.9-43.3 205.5-109.1c-3.2-2.7-15.9-9.2-28.3-46.5zM122.7 224.5C137.9 129.2 220.5 56 320 56c99.5 0 182.1 73.2 197.3 168.5 2.1-.2 5.2-2.4 49.5 7C554.4 106 448.7 8 320 8S85.6 106 73.2 231.4c44.5-9.4 47.1-7.2 49.5-6.9zM320 400c51.9 0 115.3-32.9 123.3-80 1.7-9.9-7.7-18.5-17.7-15.3-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 15.3 8 47.1 71.4 80 123.3 80zm130.3-168.3c3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.6 6.2 4.6 9.3 3.7zM240 189.4c12.3 0 23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.8 19.2-21.6 31.5-21.6z"],
-    "grin-tongue": [496, 512, [], "f589", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm64 400c0 35.6-29.1 64.5-64.9 64-35.1-.5-63.1-29.8-63.1-65v-42.8l17.7-8.8c15-7.5 31.5 1.7 34.9 16.5l2.8 12.1c2.1 9.2 15.2 9.2 17.3 0l2.8-12.1c3.4-14.8 19.8-24.1 34.9-16.5l17.7 8.8V408zm28.2 25.3c2.2-8.1 3.8-16.5 3.8-25.3v-43.5c14.2-12.4 24.4-27.5 27.3-44.5 1.7-9.9-7.7-18.5-17.7-15.3-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.9-3.1-19.4 5.3-17.7 15.3 2.9 17 13.1 32.1 27.3 44.5V408c0 8.8 1.6 17.2 3.8 25.3C91.8 399.9 48 333 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 77-43.8 143.9-107.8 177.3zM168 176c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z"],
-    "grin-tongue-squint": [496, 512, [], "f58a", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm64 400c0 35.6-29.1 64.5-64.9 64-35.1-.5-63.1-29.8-63.1-65v-42.8l17.7-8.8c15-7.5 31.5 1.7 34.9 16.5l2.8 12.1c2.1 9.2 15.2 9.2 17.3 0l2.8-12.1c3.4-14.8 19.8-24.1 34.9-16.5l17.7 8.8V408zm28.2 25.3c2.2-8.1 3.8-16.5 3.8-25.3v-43.5c14.2-12.4 24.4-27.5 27.3-44.5 1.7-9.9-7.7-18.5-17.7-15.3-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.9-3.1-19.4 5.3-17.7 15.3 2.9 17 13.1 32.1 27.3 44.5V408c0 8.8 1.6 17.2 3.8 25.3C91.8 399.9 48 333 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 77-43.8 143.9-107.8 177.3zm36.9-281.1c-3.8-4.4-10.3-5.5-15.3-2.5l-80 48c-3.6 2.2-5.8 6.1-5.8 10.3s2.2 8.1 5.8 10.3l80 48c5.4 3.2 11.7 1.7 15.3-2.5 3.8-4.5 3.8-11 .1-15.5L343.6 208l33.6-40.3c3.8-4.5 3.7-11.1-.1-15.5zm-162.9 45.5l-80-48c-5-3-11.4-2-15.3 2.5-3.8 4.5-3.8 11-.1 15.5l33.6 40.3-33.6 40.3c-3.8 4.5-3.7 11 .1 15.5 3.6 4.2 9.9 5.7 15.3 2.5l80-48c3.6-2.2 5.8-6.1 5.8-10.3s-2.2-8.1-5.8-10.3z"],
-    "grin-tongue-wink": [496, 512, [], "f58b", "M152 180c-25.7 0-55.9 16.9-59.8 42.1-.8 5 1.7 10 6.1 12.4 4.4 2.4 9.9 1.8 13.7-1.6l9.5-8.5c14.8-13.2 46.2-13.2 61 0l9.5 8.5c2.5 2.2 8 4.7 13.7 1.6 4.4-2.4 6.9-7.4 6.1-12.4-3.9-25.2-34.1-42.1-59.8-42.1zm176-52c-44.2 0-80 35.8-80 80s35.8 80 80 80 80-35.8 80-80-35.8-80-80-80zm0 128c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-72c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm64 400c0 35.6-29.1 64.5-64.9 64-35.1-.5-63.1-29.8-63.1-65v-42.8l17.7-8.8c15-7.5 31.5 1.7 34.9 16.5l2.8 12.1c2.1 9.2 15.2 9.2 17.3 0l2.8-12.1c3.4-14.8 19.8-24.1 34.9-16.5l17.7 8.8V408zm28.2 25.3c2.2-8.1 3.8-16.5 3.8-25.3v-43.5c14.2-12.4 24.4-27.5 27.3-44.5 1.7-9.9-7.7-18.5-17.7-15.3-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.9-3.1-19.4 5.3-17.7 15.3 2.9 17 13.1 32.1 27.3 44.5V408c0 8.8 1.6 17.2 3.8 25.3C91.8 399.9 48 333 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 77-43.8 143.9-107.8 177.3z"],
-    "grin-wink": [496, 512, [], "f58c", "M328 180c-25.69 0-55.88 16.92-59.86 42.12-1.75 11.22 11.5 18.24 19.83 10.84l9.55-8.48c14.81-13.19 46.16-13.19 60.97 0l9.55 8.48c8.48 7.43 21.56.25 19.83-10.84C383.88 196.92 353.69 180 328 180zm-160 60c17.67 0 32-14.33 32-32s-14.33-32-32-32-32 14.33-32 32 14.33 32 32 32zm185.55 64.64c-25.93 8.3-64.4 13.06-105.55 13.06s-79.62-4.75-105.55-13.06c-9.94-3.13-19.4 5.37-17.71 15.34C132.67 367.13 196.06 400 248 400s115.33-32.87 123.26-80.02c1.68-9.89-7.67-18.48-17.71-15.34zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 448c-110.28 0-200-89.72-200-200S137.72 56 248 56s200 89.72 200 200-89.72 200-200 200z"],
-    "hand-lizard": [576, 512, [], "f258", "M556.686 290.542L410.328 64.829C397.001 44.272 374.417 32 349.917 32H56C25.121 32 0 57.122 0 88v8c0 44.112 35.888 80 80 80h196.042l-18.333 48H144c-48.523 0-88 39.477-88 88 0 30.879 25.121 56 56 56h131.552c2.987 0 5.914.549 8.697 1.631L352 408.418V480h224V355.829c0-23.225-6.679-45.801-19.314-65.287zM528 432H400v-23.582c0-19.948-12.014-37.508-30.604-44.736l-99.751-38.788A71.733 71.733 0 0 0 243.552 320H112c-4.411 0-8-3.589-8-8 0-22.056 17.944-40 40-40h113.709c19.767 0 37.786-12.407 44.84-30.873l24.552-64.281c8.996-23.553-8.428-48.846-33.63-48.846H80c-17.645 0-32-14.355-32-32v-8c0-4.411 3.589-8 8-8h293.917c8.166 0 15.693 4.09 20.137 10.942l146.358 225.715A71.84 71.84 0 0 1 528 355.829V432z"],
-    "hand-paper": [448, 512, [], "f256", "M372.57 112.641v-10.825c0-43.612-40.52-76.691-83.039-65.546-25.629-49.5-94.09-47.45-117.982.747C130.269 26.456 89.144 57.945 89.144 102v126.13c-19.953-7.427-43.308-5.068-62.083 8.871-29.355 21.796-35.794 63.333-14.55 93.153L132.48 498.569a32 32 0 0 0 26.062 13.432h222.897c14.904 0 27.835-10.289 31.182-24.813l30.184-130.958A203.637 203.637 0 0 0 448 310.564V179c0-40.62-35.523-71.992-75.43-66.359zm27.427 197.922c0 11.731-1.334 23.469-3.965 34.886L368.707 464h-201.92L51.591 302.303c-14.439-20.27 15.023-42.776 29.394-22.605l27.128 38.079c8.995 12.626 29.031 6.287 29.031-9.283V102c0-25.645 36.571-24.81 36.571.691V256c0 8.837 7.163 16 16 16h6.856c8.837 0 16-7.163 16-16V67c0-25.663 36.571-24.81 36.571.691V256c0 8.837 7.163 16 16 16h6.856c8.837 0 16-7.163 16-16V101.125c0-25.672 36.57-24.81 36.57.691V256c0 8.837 7.163 16 16 16h6.857c8.837 0 16-7.163 16-16v-76.309c0-26.242 36.57-25.64 36.57-.691v131.563z"],
-    "hand-peace": [448, 512, [], "f25b", "M362.146 191.976c-13.71-21.649-38.761-34.016-65.006-30.341V74c0-40.804-32.811-74-73.141-74-40.33 0-73.14 33.196-73.14 74L160 168l-18.679-78.85C126.578 50.843 83.85 32.11 46.209 47.208 8.735 62.238-9.571 104.963 5.008 142.85l55.757 144.927c-30.557 24.956-43.994 57.809-24.733 92.218l54.853 97.999C102.625 498.97 124.73 512 148.575 512h205.702c30.744 0 57.558-21.44 64.555-51.797l27.427-118.999a67.801 67.801 0 0 0 1.729-15.203L448 256c0-44.956-43.263-77.343-85.854-64.024zM399.987 326c0 1.488-.169 2.977-.502 4.423l-27.427 119.001c-1.978 8.582-9.29 14.576-17.782 14.576H148.575c-6.486 0-12.542-3.621-15.805-9.449l-54.854-98c-4.557-8.141-2.619-18.668 4.508-24.488l26.647-21.764a16 16 0 0 0 4.812-18.139l-64.09-166.549C37.226 92.956 84.37 74.837 96.51 106.389l59.784 155.357A16 16 0 0 0 171.227 272h11.632c8.837 0 16-7.163 16-16V74c0-34.375 50.281-34.43 50.281 0v182c0 8.837 7.163 16 16 16h6.856c8.837 0 16-7.163 16-16v-28c0-25.122 36.567-25.159 36.567 0v28c0 8.837 7.163 16 16 16h6.856c8.837 0 16-7.163 16-16 0-25.12 36.567-25.16 36.567 0v70z"],
-    "hand-point-down": [448, 512, [], "f0a7", "M188.8 512c45.616 0 83.2-37.765 83.2-83.2v-35.647a93.148 93.148 0 0 0 22.064-7.929c22.006 2.507 44.978-3.503 62.791-15.985C409.342 368.1 448 331.841 448 269.299V248c0-60.063-40-98.512-40-127.2v-2.679c4.952-5.747 8-13.536 8-22.12V32c0-17.673-12.894-32-28.8-32H156.8C140.894 0 128 14.327 128 32v64c0 8.584 3.048 16.373 8 22.12v2.679c0 6.964-6.193 14.862-23.668 30.183l-.148.129-.146.131c-9.937 8.856-20.841 18.116-33.253 25.851C48.537 195.798 0 207.486 0 252.8c0 56.928 35.286 92 83.2 92 8.026 0 15.489-.814 22.4-2.176V428.8c0 45.099 38.101 83.2 83.2 83.2zm0-48c-18.7 0-35.2-16.775-35.2-35.2V270.4c-17.325 0-35.2 26.4-70.4 26.4-26.4 0-35.2-20.625-35.2-44 0-8.794 32.712-20.445 56.1-34.926 14.575-9.074 27.225-19.524 39.875-30.799 18.374-16.109 36.633-33.836 39.596-59.075h176.752C364.087 170.79 400 202.509 400 248v21.299c0 40.524-22.197 57.124-61.325 50.601-8.001 14.612-33.979 24.151-53.625 12.925-18.225 19.365-46.381 17.787-61.05 4.95V428.8c0 18.975-16.225 35.2-35.2 35.2zM328 64c0-13.255 10.745-24 24-24s24 10.745 24 24-10.745 24-24 24-24-10.745-24-24z"],
-    "hand-point-left": [512, 512, [], "f0a5", "M0 220.8C0 266.416 37.765 304 83.2 304h35.647a93.148 93.148 0 0 0 7.929 22.064c-2.507 22.006 3.503 44.978 15.985 62.791C143.9 441.342 180.159 480 242.701 480H264c60.063 0 98.512-40 127.2-40h2.679c5.747 4.952 13.536 8 22.12 8h64c17.673 0 32-12.894 32-28.8V188.8c0-15.906-14.327-28.8-32-28.8h-64c-8.584 0-16.373 3.048-22.12 8H391.2c-6.964 0-14.862-6.193-30.183-23.668l-.129-.148-.131-.146c-8.856-9.937-18.116-20.841-25.851-33.253C316.202 80.537 304.514 32 259.2 32c-56.928 0-92 35.286-92 83.2 0 8.026.814 15.489 2.176 22.4H83.2C38.101 137.6 0 175.701 0 220.8zm48 0c0-18.7 16.775-35.2 35.2-35.2h158.4c0-17.325-26.4-35.2-26.4-70.4 0-26.4 20.625-35.2 44-35.2 8.794 0 20.445 32.712 34.926 56.1 9.074 14.575 19.524 27.225 30.799 39.875 16.109 18.374 33.836 36.633 59.075 39.596v176.752C341.21 396.087 309.491 432 264 432h-21.299c-40.524 0-57.124-22.197-50.601-61.325-14.612-8.001-24.151-33.979-12.925-53.625-19.365-18.225-17.787-46.381-4.95-61.05H83.2C64.225 256 48 239.775 48 220.8zM448 360c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z"],
-    "hand-point-right": [512, 512, [], "f0a4", "M428.8 137.6h-86.177a115.52 115.52 0 0 0 2.176-22.4c0-47.914-35.072-83.2-92-83.2-45.314 0-57.002 48.537-75.707 78.784-7.735 12.413-16.994 23.317-25.851 33.253l-.131.146-.129.148C135.662 161.807 127.764 168 120.8 168h-2.679c-5.747-4.952-13.536-8-22.12-8H32c-17.673 0-32 12.894-32 28.8v230.4C0 435.106 14.327 448 32 448h64c8.584 0 16.373-3.048 22.12-8h2.679c28.688 0 67.137 40 127.2 40h21.299c62.542 0 98.8-38.658 99.94-91.145 12.482-17.813 18.491-40.785 15.985-62.791A93.148 93.148 0 0 0 393.152 304H428.8c45.435 0 83.2-37.584 83.2-83.2 0-45.099-38.101-83.2-83.2-83.2zm0 118.4h-91.026c12.837 14.669 14.415 42.825-4.95 61.05 11.227 19.646 1.687 45.624-12.925 53.625 6.524 39.128-10.076 61.325-50.6 61.325H248c-45.491 0-77.21-35.913-120-39.676V215.571c25.239-2.964 42.966-21.222 59.075-39.596 11.275-12.65 21.725-25.3 30.799-39.875C232.355 112.712 244.006 80 252.8 80c23.375 0 44 8.8 44 35.2 0 35.2-26.4 53.075-26.4 70.4h158.4c18.425 0 35.2 16.5 35.2 35.2 0 18.975-16.225 35.2-35.2 35.2zM88 384c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z"],
-    "hand-point-up": [448, 512, [], "f0a6", "M105.6 83.2v86.177a115.52 115.52 0 0 0-22.4-2.176c-47.914 0-83.2 35.072-83.2 92 0 45.314 48.537 57.002 78.784 75.707 12.413 7.735 23.317 16.994 33.253 25.851l.146.131.148.129C129.807 376.338 136 384.236 136 391.2v2.679c-4.952 5.747-8 13.536-8 22.12v64c0 17.673 12.894 32 28.8 32h230.4c15.906 0 28.8-14.327 28.8-32v-64c0-8.584-3.048-16.373-8-22.12V391.2c0-28.688 40-67.137 40-127.2v-21.299c0-62.542-38.658-98.8-91.145-99.94-17.813-12.482-40.785-18.491-62.791-15.985A93.148 93.148 0 0 0 272 118.847V83.2C272 37.765 234.416 0 188.8 0c-45.099 0-83.2 38.101-83.2 83.2zm118.4 0v91.026c14.669-12.837 42.825-14.415 61.05 4.95 19.646-11.227 45.624-1.687 53.625 12.925 39.128-6.524 61.325 10.076 61.325 50.6V264c0 45.491-35.913 77.21-39.676 120H183.571c-2.964-25.239-21.222-42.966-39.596-59.075-12.65-11.275-25.3-21.725-39.875-30.799C80.712 279.645 48 267.994 48 259.2c0-23.375 8.8-44 35.2-44 35.2 0 53.075 26.4 70.4 26.4V83.2c0-18.425 16.5-35.2 35.2-35.2 18.975 0 35.2 16.225 35.2 35.2zM352 424c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z"],
-    "hand-pointer": [448, 512, [], "f25a", "M358.182 179.361c-19.493-24.768-52.679-31.945-79.872-19.098-15.127-15.687-36.182-22.487-56.595-19.629V67c0-36.944-29.736-67-66.286-67S89.143 30.056 89.143 67v161.129c-19.909-7.41-43.272-5.094-62.083 8.872-29.355 21.795-35.793 63.333-14.55 93.152l109.699 154.001C134.632 501.59 154.741 512 176 512h178.286c30.802 0 57.574-21.5 64.557-51.797l27.429-118.999A67.873 67.873 0 0 0 448 326v-84c0-46.844-46.625-79.273-89.818-62.639zM80.985 279.697l27.126 38.079c8.995 12.626 29.031 6.287 29.031-9.283V67c0-25.12 36.571-25.16 36.571 0v175c0 8.836 7.163 16 16 16h6.857c8.837 0 16-7.164 16-16v-35c0-25.12 36.571-25.16 36.571 0v35c0 8.836 7.163 16 16 16H272c8.837 0 16-7.164 16-16v-21c0-25.12 36.571-25.16 36.571 0v21c0 8.836 7.163 16 16 16h6.857c8.837 0 16-7.164 16-16 0-25.121 36.571-25.16 36.571 0v84c0 1.488-.169 2.977-.502 4.423l-27.43 119.001c-1.978 8.582-9.29 14.576-17.782 14.576H176c-5.769 0-11.263-2.878-14.697-7.697l-109.712-154c-14.406-20.223 14.994-42.818 29.394-22.606zM176.143 400v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.733 0-14-7.163-14-16zm75.428 0v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.732 0-14-7.163-14-16zM327 400v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.732 0-14-7.163-14-16z"],
-    "hand-rock": [512, 512, [], "f255", "M408.864 79.052c-22.401-33.898-66.108-42.273-98.813-23.588-29.474-31.469-79.145-31.093-108.334-.022-47.16-27.02-108.71 5.055-110.671 60.806C44.846 105.407 0 140.001 0 187.429v56.953c0 32.741 14.28 63.954 39.18 85.634l97.71 85.081c4.252 3.702 3.11 5.573 3.11 32.903 0 17.673 14.327 32 32 32h252c17.673 0 32-14.327 32-32 0-23.513-1.015-30.745 3.982-42.37l42.835-99.656c6.094-14.177 9.183-29.172 9.183-44.568V146.963c0-52.839-54.314-88.662-103.136-67.911zM464 261.406a64.505 64.505 0 0 1-5.282 25.613l-42.835 99.655c-5.23 12.171-7.883 25.04-7.883 38.25V432H188v-10.286c0-16.37-7.14-31.977-19.59-42.817l-97.71-85.08C56.274 281.255 48 263.236 48 244.381v-56.953c0-33.208 52-33.537 52 .677v41.228a16 16 0 0 0 5.493 12.067l7 6.095A16 16 0 0 0 139 235.429V118.857c0-33.097 52-33.725 52 .677v26.751c0 8.836 7.164 16 16 16h7c8.836 0 16-7.164 16-16v-41.143c0-33.134 52-33.675 52 .677v40.466c0 8.836 7.163 16 16 16h7c8.837 0 16-7.164 16-16v-27.429c0-33.03 52-33.78 52 .677v26.751c0 8.836 7.163 16 16 16h7c8.837 0 16-7.164 16-16 0-33.146 52-33.613 52 .677v114.445z"],
-    "hand-scissors": [512, 512, [], "f257", "M256 480l70-.013c5.114 0 10.231-.583 15.203-1.729l118.999-27.427C490.56 443.835 512 417.02 512 386.277V180.575c0-23.845-13.03-45.951-34.005-57.69l-97.999-54.853c-34.409-19.261-67.263-5.824-92.218 24.733L142.85 37.008c-37.887-14.579-80.612 3.727-95.642 41.201-15.098 37.642 3.635 80.37 41.942 95.112L168 192l-94-9.141c-40.804 0-74 32.811-74 73.14 0 40.33 33.196 73.141 74 73.141h87.635c-3.675 26.245 8.692 51.297 30.341 65.006C178.657 436.737 211.044 480 256 480zm0-48.013c-25.16 0-25.12-36.567 0-36.567 8.837 0 16-7.163 16-16v-6.856c0-8.837-7.163-16-16-16h-28c-25.159 0-25.122-36.567 0-36.567h28c8.837 0 16-7.163 16-16v-6.856c0-8.837-7.163-16-16-16H74c-34.43 0-34.375-50.281 0-50.281h182c8.837 0 16-7.163 16-16v-11.632a16 16 0 0 0-10.254-14.933L106.389 128.51c-31.552-12.14-13.432-59.283 19.222-46.717l166.549 64.091a16.001 16.001 0 0 0 18.139-4.812l21.764-26.647c5.82-7.127 16.348-9.064 24.488-4.508l98 54.854c5.828 3.263 9.449 9.318 9.449 15.805v205.701c0 8.491-5.994 15.804-14.576 17.782l-119.001 27.427a19.743 19.743 0 0 1-4.423.502h-70z"],
-    "hand-spock": [512, 512, [], "f259", "M21.096 381.79l129.092 121.513a32 32 0 0 0 21.932 8.698h237.6c14.17 0 26.653-9.319 30.68-22.904l31.815-107.313A115.955 115.955 0 0 0 477 348.811v-36.839c0-4.051.476-8.104 1.414-12.045l31.73-133.41c10.099-42.412-22.316-82.738-65.544-82.525-4.144-24.856-22.543-47.165-49.85-53.992-35.803-8.952-72.227 12.655-81.25 48.75L296.599 184 274.924 52.01c-8.286-36.07-44.303-58.572-80.304-50.296-29.616 6.804-50.138 32.389-51.882 61.295-42.637.831-73.455 40.563-64.071 81.844l31.04 136.508c-27.194-22.515-67.284-19.992-91.482 5.722-25.376 26.961-24.098 69.325 2.871 94.707zm32.068-61.811l.002-.001c7.219-7.672 19.241-7.98 26.856-.813l53.012 49.894C143.225 378.649 160 371.4 160 357.406v-69.479c0-1.193-.134-2.383-.397-3.546l-34.13-150.172c-5.596-24.617 31.502-32.86 37.054-8.421l30.399 133.757a16 16 0 0 0 15.603 12.454h8.604c10.276 0 17.894-9.567 15.594-19.583l-41.62-181.153c-5.623-24.469 31.39-33.076 37.035-8.508l45.22 196.828A16 16 0 0 0 288.956 272h13.217a16 16 0 0 0 15.522-12.119l42.372-169.49c6.104-24.422 42.962-15.159 36.865 9.217L358.805 252.12c-2.521 10.088 5.115 19.88 15.522 19.88h9.694a16 16 0 0 0 15.565-12.295L426.509 146.6c5.821-24.448 42.797-15.687 36.966 8.802L431.72 288.81a100.094 100.094 0 0 0-2.72 23.162v36.839c0 6.548-.943 13.051-2.805 19.328L397.775 464h-219.31L53.978 346.836c-7.629-7.18-7.994-19.229-.814-26.857z"],
-    "handshake": [640, 512, [], "f2b5", "M519.2 127.9l-47.6-47.6A56.252 56.252 0 0 0 432 64H205.2c-14.8 0-29.1 5.9-39.6 16.3L118 127.9H0v255.7h64c17.6 0 31.8-14.2 31.9-31.7h9.1l84.6 76.4c30.9 25.1 73.8 25.7 105.6 3.8 12.5 10.8 26 15.9 41.1 15.9 18.2 0 35.3-7.4 48.8-24 22.1 8.7 48.2 2.6 64-16.8l26.2-32.3c5.6-6.9 9.1-14.8 10.9-23h57.9c.1 17.5 14.4 31.7 31.9 31.7h64V127.9H519.2zM48 351.6c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16c0 8.9-7.2 16-16 16zm390-6.9l-26.1 32.2c-2.8 3.4-7.8 4-11.3 1.2l-23.9-19.4-30 36.5c-6 7.3-15 4.8-18 2.4l-36.8-31.5-15.6 19.2c-13.9 17.1-39.2 19.7-55.3 6.6l-97.3-88H96V175.8h41.9l61.7-61.6c2-.8 3.7-1.5 5.7-2.3H262l-38.7 35.5c-29.4 26.9-31.1 72.3-4.4 101.3 14.8 16.2 61.2 41.2 101.5 4.4l8.2-7.5 108.2 87.8c3.4 2.8 3.9 7.9 1.2 11.3zm106-40.8h-69.2c-2.3-2.8-4.9-5.4-7.7-7.7l-102.7-83.4 12.5-11.4c6.5-6 7-16.1 1-22.6L367 167.1c-6-6.5-16.1-6.9-22.6-1l-55.2 50.6c-9.5 8.7-25.7 9.4-34.6 0-9.3-9.9-8.5-25.1 1.2-33.9l65.6-60.1c7.4-6.8 17-10.5 27-10.5l83.7-.2c2.1 0 4.1.8 5.5 2.3l61.7 61.6H544v128zm48 47.7c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16c0 8.9-7.2 16-16 16z"],
-    "hdd": [576, 512, [], "f0a0", "M567.403 235.642L462.323 84.589A48 48 0 0 0 422.919 64H153.081a48 48 0 0 0-39.404 20.589L8.597 235.642A48.001 48.001 0 0 0 0 263.054V400c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V263.054c0-9.801-3-19.366-8.597-27.412zM153.081 112h269.838l77.913 112H75.168l77.913-112zM528 400H48V272h480v128zm-32-64c0 17.673-14.327 32-32 32s-32-14.327-32-32 14.327-32 32-32 32 14.327 32 32zm-96 0c0 17.673-14.327 32-32 32s-32-14.327-32-32 14.327-32 32-32 32 14.327 32 32z"],
-    "heart": [512, 512, [], "f004", "M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"],
-    "hospital": [448, 512, [], "f0f8", "M128 244v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12zm140 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm-76 84v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm76 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm180 124v36H0v-36c0-6.627 5.373-12 12-12h19.5V85.035C31.5 73.418 42.245 64 55.5 64H144V24c0-13.255 10.745-24 24-24h112c13.255 0 24 10.745 24 24v40h88.5c13.255 0 24 9.418 24 21.035V464H436c6.627 0 12 5.373 12 12zM79.5 463H192v-67c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v67h112.5V112H304v24c0 13.255-10.745 24-24 24H168c-13.255 0-24-10.745-24-24v-24H79.5v351zM266 64h-26V38a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v26h-26a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h26v26a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V96h26a6 6 0 0 0 6-6V70a6 6 0 0 0-6-6z"],
-    "hourglass": [384, 512, [], "f254", "M368 48h4c6.627 0 12-5.373 12-12V12c0-6.627-5.373-12-12-12H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h4c0 80.564 32.188 165.807 97.18 208C47.899 298.381 16 383.9 16 464h-4c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h360c6.627 0 12-5.373 12-12v-24c0-6.627-5.373-12-12-12h-4c0-80.564-32.188-165.807-97.18-208C336.102 213.619 368 128.1 368 48zM64 48h256c0 101.62-57.307 184-128 184S64 149.621 64 48zm256 416H64c0-101.62 57.308-184 128-184s128 82.38 128 184z"],
-    "id-badge": [384, 512, [], "f2c1", "M336 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm0 464H48V48h288v416zM144 112h96c8.8 0 16-7.2 16-16s-7.2-16-16-16h-96c-8.8 0-16 7.2-16 16s7.2 16 16 16zm48 176c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z"],
-    "id-card": [576, 512, [], "f2c2", "M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H303.2c.9-4.5.8 3.6.8-22.4 0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6 0 26-.2 17.9.8 22.4H48V144h480v288zm-168-80h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm-168 96c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64z"],
-    "image": [512, 512, [], "f03e", "M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"],
-    "images": [576, 512, [], "f302", "M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v48H54a6 6 0 0 0-6 6v244a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6v-10h48zm42-336H150a6 6 0 0 0-6 6v244a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6V86a6 6 0 0 0-6-6zm6-48c26.51 0 48 21.49 48 48v256c0 26.51-21.49 48-48 48H144c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h384zM264 144c0 22.091-17.909 40-40 40s-40-17.909-40-40 17.909-40 40-40 40 17.909 40 40zm-72 96l39.515-39.515c4.686-4.686 12.284-4.686 16.971 0L288 240l103.515-103.515c4.686-4.686 12.284-4.686 16.971 0L480 208v80H192v-48z"],
-    "keyboard": [576, 512, [], "f11c", "M528 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm8 336c0 4.411-3.589 8-8 8H48c-4.411 0-8-3.589-8-8V112c0-4.411 3.589-8 8-8h480c4.411 0 8 3.589 8 8v288zM170 270v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm-336 82v-28c0-6.627-5.373-12-12-12H82c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm384 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zM122 188v-28c0-6.627-5.373-12-12-12H82c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm96 0v-28c0-6.627-5.373-12-12-12h-28c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12zm-98 158v-16c0-6.627-5.373-12-12-12H180c-6.627 0-12 5.373-12 12v16c0 6.627 5.373 12 12 12h216c6.627 0 12-5.373 12-12z"],
-    "kiss": [496, 512, [], "f596", "M168 176c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm136 132c0-19.2-28.8-41.5-71.5-44-3.8-.4-7.4 2.4-8.2 6.2-.9 3.8 1.1 7.7 4.7 9.2l16.9 7.2c13 5.5 20.8 13.5 20.8 21.5s-7.8 16-20.7 21.5l-17 7.2c-5.7 2.4-6 12.2 0 14.8l16.9 7.2c13 5.5 20.8 13.5 20.8 21.5s-7.8 16-20.7 21.5l-17 7.2c-3.6 1.5-5.6 5.4-4.7 9.2.8 3.6 4.1 6.2 7.8 6.2h.5c42.8-2.5 71.5-24.8 71.5-44 0-13-13.4-27.3-35.2-36C290.6 335.3 304 321 304 308zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm80-280c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z"],
-    "kiss-beam": [496, 512, [], "f597", "M168 152c-23.8 0-52.7 29.3-56 71.4-.3 3.7 2 7.2 5.6 8.3 3.5 1 7.5-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 5.9-4.5 5.6-8.3-3.1-42.1-32-71.4-55.8-71.4zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm56-148c0-19.2-28.8-41.5-71.5-44-3.8-.4-7.4 2.4-8.2 6.2-.9 3.8 1.1 7.7 4.7 9.2l16.9 7.2c13 5.5 20.8 13.5 20.8 21.5s-7.8 16-20.7 21.5l-17 7.2c-5.7 2.4-6 12.2 0 14.8l16.9 7.2c13 5.5 20.8 13.5 20.8 21.5s-7.8 16-20.7 21.5l-17 7.2c-3.6 1.5-5.6 5.4-4.7 9.2.8 3.6 4.1 6.2 7.8 6.2h.5c42.8-2.5 71.5-24.8 71.5-44 0-13-13.4-27.3-35.2-36C290.6 335.3 304 321 304 308zm24-156c-23.8 0-52.7 29.3-56 71.4-.3 3.7 2 7.2 5.6 8.3 3.5 1 7.5-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 5.9-4.5 5.6-8.3-3.1-42.1-32-71.4-55.8-71.4z"],
-    "kiss-wink-heart": [504, 512, [], "f598", "M304 308.5c0-19.2-28.8-41.5-71.5-44-3.8-.4-7.4 2.4-8.2 6.2-.9 3.8 1.1 7.7 4.7 9.2l16.9 7.2c13 5.5 20.8 13.5 20.8 21.5s-7.8 16-20.7 21.5l-17 7.2c-5.7 2.4-6 12.2 0 14.8l16.9 7.2c13 5.5 20.8 13.5 20.8 21.5s-7.8 16-20.7 21.5l-17 7.2c-3.6 1.5-5.6 5.4-4.7 9.2.8 3.6 4.1 6.2 7.8 6.2h.5c42.8-2.5 71.5-24.8 71.5-44 0-13-13.4-27.3-35.2-36 21.7-9.1 35.1-23.4 35.1-36.4zm70.5-83.5l9.5 8.5c3.8 3.3 9.3 4 13.7 1.6 4.4-2.4 6.9-7.4 6.1-12.4-4-25.2-34.2-42.1-59.8-42.1s-55.9 16.9-59.8 42.1c-.8 5 1.7 10 6.1 12.4 5.8 3.1 11.2.7 13.7-1.6l9.5-8.5c14.8-13.2 46.2-13.2 61 0zM136 208.5c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32zm365.1 194c-8-20.8-31.5-31.5-53.1-25.9l-8.4 2.2-2.3-8.4c-5.9-21.4-27-36.5-49-33-25.2 4-40.6 28.6-34 52.6l22.9 82.6c1.5 5.3 7 8.5 12.4 7.1l83-21.5c24.1-6.3 37.7-31.8 28.5-55.7zM334 436.3c-26.1 12.5-55.2 19.7-86 19.7-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200c0 22.1-3.7 43.3-10.4 63.2 9 6.4 17 14.2 22.6 23.9 6.4.1 12.6 1.4 18.6 2.9 10.9-27.9 17.1-58.2 17.1-90C496 119 385 8 248 8S0 119 0 256s111 248 248 248c35.4 0 68.9-7.5 99.4-20.9-2.5-7.3 4.3 17.2-13.4-46.8z"],
-    "laugh": [496, 512, [], "f599", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm141.4 389.4c-37.8 37.8-88 58.6-141.4 58.6s-103.6-20.8-141.4-58.6S48 309.4 48 256s20.8-103.6 58.6-141.4S194.6 56 248 56s103.6 20.8 141.4 58.6S448 202.6 448 256s-20.8 103.6-58.6 141.4zM328 224c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm-160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm194.4 64H133.6c-8.2 0-14.5 7-13.5 15 7.5 59.2 58.9 105 121.1 105h13.6c62.2 0 113.6-45.8 121.1-105 1-8-5.3-15-13.5-15z"],
-    "laugh-beam": [496, 512, [], "f59a", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm141.4 389.4c-37.8 37.8-88 58.6-141.4 58.6s-103.6-20.8-141.4-58.6S48 309.4 48 256s20.8-103.6 58.6-141.4S194.6 56 248 56s103.6 20.8 141.4 58.6S448 202.6 448 256s-20.8 103.6-58.6 141.4zM328 152c-23.8 0-52.7 29.3-56 71.4-.7 8.6 10.8 11.9 14.9 4.5l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c4.1 7.4 15.6 4 14.9-4.5-3.1-42.1-32-71.4-55.8-71.4zm-201 75.9l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c4.1 7.4 15.6 4 14.9-4.5-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.6 8.5 10.9 11.9 15.1 4.5zM362.4 288H133.6c-8.2 0-14.5 7-13.5 15 7.5 59.2 58.9 105 121.1 105h13.6c62.2 0 113.6-45.8 121.1-105 1-8-5.3-15-13.5-15z"],
-    "laugh-squint": [496, 512, [], "f59b", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm141.4 389.4c-37.8 37.8-88 58.6-141.4 58.6s-103.6-20.8-141.4-58.6S48 309.4 48 256s20.8-103.6 58.6-141.4S194.6 56 248 56s103.6 20.8 141.4 58.6S448 202.6 448 256s-20.8 103.6-58.6 141.4zM343.6 196l33.6-40.3c8.6-10.3-3.8-24.8-15.4-18l-80 48c-7.8 4.7-7.8 15.9 0 20.6l80 48c11.5 6.8 24-7.6 15.4-18L343.6 196zm-209.4 58.3l80-48c7.8-4.7 7.8-15.9 0-20.6l-80-48c-11.6-6.9-24 7.7-15.4 18l33.6 40.3-33.6 40.3c-8.7 10.4 3.8 24.8 15.4 18zM362.4 288H133.6c-8.2 0-14.5 7-13.5 15 7.5 59.2 58.9 105 121.1 105h13.6c62.2 0 113.6-45.8 121.1-105 1-8-5.3-15-13.5-15z"],
-    "laugh-wink": [496, 512, [], "f59c", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm141.4 389.4c-37.8 37.8-88 58.6-141.4 58.6s-103.6-20.8-141.4-58.6C68.8 359.6 48 309.4 48 256s20.8-103.6 58.6-141.4C144.4 76.8 194.6 56 248 56s103.6 20.8 141.4 58.6c37.8 37.8 58.6 88 58.6 141.4s-20.8 103.6-58.6 141.4zM328 164c-25.7 0-55.9 16.9-59.9 42.1-1.7 11.2 11.5 18.2 19.8 10.8l9.5-8.5c14.8-13.2 46.2-13.2 61 0l9.5 8.5c8.5 7.4 21.6.3 19.8-10.8-3.8-25.2-34-42.1-59.7-42.1zm-160 60c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm194.4 64H133.6c-8.2 0-14.5 7-13.5 15 7.5 59.2 58.9 105 121.1 105h13.6c62.2 0 113.6-45.8 121.1-105 1-8-5.3-15-13.5-15z"],
-    "lemon": [512, 512, [], "f094", "M484.112 27.889C455.989-.233 416.108-8.057 387.059 8.865 347.604 31.848 223.504-41.111 91.196 91.197-41.277 223.672 31.923 347.472 8.866 387.058c-16.922 29.051-9.1 68.932 19.022 97.054 28.135 28.135 68.011 35.938 97.057 19.021 39.423-22.97 163.557 49.969 295.858-82.329 132.474-132.477 59.273-256.277 82.331-295.861 16.922-29.05 9.1-68.931-19.022-97.054zm-22.405 72.894c-38.8 66.609 45.6 165.635-74.845 286.08-120.44 120.443-219.475 36.048-286.076 74.843-22.679 13.207-64.035-27.241-50.493-50.488 38.8-66.609-45.6-165.635 74.845-286.08C245.573 4.702 344.616 89.086 411.219 50.292c22.73-13.24 64.005 27.288 50.488 50.491zm-169.861 8.736c1.37 10.96-6.404 20.957-17.365 22.327-54.846 6.855-135.779 87.787-142.635 142.635-1.373 10.989-11.399 18.734-22.326 17.365-10.961-1.37-18.735-11.366-17.365-22.326 9.162-73.286 104.167-168.215 177.365-177.365 10.953-1.368 20.956 6.403 22.326 17.364z"],
-    "life-ring": [512, 512, [], "f1cd", "M256 504c136.967 0 248-111.033 248-248S392.967 8 256 8 8 119.033 8 256s111.033 248 248 248zm-103.398-76.72l53.411-53.411c31.806 13.506 68.128 13.522 99.974 0l53.411 53.411c-63.217 38.319-143.579 38.319-206.796 0zM336 256c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zm91.28 103.398l-53.411-53.411c13.505-31.806 13.522-68.128 0-99.974l53.411-53.411c38.319 63.217 38.319 143.579 0 206.796zM359.397 84.72l-53.411 53.411c-31.806-13.505-68.128-13.522-99.973 0L152.602 84.72c63.217-38.319 143.579-38.319 206.795 0zM84.72 152.602l53.411 53.411c-13.506 31.806-13.522 68.128 0 99.974L84.72 359.398c-38.319-63.217-38.319-143.579 0-206.796z"],
-    "lightbulb": [352, 512, [], "f0eb", "M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z"],
-    "list-alt": [512, 512, [], "f022", "M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v340a6 6 0 0 1-6 6zm-42-92v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm-252 12c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36z"],
-    "map": [576, 512, [], "f279", "M560.02 32c-1.96 0-3.98.37-5.96 1.16L384.01 96H384L212 35.28A64.252 64.252 0 0 0 191.76 32c-6.69 0-13.37 1.05-19.81 3.14L20.12 87.95A32.006 32.006 0 0 0 0 117.66v346.32C0 473.17 7.53 480 15.99 480c1.96 0 3.97-.37 5.96-1.16L192 416l172 60.71a63.98 63.98 0 0 0 40.05.15l151.83-52.81A31.996 31.996 0 0 0 576 394.34V48.02c0-9.19-7.53-16.02-15.98-16.02zM224 90.42l128 45.19v285.97l-128-45.19V90.42zM48 418.05V129.07l128-44.53v286.2l-.64.23L48 418.05zm480-35.13l-128 44.53V141.26l.64-.24L528 93.95v288.97z"],
-    "meh": [496, 512, [], "f11a", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z"],
-    "meh-blank": [496, 512, [], "f5a4", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-280c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z"],
-    "meh-rolling-eyes": [496, 512, [], "f5a5", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm88-304c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm0 112c-22.1 0-40-17.9-40-40 0-13.6 7.3-25.1 17.7-32.3-1 2.6-1.7 5.3-1.7 8.3 0 13.3 10.7 24 24 24s24-10.7 24-24c0-2.9-.7-5.7-1.7-8.3 10.4 7.2 17.7 18.7 17.7 32.3 0 22.1-17.9 40-40 40zm-104-40c0-39.8-32.2-72-72-72s-72 32.2-72 72 32.2 72 72 72 72-32.2 72-72zm-112 0c0-13.6 7.3-25.1 17.7-32.3-1 2.6-1.7 5.3-1.7 8.3 0 13.3 10.7 24 24 24s24-10.7 24-24c0-2.9-.7-5.7-1.7-8.3 10.4 7.2 17.7 18.7 17.7 32.3 0 22.1-17.9 40-40 40s-40-17.9-40-40zm192 128H184c-13.2 0-24 10.8-24 24s10.8 24 24 24h128c13.2 0 24-10.8 24-24s-10.8-24-24-24z"],
-    "minus-square": [448, 512, [], "f146", "M108 284c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v32c0 6.6-5.4 12-12 12H108zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "money-bill-alt": [640, 512, [], "f3d1", "M320 144c-53.02 0-96 50.14-96 112 0 61.85 42.98 112 96 112 53 0 96-50.13 96-112 0-61.86-42.98-112-96-112zm40 168c0 4.42-3.58 8-8 8h-64c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h16v-55.44l-.47.31a7.992 7.992 0 0 1-11.09-2.22l-8.88-13.31a7.992 7.992 0 0 1 2.22-11.09l15.33-10.22a23.99 23.99 0 0 1 13.31-4.03H328c4.42 0 8 3.58 8 8v88h16c4.42 0 8 3.58 8 8v16zM608 64H32C14.33 64 0 78.33 0 96v320c0 17.67 14.33 32 32 32h576c17.67 0 32-14.33 32-32V96c0-17.67-14.33-32-32-32zm-16 272c-35.35 0-64 28.65-64 64H112c0-35.35-28.65-64-64-64V176c35.35 0 64-28.65 64-64h416c0 35.35 28.65 64 64 64v160z"],
-    "moon": [512, 512, [], "f186", "M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"],
-    "newspaper": [576, 512, [], "f1ea", "M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"],
-    "object-group": [512, 512, [], "f247", "M500 128c6.627 0 12-5.373 12-12V44c0-6.627-5.373-12-12-12h-72c-6.627 0-12 5.373-12 12v12H96V44c0-6.627-5.373-12-12-12H12C5.373 32 0 37.373 0 44v72c0 6.627 5.373 12 12 12h12v256H12c-6.627 0-12 5.373-12 12v72c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-12h320v12c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-72c0-6.627-5.373-12-12-12h-12V128h12zm-52-64h32v32h-32V64zM32 64h32v32H32V64zm32 384H32v-32h32v32zm416 0h-32v-32h32v32zm-40-64h-12c-6.627 0-12 5.373-12 12v12H96v-12c0-6.627-5.373-12-12-12H72V128h12c6.627 0 12-5.373 12-12v-12h320v12c0 6.627 5.373 12 12 12h12v256zm-36-192h-84v-52c0-6.628-5.373-12-12-12H108c-6.627 0-12 5.372-12 12v168c0 6.628 5.373 12 12 12h84v52c0 6.628 5.373 12 12 12h200c6.627 0 12-5.372 12-12V204c0-6.628-5.373-12-12-12zm-268-24h144v112H136V168zm240 176H232v-24h76c6.627 0 12-5.372 12-12v-76h56v112z"],
-    "object-ungroup": [576, 512, [], "f248", "M564 224c6.627 0 12-5.373 12-12v-72c0-6.627-5.373-12-12-12h-72c-6.627 0-12 5.373-12 12v12h-88v-24h12c6.627 0 12-5.373 12-12V44c0-6.627-5.373-12-12-12h-72c-6.627 0-12 5.373-12 12v12H96V44c0-6.627-5.373-12-12-12H12C5.373 32 0 37.373 0 44v72c0 6.627 5.373 12 12 12h12v160H12c-6.627 0-12 5.373-12 12v72c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-12h88v24h-12c-6.627 0-12 5.373-12 12v72c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-12h224v12c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-72c0-6.627-5.373-12-12-12h-12V224h12zM352 64h32v32h-32V64zm0 256h32v32h-32v-32zM64 352H32v-32h32v32zm0-256H32V64h32v32zm32 216v-12c0-6.627-5.373-12-12-12H72V128h12c6.627 0 12-5.373 12-12v-12h224v12c0 6.627 5.373 12 12 12h12v160h-12c-6.627 0-12 5.373-12 12v12H96zm128 136h-32v-32h32v32zm280-64h-12c-6.627 0-12 5.373-12 12v12H256v-12c0-6.627-5.373-12-12-12h-12v-24h88v12c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-72c0-6.627-5.373-12-12-12h-12v-88h88v12c0 6.627 5.373 12 12 12h12v160zm40 64h-32v-32h32v32zm0-256h-32v-32h32v32z"],
-    "paper-plane": [512, 512, [], "f1d8", "M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"],
-    "pause-circle": [512, 512, [], "f28b", "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm96-280v160c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16zm-112 0v160c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16z"],
-    "play-circle": [512, 512, [], "f144", "M371.7 238l-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256z"],
-    "plus-square": [448, 512, [], "f0fe", "M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"],
-    "question-circle": [512, 512, [], "f059", "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"],
-    "registered": [512, 512, [], "f25d", "M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 448c-110.532 0-200-89.451-200-200 0-110.531 89.451-200 200-200 110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200zm110.442-81.791c-53.046-96.284-50.25-91.468-53.271-96.085 24.267-13.879 39.482-41.563 39.482-73.176 0-52.503-30.247-85.252-101.498-85.252h-78.667c-6.617 0-12 5.383-12 12V380c0 6.617 5.383 12 12 12h38.568c6.617 0 12-5.383 12-12v-83.663h31.958l47.515 89.303a11.98 11.98 0 0 0 10.593 6.36h42.81c9.14 0 14.914-9.799 10.51-17.791zM256.933 239.906h-33.875v-64.14h27.377c32.417 0 38.929 12.133 38.929 31.709-.001 20.913-11.518 32.431-32.431 32.431z"],
-    "sad-cry": [496, 512, [], "f5b3", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm144 386.4V280c0-13.2-10.8-24-24-24s-24 10.8-24 24v151.4C315.5 447 282.8 456 248 456s-67.5-9-96-24.6V280c0-13.2-10.8-24-24-24s-24 10.8-24 24v114.4c-34.6-36-56-84.7-56-138.4 0-110.3 89.7-200 200-200s200 89.7 200 200c0 53.7-21.4 102.5-56 138.4zM205.8 234.5c4.4-2.4 6.9-7.4 6.1-12.4-4-25.2-34.2-42.1-59.8-42.1s-55.9 16.9-59.8 42.1c-.8 5 1.7 10 6.1 12.4 4.4 2.4 9.9 1.8 13.7-1.6l9.5-8.5c14.8-13.2 46.2-13.2 61 0l9.5 8.5c2.5 2.3 7.9 4.8 13.7 1.6zM344 180c-25.7 0-55.9 16.9-59.8 42.1-.8 5 1.7 10 6.1 12.4 4.5 2.4 9.9 1.8 13.7-1.6l9.5-8.5c14.8-13.2 46.2-13.2 61 0l9.5 8.5c2.5 2.2 8 4.7 13.7 1.6 4.4-2.4 6.9-7.4 6.1-12.4-3.9-25.2-34.1-42.1-59.8-42.1zm-96 92c-30.9 0-56 28.7-56 64s25.1 64 56 64 56-28.7 56-64-25.1-64-56-64z"],
-    "sad-tear": [496, 512, [], "f5b4", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm8-152c-13.2 0-24 10.8-24 24s10.8 24 24 24c23.8 0 46.3 10.5 61.6 28.8 8.1 9.8 23.2 11.9 33.8 3.1 10.2-8.5 11.6-23.6 3.1-33.8C330 320.8 294.1 304 256 304zm-88-64c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-165.6 98.8C151 290.1 126 325.4 126 342.9c0 22.7 18.8 41.1 42 41.1s42-18.4 42-41.1c0-17.5-25-52.8-36.4-68.1-2.8-3.7-8.4-3.7-11.2 0z"],
-    "save": [448, 512, [], "f0c7", "M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM272 80v80H144V80h128zm122 352H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h42v104c0 13.255 10.745 24 24 24h176c13.255 0 24-10.745 24-24V83.882l78.243 78.243a6 6 0 0 1 1.757 4.243V426a6 6 0 0 1-6 6zM224 232c-48.523 0-88 39.477-88 88s39.477 88 88 88 88-39.477 88-88-39.477-88-88-88zm0 128c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"],
-    "share-square": [576, 512, [], "f14d", "M561.938 158.06L417.94 14.092C387.926-15.922 336 5.097 336 48.032v57.198c-42.45 1.88-84.03 6.55-120.76 17.99-35.17 10.95-63.07 27.58-82.91 49.42C108.22 199.2 96 232.6 96 271.94c0 61.697 33.178 112.455 84.87 144.76 37.546 23.508 85.248-12.651 71.02-55.74-15.515-47.119-17.156-70.923 84.11-78.76V336c0 42.993 51.968 63.913 81.94 33.94l143.998-144c18.75-18.74 18.75-49.14 0-67.88zM384 336V232.16C255.309 234.082 166.492 255.35 206.31 376 176.79 357.55 144 324.08 144 271.94c0-109.334 129.14-118.947 240-119.85V48l144 144-144 144zm24.74 84.493a82.658 82.658 0 0 0 20.974-9.303c7.976-4.952 18.286.826 18.286 10.214V464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h132c6.627 0 12 5.373 12 12v4.486c0 4.917-2.987 9.369-7.569 11.152-13.702 5.331-26.396 11.537-38.05 18.585a12.138 12.138 0 0 1-6.28 1.777H54a6 6 0 0 0-6 6v340a6 6 0 0 0 6 6h340a6 6 0 0 0 6-6v-25.966c0-5.37 3.579-10.059 8.74-11.541z"],
-    "smile": [496, 512, [], "f118", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"],
-    "smile-beam": [496, 512, [], "f5b8", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm84-143.4c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.6-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.2-8.4-25.3-7.1-33.8 3.1zM136.5 211c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4s-52.7 29.3-56 71.4c-.3 3.7 2.1 7.2 5.7 8.3 3.4 1.1 7.4-.5 9.3-3.7l9.5-17zM328 152c-23.8 0-52.7 29.3-56 71.4-.3 3.7 2.1 7.2 5.7 8.3 3.5 1.1 7.4-.5 9.3-3.7l9.5-17c7.7-13.7 19.2-21.6 31.5-21.6s23.8 7.9 31.5 21.6l9.5 17c2.1 3.7 6.2 4.7 9.3 3.7 3.6-1.1 6-4.5 5.7-8.3-3.3-42.1-32.2-71.4-56-71.4z"],
-    "smile-wink": [496, 512, [], "f4da", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm117.8-146.4c-10.2-8.5-25.3-7.1-33.8 3.1-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8zM168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-60c-25.7 0-55.9 16.9-59.9 42.1-1.7 11.2 11.5 18.2 19.8 10.8l9.5-8.5c14.8-13.2 46.2-13.2 61 0l9.5 8.5c8.5 7.4 21.6.3 19.8-10.8-3.8-25.2-34-42.1-59.7-42.1z"],
-    "snowflake": [448, 512, [], "f2dc", "M440.1 355.2l-39.2-23 34.1-9.3c8.4-2.3 13.4-11.1 11.1-19.6l-4.1-15.5c-2.2-8.5-10.9-13.6-19.3-11.3L343 298.2 271.2 256l71.9-42.2 79.7 21.7c8.4 2.3 17-2.8 19.3-11.3l4.1-15.5c2.2-8.5-2.7-17.3-11.1-19.6l-34.1-9.3 39.2-23c7.5-4.4 10.1-14.2 5.8-21.9l-7.9-13.9c-4.3-7.7-14-10.3-21.5-5.9l-39.2 23 9.1-34.7c2.2-8.5-2.7-17.3-11.1-19.6l-15.2-4.1c-8.4-2.3-17 2.8-19.3 11.3l-21.3 81-71.9 42.2v-84.5L306 70.4c6.1-6.2 6.1-16.4 0-22.6l-11.1-11.3c-6.1-6.2-16.1-6.2-22.2 0l-24.9 25.4V16c0-8.8-7-16-15.7-16h-15.7c-8.7 0-15.7 7.2-15.7 16v46.1l-24.9-25.4c-6.1-6.2-16.1-6.2-22.2 0L142.1 48c-6.1 6.2-6.1 16.4 0 22.6l58.3 59.3v84.5l-71.9-42.2-21.3-81c-2.2-8.5-10.9-13.6-19.3-11.3L72.7 84c-8.4 2.3-13.4 11.1-11.1 19.6l9.1 34.7-39.2-23c-7.5-4.4-17.1-1.8-21.5 5.9l-7.9 13.9c-4.3 7.7-1.8 17.4 5.8 21.9l39.2 23-34.1 9.1c-8.4 2.3-13.4 11.1-11.1 19.6L6 224.2c2.2 8.5 10.9 13.6 19.3 11.3l79.7-21.7 71.9 42.2-71.9 42.2-79.7-21.7c-8.4-2.3-17 2.8-19.3 11.3l-4.1 15.5c-2.2 8.5 2.7 17.3 11.1 19.6l34.1 9.3-39.2 23c-7.5 4.4-10.1 14.2-5.8 21.9L10 391c4.3 7.7 14 10.3 21.5 5.9l39.2-23-9.1 34.7c-2.2 8.5 2.7 17.3 11.1 19.6l15.2 4.1c8.4 2.3 17-2.8 19.3-11.3l21.3-81 71.9-42.2v84.5l-58.3 59.3c-6.1 6.2-6.1 16.4 0 22.6l11.1 11.3c6.1 6.2 16.1 6.2 22.2 0l24.9-25.4V496c0 8.8 7 16 15.7 16h15.7c8.7 0 15.7-7.2 15.7-16v-46.1l24.9 25.4c6.1 6.2 16.1 6.2 22.2 0l11.1-11.3c6.1-6.2 6.1-16.4 0-22.6l-58.3-59.3v-84.5l71.9 42.2 21.3 81c2.2 8.5 10.9 13.6 19.3 11.3L375 428c8.4-2.3 13.4-11.1 11.1-19.6l-9.1-34.7 39.2 23c7.5 4.4 17.1 1.8 21.5-5.9l7.9-13.9c4.6-7.5 2.1-17.3-5.5-21.7z"],
-    "square": [448, 512, [], "f0c8", "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"],
-    "star": [576, 512, [], "f005", "M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"],
-    "star-half": [576, 512, [], "f089", "M288 385.3l-124.3 65.4 23.7-138.4-100.6-98 139-20.2 62.2-126V0c-11.4 0-22.8 5.9-28.7 17.8L194 150.2 47.9 171.4c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.1 23 46 46.4 33.7L288 439.6v-54.3z"],
-    "sticky-note": [448, 512, [], "f249", "M448 348.106V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80v351.988c0 26.51 21.49 48 48 48h268.118a48 48 0 0 0 33.941-14.059l83.882-83.882A48 48 0 0 0 448 348.106zm-128 80v-76.118h76.118L320 428.106zM400 80v223.988H296c-13.255 0-24 10.745-24 24v104H48V80h352z"],
-    "stop-circle": [512, 512, [], "f28d", "M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256zm296-80v160c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16z"],
-    "sun": [512, 512, [], "f185", "M494.2 221.9l-59.8-40.5 13.7-71c2.6-13.2-1.6-26.8-11.1-36.4-9.6-9.5-23.2-13.7-36.2-11.1l-70.9 13.7-40.4-59.9c-15.1-22.3-51.9-22.3-67 0l-40.4 59.9-70.8-13.7C98 60.4 84.5 64.5 75 74.1c-9.5 9.6-13.7 23.1-11.1 36.3l13.7 71-59.8 40.5C6.6 229.5 0 242 0 255.5s6.7 26 17.8 33.5l59.8 40.5-13.7 71c-2.6 13.2 1.6 26.8 11.1 36.3 9.5 9.5 22.9 13.7 36.3 11.1l70.8-13.7 40.4 59.9C230 505.3 242.6 512 256 512s26-6.7 33.5-17.8l40.4-59.9 70.9 13.7c13.4 2.7 26.8-1.6 36.3-11.1 9.5-9.5 13.6-23.1 11.1-36.3l-13.7-71 59.8-40.5c11.1-7.5 17.8-20.1 17.8-33.5-.1-13.6-6.7-26.1-17.9-33.7zm-112.9 85.6l17.6 91.2-91-17.6L256 458l-51.9-77-90.9 17.6 17.6-91.2-76.8-52 76.8-52-17.6-91.2 91 17.6L256 53l51.9 76.9 91-17.6-17.6 91.1 76.8 52-76.8 52.1zM256 152c-57.3 0-104 46.7-104 104s46.7 104 104 104 104-46.7 104-104-46.7-104-104-104zm0 160c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"],
-    "surprise": [496, 512, [], "f5c2", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm0-176c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm-48-72c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32zm128-32c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z"],
-    "thumbs-down": [512, 512, [], "f165", "M466.27 225.31c4.674-22.647.864-44.538-8.99-62.99 2.958-23.868-4.021-48.565-17.34-66.99C438.986 39.423 404.117 0 327 0c-7 0-15 .01-22.22.01C201.195.01 168.997 40 128 40h-10.845c-5.64-4.975-13.042-8-21.155-8H32C14.327 32 0 46.327 0 64v240c0 17.673 14.327 32 32 32h64c11.842 0 22.175-6.438 27.708-16h7.052c19.146 16.953 46.013 60.653 68.76 83.4 13.667 13.667 10.153 108.6 71.76 108.6 57.58 0 95.27-31.936 95.27-104.73 0-18.41-3.93-33.73-8.85-46.54h36.48c48.602 0 85.82-41.565 85.82-85.58 0-19.15-4.96-34.99-13.73-49.84zM64 296c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm330.18 16.73H290.19c0 37.82 28.36 55.37 28.36 94.54 0 23.75 0 56.73-47.27 56.73-18.91-18.91-9.46-66.18-37.82-94.54C206.9 342.89 167.28 272 138.92 272H128V85.83c53.611 0 100.001-37.82 171.64-37.82h37.82c35.512 0 60.82 17.12 53.12 65.9 15.2 8.16 26.5 36.44 13.94 57.57 21.581 20.384 18.699 51.065 5.21 65.62 9.45 0 22.36 18.91 22.27 37.81-.09 18.91-16.71 37.82-37.82 37.82z"],
-    "thumbs-up": [512, 512, [], "f164", "M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z"],
-    "times-circle": [512, 512, [], "f057", "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"],
-    "tired": [496, 512, [], "f5c8", "M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm129.1-303.8c-3.8-4.4-10.3-5.4-15.3-2.5l-80 48c-3.6 2.2-5.8 6.1-5.8 10.3s2.2 8.1 5.8 10.3l80 48c5.4 3.2 11.8 1.6 15.3-2.5 3.8-4.5 3.9-11 .1-15.5L343.6 208l33.6-40.3c3.8-4.5 3.7-11.1-.1-15.5zM220 208c0-4.2-2.2-8.1-5.8-10.3l-80-48c-5-3-11.5-1.9-15.3 2.5-3.8 4.5-3.9 11-.1 15.5l33.6 40.3-33.6 40.3c-3.8 4.5-3.7 11 .1 15.5 3.5 4.1 9.9 5.7 15.3 2.5l80-48c3.6-2.2 5.8-6.1 5.8-10.3zm28 64c-45.4 0-100.9 38.3-107.8 93.3-1.5 11.8 6.9 21.6 15.5 17.9C178.4 373.5 212 368 248 368s69.6 5.5 92.3 15.2c8.5 3.7 17-6 15.5-17.9-6.9-55-62.4-93.3-107.8-93.3z"],
-    "trash-alt": [448, 512, [], "f2ed", "M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"],
-    "user": [448, 512, [], "f007", "M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"],
-    "user-circle": [496, 512, [], "f2bd", "M248 104c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96zm0 144c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm0-240C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-49.7 0-95.1-18.3-130.1-48.4 14.9-23 40.4-38.6 69.6-39.5 20.8 6.4 40.6 9.6 60.5 9.6s39.7-3.1 60.5-9.6c29.2 1 54.7 16.5 69.6 39.5-35 30.1-80.4 48.4-130.1 48.4zm162.7-84.1c-24.4-31.4-62.1-51.9-105.1-51.9-10.2 0-26 9.6-57.6 9.6-31.5 0-47.4-9.6-57.6-9.6-42.9 0-80.6 20.5-105.1 51.9C61.9 339.2 48 299.2 48 256c0-110.3 89.7-200 200-200s200 89.7 200 200c0 43.2-13.9 83.2-37.3 115.9z"],
-    "window-close": [512, 512, [], "f410", "M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"],
-    "window-maximize": [512, 512, [], "f2d0", "M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z"],
-    "window-minimize": [512, 512, [], "f2d1", "M480 480H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h448c17.7 0 32 14.3 32 32s-14.3 32-32 32z"],
-    "window-restore": [512, 512, [], "f2d2", "M464 0H144c-26.5 0-48 21.5-48 48v48H48c-26.5 0-48 21.5-48 48v320c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-96 464H48V256h320v208zm96-96h-48V144c0-26.5-21.5-48-48-48H144V48h320v320z"]
-  };
-
-  bunker(function () {
-    defineIcons('far', icons);
-  });
-
-}());

examples/web/static/libs/fontawesome/less/_animated.less

@@ -1,19 +0,0 @@
-// Animated Icons
-// --------------------------
-
-.@{fa-css-prefix}-spin {
-  animation: fa-spin 2s infinite linear;
-}
-
-.@{fa-css-prefix}-pulse {
-  animation: fa-spin 1s infinite steps(8);
-}
-
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

examples/web/static/libs/fontawesome/less/_bordered-pulled.less

@@ -1,16 +0,0 @@
-// Bordered & Pulled
-// -------------------------
-
-.@{fa-css-prefix}-border {
-  border-radius: .1em;
-  border: solid .08em @fa-border-color;
-  padding: .2em .25em .15em;
-}
-
-.@{fa-css-prefix}-pull-left { float: left; }
-.@{fa-css-prefix}-pull-right { float: right; }
-
-.@{fa-css-prefix}, .fas, .far, .fal, .fab {
-  &.@{fa-css-prefix}-pull-left { margin-right: .3em; }
-  &.@{fa-css-prefix}-pull-right { margin-left: .3em; }
-}

examples/web/static/libs/fontawesome/less/_core.less

@@ -1,12 +0,0 @@
-// Base Class Definition
-// -------------------------
-
-.@{fa-css-prefix}, .fas, .far, .fal, .fab {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  text-rendering: auto;
-  line-height: 1;
-}

examples/web/static/libs/fontawesome/less/_fixed-width.less

@@ -1,6 +0,0 @@
-// Fixed Width Icons
-// -------------------------
-.@{fa-css-prefix}-fw {
-  text-align: center;
-  width: (20em / 16);
-}

examples/web/static/libs/fontawesome/less/_larger.less

@@ -1,27 +0,0 @@
-// Icon Sizes
-// -------------------------
-
-.larger(@factor) when (@factor > 0) {
-  .larger((@factor - 1));
-
-  .@{fa-css-prefix}-@{factor}x {
-    font-size: (@factor * 1em);
-  }
-}
-
-/* makes the font 33% larger relative to the icon container */
-.@{fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
-  vertical-align: -.0667em;
-}
-
-.@{fa-css-prefix}-xs {
-  font-size: .75em;
-}
-
-.@{fa-css-prefix}-sm {
-  font-size: .875em;
-}
-
-.larger(10);

examples/web/static/libs/fontawesome/less/_list.less

@@ -1,18 +0,0 @@
-// List Icons
-// -------------------------
-
-.@{fa-css-prefix}-ul {
-  list-style-type: none;
-  margin-left: @fa-li-width * 5/4;
-  padding-left: 0;
-
-  > li { position: relative; }
-}
-
-.@{fa-css-prefix}-li {
-  left: -@fa-li-width;
-  position: absolute;
-  text-align: center;
-  width: @fa-li-width;
-  line-height: inherit;
-}

examples/web/static/libs/fontawesome/less/_mixins.less

@@ -1,57 +0,0 @@
-// Mixins
-// --------------------------
-
-.fa-icon() {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  line-height: 1;
-  vertical-align: -.125em;
-}
-
-.fa-icon-rotate(@degrees, @rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
-  transform: rotate(@degrees);
-}
-
-.fa-icon-flip(@horiz, @vert, @rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
-  transform: scale(@horiz, @vert);
-}
-
-
-// Only display content to screen readers. A la Bootstrap 4.
-//
-// See: http://a11yproject.com/posts/how-to-hide-content/
-
-.sr-only() {
-  border: 0;
-  clip: rect(0,0,0,0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-// Use in conjunction with .sr-only to only display content when it's focused.
-//
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-//
-// Credit: HTML5 Boilerplate
-
-.sr-only-focusable() {
-  &:active,
-  &:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-  }
-}

examples/web/static/libs/fontawesome/less/_rotated-flipped.less

@@ -1,24 +0,0 @@
-// Rotated & Flipped Icons
-// -------------------------
-
-.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
-.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
-.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
-
-.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
-.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1, 2); }
-.@{fa-css-prefix}-flip-both, .@{fa-css-prefix}-flip-horizontal.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(-1, -1, 2); }
-
-// Hook for IE8-9
-// -------------------------
-
-:root {
-  .@{fa-css-prefix}-rotate-90,
-  .@{fa-css-prefix}-rotate-180,
-  .@{fa-css-prefix}-rotate-270,
-  .@{fa-css-prefix}-flip-horizontal,
-  .@{fa-css-prefix}-flip-vertical,
-  .@{fa-css-prefix}-flip-both {
-    filter: none;
-  }
-}

examples/web/static/libs/fontawesome/less/_screen-reader.less

@@ -1,5 +0,0 @@
-// Screen Readers
-// -------------------------
-
-.sr-only { .sr-only(); }
-.sr-only-focusable { .sr-only-focusable(); }

examples/web/static/libs/fontawesome/less/_stacked.less

@@ -1,22 +0,0 @@
-// Stacked Icons
-// -------------------------
-
-.@{fa-css-prefix}-stack {
-  display: inline-block;
-  height: 2em;
-  line-height: 2em;
-  position: relative;
-  vertical-align: middle;
-  width: 2em;
-}
-
-.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
-  left: 0;
-  position: absolute;
-  text-align: center;
-  width: 100%;
-}
-
-.@{fa-css-prefix}-stack-1x { line-height: inherit; }
-.@{fa-css-prefix}-stack-2x { font-size: 2em; }
-.@{fa-css-prefix}-inverse { color: @fa-inverse; }

examples/web/static/libs/fontawesome/less/brands.less

@@ -1,18 +0,0 @@
-@import "_variables.less";
-
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-style: normal;
-  font-weight: normal;
-  font-display: @fa-font-display;
-  src: url('@{fa-font-path}/fa-brands-400.eot');
-  src: url('@{fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
-    url('@{fa-font-path}/fa-brands-400.woff2') format('woff2'),
-    url('@{fa-font-path}/fa-brands-400.woff') format('woff'),
-    url('@{fa-font-path}/fa-brands-400.ttf') format('truetype'),
-    url('@{fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
-}
-
-.fab {
-  font-family: 'Font Awesome 5 Brands';
-}

examples/web/static/libs/fontawesome/less/fontawesome.less

@@ -1,12 +0,0 @@
-@import "_variables.less";
-@import "_mixins.less";
-@import "_core.less";
-@import "_larger.less";
-@import "_fixed-width.less";
-@import "_list.less";
-@import "_bordered-pulled.less";
-@import "_animated.less";
-@import "_rotated-flipped.less";
-@import "_stacked.less";
-@import "_icons.less";
-@import "_screen-reader.less";

examples/web/static/libs/fontawesome/less/regular.less

@@ -1,19 +0,0 @@
-@import "_variables.less";
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 400;
-  font-display: @fa-font-display;
-  src: url('@{fa-font-path}/fa-regular-400.eot');
-  src: url('@{fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
-    url('@{fa-font-path}/fa-regular-400.woff2') format('woff2'),
-    url('@{fa-font-path}/fa-regular-400.woff') format('woff'),
-    url('@{fa-font-path}/fa-regular-400.ttf') format('truetype'),
-    url('@{fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
-}
-
-.far {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 400;
-}