@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.0

package/README.md

@@ -1,13 +1,230 @@
-# `@hazelcast/ui`
+# Hazelcast Hive
 
-Hazelcast design system components. Available live at https://master--5f80b6aa3ceb290022dfea61.chromatic.com/
+![](./hive.png)
+
+Design system built with A11Y in mind. Developed as a [Lerna](https://lerna.js.org/) monorepo with shared frontend libraries for a variety of Hazelcast product offerings.  
+**Design system is available live at URL**: https://5f80b6aa3ceb290022dfea61-tultjjrhhk.chromatic.com/?path=/story/getting-started-intro--page
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_
-
-- [`@hazelcast/ui`](#hazelcastui)
-  - [Usage](#usage)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Global CSS](#global-css)
+- [SSR](#ssr)
+  - [Stable IDs](#stable-ids)
+- [Project structure](#project-structure)
+  - [Automated visual regression testing](#automated-visual-regression-testing)
+- [How-to](#how-to)
+  - [Install PnpM](#install-pnpm)
+  - [Setup](#setup)
+    - [Under the hood](#under-the-hood)
+  - [Deploy](#deploy)
+  - [Add a new shared dependency](#add-a-new-shared-dependency)
+  - [Add a new local dependency (for one package only)](#add-a-new-local-dependency-for-one-package-only)
+  - [Make changes to several packages and test it](#make-changes-to-several-packages-and-test-it)
+  - [Run storybook for development](#run-storybook-for-development)
+  - [Run linting](#run-linting)
+  - [Run unit tests](#run-unit-tests)
+  - [Run visual regression tests](#run-visual-regression-tests)
+  - [Approve the updated for visual regression test screenshots](#approve-the-updated-for-visual-regression-test-screenshots)
+  - [Run all checks at once](#run-all-checks-at-once)
+- [Releasing a new version](#releasing-a-new-version)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Installation
+
+1. `npm i @hazelcast/ui` (`npm i @hazelcast/ui@next` - canary version) - set of Hive UI components
+2. `npm i @hazelcast/services` (`npm i @hazelcast/services@next` - canary version) - Hive services
+3. `npm i @hazelcast/helpers` (`npm i @hazelcast/helpers@next` - canary version) - Hiver helpers
+4. `npm i -D @hazelcast/test-helpers` (`npm i -D @hazelcast/test-helpers@next` - canary version) - Hive test helpers
+
+## Usage
+
+Be aware, that we compile our TypeScript code to the modern `ES2018` JavaScript. To run it in legacy environment, please, configure webpack or any other bundler accordingly.
+Moreover, we do not do anything about styles (`scss` in our case). We just import them as modules. Please, configure webpack or any other bundler to handle them.
+
+The latest version of the design system is accessible at https://master--5f80b6aa3ceb290022dfea61.chromatic.com/.
+
+## Global CSS
+
+This library is used from Next.js projects.
+Individual projects should transpile @hazelcast/ui.
+However, Next.js still [forbids](https://github.com/vercel/next.js/blob/master/errors/css-global.md) to import files with .css / .scss extension unless they're in \_app.tsx
+
+So please make sure to import the following global styles in your projects if you need them.
+
+```typescript
+import '@hazelcast/ui/styles/datepicker.scss'
+```
+
+or
+
+```typescript
+import '@hazelcast/ui/styles/datepicker.module.scss'
+```
+
+if you need a CSS modules version
+
+## SSR
+
+### Stable IDs
+
+We use [`react-uid`](https://github.com/thearnica/react-uid) to generate stable IDs. you'll need `UIDReset` and `UIDFork` (optionally) to properly handle SSR. See the [README](https://github.com/thearnica/react-uid#code-splitting).
+
+## Project structure
+
+`packages` contains a list of published packages:
+
+- `helpers` (full name `@hazelcast/helpers`)
+- `services` (full name `@hazelcast/services`)
+- `test-helpers` (full name `@hazelcast/test-helpers`)
+- `ui` (full name `@hazelcast/ui`)
+
+### Automated visual regression testing
+
+Uses stories from [Storybook](https://storybook.js.org/) as test cases. In other words, any story is going to result in a set of screenshots. Moreover, any story is required to have an associated set of screenshots. Based on [Loki](https://loki.js.org/), which uses headless Chrome to render the screenshots in Docker.
+
+## How-to
+
+### Install [PnpM](https://pnpm.io/installation)
+
+```
+npm install -g pnpm
+```
+
+### Setup
+
+```
+pnpm i
+```
+
+#### Under the hood
+
+It runs a regular `pnpm install` and executes a `postinstall` hook. In that hook it runs:
+
+- `pnpm run compile`
+  Our child packages are written in TypeScript. To import them from `node_modules` in other packages they must be compiled to JavaScript first.
+
+### Deploy
+
+Every commit to `master` is automatically deployed new canary version of the package (`@hazelcast/xxx@next`) by [Hazelcast Jenkins](http://jenkins.hazelcast.com/view/Frontend%20Shared/job/frontend-shared-master/).
+
+### Add a new shared dependency
+
+In the root folder run
+
+```
+pnpm add [-D] dependency-name
+```
+
+### Add a new local dependency (for one package only)
+
+In the root folder run (replace @hazelcast/ui with @hazelcast/helpers, @hazelcast/test-helpers or @hazelcast/services if needed)
+
+```
+pnpm add --filter @hazelcast/ui dependency-name
+```
+
+### Make changes to several packages and test it
+
+When Lerna does the bootstrapping, it creates symlinks to the local packages other packages depend on. In our case, `@hazelcast/ui` depends on `@hazelcast/helpers`. Lerna is going to create a symlink `./packages/ui/node_modules/@hazelcast/helpers` that points to `./packages/helpers`. When we change our TypeScript code, the associated compiled JavaScript is not updated automatically. So if we change something in `@hazelcast/helpers` and we want to test how it works in `@hazelcast/ui`, we need to compile our changes in `@hazelcast/helpers`. To do that we have two options:
+
+1. Compile all packages with `pnpm run compile` in the root directory
+2. Compile a specific package, e.g. `cd packages/helpers && pnpm run compile`
+
+Now we can use the updated code in `@hazelcast/ui`.
+
+### Run storybook for development
+
+In the root directory
+
+```
+pnpm start
+```
+
+### Run linting
+
+In the root directory
+
+```
+pnpm run lint
+```
+
+### Run unit tests
+
+In the root directory
+
+```
+pnpm test
+```
+
+### Run visual regression tests
+
+In the root directory
+
+```
+pnpm run build-storybook
+pnpm run test:visual
+```
+
+### Approve the updated for visual regression test screenshots
+
+Say, we have changed something in our components.
+First we need to run the visual regression tests to make sure that the change affected how the component is displayed.
+
+```
+pnpm run build-storybook
+pnpm run test:visual
+```
+
+Now, if the test suite failed, we need to go to `packages/ui/.loki` and manually review the screenshots in the `current` folder and the diff in the `difference` folder. If we like what we see, we need to run `pnpm run test:visual:approve` in the `packages/ui` folder. It will update the reference screenshots.
+
+### Run all checks at once
+
+```
+pnpm run verify-all
+```
+
+If you PR passes this check locally, it is almost guaranteed to pass it on the CI.
+
+## Releasing a new version
+
+Assuming you're on latest master and the build is alright (`pnpm run build` runs without errors).
+
+1. First we create a release branch for the next version locally (in this case v1.1.0):
+
+   ```
+   git checkout -b release/v1.1.0
+   ```
+
+   We push this new branch to Github:
+
+   ```
+   git push -u origin release/v1.1.0
+   ```
+
+2. Then we run:
+
+   ```
+   pnpm exec lerna version 1.1.0
+   ```
+
+   This updates the package versions (in package.json, package-lock.json), creates a commit with necessary tags and pushes to Github automatically.
+
+   At this point you should create a pull request and merge the new version branch (v1.1.0) to master.
+
+3. Now, after merging this pull request, we have the latest version available on GitHub. And it will be automatically published to npm with the required tags and releases;
+
+   Wait for a few seconds/minutes (depends on how busy npm is at the time), and you should see the latest version we just released in the list returned by:
+
+   ```
+   pnpm view @hazelcast/ui versions
+   ```
+
+   If something went wrong and npm did not create a new release, then you can manually inform it about our new release:
+
+   ```
+   pnpm exec lerna publish from-git
+   ```

package/lib/components/Alert.d.ts

@@ -0,0 +1,33 @@
+import React, { FC, ReactNode } from 'react';
+import { PartialRequired } from '../../src';
+import { LinkProps } from './Link';
+import { ToastType } from './Toast';
+import { IconProps } from './Icon';
+type AlertAccessibleActionButtonIconProps = {
+    icon: IconProps['icon'];
+    ariaLabel: string;
+} | {
+    icon?: never;
+    ariaLabel?: never;
+};
+export type AlertActionButton = {
+    text: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+} & AlertAccessibleActionButtonIconProps;
+export type AlertActionLink = {
+    text: string;
+} & Omit<PartialRequired<LinkProps, 'href'>, 'children' | 'size'>;
+export type AlertAction = AlertActionButton | AlertActionLink;
+export type AlertProps = {
+    type: ToastType;
+    title?: ReactNode;
+    content?: ReactNode;
+    actions?: AlertAction[];
+    className?: string;
+    titleClassName?: string;
+    bodyClassName?: string;
+    dismissableByEscKey?: boolean;
+    closeToast?: (e?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+};
+export declare const Alert: FC<AlertProps>;
+export {};

package/lib/components/Alert.js

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import cn from 'classnames';
+import { ChevronRight, X } from 'react-feather';
+import useKey from 'react-use/lib/useKey';
+import { escKeyFilterPredicate } from '../utils/keyboard';
+import { Link } from './Link';
+import { Button } from './Button';
+import { ToastIcon } from './Toast';
+import { Icon } from './Icon';
+import { IconButton } from './IconButton';
+import styles from './Alert.module.scss';
+const isAlertActionButton = (action) => action.onClick !== undefined;
+export const Alert = ({ type, title, content, actions, className, dismissableByEscKey = true, closeToast, titleClassName, bodyClassName, }) => {
+    const { icon, ariaLabel } = ToastIcon[type];
+    const closeByEsc = useCallback((nativeEvent) => {
+        if (dismissableByEscKey) {
+            closeToast === null || closeToast === void 0 ? void 0 : closeToast();
+            nativeEvent.stopImmediatePropagation();
+        }
+    }, [closeToast, dismissableByEscKey]);
+    useKey(escKeyFilterPredicate, closeByEsc, { options: { once: true } }, [closeByEsc, dismissableByEscKey]);
+    return (React.createElement("div", { "data-test": "alert", className: cn(styles.alert, {
+            [styles.success]: type === 'success',
+            [styles.info]: type === 'info',
+            [styles.warning]: type === 'warning',
+            [styles.critical]: type === 'critical',
+        }, className) },
+        React.createElement(Icon, { "data-test": "alert-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
+        React.createElement("div", { className: styles.rightSide },
+            React.createElement("div", { className: styles.header },
+                title && (React.createElement("div", { "data-test": "alert-title", className: cn(styles.title, titleClassName) }, title)),
+                !!closeToast && React.createElement(IconButton, { "data-test": "alert-close", kind: "transparent", ariaLabel: "Close icon", icon: X, onClick: closeToast })),
+            React.createElement("div", { "data-test": "alert-body", className: cn(styles.body, bodyClassName) },
+                content && React.createElement("div", { "data-test": "alert-content" }, content),
+                (actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { "data-test": "alert-actions", className: styles.actions }, actions.map((action, aI) => {
+                    if (isAlertActionButton(action)) {
+                        const { text, icon, ariaLabel, onClick } = action;
+                        const iconLeftProps = icon && ariaLabel
+                            ? {
+                                iconLeft: icon,
+                                iconLeftAriaLabel: ariaLabel,
+                                iconLeftClassName: styles.actionButtonIcon,
+                            }
+                            : {};
+                        return (React.createElement(Button, { key: aI, variant: "text", capitalize: false, className: cn(styles.action, styles.actionButton), bodyClassName: styles.actionButtonBody, onClick: onClick, ...iconLeftProps }, text));
+                    }
+                    const { text, href, ...props } = action;
+                    return (React.createElement(Link, { key: aI, href: href, icon: ChevronRight, ariaLabel: "Icon chevron right", className: styles.action, size: "small", ...props }, text));
+                }))) : null))));
+};
+//# sourceMappingURL=Alert.js.map

package/lib/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"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"}

package/lib/components/Alert.module.scss

@@ -0,0 +1,141 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+// TODO: potential max-height
+.alert {
+  display: inline-flex;
+  padding: c.$grid * 2.5;
+  width: c.$alertWidth;
+  border-left: 5px solid transparent;
+
+  .icon {
+    flex-shrink: 0;
+    margin-right: c.$grid * 2.5;
+  }
+
+  .rightSide {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .title {
+      flex: 1 0 auto;
+      margin-right: c.$grid * 8.5;
+
+      @include c.typographyBodyNormal('bold');
+      @include h.overflowEllipsis;
+    }
+  }
+
+  /* Theme - Success */
+  &.success {
+    color: c.$colorText;
+    border-color: c.$colorSuccess;
+    background-color: c.$colorSuccessLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .actions {
+      .action {
+        color: c.$colorText;
+      }
+    }
+  }
+
+  /* Theme - Info */
+  &.info {
+    color: c.$colorText;
+    border-color: c.$colorInfo;
+    background-color: c.$colorInfoLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .actions {
+      .action {
+        color: c.$colorText;
+      }
+    }
+  }
+
+  /* Theme - Warning */
+  &.warning {
+    color: c.$colorText;
+    border-color: c.$colorWarning;
+    background-color: c.$colorWarningLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .actions {
+      .action {
+        color: c.$colorText;
+      }
+    }
+  }
+
+  /* Theme - Critical */
+  &.critical {
+    color: c.$colorText;
+    border-color: c.$colorError;
+    background-color: c.$colorErrorLight;
+
+    .icon {
+      color: c.$colorText;
+    }
+
+    .actions {
+      .action {
+        color: c.$colorText;
+      }
+    }
+  }
+
+  .body {
+    padding-right: c.$grid * 8.5;
+
+    @include c.typographyBodySmall;
+
+    .actions {
+      display: flex;
+      margin: c.$grid * 3 0 c.$grid;
+
+      .action {
+        &:not(:last-child) {
+          margin-right: c.$grid * 6;
+        }
+      }
+
+      .actionButton {
+        height: auto;
+
+        @include c.typographyBodySmall;
+
+        &:hover,
+        &.hover {
+          /* doiuse-disable text-decoration */
+          text-decoration: underline solid;
+        }
+
+        .actionButtonBody {
+          padding: 0;
+        }
+
+        .actionButtonIcon {
+          margin-right: c.$grid * 1.5;
+        }
+      }
+    }
+  }
+}

package/lib/components/AppHeader/AppHeader.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { DataTestProp } from '../../../src';
+import { AppHeaderMenuProps } from './AppHeaderMenu';
+import { AppHeaderLogoProps } from './AppHeaderLogo';
+import { SelectClusterProps } from './SelectCluster';
+export interface AppHeaderProps extends DataTestProp {
+    name: ReactNode;
+    className?: string;
+    children?: ReactNode;
+    asideContent?: ReactNode;
+    environment?: 'production';
+    logoProps: AppHeaderLogoProps;
+    clusterSelectProps?: SelectClusterProps;
+    menuContent?: AppHeaderMenuProps['children'];
+}
+export declare const AppHeader: ({ name, className, children, environment, clusterSelectProps, logoProps, menuContent, asideContent, "data-test": dataTest, }: AppHeaderProps) => React.JSX.Element;

package/lib/components/AppHeader/AppHeader.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import cls from 'classnames';
+import { EnvironmentBadge } from './EnvironmentBadge';
+import { AppHeaderMenu } from './AppHeaderMenu';
+import { AppHeaderLogo } from './AppHeaderLogo';
+import { SelectCluster } from './SelectCluster';
+import styles from './AppHeader.module.scss';
+export const AppHeader = ({ name, className, children, environment, clusterSelectProps, logoProps, menuContent, asideContent, 'data-test': dataTest = 'app-header', }) => (React.createElement("header", { "data-test": dataTest, className: cls(styles.root, className) },
+    React.createElement(AppHeaderLogo, { ...logoProps }),
+    React.createElement("span", { className: styles.name }, name),
+    clusterSelectProps && React.createElement(SelectCluster, { ...clusterSelectProps }),
+    children,
+    environment && React.createElement(EnvironmentBadge, { environment: environment }),
+    React.createElement("div", { className: styles.aside },
+        asideContent,
+        menuContent && React.createElement(AppHeaderMenu, { separator: !!asideContent }, menuContent))));
+//# sourceMappingURL=AppHeader.js.map

package/lib/components/AppHeader/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,GAAG,MAAM,YAAY,CAAA;AAG5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAA;AAEnE,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAa5C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,WAAW,EAAE,QAAQ,GAAG,YAAY,GACrB,EAAE,EAAE,CAAC,CACpB,6CAAmB,QAAQ,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC;IACjE,oBAAC,aAAa,OAAK,SAAS,GAAI;IAChC,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAQ;IAC1C,kBAAkB,IAAI,oBAAC,aAAa,OAAK,kBAAkB,GAAI;IAC/D,QAAQ;IACR,WAAW,IAAI,oBAAC,gBAAgB,IAAC,WAAW,EAAE,WAAW,GAAI;IAC9D,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;QACzB,YAAY;QACZ,WAAW,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAE,CAAC,CAAC,YAAY,IAAG,WAAW,CAAiB,CACnF,CACC,CACV,CAAA"}

package/lib/components/AppHeader/AppHeader.module.scss

@@ -0,0 +1,29 @@
+@use '../../../styles/constants' as c;
+
+.root {
+  background: c.$colorBrandSecondary;
+  color: c.$colorNeutralLighter;
+  display: flex;
+  align-items: center;
+  height: 59px;
+  box-sizing: border-box;
+  flex-direction: row;
+  font-size: c.$fontSizeBodySmall;
+  width: 100%;
+  padding: 0 c.$grid * 5;
+  overflow-x: auto;
+  flex-shrink: 0;
+  gap: c.$grid * 7.5;
+}
+
+.name {
+  color: c.$colorBrandPrimary;
+  font-weight: 600;
+}
+
+.aside {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  gap: c.$grid * 4;
+}

package/lib/components/AppHeader/AppHeaderLogo/AppHeaderLogo.d.ts

@@ -0,0 +1,12 @@
+import React, { ComponentType, HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react';
+import { DataTestProp } from '../../../../src';
+export interface LinkProps extends DataTestProp {
+    className?: string;
+    children: ReactNode;
+}
+export interface AppHeaderLogoProps {
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+    LinkComponent: ComponentType<LinkProps>;
+}
+export declare const AppHeaderLogo: ({ imgProps, wrapperProps, LinkComponent }: AppHeaderLogoProps) => React.JSX.Element;

package/lib/components/AppHeader/AppHeaderLogo/AppHeaderLogo.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import cls from 'classnames';
+import styles from './AppHeaderLogo.module.scss';
+export const AppHeaderLogo = ({ imgProps, wrapperProps, LinkComponent }) => (React.createElement("div", { ...wrapperProps, className: cls(styles.root, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className) },
+    React.createElement(LinkComponent, { className: styles.link, "data-test": "logo-link" },
+        React.createElement("img", { alt: "Home", src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU1IiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMTU1IDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOTQuNDkwOSAzLjQzNzYxQzk1LjUxNTEgMi45MTkwOSA5Ni42MjY5IDIuNjU1MzUgOTcuNzk2NyAyLjY1NTM1Qzk5LjA0NjQgMi42NTUzNSAxMDAuMjMzIDIuOTQ4NTQgMTAxLjMzNiAzLjUzNDkyQzEwMS42MDQgMy42NTc4MyAxMDEuODI1IDMuNzE2NzIgMTAyLjAxMyAzLjcxNjcyQzEwMi4zMjQgMy43MTY3MiAxMDIuNTg0IDMuNTg5OTcgMTAyLjc2MyAzLjM1MDU1QzEwMi45MjkgMy4xMjkwNiAxMDMuMDE0IDIuODY0MDQgMTAzLjAxNCAyLjU2MDYxQzEwMy4wMTQgMS45OTM0MyAxMDIuNzgyIDEuNTU1NTcgMTAyLjMyMyAxLjI1ODU0QzEwMS42ODcgMC44NTc4MDMgMTAwLjk2IDAuNTQ0MTI5IDEwMC4xNTcgMC4zMjY0NzdDOTkuMzU2OCAwLjEwODgyNiA5OC41MjA3IDAgOTcuNjcwNSAwQzk2LjEwNzcgMCA5NC41OTUzIDAuMzYxMDQ1IDkzLjE3NjggMS4wNzQxN0M5MS43NTA3IDEuNzkxMTQgOTAuNTc0NSAyLjkwNzU3IDg5LjY3OTEgNC4zOTI3MkM4OC43ODUgNS44NzY1OSA4OC4zMzI4IDcuNzE1MTEgODguMzMyOCA5Ljg1NzA1Qzg4LjMzMjggMTEuOTk5IDg4Ljc4NjMgMTMuODE1NyA4OS42NzkxIDE1LjMwNzNDOTAuNTczMiAxNi44MDE0IDkxLjc0NDIgMTcuOTMwNiA5My4xNjE0IDE4LjY2NTVDOTQuNTcyMSAxOS4zOTc5IDk2LjA4MDcgMTkuNzY3OSA5Ny42NDQ3IDE5Ljc2NzlDOTkuNDE3NCAxOS43Njc5IDEwMC45OTIgMTkuMzI2MiAxMDIuMzE0IDE4LjQ2MDdDMTAyLjUzNiAxOC4zMzE0IDEwMi43MTIgMTguMTUwOSAxMDIuODM0IDE3LjkyNDJDMTAyLjk1NCAxNy43MDI3IDEwMy4wMTQgMTcuNDY5NyAxMDMuMDE0IDE3LjIzMjlDMTAzLjAxNCAxNi45MDkgMTAyLjkyIDE2LjYyNzMgMTAyLjczNCAxNi4zOTY4QzEwMi41MzYgMTYuMTUzNiAxMDIuMjcxIDE2LjAyNDMgMTAxLjk2MyAxNi4wMjQzQzEwMS43NTIgMTYuMDI0MyAxMDEuNTUgMTYuMDgwNiAxMDEuMzcgMTYuMTg2OUMxMDAuMjQ4IDE2Ljc4MzUgOTkuMDQ1MSAxNy4wODU2IDk3Ljc5NTQgMTcuMDg1NkM5Ni42MTAyIDE3LjA4NTYgOTUuNDkwNiAxNi44MTQyIDk0LjQ2NzcgMTYuMjc5MUM5My40NTEyIDE1Ljc0NzcgOTIuNjIwMyAxNC45MjgzIDkxLjk5OTMgMTMuODQzOUM5MS4zNzU4IDEyLjc1NjkgOTEuMDYwMSAxMS40MTUyIDkxLjA2MDEgOS44NTgzM0M5MS4wNjAxIDguMzAxNDkgOTEuMzc5NiA2LjkxMzY0IDkyLjAxMDkgNS44MzU2MkM5Mi42Mzk2IDQuNzYwMTcgOTMuNDc0NCAzLjk1NDg2IDk0LjQ4OTYgMy40NDAxN0w5NC40OTA5IDMuNDM3NjFaIiBmaWxsPSIjRjBGNkZGIi8+CjxwYXRoIGQ9Ik0xMzYuMDcyIDMuOTQxOTZDMTM2Ljc2NCAzLjUzNDgzIDEzNy4yMjggMi43MDEzNSAxMzUuMzM3IDEuMTU0NzRDMTM1LjMyNiAxLjE0NzA2IDEzNS4zMTYgMS4xMzkzOCAxMzUuMzA2IDEuMTMwNDJDMTM0LjMyNSAwLjM4NTI4MSAxMzMuMTAzIDAuMDI4MDc2MiAxMzEuNzAxIDAuMDI4MDc2MkMxMzAuNjYgMC4wMjgwNzYyIDEyOS43MDcgMC4yMzU0ODUgMTI4Ljg2NyAwLjY0NjQ2M0MxMjguMDE4IDEuMDYgMTI3LjM0MiAxLjY2MzAyIDEyNi44NTcgMi40Mzc2MUMxMjYuMzcxIDMuMjEyMTkgMTI2LjEyNSA0LjEwODQgMTI2LjEyNSA1LjEwMDY0QzEyNi4xMjUgNi4xODUwNSAxMjYuMzgyIDcuMTA1NTkgMTI2Ljg4OCA3LjgzNzkyQzEyNy4zODQgOC41NTYxNyAxMjcuOTkyIDkuMTQyNTUgMTI4LjY5NiA5LjU4MDQyQzEyOS4zOCAxMC4wMDY4IDEzMC4yOSAxMC40NzI4IDEzMS40IDEwLjk2NTdDMTMyLjI4IDExLjM2NTIgMTMyLjk5MSAxMS43MTYgMTMzLjUxIDEyLjAwOTJDMTM0LjAwOSAxMi4yOTA4IDEzNC40MjkgMTIuNjQ2NyAxMzQuNzYyIDEzLjA2NTRDMTM1LjA4NCAxMy40NzEzIDEzNS4yNCAxMy45NDg4IDEzNS4yNCAxNC41Mjc1QzEzNS4yNCAxNS4zNTIgMTM0Ljk1MyAxNS45OTYgMTM0LjM2MyAxNi40OTQxQzEzMy43NjggMTYuOTk1OSAxMzIuOTQ3IDE3LjI1MiAxMzEuOTIzIDE3LjI1MkMxMzEuMDU2IDE3LjI1MiAxMzAuMzkgMTcuMTYzNyAxMjkuNjcyIDE2Ljc1NzhDMTI5LjQ2NSAxNi42NCAxMjkuMTkgMTYuNDE4NSAxMjguOTA4IDE2LjExMjVDMTI4LjAzNiAxNS4xNzE1IDEyNy43NzggMTQuNTkyOCAxMjYuODU2IDE0LjgyOTdDMTI2LjE1IDE1LjAxMTUgMTI1Ljc4NCAxNS44MTE3IDEyNi4xMjIgMTYuNzMwOUMxMjYuNTY5IDE3Ljk0ODUgMTI4LjA0MSAxOC43NzQzIDEyOC4wNDEgMTguNzc0M0MxMjkuMTMxIDE5LjQ4ODcgMTMwLjQ1NyAxOS43NTYzIDEzMS45MjEgMTkuNzU2M0MxMzMuMDkxIDE5Ljc1NjMgMTM0LjE1MiAxOS41Mzk5IDEzNS4wNzQgMTkuMTE0OEMxMzYuMDA1IDE4LjY4NDcgMTM2Ljc0NSAxOC4wNTYgMTM3LjI3MiAxNy4yNDY5QzEzNy44MDEgMTYuNDM2NCAxMzguMDY5IDE1LjQ3NzUgMTM4LjA2OSAxNC4zOTU2QzEzOC4wNjkgMTMuMzEzOCAxMzcuODE3IDEyLjM5NTggMTM3LjMxOCAxMS42NzEyQzEzNi44MjkgMTAuOTU5MyAxMzYuMjIzIDEwLjM4OTYgMTM1LjUxNiA5Ljk3NzMxQzEzNC44MzMgOS41NzkxNCAxMzMuOTIzIDkuMTM2MTUgMTMyLjgxIDguNjU4NkMxMzEuOSA4LjI3ODM1IDEzMS4xNyA3LjkzNjUxIDEzMC42NDMgNy42NDMzMkMxMzAuMTM4IDcuMzYyOTMgMTI5LjcwOSA2Ljk5OTMzIDEyOS4zNjkgNi41NjI3NEMxMjkuMDM4IDYuMTQwMjQgMTI4Ljg3OCA1LjYzNDUyIDEyOC44NzggNS4wMTk5OEMxMjguODc4IDQuMjQ5MjMgMTI5LjE0IDMuNjU5MDIgMTI5LjY3OSAzLjIxMzQ3QzEzMC4yMjUgMi43NjI4IDEzMC45MTMgMi41MzM2MyAxMzEuNzI0IDIuNTMzNjNDMTMyLjUzNiAyLjUzMzYzIDEzMy4xNDIgMi43OTk5MyAxMzMuNzA4IDMuMjAwNjdDMTMzLjc0MiAzLjIyNDk5IDEzNC4wNTQgMy40OTY0MiAxMzQuMDU0IDMuNDk2NDJDMTM1LjEgNC40Njk0NSAxMzYuMDcgMy45NDE5NiAxMzYuMDcgMy45NDE5NkgxMzYuMDcyWiIgZmlsbD0iI0YwRjZGRiIvPgo8cGF0aCBkPSJNMTIuNTg5NCAwLjMyMDA2OEMxMS44NTEyIDAuMzIwMDY4IDExLjI1MzQgMC45MTQxMjkgMTEuMjUzNCAxLjY0Nzc0VjguNTg4MjZIMi42NzE5NVYxLjY0Nzc0QzIuNjcxOTUgMC45MTQxMjkgMi4wNzQxOCAwLjMyMDA2OCAxLjMzNTk4IDAuMzIwMDY4QzAuNTk3Nzc1IDAuMzIwMDY4IDAgMC45MTQxMjkgMCAxLjY0Nzc0VjE4LjEzNjhDMCAxOC44NzA0IDAuNTk3Nzc1IDE5LjQ2NDQgMS4zMzU5OCAxOS40NjQ0QzIuMDc0MTggMTkuNDY0NCAyLjY3MTk1IDE4Ljg3MDQgMi42NzE5NSAxOC4xMzY4VjExLjE4MDlIMTEuMjUzNFYxOC4xMzY4QzExLjI1MzQgMTguODcwNCAxMS44NTEyIDE5LjQ2NDQgMTIuNTg5NCAxOS40NjQ0QzEzLjMyNzYgMTkuNDY0NCAxMy45MjUzIDE4Ljg3MDQgMTMuOTI1MyAxOC4xMzY4VjEuNjQ3NzRDMTMuOTI1MyAwLjkxNDEyOSAxMy4zMjc2IDAuMzIwMDY4IDEyLjU4OTQgMC4zMjAwNjhaIiBmaWxsPSIjRjBGNkZGIi8+CjxwYXRoIGQ9Ik0zMy40MDMxIDE3LjY4NjJMMjcuOTY1MiAxLjY3OTg4QzI3LjgyMjIgMS4yODA0MiAyNy42MTQ4IDAuOTU1MjI0IDI3LjM1MDcgMC43MTE5NjZDMjcuMDY4NSAwLjQ1NDYyNSAyNi43NDY1IDAuMzIyNzU0IDI2LjM5MjIgMC4zMjI3NTRIMjUuODMwNUMyNS41MDg0IDAuMzIyNzU0IDI1LjE5NzkgMC40NTg0NjYgMjQuOTA4IDAuNzI0NzY5QzI0LjYzMzYgMC45NzgyNjkgMjQuNDMwMSAxLjMwMDkxIDI0LjMwMzggMS42ODM3MkwyMi42NjY0IDYuNTIwN0wyMy45MzU0IDEwLjQ5NzNDMjQuOTgwMiA3LjAxNDkgMjYuMTA2MiAzLjk3NDE4IDI2LjE2MDMgMy43OTg3OEwzMC44MzA0IDE4LjUyMjNDMzEuMDU4NCAxOS4yNDMxIDMxLjgzOTEgMTkuNjM2MSAzMi41NTggMTkuMzkyOUMzMy4yNjUzIDE5LjE1MzQgMzMuNjQ0MSAxOC4zOTA0IDMzLjQwNDQgMTcuNjg3NUwzMy40MDMxIDE3LjY4NjJaIiBmaWxsPSIjRjBGNkZGIi8+CjxwYXRoIGQ9Ik0yMS42MzQ1IDkuNjgyOTJMMTguOTE2MSAxNy42ODY0QzE4LjY3NjUgMTguMzg5NCAxOS4wNTUzIDE5LjE1MjUgMTkuNzYyNiAxOS4zOTE5QzIwLjQ4MjcgMTkuNjM1MSAyMS4yNjIyIDE5LjI0MjEgMjEuNDkwMiAxOC41MjEyTDIyLjk1NzYgMTMuNjg1M0wyMS42MzQ1IDkuNjgxNjRWOS42ODI5MloiIGZpbGw9IiMxMEE0QjMiLz4KPHBhdGggZD0iTTEyMi4xOTQgMTcuNjg2MkwxMTYuNzU2IDEuNjc5ODhDMTE2LjYxMyAxLjI4MDQyIDExNi40MDUgMC45NTUyMjQgMTE2LjE0MSAwLjcxMTk2NkMxMTUuODU5IDAuNDU0NjI1IDExNS41MzcgMC4zMjI3NTQgMTE1LjE4MyAwLjMyMjc1NEgxMTQuNjIxQzExNC4yOTkgMC4zMjI3NTQgMTEzLjk4OCAwLjQ1ODQ2NiAxMTMuNjk4IDAuNzI0NzY5QzExMy40MjQgMC45NzgyNjkgMTEzLjIyIDEuMzAwOTEgMTEzLjA5NCAxLjY4MzcyTDExMS40NTcgNi41MjA3TDExMi43MjYgMTAuNDk3M0MxMTMuNzcxIDcuMDE0OSAxMTQuODk3IDMuOTc0MTggMTE0Ljk1MSAzLjc5ODc4TDExOS42MjEgMTguNTIyM0MxMTkuODQ5IDE5LjI0MzEgMTIwLjYzIDE5LjYzNjEgMTIxLjM0OCAxOS4zOTI5QzEyMi4wNTYgMTkuMTUzNCAxMjIuNDM0IDE4LjM5MDQgMTIyLjE5NSAxNy42ODc1TDEyMi4xOTQgMTcuNjg2MloiIGZpbGw9IiNGMEY2RkYiLz4KPHBhdGggZD0iTTExMC40MjUgOS42ODI5MkwxMDcuNzA3IDE3LjY4NjRDMTA3LjQ2NyAxOC4zODk0IDEwNy44NDYgMTkuMTUyNSAxMDguNTUzIDE5LjM5MTlDMTA5LjI3MyAxOS42MzUxIDExMC4wNTMgMTkuMjQyMSAxMTAuMjgxIDE4LjUyMTJMMTExLjc0OCAxMy42ODUzTDExMC40MjUgOS42ODE2NFY5LjY4MjkyWiIgZmlsbD0iIzEwQTRCMyIvPgo8cGF0aCBkPSJNNTAuMjAwMyAxNi44ODg1SDQxLjcxOTRMNTAuODkyMSAyLjA3MDMxQzUxLjA2NiAxLjc4MjI0IDUxLjE1MTEgMS41MzM4NiA1MS4xNTExIDEuMzA5ODFDNTEuMTUxMSAxLjAyNTU4IDUxLjAzIDAuNzc1OTIyIDUwLjc5ODEgMC41ODg5OTdDNTAuNTgwMyAwLjQxMjMxNiA1MC4yOTA1IDAuMzIzOTc1IDQ5LjkzNzUgMC4zMjM5NzVIMzkuMDA2MkMzOC4yODk5IDAuMzIzOTc1IDM3LjcxMDEgMC45MDAxMTEgMzcuNzEwMSAxLjYxMTk2QzM3LjcxMDEgMi4zMjM4MSAzOC4yODk5IDIuODk5OTQgMzkuMDA2MiAyLjg5OTk0SDQ3LjQ2MDFMMzguMjE5IDE3LjcxMThDMzguMDQ1MSAxNy45Nzk0IDM3Ljk1NjIgMTguMjM4IDM3Ljk1NjIgMTguNDc5OUMzNy45NTYyIDE4Ljc4MzQgMzguMDc0NyAxOS4wMzY5IDM4LjI5NzYgMTkuMjE0OEMzOC41MDYzIDE5LjM4MTMgMzguNzkxIDE5LjQ2NTggMzkuMTQ0IDE5LjQ2NThINTAuMTk5QzUwLjkxNTMgMTkuNDY1OCA1MS40OTUgMTguODg5NiA1MS40OTUgMTguMTc3OEM1MS40OTUgMTcuNDY2IDUwLjkxNTMgMTYuODg5OCA1MC4xOTkgMTYuODg5OEw1MC4yMDAzIDE2Ljg4ODVaIiBmaWxsPSIjRjBGNkZGIi8+CjxwYXRoIGQ9Ik03MC42MzE1IDEuNTk5MTlDNzAuNjMxNSAwLjg4MzUwNCA3MC4wNDc5IDAuMzAyMjQ2IDY5LjMyNjQgMC4zMDIyNDZINTkuMjQ1NEM1OC41NDIgMC4zMDIyNDYgNTcuOTcyNiAwLjg2ODE0IDU3Ljk3MjYgMS41NjcxOVYyLjg5NDg2SDY5LjMyNzdDNzAuMDQ3OSAyLjg5NDg2IDcwLjYzMjggMi4zMTQ4OCA3MC42MzI4IDEuNTk3OTFMNzAuNjMxNSAxLjU5OTE5WiIgZmlsbD0iI0YwRjZGRiIvPgo8cGF0aCBkPSJNNjkuMzk3NCAxNi44NzE5SDU4LjA0MjJWMTguMTk5NkM1OC4wNDIyIDE4Ljg5ODYgNTguNjExNyAxOS40NjQ1IDU5LjMxNTEgMTkuNDY0NUg2OS4zOTYxQzcwLjExNjMgMTkuNDY0NSA3MC43MDEyIDE4Ljg4NDUgNzAuNzAxMiAxOC4xNjc2QzcwLjcwMTIgMTcuNDUwNiA3MC4xMTc2IDE2Ljg3MDYgNjkuMzk2MSAxNi44NzA2TDY5LjM5NzQgMTYuODcxOVoiIGZpbGw9IiNGMEY2RkYiLz4KPHBhdGggZD0iTTY5LjM5NzMgOC41ODY5N0g1NC44NjEzVjExLjE3OTZINjkuMzk3M0M3MC4xMTc0IDExLjE3OTYgNzAuNzAyMyAxMC41OTk2IDcwLjcwMjMgOS44ODI2NEM3MC43MDIzIDkuMTY2OTUgNzAuMTE4NyA4LjU4NTY5IDY5LjM5NzMgOC41ODU2OVY4LjU4Njk3WiIgZmlsbD0iI0YwRjZGRiIvPgo8cGF0aCBkPSJNODQuOTMyNyAxNi44NzE5SDc4LjM3OFYxLjY2NTczQzc4LjM3OCAwLjkyMTg3IDc3Ljc3MTMgMC4zMTg4NDggNzcuMDIyOCAwLjMxODg0OEM3Ni4yNzQzIDAuMzE4ODQ4IDc1LjY2NzUgMC45MjE4NyA3NS42Njc1IDEuNjY1NzNWMTguMTk4M0M3NS42Njc1IDE4Ljg5NzMgNzYuMjM2OSAxOS40NjMyIDc2Ljk0MDMgMTkuNDYzMkg4NC45MzE0Qzg1LjY1MTUgMTkuNDYzMiA4Ni4yMzY0IDE4Ljg4MzIgODYuMjM2NCAxOC4xNjYzQzg2LjIzNjQgMTcuNDQ5MyA4NS42NTI4IDE2Ljg2OTMgODQuOTMxNCAxNi44NjkzTDg0LjkzMjcgMTYuODcxOVoiIGZpbGw9IiNGMEY2RkYiLz4KPHBhdGggZD0iTTE1Mi4wMDUgMC4zMjAxMjhIMTQxLjk0NkMxNDEuMjI2IDAuMzIwMTI4IDE0MC42NDEgMC45MDAxMDUgMTQwLjY0MSAxLjYxNzA3QzE0MC42NDEgMi4zMzQwNCAxNDEuMjI0IDIuOTE0MDIgMTQxLjk0NiAyLjkxNDAySDE0NS42MlYxOC4xMjAyQzE0NS42MiAxOC44NjQgMTQ2LjIyNyAxOS40NjcxIDE0Ni45NzUgMTkuNDY3MUMxNDcuNzI0IDE5LjQ2NzEgMTQ4LjMzMSAxOC44NjQgMTQ4LjMzMSAxOC4xMjAyVjIuOTEyNzRIMTUyLjAwNUMxNTIuNzI1IDIuOTEyNzQgMTUzLjMxIDIuMzMyNzYgMTUzLjMxIDEuNjE1NzlDMTUzLjMxIDAuODk4ODI1IDE1Mi43MjYgMC4zMTg4NDggMTUyLjAwNSAwLjMxODg0OFYwLjMyMDEyOFoiIGZpbGw9IiNGMEY2RkYiLz4KPC9zdmc+Cg==", ...imgProps }))));
+//# sourceMappingURL=AppHeaderLogo.js.map

package/lib/components/AppHeader/AppHeaderLogo/AppHeaderLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderLogo.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/AppHeaderLogo/AppHeaderLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,GAAG,MAAM,YAAY,CAAA;AAG5B,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAahD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAsB,EAAE,EAAE,CAAC,CAC9F,gCAAS,YAAY,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAC;IACzE,oBAAC,aAAa,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,eAAY,WAAW;QAC1D,6BACE,GAAG,EAAC,MAAM,EACV,GAAG,EAAC,g7RAAg7R,KACh7R,QAAQ,GACZ,CACY,CACZ,CACP,CAAA"}

package/lib/components/AppHeader/AppHeaderLogo/AppHeaderLogo.module.scss

@@ -0,0 +1,29 @@
+@use '../../../../styles/helpers' as h;
+
+.root {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+  overflow: hidden;
+
+  .link {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+
+    &:focus {
+      outline: none;
+
+      @include h.outlineSimple;
+    }
+
+    img {
+      height: auto;
+      width: auto;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}

package/lib/components/AppHeader/AppHeaderLogo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/AppHeaderLogo/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export interface AppHeaderMenuProps {
+    separator?: boolean;
+    children: (props: {
+        onClose: () => void;
+    }) => ReactNode;
+}
+export declare const AppHeaderMenu: ({ separator, children }: AppHeaderMenuProps) => React.JSX.Element;

package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.js

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { Menu as MenuIcon } from 'react-feather';
+import cn from 'classnames';
+import { Button } from '../../Button';
+import { Popover } from '../../Popover';
+import { useOpenCloseState } from '../../../hooks';
+import styles from './AppHeaderMenu.module.scss';
+export const AppHeaderMenu = ({ separator, children }) => {
+    const [anchorElement, setAnchorElement] = useState();
+    const { isOpen, toggle, close } = useOpenCloseState();
+    return (React.createElement("div", { className: cn(styles.root, { [styles.separator]: separator }) },
+        React.createElement(Button, { variant: "text", color: "light", iconSize: "medium", onClick: toggle, capitalize: false, iconRight: MenuIcon, ref: setAnchorElement, "data-test": "app-header-menu-toggle", iconRightAriaLabel: "menu icon", className: styles.toggleButton }, "Menu"),
+        React.createElement(Popover, { open: isOpen, anchorElement: anchorElement, onClose: close, className: styles.content }, children({ onClose: close }))));
+};
+//# sourceMappingURL=AppHeaderMenu.js.map

package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderMenu.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/AppHeaderMenu/AppHeaderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAOhD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC3E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAErD,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC;QAChE,oBAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,gBAAgB,eACX,wBAAwB,EAClC,kBAAkB,EAAC,WAAW,EAC9B,SAAS,EAAE,MAAM,CAAC,YAAY,WAGvB;QACT,oBAAC,OAAO,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAC3F,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CACrB,CACN,CACP,CAAA;AACH,CAAC,CAAA"}