@scality/core-ui 0.115.0

package/dist/components/linetemporalchart/tooltip/index.js

@@ -0,0 +1,104 @@
+// @ts-nocheck
+import { stringify } from 'vega-lite';
+import { Handler } from 'vega-tooltip';
+import { isArray, isObject, isString } from 'vega-util';
+import { spacing } from '../../../style/theme';
+export function defaultRenderTooltipSerie({ color, isLineDashed, name, value, key, }) {
+    return `<tr>
+    <td class="color">
+    ${color !== undefined
+        ? `<span style='background: ${isLineDashed
+            ? `repeating-linear-gradient(to right,${color} 0,${color} ${spacing.sp1},transparent ${spacing.sp1},transparent ${spacing.sp2})`
+            : color};width: ${spacing.sp8};height:${spacing.sp2};display: inline-block;vertical-align: middle;'></span>`
+        : ''}
+    </td>
+    <td class="key" style="text-align: left;">
+        ${name}
+    </td>
+    <td class="value" style="text-align: right;">
+      ${value}
+    </td>
+  </tr>`;
+}
+export class TooltipHandlerWithPaint extends Handler {
+    constructor(options, onHover) {
+        super(options);
+        this.prevCall = this.call;
+        this.onHover = onHover;
+        this.call = this.newCall.bind(this);
+    }
+    newCall(handler, event, item, value) {
+        if (item &&
+            this.onHover &&
+            JSON.stringify(value) !== JSON.stringify(this.value)) {
+            this.onHover(item.datum.datum);
+        }
+        this.handler = handler;
+        this.event = event;
+        this.item = item;
+        this.value = value;
+        this.prevCall(handler, event, item, value);
+    }
+    paint() {
+        this.prevCall(this.handler, this.event, this.item, this.value);
+    }
+}
+/**
+ * Format the value to be shown in the tooltip.
+ *
+ * @param value The value to show in the tooltip.
+ * @param valueToHtml Function to convert a single cell value to an HTML string
+ */
+export function formatValue(series, customizedColorRange, colorRange, unitLabel, yAxisType, renderTooltipSerie = defaultRenderTooltipSerie) {
+    return (value, valueToHtml, maxDepth) => {
+        if (isArray(value)) {
+            return `[${value
+                .map((v) => valueToHtml(isString(v) ? v : stringify(v, maxDepth)))
+                .join(', ')}]`;
+        }
+        if (isObject(value)) {
+            let content = '';
+            const { title, image, ...rest } = value;
+            if (title) {
+                content += `<h2 style="text-align: center;">${valueToHtml(title)}</h2>`;
+            }
+            if (image) {
+                content += `<img src="${valueToHtml(image)}">`;
+            }
+            const keys = Object.keys(rest);
+            if (keys.length > 0) {
+                content += '<table>';
+                for (const key of keys) {
+                    let val = rest[key];
+                    // ignore undefined properties
+                    if (val === undefined) {
+                        continue;
+                    }
+                    if (isObject(val)) {
+                        val = stringify(val, maxDepth);
+                    }
+                    const currentSerie = series.find((serie) => serie.getTooltipLabel(serie.metricPrefix, serie.resource) === key);
+                    const currentSerieIndex = series.findIndex((serie) => serie.getTooltipLabel(serie.metricPrefix, serie.resource) === key);
+                    const serieIndex = yAxisType === 'symmetrical' && !customizedColorRange.length // $FlowFixMe
+                        ? [...new Set(series.map((serie) => serie.resource))].findIndex((serieResource) => serieResource ===
+                            (currentSerie ? currentSerie.resource : null))
+                        : currentSerieIndex;
+                    const serieColorRange = customizedColorRange.length
+                        ? customizedColorRange
+                        : colorRange;
+                    content += renderTooltipSerie({
+                        key,
+                        color: serieIndex !== -1 ? serieColorRange[serieIndex] : undefined,
+                        isLineDashed: serieIndex !== -1 ? series[serieIndex].isLineDashed : undefined,
+                        name: valueToHtml(key),
+                        value: val !== 'NaN' ? `${valueToHtml(val)} ${unitLabel}` : '-',
+                        unitLabel,
+                    }, value);
+                }
+                content += `</table>`;
+            }
+            return content || '{}'; // show empty object if there are no properties
+        }
+        return valueToHtml(value);
+    };
+}

package/dist/components/loader/Loader.component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { LOADER_SIZE as SIZE } from '../constants';
+type Props = {
+    size?: keyof typeof SIZE;
+    color?: string;
+    children?: JSX.Element;
+    centered?: boolean;
+};
+declare function Loader({ children, color, size, centered, ...rest }: Props): JSX.Element;
+export { Loader };
+//# sourceMappingURL=Loader.component.d.ts.map

package/dist/components/loader/Loader.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/loader/Loader.component.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC;AACnD,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,OAAO,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoCF,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,KAAiB,EACjB,IAAiB,EACjB,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,KAAK,eAeP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/loader/Loader.component.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { LoaderIcon } from '../../icons/scality-loading';
+import { fontSize, svgSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { LOADER_SIZE as SIZE } from '../constants';
+const LoaderContainer = styled.div `
+  display: flex;
+  ${(props) => {
+    return css `
+      font-size: ${fontSize[props.size]};
+      svg {
+        height: ${svgSize[props.size]};
+        width: ${svgSize[props.size]};
+        fill: ${props.color};
+      }
+    `;
+}}
+
+  ${(props) => {
+    if (props.centered)
+        return css `
+        height: 100vh;
+        justify-content: center;
+        align-items: center;
+      `;
+}}
+`;
+const LoaderText = styled.span `
+  padding: 10px 0;
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const LoaderTextDiv = styled.span `
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+`;
+function Loader({ children, color = '#A14FBF', size = SIZE.large, centered = false, ...rest }) {
+    return (_jsx(LoaderContainer, { size: size, color: color, centered: centered, className: "sc-loader", ...rest, children: _jsxs(LoaderTextDiv, { children: [_jsx(LoaderIcon, {}), children && _jsxs(LoaderText, { children: [" ", children] })] }) }));
+}
+export { Loader };

package/dist/components/modal/Modal.component.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type Props = {
+    isOpen: boolean;
+    close?: () => void;
+    title: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    subTitle?: ReactNode;
+    role?: 'dialog' | 'alertdialog';
+};
+declare const Modal: ({ isOpen, close, title, children, footer, subTitle, role, ...rest }: Props) => import("react").ReactPortal | null;
+export { Modal };
+//# sourceMappingURL=Modal.component.d.ts.map

package/dist/components/modal/Modal.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/modal/Modal.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAU3D,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;CACjC,CAAC;AA0CF,QAAA,MAAM,KAAK,wEASR,KAAK,uCAiDP,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/modal/Modal.component.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import ReactDom from 'react-dom';
+import styled from 'styled-components';
+import { Wrap, spacing } from '../../spacing';
+import { zIndex } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { Text } from '../text/Text.component';
+const ModalContainer = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: ${zIndex.modal};
+`;
+const ModalContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  background-color: ${getThemePropSelector('backgroundLevel1')};
+  color: ${getThemePropSelector('textPrimary')};
+  border-radius: 5px;
+  overflow: hidden;
+  min-width: 250px;
+  min-height: 150px;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  max-height: calc(100vh - ${spacing.r24} - ${spacing.r24});
+`;
+const ModalHeader = styled.div `
+  display: flex;
+  padding: ${spacing.r16} ${spacing.r16} ${spacing.r16} ${spacing.r32};
+  background-color: ${(props) => props.theme.backgroundLevel3};
+`;
+const ModalBody = styled.div `
+  padding: ${spacing.r32};
+  flex-grow: 1;
+  background-color: ${(props) => props.theme.backgroundLevel4};
+  overflow-y: auto;
+`;
+const ModalFooter = styled.div `
+  padding: ${spacing.r16};
+  background-color: ${(props) => props.theme.backgroundLevel3};
+`;
+const Modal = ({ isOpen, close, title, children, footer, subTitle, role = 'dialog', ...rest }) => {
+    const modalContainer = useRef(document.createElement('div'));
+    useLayoutEffect(() => {
+        document.body && document.body.prepend(modalContainer.current);
+        return () => {
+            document.body && document.body.removeChild(modalContainer.current);
+        };
+    }, [modalContainer]);
+    return isOpen
+        ? ReactDom.createPortal(_jsx(ModalContainer, { className: "sc-modal", role: role, "aria-modal": "true", "aria-labelledby": "dialog_label", "aria-describedby": "dialog_desc", ...rest, children: _jsxs(ModalContent, { className: "sc-modal-content", children: [_jsx(ModalHeader, { className: "sc-modal-header", children: _jsxs(Wrap, { style: { flex: 1 }, children: [_jsx(Text, { variant: "Larger", id: "dialog_label", children: title }), close ? (_jsx(Button, { icon: _jsx(Icon, { name: "Close" }), onClick: close, tooltip: {
+                                        overlay: 'Close modal',
+                                    } })) : (_jsx(_Fragment, { children: subTitle }))] }) }), _jsx(ModalBody, { className: "sc-modal-body", id: "dialog_desc", children: children }), footer && (_jsx(ModalFooter, { className: "sc-modal-footer", children: footer }))] }) }), modalContainer.current)
+        : null;
+};
+export { Modal };

package/dist/components/multiselect/MultiSelect.component.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export type ItemProps = {
+    selected?: boolean;
+    label: string;
+    description?: string;
+    onSelect?: (arg0: any, arg1: any) => void;
+    onItemRemove?: (arg0: any, arg1: any) => void;
+};
+export type OptionProps = {
+    label: string;
+    value: string | number;
+};
+export type SearchProps = {
+    placeholder?: string;
+    options: Array<OptionProps>;
+    onSelect: (arg0: any) => void;
+    onAdd?: (arg0: any) => void;
+    selectedOption: any;
+};
+type MultiSelectProps = {
+    title?: string;
+    items: Array<ItemProps>;
+    search?: SearchProps;
+    onItemRemove?: (arg0: any, arg1: any) => void;
+};
+declare function MultiSelectList({ title, items, search, onItemRemove, }: MultiSelectProps): JSX.Element;
+export declare const MultiSelect: typeof MultiSelectList;
+export {};
+//# sourceMappingURL=MultiSelect.component.d.ts.map

package/dist/components/multiselect/MultiSelect.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/multiselect/MultiSelect.component.tsx"],"names":[],"mappings":";AASA,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/C,CAAC;AACF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE9B,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,cAAc,EAAE,GAAG,CAAC;CACrB,CAAC;AACF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/C,CAAC;AAqGF,iBAAS,eAAe,CAAC,EACvB,KAAU,EACV,KAAU,EACV,MAAM,EACN,YAAY,GACb,EAAE,gBAAgB,eAclB;AAED,eAAO,MAAM,WAAW,wBAAkB,CAAC"}

package/dist/components/multiselect/MultiSelect.component.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+import { Button } from './../button/Button.component';
+import { Checkbox } from './../checkbox/Checkbox.component';
+import { Select } from './../select/Select.component';
+const MultiSelectContainer = styled.div `
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const MultiSelectTitle = styled.h3 `
+  padding: ${spacing.r16} 0;
+  margin: 0;
+  font-weight: ${fontWeight.bold};
+  font-size: ${fontSize.large};
+`;
+const MultiSelectItemContainer = styled.div `
+  margin: ${spacing.r4} 0;
+  padding: ${spacing.r8} 0;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid gray;
+  &:last-child {
+    border: none;
+  }
+`;
+const MultiSelectSearchContainer = styled.div `
+  display: flex;
+  align-items: center;
+  .sc-select-container {
+    width: 100%;
+  }
+  .sc-button {
+    margin: 0 ${spacing.r8};
+  }
+`;
+const MultiSelectItemLeft = styled.div `
+  .sc-checkbox,
+  .sc-button {
+    margin: 0 ${spacing.r8};
+  }
+`;
+const MultiSelectItemCenter = styled.div `
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: space-between;
+`;
+const MultiSelectItemRight = styled.div `
+  padding: 0 ${spacing.r16};
+`;
+const MultiSelectItemLabel = styled.span `
+  font-size: ${fontSize.large};
+`;
+const MultiSelectItemDescription = styled.span ``;
+function MultiSelectItem(props) {
+    const { selected, label, description, onItemRemove, onSelect } = props;
+    return (_jsxs(MultiSelectItemContainer, { className: "sc-multi-select-item", children: [_jsx(MultiSelectItemLeft, { className: "sc-multi-select-item-left", children: typeof selected === 'boolean' && onSelect && (_jsx(Checkbox, { checked: selected, onChange: (event) => onSelect(label, event) })) }), _jsxs(MultiSelectItemCenter, { className: "sc-multi-select-item-center", children: [_jsx(MultiSelectItemLabel, { className: "sc-multi-select-item-label", children: label }), description && (_jsx(MultiSelectItemDescription, { className: "sc-multi-select-item-description", children: description }))] }), _jsx(MultiSelectItemRight, { className: "sc-multi-select-item-right", children: onItemRemove && (_jsx(Button, { inverted: true, variant: "buttonDelete", onClick: (event) => onItemRemove(label, event), icon: _jsx(Icon, { name: "Delete" }) })) })] }));
+}
+function MultiSelectSearch(props) {
+    const { selectedOption, onSelect, onAdd, ...rest } = props;
+    return (_jsxs(MultiSelectSearchContainer, { className: "sc-multi-select-list-search", children: [_jsx(Select
+            // @ts-ignore
+            , { 
+                // @ts-ignore
+                onChange: onSelect, value: selectedOption, ...rest }), onAdd && _jsx(Button, { onClick: onAdd, icon: _jsx(Icon, { name: "Create-add" }) })] }));
+}
+function MultiSelectList({ title = '', items = [], search, onItemRemove, }) {
+    return (_jsxs(MultiSelectContainer, { className: "sc-multi-select-list", children: [title && _jsx(MultiSelectTitle, { children: title }), search && _jsx(MultiSelectSearch, { ...search }), items.map((item, index) => (_jsx(MultiSelectItem, { onItemRemove: onItemRemove, ...item }, `sc-multi-select-item-${index}`)))] }));
+}
+export const MultiSelect = MultiSelectList;

package/dist/components/navbar/Navbar.component.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Item } from '../dropdown/Dropdown.component';
+type Action = {
+    type: string;
+    items?: Array<Item>;
+};
+type Actions = Array<Action>;
+type Tab = {
+    title?: string;
+    selected?: boolean;
+    onClick?: (arg0: any) => void;
+    link?: JSX.Element;
+};
+export type Props = {
+    onToggleClick?: () => void;
+    rightActions: Actions;
+    logo?: JSX.Element;
+    tabs?: Array<Tab>;
+};
+declare function NavBar({ onToggleClick, logo, tabs, rightActions, ...rest }: Props): JSX.Element;
+export declare const Navbar: typeof NavBar;
+export {};
+//# sourceMappingURL=Navbar.component.d.ts.map

package/dist/components/navbar/Navbar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAY,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAEhE,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AACF,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;AAoJF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,eAwDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}

package/dist/components/navbar/Navbar.component.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Logo } from '../../icons/branding';
+import { spacing } from '../../spacing';
+import { fontSize, navbarHeight, navbarItemWidth } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Button } from '../button/Button.component';
+import { Dropdown } from '../dropdown/Dropdown.component';
+import { Icon } from '../icon/Icon.component';
+const NavbarContainer = styled.div `
+  height: ${navbarHeight};
+  display: flex;
+  justify-content: space-between;
+  ${css `
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    color: ${getThemePropSelector('textPrimary')};
+    .fas,
+    .sc-trigger-text {
+      color: ${getThemePropSelector('textPrimary')};
+    }
+    border-bottom: ${spacing.r1} solid
+      ${getThemePropSelector('backgroundLevel1')};
+  `};
+`;
+const NavbarMenu = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const NavbarTabs = styled.div `
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  a {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    height: 100%;
+    padding: 0 ${spacing.r16};
+    border-bottom: ${spacing.r2} solid transparent;
+    border-top: ${spacing.r2} solid transparent;
+    ${(props) => {
+    const { selectedActive } = props.theme;
+    return css `
+        color: ${getThemePropSelector('textPrimary')};
+        &:hover {
+          background-color: ${getThemePropSelector('highlight')};
+        }
+        &.selected {
+          color: ${getThemePropSelector('textPrimary')};
+          font-weight: bold;
+          border-bottom-color: ${selectedActive};
+        }
+      `;
+}};
+  }
+`;
+const TabItem = styled.div `
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 ${spacing.r16};
+  ${(props) => {
+    const { textPrimary } = props.theme;
+    return css `
+      color: ${textPrimary};
+      &:hover {
+        border-bottom: ${spacing.r2} solid;
+        border-top: ${spacing.r2} solid;
+        cursor: pointer;
+      }
+    `;
+}};
+  ${(props) => props.selected &&
+    css `
+      border-top: ${spacing.r2} solid;
+      border-bottom: ${spacing.r2} solid;
+    `};
+`;
+const NavbarMenuItem = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .sc-dropdown {
+    .trigger {
+      background-color: ${getThemePropSelector('backgroundLevel1')};
+      &:hover {
+        background-color: ${getThemePropSelector('highlight')};
+      }
+      height: ${navbarHeight};
+      font-size: ${fontSize.base};
+    }
+    .menu-item {
+      max-height: unset;
+    }
+  }
+
+  .sc-button {
+    margin: 0;
+    border-radius: 0;
+    height: ${navbarHeight};
+    font-size: ${fontSize.base};
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    &:hover {
+      background-color: ${getThemePropSelector('highlight')};
+    }
+    width: ${navbarItemWidth};
+  }
+`;
+const LogoContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 ${spacing.r16};
+  svg {
+    width: 7.143rem;
+    height: 2.143rem;
+  }
+`;
+const getActionRenderer = ({ type, items = null, ...rest }, index) => {
+    if (type === 'dropdown') {
+        return items ? (_jsx(Dropdown, { size: "larger", variant: "backgroundLevel1", items: items, caret: false, ...rest }, `navbar_right_action_${index}`)) : null;
+    }
+    else if (type === 'button') {
+        return (_jsx(Button, { size: "larger", variant: "backgroundLevel1", ...rest }, `navbar_right_action_${index}`));
+    }
+    else if (type === 'custom') {
+        return _jsx(rest.render, {}, `navbar_right_action_${index}`);
+    }
+    return null;
+};
+function NavBar({ onToggleClick, logo, tabs = [], rightActions = [], ...rest }) {
+    return (_jsxs(NavbarContainer, { className: "sc-navbar", ...rest, children: [_jsxs(NavbarMenu, { children: [onToggleClick && (_jsx(NavbarMenuItem, { onClick: onToggleClick, children: _jsx(Button, { size: "larger", variant: "backgroundLevel1", icon: _jsx(Icon, { name: "Lat-menu" }), title: "Main Menu" }) })), _jsx(NavbarMenuItem, { children: _jsx(LogoContainer, { className: "sc-logo", children: logo ? logo : _jsx(Logo, {}) }) })] }), tabs.length ? (_jsx(NavbarTabs, { children: tabs.map(({ link, title, selected, onClick }, index) => {
+                    return link ? (React.cloneElement(link, {
+                        className: selected ? 'selected' : '',
+                        'aria-selected': selected,
+                        role: 'tab',
+                        key: `navbar_tab_item_${index}`,
+                    })) : (_jsx(TabItem, { onClick: onClick, role: "tab", selected: !!selected, "aria-selected": selected, children: _jsx("span", { children: title }) }, `navbar_tab_item_${index}`));
+                }) })) : null, rightActions.length ? (_jsx(NavbarMenu, { children: _jsx(NavbarMenuItem, { children: rightActions.map((action, index) => 
+                    //@ts-ignore too costly to type this one now
+                    getActionRenderer(action, index)) }) })) : null] }));
+}
+export const Navbar = NavBar;

package/dist/components/notifications/Notification.component.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Variant } from '../constants';
+export type Props = {
+    uid: string;
+    title: string;
+    message?: string;
+    variant?: Variant;
+    dismissAfter?: number;
+    onDismiss?: (arg0: string) => void;
+};
+declare function Notification({ uid, title, message, variant, dismissAfter, onDismiss, ...rest }: Props): JSX.Element;
+export { Notification };
+//# sourceMappingURL=Notification.component.d.ts.map

package/dist/components/notifications/Notification.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/notifications/Notification.component.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAkEF,iBAAS,YAAY,CAAC,EACpB,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eA8DP;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/notifications/Notification.component.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { darken } from 'polished';
+import { useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontWeight, grayDarkest, black, white, grayLightest, } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+const NotificationContainer = styled.div `
+  position: relative;
+  padding: ${spacing.r16};
+  margin-top: ${spacing.r16};
+  border-radius: 5px;
+  box-shadow: 0px 0px 3px ${grayDarkest};
+
+  ${(props) => {
+    var _a;
+    const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : 'backgroundLevel1';
+    const background = getThemePropSelector(variant)(props);
+    switch (props.variant) {
+        case 'warning':
+            return css `
+          background-color: ${background};
+          color: ${black};
+        `;
+        case undefined:
+            return css `
+          background-color: ${background};
+          color: ${props.theme.textPrimary};
+        `;
+        default:
+            return css `
+          background-color: ${background};
+          color: ${white};
+        `;
+    }
+}};
+`;
+const NotificationTitle = styled.div `
+  padding: 0 ${spacing.r16} ${spacing.r4} 0;
+  font-weight: ${fontWeight.bold};
+`;
+const NotificationDismissProgress = styled.div `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  border-radius: 5px;
+  ${(props) => {
+    const variant = props.variant || 'backgroundLevel1';
+    const background = getThemePropSelector(variant)(props);
+    const brandDark = darken(0.1, background);
+    return css `
+      background-color: ${brandDark};
+      width: ${(props.value / props.max) * 100}%;
+      transition: width 1s;
+      transition-timing-function: linear;
+    `;
+}};
+`;
+const NotificationClose = styled.div `
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  cursor: pointer;
+  &:hover {
+    color: ${grayLightest};
+  }
+`;
+function Notification({ uid, title, message, variant, dismissAfter, onDismiss, ...rest }) {
+    const [dismissProgress, setDismissProgress] = useState(0);
+    const [timerId, setTimerId] = useState(undefined);
+    const dismissProgressRef = useRef(dismissProgress);
+    dismissProgressRef.current = dismissProgress;
+    useEffect(() => {
+        resumeTimer();
+    });
+    const clearTimer = () => {
+        if (dismissAfter) {
+            setTimerId(undefined);
+            clearTimeout(timerId);
+        }
+    };
+    const resumeTimer = () => {
+        if (dismissAfter) {
+            if (dismissProgressRef.current === dismissAfter) {
+                dismiss();
+            }
+            else if (!timerId) {
+                setTimerId(
+                //@ts-ignore node typing detected here instead of Dom one
+                setTimeout(() => {
+                    setDismissProgress(dismissProgressRef.current + 1000);
+                    resumeTimer();
+                }, 1000));
+            }
+        }
+    };
+    const dismiss = () => {
+        if (timerId) {
+            clearTimer();
+        }
+        onDismiss && onDismiss(uid);
+    };
+    return (_jsxs(NotificationContainer, { className: "sc-notification", variant: variant, onMouseEnter: clearTimer, onMouseLeave: resumeTimer, ...rest, children: [_jsx(NotificationTitle, { children: title }), _jsx("div", { children: message }), !!dismissAfter && (_jsx(NotificationDismissProgress, { value: dismissProgress, max: dismissAfter, variant: variant })), _jsx(NotificationClose, { onClick: dismiss, children: _jsx(Icon, { name: "Close" }) })] }));
+}
+export { Notification };