@scality/core-ui 0.199.0 → 0.201.0

package/dist/components/buttonv2/Buttonv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,0DAA0D;AAC1D,KAAK,iBAAiB,GAAG,IAAI,CAC3B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wDAAwD;AACxD,KAAK,eAAe,GAAG,iBAAiB,GAAG;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC1C,CAAC;AAEF,+EAA+E;AAC/E,KAAK,cAAc,GAAG,iBAAiB,GAAG;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GAAG,CACA;IACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GACD;IACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;CACtB,CACJ,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,eAAe,GAAG,cAAc,CAAC;AACrD,eAAO,MAAM,YAAY,2HA0KxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CA2CP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAKlD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,0DAA0D;AAC1D,KAAK,iBAAiB,GAAG,IAAI,CAC3B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wDAAwD;AACxD,KAAK,eAAe,GAAG,iBAAiB,GAAG;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC1C,CAAC;AAEF,+EAA+E;AAC/E,KAAK,cAAc,GAAG,iBAAiB,GAAG;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GAAG,CACA;IACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GACD;IACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC;CACtB,CACJ,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,eAAe,GAAG,cAAc,CAAC;AACrD,eAAO,MAAM,YAAY,2HA4KxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CA2CP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/buttonv2/Buttonv2.component.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
+import { getContrastText } from '../../utils';
 import { Loader } from '../loader/Loader.component';
 import { Tooltip } from '../tooltip/Tooltip.component';
 export const FocusVisibleStyle = css `
@@ -31,31 +32,34 @@ export const ButtonStyled = styled.button `
   white-space: nowrap;
   height: ${(props) => (props.size === 'inline' ? spacing.r24 : spacing.r32)};
   ${(props) => {
+    var _a;
     const brand = props.theme;
     switch (props.variant) {
-        case 'primary':
+        case 'primary': {
+            const primaryTextColor = (_a = getContrastText(brand.buttonPrimary, brand.textPrimary, brand.textReverse)) !== null && _a !== void 0 ? _a : brand.textPrimary;
             return css `
           background: ${brand.buttonPrimary};
           background-clip: padding-box, border-box;
           border: ${spacing.r1} solid transparent;
           border-color: ${brand.buttonPrimary};
-          color: ${brand.textPrimary};
+          color: ${primaryTextColor};
           &:hover:enabled {
             cursor: pointer;
             border: ${spacing.r1} solid ${brand.infoPrimary};
-            color: ${brand.textPrimary};
+            color: ${primaryTextColor};
           }
           // :focus-visible is the keyboard-only version of :focus
           &:focus-visible:enabled {
             ${FocusVisibleStyle}
-            color: ${brand.textPrimary};
+            color: ${primaryTextColor};
           }
           &:active:enabled {
             cursor: pointer;
-            color: ${brand.textPrimary};
+            color: ${primaryTextColor};
             border: ${spacing.r1} solid ${brand.infoSecondary};
           }
         `;
+        }
         case 'secondary':
             return css `
           background: ${brand.buttonSecondary};

package/dist/components/buttonv2/CopyButton.component.d.ts

@@ -1,4 +1,4 @@
-import { Props } from './Buttonv2.component';
+import { type Props } from './Buttonv2.component';
 export declare const COPY_STATE_IDLE = "idle";
 export declare const COPY_STATE_SUCCESS = "success";
 export declare const COPY_STATE_UNSUPPORTED = "unsupported";

package/dist/components/buttonv2/CopyButton.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/CopyButton.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,eAAe,SAAS,CAAC;AACtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAC5C,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,YAAY;iBASQ,MAAM,WAAW,OAAO;;CAoCxD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,sDAMxB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAAC,4CA+CnC,CAAC"}
+{"version":3,"file":"CopyButton.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/CopyButton.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE1D,eAAO,MAAM,eAAe,SAAS,CAAC;AACtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAC5C,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AACpD,eAAO,MAAM,YAAY;iBAUQ,MAAM,WAAW,OAAO;;CA0CxD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,sDAMxB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAAC,4CA+CnC,CAAC"}

package/dist/components/buttonv2/CopyButton.component.js

@@ -8,6 +8,8 @@ export const COPY_STATE_UNSUPPORTED = 'unsupported';
 export const useClipboard = () => {
     const [copyStatus, setCopyStatus] = useState(COPY_STATE_IDLE);
     useEffect(() => {
+        if (copyStatus === COPY_STATE_IDLE)
+            return;
         const timer = setTimeout(() => {
             setCopyStatus(COPY_STATE_IDLE);
         }, 2000);
@@ -38,8 +40,14 @@ export const useClipboard = () => {
         }
         else {
             // Copy as plain text only
-            navigator.clipboard.writeText(text);
-            setCopyStatus(COPY_STATE_SUCCESS);
+            navigator.clipboard
+                .writeText(text)
+                .then(() => {
+                setCopyStatus(COPY_STATE_SUCCESS);
+            })
+                .catch(() => {
+                setCopyStatus(COPY_STATE_UNSUPPORTED);
+            });
         }
     };
     return {
@@ -49,24 +57,26 @@ export const useClipboard = () => {
 };
 export const CopyButton = ({ label, textToCopy, copyAsHtml, variant, ...props }) => {
     const { copy, copyStatus } = useClipboard();
+    const isSuccess = copyStatus === COPY_STATE_SUCCESS;
     return (_jsx(Button, { ...props, variant: variant === 'outline' ? 'outline' : undefined, style: {
-            minWidth: 
-            //Just to make sure the width of the button stays the same when copied!
-            variant === 'outline'
-                ? (label ? label.length / 2 : 0) + 7 + 'rem'
+            ...props.style,
+            ...(isSuccess && { cursor: 'not-allowed', opacity: 0.5 }),
+            minWidth: variant === 'outline'
+                ? `${(label ? label.length / 2 : 0) + 7}rem`
                 : undefined,
         }, label: variant === 'outline'
-            ? copyStatus === COPY_STATE_SUCCESS
-                ? `Copied${label ? ' ' + label + '' : ''}!`
-                : `Copy${label ? ' ' + label : ''}`
-            : undefined, icon: _jsx(Icon, { name: copyStatus === COPY_STATE_SUCCESS ? 'Check' : 'Copy', color: copyStatus === COPY_STATE_SUCCESS ? 'statusHealthy' : undefined }), disabled: copyStatus === COPY_STATE_SUCCESS || props.disabled, onClick: () => copy(textToCopy, copyAsHtml), type: "button", tooltip: variant !== 'outline'
+            ? isSuccess
+                ? `Copied${label ? ` ${label}` : ''}!`
+                : `Copy${label ? ` ${label}` : ''}`
+            : undefined, icon: _jsx(Icon, { name: isSuccess ? 'Check' : 'Copy', color: isSuccess ? 'statusHealthy' : undefined }), disabled: props.disabled, "aria-disabled": isSuccess || props.disabled, onClick: () => {
+            if (!isSuccess)
+                copy(textToCopy, copyAsHtml);
+        }, type: "button", tooltip: variant !== 'outline'
             ? {
-                overlay: copyStatus === COPY_STATE_SUCCESS
+                overlay: isSuccess
                     ? 'Copied !'
-                    : `Copy${label ? ' ' + label : ''}`,
-                overlayStyle: {
-                    maxWidth: '20rem',
-                },
+                    : `Copy${label ? ` ${label}` : ''}`,
+                overlayStyle: { maxWidth: '20rem' },
                 placement: 'top',
             }
             : undefined }));

package/dist/components/editor/Editor.component.d.ts

@@ -0,0 +1,17 @@
+import type { Extension } from '@codemirror/state';
+import type { JSONSchema7 } from 'json-schema';
+export declare function isEditAttempt(e: KeyboardEvent): boolean;
+export declare function createReadOnlyTooltipExtension(): Extension;
+export interface EditorProps {
+    value: string;
+    onChange?: (value: string) => void;
+    readOnly?: boolean;
+    language?: 'json' | {
+        name: 'json';
+        schema?: JSONSchema7;
+    };
+    height?: string;
+    width?: string;
+}
+export declare const Editor: ({ value, onChange, readOnly, language, height, width, }: EditorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Editor.component.d.ts.map

package/dist/components/editor/Editor.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/editor/Editor.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ/C,wBAAgB,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAIvD;AAED,wBAAgB,8BAA8B,IAAI,SAAS,CA4E1D;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,GAAI,yDAOpB,WAAW,4CAiDb,CAAC"}

package/dist/components/editor/Editor.component.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { json } from '@codemirror/lang-json';
+import { ViewPlugin } from '@codemirror/view';
+import CodeMirror from '@uiw/react-codemirror';
+import { jsonSchema as jsonSchemaExtension } from 'codemirror-json-schema';
+import { useMemo, useRef } from 'react';
+import { useTheme } from 'styled-components';
+import { createEditorTheme } from './editorTheme';
+const EDIT_KEYS = new Set(['Backspace', 'Delete', 'Enter', 'Tab']);
+export function isEditAttempt(e) {
+    const isTyping = !e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1;
+    const isCutPaste = (e.ctrlKey || e.metaKey) && (e.key === 'x' || e.key === 'v');
+    return isTyping || EDIT_KEYS.has(e.key) || isCutPaste;
+}
+export function createReadOnlyTooltipExtension() {
+    return ViewPlugin.define((view) => {
+        let tooltip = null;
+        let hideTimer = null;
+        let wrapper = null;
+        const dismiss = () => {
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.remove();
+            tooltip = null;
+            if (hideTimer)
+                clearTimeout(hideTimer);
+            hideTimer = null;
+        };
+        const show = () => {
+            var _a, _b, _c;
+            if (hideTimer)
+                clearTimeout(hideTimer);
+            const head = view.state.selection.main.head;
+            const coords = view.coordsAtPos(head);
+            if (!coords)
+                return;
+            if (!wrapper) {
+                wrapper = document.createElement('div');
+                Object.assign(wrapper.style, {
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                    overflow: 'visible',
+                    zIndex: '100',
+                });
+                (_a = view.dom.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(wrapper);
+            }
+            const parentRect = (_c = (_b = wrapper.offsetParent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) !== null && _c !== void 0 ? _c : view.dom.getBoundingClientRect();
+            if (!tooltip) {
+                tooltip = document.createElement('div');
+                tooltip.className = 'cm-readonly-tooltip';
+                tooltip.textContent = 'Cannot edit in read-only editor';
+                tooltip.setAttribute('role', 'status');
+                tooltip.setAttribute('aria-live', 'polite');
+                Object.assign(tooltip.style, {
+                    position: 'absolute',
+                    padding: '4px 12px',
+                    borderRadius: '4px',
+                    fontSize: '12px',
+                    pointerEvents: 'none',
+                    whiteSpace: 'nowrap',
+                });
+                wrapper.appendChild(tooltip);
+            }
+            tooltip.style.left = `${coords.left - parentRect.left}px`;
+            tooltip.style.top = `${coords.bottom - parentRect.top + 4}px`;
+            hideTimer = setTimeout(dismiss, 2000);
+        };
+        const handler = (e) => {
+            if (isEditAttempt(e))
+                show();
+        };
+        view.dom.addEventListener('keydown', handler, true);
+        return {
+            destroy() {
+                view.dom.removeEventListener('keydown', handler, true);
+                dismiss();
+                wrapper === null || wrapper === void 0 ? void 0 : wrapper.remove();
+            },
+        };
+    });
+}
+export const Editor = ({ value, onChange, readOnly = false, language = 'json', height = '400px', width = '100%', }) => {
+    const theme = useTheme();
+    const editorTheme = useMemo(() => createEditorTheme(theme), [theme]);
+    const langName = typeof language === 'string' ? language : language.name;
+    const schema = typeof language === 'object' ? language.schema : undefined;
+    const readOnlyTooltipExt = useRef(null);
+    if (!readOnlyTooltipExt.current) {
+        readOnlyTooltipExt.current = createReadOnlyTooltipExtension();
+    }
+    const extensions = useMemo(() => {
+        const exts = [];
+        if (langName === 'json') {
+            if (schema) {
+                exts.push(...jsonSchemaExtension(schema));
+            }
+            else {
+                exts.push(json());
+            }
+        }
+        if (readOnly) {
+            exts.push(readOnlyTooltipExt.current);
+        }
+        return exts;
+    }, [langName, schema, readOnly]);
+    return (_jsx(CodeMirror, { value: value, height: height, width: width, extensions: extensions, onChange: onChange, readOnly: readOnly, theme: editorTheme, basicSetup: {
+            lineNumbers: true,
+            foldGutter: true,
+            autocompletion: true,
+            highlightActiveLine: true,
+            highlightActiveLineGutter: true,
+            indentOnInput: true,
+            bracketMatching: true,
+            closeBrackets: true,
+        } }));
+};

package/dist/components/editor/editorTheme.d.ts

@@ -0,0 +1,5 @@
+import type { Extension } from '@codemirror/state';
+import type { CoreUITheme } from '../../style/theme';
+export declare function isDarkBackground(theme: CoreUITheme): boolean;
+export declare function createEditorTheme(theme: CoreUITheme): Extension;
+//# sourceMappingURL=editorTheme.d.ts.map

package/dist/components/editor/editorTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../../src/lib/components/editor/editorTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAM5D;AAyBD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,CAsF/D"}

package/dist/components/editor/editorTheme.js

@@ -0,0 +1,115 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import { getLuminance } from 'polished';
+import { lineColor5 } from '../../style/theme';
+export function isDarkBackground(theme) {
+    try {
+        return getLuminance(theme.backgroundLevel1) < 0.5;
+    }
+    catch {
+        return true;
+    }
+}
+function getSyntaxColors(theme, isDark) {
+    if (isDark) {
+        return {
+            property: theme.statusHealthy,
+            string: lineColor5,
+            number: lineColor5,
+            boolean: lineColor5,
+            null: theme.textSecondary,
+            bracket: theme.textPrimary,
+            punctuation: theme.textPrimary,
+        };
+    }
+    return {
+        property: '#4078F2',
+        string: '#50A14F',
+        number: '#986801',
+        boolean: '#0184BC',
+        null: '#0184BC',
+        bracket: '#383A42',
+        punctuation: '#383A42',
+    };
+}
+export function createEditorTheme(theme) {
+    const isDark = isDarkBackground(theme);
+    const syntax = getSyntaxColors(theme, isDark);
+    const editorViewTheme = EditorView.theme({
+        '&': {
+            backgroundColor: theme.backgroundLevel1,
+            color: theme.textPrimary,
+        },
+        '.cm-content': {
+            caretColor: theme.textPrimary,
+            fontFamily: "'Courier New', monospace",
+            fontSize: '12px',
+        },
+        '.cm-cursor, .cm-dropCursor': {
+            borderLeftColor: theme.textPrimary,
+        },
+        '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+            backgroundColor: theme.highlight,
+        },
+        '.cm-gutters': {
+            backgroundColor: theme.backgroundLevel1,
+            color: theme.textSecondary,
+            border: 'none',
+            borderRight: `1px solid ${theme.border}`,
+        },
+        '.cm-activeLineGutter': {
+            backgroundColor: theme.backgroundLevel3,
+        },
+        '.cm-activeLine': {
+            backgroundColor: theme.backgroundLevel3,
+        },
+        '.cm-foldPlaceholder': {
+            backgroundColor: 'transparent',
+            border: 'none',
+            color: theme.textSecondary,
+        },
+        '.cm-diagnostic-error': {
+            borderLeftColor: theme.statusCritical,
+        },
+        '.cm-diagnostic-warning': {
+            borderLeftColor: theme.statusWarning,
+        },
+        '.cm-lintRange-error': {
+            backgroundImage: 'none',
+            textDecoration: `underline wavy ${theme.statusCritical}`,
+        },
+        '.cm-lintRange-warning': {
+            backgroundImage: 'none',
+            textDecoration: `underline wavy ${theme.statusWarning}`,
+        },
+        '.cm-tooltip': {
+            backgroundColor: theme.backgroundLevel3,
+            color: theme.textPrimary,
+            border: `1px solid ${theme.border}`,
+        },
+        '.cm-tooltip-lint': {
+            backgroundColor: theme.backgroundLevel3,
+        },
+        '.cm-panels': {
+            backgroundColor: theme.backgroundLevel4,
+            color: theme.textPrimary,
+        },
+        '.cm-readonly-tooltip': {
+            backgroundColor: theme.backgroundLevel3,
+            color: theme.textPrimary,
+            border: `1px solid ${theme.border}`,
+        },
+    }, { dark: isDark });
+    const highlightStyle = HighlightStyle.define([
+        { tag: tags.propertyName, color: syntax.property },
+        { tag: tags.string, color: syntax.string },
+        { tag: tags.number, color: syntax.number },
+        { tag: tags.bool, color: syntax.boolean },
+        { tag: tags.null, color: syntax.null },
+        { tag: tags.punctuation, color: syntax.punctuation },
+        { tag: tags.brace, color: syntax.bracket },
+        { tag: tags.squareBracket, color: syntax.bracket },
+    ]);
+    return [editorViewTheme, syntaxHighlighting(highlightStyle)];
+}

package/dist/components/editor/index.d.ts

@@ -0,0 +1,3 @@
+export { Editor } from './Editor.component';
+export type { EditorProps } from './Editor.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/editor/index.js

@@ -0,0 +1 @@
+export { Editor } from './Editor.component';

package/dist/components/iconhelper/IconHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconHelper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/iconhelper/IconHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,QAAQ,EAAW,MAAM,8BAA8B,CAAC;AAEjE,KAAK,aAAa,GAAG;IACnB,cAAc,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoBF,eAAO,MAAM,QAAQ,GAAI,8EAMtB,aAAa,4CAaf,CAAC"}
+{"version":3,"file":"IconHelper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/iconhelper/IconHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,QAAQ,EAAW,MAAM,8BAA8B,CAAC;AAEjE,KAAK,aAAa,GAAG;IACnB,cAAc,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmBF,eAAO,MAAM,QAAQ,GAAI,8EAMtB,aAAa,4CAaf,CAAC"}

package/dist/components/iconhelper/IconHelper.js

@@ -8,7 +8,6 @@ const HelpButton = styled.button `
   border: none;
   padding: 0;
   margin: 0;
-  cursor: pointer;
   color: inherit;
   font: inherit;              /* Inherit font sizing */
   vertical-align: text-bottom;     /* Align with text */

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

@@ -1 +1 @@
-{"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAA6B,KAAK,KAAK,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAEtG,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,CAAC;CAChB,GAAG,WAAW,CAAC;AAChB,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,KAAK,MAAM,GAAG,cAAc,GAAG,YAAY,GAAG,YAAY,CAAC;AAC3D,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;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,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;AAmKF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,2CAuDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}
+{"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAA6B,KAAK,KAAK,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAEtG,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,CAAC;CAChB,GAAG,WAAW,CAAC;AAChB,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,KAAK,MAAM,GAAG,cAAc,GAAG,YAAY,GAAG,YAAY,CAAC;AAC3D,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;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,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;AAwKF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,2CAuDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}

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

@@ -4,20 +4,21 @@ 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 { getContrastText, getThemePropSelector } from '../../utils';
 import { Dropdown } from '../dropdown/Dropdown.component';
 import { Icon } from '../icon/Icon.component';
 import { Button, FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+const getNavbarTextColor = (props) => { var _a; return (_a = getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse)) !== null && _a !== void 0 ? _a : props.theme.textPrimary; };
 const NavbarContainer = styled.div `
   height: ${navbarHeight};
   display: flex;
   justify-content: space-between;
   ${css `
     background-color: ${getThemePropSelector('navbarBackground')};
-    color: ${getThemePropSelector('textPrimary')};
+    color: ${getNavbarTextColor};
     .fas,
     .sc-trigger-text {
-      color: ${getThemePropSelector('textPrimary')};
+      color: ${getNavbarTextColor};
     }
     box-sizing: border-box;
     border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel2};
@@ -45,21 +46,23 @@ const NavbarTabs = styled.div `
     border-bottom: ${spacing.r2} solid transparent;
     border-top: ${spacing.r2} solid transparent;
     ${(props) => {
+    var _a;
     const { selectedActive } = props.theme;
+    const navTextColor = (_a = getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse)) !== null && _a !== void 0 ? _a : props.theme.textPrimary;
     return css `
-        color: ${getThemePropSelector('textPrimary')};
+        color: ${navTextColor};
         &:hover {
           background-color: ${getThemePropSelector('highlight')};
         }
         &.selected {
-          color: ${getThemePropSelector('textPrimary')};
+          color: ${navTextColor};
           font-weight: bold;
           border-bottom-color: ${selectedActive};
         }
         // :focus-visible is the keyboard-only version of :focus
         &:focus-visible {
           ${FocusVisibleStyle}
-          color: ${props.theme.textPrimary};
+          color: ${navTextColor};
         }
       `;
 }};
@@ -73,9 +76,10 @@ const TabItem = styled.div `
   align-items: center;
   padding: 0 ${spacing.r16};
   ${(props) => {
-    const { textPrimary } = props.theme;
+    var _a;
+    const navTextColor = (_a = getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse)) !== null && _a !== void 0 ? _a : props.theme.textPrimary;
     return css `
-      color: ${textPrimary};
+      color: ${navTextColor};
       &:hover {
         border-bottom: ${spacing.r2} solid;
         border-top: ${spacing.r2} solid;
@@ -84,7 +88,7 @@ const TabItem = styled.div `
       // :focus-visible is the keyboard-only version of :focus
       &:focus-visible {
         ${FocusVisibleStyle}
-        color: ${props.theme.textPrimary};
+        color: ${navTextColor};
       }
     `;
 }};
@@ -118,13 +122,14 @@ const NavbarMenuItem = styled.div `
     height: ${navbarHeight};
     font-size: ${fontSize.base};
     background-color: ${getThemePropSelector('navbarBackground')};
+    color: ${(props) => { var _a; return (_a = getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse)) !== null && _a !== void 0 ? _a : props.theme.textPrimary; }};
     &:hover {
       background-color: ${getThemePropSelector('highlight')};
     }
     // :focus-visible is the keyboard-only version of :focus
     &:focus-visible {
       ${FocusVisibleStyle}
-      color: ${(props) => props.theme.textPrimary};
+      color: ${(props) => { var _a; return (_a = getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse)) !== null && _a !== void 0 ? _a : props.theme.textPrimary; }};
     }
     width: ${navbarItemWidth};
   }

package/dist/next.d.ts

@@ -11,6 +11,8 @@ export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThem
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
+export { Editor } from './components/editor';
+export type { EditorProps } from './components/editor';
 export { Barchart, BarchartTooltip, LineTimeSerieChart, GlobalHealthBar, Sparkline, ChartLegend, ChartLegendWrapper, useChartId, useChartLegend, ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from './components/charts';
 export type { BarchartProps, BarchartBars, BarchartSortFn, BarchartTooltipFn, LineChartProps, Serie, GlobalHealthProps, Alert, UnitRange, TimeType, CategoryType, } from './components/charts';
 export type { CoreUITheme } from './style/theme';

package/dist/next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAG/D,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,6CAA6C,CAAC;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAGvE,OAAO,EACL,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,iBAAiB,EACjB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,YAAY,GACb,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAG/D,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,6CAA6C,CAAC;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EACL,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,iBAAiB,EACjB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,YAAY,GACb,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/next.js

@@ -12,5 +12,6 @@ export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThem
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
+export { Editor } from './components/editor';
 // Export all chart components from the consolidated charts folder
 export { Barchart, BarchartTooltip, LineTimeSerieChart, GlobalHealthBar, Sparkline, ChartLegend, ChartLegendWrapper, useChartId, useChartLegend, ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from './components/charts';

package/dist/utils.d.ts

@@ -7,6 +7,7 @@ export declare const getThemeVariantSelector: () => (props: any) => any;
 /** Returns the theme color key for a given variant (e.g. for use with Icon color prop). */
 export declare const getVariantThemeKey: (variant: string) => string;
 export declare const hex2RGB: (str: string) => [number, number, number];
+export declare const getContrastText: (bgColor: string, textPrimary: string, textReverse: string) => string | null;
 export declare const convertRemToPixels: (rem: number) => number;
 type FormatISONumberOptions = {
     decimals?: number;

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAYA;mCACmC;AACnC,eAAO,MAAM,oBAAoB,GAAI,QAAG,MAAM,UAAK,QAGlD,CAAC;AAEF;mCACmC;AACnC,eAAO,MAAM,uBAAuB,SAAU,UAAK,QAIlD,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,kBAAkB,GAAI,SAAS,MAAM,KAAG,MACjB,CAAC;AAErC,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAc5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,KAAG,MAahD,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,MAAM,EACb,UAAS,sBAA2B,KACnC,MAoBF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAYA;mCACmC;AACnC,eAAO,MAAM,oBAAoB,GAAI,QAAG,MAAM,UAAK,QAGlD,CAAC;AAEF;mCACmC;AACnC,eAAO,MAAM,uBAAuB,SAAU,UAAK,QAIlD,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,kBAAkB,GAAI,SAAS,MAAM,KAAG,MACjB,CAAC;AAErC,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAc5D,CAAC;AAmBF,eAAO,MAAM,eAAe,GAC1B,SAAS,MAAM,EACf,aAAa,MAAM,EACnB,aAAa,MAAM,KAClB,MAAM,GAAG,IASX,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,KAAG,MAahD,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,MAAM,EACb,UAAS,sBAA2B,KACnC,MAoBF,CAAC"}

package/dist/utils.js

@@ -37,6 +37,30 @@ export const hex2RGB = (str) => {
     }
     throw new Error('Invalid hex string provided');
 };
+// WCAG 2.0 relative luminance
+const relativeLuminance = (r, g, b) => {
+    const [rs, gs, bs] = [r, g, b].map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+};
+const wcagContrastRatio = (l1, l2) => (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+const luminanceOf = (hex) => {
+    const [r, g, b] = hex2RGB(hex);
+    return relativeLuminance(r, g, b);
+};
+export const getContrastText = (bgColor, textPrimary, textReverse) => {
+    try {
+        const bgLum = luminanceOf(bgColor);
+        const primaryContrast = wcagContrastRatio(luminanceOf(textPrimary), bgLum);
+        const reverseContrast = wcagContrastRatio(luminanceOf(textReverse), bgLum);
+        return reverseContrast > primaryContrast ? textReverse : textPrimary;
+    }
+    catch {
+        return null;
+    }
+};
 export const convertRemToPixels = (rem) => {
     if (document.documentElement &&
         rem &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.199.0",
+  "version": "0.201.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -85,6 +85,9 @@
     }
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/view": "^6.39.15",
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react": "^0.27.15",
     "@fortawesome/fontawesome-free": "^7.1.0",
@@ -93,7 +96,10 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@js-temporal/polyfill": "^0.4.4",
+    "@lezer/highlight": "^1.2.3",
     "@storybook/preview-api": "^8.3.6",
+    "@uiw/react-codemirror": "^4.25.5",
+    "codemirror-json-schema": "^0.8.1",
     "downshift": "^7.0.5",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",