@scality/core-ui 0.115.0

package/dist/components/emptystate/Emptystate.component.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconName } from '../icon/Icon.component';
+type Props = {
+    label: string;
+    icon: IconName;
+    link?: string;
+    history?: Record<string, any>;
+};
+export declare const EmptyStateRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ActionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare function EmptyState(props: Props): JSX.Element;
+export { EmptyState };
+//# sourceMappingURL=Emptystate.component.d.ts.map

package/dist/components/emptystate/Emptystate.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emptystate.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptystate/Emptystate.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/B,CAAC;AAaF,eAAO,MAAM,aAAa,yGAIzB,CAAC;AACF,eAAO,MAAM,aAAa,yGAGzB,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,eA6B/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/emptystate/Emptystate.component.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { LargeText } from '../text/Text.component';
+const EmptystateContainer = styled.div `
+  ${(props) => {
+    const brand = props.theme;
+    return css `
+      color: ${brand.textSecondary};
+    `;
+}}
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-top: 10%;
+`;
+export const EmptyStateRow = styled.div `
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: ${spacing.r24};
+`;
+export const ActionWrapper = styled.div `
+  display: flex;
+  justify-content: space-around;
+`;
+function EmptyState(props) {
+    const { icon, label, link, history } = props;
+    return (_jsxs(EmptystateContainer, { className: "sc-emptystate", children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children: _jsxs(LargeText, { children: ["A list of ", `${label}s`, " will appear here."] }) }), _jsx(EmptyStateRow, { children: _jsxs(LargeText, { children: ["There are no ", `${label}s`, " created yet, let's create your first", ' ', label, "."] }) }), history && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${label}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => history.push(link) }) }))] }));
+}
+export { EmptyState };

package/dist/components/emptytable/Emptytable.component.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+type Props = {
+    children: Node | React.ReactNode;
+    useDiv?: boolean;
+};
+declare function EmptyTable(props: Props): JSX.Element;
+export { EmptyTable };
+//# sourceMappingURL=Emptytable.component.d.ts.map

package/dist/components/emptytable/Emptytable.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emptytable.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptytable/Emptytable.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAuDF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,eAY/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/emptytable/Emptytable.component.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+const EmptytableContainer = styled.tr `
+  width: 100%;
+  padding: ${spacing.r20};
+  box-sizing: border-box;
+  display: table;
+  table-layout: fixed;
+
+  ${(props) => {
+    const brand = props.theme;
+    return css `
+      background: ${brand.backgroundLevel2};
+      border-top: 1px solid ${brand.border};
+    `;
+}}
+`;
+const EmptytableContainerDiv = styled.div `
+  width: 100%;
+  padding: ${spacing.r20};
+  box-sizing: border-box;
+  display: table;
+  table-layout: fixed;
+
+  ${(props) => {
+    const brand = props.theme;
+    return css `
+      background: ${brand.backgroundLevel2};
+      border-top: 1px solid ${brand.border};
+    `;
+}}
+`;
+// Using !important as the only way to prioritize this over the general tr td styling that may be defined in the apps
+const EmptytableContent = styled.td `
+  text-align: center !important;
+  border: none !important;
+  ${(props) => {
+    const brand = props.theme;
+    return css `
+      background: ${brand.backgroundLevel2};
+      color: ${brand.textSecondary};
+    `;
+}}
+`;
+const EmptytableContentDiv = styled.div `
+  text-align: center !important;
+  border: none !important;
+  ${(props) => {
+    const brand = props.theme;
+    return css `
+      background: ${brand.backgroundLevel2};
+      color: ${brand.textSecondary};
+    `;
+}}
+`;
+function EmptyTable(props) {
+    if (props.useDiv)
+        return (_jsx(EmptytableContainerDiv, { className: "sc-emptytable", children: _jsx(EmptytableContentDiv, { children: props.children }) }));
+    return (_jsx(EmptytableContainer, { className: "sc-emptytable", children: _jsx(EmptytableContent, { children: props.children }) }));
+}
+export { EmptyTable };

package/dist/components/error-pages/ErrorPage401.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    supportLink?: string;
+    locale?: string;
+    onReturnHomeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function ErrorPage401({ supportLink, locale, onReturnHomeClick, ...rest }: Props): JSX.Element;
+export { ErrorPage401 };
+//# sourceMappingURL=ErrorPage401.component.d.ts.map

package/dist/components/error-pages/ErrorPage401.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage401.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage401.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,WAAuB,EACvB,MAAa,EACb,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,eAoCP;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/error-pages/ErrorPage401.component.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorPageContainer, Row, Title, Description, DescriptionContent, Link, } from './ErrorPageStyle';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+const translations = {
+    en: {
+        unexpected_error: 'Not authorized',
+        error_desc: `You don't have permission to view this page using the credentials you have supplied.`,
+        may_also_contact: 'You can contact ',
+        to_report_issue: ' to report this issue.',
+        return_home: 'Return Home',
+    },
+    fr: {
+        unexpected_error: `Accès refusé`,
+        error_desc: `Les identifiants fournis ne vous permettent pas de consulter cette page.`,
+        may_also_contact: 'Vous pouvez contacter le ',
+        to_report_issue: ' pour signaler le problème.',
+        return_home: "Retour à l'accueil",
+    },
+};
+function ErrorPage401({ supportLink = undefined, locale = 'en', onReturnHomeClick, ...rest }) {
+    if (!translations[locale])
+        locale = 'en';
+    // Ensure the locale formatting is consistent
+    locale = locale.toLowerCase();
+    return (_jsxs(ErrorPageContainer, { className: "sc-error-page401", ...rest, children: [_jsxs(Row, { children: [_jsx(Icon, { name: "Exclamation-triangle", size: "2x", color: "statusWarning" }), _jsx(Title, { children: translations[locale].unexpected_error })] }), _jsx(Row, { children: _jsxs(Description, { children: [_jsx(DescriptionContent, { children: translations[locale].error_desc }), supportLink && (_jsxs(DescriptionContent, { children: [translations[locale].may_also_contact, _jsxs(Link, { href: supportLink, children: ["support ", _jsx(Icon, { name: "External-link" })] }), translations[locale].to_report_issue] }))] }) }), onReturnHomeClick && (_jsx(Button, { label: translations[locale].return_home, variant: "secondary", onClick: onReturnHomeClick }))] }));
+}
+export { ErrorPage401 };

package/dist/components/error-pages/ErrorPage404.component.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    locale?: string;
+    onReturnHomeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function ErrorPage404({ locale, onReturnHomeClick, ...rest }: Props): JSX.Element;
+export { ErrorPage404 };
+//# sourceMappingURL=ErrorPage404.component.d.ts.map

package/dist/components/error-pages/ErrorPage404.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage404.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage404.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,MAAa,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eA6BzE;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/error-pages/ErrorPage404.component.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorPageContainer, Row, Title, Description, DescriptionContent, } from './ErrorPageStyle';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+const translations = {
+    en: {
+        not_exist: 'Error: this page does not exist',
+        error_desc: 'It might be the wrong address or the page has moved.',
+        should_do: 'You might check the url, or contact your admin if the error remains.',
+        return_home: 'Return Home',
+    },
+    fr: {
+        not_exist: "Erreur: cette page n'existe pas",
+        error_desc: 'Il se peut que ce soit une mauvaise adresse ou que la page ait été déplacée.',
+        should_do: "Vous pouvez vérifier l'url, ou contacter votre administrateur si l'erreur persiste.",
+        return_home: "Retour à l'accueil",
+    },
+};
+function ErrorPage404({ locale = 'en', onReturnHomeClick, ...rest }) {
+    if (!translations[locale])
+        locale = 'en';
+    // Ensure the locale formatting is consistent
+    locale = locale.toLowerCase();
+    return (_jsxs(ErrorPageContainer, { className: "sc-error-page404", ...rest, children: [_jsxs(Row, { children: [_jsx(Icon, { name: "Exclamation-triangle", size: "2x", color: "statusWarning" }), _jsx(Title, { children: translations[locale].not_exist })] }), _jsx(Row, { children: _jsxs(Description, { children: [_jsx(DescriptionContent, { children: translations[locale].error_desc }), _jsx(DescriptionContent, { children: translations[locale].should_do })] }) }), onReturnHomeClick && (_jsx(Button, { label: translations[locale].return_home, variant: "secondary", onClick: onReturnHomeClick }))] }));
+}
+export { ErrorPage404 };

package/dist/components/error-pages/ErrorPage500.component.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type Props = {
+    supportLink?: string;
+    locale?: string;
+    onReturnHomeClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    errorMessage?: {
+        en: string;
+        fr: string;
+    };
+};
+declare function ErrorPage500({ supportLink, locale, onReturnHomeClick, errorMessage, ...rest }: Props): JSX.Element;
+export { ErrorPage500 };
+//# sourceMappingURL=ErrorPage500.component.d.ts.map

package/dist/components/error-pages/ErrorPage500.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage500.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPage500.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,WAAuB,EACvB,MAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,eAwCP;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/error-pages/ErrorPage500.component.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorPageContainer, Row, Title, Description, DescriptionContent, Link, } from './ErrorPageStyle';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+const translations = {
+    en: {
+        unexpected_error: 'Unexpected Error',
+        error_desc: 'An error occured and your request cannot be completed.',
+        should_do: 'You might check the url, or contact your admin if the error remains.',
+        return_home: 'Return Home',
+        may_also_contact: 'You may also contact ',
+        to_report_issue: ' to report this issue.',
+    },
+    fr: {
+        unexpected_error: 'Erreur inattendue',
+        error_desc: "Une erreur s'est produite et votre demande ne peut être complétée.",
+        should_do: "Vous pouvez vérifier l'url, ou contacter votre administrateur si l'erreur persiste.",
+        return_home: "Retour à l'accueil",
+        may_also_contact: 'Vous pouvez également contacter le ',
+        to_report_issue: ' pour signaler le problème.',
+    },
+};
+function ErrorPage500({ supportLink = undefined, locale = 'en', onReturnHomeClick, errorMessage, ...rest }) {
+    if (!translations[locale])
+        locale = 'en';
+    // Ensure the locale formatting is consistent
+    locale = locale.toLowerCase();
+    return (_jsxs(ErrorPageContainer, { className: "sc-error-page500", ...rest, children: [_jsxs(Row, { children: [_jsx(Icon, { name: "Exclamation-triangle", size: "2x", color: "statusWarning" }), _jsx(Title, { children: translations[locale].unexpected_error })] }), _jsx(Row, { children: _jsxs(Description, { children: [_jsx(DescriptionContent, { children: errorMessage
+                                ? errorMessage[locale]
+                                : translations[locale].error_desc }), _jsx(DescriptionContent, { children: translations[locale].should_do }), supportLink && (_jsxs(DescriptionContent, { children: [translations[locale].may_also_contact, _jsxs(Link, { href: supportLink, children: ["support ", _jsx(Icon, { name: "External-link" })] }), translations[locale].to_report_issue] }))] }) }), onReturnHomeClick && (_jsx(Button, { label: translations[locale].return_home, variant: "secondary", onClick: onReturnHomeClick }))] }));
+}
+export { ErrorPage500 };

package/dist/components/error-pages/ErrorPageAuth.component.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    supportLink?: string;
+    locale?: string;
+};
+declare function ErrorPageAuth({ supportLink, locale, ...rest }: Props): JSX.Element;
+export { ErrorPageAuth };
+//# sourceMappingURL=ErrorPageAuth.component.d.ts.map

package/dist/components/error-pages/ErrorPageAuth.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPageAuth.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPageAuth.component.tsx"],"names":[],"mappings":";AA2BA,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,iBAAS,aAAa,CAAC,EACrB,WAAuB,EACvB,MAAa,EACb,GAAG,IAAI,EACR,EAAE,KAAK,eA+BP;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/error-pages/ErrorPageAuth.component.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../icon/Icon.component';
+import { ErrorPageContainer, Row, Title, Description, DescriptionContent, Link, } from './ErrorPageStyle';
+const translations = {
+    en: {
+        unexpected_error: 'Authenticating...',
+        error_desc: 'The authentication is in progress.',
+        should_do: 'If this message persist please try refreshing your page.',
+        may_also_contact: 'You may also contact ',
+        to_report_issue: ' to report this issue.',
+    },
+    fr: {
+        unexpected_error: 'Authentification',
+        error_desc: 'Authentification en cours.',
+        should_do: "Si ce message persiste, vous pouvez essayer d'actualiser cette page.",
+        may_also_contact: 'Vous pouvez également contacter le ',
+        to_report_issue: ' pour signaler le problème.',
+    },
+};
+function ErrorPageAuth({ supportLink = undefined, locale = 'en', ...rest }) {
+    if (!translations[locale])
+        locale = 'en';
+    // Ensure the locale formatting is consistent
+    locale = locale.toLowerCase();
+    return (_jsxs(ErrorPageContainer, { className: "sc-error-pageauth", ...rest, children: [_jsxs(Row, { children: [_jsx(Icon, { name: "Info-circle", size: "2x", color: "textPrimary" }), _jsx(Title, { children: translations[locale].unexpected_error })] }), _jsx(Row, { children: _jsxs(Description, { children: [_jsx(DescriptionContent, { children: translations[locale].error_desc }), _jsx(DescriptionContent, { children: translations[locale].should_do }), supportLink && (_jsxs(DescriptionContent, { children: [translations[locale].may_also_contact, _jsxs(Link, { href: supportLink, children: ["support ", _jsx(Icon, { name: "External-link" })] }), translations[locale].to_report_issue] }))] }) })] }));
+}
+export { ErrorPageAuth };

package/dist/components/error-pages/ErrorPageStyle.d.ts

@@ -0,0 +1,7 @@
+export declare const ErrorPageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DescriptionContent: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const Row: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Link: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=ErrorPageStyle.d.ts.map

package/dist/components/error-pages/ErrorPageStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPageStyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/error-pages/ErrorPageStyle.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,yGAO9B,CAAC;AACF,eAAO,MAAM,KAAK,wGAIjB,CAAC;AACF,eAAO,MAAM,WAAW,yGAKvB,CAAC;AACF,eAAO,MAAM,kBAAkB,uGAG9B,CAAC;AACF,eAAO,MAAM,GAAG,yGAGf,CAAC;AACF,eAAO,MAAM,IAAI,uGAGhB,CAAC"}

package/dist/components/error-pages/ErrorPageStyle.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { spacing, fontSize } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+export const ErrorPageContainer = styled.div `
+  background-color: ${getThemePropSelector('backgroundLevel1')};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+export const Title = styled.h2 `
+  color: ${getThemePropSelector('textPrimary')};
+  margin: 0;
+  margin-left: ${spacing.sp20};
+`;
+export const Description = styled.div `
+  color: ${getThemePropSelector('textPrimary')};
+  font-size: ${fontSize.larger};
+  text-align: center;
+  padding: ${spacing.sp24};
+`;
+export const DescriptionContent = styled.p `
+  margin: 0;
+  padding: ${spacing.sp4};
+`;
+export const Row = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const Link = styled.a `
+  color: ${getThemePropSelector('textLink')};
+  text-decoration: none;
+`;

package/dist/components/form/Form.component.d.ts

@@ -0,0 +1,61 @@
+import React, { FormHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { IconName } from '../icon/Icon.component';
+declare const DESCRIPTION_PREFIX = "describe-";
+declare const LABEL_PREFIX = "label-";
+type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, 'noValidate' | 'formNoValidate'> & {
+    children: ReactNode | ReactNode[];
+    requireMode?: 'all' | 'partial';
+    leftActions?: ReactNode;
+    rightActions?: ReactNode;
+    banner?: ReactNode;
+};
+type PageFormProps = {
+    layout: {
+        kind: 'page';
+        title: string;
+        subTitle?: string;
+        icon?: IconName;
+    };
+} & FormProps;
+type TabFormProps = {
+    layout: {
+        kind: 'tab';
+    };
+} & FormProps;
+type ContentProps = {
+    helper: string;
+    error: string;
+};
+type FormGroupProps = {
+    label: string;
+    id: string;
+    content: ReactElement<ContentProps>;
+    direction?: 'vertical' | 'horizontal';
+    labelHelpTooltip?: ReactNode;
+    help?: string;
+    error?: string;
+    required?: boolean;
+    helpErrorPosition?: 'right' | 'bottom';
+    disabled?: boolean;
+};
+declare const FormGroup: ({ direction, label, id, labelHelpTooltip, content, help, error, required, helpErrorPosition, disabled, }: FormGroupProps) => JSX.Element;
+type FormSectionProps = {
+    children: ReactElement<FormGroupProps> | ReactElement<FormGroupProps>[];
+    title?: {
+        name: string;
+        icon?: IconName;
+        helpTooltip?: string;
+    };
+    forceLabelWidth?: number;
+    rightActions?: ReactNode;
+};
+declare const FormSection: ({ children, title, forceLabelWidth, rightActions, }: FormSectionProps) => JSX.Element;
+declare const Form: React.ForwardRefExoticComponent<(PageFormProps | TabFormProps) & React.RefAttributes<HTMLFormElement>>;
+declare const useFieldContext: () => {
+    isContextAvailable: boolean;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+};
+export { Form, FormSection, FormGroup, useFieldContext, DESCRIPTION_PREFIX, LABEL_PREFIX, };
+//# sourceMappingURL=Form.component.d.ts.map

package/dist/components/form/Form.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/form/Form.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,kBAAkB,EAGlB,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAKxD,QAAA,MAAM,kBAAkB,cAAc,CAAC;AACvC,QAAA,MAAM,YAAY,WAAW,CAAC;AAG9B,KAAK,SAAS,GAAG,IAAI,CACnB,kBAAkB,CAAC,eAAe,CAAC,EACnC,YAAY,GAAG,gBAAgB,CAChC,GAAG;IACF,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;KACjB,CAAC;CACH,GAAG,SAAS,CAAC;AACd,KAAK,YAAY,GAAG;IAAE,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAA;CAAE,GAAG,SAAS,CAAC;AAyD5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,SAAS,6GAWZ,cAAc,gBAsGhB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;IACxE,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,WAAW,wDAKd,gBAAgB,gBAmClB,CAAC;AAgGF,QAAA,MAAM,IAAI,wGAYT,CAAC;AASF,QAAA,MAAM,eAAe;;;;;CAOpB,CAAC;AAEF,OAAO,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,CAAC"}

package/dist/components/form/Form.component.js

@@ -0,0 +1,115 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, createContext, forwardRef, isValidElement, useContext, useEffect, useRef, useState, } from 'react';
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { convertRemToPixels } from '../../utils';
+import { Box } from '../box/Box';
+import { Icon } from '../icon/Icon.component';
+import { IconHelp } from '../IconHelper';
+import { ScrollbarWrapper } from '../scrollbarwrapper/ScrollbarWrapper.component';
+import { Text } from '../text/Text.component';
+const DESCRIPTION_PREFIX = 'describe-';
+const LABEL_PREFIX = 'label-';
+const maxWidthTooltip = { maxWidth: '20rem' };
+const StyledForm = styled.form `
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+  background-color: ${(props) => props.layout.kind === 'page' && props.theme.backgroundLevel4};
+`;
+const BasicPageLayout = styled.div `
+  margin: 0 auto;
+  ${(props) => props.layoutKind === 'page'
+    ? `
+  width: 45rem;
+  padding-right: ${spacing.f16};
+  `
+    : `
+  width: 100%;
+  padding-bottom: ${spacing.r24};`}
+`;
+const FixedHeader = styled(BasicPageLayout) `
+  ${(props) => props.layoutKind === 'page'
+    ? `
+  border-bottom: 1px solid ${props.theme.border};
+  `
+    : ``}
+`;
+const FixedFooter = styled(BasicPageLayout) `
+  border-top: 1px solid ${(props) => props.theme.border};
+`;
+const PaddedContent = styled.div `
+  padding: ${spacing.f16} 0 ${spacing.f16} ${spacing.f16};
+`;
+const PaddedForHeaderAndFooterContent = styled.div `
+  padding: ${spacing.f16};
+`;
+const ScrollArea = styled(BasicPageLayout) `
+  flex-grow: 1;
+  align-self: stretch;
+  overflow-y: auto;
+`;
+const LabelContext = createContext(null);
+const RequireModeContext = createContext('partial');
+const FormGroup = ({ direction = 'horizontal', label, id, labelHelpTooltip, content, help, error, required, helpErrorPosition = 'right', disabled, }) => {
+    const ctxt = useContext(LabelContext);
+    if (!ctxt) {
+        //intentionaly breaking rules of hooks here
+        throw new Error('FormGroup cannot be used outside of Form');
+    }
+    const { maxLabelWidth, setMaxLabelWidth } = ctxt;
+    const requireMode = useContext(RequireModeContext);
+    const labelRef = useRef(null);
+    useEffect(() => {
+        if (labelRef.current) {
+            const width = labelRef.current.getBoundingClientRect().width;
+            setMaxLabelWidth((currentMaxLabelWidth) => {
+                const additionalWdth = labelHelpTooltip ? convertRemToPixels(2) : 0;
+                if (width + additionalWdth > currentMaxLabelWidth) {
+                    return width + additionalWdth;
+                }
+                return currentMaxLabelWidth;
+            });
+        }
+    }, [labelRef]);
+    const value = {
+        disabled: disabled || false,
+        error: error || undefined,
+    };
+    return (_jsx(FieldContext.Provider, { value: value, children: _jsxs(Box, { display: "flex", flexDirection: direction === 'horizontal' ? 'row' : 'column', alignItems: "baseline", gap: direction === 'horizontal' ? spacing['r32'] : spacing['r4'], children: [_jsx("div", { style: {
+                        width: maxLabelWidth === 0 ? 'max-content' : `${maxLabelWidth}px`,
+                        flex: 'none',
+                    }, children: _jsxs(Stack, { children: [_jsx("label", { htmlFor: id, id: `${LABEL_PREFIX}${id}`, ref: labelRef, style: { opacity: disabled ? 0.5 : 1 }, children: _jsxs(Text, { children: [label, requireMode !== 'all' && required && ' *', requireMode === 'all' && !required && ' (optional)'] }) }), labelHelpTooltip && (_jsx(IconHelp, { tooltipMessage: labelHelpTooltip, overlayStyle: maxWidthTooltip }))] }) }), _jsxs(Stack, { direction: helpErrorPosition === 'right' ? 'horizontal' : 'vertical', gap: helpErrorPosition === 'right' ? 'r8' : 'r4', children: [content, error ? (_jsx(Text, { variant: "Smaller", color: "statusCritical", isEmphazed: true, id: `${DESCRIPTION_PREFIX}${id}`, children: error })) : help ? (_jsx("div", { style: {
+                                opacity: disabled ? 0.5 : 1,
+                            }, children: _jsx(Text, { variant: "Smaller", color: "textSecondary", isEmphazed: true, id: `${DESCRIPTION_PREFIX}${id}`, children: help }) })) : (_jsx(Text, { variant: "Smaller", isEmphazed: true, children: "\u00A0" }))] })] }) }));
+};
+const FormSection = ({ children, title, forceLabelWidth, rightActions, }) => {
+    const [maxLabelWidth, setMaxLabelWidth] = useState(forceLabelWidth || 0);
+    //If all the formgroup are not required, add `(optional)` next to form section title.
+    const groupNotOptional = Children.toArray(children).find((child) => isValidElement(child) ? child.props.required === true : false);
+    return (_jsx(LabelContext.Provider, { value: { maxLabelWidth, setMaxLabelWidth }, children: _jsxs(Stack, { direction: "vertical", gap: "r12", children: [title && (_jsxs(Wrap, { children: [_jsxs(Stack, { direction: "horizontal", gap: "r8", children: [title.icon && _jsx(Icon, { name: title.icon, color: "textPrimary" }), _jsx(Text, { isEmphazed: true, children: groupNotOptional
+                                        ? `${title.name}`
+                                        : `${title.name} (optional)` }), title.helpTooltip && (_jsx(IconHelp, { tooltipMessage: title.helpTooltip, overlayStyle: maxWidthTooltip }))] }), _jsx("div", { children: rightActions })] })), children] }) }));
+};
+const PageForm = forwardRef(({ layout, leftActions, rightActions, children, banner, ...formProps }, ref) => {
+    const requireMode = useContext(RequireModeContext);
+    return (_jsx(ScrollbarWrapper, { children: _jsxs(StyledForm, { ...formProps, noValidate: true, ref: ref, layout: layout, children: [_jsx(FixedHeader, { layoutKind: "page", children: _jsx(PaddedForHeaderAndFooterContent, { children: _jsxs(Wrap, { children: [_jsxs(Stack, { direction: "vertical", children: [_jsxs(Text, { variant: "Larger", children: [layout.icon && (_jsx(Icon, { name: layout.icon, color: "textSecondary" })), ' ', layout.title] }), layout.subTitle && (_jsx(Text, { variant: "Large", isEmphazed: true, children: layout.subTitle }))] }), requireMode === 'partial' && (_jsx(Text, { color: "textSecondary", variant: "Smaller", style: { alignSelf: 'flex-end' }, isGentleEmphazed: true, children: "* are required fields" }))] }) }) }), _jsx(ScrollArea, { layoutKind: "page", children: _jsxs(PaddedContent, { children: [_jsx("div", { style: {
+                                    paddingBottom: `${spacing.r16}`,
+                                }, children: banner }), _jsx(Stack, { direction: "vertical", withSeparators: true, gap: "r24", children: Children.toArray(children) })] }) }), _jsx(FixedFooter, { layoutKind: "page", children: _jsx(PaddedForHeaderAndFooterContent, { children: _jsxs(Wrap, { children: [_jsx("div", { children: leftActions }), _jsx("div", { children: rightActions })] }) }) })] }) }));
+});
+const TabForm = forwardRef(({ leftActions, rightActions, children, banner, ...formProps }, ref) => {
+    return (_jsx(ScrollbarWrapper, { children: _jsxs(StyledForm, { ...formProps, noValidate: true, ref: ref, children: [_jsx(FixedHeader, { layoutKind: "tab", children: _jsxs(Wrap, { children: [_jsx("div", { children: leftActions }), _jsx("div", { children: rightActions })] }) }), _jsx(ScrollArea, { layoutKind: "tab", children: _jsxs(Stack, { direction: "vertical", gap: "r24", children: [banner, _jsx(Stack, { direction: "vertical", withSeparators: true, gap: "r24", children: Children.toArray(children) })] }) })] }) }));
+});
+const Form = forwardRef(({ layout, requireMode, ...formProps }, ref) => {
+    return (_jsx(RequireModeContext.Provider, { value: requireMode || 'partial', children: layout.kind === 'page' ? (_jsx(PageForm, { layout: layout, ...formProps, ref: ref })) : (_jsx(TabForm, { layout: layout, ...formProps, ref: ref })) }));
+});
+const FieldContext = createContext(null);
+const useFieldContext = () => {
+    const fieldContext = useContext(FieldContext);
+    if (!fieldContext) {
+        return { isContextAvailable: false };
+    }
+    return { ...fieldContext, isContextAvailable: true };
+};
+export { Form, FormSection, FormGroup, useFieldContext, DESCRIPTION_PREFIX, LABEL_PREFIX, };

package/dist/components/globalhealthbar/GlobalHealthBar.component.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const TOP = "top";
+export declare const BOTTOM = "bottom";
+type Position = typeof TOP | typeof BOTTOM;
+export type GlobalHealthProps = {
+    id: string;
+    alerts: {
+        description: string;
+        startsAt: string;
+        endsAt: string;
+        severity: string;
+    }[];
+    start: string;
+    end: string;
+    height?: number;
+    tooltipPosition?: Position;
+};
+declare function GlobalHealthBar({ id, alerts, start, end, height, tooltipPosition, }: GlobalHealthProps): JSX.Element;
+export { GlobalHealthBar };
+//# sourceMappingURL=GlobalHealthBar.component.d.ts.map

package/dist/components/globalhealthbar/GlobalHealthBar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHealthBar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/GlobalHealthBar.component.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE;QACN,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,EAAE,EACF,MAAM,EACN,KAAK,EACL,GAAG,EACH,MAAU,EACV,eAAqB,GACtB,EAAE,iBAAiB,eAyKnB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}