react-science 0.25.0 → 0.26.1

package/lib/app/explorer/MeasurementExplorer.js

@@ -29,13 +29,35 @@ const MeasurementExplorerAction = styled_1.default.div `
   display: flex;
 `;
 function MeasurementExplorer(props) {
-    const { measurement: { data }, width = '100%', height = '100%', } = props;
+    const { measurement, width = '100%', height = '100%' } = props;
+    const measurementsArray = (0, react_1.useMemo)(() => (Array.isArray(measurement) ? measurement : [measurement]), [measurement]);
+    const varNames = (0, react_1.useMemo)(() => {
+        const varNames = [];
+        for (const [i, { data }] of measurementsArray.entries()) {
+            for (const { variables } of data) {
+                const names = [];
+                for (const varName in variables) {
+                    if (i === 0) {
+                        names.push(varName);
+                    }
+                    else if (!varNames.flat().includes(varName)) {
+                        throw new Error(`Measurements selected does not have the same variables `);
+                    }
+                }
+                varNames.push(names);
+            }
+        }
+        return varNames;
+    }, [measurementsArray]);
     function defaultInfo(dataIndex) {
-        const varNames = Object.keys(data[dataIndex].variables);
         return {
             dataIndex,
-            xVariableName: varNames.includes('x') ? 'x' : varNames[0],
-            yVariableName: varNames.includes('y') ? 'y' : varNames[1],
+            xVariableName: varNames[dataIndex].includes('x')
+                ? 'x'
+                : varNames[dataIndex][0],
+            yVariableName: varNames[dataIndex].includes('y')
+                ? 'y'
+                : varNames[dataIndex][1],
         };
     }
     const [info, setInfo] = (0, react_1.useState)({
@@ -52,9 +74,9 @@ function MeasurementExplorer(props) {
             const formatVarKey = `${varKey} - `;
             return formatVarKey + label + formatUnit;
         }
-        const { variables } = data[info.dataIndex];
+        const { variables } = measurementsArray[0].data[info.dataIndex];
         const oppositeAxis = axis === 'x' ? 'yVariableName' : 'xVariableName';
-        return Object.keys(variables).map((d) => {
+        return varNames[info.dataIndex].map((d) => {
             if (d !== info[oppositeAxis]) {
                 return ((0, jsx_runtime_1.jsx)("option", { value: d, children: formatVar(d) }, d));
             }
@@ -69,7 +91,7 @@ function MeasurementExplorer(props) {
                                             ...defaultInfo(value),
                                         }));
                                     }
-                                }, children: data.map((d, i) => (
+                                }, children: measurementsArray[0].data.map((d, i) => (
                                 // eslint-disable-next-line react/no-array-index-key
                                 (0, jsx_runtime_1.jsx)("option", { value: i, children: i }, i))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { children: "xVariable: " }), (0, jsx_runtime_1.jsx)(MeasurementExplorerSelect, { onChange: ({ target }) => {
                                     const value = target.value;

package/lib/app/explorer/MeasurementExplorerWithState.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = require("../../app-data/index");
-const index_2 = require("../../components/index");
 const MeasurementExplorer_1 = require("./MeasurementExplorer");
 function MeasurementExplorerWithState() {
     const appState = (0, index_1.useAppState)();
     const data = (0, index_1.getCurrentMeasurementData)(appState);
-    (0, index_2.assertNotNull)(data);
+    if (!data)
+        return (0, jsx_runtime_1.jsx)("div", { children: "No selected measurement" });
     return ((0, jsx_runtime_1.jsx)(MeasurementExplorer_1.MeasurementExplorer, { measurement: data.data, measurementDisplay: data.display }));
 }
 exports.default = MeasurementExplorerWithState;

package/lib/app/helpers/MeasurementPlot.js

@@ -11,23 +11,32 @@ function MeasurementPlot(props) {
 }
 exports.MeasurementPlot = MeasurementPlot;
 function MeasurementComponent(props) {
-    const { measurementDisplay, measurement: { data }, dataIndex = 0, xVariableName = 'x', yVariableName = 'y', } = props;
-    const { x, y } = (0, react_1.useMemo)(() => {
-        const { variables } = data[dataIndex];
-        const { [xVariableName]: x, [yVariableName]: y } = variables;
-        if (x === undefined || y === undefined) {
-            throw new Error(`Variable "${x === undefined ? xVariableName : yVariableName}" is not available in data. Only ${Object.keys(data[dataIndex].variables).join(', ')} are available`);
-        }
-        return { x, y };
-    }, [data, dataIndex, xVariableName, yVariableName]);
-    const { color } = measurementDisplay;
-    if (color.kind !== 'fixed') {
-        throw new Error(`unimplemented stroke for kind ${color.kind}`);
-    }
-    return ((0, jsx_runtime_1.jsx)(index_1.BasicComponent, { ...props, children: (0, jsx_runtime_1.jsx)(react_plot_1.LineSeries, { lineStyle: {
-                stroke: color.color,
-            }, data: (0, ml_spectra_processing_1.xyToXYObject)({
-                x: x.data,
-                y: y.data,
-            }) }) }));
+    const { measurementDisplay, measurement, dataIndex = 0, xVariableName = 'x', yVariableName = 'y', } = props;
+    const dataXY = (0, react_1.useMemo)(() => {
+        const measurementsArray = Array.isArray(measurement)
+            ? measurement
+            : [measurement];
+        return measurementsArray.map(({ data, id }) => {
+            const { variables } = data[dataIndex];
+            const { [xVariableName]: x, [yVariableName]: y } = variables;
+            if (x === undefined || y === undefined) {
+                throw new Error(`Variable "${x === undefined ? xVariableName : yVariableName}" is not available in data. Only ${Object.keys(data[dataIndex].variables).join(', ')} are available`);
+            }
+            return { x, y, id };
+        });
+    }, [dataIndex, measurement, xVariableName, yVariableName]);
+    return ((0, jsx_runtime_1.jsx)(index_1.BasicComponent, { ...props, children: dataXY.map(({ x, y, id }, i) => {
+            const { color } = Array.isArray(measurementDisplay)
+                ? measurementDisplay[i]
+                : measurementDisplay;
+            if (color.kind !== 'fixed') {
+                throw new Error(`unimplemented stroke for kind ${color.kind}`);
+            }
+            return ((0, jsx_runtime_1.jsx)(react_plot_1.LineSeries, { lineStyle: {
+                    stroke: color.color,
+                }, data: (0, ml_spectra_processing_1.xyToXYObject)({
+                    x: x.data,
+                    y: y.data,
+                }) }, id));
+        }) }));
 }

package/lib/app/helpers/react-plot.js

@@ -19,7 +19,7 @@ const BasicComponentRoot = styled_1.default.div `
 `;
 function BasicComponent(props) {
     const { children, measurement, dataIndex = 0, xVariableName = 'x', yVariableName = 'y', width = '100%', height = '100%', zoom = 'horizontal', wheelZoom = 'vertical', crossHair = true, showHorizontalAxis = true, showVerticalAxis = true, showHorizontalGrid = true, showVerticalGrid = true, flipHorizontalAxis = false, } = props;
-    const { info: { title }, data, } = measurement;
+    const [{ info: { title }, data, },] = Array.isArray(measurement) ? measurement : [measurement];
     const { x, y } = (0, react_1.useMemo)(() => {
         const { variables } = data[dataIndex];
         const { [xVariableName]: x, [yVariableName]: y } = variables;

package/lib/app/kinds/mass/MassPlotView.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MassPlotView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_1 = require("../../../app-data/index");
-const index_2 = require("../../../components/index");
 const MeasurementMassPlot_1 = require("./MeasurementMassPlot");
 function MassPlotView() {
     const appState = (0, index_1.useAppState)();
     const data = (0, index_1.getCurrentMeasurementData)(appState);
-    (0, index_2.assertNotNull)(data);
+    if (!data)
+        return (0, jsx_runtime_1.jsx)("div", { children: "No selected measurement" });
     return ((0, jsx_runtime_1.jsx)(MeasurementMassPlot_1.MeasurementMassPlot, { measurement: data.data, measurementDisplay: data.display }));
 }
 exports.MassPlotView = MassPlotView;

package/lib/app/kinds/mass/MeasurementMassPlot.js

@@ -9,49 +9,65 @@ const react_1 = require("react");
 const react_plot_1 = require("react-plot");
 const index_1 = require("../../helpers/index");
 function MeasurementMassPlot(props) {
-    const { measurement } = props;
-    if (!measurement.data) {
-        throw new Error('This is weird, the data property is not available on measurement');
-    }
-    if (measurement.data.length === 0) {
-        throw new Error('Data property is empty');
-    }
-    if (measurement.data.length > 1) {
-        throw new Error('Length of data property is larger than 1');
-    }
-    if (!measurement.data[0].variables.x) {
-        throw new Error('x variable in undefined');
-    }
-    if (!measurement.data[0].variables.y) {
-        throw new Error('y variable in undefined');
+    const { measurement: measurements } = props;
+    const measurementsArray = Array.isArray(measurements)
+        ? measurements
+        : [measurements];
+    for (const measurement of measurementsArray) {
+        if (!measurement.data) {
+            throw new Error('This is weird, the data property is not available on measurement');
+        }
+        if (measurement.data.length === 0) {
+            throw new Error('Data property is empty');
+        }
+        if (measurement.data.length > 1) {
+            throw new Error('Length of data property is larger than 1');
+        }
+        if (!measurement.data[0].variables.x) {
+            throw new Error('x variable in undefined');
+        }
+        if (!measurement.data[0].variables.y) {
+            throw new Error('y variable in undefined');
+        }
     }
     return ((0, jsx_runtime_1.jsx)(react_plot_1.PlotController, { children: (0, jsx_runtime_1.jsx)(MassComponent, { ...props }) }));
 }
 exports.MeasurementMassPlot = MeasurementMassPlot;
 function MassComponent(props) {
-    const { measurement } = props;
-    const { data } = measurement;
-    const { variables } = data[0];
-    const { x, y } = (0, react_1.useMemo)(() => {
-        return { x: variables.x, y: variables.y };
-    }, [variables]);
-    const { x: xDomain } = (0, react_plot_1.usePlotControllerAxes)();
-    const { profile, peaks } = (0, react_1.useMemo)(() => {
-        const spectrum = new ms_spectrum_1.Spectrum({
-            x: x.data,
-            y: y.data,
+    const { measurement: measurements } = props;
+    const dataXY = (0, react_1.useMemo)(() => {
+        const measurementsArray = Array.isArray(measurements)
+            ? measurements
+            : [measurements];
+        return measurementsArray.map(({ data, id }) => {
+            const { variables } = data[0];
+            const { x, y } = variables;
+            return { x, y, id };
         });
-        const isContinuous = spectrum.isContinuous();
-        const profile = isContinuous &&
-            (0, ml_spectra_processing_1.xyToXYObject)({
+    }, [measurements]);
+    const { x: xDomain } = (0, react_plot_1.usePlotControllerAxes)();
+    const { profiles, peaks } = (0, react_1.useMemo)(() => {
+        const profiles = [];
+        const peaks = [];
+        for (const { x, y, id } of dataXY) {
+            const spectrum = new ms_spectrum_1.Spectrum({
                 x: x.data,
                 y: y.data,
             });
+            const isContinuous = spectrum.isContinuous();
+            const data = isContinuous &&
+                (0, ml_spectra_processing_1.xyToXYObject)({
+                    x: x.data,
+                    y: y.data,
+                });
+            profiles.push({ data, id });
+            peaks.push(...spectrum.getPeaks(data));
+        }
         return {
-            profile,
-            peaks: spectrum.getPeaks(profile),
+            profiles,
+            peaks,
         };
-    }, [x.data, y.data]);
+    }, [dataXY]);
     const bestPeaks = (0, react_1.useMemo)(() => (0, ms_spectrum_1.getBestPeaks)(peaks, {
         from: xDomain?.min,
         to: xDomain?.max,
@@ -59,5 +75,5 @@ function MassComponent(props) {
         numberSlots: 10,
         threshold: 0.01,
     }), [peaks, xDomain?.max, xDomain?.min]);
-    return ((0, jsx_runtime_1.jsxs)(index_1.BasicComponent, { ...props, children: [profile && (0, jsx_runtime_1.jsx)(react_plot_1.LineSeries, { data: profile, lineStyle: { stroke: 'green' } }), (0, jsx_runtime_1.jsx)(react_plot_1.BarSeries, { data: peaks, lineStyle: { stroke: 'red' } }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotations, { children: bestPeaks.map(({ x, y, shortLabel }) => ((0, jsx_runtime_1.jsxs)(react_plot_1.Annotation.Group, { x: x, y: y, children: [(0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Line, { x1: "0", x2: "0", y1: "0", y2: "-5", style: { strokeWidth: 2, stroke: 'blue' } }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Text, { style: { fontSize: '13px', fontWeight: '600' }, x: "2", y: "0", children: shortLabel }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Text, { style: { fontSize: '13px', fontWeight: '600' }, x: "2", y: "-14", children: x.toFixed(4) })] }, x))) })] }));
+    return ((0, jsx_runtime_1.jsxs)(index_1.BasicComponent, { ...props, children: [profiles.map(({ data, id }) => data && ((0, jsx_runtime_1.jsx)(react_plot_1.LineSeries, { data: data, lineStyle: { stroke: 'green' } }, id))), (0, jsx_runtime_1.jsx)(react_plot_1.BarSeries, { data: peaks, lineStyle: { stroke: 'red' } }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotations, { children: bestPeaks.map(({ x, y, shortLabel }) => ((0, jsx_runtime_1.jsxs)(react_plot_1.Annotation.Group, { x: x, y: y, children: [(0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Line, { x1: "0", x2: "0", y1: "0", y2: "-5", style: { strokeWidth: 2, stroke: 'blue' } }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Text, { style: { fontSize: '13px', fontWeight: '600' }, x: "2", y: "0", children: shortLabel }), (0, jsx_runtime_1.jsx)(react_plot_1.Annotation.Text, { style: { fontSize: '13px', fontWeight: '600' }, x: "2", y: "-14", children: x.toFixed(4) })] }, x))) })] }));
 }

package/lib/app/panels/measurement-info/MeasurementInfoPanel.js

@@ -2,70 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MeasurementInfoPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const index_1 = require("../../../app-data/index");
 const index_2 = require("../../../components/index");
 function MeasurementInfoPanel() {
     const appState = (0, index_1.useAppState)();
     const measurement = (0, index_1.getCurrentMeasurementData)(appState);
-    const [search, setSearch] = (0, react_1.useState)('');
     if (!measurement)
         return null;
-    const { meta, info } = measurement.data;
-    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)(index_2.Table.Row, { children: [(0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Text, { value: key }), valueCell(value)] }, key));
-        });
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { style: {
-                    border: 'solid 1px black',
-                    width: '300px',
-                    marginBottom: '10px',
-                    padding: '3px',
-                }, value: search, placeholder: "search for a parameter ...", onChange: ({ target }) => {
-                    if (target.value !== undefined)
-                        setSearch(target.value);
-                } }), (0, jsx_runtime_1.jsxs)(index_2.Table, { children: [(0, jsx_runtime_1.jsxs)(index_2.Table.Header, { children: [(0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Title, { value: "Parameter" }), (0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Title, { value: "Value" })] }), viewData(info), viewData(meta)] })] }));
+    // TODO: solution for multiple measurements
+    const { meta, info } = measurement.data[0];
+    const data = [
+        {
+            description: 'Information',
+            data: info,
+        },
+        {
+            description: 'Metadata',
+            data: meta,
+        },
+    ];
+    return (0, jsx_runtime_1.jsx)(index_2.InfoPanel, { data: data, title: "" });
 }
 exports.MeasurementInfoPanel = MeasurementInfoPanel;
-/**
- * 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_2.ValueRenderers.Number, { value: value });
-        case 'object':
-            return (0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Object, { value: value });
-        case 'string':
-            return (0, jsx_runtime_1.jsx)(index_2.ValueRenderers.Text, { value: value });
-        default:
-            (0, jsx_runtime_1.jsx)(index_2.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/app-data/state/data/data.helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getExistingMeasurementKinds = exports.iterateKindMeasurementsAndView = exports.iterateMeasurementEntries = exports.getSelectedMeasurementOrFail = exports.getSelectedMeasurement = exports.getMeasurementKindAndId = exports.getFirstSelectedMeasurementData = exports.getCurrentMeasurementData = exports.getCurrentMeasurement = exports.getFirstMeasurementOrFail = exports.getFirstMeasurement = exports.getMeasurementOrFail = exports.getMeasurement = void 0;
+exports.getExistingMeasurementKinds = exports.iterateKindMeasurementsAndView = exports.iterateMeasurementEntries = exports.getSelectedMeasurementOrFail = exports.getSelectedMeasurement = exports.getMeasurementKindAndIds = exports.getMeasurementKindAndId = exports.getFirstSelectedMeasurementData = exports.getCurrentMeasurementData = exports.getCurrentMeasurement = exports.getFirstMeasurementOrFail = exports.getFirstMeasurement = exports.getMeasurementOrFail = exports.getMeasurement = void 0;
 const index_1 = require("../../../components/index");
 const kinds_1 = require("./kinds");
 function getMeasurement(measurements, kind, selected) {
@@ -31,16 +31,23 @@ function getCurrentMeasurement(state) {
     const selectedMeasurement = getSelectedMeasurement(state.view);
     if (!selectedMeasurement)
         return null;
-    return getMeasurement(state.data.measurements, selectedMeasurement.kind, selectedMeasurement.id);
+    const measurements = [];
+    for (const id of selectedMeasurement.ids) {
+        const measurement = getMeasurement(state.data.measurements, selectedMeasurement.kind, id);
+        if (!measurement)
+            return null;
+        measurements.push(measurement);
+    }
+    return measurements;
 }
 exports.getCurrentMeasurement = getCurrentMeasurement;
 function getCurrentMeasurementData(state) {
     const selectedMeasurement = getCurrentMeasurement(state);
     if (!selectedMeasurement)
         return null;
-    const kindAndId = getMeasurementKindAndId(state.data, selectedMeasurement.id);
-    const display = state.view.measurements[selectedMeasurement.id];
-    return { data: selectedMeasurement, display, kindAndId };
+    const kindAndIds = getMeasurementKindAndIds(state.data, selectedMeasurement);
+    const display = selectedMeasurement.map(({ id }) => state.view.measurements[id]);
+    return { data: selectedMeasurement, display, kindAndIds };
 }
 exports.getCurrentMeasurementData = getCurrentMeasurementData;
 function getFirstSelectedMeasurementData(state) {
@@ -65,16 +72,33 @@ function getMeasurementKindAndId(data, measurementId) {
     throw new Error(`Measurement kind for ${measurementId} not found`);
 }
 exports.getMeasurementKindAndId = getMeasurementKindAndId;
+function getMeasurementKindAndIds(data, measurementId) {
+    let found = false;
+    for (const kind of kinds_1.measurementKinds) {
+        for (const { id } of measurementId) {
+            const measurement = getMeasurement(data.measurements, kind, id);
+            if (measurement)
+                found = true;
+            if (found && !measurement) {
+                throw new Error(`Measurement kind for ${measurementId.join(', ')} not found`);
+            }
+        }
+        if (found)
+            return { kind, ids: measurementId };
+    }
+    throw new Error(`Measurement kind for ${measurementId.join(', ')} not found`);
+}
+exports.getMeasurementKindAndIds = getMeasurementKindAndIds;
 function getSelectedMeasurement(view) {
     const { selectedKind, selectedMeasurements } = view;
     if (!selectedKind)
         return null;
     const kind = selectedKind;
     const currentMeasurements = selectedMeasurements[kind];
-    if (!currentMeasurements || currentMeasurements.length !== 1)
+    if (!currentMeasurements || currentMeasurements.length === 0)
         return null;
-    const id = currentMeasurements[0];
-    return { kind, id };
+    const ids = currentMeasurements;
+    return { kind, ids };
 }
 exports.getSelectedMeasurement = getSelectedMeasurement;
 function getSelectedMeasurementOrFail(view) {

package/lib/components/forms/Checkbox.js

@@ -29,8 +29,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const RadixCheckbox = __importStar(require("@radix-ui/react-checkbox"));
 const index_1 = require("react-icons/rx/index");
-const enabledColor = '#1677ff';
-const disabledColor = '#b8b8b8';
+const styles_1 = require("./styles");
 function Checkbox(props) {
     const { checked = 'indeterminate', disabled = false, label, onChange, } = props;
     return ((0, jsx_runtime_1.jsxs)("label", { style: {
@@ -43,17 +42,17 @@ function Checkbox(props) {
                     backgroundColor: disabled
                         ? 'rgba(0, 0, 0, 0.04)'
                         : checked
-                            ? enabledColor
+                            ? styles_1.enabledColor
                             : 'white',
                     borderWidth: '1px',
-                    borderColor: checked && !disabled ? enabledColor : disabledColor,
+                    borderColor: checked && !disabled ? styles_1.enabledColor : styles_1.disabledColor,
                     borderRadius: '4px',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     cursor: disabled ? 'not-allowed' : 'pointer',
                 }), children: (0, jsx_runtime_1.jsx)(RadixCheckbox.Indicator, { css: (0, react_1.css)({
-                        color: disabled ? disabledColor : 'white',
+                        color: disabled ? styles_1.disabledColor : 'white',
                     }), children: checked === true ? ((0, jsx_runtime_1.jsx)(index_1.RxCheck, {})) : checked === 'indeterminate' ? ((0, jsx_runtime_1.jsx)(index_1.RxMinus, {})) : null }) }), (0, jsx_runtime_1.jsx)("span", { style: {
                     paddingInline: '8px',
                     lineHeight: '16px',

package/lib/components/forms/Input.js

@@ -8,72 +8,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const index_1 = require("../index");
 const FieldsContext_1 = require("./context/FieldsContext");
-const 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',
-    };
-}
-const 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};
-  }
-`;
+const styles_1 = require("./styles");
+const utils_1 = require("./utils");
 const InputStyled = styled_1.default.input `
   padding: 0;
   flex: 1 1 0%;
@@ -119,32 +55,12 @@ const TrailingInlineAddonStyled = styled_1.default.div `
   align-items: center;
   padding-left: 0.5rem;
 `;
-const RootInput = styled_1.default.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
 function Input(props) {
     const { variant: variantProps, trailingAddon, leadingAddon, help, error, valid, loading, ...otherProps } = props;
     const { name, variant: contextVariant } = (0, FieldsContext_1.useFieldsContext)();
     const hasLeading = (leadingAddon && !leadingAddon.inline) || false;
     const hasTrailing = (trailingAddon && !trailingAddon.inline) || false;
     const variant = variantProps || contextVariant;
-    return ((0, jsx_runtime_1.jsxs)(RootInput, { children: [(0, jsx_runtime_1.jsxs)(GroupStyled, { hasError: !!error, hasValid: !!valid, children: [leadingAddon && !leadingAddon.inline && ((0, jsx_runtime_1.jsx)(LeadingAddonStyled, { children: leadingAddon.addon })), (0, jsx_runtime_1.jsxs)(LabelStyled, { variant: variant, hasLeading: hasLeading, hasTrailing: hasTrailing, children: [leadingAddon?.inline && ((0, jsx_runtime_1.jsx)(LeadingInlineAddonStyled, { className: "addon", children: leadingAddon.addon })), (0, jsx_runtime_1.jsx)(InputStyled, { id: name, name: name, ...otherProps }), trailingAddon?.inline && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { className: "addon", children: trailingAddon.addon })), loading && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { style: { height: variant === 'default' ? 20 : 10 }, children: (0, jsx_runtime_1.jsx)(index_1.FullSpinner, { height: variant === 'default' ? 20 : 10, width: variant === 'default' ? 20 : 10 }) }))] }), trailingAddon && !trailingAddon.inline && ((0, jsx_runtime_1.jsx)(TrailingAddonStyled, { children: trailingAddon.addon }))] }), (0, jsx_runtime_1.jsx)(SubText, { error: error, help: help, valid: valid })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { children: [(0, jsx_runtime_1.jsxs)(styles_1.GroupStyled, { hasError: !!error, hasValid: !!valid, children: [leadingAddon && !leadingAddon.inline && ((0, jsx_runtime_1.jsx)(LeadingAddonStyled, { children: leadingAddon.addon })), (0, jsx_runtime_1.jsxs)(styles_1.LabelStyled, { variant: variant, hasLeading: hasLeading, hasTrailing: hasTrailing, children: [leadingAddon?.inline && ((0, jsx_runtime_1.jsx)(LeadingInlineAddonStyled, { className: "addon", children: leadingAddon.addon })), (0, jsx_runtime_1.jsx)(InputStyled, { id: name, name: name, ...otherProps }), trailingAddon?.inline && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { className: "addon", children: trailingAddon.addon })), loading && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { style: { height: variant === 'default' ? 20 : 10 }, children: (0, jsx_runtime_1.jsx)(index_1.FullSpinner, { height: variant === 'default' ? 20 : 10, width: variant === 'default' ? 20 : 10 }) }))] }), trailingAddon && !trailingAddon.inline && ((0, jsx_runtime_1.jsx)(TrailingAddonStyled, { children: trailingAddon.addon }))] }), (0, jsx_runtime_1.jsx)(utils_1.SubText, { error: error, help: help, valid: valid })] }));
 }
 exports.Input = Input;
-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 });
-}
-function getColor(error, valid) {
-    if (error) {
-        return '#f95d55';
-    }
-    if (valid && typeof valid !== 'boolean') {
-        return '#62cb21';
-    }
-    return 'gray';
-}

package/lib/components/forms/TextArea.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const FieldsContext_1 = require("./context/FieldsContext");
+const styles_1 = require("./styles");
+const utils_1 = require("./utils");
+const TextAreaStyled = styled_1.default.textarea `
+  padding: 0;
+  flex: 1 1 0%;
+  border: none;
+  position: relative;
+  outline: none;
+`;
+function TextArea(props) {
+    const { variant: variantProps, help, error, valid, ...otherProps } = props;
+    const { name, variant: contextVariant } = (0, FieldsContext_1.useFieldsContext)();
+    const variant = variantProps || contextVariant;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.GroupStyled, { hasError: !!error, hasValid: !!valid, children: (0, jsx_runtime_1.jsx)(styles_1.LabelStyled, { variant: variant, children: (0, jsx_runtime_1.jsx)(TextAreaStyled, { id: name, name: name, ...otherProps }) }) }), (0, jsx_runtime_1.jsx)(utils_1.SubText, { error: error, help: help, valid: valid })] }));
+}
+exports.TextArea = TextArea;

package/lib/components/forms/index.js

@@ -15,6 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Input"), exports);
+__exportStar(require("./TextArea"), exports);
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./context"), exports);
 __exportStar(require("./Select"), exports);
+__exportStar(require("./radio-group"), exports);