@vkontakte/vkui 4.37.0 → 5.0.0

package/styleguide/demo_dataset.js

@@ -0,0 +1,356 @@
+export const users = [
+  {
+    id: 3520,
+    first_name: "Вадим",
+    last_name: "Дорохов",
+    screen_name: "dorokhov",
+    photo_100:
+      "https://sun9-60.userapi.com/c855032/v855032963/15d4f9/XOQY9NSlP5A.jpg?ava=1",
+    photo_200:
+      "https://sun9-32.userapi.com/c855032/v855032963/15d4f8/YWT1CBkuDUM.jpg?ava=1",
+  },
+  {
+    id: 83492458,
+    first_name: "Влад",
+    last_name: "Анесов",
+    screen_name: "va",
+    photo_100:
+      "https://sun9-44.userapi.com/c858128/v858128761/67fe1/nAnraWnpHK8.jpg?ava=1",
+    photo_200:
+      "https://sun9-69.userapi.com/c858128/v858128761/67fe0/itnUs52j974.jpg?ava=1",
+  },
+  {
+    id: 79153907,
+    first_name: "Александр",
+    last_name: "Колобов",
+    screen_name: "iamaleko",
+    photo_100:
+      "https://sun9-44.userapi.com/c848528/v848528590/1e57b2/JA3HmfitPZU.jpg?ava=1",
+    photo_200:
+      "https://sun9-55.userapi.com/c848528/v848528590/1e57b1/rwQw-askMow.jpg?ava=1",
+  },
+  {
+    id: 403563269,
+    first_name: "Artur",
+    last_name: "Stambultsian",
+    screen_name: "arthurstam",
+    photo_100:
+      "https://sun9-61.userapi.com/O-2f7t0yecmx38WXoF37RkhkJTG2rcjL4Yq88w/J39s0u1f90c.jpg?ava=1",
+    photo_200:
+      "https://sun9-62.userapi.com/z4_z-ls5mVpMw1edyggl4gz6RoItDjH0pGxbyg/FII3YzuW73Y.jpg?ava=1",
+  },
+  {
+    id: 1122996,
+    first_name: "Илья",
+    last_name: "Таратухин",
+    screen_name: "darkilfa",
+    photo_100:
+      "https://sun9-19.userapi.com/yGUuBADgtYRKU5yN_Vb3UkZL6PEaY3OWTBCEeA/bGpg5AL0WiM.jpg?ava=1",
+    photo_200:
+      "https://sun9-57.userapi.com/K2opK6HGnGq1eQ292zUP4q4IAjjdxOcixJxbBw/VbOeiRIGEnI.jpg?ava=1",
+  },
+  {
+    id: 26277006,
+    first_name: "Роман",
+    last_name: "Захаров",
+    screen_name: "rom",
+    photo_100:
+      "https://sun9-21.userapi.com/c854428/v854428614/479c6/jSqse8LyfS8.jpg?ava=1",
+    photo_200:
+      "https://sun9-31.userapi.com/c854428/v854428614/479c5/tQyKztSqZfU.jpg?ava=1",
+  },
+  {
+    id: 818250,
+    first_name: "Миша",
+    last_name: "Андриевский",
+    screen_name: "m.andrievskiy",
+    photo_100:
+      "https://sun9-52.userapi.com/c846017/v846017974/114170/WFIMAZh8H1o.jpg?ava=1",
+    photo_200:
+      "https://sun9-21.userapi.com/c846017/v846017974/11416f/4geIRdA2GkQ.jpg?ava=1",
+  },
+  {
+    id: 37700627,
+    first_name: "Тарас",
+    last_name: "Иванов",
+    screen_name: "ti",
+    photo_100:
+      "https://sun9-16.userapi.com/c857724/v857724589/9c7ad/01M-8UlcNoo.jpg?ava=1",
+    photo_200:
+      "https://sun9-29.userapi.com/c857724/v857724589/9c7ac/_OQ6lzK7PSc.jpg?ava=1",
+  },
+  {
+    id: 92093600,
+    first_name: "Илья",
+    last_name: "Гришин",
+    screen_name: "ilyagrshn",
+    photo_100:
+      "https://sun9-34.userapi.com/c857132/v857132690/49628/r4wBoWw0mJI.jpg?ava=1",
+    photo_200:
+      "https://sun9-14.userapi.com/c857132/v857132690/49627/MCT6QoygisY.jpg?ava=1",
+  },
+  {
+    id: 274123,
+    first_name: "Илья",
+    last_name: "Пеняев",
+    screen_name: "ia",
+    photo_100:
+      "https://sun9-53.userapi.com/c857620/v857620811/76951/_1bkgzBj5M0.jpg?ava=1",
+    photo_200:
+      "https://sun9-13.userapi.com/c857620/v857620811/76950/mcdVNs_siHk.jpg?ava=1",
+  },
+  {
+    id: 50875477,
+    first_name: "Иван",
+    last_name: "Барышев",
+    screen_name: "wayshev",
+    photo_100:
+      "https://sun9-4.userapi.com/oDjqp-AYVog1kuee5JOjzP9fMOvzCWCGBY0YHg/WW88aTocBxA.jpg?ava=1",
+    photo_200:
+      "https://sun9-5.userapi.com/-NguPXLiF8tpwvEwBjtPgz89ads9fadFWCLxYw/o0xdilzOClE.jpg?ava=1",
+  },
+  {
+    id: 54986442,
+    first_name: "Иван",
+    last_name: "Гусев",
+    screen_name: "girl",
+    photo_100:
+      "https://sun9-9.userapi.com/U_neC4C0b0k2TacpGigQf_4cbGKN7Z7tj4QzHQ/WCj1fIGbtZ8.jpg?ava=1",
+    photo_200:
+      "https://sun9-13.userapi.com/EdYJ0DLky80jbtItUYw6BZliBw9KDNxxPUjuSA/vdEHQgCkWdI.jpg?ava=1",
+  },
+  {
+    id: 690765,
+    first_name: "Макс",
+    last_name: "Павлов",
+    screen_name: "mp",
+    photo_100:
+      "https://sun9-5.userapi.com/c852232/v852232119/15fdda/0Ghe0f06u3s.jpg?ava=1",
+    photo_200:
+      "https://sun9-55.userapi.com/c852232/v852232119/15fdd9/hXPvs--xpBE.jpg?ava=1",
+  },
+  {
+    id: 494075,
+    first_name: "Антон",
+    last_name: "Циварев",
+    screen_name: "tsivarev",
+    photo_100:
+      "https://sun9-47.userapi.com/c830708/v830708352/1c50b4/Nl8LPuMRj5k.jpg?ava=1",
+    photo_200:
+      "https://sun9-71.userapi.com/c830708/v830708352/1c50b3/W-ZDnTalKLE.jpg?ava=1",
+  },
+  {
+    id: 168850,
+    first_name: "Юля",
+    last_name: "Брук",
+    screen_name: "yb",
+    photo_100:
+      "https://sun9-9.userapi.com/c850032/v850032014/5a495/rZnSh_81UgY.jpg?ava=1",
+    photo_200:
+      "https://sun9-44.userapi.com/c850032/v850032014/5a494/4xtk-O2o1Z4.jpg?ava=1",
+  },
+  {
+    id: 6492,
+    first_name: "Андрей",
+    last_name: "Рогозов",
+    screen_name: "andrew",
+    photo_100:
+      "https://sun9-27.userapi.com/c837536/v837536492/2f070/HT6-ucTq-cQ.jpg?ava=1",
+    photo_200:
+      "https://sun9-41.userapi.com/c837536/v837536492/2f06f/O0YuCLtzlDg.jpg?ava=1",
+  },
+  {
+    id: 53448,
+    first_name: "Андрей",
+    last_name: "Новосельский",
+    screen_name: "andrewnovoselsky",
+    photo_100:
+      "https://sun9-44.userapi.com/c848628/v848628445/16041a/6K1dtEwQl5g.jpg?ava=1",
+    photo_200:
+      "https://sun9-57.userapi.com/c848628/v848628445/160419/pT8x_uOMMlc.jpg?ava=1",
+  },
+  {
+    id: 331639485,
+    first_name: "Igor",
+    last_name: "Fedorov",
+    screen_name: "xyz",
+    photo_100:
+      "https://sun9-65.userapi.com/Jm47wQlR6z_R_rbAd_7LUf0NQg7QAv35MpvNhA/Ht8eYywub4o.jpg?ava=1",
+    photo_200:
+      "https://sun9-50.userapi.com/mN6GLkHt4Ul_AoWy-qGsHyOGrq3zdYboHvo8Cg/T87c3LJBVuk.jpg?ava=1",
+  },
+  {
+    id: 52826694,
+    first_name: "Михаил",
+    last_name: "Лихачёв",
+    screen_name: "lihachyov",
+    photo_100:
+      "https://sun9-49.userapi.com/c850332/v850332555/115030/JyNJrr4cytY.jpg?ava=1",
+    photo_200:
+      "https://sun9-28.userapi.com/c850332/v850332555/11502f/rVlRIjlWkWw.jpg?ava=1",
+  },
+  {
+    id: 2604586,
+    first_name: "Тимофей",
+    last_name: "Чаптыков",
+    screen_name: "tc",
+    photo_100:
+      "https://sun9-60.userapi.com/c851416/v851416327/be840/bnUHAblZoBY.jpg?ava=1",
+    photo_200:
+      "https://sun9-19.userapi.com/c851416/v851416327/be83f/zS1b6d0GLvs.jpg?ava=1",
+  },
+  {
+    id: 163093483,
+    first_name: "Алексей",
+    last_name: "Мазелюк",
+    screen_name: "mm",
+    photo_100:
+      "https://sun9-60.userapi.com/c855124/v855124003/167f36/TzgXYX1Izqk.jpg?ava=1",
+    photo_200:
+      "https://sun9-15.userapi.com/c855124/v855124003/167f35/lbGw8DnDPbs.jpg?ava=1",
+  },
+  {
+    id: 61351294,
+    first_name: "Евгений",
+    last_name: "Котляров",
+    screen_name: "eee",
+    photo_100:
+      "https://sun9-48.userapi.com/MTiajl5N6b467FGSPppTxnMvk3DSjWVaImgCjw/n4ajtifm__g.jpg?ava=1",
+    photo_200:
+      "https://sun9-21.userapi.com/Qs3nvx49pimar_UID28JXOIcVEA_4Yx3Itd8CQ/ORdcJxdkow8.jpg?ava=1",
+  },
+  {
+    id: 19039187,
+    first_name: "Иван",
+    last_name: "Недзвецкий",
+    screen_name: "in",
+    photo_100:
+      "https://sun9-71.userapi.com/S6sD78Ezdj0a63Tm3wU2gzS1sq-bP42TwKLYGg/BRRvQaRNJPE.jpg?ava=1",
+    photo_200:
+      "https://sun9-32.userapi.com/SXlqIOOYqVZyfmcOE66dnWvK-dguVsLYXbw1KQ/c3lwSlf75qM.jpg?ava=1",
+  },
+  {
+    id: 3538429,
+    first_name: "Иван",
+    last_name: "Тимофеев",
+    screen_name: "ox",
+    photo_100:
+      "https://sun9-11.userapi.com/c858420/v858420276/5e9b7/WodDi1aEvFQ.jpg?ava=1",
+    photo_200:
+      "https://sun9-8.userapi.com/c858420/v858420276/5e9b6/QrbYATzAdQc.jpg?ava=1",
+  },
+  {
+    id: 84115983,
+    first_name: "Настя",
+    last_name: "Манзюк",
+    screen_name: "manzuk",
+    photo_100:
+      "https://sun9-72.userapi.com/c857628/v857628986/22ddf/6gkgoYPj-Ms.jpg?ava=1",
+    photo_200:
+      "https://sun9-11.userapi.com/c857628/v857628986/22dde/4AiaIut-n5g.jpg?ava=1",
+  },
+  {
+    id: 82613762,
+    first_name: "Jean",
+    last_name: "Isahakyan",
+    screen_name: "ji",
+    photo_100:
+      "https://sun9-27.userapi.com/zmcGxRfZe3fdjIdMlq0OgjYGfIdYGOF67YfiLQ/TJi2eetIwN0.jpg?ava=1",
+    photo_200:
+      "https://sun9-14.userapi.com/l5q9tXplH5akRTPKfhqkJynKdCd6DcHImS9z3g/kWUJAOv51o0.jpg?ava=1",
+  },
+  {
+    id: 66748,
+    first_name: "Олег",
+    last_name: "Илларионов",
+    screen_name: "illarionov",
+    photo_100:
+      "https://sun9-18.userapi.com/c841629/v841629884/290aa/TUPsSYQXzKg.jpg?ava=1",
+    photo_200:
+      "https://sun9-36.userapi.com/c841629/v841629884/290a9/xwmA1U54rNw.jpg?ava=1",
+  },
+  {
+    id: 34,
+    first_name: "Татьяна",
+    last_name: "Плуталова",
+    screen_name: "id34",
+    photo_100:
+      "https://sun9-70.userapi.com/c636327/v636327034/2be84/TYzZpZ8BL0k.jpg?ava=1",
+    photo_200:
+      "https://sun9-12.userapi.com/c636327/v636327034/2be83/n8JO0z5V8FA.jpg?ava=1",
+  },
+  {
+    id: 39840293,
+    first_name: "Евгений",
+    last_name: "Авсиевич",
+    screen_name: "evg",
+    photo_100:
+      "https://sun9-19.userapi.com/c846020/v846020298/1d0e79/R41LGoPtIK0.jpg?ava=1",
+    photo_200:
+      "https://sun9-67.userapi.com/c846020/v846020298/1d0e78/Nte_l9WWJTU.jpg?ava=1",
+  },
+  {
+    id: 2050,
+    first_name: "Катя",
+    last_name: "Лебедева",
+    screen_name: "me",
+    photo_100:
+      "https://sun9-45.userapi.com/c857436/v857436004/f3f2c/eQ-xaP73964.jpg?ava=1",
+    photo_200:
+      "https://sun9-55.userapi.com/c857436/v857436004/f3f2b/81R9C6HQ7GI.jpg?ava=1",
+  },
+  {
+    id: 1986125,
+    first_name: "Настя",
+    last_name: "Семенюк",
+    screen_name: "ya",
+    photo_100:
+      "https://sun9-13.userapi.com/c855036/v855036032/16d259/tJwjpfzoPRc.jpg?ava=1",
+    photo_200:
+      "https://sun9-24.userapi.com/c855036/v855036032/16d258/RiAL8XjFGqs.jpg?ava=1",
+  },
+  {
+    id: 13329312,
+    first_name: "Павел",
+    last_name: "Князев",
+    screen_name: "apvel",
+    photo_100:
+      "https://sun9-52.userapi.com/c844521/v844521213/83b9f/uYAH_OJZisM.jpg?ava=1",
+    photo_200:
+      "https://sun9-9.userapi.com/c844521/v844521213/83b9e/eQ-X89V6J3k.jpg?ava=1",
+  },
+  {
+    id: 242670751,
+    first_name: "Кирилл",
+    last_name: "Аверьянов",
+    screen_name: "kir",
+    photo_100:
+      "https://sun9-68.userapi.com/c849032/v849032673/112633/pUPD0KXXWGc.jpg?ava=1",
+    photo_200:
+      "https://sun9-53.userapi.com/c849032/v849032673/112632/cVO914r-OsU.jpg?ava=1",
+  },
+  {
+    id: 151477469,
+    first_name: "Коля",
+    last_name: "Борисов",
+    screen_name: "casper6479",
+    photo_100:
+      "https://sun9-12.userapi.com/c850128/v850128006/86340/1IV4iSrVWQY.jpg?ava=1",
+    photo_200:
+      "https://sun9-2.userapi.com/c850128/v850128006/8633f/yRgM9VtYjBA.jpg?ava=1",
+  },
+  {
+    id: 152199439,
+    first_name: "Виталя",
+    last_name: "Волынский",
+    screen_name: "vitalyavolyn",
+    photo_100:
+      "https://sun9-55.userapi.com/c848416/v848416376/1b82ab/K5YJ8Htn3as.jpg?ava=1",
+    photo_200:
+      "https://sun9-56.userapi.com/c848416/v848416376/1b82aa/IhAknTNCFjE.jpg?ava=1",
+  },
+];
+
+users.forEach((user) => {
+  user.name = user.first_name + " " + user.last_name;
+});

package/styleguide/deprecated.js

@@ -0,0 +1,3 @@
+// styleguidist должен парсить @deprecated-компоненты автоматически,
+// но почему-то этого не делает. Пока закостылю, потом сделаем как надо
+export const deprecated = [];

package/styleguide/pages/adaptivity.md

@@ -0,0 +1,110 @@
+Одно из основных преимуществ VKUI — это адаптивность. Библиотека не только реализует разные шаблоны для разных устройств:
+под габариты адаптируются практически все компоненты.
+От наличия мышки, высоты и ширины экрана зависит отображение кнопок, элементов форм и так далее.
+В этой статье мы разберём, как сделать ваш интерфейс отзывчивым.
+
+Для начала, нужно обернуть ваше приложение в [`AdaptivityProvider`](https://vkcom.github.io/VKUI/#/AdaptivityProvider).
+
+> **Важно**
+>
+> Учтите порядок подключения компонентов для конфигурации. `ConfigProvider` -> `AdaptivityProvider` -> `AppRoot`
+
+```jsx static
+import React from "react";
+import ReactDOM from "react-dom";
+import { ConfigProvider, AdaptivityProvider, AppRoot } from "@vkontakte/vkui";
+import "@vkontakte/vkui/dist/vkui.css";
+
+function App() {
+  return (
+    <ConfigProvider>
+      <AdaptivityProvider>
+        <AppRoot>...</AppRoot>
+      </AdaptivityProvider>
+    </ConfigProvider>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById("root"));
+```
+
+Далее, нужно добавить [`SplitLayout`](https://vkcom.github.io/VKUI/#/SplitLayout) и хотя бы один [`SplitCol`](https://vkcom.github.io/VKUI/#/SplitCol).
+
+`SplitLayout` — компонент-обертка для отрисовки макета с одной или несколькими колонками. `SplitCol` — компонент для отрисовки колонки.
+
+```jsx static
+// ...
+
+function App() {
+  return (
+    <ConfigProvider>
+      <AdaptivityProvider>
+        <AppRoot>
+          <SplitLayout>
+            <SplitCol width={280}>
+              <SideCol />
+            </SplitCol>
+            <SplitCol>
+              <MainScreens />
+            </SplitCol>
+          </SplitLayout>
+        </AppRoot>
+      </AdaptivityProvider>
+    </ConfigProvider>
+  );
+}
+
+const MainScreens = () => {
+  return (
+    <View activePanel="profile">
+      <Panel id="profile">Profile</Panel>
+    </View>
+  );
+};
+
+const SideCol = () => {
+  return <Panel id="nav">Navigation</Panel>;
+};
+```
+
+Почти готово. Теперь мы должны сообщить приложению, что левая колонка нужна только на больших экранах. Для доступа
+к рассчитанным в `AdaptivityProvider` свойствам вы можете использовать hook `useAdaptivity` в своих компонентах.
+
+```jsx static
+function App() {
+  const platform = usePlatform();
+  const isVKCOM = platform === Platform.VKCOM;
+
+  // ...
+
+  <SplitLayout header={!isVKCOM && <PanelHeader separator={false} />}>
+    <ViewWidthConditionalRender
+      desktop={
+        <SplitCol width={280}>
+          <Panel id="nav">Navigation</Panel>
+        </SplitCol>
+      }
+    />
+    <SplitCol autoSpaced>
+      <View activePanel="profile">
+        <Panel id="profile">Profile</Panel>
+      </View>
+    </SplitCol>
+  </SplitLayout>;
+  // ...
+}
+```
+
+> **Нюансы**
+>
+> - Свойство `SplitLayout.header` нужно для создания сквозной шапки, когда интерфейс состоит из нескольких колонок (или одной центрированной)
+> - Анимация перехода между панелями должна быть отключена при размерах `ViewWidth.TABLET` и более (`SplitCol.animate`)
+> - Если интерфейс состоит из нескольких колонок, то у центральных колонок должны быть отступы (в трёх-колоночном режиме это одна центральная колонка) (`SplitCol.spaced`)
+
+### Технические детали
+
+Адаптивность базируется на четырёх свойствах: `viewWidth`, `viewHeight`, `sizeX`, `sizeY`. Эти свойства задаются либо вычисляются в `AdaptivityProvider`. Для удобства вы можете использовать готовые компоненты `SizeXConditionalRender`, `SizeYConditionalRender`, `ViewWidthConditionalRender`.
+
+- `sizeX` и `sizeY` принимают значения `SizeType.REGULAR | SizeType.COMPACT`
+- `viewWidth` — `ViewWidth.SMALL_MOBILE | ViewWidth.MOBILE | ViewWidth.SMALL_TABLET | ViewWidth.TABLET | ViewWidth.DESKTOP`
+- `viewHeight` — `ViewHeight.SMALL | ViewHeight.MEDIUM`

package/styleguide/pages/customize.md

@@ -0,0 +1,66 @@
+Все цвета, используемые в библиотеке, занесены в [css-custom-properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
+Чтобы использовать цвета в своем коде, достаточно посмотреть на список доступных цветов и применить их, используя
+синтаксис css-custom-properties:
+
+```css static
+.MyBlock {
+  background: var(--vkui--color_background_content);
+  color: var(--vkui--color_text_primary);
+}
+```
+
+Доступные цвета находятся [тут](https://unpkg.com/@vkontakte/vkui-tokens@4/themes/vkBase/cssVars/declarations/onlyVariables.css)
+
+## Платформы и темы
+
+В стили библиотеки встроены стили для 3 платформ:
+
+- `vkcom` — стиль сайта [vk.com](https://vk.com);
+- `ios` — стиль мобильного приложения ВКонтакте под iOS;
+- `android` — стиль мобильного приложения ВКонтакте под Android. Этот стиль является дефолтным.
+
+Каждая платформа доступна в светлом и темном вариантах.
+
+Пример использования:
+
+```jsx static
+import { AppRoot, ConfigProvider, Button } from "@vkontakte/vkui";
+import "@vkontakte/vkui/dist/vkui.css";
+
+ReactDOM.render(
+  <ConfigProvider platform="vkcom" appearance="light">
+    <AppRoot>
+      <Button />
+    </AppRoot>
+  </ConfigProvider>,
+  root
+);
+```
+
+## Текущие способы кастомизации
+
+Мы поддерживаем [новую систему токенов](https://github.com/VKCOM/vkui-tokens), которая
+позволяет кастомизировать не только цвета, но и скругления, размеры, отступы и тени.
+
+Пример использования:
+
+```jsx static
+import { AppRoot, ConfigProvider, Button } from "@vkontakte/vkui";
+/*
+ * В components.css уже нет значений токенов из Appearance. Предполагается, что
+ * если разработчик использует vkui-tokens, то файлы со значениями он подключает
+ * самостоятельно.
+ */
+import "@vkontakte/vkui/dist/components.css";
+import "@vkontakte/vkui-tokens/themes/vkCom/cssVars/declarations/onlyVariables.css";
+import "@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css";
+
+ReactDOM.render(
+  <ConfigProvider platform="vkcom" appearance="light">
+    <AppRoot>
+      <Button />
+    </AppRoot>
+  </ConfigProvider>,
+  root
+);
+```

package/styleguide/pages/design.md

@@ -0,0 +1,23 @@
+## Figma
+
+На странице [VK в Figma Community](https://www.figma.com/@vk) доступны четыре библиотеки:
+
+- VKUI Base Library — базовая библиотека, содержащая более 650 иконок и все цветовые токены для светлой и тёмной темы (в виде стилей);
+- VKUI iOS Library и VKUI Android Library — библиотеки компонентов для iOS и Android, собранные на токенах из Base Library, а также шаблоны готовых экранов;
+- VKUI Color Palette — палитра цветов из приложений ВКонтакте, на которых собраны цветовые токены.
+
+## Sketch
+
+Базовая библиотека, состоящая из иконок, цветов и токенов. Необходима для работы других библиотек:
+
+- [VKUI Base Library](https://sketch.cloud/s/kjgAr)
+
+Библиотеки компонентов в виде широко настраиваемых символов. Необходимы для работы UI-китов:
+
+- [VKUI iOS Library](https://sketch.cloud/s/G4OgL)
+- [VKUI Android Library](https://sketch.cloud/s/wa9qp)
+
+UI-киты, где в наглядном виде собраны примеры использования компонентов вместе с цветовыми токенами для работы с тёмной темой:
+
+- [iOSUIKit](https://sketch.cloud/s/5zmlw)
+- [AndroidUIKit](https://sketch.cloud/s/QMalL)