@perses-dev/components 0.55.0 → 0.56.0-beta.0

package/dist/ValueMappingEditor/ValueMappingEditor.js

@@ -11,364 +11,842 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { IconButton, MenuItem, Stack, TextField, Tooltip, Typography, Grid2 as Grid } from "@mui/material";
 import DeleteIcon from "mdi-material-ui/DeleteOutline";
 import PlusIcon from "mdi-material-ui/Plus";
 import { OptionsColorPicker } from "../ColorPicker/OptionsColorPicker.js";
-const ConditionEditor = ({ mapping, onChange, ...props })=>{
+const ConditionEditor = (t0)=>{
+    const $ = _c(53);
+    let mapping;
+    let onChange;
+    let props;
+    if ($[0] !== t0) {
+        ({ mapping, onChange, ...props } = t0);
+        $[0] = t0;
+        $[1] = mapping;
+        $[2] = onChange;
+        $[3] = props;
+    } else {
+        mapping = $[1];
+        onChange = $[2];
+        props = $[3];
+    }
     switch(mapping.kind){
-        case 'Value':
-            return /*#__PURE__*/ _jsx(Stack, {
-                gap: 1,
-                direction: "row",
-                ...props,
-                children: /*#__PURE__*/ _jsx(TextField, {
-                    label: "Value",
-                    placeholder: "Exact value",
-                    value: mapping.spec?.value ?? '',
-                    onChange: (e)=>onChange({
+        case "Value":
+            {
+                const t1 = mapping.spec?.value ?? "";
+                let t2;
+                if ($[4] !== mapping || $[5] !== onChange) {
+                    t2 = (e_3)=>onChange({
                             ...mapping,
                             spec: {
                                 ...mapping.spec,
-                                value: e.target.value
+                                value: e_3.target.value
                             }
-                        }),
-                    fullWidth: true
-                })
-            });
-        case 'Range':
-            return /*#__PURE__*/ _jsxs(Stack, {
-                gap: 1,
-                direction: "row",
-                ...props,
-                children: [
-                    /*#__PURE__*/ _jsx(TextField, {
+                        });
+                    $[4] = mapping;
+                    $[5] = onChange;
+                    $[6] = t2;
+                } else {
+                    t2 = $[6];
+                }
+                let t3;
+                if ($[7] !== t1 || $[8] !== t2) {
+                    t3 = /*#__PURE__*/ _jsx(TextField, {
+                        label: "Value",
+                        placeholder: "Exact value",
+                        value: t1,
+                        onChange: t2,
+                        fullWidth: true
+                    });
+                    $[7] = t1;
+                    $[8] = t2;
+                    $[9] = t3;
+                } else {
+                    t3 = $[9];
+                }
+                let t4;
+                if ($[10] !== props || $[11] !== t3) {
+                    t4 = /*#__PURE__*/ _jsx(Stack, {
+                        gap: 1,
+                        direction: "row",
+                        ...props,
+                        children: t3
+                    });
+                    $[10] = props;
+                    $[11] = t3;
+                    $[12] = t4;
+                } else {
+                    t4 = $[12];
+                }
+                return t4;
+            }
+        case "Range":
+            {
+                const t1 = mapping.spec?.from ?? "";
+                let t2;
+                if ($[13] !== mapping || $[14] !== onChange) {
+                    t2 = (e_1)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                from: e_1.target.value === "" ? undefined : +e_1.target.value
+                            }
+                        });
+                    $[13] = mapping;
+                    $[14] = onChange;
+                    $[15] = t2;
+                } else {
+                    t2 = $[15];
+                }
+                let t3;
+                if ($[16] !== t1 || $[17] !== t2) {
+                    t3 = /*#__PURE__*/ _jsx(TextField, {
                         label: "From",
                         placeholder: "Start of range",
-                        value: mapping.spec?.from ?? '',
-                        onChange: (e)=>onChange({
-                                ...mapping,
-                                spec: {
-                                    ...mapping.spec,
-                                    from: e.target.value === '' ? undefined : +e.target.value
-                                }
-                            }),
+                        value: t1,
+                        onChange: t2,
                         fullWidth: true
-                    }),
-                    /*#__PURE__*/ _jsx(TextField, {
+                    });
+                    $[16] = t1;
+                    $[17] = t2;
+                    $[18] = t3;
+                } else {
+                    t3 = $[18];
+                }
+                const t4 = mapping.spec?.to ?? "";
+                let t5;
+                if ($[19] !== mapping || $[20] !== onChange) {
+                    t5 = (e_2)=>onChange({
+                            ...mapping,
+                            spec: {
+                                ...mapping.spec,
+                                to: e_2.target.value === "" ? undefined : +e_2.target.value
+                            }
+                        });
+                    $[19] = mapping;
+                    $[20] = onChange;
+                    $[21] = t5;
+                } else {
+                    t5 = $[21];
+                }
+                let t6;
+                if ($[22] !== t4 || $[23] !== t5) {
+                    t6 = /*#__PURE__*/ _jsx(TextField, {
                         label: "To",
                         placeholder: "End of range (inclusive)",
-                        value: mapping.spec?.to ?? '',
-                        onChange: (e)=>onChange({
-                                ...mapping,
-                                spec: {
-                                    ...mapping.spec,
-                                    to: e.target.value === '' ? undefined : +e.target.value
-                                }
-                            }),
+                        value: t4,
+                        onChange: t5,
                         fullWidth: true
-                    })
-                ]
-            });
-        case 'Regex':
-            return /*#__PURE__*/ _jsx(Stack, {
-                gap: 1,
-                direction: "row",
-                ...props,
-                children: /*#__PURE__*/ _jsx(TextField, {
-                    label: "Regular Expression",
-                    placeholder: "JavaScript regular expression",
-                    value: mapping.spec?.pattern ?? '',
-                    onChange: (e)=>onChange({
+                    });
+                    $[22] = t4;
+                    $[23] = t5;
+                    $[24] = t6;
+                } else {
+                    t6 = $[24];
+                }
+                let t7;
+                if ($[25] !== props || $[26] !== t3 || $[27] !== t6) {
+                    t7 = /*#__PURE__*/ _jsxs(Stack, {
+                        gap: 1,
+                        direction: "row",
+                        ...props,
+                        children: [
+                            t3,
+                            t6
+                        ]
+                    });
+                    $[25] = props;
+                    $[26] = t3;
+                    $[27] = t6;
+                    $[28] = t7;
+                } else {
+                    t7 = $[28];
+                }
+                return t7;
+            }
+        case "Regex":
+            {
+                const t1 = mapping.spec?.pattern ?? "";
+                let t2;
+                if ($[29] !== mapping || $[30] !== onChange) {
+                    t2 = (e_0)=>onChange({
                             ...mapping,
                             spec: {
                                 ...mapping.spec,
-                                pattern: e.target.value
+                                pattern: e_0.target.value
                             }
-                        }),
-                    fullWidth: true
-                })
-            });
-        case 'Misc':
-            return /*#__PURE__*/ _jsx(Stack, {
-                gap: 1,
-                direction: "row",
-                ...props,
-                children: /*#__PURE__*/ _jsxs(TextField, {
-                    select: true,
-                    label: "Value",
-                    value: mapping.spec?.value ?? '',
-                    onChange: (e)=>onChange({
+                        });
+                    $[29] = mapping;
+                    $[30] = onChange;
+                    $[31] = t2;
+                } else {
+                    t2 = $[31];
+                }
+                let t3;
+                if ($[32] !== t1 || $[33] !== t2) {
+                    t3 = /*#__PURE__*/ _jsx(TextField, {
+                        label: "Regular Expression",
+                        placeholder: "JavaScript regular expression",
+                        value: t1,
+                        onChange: t2,
+                        fullWidth: true
+                    });
+                    $[32] = t1;
+                    $[33] = t2;
+                    $[34] = t3;
+                } else {
+                    t3 = $[34];
+                }
+                let t4;
+                if ($[35] !== props || $[36] !== t3) {
+                    t4 = /*#__PURE__*/ _jsx(Stack, {
+                        gap: 1,
+                        direction: "row",
+                        ...props,
+                        children: t3
+                    });
+                    $[35] = props;
+                    $[36] = t3;
+                    $[37] = t4;
+                } else {
+                    t4 = $[37];
+                }
+                return t4;
+            }
+        case "Misc":
+            {
+                const t1 = mapping.spec?.value ?? "";
+                let t2;
+                if ($[38] !== mapping || $[39] !== onChange) {
+                    t2 = (e)=>onChange({
                             ...mapping,
                             spec: {
                                 value: e.target.value
                             }
-                        }),
-                    SelectProps: {
-                        renderValue: (selected)=>{
-                            switch(selected){
-                                case 'empty':
-                                    return 'Empty';
-                                case 'null':
-                                    return 'Null';
-                                case 'NaN':
-                                    return 'NaN';
-                                case 'true':
-                                    return 'True';
-                                case 'false':
-                                    return 'False';
-                                default:
-                                    return String(selected);
-                            }
-                        }
-                    },
-                    fullWidth: true,
-                    children: [
-                        /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "empty",
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        children: "Empty"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "caption",
-                                        children: "Matches empty string"
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "null",
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        children: "Null"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "caption",
-                                        children: "Matches null or undefined"
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "NaN",
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        children: "NaN"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "caption",
-                                        children: "Matches Not a Number value"
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "true",
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        children: "True"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "caption",
-                                        children: "Matches true boolean"
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx(MenuItem, {
-                            value: "false",
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        children: "False"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "caption",
-                                        children: "Matches false boolean"
-                                    })
-                                ]
-                            })
-                        })
-                    ]
-                })
-            });
-        default:
-            return null;
-    }
-};
-export const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
-    const handleColorChange = (color)=>{
-        onChange({
-            ...mapping,
-            spec: {
-                ...mapping.spec,
-                result: {
-                    ...mapping.spec.result,
-                    color
+                        });
+                    $[38] = mapping;
+                    $[39] = onChange;
+                    $[40] = t2;
+                } else {
+                    t2 = $[40];
                 }
-            }
-        });
-    };
-    return /*#__PURE__*/ _jsxs(Grid, {
-        container: true,
-        spacing: 2,
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx(Grid, {
-                size: {
-                    xs: 5
-                },
-                children: /*#__PURE__*/ _jsxs(Stack, {
-                    direction: "row",
-                    gap: 1,
-                    width: "100%",
-                    children: [
-                        /*#__PURE__*/ _jsxs(TextField, {
-                            select: true,
-                            label: "Type",
-                            value: mapping.kind,
-                            onChange: (e)=>onChange({
-                                    ...mapping,
-                                    kind: e.target.value
+                let t3;
+                if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+                    t3 = {
+                        renderValue: _temp
+                    };
+                    $[41] = t3;
+                } else {
+                    t3 = $[41];
+                }
+                let t4;
+                if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+                    t4 = /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "empty",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "Empty"
                                 }),
-                            required: true,
-                            sx: {
-                                width: '120px'
-                            },
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches empty string"
+                                })
+                            ]
+                        })
+                    });
+                    $[42] = t4;
+                } else {
+                    t4 = $[42];
+                }
+                let t5;
+                if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+                    t5 = /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "null",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
                             children: [
-                                /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: "Value",
-                                    children: /*#__PURE__*/ _jsxs(Stack, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                children: "Value"
-                                            }),
-                                            mapping.kind !== 'Value' && /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                children: "Matches an exact text value"
-                                            })
-                                        ]
-                                    })
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "Null"
                                 }),
-                                /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: "Range",
-                                    children: /*#__PURE__*/ _jsxs(Stack, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                children: "Range"
-                                            }),
-                                            mapping.kind !== 'Range' && /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                children: "Matches against a numerical range"
-                                            })
-                                        ]
-                                    })
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches null or undefined"
+                                })
+                            ]
+                        })
+                    });
+                    $[43] = t5;
+                } else {
+                    t5 = $[43];
+                }
+                let t6;
+                if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+                    t6 = /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "NaN",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "NaN"
                                 }),
-                                /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: "Regex",
-                                    children: /*#__PURE__*/ _jsxs(Stack, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                children: "Regex"
-                                            }),
-                                            mapping.kind !== 'Regex' && /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                children: "Matches against a regular expression"
-                                            })
-                                        ]
-                                    })
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches Not a Number value"
+                                })
+                            ]
+                        })
+                    });
+                    $[44] = t6;
+                } else {
+                    t6 = $[44];
+                }
+                let t7;
+                if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+                    t7 = /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "true",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "True"
                                 }),
-                                /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: "Misc",
-                                    children: /*#__PURE__*/ _jsxs(Stack, {
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                children: "Misc"
-                                            }),
-                                            mapping.kind !== 'Misc' && /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                children: "Matches against empty, null and NaN values"
-                                            })
-                                        ]
-                                    })
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches true boolean"
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ _jsx(ConditionEditor, {
-                            width: "100%",
-                            mapping: mapping,
-                            onChange: (updatedMapping)=>onChange({
-                                    ...mapping,
-                                    ...updatedMapping
+                        })
+                    });
+                    $[45] = t7;
+                } else {
+                    t7 = $[45];
+                }
+                let t8;
+                if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+                    t8 = /*#__PURE__*/ _jsx(MenuItem, {
+                        value: "false",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "False"
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: "Matches false boolean"
                                 })
+                            ]
                         })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ _jsx(Grid, {
-                size: {
-                    xs: 4
-                },
-                children: /*#__PURE__*/ _jsx(TextField, {
-                    label: "Display text",
-                    value: mapping.spec?.result?.value ?? '',
-                    onChange: (e)=>onChange({
-                            ...mapping,
-                            spec: {
-                                ...mapping.spec,
-                                result: {
-                                    ...mapping.spec?.result,
-                                    value: e.target.value
-                                }
-                            }
-                        }),
-                    fullWidth: true
-                })
-            }),
-            /*#__PURE__*/ _jsx(Grid, {
-                size: {
-                    xs: 1
-                },
-                children: /*#__PURE__*/ _jsx(Stack, {
-                    direction: "row",
-                    justifyContent: "center",
-                    gap: 1,
-                    children: mapping.spec?.result?.color ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
-                        label: "Color",
-                        color: mapping.spec.result.color ?? '#000',
-                        onColorChange: handleColorChange,
-                        onClear: ()=>handleColorChange(undefined)
-                    }) : /*#__PURE__*/ _jsx(IconButton, {
-                        onClick: ()=>handleColorChange('#000'),
-                        children: /*#__PURE__*/ _jsx(PlusIcon, {})
-                    })
+                    });
+                    $[46] = t8;
+                } else {
+                    t8 = $[46];
+                }
+                let t9;
+                if ($[47] !== t1 || $[48] !== t2) {
+                    t9 = /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        label: "Value",
+                        value: t1,
+                        onChange: t2,
+                        SelectProps: t3,
+                        fullWidth: true,
+                        children: [
+                            t4,
+                            t5,
+                            t6,
+                            t7,
+                            t8
+                        ]
+                    });
+                    $[47] = t1;
+                    $[48] = t2;
+                    $[49] = t9;
+                } else {
+                    t9 = $[49];
+                }
+                let t10;
+                if ($[50] !== props || $[51] !== t9) {
+                    t10 = /*#__PURE__*/ _jsx(Stack, {
+                        gap: 1,
+                        direction: "row",
+                        ...props,
+                        children: t9
+                    });
+                    $[50] = props;
+                    $[51] = t9;
+                    $[52] = t10;
+                } else {
+                    t10 = $[52];
+                }
+                return t10;
+            }
+        default:
+            {
+                return null;
+            }
+    }
+};
+export const ValueMappingEditor = (t0)=>{
+    const $ = _c(71);
+    let mapping;
+    let onChange;
+    let onDelete;
+    let props;
+    if ($[0] !== t0) {
+        ({ mapping, onChange, onDelete, ...props } = t0);
+        $[0] = t0;
+        $[1] = mapping;
+        $[2] = onChange;
+        $[3] = onDelete;
+        $[4] = props;
+    } else {
+        mapping = $[1];
+        onChange = $[2];
+        onDelete = $[3];
+        props = $[4];
+    }
+    let t1;
+    if ($[5] !== mapping || $[6] !== onChange) {
+        t1 = (color)=>{
+            onChange({
+                ...mapping,
+                spec: {
+                    ...mapping.spec,
+                    result: {
+                        ...mapping.spec.result,
+                        color
+                    }
+                }
+            });
+        };
+        $[5] = mapping;
+        $[6] = onChange;
+        $[7] = t1;
+    } else {
+        t1 = $[7];
+    }
+    const handleColorChange = t1;
+    let t2;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = {
+            xs: 5
+        };
+        $[8] = t2;
+    } else {
+        t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== mapping || $[10] !== onChange) {
+        t3 = (e)=>onChange({
+                ...mapping,
+                kind: e.target.value
+            });
+        $[9] = mapping;
+        $[10] = onChange;
+        $[11] = t3;
+    } else {
+        t3 = $[11];
+    }
+    let t4;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = {
+            width: "120px"
+        };
+        $[12] = t4;
+    } else {
+        t4 = $[12];
+    }
+    let t5;
+    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = /*#__PURE__*/ _jsx(Typography, {
+            children: "Value"
+        });
+        $[13] = t5;
+    } else {
+        t5 = $[13];
+    }
+    let t6;
+    if ($[14] !== mapping.kind) {
+        t6 = mapping.kind !== "Value" && /*#__PURE__*/ _jsx(Typography, {
+            variant: "caption",
+            children: "Matches an exact text value"
+        });
+        $[14] = mapping.kind;
+        $[15] = t6;
+    } else {
+        t6 = $[15];
+    }
+    let t7;
+    if ($[16] !== t6) {
+        t7 = /*#__PURE__*/ _jsx(MenuItem, {
+            value: "Value",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                children: [
+                    t5,
+                    t6
+                ]
+            })
+        });
+        $[16] = t6;
+        $[17] = t7;
+    } else {
+        t7 = $[17];
+    }
+    let t8;
+    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+        t8 = /*#__PURE__*/ _jsx(Typography, {
+            children: "Range"
+        });
+        $[18] = t8;
+    } else {
+        t8 = $[18];
+    }
+    let t9;
+    if ($[19] !== mapping.kind) {
+        t9 = mapping.kind !== "Range" && /*#__PURE__*/ _jsx(Typography, {
+            variant: "caption",
+            children: "Matches against a numerical range"
+        });
+        $[19] = mapping.kind;
+        $[20] = t9;
+    } else {
+        t9 = $[20];
+    }
+    let t10;
+    if ($[21] !== t9) {
+        t10 = /*#__PURE__*/ _jsx(MenuItem, {
+            value: "Range",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                children: [
+                    t8,
+                    t9
+                ]
+            })
+        });
+        $[21] = t9;
+        $[22] = t10;
+    } else {
+        t10 = $[22];
+    }
+    let t11;
+    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+        t11 = /*#__PURE__*/ _jsx(Typography, {
+            children: "Regex"
+        });
+        $[23] = t11;
+    } else {
+        t11 = $[23];
+    }
+    let t12;
+    if ($[24] !== mapping.kind) {
+        t12 = mapping.kind !== "Regex" && /*#__PURE__*/ _jsx(Typography, {
+            variant: "caption",
+            children: "Matches against a regular expression"
+        });
+        $[24] = mapping.kind;
+        $[25] = t12;
+    } else {
+        t12 = $[25];
+    }
+    let t13;
+    if ($[26] !== t12) {
+        t13 = /*#__PURE__*/ _jsx(MenuItem, {
+            value: "Regex",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                children: [
+                    t11,
+                    t12
+                ]
+            })
+        });
+        $[26] = t12;
+        $[27] = t13;
+    } else {
+        t13 = $[27];
+    }
+    let t14;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = /*#__PURE__*/ _jsx(Typography, {
+            children: "Misc"
+        });
+        $[28] = t14;
+    } else {
+        t14 = $[28];
+    }
+    let t15;
+    if ($[29] !== mapping.kind) {
+        t15 = mapping.kind !== "Misc" && /*#__PURE__*/ _jsx(Typography, {
+            variant: "caption",
+            children: "Matches against empty, null and NaN values"
+        });
+        $[29] = mapping.kind;
+        $[30] = t15;
+    } else {
+        t15 = $[30];
+    }
+    let t16;
+    if ($[31] !== t15) {
+        t16 = /*#__PURE__*/ _jsx(MenuItem, {
+            value: "Misc",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                children: [
+                    t14,
+                    t15
+                ]
+            })
+        });
+        $[31] = t15;
+        $[32] = t16;
+    } else {
+        t16 = $[32];
+    }
+    let t17;
+    if ($[33] !== mapping.kind || $[34] !== t10 || $[35] !== t13 || $[36] !== t16 || $[37] !== t3 || $[38] !== t7) {
+        t17 = /*#__PURE__*/ _jsxs(TextField, {
+            select: true,
+            label: "Type",
+            value: mapping.kind,
+            onChange: t3,
+            required: true,
+            sx: t4,
+            children: [
+                t7,
+                t10,
+                t13,
+                t16
+            ]
+        });
+        $[33] = mapping.kind;
+        $[34] = t10;
+        $[35] = t13;
+        $[36] = t16;
+        $[37] = t3;
+        $[38] = t7;
+        $[39] = t17;
+    } else {
+        t17 = $[39];
+    }
+    let t18;
+    if ($[40] !== mapping || $[41] !== onChange) {
+        t18 = (updatedMapping)=>onChange({
+                ...mapping,
+                ...updatedMapping
+            });
+        $[40] = mapping;
+        $[41] = onChange;
+        $[42] = t18;
+    } else {
+        t18 = $[42];
+    }
+    let t19;
+    if ($[43] !== mapping || $[44] !== t18) {
+        t19 = /*#__PURE__*/ _jsx(ConditionEditor, {
+            width: "100%",
+            mapping: mapping,
+            onChange: t18
+        });
+        $[43] = mapping;
+        $[44] = t18;
+        $[45] = t19;
+    } else {
+        t19 = $[45];
+    }
+    let t20;
+    if ($[46] !== t17 || $[47] !== t19) {
+        t20 = /*#__PURE__*/ _jsx(Grid, {
+            size: t2,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                gap: 1,
+                width: "100%",
+                children: [
+                    t17,
+                    t19
+                ]
+            })
+        });
+        $[46] = t17;
+        $[47] = t19;
+        $[48] = t20;
+    } else {
+        t20 = $[48];
+    }
+    let t21;
+    if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+        t21 = {
+            xs: 4
+        };
+        $[49] = t21;
+    } else {
+        t21 = $[49];
+    }
+    const t22 = mapping.spec?.result?.value ?? "";
+    let t23;
+    if ($[50] !== mapping || $[51] !== onChange) {
+        t23 = (e_0)=>onChange({
+                ...mapping,
+                spec: {
+                    ...mapping.spec,
+                    result: {
+                        ...mapping.spec?.result,
+                        value: e_0.target.value
+                    }
+                }
+            });
+        $[50] = mapping;
+        $[51] = onChange;
+        $[52] = t23;
+    } else {
+        t23 = $[52];
+    }
+    let t24;
+    if ($[53] !== t22 || $[54] !== t23) {
+        t24 = /*#__PURE__*/ _jsx(Grid, {
+            size: t21,
+            children: /*#__PURE__*/ _jsx(TextField, {
+                label: "Display text",
+                value: t22,
+                onChange: t23,
+                fullWidth: true
+            })
+        });
+        $[53] = t22;
+        $[54] = t23;
+        $[55] = t24;
+    } else {
+        t24 = $[55];
+    }
+    let t25;
+    if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
+        t25 = {
+            xs: 1
+        };
+        $[56] = t25;
+    } else {
+        t25 = $[56];
+    }
+    let t26;
+    if ($[57] !== handleColorChange || $[58] !== mapping.spec.result) {
+        t26 = /*#__PURE__*/ _jsx(Grid, {
+            size: t25,
+            children: /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                justifyContent: "center",
+                gap: 1,
+                children: mapping.spec?.result?.color ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                    label: "Color",
+                    color: mapping.spec.result.color ?? "#000",
+                    onColorChange: handleColorChange,
+                    onClear: ()=>handleColorChange(undefined)
+                }) : /*#__PURE__*/ _jsx(IconButton, {
+                    onClick: ()=>handleColorChange("#000"),
+                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
                 })
-            }),
-            /*#__PURE__*/ _jsx(Grid, {
-                size: {
-                    xs: 1
-                },
-                textAlign: "end",
-                children: /*#__PURE__*/ _jsx(Tooltip, {
-                    title: "Remove mapping settings",
-                    placement: "top",
-                    children: /*#__PURE__*/ _jsx(IconButton, {
-                        size: "small",
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        onClick: onDelete,
-                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
-                    })
+            })
+        });
+        $[57] = handleColorChange;
+        $[58] = mapping.spec.result;
+        $[59] = t26;
+    } else {
+        t26 = $[59];
+    }
+    let t27;
+    if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+        t27 = {
+            xs: 1
+        };
+        $[60] = t27;
+    } else {
+        t27 = $[60];
+    }
+    let t28;
+    if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
+        t28 = {
+            marginLeft: "auto"
+        };
+        $[61] = t28;
+    } else {
+        t28 = $[61];
+    }
+    let t29;
+    if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+        t29 = /*#__PURE__*/ _jsx(DeleteIcon, {});
+        $[62] = t29;
+    } else {
+        t29 = $[62];
+    }
+    let t30;
+    if ($[63] !== onDelete) {
+        t30 = /*#__PURE__*/ _jsx(Grid, {
+            size: t27,
+            textAlign: "end",
+            children: /*#__PURE__*/ _jsx(Tooltip, {
+                title: "Remove mapping settings",
+                placement: "top",
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    size: "small",
+                    sx: t28,
+                    onClick: onDelete,
+                    children: t29
                 })
             })
-        ]
-    });
+        });
+        $[63] = onDelete;
+        $[64] = t30;
+    } else {
+        t30 = $[64];
+    }
+    let t31;
+    if ($[65] !== props || $[66] !== t20 || $[67] !== t24 || $[68] !== t26 || $[69] !== t30) {
+        t31 = /*#__PURE__*/ _jsxs(Grid, {
+            container: true,
+            spacing: 2,
+            ...props,
+            children: [
+                t20,
+                t24,
+                t26,
+                t30
+            ]
+        });
+        $[65] = props;
+        $[66] = t20;
+        $[67] = t24;
+        $[68] = t26;
+        $[69] = t30;
+        $[70] = t31;
+    } else {
+        t31 = $[70];
+    }
+    return t31;
 };
+function _temp(selected) {
+    switch(selected){
+        case "empty":
+            {
+                return "Empty";
+            }
+        case "null":
+            {
+                return "Null";
+            }
+        case "NaN":
+            {
+                return "NaN";
+            }
+        case "true":
+            {
+                return "True";
+            }
+        case "false":
+            {
+                return "False";
+            }
+        default:
+            {
+                return String(selected);
+            }
+    }
+}
 
 //# sourceMappingURL=ValueMappingEditor.js.map