@hazelcast/ui 1.3.3-next.7 → 1.3.3-next.9

package/lib/AppHeader/AppHeader.d.ts

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

package/lib/AppHeader/AppHeader.js

@@ -0,0 +1,15 @@
+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 }) => (React.createElement("header", { 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 }, menuContent && React.createElement(AppHeaderMenu, null, 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;AAE5B,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;AAY5C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,WAAW,EAAkB,EAAE,EAAE,CAAC,CACnI,gCAAQ,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC;IAC5C,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,IAAG,WAAW,IAAI,oBAAC,aAAa,QAAE,WAAW,CAAiB,CAAO,CAC1F,CACV,CAAA"}

package/lib/AppHeader/AppHeader.module.scss

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

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,PHN2ZyB3aWR0aD0iNDExIiBoZWlnaHQ9IjU1IiB2aWV3Qm94PSIwIDAgNDExIDU1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE1NTNfMTgyMDMpIj4KICAgICAgICA8cGF0aCBkPSJNMjUwLjg4IDkuNDUzNDRDMjUzLjU5NiA4LjAyNzUgMjU2LjU0NSA3LjMwMjIxIDI1OS42NDcgNy4zMDIyMUMyNjIuOTYxIDcuMzAyMjEgMjY2LjEwOCA4LjEwODQ4IDI2OS4wMzMgOS43MjEwMkMyNjkuNzQzIDEwLjA1OSAyNzAuMzMxIDEwLjIyMSAyNzAuODMgMTAuMjIxQzI3MS42NTMgMTAuMjIxIDI3Mi4zNDMgOS44NzI0MiAyNzIuODE4IDkuMjE0MDJDMjczLjI1OSA4LjYwNDkyIDI3My40ODQgNy44NzYxIDI3My40ODQgNy4wNDE2N0MyNzMuNDg0IDUuNDgxOTQgMjcyLjg2OSA0LjI3NzgxIDI3MS42NSAzLjQ2MDk4QzI2OS45NjUgMi4zNTg5NiAyNjguMDM1IDEuNDk2MzUgMjY1LjkwNiAwLjg5NzgxMkMyNjMuNzg0IDAuMjk5MjcxIDI2MS41NjcgMCAyNTkuMzEyIDBDMjU1LjE2OCAwIDI1MS4xNTYgMC45OTI4NzUgMjQ3LjM5NSAyLjk1Mzk4QzI0My42MTMgNC45MjU2NSAyNDAuNDkzIDcuOTk1ODEgMjM4LjExOSAxMi4wOEMyMzUuNzQ3IDE2LjE2MDYgMjM0LjU0OCAyMS4yMTY1IDIzNC41NDggMjcuMTA2OUMyMzQuNTQ4IDMyLjk5NzIgMjM1Ljc1MSAzNy45OTMzIDIzOC4xMTkgNDIuMDk1MUMyNDAuNDkgNDYuMjAzOSAyNDMuNTk1IDQ5LjMwOTMgMjQ3LjM1NCA1MS4zMzAyQzI1MS4wOTUgNTMuMzQ0MSAyNTUuMDk2IDU0LjM2MTcgMjU5LjI0NCA1NC4zNjE3QzI2My45NDUgNTQuMzYxNyAyNjguMTIgNTMuMTQ3IDI3MS42MjYgNTAuNzY2OUMyNzIuMjE3IDUwLjQxMTMgMjcyLjY4MiA0OS45MTQ5IDI3My4wMDYgNDkuMjkxN0MyNzMuMzI0IDQ4LjY4MjYgMjczLjQ4NCA0OC4wNDE4IDI3My40ODQgNDcuMzkwNEMyNzMuNDg0IDQ2LjQ5OTYgMjczLjIzNSA0NS43MjUxIDI3Mi43NCA0NS4wOTEzQzI3Mi4yMTcgNDQuNDIyNCAyNzEuNTEzIDQ0LjA2NjcgMjcwLjY5NiA0NC4wNjY3QzI3MC4xMzYgNDQuMDY2NyAyNjkuNiA0NC4yMjE3IDI2OS4xMjUgNDQuNTEzOUMyNjYuMTQ5IDQ2LjE1NDYgMjYyLjk1OCA0Ni45ODU1IDI1OS42NDQgNDYuOTg1NUMyNTYuNSA0Ni45ODU1IDI1My41MzEgNDYuMjM5MSAyNTAuODE4IDQ0Ljc2NzRDMjQ4LjEyMyA0My4zMDYyIDI0NS45MTkgNDEuMDUyOSAyNDQuMjcyIDM4LjA3MDhDMjQyLjYxOCAzNS4wODE2IDI0MS43ODEgMzEuMzkxNyAyNDEuNzgxIDI3LjExMDRDMjQxLjc4MSAyMi44MjkxIDI0Mi42MjkgMTkuMDEyNSAyNDQuMzAzIDE2LjA0OEMyNDUuOTcgMTMuMDkwNSAyNDguMTg0IDEwLjg3NTkgMjUwLjg3NiA5LjQ2MDQ4TDI1MC44OCA5LjQ1MzQ0WiIgZmlsbD0iI0YwRjZGRiIvPgogICAgICAgIDxwYXRoIGQ9Ik0zNjEuMTU2IDEwLjg0MDdDMzYyLjk5MSA5LjcyMTA4IDM2NC4yMjEgNy40MjkwMSAzNTkuMjA1IDMuMTc1ODVDMzU5LjE3OCAzLjE1NDcyIDM1OS4xNTEgMy4xMzM2IDM1OS4xMjMgMy4xMDg5NUMzNTYuNTIzIDEuMDU5ODMgMzUzLjI4MSAwLjA3NzUxNDYgMzQ5LjU2MyAwLjA3NzUxNDZDMzQ2LjgwMyAwLjA3NzUxNDYgMzQ0LjI3NCAwLjY0Nzg5IDM0Mi4wNDcgMS43NzgwOEMzMzkuNzk1IDIuOTE1MzEgMzM4LjAwMSA0LjU3MzYyIDMzNi43MTcgNi43MDM3MkMzMzUuNDI5IDguODMzODMgMzM0Ljc3NiAxMS4yOTg0IDMzNC43NzYgMTQuMDI3MUMzMzQuNzc2IDE3LjAwOTIgMzM1LjQ1NiAxOS41NDA3IDMzNi43OTkgMjEuNTU0NkMzMzguMTE0IDIzLjUyOTggMzM5LjcyNyAyNS4xNDIzIDM0MS41OTIgMjYuMzQ2NUMzNDMuNDA3IDI3LjUxODkgMzQ1LjgyMiAyOC44MDA1IDM0OC43NjQgMzAuMTU2QzM1MS4wOTcgMzEuMjU0NSAzNTIuOTgzIDMyLjIxOTIgMzU0LjM2IDMzLjAyNTVDMzU1LjY4MyAzMy44MDAxIDM1Ni43OTYgMzQuNzc4OCAzNTcuNjgxIDM1LjkzMDJDMzU4LjUzNiAzNy4wNDYzIDM1OC45NDkgMzguMzU5NSAzNTguOTQ5IDM5Ljk1MUMzNTguOTQ5IDQyLjIxODQgMzU4LjE4NyA0My45ODkzIDM1Ni42MjIgNDUuMzU5QzM1NS4wNDQgNDYuNzM5MSAzNTIuODY3IDQ3LjQ0MzMgMzUwLjE1MSA0Ny40NDMzQzM0Ny44NTIgNDcuNDQzMyAzNDYuMDg1IDQ3LjIwMDMgMzQ0LjE4MiA0Ni4wODQyQzM0My42MzIgNDUuNzYwMyAzNDIuOTA0IDQ1LjE1MTIgMzQyLjE1NiA0NC4zMDk3QzMzOS44NDMgNDEuNzIxOSAzMzkuMTYgNDAuMTMwNSAzMzYuNzEzIDQwLjc4MTlDMzM0Ljg0MSA0MS4yODE4IDMzMy44NzEgNDMuNDgyMyAzMzQuNzY2IDQ2LjAxMDNDMzM1Ljk1MSA0OS4zNTg2IDMzOS44NTcgNTEuNjI5NiAzMzkuODU3IDUxLjYyOTZDMzQyLjc0NyA1My41OTQyIDM0Ni4yNjMgNTQuMzMgMzUwLjE0OCA1NC4zM0MzNTMuMjUgNTQuMzMgMzU2LjA2MiA1My43MzUgMzU4LjUwOCA1Mi41NjYxQzM2MC45NzggNTEuMzgzMSAzNjIuOTQgNDkuNjU0NCAzNjQuMzM3IDQ3LjQyOTJDMzY1Ljc0MSA0NS4yMDA1IDM2Ni40NTIgNDIuNTYzNCAzNjYuNDUyIDM5LjU4ODNDMzY2LjQ1MiAzNi42MTMyIDM2NS43ODIgMzQuMDg4OCAzNjQuNDYgMzIuMDk2QzM2My4xNjIgMzAuMTM4NCAzNjEuNTU2IDI4LjU3MTYgMzU5LjY4IDI3LjQzNzlDMzU3Ljg2OSAyNi4zNDI5IDM1NS40NTcgMjUuMTI0NyAzNTIuNTA1IDIzLjgxMTVDMzUwLjA5IDIyLjc2NTggMzQ4LjE1NiAyMS44MjU3IDM0Ni43NTggMjEuMDE5NEMzNDUuNDE5IDIwLjI0ODQgMzQ0LjI4MSAxOS4yNDg1IDM0My4zNzkgMTguMDQ3OEMzNDIuNTAxIDE2Ljg4NiAzNDIuMDc3IDE1LjQ5NTIgMzQyLjA3NyAxMy44MDUyQzM0Mi4wNzcgMTEuNjg1NyAzNDIuNzcxIDEwLjA2MjYgMzQ0LjE5OSA4LjgzNzM1QzM0NS42NDggNy41OTgwMSAzNDcuNDcyIDYuOTY3NzkgMzQ5LjYyNSA2Ljk2Nzc5QzM1MS43NzcgNi45Njc3OSAzNTMuMzgzIDcuNzAwMTIgMzU0Ljg4NyA4LjgwMjE0QzM1NC45NzUgOC44NjkwMyAzNTUuODAyIDkuNjE1NDUgMzU1LjgwMiA5LjYxNTQ1QzM1OC41NzcgMTIuMjkxMyAzNjEuMTQ5IDEwLjg0MDcgMzYxLjE0OSAxMC44NDA3SDM2MS4xNTZaIiBmaWxsPSIjRjBGNkZGIi8+CiAgICAgICAgPHBhdGggZD0iTTMzLjY3MjMgMC44ODAxMjdDMzEuNzE0NiAwLjg4MDEyNyAzMC4xMjkzIDIuNTEzNzkgMzAuMTI5MyA0LjUzMTIzVjIzLjYxNzdINy4zNzA4NFY0LjUzMTIzQzcuMzcwODQgMi41MTM3OSA1Ljc4NTUgMC44ODAxMjcgMy44Mjc3NSAwLjg4MDEyN0MxLjg3IDAuODgwMTI3IDAuMjg0NjY4IDIuNTEzNzkgMC4yODQ2NjggNC41MzEyM1Y0OS44NzZDMC4yODQ2NjggNTEuODkzNSAxLjg3IDUzLjUyNzEgMy44Mjc3NSA1My41MjcxQzUuNzg1NSA1My41MjcxIDcuMzcwODQgNTEuODkzNSA3LjM3MDg0IDQ5Ljg3NlYzMC43NDc0SDMwLjEyOTNWNDkuODc2QzMwLjEyOTMgNTEuODkzNSAzMS43MTQ2IDUzLjUyNzEgMzMuNjcyMyA1My41MjcxQzM1LjYzMDEgNTMuNTI3MSAzNy4yMTU0IDUxLjg5MzUgMzcuMjE1NCA0OS44NzZWNC41MzEyM0MzNy4yMTU0IDIuNTEzNzkgMzUuNjMwMSAwLjg4MDEyNyAzMy42NzIzIDAuODgwMTI3WiIgZmlsbD0iI0YwRjZGRiIvPgogICAgICAgIDxwYXRoIGQ9Ik04OC44NzE3IDQ4LjYzNjhMNzQuNDUgNC42MTkzOEM3NC4wNzA3IDMuNTIwODggNzMuNTIwNiAyLjYyNjU5IDcyLjgyMDIgMS45NTc2M0M3Mi4wNzIgMS4yNDk5NCA3MS4yMTc4IDAuODg3Mjk5IDcwLjI3ODIgMC44ODcyOTlINjguNzg4NkM2Ny45MzQ0IDAuODg3Mjk5IDY3LjExMSAxLjI2MDUxIDY2LjM0MjIgMS45OTI4NEM2NS42MTQ1IDIuNjg5OTcgNjUuMDc0NiAzLjU3NzIyIDY0LjczOTggNC42Mjk5NEw2MC4zOTcyIDE3LjkzMTdMNjMuNzYyNiAyOC44Njc0QzY2LjUzMzUgMTkuMjkwNyA2OS41MTk3IDEwLjkyODcgNjkuNjYzMiAxMC40NDY0TDgyLjA0ODYgNTAuOTM1OUM4Mi42NTM0IDUyLjkxODIgODQuNzIzOSA1My45OTkxIDg2LjYzMDQgNTMuMzMwMUM4OC41MDYxIDUyLjY3MTcgODkuNTEwNiA1MC41NzMzIDg4Ljg3NTEgNDguNjQwNEw4OC44NzE3IDQ4LjYzNjhaIiBmaWxsPSIjRjBGNkZGIi8+CiAgICAgICAgPHBhdGggZD0iTTU3LjY2MDUgMjYuNjI4MUw1MC40NTEzIDQ4LjYzNjlDNDkuODE1OCA1MC41Njk4IDUwLjgyMDMgNTIuNjY4MiA1Mi42OTYxIDUzLjMyNjZDNTQuNjA2IDUzLjk5NTYgNTYuNjczMSA1Mi45MTQ3IDU3LjI3NzggNTAuOTMyNEw2MS4xNjk0IDM3LjYzNDNMNTcuNjYwNSAyNi42MjQ2VjI2LjYyODFaIiBmaWxsPSIjMTBBNEIzIi8+CiAgICAgICAgPHBhdGggZD0iTTMyNC4zNDkgNDguNjM2OEwzMDkuOTI3IDQuNjE5MzhDMzA5LjU0OCAzLjUyMDg4IDMwOC45OTggMi42MjY1OSAzMDguMjk3IDEuOTU3NjNDMzA3LjU0OSAxLjI0OTk0IDMwNi42OTUgMC44ODcyOTkgMzA1Ljc1NSAwLjg4NzI5OUgzMDQuMjY2QzMwMy40MTEgMC44ODcyOTkgMzAyLjU4OCAxLjI2MDUxIDMwMS44MTkgMS45OTI4NEMzMDEuMDkyIDIuNjg5OTcgMzAwLjU1MiAzLjU3NzIyIDMwMC4yMTcgNC42Mjk5NEwyOTUuODc0IDE3LjkzMTdMMjk5LjI0IDI4Ljg2NzRDMzAyLjAxMSAxOS4yOTA3IDMwNC45OTcgMTAuOTI4NyAzMDUuMTQgMTAuNDQ2NEwzMTcuNTI2IDUwLjkzNTlDMzE4LjEzIDUyLjkxODIgMzIwLjIwMSA1My45OTkxIDMyMi4xMDcgNTMuMzMwMUMzMjMuOTgzIDUyLjY3MTcgMzI0Ljk4OCA1MC41NzMzIDMyNC4zNTIgNDguNjQwNEwzMjQuMzQ5IDQ4LjYzNjhaIiBmaWxsPSIjRjBGNkZGIi8+CiAgICAgICAgPHBhdGggZD0iTTI5My4xMzggMjYuNjI4MUwyODUuOTI4IDQ4LjYzNjlDMjg1LjI5MyA1MC41Njk4IDI4Ni4yOTcgNTIuNjY4MiAyODguMTczIDUzLjMyNjZDMjkwLjA4MyA1My45OTU2IDI5Mi4xNSA1Mi45MTQ3IDI5Mi43NTUgNTAuOTMyNEwyOTYuNjQ2IDM3LjYzNDNMMjkzLjEzOCAyNi42MjQ2VjI2LjYyODFaIiBmaWxsPSIjMTBBNEIzIi8+CiAgICAgICAgPHBhdGggZD0iTTEzMy40MTkgNDYuNDQzNEgxMTAuOTI3TDEzNS4yNTMgNS42OTMyMkMxMzUuNzE1IDQuOTAxMDQgMTM1Ljk0IDQuMjE4IDEzNS45NCAzLjYwMTg1QzEzNS45NCAyLjgyMDIyIDEzNS42MTkgMi4xMzM2NiAxMzUuMDA0IDEuNjE5NjJDMTM0LjQyNyAxLjEzMzc1IDEzMy42NTggMC44OTA4MDggMTMyLjcyMiAwLjg5MDgwOEgxMDMuNzMxQzEwMS44MzIgMC44OTA4MDggMTAwLjI5NCAyLjQ3NTE4IDEwMC4yOTQgNC40MzI3N0MxMDAuMjk0IDYuMzkwMzUgMTAxLjgzMiA3Ljk3NDcyIDEwMy43MzEgNy45NzQ3MkgxMjYuMTUxTDEwMS42NDQgNDguNzA3MkMxMDEuMTgyIDQ5LjQ0MzEgMTAwLjk0NyA1MC4xNTQzIDEwMC45NDcgNTAuODE5N0MxMDAuOTQ3IDUxLjY1NDIgMTAxLjI2MSA1Mi4zNTEzIDEwMS44NTIgNTIuODQwN0MxMDIuNDA2IDUzLjI5ODQgMTAzLjE2MSA1My41MzA4IDEwNC4wOTcgNTMuNTMwOEgxMzMuNDE1QzEzNS4zMTUgNTMuNTMwOCAxMzYuODUyIDUxLjk0NjQgMTM2Ljg1MiA0OS45ODg4QzEzNi44NTIgNDguMDMxMiAxMzUuMzE1IDQ2LjQ0NjkgMTMzLjQxNSA0Ni40NDY5TDEzMy40MTkgNDYuNDQzNFoiIGZpbGw9IiNGMEY2RkYiLz4KICAgICAgICA8cGF0aCBkPSJNMTg3LjYwMyA0LjM5NzQ1QzE4Ny42MDMgMi40MjkzIDE4Ni4wNTYgMC44MzA4NDEgMTg0LjE0MiAwLjgzMDg0MUgxNTcuNDA3QzE1NS41NDEgMC44MzA4NDEgMTU0LjAzMSAyLjM4NzA1IDE1NC4wMzEgNC4zMDk0MlY3Ljk2MDUzSDE4NC4xNDZDMTg2LjA1NiA3Ljk2MDUzIDE4Ny42MDcgNi4zNjU1OSAxODcuNjA3IDQuMzkzOTJMMTg3LjYwMyA0LjM5NzQ1WiIgZmlsbD0iI0YwRjZGRiIvPgogICAgICAgIDxwYXRoIGQ9Ik0xODQuMzMgNDYuMzk3NkgxNTQuMjE2VjUwLjA0ODdDMTU0LjIxNiA1MS45NzEgMTU1LjcyNiA1My41MjcyIDE1Ny41OTIgNTMuNTI3MkgxODQuMzI3QzE4Ni4yMzcgNTMuNTI3MiAxODcuNzg4IDUxLjkzMjMgMTg3Ljc4OCA0OS45NjA2QzE4Ny43ODggNDcuOTg5IDE4Ni4yNCA0Ni4zOTQgMTg0LjMyNyA0Ni4zOTRMMTg0LjMzIDQ2LjM5NzZaIiBmaWxsPSIjRjBGNkZGIi8+CiAgICAgICAgPHBhdGggZD0iTTE4NC4zMyAyMy42MTQySDE0NS43OFYzMC43NDM5SDE4NC4zM0MxODYuMjQgMzAuNzQzOSAxODcuNzkxIDI5LjE0OSAxODcuNzkxIDI3LjE3NzNDMTg3Ljc5MSAyNS4yMDkxIDE4Ni4yNDMgMjMuNjEwNyAxODQuMzMgMjMuNjEwN1YyMy42MTQyWiIgZmlsbD0iI0YwRjZGRiIvPgogICAgICAgIDxwYXRoIGQ9Ik0yMjUuNTMyIDQ2LjM5NzVIMjA4LjE0OFY0LjU4MDUzQzIwOC4xNDggMi41MzQ5MyAyMDYuNTM5IDAuODc2NjE3IDIwNC41NTMgMC44NzY2MTdDMjAyLjU2OCAwLjg3NjYxNyAyMDAuOTU5IDIuNTM0OTMgMjAwLjk1OSA0LjU4MDUzVjUwLjA0NTFDMjAwLjk1OSA1MS45Njc0IDIwMi40NjkgNTMuNTIzNiAyMDQuMzM1IDUzLjUyMzZIMjI1LjUyOEMyMjcuNDM4IDUzLjUyMzYgMjI4Ljk4OSA1MS45Mjg3IDIyOC45ODkgNDkuOTU3QzIyOC45ODkgNDcuOTg1NCAyMjcuNDQyIDQ2LjM5MDQgMjI1LjUyOCA0Ni4zOTA0TDIyNS41MzIgNDYuMzk3NVoiIGZpbGw9IiNGMEY2RkYiLz4KICAgICAgICA8cGF0aCBkPSJNNDAzLjQxIDAuODgwMTM4SDM3Ni43MzNDMzc0LjgyMyAwLjg4MDEzOCAzNzMuMjcyIDIuNDc1MDggMzczLjI3MiA0LjQ0Njc0QzM3My4yNzIgNi40MTg0MSAzNzQuODE5IDguMDEzMzUgMzc2LjczMyA4LjAxMzM1SDM4Ni40NzdWNDkuODMwM0MzODYuNDc3IDUxLjg3NTkgMzg4LjA4NiA1My41MzQyIDM5MC4wNzEgNTMuNTM0MkMzOTIuMDU2IDUzLjUzNDIgMzkzLjY2NiA1MS44NzU5IDM5My42NjYgNDkuODMwM1Y4LjAwOTgzSDQwMy40MUM0MDUuMzIgOC4wMDk4MyA0MDYuODcxIDYuNDE0ODkgNDA2Ljg3MSA0LjQ0MzIyQzQwNi44NzEgMi40NzE1NSA0MDUuMzIzIDAuODc2NjE3IDQwMy40MSAwLjg3NjYxN1YwLjg4MDEzOFoiIGZpbGw9IiNGMEY2RkYiLz4KICAgIDwvZz4KICAgIDxkZWZzPgogICAgICAgIDxjbGlwUGF0aCBpZD0iY2xpcDBfMTU1M18xODIwMyI+CiAgICAgICAgICAgIDxyZWN0IHdpZHRoPSI0MTAiIGhlaWdodD0iNTUiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjI4NDY2OCkiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgo8L3N2Zz4K", ...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,w0SAAw0S,KACx0S,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: 17px;
+  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,7 @@
+import { ReactNode } from 'react';
+export interface AppHeaderMenuProps {
+    children: (props: {
+        onClose: () => void;
+    }) => ReactNode;
+}
+export declare const AppHeaderMenu: ({ children }: AppHeaderMenuProps) => JSX.Element;

package/lib/AppHeader/AppHeaderMenu/AppHeaderMenu.js

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { Menu as MenuIcon } from 'react-feather';
+import { Button } from '../../Button';
+import { Popover } from '../../Popover';
+import { useOpenCloseState } from '../../hooks';
+import styles from './AppHeaderMenu.module.scss';
+export const AppHeaderMenu = ({ children }) => {
+    const [anchorElement, setAnchorElement] = useState();
+    const { isOpen, toggle, close } = useOpenCloseState();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { variant: "text", color: "light", iconSize: "medium", onClick: toggle, 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;AAEhD,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;AAMhD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAChE,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;QACE,oBAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAE,MAAM,EACf,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,CACT,CACJ,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,11 @@
+@use '../../../styles/constants' as c;
+
+.content {
+  padding: c.$grid * 2;
+  color: c.$colorNeutralLighter;
+  background: c.$brandSecondary;
+  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,99 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+$selectContainer: ':global .hz-select-field';
+$selectControl: ':global .hz-select-field__control';
+$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} {
+    border: none;
+    background: none;
+    border-radius: unset;
+
+    #{$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.$brandSecondary;
+    border-radius: 0 0 c.$borderRadius c.$borderRadius;
+  }
+
+  #{$selectOption} {
+    &:active {
+      background: none;
+    }
+
+    #{$selectValueContainer},
+    #{$selectTrailingNote} {
+      color: c.$colorNeutralLighter;
+    }
+
+    &--is-focused {
+      background: c.$brandAccent;
+      box-shadow: none;
+
+      #{$selectValueContainer},
+      #{$selectTrailingNote} {
+        color: c.$brandColorText;
+      }
+    }
+  }
+}

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,10 @@
+import { ReactNode } from 'react';
+export interface AppSidebarProps {
+    children?: ReactNode;
+    className?: string;
+    storageKey?: string;
+    open?: boolean;
+    initialOpen?: boolean;
+    footer?: ReactNode;
+}
+export declare const AppSidebar: ({ children, className, storageKey, open: controlledOpen, initialOpen, footer, }: 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, }) => {
+    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", { 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;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAW7C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,aAAa,EAC1B,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,IAAI,EAClB,MAAM,GACU,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,+BAAO,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,EAAE,SAAS,CAAC;QAC/E,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;gBAC/C,MAAM,IAAI,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAU,CAC1D,CACqB,CACvB,CACT,CAAA;AACH,CAAC,CAAA"}

package/lib/AppSidebar/AppSidebar.module.scss

@@ -0,0 +1,64 @@
+@use '../../styles/constants' as c;
+
+$width: 264px;
+$collapsedWidth: 74px;
+$offset: c.$grid * 4;
+
+.root {
+  width: $width;
+  height: 100%;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+  color: c.$colorNeutralLighter;
+  background: c.$brandSecondary;
+  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-y: auto;
+    overflow-x: hidden;
+  }
+
+  .content {
+    width: 86%;
+    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.$fontSizeBodySmall;
+  }
+
+  &.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.$brandColorText;
+  transform: translateY(-50%);
+
+  &.isFilled {
+    svg {
+      fill: c.$brandColorText;
+    }
+  }
+}

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

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

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

package/lib/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface AppSidebarFavoritesProps {
+    children: (props: {
+        items: string[];
+    }) => ReactNode;
+}
+export declare const AppSidebarFavorites: ({ children }: AppSidebarFavoritesProps) => JSX.Element;

package/lib/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.js

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import { Star } from 'react-feather';
+import { AppSidebarSection } from '../AppSidebarSection';
+import { appSidebarContext } from '../appSidebarContext';
+import styles from './AppSidebarFavorites.module.scss';
+export const AppSidebarFavorites = ({ children }) => {
+    const { favorites } = useContext(appSidebarContext);
+    return (React.createElement(AppSidebarSection, { active: false, ariaLabel: "favorites", id: "favorites", title: "Favorites", icon: Star },
+        React.createElement("div", { className: styles.content }, favorites.length > 0 ? (children({ items: favorites })) : (React.createElement("div", { className: styles.placeholder, "data-test": "sidebar-menu-no-favorites" }, "No favorites")))));
+};
+//# sourceMappingURL=AppSidebarFavorites.js.map