react-science 0.25.0 → 0.26.2

package/lib/components/forms/radio-group/ButtonRadioItem.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonRadioItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const RadioGroup = __importStar(require("@radix-ui/react-radio-group"));
+const styles_1 = require("../styles");
+const buttonStyles = {
+    container: (0, react_1.css)({
+        border: '1px solid rgba(0, 0, 0, 0.25)',
+        borderRightWidth: 0,
+        position: 'relative',
+    }),
+    item: (disabled, variant) => (0, react_1.css)({
+        opacity: disabled ? 0.25 : 1,
+        padding: variant === 'default' ? '0px 15px' : '0px 7px',
+        width: '100%',
+        height: '100%',
+        cursor: 'pointer',
+        ':hover': {
+            '& > label': {
+                color: disabled ? '' : styles_1.enabledColor,
+            },
+        },
+    }),
+    indicator: (0, react_1.css)({
+        position: 'absolute',
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        zIndex: 10,
+        border: '1px solid',
+        borderColor: styles_1.enabledColor,
+        '& ~ label': {
+            color: styles_1.enabledColor,
+        },
+    }),
+    label: (variant) => (0, react_1.css)({
+        cursor: 'pointer',
+        fontSize: variant === 'small' ? '1em' : '1.125em',
+        lineHeight: variant === 'default' ? '30px' : '22px',
+    }),
+};
+function ButtonRadioItem(prop) {
+    const { value, label, disabled = false, onSelect, variant, name } = prop;
+    return ((0, jsx_runtime_1.jsx)("div", { css: buttonStyles.container, children: (0, jsx_runtime_1.jsxs)(RadioGroup.Item, { css: buttonStyles.item(disabled, variant), value: value, id: `${value}${name}`, onClick: () => {
+                if (!disabled)
+                    onSelect?.(prop);
+            }, children: [(0, jsx_runtime_1.jsx)(RadioGroup.Indicator, { css: buttonStyles.indicator }), (0, jsx_runtime_1.jsx)("label", { css: buttonStyles.label(variant), htmlFor: `${value}${name}`, style: {}, children: label })] }) }));
+}
+exports.ButtonRadioItem = ButtonRadioItem;

package/lib/components/forms/radio-group/ClassicRadioItem.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassicRadioItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const RadioGroup = __importStar(require("@radix-ui/react-radio-group"));
+const styles_1 = require("../styles");
+const classicStyles = {
+    container: (disabled) => (0, react_1.css)({
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row-reverse',
+        opacity: disabled ? 0.25 : 1,
+        overflow: 'hidden',
+        border: 'none',
+    }),
+    item: (disabled, variant) => (0, react_1.css)({
+        position: 'relative',
+        width: variant === 'default' ? 16 : 14,
+        height: variant === 'default' ? 16 : 14,
+        borderRadius: '50%',
+        border: '1px solid grey',
+        backgroundColor: disabled ? styles_1.disabledColor : 'white',
+        ':hover': {
+            borderColor: disabled ? 'grey' : styles_1.enabledColor,
+        },
+    }),
+    indicator: (0, react_1.css)({
+        position: 'absolute',
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        zIndex: 10,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: styles_1.enabledColor,
+        borderRadius: '50%',
+    }),
+    circle: (0, react_1.css)({
+        width: '40%',
+        height: '40%',
+        borderRadius: '50%',
+        backgroundColor: 'white',
+    }),
+    label: (disabled) => (0, react_1.css)({
+        cursor: 'pointer',
+        lineHeight: 1,
+        paddingLeft: 5,
+        fontSize: '12px',
+        ':hover': {
+            '& ~ button': {
+                borderColor: disabled ? 'grey' : styles_1.enabledColor,
+            },
+        },
+    }),
+};
+function ClassicRadioItem(props) {
+    const { value, label, disabled = false, onSelect, variant, name } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", { css: classicStyles.container(disabled), children: [(0, jsx_runtime_1.jsx)("label", { css: classicStyles.label(disabled), style: {
+                    fontSize: variant === 'small' ? '1em' : '1.125em',
+                }, htmlFor: `${value}${name}`, children: label }), (0, jsx_runtime_1.jsx)(RadioGroup.Item, { css: classicStyles.item(disabled, variant), value: value, id: `${value}${name}`, onClick: () => {
+                    if (!disabled)
+                        onSelect?.(props);
+                }, children: (0, jsx_runtime_1.jsx)(RadioGroup.Indicator, { css: classicStyles.indicator, children: (0, jsx_runtime_1.jsx)("div", { css: classicStyles.circle }) }) })] }));
+}
+exports.ClassicRadioItem = ClassicRadioItem;

package/lib/components/forms/radio-group/RadioGroup.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const RadioGroupRadix = __importStar(require("@radix-ui/react-radio-group"));
+const ButtonRadioItem_1 = require("./ButtonRadioItem");
+const ClassicRadioItem_1 = require("./ClassicRadioItem");
+const rootStyles = {
+    basic: (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'row',
+        width: 'fit-content',
+    }),
+    button: (variant) => (0, react_1.css)({
+        ' & > *:first-of-type, & > *:first-of-type span': {
+            borderRadius: variant === 'default' ? '6px 0 0 6px' : '4px 0 0 4px',
+        },
+        ' & > *:last-of-type, & > *:last-of-type span': {
+            borderRightWidth: 1,
+            borderRadius: variant === 'default' ? '0 6px 6px 0' : '0 4px 4px 0',
+        },
+    }),
+};
+function RadioGroup(props) {
+    const { selected, type = 'classic', disabled: groupDisabled = false, options = [], onSelect, name = '', variant = 'default', } = props;
+    return ((0, jsx_runtime_1.jsx)(RadioGroupRadix.Root, { css: [
+            rootStyles.basic,
+            type === 'classic' ? null : rootStyles.button(variant),
+        ], style: {
+            gap: type === 'classic' ? (variant === 'default' ? 10 : 5) : 0,
+        }, value: selected?.value, name: name, disabled: groupDisabled, children: options?.map(({ value, label, disabled }) => {
+            const childProps = {
+                key: value,
+                value,
+                label,
+                disabled: groupDisabled || disabled,
+                onSelect,
+                variant,
+                name,
+            };
+            return type === 'classic' ? ((0, jsx_runtime_1.jsx)(ClassicRadioItem_1.ClassicRadioItem, { ...childProps })) : ((0, jsx_runtime_1.jsx)(ButtonRadioItem_1.ButtonRadioItem, { ...childProps }));
+        }) }));
+}
+exports.RadioGroup = RadioGroup;

package/lib/components/forms/radio-group/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RadioGroup"), exports);

package/lib/components/forms/styles.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputContainer = exports.GroupStyled = exports.LabelStyled = exports.disabledColor = exports.enabledColor = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.enabledColor = '#1677ff';
+exports.disabledColor = '#b8b8b8';
+exports.LabelStyled = styled_1.default.label `
+  padding: ${(props) => props.variant === 'default'
+    ? props.hasTrailing
+        ? '2px 9px 4px 9px'
+        : '2px 9px'
+    : props.hasTrailing
+        ? '1px 7px 1px 7px'
+        : '1px 7px'};
+
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  line-height: '17px';
+
+  background-color: white;
+  border-width: 1px;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 0%;
+  display: flex;
+  position: relative;
+
+  border-top-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-bottom-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-top-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-bottom-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-radius: ${(props) => !props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-color: var(--custom-border-color);
+`;
+function getStyleColor(hasError, hasValid) {
+    if (hasError) {
+        return {
+            default: '#ffa39e',
+            hover: '#f95d55',
+        };
+    }
+    if (hasValid) {
+        return {
+            default: '#6adc24',
+            hover: '#62cb21',
+        };
+    }
+    return {
+        default: 'rgb(217, 217, 217)',
+        hover: '#4096ff',
+    };
+}
+exports.GroupStyled = styled_1.default.div `
+  display: flex;
+  border-radius: 0.375rem;
+  margin-top: 0.25rem;
+
+  .addon {
+    color: ${({ hasError }) => hasError && '#f95d55'};
+  }
+
+  --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).default};
+
+  :hover,
+  :focus-within {
+    --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).hover};
+  }
+`;
+exports.InputContainer = styled_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;

package/lib/components/forms/utils/SubText.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SubText(props) {
+    const { error, help, valid: validProps } = props;
+    const valid = typeof validProps === 'string' ? validProps : undefined;
+    const text = error || valid || help;
+    return (0, jsx_runtime_1.jsx)("p", { style: { color: getColor(error, validProps) }, children: text });
+}
+exports.SubText = SubText;
+function getColor(error, valid) {
+    if (error) {
+        return '#f95d55';
+    }
+    if (valid && typeof valid !== 'boolean') {
+        return '#62cb21';
+    }
+    return 'gray';
+}

package/lib/components/forms/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SubText"), exports);

package/lib/components/header/PanelHeader.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelHeader = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const fa_1 = require("react-icons/fa");
+const Button_1 = require("../button/Button");
+const styles = {
+    container: (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottom: '0.55px solid rgb(240, 240, 240)',
+    }),
+    leftContainer: (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'row',
+        flex: 1,
+        '& > button': {
+            padding: '0 5px',
+            minWidth: 'auto',
+        },
+    }),
+    counterLabel: (0, react_1.css)({
+        margin: 0,
+        textAlign: 'right',
+        lineHeight: '22px',
+        whiteSpace: 'nowrap',
+    }),
+};
+function PanelHeader({ total, current, children, onClickSettings, }) {
+    const labelRef = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(() => {
+        if (!labelRef.current)
+            return;
+        if (current !== undefined && total !== undefined) {
+            labelRef.current.textContent = `${current} / ${total}`;
+        }
+        else if (current !== undefined) {
+            labelRef.current.textContent = `[ ${current} ]`;
+        }
+        else if (total !== undefined) {
+            labelRef.current.textContent = `[ ${total} ]`;
+        }
+    }, [current, total]);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: styles.container, children: [(0, jsx_runtime_1.jsx)("div", { css: styles.leftContainer, children: children }), (0, jsx_runtime_1.jsx)("p", { ref: labelRef, css: styles.counterLabel }), onClickSettings && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickSettings, color: { basic: 'black', hover: 'black' }, backgroundColor: { basic: 'white', hover: '#f7f7f7' }, children: (0, jsx_runtime_1.jsx)(fa_1.FaCog, {}) }))] }));
+}
+exports.PanelHeader = PanelHeader;

package/lib/components/header/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Header"), exports);
+__exportStar(require("./PanelHeader"), exports);

package/lib/components/index.js

@@ -36,6 +36,7 @@ __exportStar(require("./forms/index"), exports);
 __exportStar(require("./fullscreen/index"), exports);
 __exportStar(require("./header/index"), exports);
 __exportStar(require("./hooks/index"), exports);
+__exportStar(require("./info-panel/index"), exports);
 __exportStar(require("./layout-manager/index"), exports);
 __exportStar(require("./modal/index"), exports);
 __exportStar(require("./root-layout/index"), exports);

package/lib/components/info-panel/InfoPanel.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoPanel = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
+// @ts-ignore
+const react_2 = require("@headlessui/react");
+const react_3 = require("react");
+const fa_1 = require("react-icons/fa");
+const index_1 = require("../index");
+const Table_1 = require("../table/Table");
+const style = {
+    container: (0, react_1.css)({
+        padding: '5px',
+    }),
+    chevron: (open) => (0, react_1.css)({
+        rotate: open ? '90deg' : '0deg',
+        transition: 'all 0.3s ease-in-out',
+    }),
+    button: (0, react_1.css)({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5,
+        padding: '5px 2px',
+    }),
+    table: (0, react_1.css) `
+    width: 100%;
+    td:first-of-type {
+      width: 30%;
+    }
+  `,
+};
+function InfoPanel(props) {
+    const [search, setSearch] = (0, react_3.useState)('');
+    const { title = 'Information', data = [], titleStyle, inputStyle, tableStyle, } = props;
+    function viewData(data) {
+        return Object.keys(data)
+            .map((key) => {
+            const value = data[key];
+            if (!key.toLowerCase().includes(search.toLowerCase()) &&
+                !valueSearch(value, search)) {
+                return null;
+            }
+            return ((0, jsx_runtime_1.jsxs)(Table_1.Table.Row, { children: [(0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Text, { value: key }), valueCell(value)] }, key));
+        })
+            .filter((row) => row !== null);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { css: style.container, children: [(0, jsx_runtime_1.jsx)("div", { style: titleStyle, children: title }), (0, jsx_runtime_1.jsx)(index_1.Input, { placeholder: "search for a parameter ...", value: search, onChange: ({ target }) => {
+                    if (target.value !== undefined)
+                        setSearch(target.value);
+                }, style: inputStyle }), data.map(({ description, data }) => {
+                const content = viewData(data);
+                return content.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Disclosure, { defaultOpen: true, children: ({ open }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Disclosure.Button, { css: style.button, children: [(0, jsx_runtime_1.jsx)(fa_1.FaChevronRight, { css: style.chevron(open) }), description] }), (0, jsx_runtime_1.jsx)(react_2.Disclosure.Panel, { children: (0, jsx_runtime_1.jsxs)(Table_1.Table, { css: style.table, style: tableStyle, children: [(0, jsx_runtime_1.jsxs)(Table_1.Table.Header, { children: [(0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Title, { value: "Parameter" }), (0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Title, { value: "Value" })] }), content] }) })] })) }, description)) : null;
+            })] }));
+}
+exports.InfoPanel = InfoPanel;
+/**
+ * Get the value cell depending on the type of the value
+ * @param value - ValueRenderers value.
+ * @returns - ValueRenderers component.
+ */
+function valueCell(value) {
+    switch (typeof value) {
+        case 'number':
+            return (0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Number, { value: value });
+        case 'object':
+            return (0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Object, { value: value });
+        case 'string':
+            return (0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Text, { value: value });
+        default:
+            (0, jsx_runtime_1.jsx)(index_1.ValueRenderers.Text, { value: value });
+    }
+}
+/**
+ * Search a string in different type of values
+ *
+ * @param value - Value to search in.
+ * @param search - Value to search for.
+ * @returns - If search exist in value
+ */
+function valueSearch(value, search) {
+    switch (typeof value) {
+        case 'number':
+            return String(value).includes(search.toLowerCase());
+        case 'object':
+            return JSON.stringify(value).toLowerCase().includes(search.toLowerCase());
+        case 'string':
+            return value.toLowerCase().includes(search.toLowerCase());
+        default:
+            return false;
+    }
+}

package/lib/components/info-panel/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InfoPanel"), exports);

package/lib/components/modal/ConfirmModal.js

@@ -24,8 +24,6 @@ const ConfirmModalContents = styled_1.default.div `
   flex-direction: column;
   background-color: white;
   width: 100%;
-  border-width: 1px;
-  border-color: transparent;
   border-radius: 0.5rem;
   box-shadow:
     0 0 0 0,
@@ -36,6 +34,9 @@ const ConfirmModalChildrenRoot = styled_1.default.div `
   color: ${({ headerColor }) => headerColor};
   display: flex;
   flex: 1 1 0%;
+  font-weight: bold;
+  padding: 20px;
+  font-size: 14px;
 `;
 const ConfirmModalFooter = styled_1.default.div `
   border-top: 2px solid rgb(247, 247, 247);

package/lib/components/modal/Modal.js

@@ -13,7 +13,9 @@ const ModalCloseButton_1 = __importDefault(require("./ModalCloseButton"));
 const useDialog_1 = require("./useDialog");
 const DialogRoot = styled_1.default.dialog `
   background-color: transparent;
-
+  :focus {
+    outline: none;
+  }
   ::backdrop {
     background-color: rgba(113, 113, 122, 0.75);
   }

package/lib/components/table/Table.js

@@ -44,10 +44,10 @@ function splitChildren(children) {
     return { Rows, Header };
 }
 function Table(props) {
-    const { border = true, style = {}, children } = props;
+    const { border = true, children, ...tableProps } = props;
     const { Header, Rows } = splitChildren(children);
     const tableContextValue = (0, react_2.useMemo)(() => ({ border }), [border]);
-    return ((0, jsx_runtime_1.jsx)(TableContext.Provider, { value: tableContextValue, children: (0, jsx_runtime_1.jsxs)("table", { style: style, children: [Header, (0, jsx_runtime_1.jsx)("tbody", { children: Rows })] }) }));
+    return ((0, jsx_runtime_1.jsx)(TableContext.Provider, { value: tableContextValue, children: (0, jsx_runtime_1.jsxs)("table", { ...tableProps, children: [Header, (0, jsx_runtime_1.jsx)("tbody", { children: Rows })] }) }));
 }
 exports.Table = Table;
 function useRowChildren(children) {

package/lib/components/toolbar/PanelPreferencesToolbar.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelPreferencesToolbar = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const fa_1 = require("react-icons/fa");
+const Button_1 = require("../button/Button");
+const styles = {
+    toolbar: (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'row-reverse',
+        fontSize: 16,
+        padding: 3,
+        '& > button': {
+            padding: 0,
+            paddingLeft: 9,
+            minWidth: 'auto',
+        },
+    }),
+};
+function PanelPreferencesToolbar(props) {
+    const { onClose, onSave } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", { css: styles.toolbar, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClose, color: { basic: '#ca0000', hover: '#ca0000' }, backgroundColor: { basic: 'white', hover: 'white' }, children: (0, jsx_runtime_1.jsx)(fa_1.FaTimes, {}) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onSave, color: { basic: 'green', hover: 'green' }, backgroundColor: { basic: 'white', hover: 'white' }, children: (0, jsx_runtime_1.jsx)(fa_1.FaCheck, {}) })] }));
+}
+exports.PanelPreferencesToolbar = PanelPreferencesToolbar;

package/lib/components/toolbar/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Toolbar"), exports);
+__exportStar(require("./PanelPreferencesToolbar"), exports);

package/lib-esm/app/explorer/MeasurementExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeasurementExplorer.d.ts","sourceRoot":"","sources":["../../../src/app/explorer/MeasurementExplorer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEzE,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,MAAM,YAAY,CAAC;CAAG;AAC3D,UAAU,YAAY;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAyBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAoIlE"}
+{"version":3,"file":"MeasurementExplorer.d.ts","sourceRoot":"","sources":["../../../src/app/explorer/MeasurementExplorer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEzE,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,MAAM,YAAY,CAAC;CAAG;AAC3D,UAAU,YAAY;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAyBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CA0JlE"}