@hazelcast/ui 1.3.3-next.3 → 1.3.3-next.30

package/lib/Alert.module.scss

@@ -124,6 +124,7 @@
 
         &:hover,
         &.hover {
+          /* doiuse-disable text-decoration */
           text-decoration: underline solid;
         }
 

package/lib/AppHeader/AppHeader.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { DataTestProp } from '@hazelcast/helpers';
+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) => JSX.Element;

package/lib/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/AppHeader/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../src/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/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/AppHeader/AppHeaderLogo/AppHeaderLogo.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType, HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react';
+import { DataTestProp } from '@hazelcast/helpers';
+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) => JSX.Element;

package/lib/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/AppHeader/AppHeaderLogo/AppHeaderLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderLogo.js","sourceRoot":"","sources":["../../../src/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/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/AppHeader/AppHeaderLogo/index.d.ts

@@ -0,0 +1 @@
+export * from './AppHeaderLogo';

package/lib/AppHeader/AppHeaderLogo/index.js

@@ -0,0 +1,2 @@
+export * from './AppHeaderLogo';
+//# sourceMappingURL=index.js.map

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

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

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

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

package/lib/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/AppHeader/AppHeaderMenu/AppHeaderMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderMenu.js","sourceRoot":"","sources":["../../../src/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,aAAa,CAAA;AAE/C,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"}

package/lib/AppHeader/AppHeaderMenu/AppHeaderMenu.module.scss

@@ -0,0 +1,20 @@
+@use '../../../styles/constants' as c;
+
+.root {
+  display: flex;
+  align-items: center;
+}
+
+.separator {
+  border-left: 1px solid c.$colorNeutralLight;
+}
+
+.content {
+  padding: c.$grid * 2;
+  color: c.$colorNeutralLighter;
+  background: c.$colorBrandSecondary;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: c.$grid * 2;
+}

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

@@ -0,0 +1 @@
+export * from './AppHeaderMenu';

package/lib/AppHeader/AppHeaderMenu/index.js

@@ -0,0 +1,2 @@
+export * from './AppHeaderMenu';
+//# sourceMappingURL=index.js.map

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

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

package/lib/AppHeader/EnvironmentBadge/EnvironmentBadge.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface EnvironmentBadgeProps {
+    environment: string;
+}
+export declare const EnvironmentBadge: ({ environment }: EnvironmentBadgeProps) => JSX.Element;

package/lib/AppHeader/EnvironmentBadge/EnvironmentBadge.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Box } from 'react-feather';
+import { Icon } from '../../Icon';
+import styles from './EnvironmentBadge.module.scss';
+export const EnvironmentBadge = ({ environment }) => {
+    return (React.createElement("span", { className: styles.root, "data-test": "environment-badge" },
+        React.createElement(Icon, { icon: Box }),
+        environment));
+};
+//# sourceMappingURL=EnvironmentBadge.js.map

package/lib/AppHeader/EnvironmentBadge/EnvironmentBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentBadge.js","sourceRoot":"","sources":["../../../src/AppHeader/EnvironmentBadge/EnvironmentBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,OAAO,MAAM,MAAM,gCAAgC,CAAA;AAMnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAyB,EAAE,EAAE;IACzE,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,eAAY,mBAAmB;QACzD,oBAAC,IAAI,IAAC,IAAI,EAAE,GAAG,GAAI;QAClB,WAAW,CACP,CACR,CAAA;AACH,CAAC,CAAA"}

package/lib/AppHeader/EnvironmentBadge/EnvironmentBadge.module.scss

@@ -0,0 +1,13 @@
+@use '../../../styles/constants' as c;
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: c.$grid * 2;
+  color: #000;
+  background: c.$colorError;
+  border-radius: c.$grid * 3.5;
+  padding: 0 c.$grid * 3;
+  height: c.$grid * 7;
+  text-transform: capitalize;
+}

package/lib/AppHeader/EnvironmentBadge/index.d.ts

@@ -0,0 +1 @@
+export * from './EnvironmentBadge';

package/lib/AppHeader/EnvironmentBadge/index.js

@@ -0,0 +1,2 @@
+export * from './EnvironmentBadge';
+//# sourceMappingURL=index.js.map

package/lib/AppHeader/EnvironmentBadge/index.js.map

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

package/lib/AppHeader/SelectCluster/SelectCluster.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export type SelectClusterProps = {
+    clusterVersions?: Record<string, string | null> | null;
+    clusterName: string | null;
+    clusterNames: string[] | null;
+    isReadOnly?: boolean;
+    onChange: (value: string | null) => void;
+};
+export declare const SelectCluster: FC<SelectClusterProps>;

package/lib/AppHeader/SelectCluster/SelectCluster.js

@@ -0,0 +1,37 @@
+import cn from 'classnames';
+import React, { useMemo } from 'react';
+import { CheckCircle } from 'react-feather';
+import { SelectField } from '../../Select';
+import { CenteredLoader } from '../../CenteredLoader';
+import styles from './SelectCluster.module.scss';
+const getSafeValue = (clusterName, clusterNames) => {
+    if (!(clusterNames === null || clusterNames === void 0 ? void 0 : clusterNames.length)) {
+        return { status: 'disabled', value: 'No Clusters' };
+    }
+    if (!clusterName) {
+        return {
+            status: 'disconnected',
+            value: 'Select Cluster',
+        };
+    }
+    return {
+        status: clusterNames.includes(clusterName) ? 'connected' : 'disconnected',
+        value: clusterName,
+    };
+};
+export const SelectCluster = ({ clusterVersions, clusterName, clusterNames, isReadOnly, onChange }) => {
+    const options = useMemo(() => (clusterNames !== null && clusterNames !== void 0 ? clusterNames : []).map((name) => ({
+        label: name,
+        value: name,
+        trailingNote: clusterVersions && clusterVersions[name] ? (React.createElement("span", { "data-test": "cluster-version" }, clusterVersions[name])) : (React.createElement(CenteredLoader, { size: "small" })),
+    })), [clusterVersions, clusterNames]);
+    const { status, value } = getSafeValue(clusterName, clusterNames);
+    const disabled = isReadOnly || status === 'disabled';
+    return (React.createElement(SelectField, { name: "cluster", label: "Select Cluster", showAriaLabel: true, size: "small", "data-test": "select-cluster", className: cn(styles.select, { [styles.disabled]: disabled }), classNames: {
+            menuPortal: () => styles.menuPortal,
+        }, disabled: disabled, iconLeft: CheckCircle, iconLeftAriaLabel: "Select cluster", iconLeftContainerClassName: styles.selectIconLeftContainer, iconLeftClassName: cn(styles.selectIconLeft, {
+            [styles.disabled]: status === 'disabled',
+            [styles.disconnected]: status === 'disconnected',
+        }), isClearable: false, onChange: onChange, options: options, value: value }));
+};
+//# sourceMappingURL=SelectCluster.js.map

package/lib/AppHeader/SelectCluster/SelectCluster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCluster.js","sourceRoot":"","sources":["../../../src/AppHeader/SelectCluster/SelectCluster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,MAAM,YAAY,GAAG,CACnB,WAA0B,EAC1B,YAA6B,EAI7B,EAAE;IACF,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,CAAA,EAAE;QACzB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA;KACpD;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO;YACL,MAAM,EAAE,cAAc;YACtB,KAAK,EAAE,gBAAgB;SACxB,CAAA;KACF;IAED,OAAO;QACL,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc;QACzE,KAAK,EAAE,WAAW;KACnB,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5H,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,YAAY,EACV,eAAe,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACzC,2CAAgB,iBAAiB,IAAE,eAAe,CAAC,IAAI,CAAC,CAAQ,CACjE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAChC;KACJ,CAAC,CAAC,EACL,CAAC,eAAe,EAAE,YAAY,CAAC,CAChC,CAAA;IAED,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;IACjE,MAAM,QAAQ,GAAG,UAAU,IAAI,MAAM,KAAK,UAAU,CAAA;IAEpD,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,gBAAgB,EACtB,aAAa,QACb,IAAI,EAAC,OAAO,eACF,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EAC7D,UAAU,EAAE;YACV,UAAU,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU;SACpC,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,WAAW,EACrB,iBAAiB,EAAC,gBAAgB,EAClC,0BAA0B,EAAE,MAAM,CAAC,uBAAuB,EAC1D,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE;YAC3C,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,UAAU;YACxC,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,cAAc;SACjD,CAAC,EACF,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/AppHeader/SelectCluster/SelectCluster.module.scss

@@ -0,0 +1,101 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+$selectContainer: ':global .hz-select-field';
+$selectControl: ':global .hz-select-field__control';
+$selectInputContainer: ':global .hz-select-field__input-container';
+$selectValueContainer: ':global .hz-select-field__value-container';
+$selectTrailingNote: ':global .hz-select-field__trailing-note';
+$selectValue: ':global .hz-select-field__single-value';
+$selectMenuPortal: ':global .hz-select-field__menu-portal';
+$selectMenu: ':global .hz-select-field__menu';
+$selectMenuList: ':global .hz-select-field__menu-list';
+$selectMenuNotice: ':global .hz-select-field__menu-notice';
+$selectOption: ':global .hz-select-field__option';
+$selectGroup: ':global .hz-select-field__group';
+$selectGroupHeading: ':global .hz-select-field__group-heading';
+$selectFieldIndicators: ':global .hz-select-field__indicators';
+
+.select {
+  width: 260px;
+
+  &.disabled {
+    #{$selectControl} {
+      color: c.$colorTextSecondary;
+      background-color: transparent;
+
+      #{$selectValue},
+      #{$selectTrailingNote},
+      #{$selectFieldIndicators} svg {
+        color: c.$colorTextSecondary;
+      }
+    }
+  }
+
+  #{$selectControl} {
+    background: none;
+    border-radius: c.$borderRadius;
+    border: 1px solid c.$colorTextSecondary;
+
+    #{$selectInputContainer},
+    #{$selectValueContainer},
+    #{$selectTrailingNote} {
+      color: c.$colorNeutralLighter;
+    }
+  }
+
+  #{$selectValue} {
+    color: c.$colorNeutralLighter;
+  }
+
+  #{$selectFieldIndicators} {
+    svg {
+      color: c.$colorNeutralLighter;
+    }
+  }
+
+  .selectIconLeftContainer {
+    box-sizing: content-box;
+
+    .selectIconLeft {
+      color: c.$colorSuccess;
+
+      &.disconnected {
+        color: c.$colorError;
+      }
+
+      &.disabled {
+        color: c.$colorTextSecondary;
+      }
+    }
+  }
+}
+
+.menuPortal {
+  #{$selectMenu} {
+    border: none;
+    background: c.$colorBrandSecondary;
+    border-radius: 0 0 c.$borderRadius c.$borderRadius;
+  }
+
+  #{$selectOption} {
+    &:active {
+      background: none;
+    }
+
+    #{$selectValueContainer},
+    #{$selectTrailingNote} {
+      color: c.$colorNeutralLighter;
+    }
+
+    &--is-focused {
+      background: c.$colorBrandAccent;
+      box-shadow: none;
+
+      #{$selectValueContainer},
+      #{$selectTrailingNote} {
+        color: c.$colorBrandText;
+      }
+    }
+  }
+}

package/lib/AppHeader/SelectCluster/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectCluster';

package/lib/AppHeader/SelectCluster/index.js

@@ -0,0 +1,2 @@
+export * from './SelectCluster';
+//# sourceMappingURL=index.js.map

package/lib/AppHeader/SelectCluster/index.js.map

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

package/lib/AppHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './AppHeader';

package/lib/AppHeader/index.js

@@ -0,0 +1,2 @@
+export * from './AppHeader';
+//# sourceMappingURL=index.js.map

package/lib/AppHeader/index.js.map

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

package/lib/AppSidebar/AppSidebar.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { DataTestProp } from '@hazelcast/helpers';
+export interface AppSidebarProps extends DataTestProp {
+    children?: ReactNode;
+    className?: string;
+    storageKey?: string;
+    open?: boolean;
+    initialOpen?: boolean;
+    footer?: ReactNode;
+    onChangeState?: (state: Record<string, string>) => void;
+}
+export declare const AppSidebar: ({ children, className, storageKey, open: controlledOpen, initialOpen, footer, "data-test": dataTest, }: AppSidebarProps) => JSX.Element;

package/lib/AppSidebar/AppSidebar.js

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import cn from 'classnames';
+import { ChevronsLeft, ChevronsRight } from 'react-feather';
+import createPersistedState from 'use-persisted-state';
+import { IconButton } from '../IconButton';
+import { appSidebarContext } from './appSidebarContext';
+import styles from './AppSidebar.module.scss';
+export const AppSidebar = ({ children, className, storageKey = 'SideBarMenu', open: controlledOpen, initialOpen = true, footer, 'data-test': dataTest, }) => {
+    const usePersistedSidebarStorageState = createPersistedState(storageKey);
+    const usePersistedFavoritesState = createPersistedState('sideBarFavorites');
+    const [favorites, setFavorites] = usePersistedFavoritesState([]);
+    const [isOpen, setIsOpen] = usePersistedSidebarStorageState(initialOpen);
+    const toggle = useCallback(() => setIsOpen((value) => !value), [setIsOpen]);
+    const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+    const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+    const isCollapsed = controlledOpen !== undefined ? !controlledOpen : !isOpen;
+    return (React.createElement("aside", { "data-test": dataTest, className: cn(styles.root, { [styles.collapsed]: isCollapsed }, className) },
+        React.createElement(IconButton, { size: "medium", icon: !isCollapsed ? ChevronsLeft : ChevronsRight, onClick: toggle, className: styles.toggle }),
+        React.createElement(appSidebarContext.Provider, { value: {
+                open,
+                close,
+                isOpen: !isCollapsed,
+                toggle,
+                favorites,
+                setFavorites,
+            } },
+            React.createElement("div", { className: styles.wrapper },
+                React.createElement("div", { className: styles.content }, children)),
+            footer && React.createElement("footer", { className: styles.footer }, footer))));
+};
+//# sourceMappingURL=AppSidebar.js.map

package/lib/AppSidebar/AppSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.js","sourceRoot":"","sources":["../../src/AppSidebar/AppSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,oBAAoB,MAAM,qBAAqB,CAAA;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAY7C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,aAAa,EAC1B,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,IAAI,EAClB,MAAM,EACN,WAAW,EAAE,QAAQ,GACL,EAAE,EAAE;IACpB,MAAM,+BAA+B,GAAG,oBAAoB,CAAU,UAAU,CAAC,CAAA;IACjF,MAAM,0BAA0B,GAAG,oBAAoB,CAAW,kBAAkB,CAAC,CAAA;IAErF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,0BAA0B,CAAC,EAAE,CAAC,CAAA;IAChE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,+BAA+B,CAAC,WAAW,CAAC,CAAA;IAExE,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC3E,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC5D,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9D,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;IAE5E,OAAO,CACL,4CAAkB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,EAAE,SAAS,CAAC;QACpG,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI;QAC1H,oBAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;gBACL,IAAI;gBACJ,KAAK;gBACL,MAAM,EAAE,CAAC,WAAW;gBACpB,MAAM;gBACN,SAAS;gBACT,YAAY;aACb;YAED,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;gBAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C;YACL,MAAM,IAAI,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAU,CACnC,CACvB,CACT,CAAA;AACH,CAAC,CAAA"}

package/lib/AppSidebar/AppSidebar.module.scss

@@ -0,0 +1,66 @@
+@use '../../styles/constants' as c;
+
+$width: 264px;
+$collapsedWidth: 74px;
+$offset: c.$grid * 4;
+
+.root {
+  width: $width;
+  height: 100%;
+  flex-shrink: 0;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  box-sizing: border-box;
+  color: c.$colorNeutralLighter;
+  background: c.$colorBrandSecondary;
+  transition: 200ms width;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .toggle {
+    color: #1ee6fa;
+    position: absolute;
+    right: -#{c.$grid * 3};
+    top: 0;
+    z-index: c.$zIndex1000;
+    border-radius: 50%;
+    background: #0e3454;
+  }
+
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+
+  .content {
+    width: 90%;
+    margin: 0 auto;
+    padding: $offset 0;
+  }
+
+  .footer {
+    color: c.$colorNeutralLight;
+    text-align: center;
+    margin-top: auto;
+    word-break: break-all;
+    padding: 0 c.$grid * 4 c.$grid * 2.5;
+    font-size: c.$fontSizeBodySmaller;
+  }
+
+  &.collapsed {
+    width: $collapsedWidth;
+
+    .content {
+      max-width: calc($collapsedWidth - $offset * 1.5);
+    }
+
+    .footer {
+      padding: 0 c.$grid;
+    }
+  }
+}

package/lib/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface AppSidebarFavoriteButtonProps {
+    id: string;
+    className?: string;
+}
+export declare const AppSidebarFavoriteButton: ({ id, className }: AppSidebarFavoriteButtonProps) => JSX.Element;

package/lib/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.js

@@ -0,0 +1,22 @@
+import React, { useContext, useMemo } from 'react';
+import cn from 'classnames';
+import { Star } from 'react-feather';
+import { IconButton } from '../../IconButton';
+import { appSidebarContext } from '../appSidebarContext';
+import styles from './AppSidebarFavoriteButton.module.scss';
+export const AppSidebarFavoriteButton = ({ id, className }) => {
+    const { favorites, setFavorites } = useContext(appSidebarContext);
+    const isFavoriteItem = useMemo(() => favorites.find((item) => item === id), [favorites, id]);
+    const handleToggleFavorite = () => {
+        if (isFavoriteItem) {
+            setFavorites((value) => value.filter((item) => item !== id));
+        }
+        else {
+            setFavorites((value) => [...value, id]);
+        }
+    };
+    return (React.createElement(IconButton, { className: cn(styles.root, {
+            [styles.isFilled]: isFavoriteItem,
+        }, className), onClick: handleToggleFavorite, ariaLabel: "Favorite Item", icon: Star, size: "medium" }));
+};
+//# sourceMappingURL=AppSidebarFavoriteButton.js.map

package/lib/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebarFavoriteButton.js","sourceRoot":"","sources":["../../../src/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,MAAM,MAAM,wCAAwC,CAAA;AAO3D,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAiC,EAAE,EAAE;IAC3F,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACjE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAA;IAE5F,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,cAAc,EAAE;YAClB,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAA;SAC7D;aAAM;YACL,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;SACxC;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,EACX;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,cAAc;SAClC,EACD,SAAS,CACV,EACD,OAAO,EAAE,oBAAoB,EAC7B,SAAS,EAAC,eAAe,EACzB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,GACb,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.module.scss

@@ -0,0 +1,16 @@
+@use '../../../styles/constants' as c;
+
+[class].root {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  left: c.$grid * 3;
+  color: c.$colorBrandText;
+  transform: translateY(-50%);
+
+  &.isFilled {
+    svg {
+      fill: c.$colorBrandText;
+    }
+  }
+}

package/lib/AppSidebar/AppSidebarFavoriteButton/index.d.ts

@@ -0,0 +1 @@
+export * from './AppSidebarFavoriteButton';

package/lib/AppSidebar/AppSidebarFavoriteButton/index.js

@@ -0,0 +1,2 @@
+export * from './AppSidebarFavoriteButton';
+//# sourceMappingURL=index.js.map