@opengeoweb/taf 9.19.1 → 9.20.2

package/index.esm.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 import { Grid, Button, Chip, Box, Typography, TextField, Card, Tabs, Tab, Dialog, MenuList, MenuItem, Backdrop, CircularProgress } from '@mui/material';
@@ -162,7 +163,9 @@ var store$3 = sharedStore.exports = globalThis$1[SHARED] || defineGlobalProperty
   source: 'https://github.com/zloirock/core-js'
 });
 
-var store$2 = sharedStore.exports;
+var sharedStoreExports = sharedStore.exports;
+
+var store$2 = sharedStoreExports;
 
 var shared$4 = function (key, value) {
   return store$2[key] || (store$2[key] = value || {});
@@ -820,7 +823,7 @@ var global$e = global$m;
 var isObject$6 = isObject$b;
 var createNonEnumerableProperty$4 = createNonEnumerableProperty$5;
 var hasOwn$8 = hasOwnProperty_1;
-var shared$1 = sharedStore.exports;
+var shared$1 = sharedStoreExports;
 var sharedKey$1 = sharedKey$3;
 var hiddenKeys$1 = hiddenKeys$4;
 
@@ -949,7 +952,7 @@ var functionName = {
 
 var uncurryThis$g = functionUncurryThis;
 var isCallable$e = isCallable$l;
-var store = sharedStore.exports;
+var store = sharedStoreExports;
 
 var functionToString = uncurryThis$g(Function.toString);
 
@@ -1017,9 +1020,11 @@ Function.prototype.toString = makeBuiltIn$2(function toString() {
   return isCallable$d(this) && getInternalState$2(this).source || inspectSource$2(this);
 }, 'toString');
 
+var makeBuiltInExports = makeBuiltIn$3.exports;
+
 var isCallable$c = isCallable$l;
 var definePropertyModule$1 = objectDefineProperty;
-var makeBuiltIn$1 = makeBuiltIn$3.exports;
+var makeBuiltIn$1 = makeBuiltInExports;
 var defineGlobalProperty$1 = defineGlobalProperty$3;
 
 var defineBuiltIn$7 = function (O, key, value, options) {
@@ -1574,7 +1579,7 @@ var classof$7 = classofRaw$2;
 
 var engineIsNode = classof$7(global$c.process) === 'process';
 
-var makeBuiltIn = makeBuiltIn$3.exports;
+var makeBuiltIn = makeBuiltInExports;
 var defineProperty = objectDefineProperty;
 
 var defineBuiltInAccessor$1 = function (target, name, descriptor) {
@@ -3350,6 +3355,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 function __rest(s, e) {
     var t = {};
@@ -3506,19 +3513,27 @@ const ViewModeButtons = ({
   canBe,
   onTafViewModeButtonPress
 }) => {
-  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, canBe.includes('CANCELLED') && ( /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "canceltaf",
-    variant: "tertiary",
-    onClick: () => onTafViewModeButtonPress('CANCEL')
-  }, "Cancel")), canBe.includes('CORRECTED') && ( /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "correcttaf",
-    variant: "tertiary",
-    onClick: () => onTafViewModeButtonPress('CORRECT')
-  }, "Correct")), canBe.includes('AMENDED') && ( /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "amendtaf",
-    variant: "tertiary",
-    onClick: () => onTafViewModeButtonPress('AMEND')
-  }, "Amend"))));
+  return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : jsxs(Fragment, {
+    children: [canBe.includes('CANCELLED') && jsx(Button, Object.assign({
+      "data-testid": "canceltaf",
+      variant: "tertiary",
+      onClick: () => onTafViewModeButtonPress('CANCEL')
+    }, {
+      children: "Cancel"
+    })), canBe.includes('CORRECTED') && jsx(Button, Object.assign({
+      "data-testid": "correcttaf",
+      variant: "tertiary",
+      onClick: () => onTafViewModeButtonPress('CORRECT')
+    }, {
+      children: "Correct"
+    })), canBe.includes('AMENDED') && jsx(Button, Object.assign({
+      "data-testid": "amendtaf",
+      variant: "tertiary",
+      onClick: () => onTafViewModeButtonPress('AMEND')
+    }, {
+      children: "Amend"
+    }))]
+  });
 };
 const TafFormButtons = ({
   isFormDisabled: _isFormDisabled = false,
@@ -3527,58 +3542,70 @@ const TafFormButtons = ({
   onTafEditModeButtonPress,
   onTafViewModeButtonPress
 }) => {
-  return /*#__PURE__*/React__default.createElement(Grid, {
+  return jsxs(Grid, Object.assign({
     container: true,
     justifyContent: "flex-end",
     sx: buttonsStyle,
     columns: 24
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    justifyContent: "flex-end",
-    columns: 24,
-    xs: 24,
-    sm: 23
-  }, _isFormDisabled ? ( /*#__PURE__*/React__default.createElement(ViewModeButtons, {
-    canBe: _canBe,
-    onTafViewModeButtonPress: onTafViewModeButtonPress
-  })) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "cleartaf",
-    variant: "tertiary",
-    onClick: () => {
-      // Simply discard the changes and close the dialog.
-      onTafEditModeButtonPress('CLEAR');
-    }
-  }, "Clear"), /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "savedrafttaf",
-    variant: "tertiary",
-    onClick: () => {
-      /* Save the TAF as draft:
-      if action NEW or DRAFT - new status will be DRAFT -- default
-      if action AMEND - new status will be DRAFT_AMENDED
-      if action CORRECT - new status will be DRAFT_CORRECTED
-      if action DRAFT_AMEND - new status will be DRAFT_AMENDED
-      if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
-      */
-      onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
-    }
-  }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
-    "data-testid": "publishtaf",
-    variant: "tertiary",
-    onClick: () => {
-      /* Publish the TAF:
-      if action NEW or DRAFT - new status will be PUBLISHED -- default
-      if action AMEND - new status will be AMENDED
-      if action CORRECT - new status will be CORRECTED
-      if action DRAFT_AMEND - new status will be AMENDED
-      if action DRAFT_CORRECT - new status will be CORRECTED
-      */
-      onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
-    }
-  }, "Publish")))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    columns: 24,
-    sm: 1
+  }, {
+    children: [jsx(Grid, Object.assign({
+      item: true,
+      container: true,
+      justifyContent: "flex-end",
+      columns: 24,
+      xs: 24,
+      sm: 23
+    }, {
+      children: _isFormDisabled ? jsx(ViewModeButtons, {
+        canBe: _canBe,
+        onTafViewModeButtonPress: onTafViewModeButtonPress
+      }) : jsxs(Fragment, {
+        children: [jsx(Button, Object.assign({
+          "data-testid": "cleartaf",
+          variant: "tertiary",
+          onClick: () => {
+            // Simply discard the changes and close the dialog.
+            onTafEditModeButtonPress('CLEAR');
+          }
+        }, {
+          children: "Clear"
+        })), jsx(Button, Object.assign({
+          "data-testid": "savedrafttaf",
+          variant: "tertiary",
+          onClick: () => {
+            /* Save the TAF as draft:
+            if action NEW or DRAFT - new status will be DRAFT -- default
+            if action AMEND - new status will be DRAFT_AMENDED
+            if action CORRECT - new status will be DRAFT_CORRECTED
+            if action DRAFT_AMEND - new status will be DRAFT_AMENDED
+            if action DRAFT_CORRECT - new status will be DRAFT_CORRECTED
+            */
+            onTafEditModeButtonPress(tafActionToDraftAction(tafAction));
+          }
+        }, {
+          children: "Save"
+        })), jsx(Button, Object.assign({
+          "data-testid": "publishtaf",
+          variant: "tertiary",
+          onClick: () => {
+            /* Publish the TAF:
+            if action NEW or DRAFT - new status will be PUBLISHED -- default
+            if action AMEND - new status will be AMENDED
+            if action CORRECT - new status will be CORRECTED
+            if action DRAFT_AMEND - new status will be AMENDED
+            if action DRAFT_CORRECT - new status will be CORRECTED
+            */
+            onTafEditModeButtonPress(tafActionToPublishAction(tafAction));
+          }
+        }, {
+          children: "Publish"
+        }))]
+      })
+    })), jsx(Grid, {
+      item: true,
+      columns: 24,
+      sm: 1
+    })]
   }));
 };
 
@@ -6227,28 +6254,12 @@ const getFormRowPosition = formRow => {
   };
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
 const DragHandle = ({
   isSorting: _isSorting = false,
   isDisabled: _isDisabled = false,
   index
 }) => {
-  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+  return jsx(CustomIconButton, Object.assign({
     className: "handle",
     "data-testid": `dragHandle-${index}`,
     disableRipple: true,
@@ -6264,7 +6275,9 @@ const DragHandle = ({
         }
       }
     }
-  }, /*#__PURE__*/React__default.createElement(DragHandle$1, null));
+  }, {
+    children: jsx(DragHandle$1, {})
+  }));
 };
 
 /* *
@@ -6337,22 +6350,6 @@ const getErrors = errors => {
   return errorList;
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
- * */
 const IssuesButton = ({
   errors: _errors = {},
   isIssuesPaneOpen: _isIssuesPaneOpen = false,
@@ -6379,26 +6376,28 @@ const IssuesButton = ({
     };
     toggleIssuesPane(newPosition);
   };
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
+  return jsx(CustomTooltip, Object.assign({
     title: "View details"
-  }, /*#__PURE__*/React.createElement(Chip, {
-    "data-testid": "issuesButton",
-    className: `status-${errorStatus}`,
-    size: "small",
-    label: getIssuesLabel(totalErrors),
-    onClick: onClickButton,
-    sx: {
-      width: '74px',
-      color: '#ffffff',
-      backgroundColor: buttonColor,
-      '&:hover': {
-        backgroundColor: buttonColor
-      },
-      '&:focus': {
-        backgroundColor: buttonColor
-      },
-      fontSize: 12
-    }
+  }, {
+    children: jsx(Chip, {
+      "data-testid": "issuesButton",
+      className: `status-${errorStatus}`,
+      size: "small",
+      label: getIssuesLabel(totalErrors),
+      onClick: onClickButton,
+      sx: {
+        width: '74px',
+        color: '#ffffff',
+        backgroundColor: buttonColor,
+        '&:hover': {
+          backgroundColor: buttonColor
+        },
+        '&:focus': {
+          backgroundColor: buttonColor
+        },
+        fontSize: 12
+      }
+    })
   }));
 };
 
@@ -6457,7 +6456,7 @@ const IssuesPane = ({
   onUserHasDragged: _onUserHasDragged = () => {}
 }) => {
   const rootElement = document.getElementById(MODAL_DIALOG_ELEMENT) || document.body;
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(ToolContainerDraggable, {
+  return /*#__PURE__*/ReactDOM.createPortal(jsx(ToolContainerDraggable, Object.assign({
     startSize: {
       width: '577px',
       height: '200px'
@@ -6475,31 +6474,37 @@ const IssuesPane = ({
         _onUserHasDragged();
       }
     }
-  }, /*#__PURE__*/React.createElement(Box, {
-    component: "div",
-    sx: {
-      marginTop: '16px',
-      marginLeft: '24px'
-    }
-  }, _errorList.length === 0 && ( /*#__PURE__*/React.createElement(Box, {
-    component: "div",
-    sx: {
-      fontSize: '4rem'
-    },
-    "data-testid": "zeroIssuesImage"
-  }, /*#__PURE__*/React.createElement(ThumbsUp, {
-    sx: {
-      height: '69px',
-      width: '58px'
-    }
-  }))), _errorList.length > 0 && _errorList.map((error, index) => ( /*#__PURE__*/React.createElement(Typography
-  // eslint-disable-next-line react/no-array-index-key
-  , {
-    // eslint-disable-next-line react/no-array-index-key
-    key: `message-${index}`,
-    variant: "body1",
-    "data-testid": "errorMessage"
-  }, getErrorMessage(error, index)))))), rootElement);
+  }, {
+    children: jsxs(Box, Object.assign({
+      component: "div",
+      sx: {
+        marginTop: '16px',
+        marginLeft: '24px'
+      }
+    }, {
+      children: [_errorList.length === 0 && jsx(Box, Object.assign({
+        component: "div",
+        sx: {
+          fontSize: '4rem'
+        },
+        "data-testid": "zeroIssuesImage"
+      }, {
+        children: jsx(ThumbsUp, {
+          sx: {
+            height: '69px',
+            width: '58px'
+          }
+        })
+      })), _errorList.length > 0 && _errorList.map((error, index) => jsx(Typography
+      // eslint-disable-next-line react/no-array-index-key
+      , Object.assign({
+        variant: "body1",
+        "data-testid": "errorMessage"
+      }, {
+        children: getErrorMessage(error, index)
+      }), `message-${index}`))]
+    }))
+  })), rootElement);
 };
 
 const TafModuleContext = /*#__PURE__*/React.createContext({
@@ -6544,49 +6549,43 @@ const TafModuleProvider = ({
   const contextState = useTafModuleState({
     onPreventCloseView: _onPreventCloseView
   });
-  return /*#__PURE__*/React.createElement(TafModuleContext.Provider, {
+  return jsx(TafModuleContext.Provider, Object.assign({
     value: contextState
-  }, children);
+  }, {
+    children: children
+  }));
 };
 
 const TafAvatar = ({
   editor,
   tooltipPlacement: _tooltipPlacement = 'bottom'
 }) => {
-  return /*#__PURE__*/React.createElement(CustomTooltip, {
+  return jsx(CustomTooltip, Object.assign({
     title: `Editor: ${editor}`,
     placement: _tooltipPlacement
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Avatar, {
-    size: "small"
-  }, getInitials(editor))));
+  }, {
+    children: jsx("span", {
+      children: jsx(Avatar, Object.assign({
+        size: "small"
+      }, {
+        children: getInitials(editor)
+      }))
+    })
+  }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
 const TAF_MODULE_ID = 'tafmodule';
 const ResponsiveWrapper = ({
   children
-}) => ( /*#__PURE__*/React.createElement(Box, {
+}) => jsx(Box, Object.assign({
   sx: {
     containerType: 'inline-size',
     containerName: TAF_MODULE_ID,
     height: '100%'
   }
-}, children));
+}, {
+  children: children
+}));
 
 const textFieldStyle = (theme, shouldPreventUppercase) => ({
   // input
@@ -6669,7 +6668,7 @@ const BaseTextField = /*#__PURE__*/React__default.memo(_a => {
     props = __rest(_a, ["shouldPreventUppercase"]);
   const theme = useTheme();
   const styling = textFieldStyle(theme, shouldPreventUppercase);
-  return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
+  return jsx(TextField, Object.assign({
     type: "text",
     variant: "filled",
     sx: styling
@@ -6747,40 +6746,42 @@ const TafFormTextField = ({
     _onBlur();
   }, [_onBlur, _name, setValue, _shouldPreventUppercase]);
   const hasError = !!fieldErrors;
-  return /*#__PURE__*/React__default.createElement(Grid, {
+  return jsx(Grid, Object.assign({
     item: true,
     sx: {
       width: `${100 / 13}%`,
       minWidth: 60
     }
-  }, /*#__PURE__*/React__default.createElement(Controller, {
-    render: ({
-      field
-    }) => {
-      const displayValue = _formatter ? _formatter(field.value) : getDisplayValue(field.value, _disabled);
-      return /*#__PURE__*/React__default.createElement(BaseTextField, {
-        label: label,
-        disabled: _disabled,
-        name: _name,
-        value: displayValue,
-        inputRef: field.ref,
-        onChange: event => onChangeField(event, field.onChange),
-        onKeyDown: onKeyDown,
-        error: hasError,
-        onBlur: event => onBlurField(event, field.onBlur),
-        inputProps: {
-          maxLength,
-          className: 'inputText',
-          'aria-label': _name
-        },
-        autoFocus: _autoFocus,
-        shouldPreventUppercase: _shouldPreventUppercase
-      });
-    },
-    name: _name,
-    control: control,
-    defaultValue: _defaultValue,
-    rules: rules
+  }, {
+    children: jsx(Controller, {
+      render: ({
+        field
+      }) => {
+        const displayValue = _formatter ? _formatter(field.value) : getDisplayValue(field.value, _disabled);
+        return jsx(BaseTextField, {
+          label: label,
+          disabled: _disabled,
+          name: _name,
+          value: displayValue,
+          inputRef: field.ref,
+          onChange: event => onChangeField(event, field.onChange),
+          onKeyDown: onKeyDown,
+          error: hasError,
+          onBlur: event => onBlurField(event, field.onBlur),
+          inputProps: {
+            maxLength,
+            className: 'inputText',
+            'aria-label': _name
+          },
+          autoFocus: _autoFocus,
+          shouldPreventUppercase: _shouldPreventUppercase
+        });
+      },
+      name: _name,
+      control: control,
+      defaultValue: _defaultValue,
+      rules: rules
+    })
   }));
 };
 
@@ -6843,22 +6844,6 @@ const validateProbabilityField = value => {
   return isValid ? true : invalidProbabilityMessage;
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
 const TafFormOptionsButton = ({
   isChangeGroup,
   addChangeGroupBelow,
@@ -6869,27 +6854,27 @@ const TafFormOptionsButton = ({
 }) => {
   const insertAbove = {
     text: 'Insert 1 row above',
-    icon: /*#__PURE__*/React.createElement(Add, null),
+    icon: jsx(Add, {}),
     action: addChangeGroupAbove
   };
   const insertBelow = {
     text: 'Insert 1 row below',
-    icon: /*#__PURE__*/React.createElement(Add, null),
+    icon: jsx(Add, {}),
     action: addChangeGroupBelow
   };
   const deleteRow = {
     text: 'Delete row',
-    icon: /*#__PURE__*/React.createElement(Delete, null),
+    icon: jsx(Delete, {}),
     action: removeChangeGroup
   };
   const clear = {
     text: 'Clear row',
-    icon: /*#__PURE__*/React.createElement(Close, null),
+    icon: jsx(Close, {}),
     action: clearRow
   };
   const menuItemsBaseForecast = [insertBelow, clear];
   const menuItemsChangeGroup = [insertAbove, insertBelow, deleteRow, clear];
-  return /*#__PURE__*/React.createElement(ToggleMenu, {
+  return jsx(ToggleMenu, {
     buttonTestId: `tafFormOptions[${index}]`,
     buttonSx: {
       marginTop: '10px',
@@ -7017,7 +7002,7 @@ const TafFormRow = /*#__PURE__*/React__default.forwardRef((_a, ref) => {
   const clearRow = React__default.useCallback(() => {
     onClearRow(index);
   }, [onClearRow, index]);
-  return /*#__PURE__*/React__default.createElement(Grid, Object.assign({
+  return jsxs(Grid, Object.assign({
     sx: {
       marginTop: '8px',
       backgroundColor: 'geowebColors.cards.cardContainer',
@@ -7043,258 +7028,270 @@ const TafFormRow = /*#__PURE__*/React__default.forwardRef((_a, ref) => {
     ref: ref
   }, props, {
     className: "formRow"
-  }), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    justifyContent: "flex-end",
-    xs: true
-  }, !isChangeGroup && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Type",
-    name: fieldNames.messageType,
-    disabled: true
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Location",
-    name: "location",
-    disabled: true
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    formatter: formatIssueTime,
-    label: "Issue time",
-    name: "issueDate",
-    disabled: true,
-    shouldPreventUppercase: true
-  }))), isChangeGroup && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      marginRight: '2px',
-      minWidth: 60
-    },
-    display: "flex",
-    justifyContent: "center"
-  }, !disabled && dragHandle), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Prob",
-    name: fieldNames.probability,
-    disabled: disabled,
-    defaultValue: getDefaultValue('probability', field),
-    rules: {
-      validate: {
-        validateRequiredMainOptional,
-        validateProbabilityField
-      }
-    },
-    autoComplete: [{
-      key: '3',
-      value: 'PROB30'
+  }, {
+    children: [jsxs(Grid, Object.assign({
+      item: true,
+      container: true,
+      justifyContent: "flex-end",
+      xs: true
     }, {
-      key: '4',
-      value: 'PROB40'
-    }],
-    onBlur: () => {
-      if (isChangeGroup) {
-        const nextValidFieldName = getValidFieldFromNextRow();
-        trigger([...subFields, ...mainOptionalFields, ...mainFields, ...nextValidFieldName]);
-      }
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Change",
-    name: fieldNames.change,
-    disabled: disabled,
-    defaultValue: getDefaultValue('change', field),
-    rules: {
-      validate: {
-        validateRequiredMainOptional,
-        validateChangeField,
-        validateChangeFieldInterField: value => validateChangeFieldInterField(value, getValues(fieldNames.probability))
+      children: [!isChangeGroup && jsxs(Fragment, {
+        children: [jsx(TafFormTextField, {
+          label: "Type",
+          name: fieldNames.messageType,
+          disabled: true
+        }), jsx(TafFormTextField, {
+          label: "Location",
+          name: "location",
+          disabled: true
+        }), jsx(TafFormTextField, {
+          formatter: formatIssueTime,
+          label: "Issue time",
+          name: "issueDate",
+          disabled: true,
+          shouldPreventUppercase: true
+        })]
+      }), isChangeGroup && jsxs(Fragment, {
+        children: [jsx(Box, Object.assign({
+          sx: {
+            marginRight: '2px',
+            minWidth: 60
+          },
+          display: "flex",
+          justifyContent: "center"
+        }, {
+          children: !disabled && dragHandle
+        })), jsx(TafFormTextField, {
+          label: "Prob",
+          name: fieldNames.probability,
+          disabled: disabled,
+          defaultValue: getDefaultValue('probability', field),
+          rules: {
+            validate: {
+              validateRequiredMainOptional,
+              validateProbabilityField
+            }
+          },
+          autoComplete: [{
+            key: '3',
+            value: 'PROB30'
+          }, {
+            key: '4',
+            value: 'PROB40'
+          }],
+          onBlur: () => {
+            if (isChangeGroup) {
+              const nextValidFieldName = getValidFieldFromNextRow();
+              trigger([...subFields, ...mainOptionalFields, ...mainFields, ...nextValidFieldName]);
+            }
+          }
+        }), jsx(TafFormTextField, {
+          label: "Change",
+          name: fieldNames.change,
+          disabled: disabled,
+          defaultValue: getDefaultValue('change', field),
+          rules: {
+            validate: {
+              validateRequiredMainOptional,
+              validateChangeField,
+              validateChangeFieldInterField: value => validateChangeFieldInterField(value, getValues(fieldNames.probability))
+            }
+          },
+          autoComplete: [{
+            key: 'T',
+            value: 'TEMPO'
+          }, {
+            key: 'B',
+            value: 'BECMG'
+          }, {
+            key: 'F',
+            value: 'FM'
+          }],
+          onBlur: () => {
+            if (isChangeGroup) {
+              const nextValidFieldName = getValidFieldFromNextRow();
+              const previousValidFieldNames = getPreviousValidFields(index);
+              trigger([...subFields, ...mainOptionalFields, ...mainFields, ...nextValidFieldName, ...previousValidFieldNames]);
+            }
+          }
+        })]
+      }), jsx(TafFormTextField, {
+        label: "Valid",
+        name: fieldNames.valid,
+        // always disabled for baseforecast row
+        disabled: !isChangeGroup ? true : disabled,
+        defaultValue: getDefaultValue('valid', field),
+        rules: {
+          validate: {
+            validateRequiredMain,
+            validateValidField: value => isChangeGroup ? validateValidField(value, getValues('validDateStart'), getValues('validDateEnd')) : true,
+            validateValidChangeGroupInterField: value => isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues(fieldNames.probability), getValues('validDateStart'), getValues('validDateEnd')) : true,
+            validatePreviousRow,
+            validateNextRows
+          }
+        },
+        onBlur: () => {
+          if (isChangeGroup) {
+            const nextValidFieldName = getValidFieldFromNextRow();
+            const previousValidFieldNames = getPreviousValidFields(index);
+            trigger([...subFields, ...mainOptionalFields, ...mainFields, ...nextValidFieldName, ...previousValidFieldNames]);
+          }
+        }
+      }), jsx(TafFormTextField, {
+        label: "Wind",
+        name: fieldNames.wind,
+        disabled: disabled,
+        defaultValue: getDefaultValue('wind', field),
+        rules: {
+          validate: {
+            validateRequiredMainFields: value => validateRequiredMainFields(value, 'Wind'),
+            validateRequiredSub,
+            validateWindField: value => validateWindField(value, getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3))
+          }
+        },
+        onBlur: () => {
+          if (isChangeGroup) {
+            trigger([...subFields, ...mainFields]);
+          }
+        },
+        autoFocus: !isChangeGroup
+      }), jsx(TafFormTextField, {
+        label: "Visibility",
+        name: fieldNames.visibility,
+        disabled: disabled,
+        defaultValue: getDefaultValue('visibility', field),
+        rules: {
+          validate: {
+            validateRequiredMainFields: value => validateRequiredMainFields(value, 'Visibility'),
+            validateRequiredSub,
+            validateVisibilityField
+          }
+        },
+        autoComplete: [{
+          key: 'C',
+          value: 'CAVOK'
+        }],
+        onBlur: () => {
+          const fields = isChangeGroup ? [...subFields, ...mainFields] : subFields;
+          trigger([...fields, fieldNames.weather1, fieldNames.weather2, fieldNames.weather3]);
+        }
+      }), jsx(TafFormTextField, {
+        label: "Weather",
+        name: fieldNames.weather1,
+        disabled: disabled,
+        defaultValue: getDefaultValue('weather.weather1', field),
+        rules: {
+          validate: {
+            validateRequiredMainFields: value => validateRequiredMainFields(value, 'Weather'),
+            validateRequiredSub,
+            validateWeatherField: value => validateWeatherField(value, getValues(fieldNames.visibility), !!isChangeGroup)
+          }
+        },
+        onBlur: () => {
+          const fields = isChangeGroup ? [...subFields, ...mainFields] : [];
+          return trigger([...fields, fieldNames.weather2, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]);
+        }
+      }), jsx(TafFormTextField, {
+        label: "Weather",
+        name: fieldNames.weather2,
+        disabled: disabled,
+        defaultValue: getDefaultValue('weather.weather2', field),
+        rules: {
+          validate: {
+            validateSecondWeatherField: value => validateSecondWeatherField(getValues(fieldNames.weather1), value, getValues(fieldNames.visibility))
+          }
+        },
+        onBlur: () => {
+          const fields = isChangeGroup ? [...subFields, ...mainFields] : [];
+          return trigger([...fields, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]);
+        }
+      }), jsx(TafFormTextField, {
+        label: "Weather",
+        name: fieldNames.weather3,
+        disabled: disabled,
+        defaultValue: getDefaultValue('weather.weather3', field),
+        rules: {
+          validate: {
+            validateThirdWeatherField: value => validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value, getValues(fieldNames.visibility))
+          }
+        },
+        onBlur: () => {
+          return trigger([fieldNames.wind, fieldNames.cloud1]);
+        }
+      }), jsx(TafFormTextField, {
+        label: "Cloud",
+        name: fieldNames.cloud1,
+        disabled: disabled,
+        defaultValue: getDefaultValue('cloud.cloud1', field),
+        rules: {
+          validate: {
+            validateRequiredMainFields: value => validateRequiredMainFields(value, 'Clouds'),
+            validateRequiredSub,
+            validateFirstCloud: value => validateFirstCloud(value, getValues(fieldNames.visibility), getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3))
+          }
+        },
+        onBlur: () => {
+          const fields = isChangeGroup ? [...subFields, ...mainFields] : [];
+          return trigger([...fields, fieldNames.cloud2, fieldNames.cloud3, fieldNames.cloud4]);
+        }
+      }), jsx(TafFormTextField, {
+        label: "Cloud",
+        name: fieldNames.cloud2,
+        disabled: disabled,
+        defaultValue: getDefaultValue('cloud.cloud2', field),
+        rules: {
+          validate: {
+            validateSecondCloud: value => validateSecondCloud(getValues(fieldNames.cloud1), value, getValues(fieldNames.visibility))
+          }
+        },
+        onBlur: () => {
+          return trigger([fieldNames.cloud3, fieldNames.cloud4]);
+        }
+      }), jsx(TafFormTextField, {
+        label: "Cloud",
+        name: fieldNames.cloud3,
+        disabled: disabled,
+        defaultValue: getDefaultValue('cloud.cloud3', field),
+        rules: {
+          validate: {
+            validateThirdCloud: value => validateThirdCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), value, getValues(fieldNames.visibility))
+          }
+        },
+        onBlur: () => {
+          return trigger(fieldNames.cloud4);
+        }
+      }), jsx(TafFormTextField, {
+        label: "Cloud",
+        name: fieldNames.cloud4,
+        disabled: disabled,
+        defaultValue: getDefaultValue('cloud.cloud4', field),
+        rules: {
+          validate: {
+            validateFourthCloud: value => validateFourthCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), getValues(fieldNames.cloud3), value, getValues(fieldNames.visibility))
+          }
+        }
+      })]
+    })), !disabled && jsx(Grid, Object.assign({
+      item: true,
+      container: true,
+      justifyContent: "flex-end",
+      alignItems: "flex-end",
+      sx: {
+        width: '3.5%',
+        marginBottom: '14px',
+        minWidth: 28
       }
-    },
-    autoComplete: [{
-      key: 'T',
-      value: 'TEMPO'
-    }, {
-      key: 'B',
-      value: 'BECMG'
     }, {
-      key: 'F',
-      value: 'FM'
-    }],
-    onBlur: () => {
-      if (isChangeGroup) {
-        const nextValidFieldName = getValidFieldFromNextRow();
-        const previousValidFieldNames = getPreviousValidFields(index);
-        trigger([...subFields, ...mainOptionalFields, ...mainFields, ...nextValidFieldName, ...previousValidFieldNames]);
-      }
-    }
-  }))), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Valid",
-    name: fieldNames.valid,
-    // always disabled for baseforecast row
-    disabled: !isChangeGroup ? true : disabled,
-    defaultValue: getDefaultValue('valid', field),
-    rules: {
-      validate: {
-        validateRequiredMain,
-        validateValidField: value => isChangeGroup ? validateValidField(value, getValues('validDateStart'), getValues('validDateEnd')) : true,
-        validateValidChangeGroupInterField: value => isChangeGroup ? validateValidChangeGroupInterField(value, getValues(fieldNames.change), getValues(fieldNames.probability), getValues('validDateStart'), getValues('validDateEnd')) : true,
-        validatePreviousRow,
-        validateNextRows
-      }
-    },
-    onBlur: () => {
-      if (isChangeGroup) {
-        const nextValidFieldName = getValidFieldFromNextRow();
-        const previousValidFieldNames = getPreviousValidFields(index);
-        trigger([...subFields, ...mainOptionalFields, ...mainFields, ...nextValidFieldName, ...previousValidFieldNames]);
-      }
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Wind",
-    name: fieldNames.wind,
-    disabled: disabled,
-    defaultValue: getDefaultValue('wind', field),
-    rules: {
-      validate: {
-        validateRequiredMainFields: value => validateRequiredMainFields(value, 'Wind'),
-        validateRequiredSub,
-        validateWindField: value => validateWindField(value, getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3))
-      }
-    },
-    onBlur: () => {
-      if (isChangeGroup) {
-        trigger([...subFields, ...mainFields]);
-      }
-    },
-    autoFocus: !isChangeGroup
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Visibility",
-    name: fieldNames.visibility,
-    disabled: disabled,
-    defaultValue: getDefaultValue('visibility', field),
-    rules: {
-      validate: {
-        validateRequiredMainFields: value => validateRequiredMainFields(value, 'Visibility'),
-        validateRequiredSub,
-        validateVisibilityField
-      }
-    },
-    autoComplete: [{
-      key: 'C',
-      value: 'CAVOK'
-    }],
-    onBlur: () => {
-      const fields = isChangeGroup ? [...subFields, ...mainFields] : subFields;
-      trigger([...fields, fieldNames.weather1, fieldNames.weather2, fieldNames.weather3]);
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Weather",
-    name: fieldNames.weather1,
-    disabled: disabled,
-    defaultValue: getDefaultValue('weather.weather1', field),
-    rules: {
-      validate: {
-        validateRequiredMainFields: value => validateRequiredMainFields(value, 'Weather'),
-        validateRequiredSub,
-        validateWeatherField: value => validateWeatherField(value, getValues(fieldNames.visibility), !!isChangeGroup)
-      }
-    },
-    onBlur: () => {
-      const fields = isChangeGroup ? [...subFields, ...mainFields] : [];
-      return trigger([...fields, fieldNames.weather2, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]);
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Weather",
-    name: fieldNames.weather2,
-    disabled: disabled,
-    defaultValue: getDefaultValue('weather.weather2', field),
-    rules: {
-      validate: {
-        validateSecondWeatherField: value => validateSecondWeatherField(getValues(fieldNames.weather1), value, getValues(fieldNames.visibility))
-      }
-    },
-    onBlur: () => {
-      const fields = isChangeGroup ? [...subFields, ...mainFields] : [];
-      return trigger([...fields, fieldNames.weather3, fieldNames.wind, fieldNames.cloud1]);
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Weather",
-    name: fieldNames.weather3,
-    disabled: disabled,
-    defaultValue: getDefaultValue('weather.weather3', field),
-    rules: {
-      validate: {
-        validateThirdWeatherField: value => validateThirdWeatherField(getValues(fieldNames.weather1), getValues(fieldNames.weather2), value, getValues(fieldNames.visibility))
-      }
-    },
-    onBlur: () => {
-      return trigger([fieldNames.wind, fieldNames.cloud1]);
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Cloud",
-    name: fieldNames.cloud1,
-    disabled: disabled,
-    defaultValue: getDefaultValue('cloud.cloud1', field),
-    rules: {
-      validate: {
-        validateRequiredMainFields: value => validateRequiredMainFields(value, 'Clouds'),
-        validateRequiredSub,
-        validateFirstCloud: value => validateFirstCloud(value, getValues(fieldNames.visibility), getValues(fieldNames.weather1), getValues(fieldNames.weather2), getValues(fieldNames.weather3))
-      }
-    },
-    onBlur: () => {
-      const fields = isChangeGroup ? [...subFields, ...mainFields] : [];
-      return trigger([...fields, fieldNames.cloud2, fieldNames.cloud3, fieldNames.cloud4]);
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Cloud",
-    name: fieldNames.cloud2,
-    disabled: disabled,
-    defaultValue: getDefaultValue('cloud.cloud2', field),
-    rules: {
-      validate: {
-        validateSecondCloud: value => validateSecondCloud(getValues(fieldNames.cloud1), value, getValues(fieldNames.visibility))
-      }
-    },
-    onBlur: () => {
-      return trigger([fieldNames.cloud3, fieldNames.cloud4]);
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Cloud",
-    name: fieldNames.cloud3,
-    disabled: disabled,
-    defaultValue: getDefaultValue('cloud.cloud3', field),
-    rules: {
-      validate: {
-        validateThirdCloud: value => validateThirdCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), value, getValues(fieldNames.visibility))
-      }
-    },
-    onBlur: () => {
-      return trigger(fieldNames.cloud4);
-    }
-  }), /*#__PURE__*/React__default.createElement(TafFormTextField, {
-    label: "Cloud",
-    name: fieldNames.cloud4,
-    disabled: disabled,
-    defaultValue: getDefaultValue('cloud.cloud4', field),
-    rules: {
-      validate: {
-        validateFourthCloud: value => validateFourthCloud(getValues(fieldNames.cloud1), getValues(fieldNames.cloud2), getValues(fieldNames.cloud3), value, getValues(fieldNames.visibility))
-      }
-    }
-  })), !disabled && ( /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    container: true,
-    justifyContent: "flex-end",
-    alignItems: "flex-end",
-    sx: {
-      width: '3.5%',
-      marginBottom: '14px',
-      minWidth: 28
-    }
-  }, /*#__PURE__*/React__default.createElement(TafFormOptionsButton, {
-    isChangeGroup: isChangeGroup,
-    addChangeGroupBelow: addChangeGroupBelow,
-    addChangeGroupAbove: addChangeGroupAbove,
-    removeChangeGroup: () => onRemoveChangeGroup === null || onRemoveChangeGroup === void 0 ? void 0 : onRemoveChangeGroup(index),
-    clearRow: clearRow,
-    index: index
-  }))));
+      children: jsx(TafFormOptionsButton, {
+        isChangeGroup: isChangeGroup,
+        addChangeGroupBelow: addChangeGroupBelow,
+        addChangeGroupAbove: addChangeGroupAbove,
+        removeChangeGroup: () => onRemoveChangeGroup === null || onRemoveChangeGroup === void 0 ? void 0 : onRemoveChangeGroup(index),
+        clearRow: clearRow,
+        index: index
+      })
+    }))]
+  }));
 });
 
 // prevents default functionality
@@ -7631,97 +7628,109 @@ const TafForm = /*#__PURE__*/React__default.memo(({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shouldValidate, _isDisabled]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      position: 'absolute',
-      top: {
-        xs: '34px',
-        sm: '-3px'
-      },
-      right: {
-        xs: 'calc(50% -  70px)',
-        sm: '8px'
-      }
-    }
-  }, /*#__PURE__*/React__default.createElement(SwitchButton, {
-    checked: isEditor,
-    onChange: onSwitchMode
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      width: '16px',
-      marginLeft: 1
-    }
-  }, editor && /*#__PURE__*/React__default.createElement(TafAvatar, {
-    editor: editor
-  }))), /*#__PURE__*/React__default.createElement("form", {
-    "data-testid": "taf-form",
-    onSubmit: handleSubmit(onSubmit),
-    ref: formRef
-  }, /*#__PURE__*/React__default.createElement(TafFormRow, {
-    disabled: _isDisabled,
-    onAddChangeGroupBelow: onAddRow,
-    onClearRow: onClearRow,
-    isNotRequiredForAction: isNotRequiredForAction
-  }), /*#__PURE__*/React__default.createElement(ReactSortable, {
-    tag: "div",
-    list: fields,
-    setList: noop,
-    animation: 200,
-    onSort: onChangeOrder,
-    handle: ".handle",
-    direction: "vertical",
-    // hover props
-    forceFallback: false,
-    onStart: event => {
-      onStartDrag(event);
-      if (Sortable.ghost) {
-        Sortable.ghost.style.opacity = '1';
+  return jsxs(Fragment, {
+    children: [jsxs(Box, Object.assign({
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        position: 'absolute',
+        top: {
+          xs: '34px',
+          sm: '-3px'
+        },
+        right: {
+          xs: 'calc(50% -  70px)',
+          sm: '8px'
+        }
       }
-    }
-  }, fields.map((item, index) => ( /*#__PURE__*/React__default.createElement(TafFormRow, {
-    field: item,
-    key: item.id,
-    index: index,
-    disabled: _isDisabled,
-    onRemoveChangeGroup: onRemoverow,
-    onAddChangeGroupBelow: onAddRow,
-    onAddChangeGroupAbove: () => onAddRow(index, true),
-    onClearRow: () => onClearRow(index, true),
-    isChangeGroup: true,
-    dragHandle: /*#__PURE__*/React__default.createElement(DragHandle, {
-      isDisabled: fields.length === 1 || _isDisabled,
-      isSorting: activeDraggingIndex === index,
-      index: index
-    }),
-    isNotRequiredForAction: isNotRequiredForAction
-  })))), !_isDisabled && isEditor && ( /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "space-between",
-    alignItems: "center",
-    sx: {
-      marginLeft: 1.5,
-      marginTop: 1
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(IssuesButton, {
-    errors: errors,
-    isIssuesPaneOpen: _isIssuesPaneOpen,
-    setIsIssuesPaneOpen: _setIsIssuesPaneOpen
-  })))), isEditor && ( /*#__PURE__*/React__default.createElement(TafFormButtons, {
-    isFormDisabled: _isDisabled,
-    tafAction: tafAction,
-    canBe: tafFromBackend.canbe,
-    onTafEditModeButtonPress: onTafEditModeButtonPress,
-    onTafViewModeButtonPress: onTafViewModeButtonPress
-  })), hiddenInputFields.map(field => ( /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
-    name: field,
-    key: field,
-    "data-testid": field
-  })))));
+    }, {
+      children: [jsx(SwitchButton, {
+        checked: isEditor,
+        onChange: onSwitchMode
+      }), jsx(Box, Object.assign({
+        sx: {
+          width: '16px',
+          marginLeft: 1
+        }
+      }, {
+        children: editor && jsx(TafAvatar, {
+          editor: editor
+        })
+      }))]
+    })), jsxs("form", Object.assign({
+      "data-testid": "taf-form",
+      onSubmit: handleSubmit(onSubmit),
+      ref: formRef
+    }, {
+      children: [jsx(TafFormRow, {
+        disabled: _isDisabled,
+        onAddChangeGroupBelow: onAddRow,
+        onClearRow: onClearRow,
+        isNotRequiredForAction: isNotRequiredForAction
+      }), jsx(ReactSortable, Object.assign({
+        tag: "div",
+        list: fields,
+        setList: noop,
+        animation: 200,
+        onSort: onChangeOrder,
+        handle: ".handle",
+        direction: "vertical",
+        // hover props
+        forceFallback: false,
+        onStart: event => {
+          onStartDrag(event);
+          if (Sortable.ghost) {
+            Sortable.ghost.style.opacity = '1';
+          }
+        }
+      }, {
+        children: fields.map((item, index) => jsx(TafFormRow, {
+          field: item,
+          index: index,
+          disabled: _isDisabled,
+          onRemoveChangeGroup: onRemoverow,
+          onAddChangeGroupBelow: onAddRow,
+          onAddChangeGroupAbove: () => onAddRow(index, true),
+          onClearRow: () => onClearRow(index, true),
+          isChangeGroup: true,
+          dragHandle: jsx(DragHandle, {
+            isDisabled: fields.length === 1 || _isDisabled,
+            isSorting: activeDraggingIndex === index,
+            index: index
+          }),
+          isNotRequiredForAction: isNotRequiredForAction
+        }, item.id))
+      })), !_isDisabled && isEditor && jsx(Grid, Object.assign({
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        sx: {
+          marginLeft: 1.5,
+          marginTop: 1
+        }
+      }, {
+        children: jsx(Grid, Object.assign({
+          item: true
+        }, {
+          children: jsx(IssuesButton, {
+            errors: errors,
+            isIssuesPaneOpen: _isIssuesPaneOpen,
+            setIsIssuesPaneOpen: _setIsIssuesPaneOpen
+          })
+        }))
+      })), isEditor && jsx(TafFormButtons, {
+        isFormDisabled: _isDisabled,
+        tafAction: tafAction,
+        canBe: tafFromBackend.canbe,
+        onTafEditModeButtonPress: onTafEditModeButtonPress,
+        onTafViewModeButtonPress: onTafViewModeButtonPress
+      }), hiddenInputFields.map(field => jsx(ReactHookFormHiddenInput, {
+        name: field,
+        "data-testid": field
+      }, field))]
+    }))]
+  });
 }, (prevProps, nextProps) => {
   // prevent re-render
   return !nextProps.isDisabled && prevProps.tafFromBackend !== nextProps.tafFromBackend &&
@@ -7736,26 +7745,30 @@ const TabPanel = _a => {
       index
     } = _a,
     other = __rest(_a, ["children", "value", "index"]);
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
+  return jsx(Box, Object.assign({
     role: "tabpanel",
     hidden: value !== index,
     id: `simple-tabpanel-${index}`,
     "aria-labelledby": `simple-tab-${index}`,
     "data-testid": `tab-panel-${index}`
-  }, other), value === index && children);
+  }, other, {
+    children: value === index && children
+  }));
 };
 
 const TafHeader = ({
   title,
   sx: _sx = {}
-}) => ( /*#__PURE__*/React__default.createElement(Typography, {
+}) => jsx(Typography, Object.assign({
   sx: Object.assign({
     textAlign: 'center',
     fontWeight: 500,
     paddingTop: '4px',
     textTransform: 'capitalize'
   }, _sx)
-}, title));
+}, {
+  children: title
+}));
 
 var tryToString = tryToString$5;
 
@@ -8096,32 +8109,20 @@ const getPreviousTaf = (tafList, currentTaf) => {
   return previousTaf ? previousTaf.taf : null;
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
 const IconWithTooltip = ({
   title,
   children
-}) => ( /*#__PURE__*/React.createElement(CustomTooltip, {
+}) => jsx(CustomTooltip, Object.assign({
   title: title,
   placement: "right",
   "data-testid": "statusIcon-tooltip"
-}, /*#__PURE__*/React.createElement(Box, {
-  component: "span"
-}, children)));
+}, {
+  children: jsx(Box, Object.assign({
+    component: "span"
+  }, {
+    children: children
+  }))
+}));
 const StatusIcon = ({
   status,
   timeSlot
@@ -8130,48 +8131,56 @@ const StatusIcon = ({
     case 'DRAFT':
     case 'DRAFT_AMENDED':
     case 'DRAFT_CORRECTED':
-      return /*#__PURE__*/React.createElement(IconWithTooltip, {
+      return jsx(IconWithTooltip, Object.assign({
         title: getTafStatusLabel(status)
-      }, /*#__PURE__*/React.createElement(Edit, {
-        "data-testid": "status-draft",
-        sx: {
-          color: 'geowebColors.buttons.tertiary.default.color'
-        }
+      }, {
+        children: jsx(Edit, {
+          "data-testid": "status-draft",
+          sx: {
+            color: 'geowebColors.buttons.tertiary.default.color'
+          }
+        })
       }));
     case 'PUBLISHED':
     case 'CORRECTED':
     case 'AMENDED':
-      return /*#__PURE__*/React.createElement(IconWithTooltip, {
+      return jsx(IconWithTooltip, Object.assign({
         title: getTafStatusLabel(status)
-      }, timeSlot === 'ACTIVE' ? ( /*#__PURE__*/React.createElement(Success, {
-        "data-testid": "status-active",
-        sx: {
-          color: 'geowebColors.functional.success'
-        }
-      })) : ( /*#__PURE__*/React.createElement(Clock, {
-        "data-testid": "status-upcoming",
-        sx: {
-          color: 'geowebColors.functional.success'
-        }
-      })));
+      }, {
+        children: timeSlot === 'ACTIVE' ? jsx(Success, {
+          "data-testid": "status-active",
+          sx: {
+            color: 'geowebColors.functional.success'
+          }
+        }) : jsx(Clock, {
+          "data-testid": "status-upcoming",
+          sx: {
+            color: 'geowebColors.functional.success'
+          }
+        })
+      }));
     case 'CANCELLED':
-      return /*#__PURE__*/React.createElement(IconWithTooltip, {
+      return jsx(IconWithTooltip, Object.assign({
         title: getTafStatusLabel(status)
-      }, /*#__PURE__*/React.createElement(Cancel, {
-        "data-testid": "status-cancelled",
-        sx: {
-          color: 'geowebColors.captions.captionError.rgba'
-        }
+      }, {
+        children: jsx(Cancel, {
+          "data-testid": "status-cancelled",
+          sx: {
+            color: 'geowebColors.captions.captionError.rgba'
+          }
+        })
       }));
     case 'EXPIRED':
-      return /*#__PURE__*/React.createElement(IconWithTooltip, {
+      return jsx(IconWithTooltip, Object.assign({
         title: getTafStatusLabel(status)
-      }, /*#__PURE__*/React.createElement(Clock, {
-        "data-testid": "status-expired",
-        sx: {
-          transform: 'scaleX(-1)',
-          color: 'geowebColors.buttons.tertiary.disabled.color'
-        }
+      }, {
+        children: jsx(Clock, {
+          "data-testid": "status-expired",
+          sx: {
+            transform: 'scaleX(-1)',
+            color: 'geowebColors.buttons.tertiary.disabled.color'
+          }
+        })
       }));
     case 'NEW':
     default:
@@ -8179,28 +8188,12 @@ const StatusIcon = ({
   }
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
 const TOOLTIP_TITLE = 'Import TAC';
 const ExportButton = ({
   onClick,
   isHidden
 }) => {
-  return isHidden ? null : ( /*#__PURE__*/React__default.createElement(CustomIconButton, {
+  return isHidden ? null : jsx(CustomIconButton, Object.assign({
     onClick: onClick,
     "data-testid": "export-tac-button",
     variant: "tool",
@@ -8208,14 +8201,16 @@ const ExportButton = ({
       title: TOOLTIP_TITLE,
       placement: 'left'
     }
-  }, /*#__PURE__*/React__default.createElement(Export, null)));
+  }, {
+    children: jsx(Export, {})
+  }));
 };
 
 const AdverseWeatherTACMessage = ({
   TAC,
   isActive
 }) => {
-  return /*#__PURE__*/React__default.createElement(Box$1, {
+  return jsx(Box$1, Object.assign({
     "data-testid": "adverse-weather-tac",
     sx: {
       fontSize: '12px',
@@ -8223,26 +8218,30 @@ const AdverseWeatherTACMessage = ({
       letterSpacing: '0.4px',
       color: 'geowebColors.captions.captionStatus.rgba'
     }
-  }, TAC.tac.map((line, index) => ( /*#__PURE__*/React__default.createElement(Box$1, {
-    key: line.toString() + index.toString(),
-    component: "span",
-    sx: {
-      display: 'block'
-    }
-  }, line.map((word, index) => ( /*#__PURE__*/React__default.createElement(Box$1, {
-    key: word.text + index.toString(),
-    component: "span",
-    sx: Object.assign(Object.assign({
-      display: 'inline',
-      boxDecorationBreak: 'clone',
-      WebkitBoxDecorationBreak: 'clone'
-    }, isActive && {
-      backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
-    }), word.type === 'adverse' && {
-      color: 'geowebColors.captions.captionError.rgba',
-      fontWeight: 'bold'
-    })
-  }, word.text === '=' ? `${word.text}` : ` ${word.text}`)))))));
+  }, {
+    children: TAC.tac.map((line, index) => jsx(Box$1, Object.assign({
+      component: "span",
+      sx: {
+        display: 'block'
+      }
+    }, {
+      children: line.map((word, index) => jsx(Box$1, Object.assign({
+        component: "span",
+        sx: Object.assign(Object.assign({
+          display: 'inline',
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone'
+        }, isActive && {
+          backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
+        }), word.type === 'adverse' && {
+          color: 'geowebColors.captions.captionError.rgba',
+          fontWeight: 'bold'
+        })
+      }, {
+        children: word.text === '=' ? `${word.text}` : ` ${word.text}`
+      }), word.text + index.toString()))
+    }), line.toString() + index.toString()))
+  }));
 };
 
 const getSnackbarMessage$1 = (location, locationLabel) => {
@@ -8309,7 +8308,7 @@ const TacContainer = ({
       retrieveTAC(taf);
     }
   }, [taf, _isActive, retrieveTAC]);
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return jsxs(Box, Object.assign({
     sx: {
       marginBottom: '20px'
     },
@@ -8317,75 +8316,93 @@ const TacContainer = ({
     className: _isActive ? 'active' : undefined,
     role: "listitem",
     "aria-label": location
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      height: 24
-    }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      width: 24,
-      height: 24,
-      display: 'flex',
-      marginRight: '2px',
-      paddingTop: '6px',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement(StatusIcon, {
-    timeSlot: timeSlot,
-    status: status
-  })), /*#__PURE__*/React__default.createElement(Typography, {
-    sx: Object.assign({
-      lineHeight: 1
-    }, _isActive && {
-      backgroundColor: 'geowebColors.functional.warningHighlight.rgba',
-      padding: '0 2px',
-      marginLeft: '-2px'
-    })
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      fontSize: '12px',
-      color: 'geowebColors.captions.captionInformation.rgba'
-    },
-    "data-testid": "tafLocation",
-    component: "span"
-  }, location), /*#__PURE__*/React__default.createElement(Typography, {
-    sx: {
-      fontSize: '12px',
-      marginLeft: '10px'
-    },
-    "data-testid": "tafLocationLabel",
-    component: "span"
-  }, locationLabel))), /*#__PURE__*/React__default.createElement(ExportButton, {
-    onClick: handleExport,
-    isHidden: _isFormDisabled || tacHasError(TAC)
-  })), /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      fontSize: '12px',
-      letterSpacing: '0.4px',
-      color: 'geowebColors.captions.captionStatus.rgba'
-    }
-  }, typeof TAC === 'string' ? ( /*#__PURE__*/React__default.createElement(Box, {
-    component: "span",
-    sx: Object.assign({
-      display: 'inline',
-      boxDecorationBreak: 'clone',
-      WebkitBoxDecorationBreak: 'clone'
-    }, _isActive && {
-      backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
-    })
-  }, TAC)) : ( /*#__PURE__*/React__default.createElement(AdverseWeatherTACMessage, {
-    TAC: TAC,
-    isActive: _isActive
-  }))));
+  }, {
+    children: [jsxs(Box, Object.assign({
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 24
+      }
+    }, {
+      children: [jsxs(Box, Object.assign({
+        sx: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, {
+        children: [jsx(Box, Object.assign({
+          sx: {
+            width: 24,
+            height: 24,
+            display: 'flex',
+            marginRight: '2px',
+            paddingTop: '6px',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }
+        }, {
+          children: jsx(StatusIcon, {
+            timeSlot: timeSlot,
+            status: status
+          })
+        })), jsxs(Typography, Object.assign({
+          sx: Object.assign({
+            lineHeight: 1
+          }, _isActive && {
+            backgroundColor: 'geowebColors.functional.warningHighlight.rgba',
+            padding: '0 2px',
+            marginLeft: '-2px'
+          })
+        }, {
+          children: [jsx(Typography, Object.assign({
+            sx: {
+              fontSize: '12px',
+              color: 'geowebColors.captions.captionInformation.rgba'
+            },
+            "data-testid": "tafLocation",
+            component: "span"
+          }, {
+            children: location
+          })), jsx(Typography, Object.assign({
+            sx: {
+              fontSize: '12px',
+              marginLeft: '10px'
+            },
+            "data-testid": "tafLocationLabel",
+            component: "span"
+          }, {
+            children: locationLabel
+          }))]
+        }))]
+      })), jsx(ExportButton, {
+        onClick: handleExport,
+        isHidden: _isFormDisabled || tacHasError(TAC)
+      })]
+    })), jsx(Box, Object.assign({
+      sx: {
+        fontSize: '12px',
+        letterSpacing: '0.4px',
+        color: 'geowebColors.captions.captionStatus.rgba'
+      }
+    }, {
+      children: typeof TAC === 'string' ? jsx(Box, Object.assign({
+        component: "span",
+        sx: Object.assign({
+          display: 'inline',
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone'
+        }, _isActive && {
+          backgroundColor: 'geowebColors.functional.warningHighlight.rgba'
+        })
+      }, {
+        children: TAC
+      })) : jsx(AdverseWeatherTACMessage, {
+        TAC: TAC,
+        isActive: _isActive
+      })
+    }))]
+  }));
 };
 
 const TacOverview = ({
@@ -8437,7 +8454,7 @@ const TacOverview = ({
       clearTimeout(timer);
     };
   }, [activeTab, scrollToPosition]);
-  return /*#__PURE__*/React__default.createElement(Card, {
+  return jsxs(Card, Object.assign({
     variant: "outlined",
     sx: {
       maxHeight: '100%',
@@ -8445,47 +8462,54 @@ const TacOverview = ({
       display: 'flex',
       flexDirection: 'column'
     }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      zIndex: 1
-    }
-  }, !_hideTitle && /*#__PURE__*/React__default.createElement(TafHeader, {
-    title: "TAC Overview"
-  }), /*#__PURE__*/React__default.createElement(Tabs, {
-    value: activeTab,
-    onChange: onChangeTab,
-    "aria-label": "tabs"
-  }, tabs.map((tab, index) => ( /*#__PURE__*/React__default.createElement(Tab, Object.assign({
-    key: tab.title,
-    sx: {
-      flexGrow: 1
-    },
-    label: tab.title,
-    "data-testid": `tab-${index}`
-  }, muiTabA11yProps(index))))))), /*#__PURE__*/React__default.createElement(Box, {
-    ref: scrollRef,
-    sx: {
-      padding: {
-        xs: '12px',
-        sm: '6px',
-        md: '16px',
-        lg: '24px'
-      },
-      maxHeight: '100%',
-      overflow: 'auto'
-    }
-  }, tabs.map((tab, index) => ( /*#__PURE__*/React__default.createElement(TabPanel, {
-    key: tab.title,
-    value: activeTab,
-    index: index
-  }, tab.tafList.map(({
-    taf
-  }) => ( /*#__PURE__*/React__default.createElement(TacContainer, {
-    key: taf.uuid,
-    taf: taf,
-    isActive: isActiveLocation(taf.location),
-    isFormDisabled: _isFormDisabled
-  }))))))));
+  }, {
+    children: [jsxs(Box, Object.assign({
+      sx: {
+        zIndex: 1
+      }
+    }, {
+      children: [!_hideTitle && jsx(TafHeader, {
+        title: "TAC Overview"
+      }), jsx(Tabs, Object.assign({
+        value: activeTab,
+        onChange: onChangeTab,
+        "aria-label": "tabs"
+      }, {
+        children: tabs.map((tab, index) => jsx(Tab, Object.assign({
+          sx: {
+            flexGrow: 1
+          },
+          label: tab.title,
+          "data-testid": `tab-${index}`
+        }, muiTabA11yProps(index)), tab.title))
+      }))]
+    })), jsx(Box, Object.assign({
+      ref: scrollRef,
+      sx: {
+        padding: {
+          xs: '12px',
+          sm: '6px',
+          md: '16px',
+          lg: '24px'
+        },
+        maxHeight: '100%',
+        overflow: 'auto'
+      }
+    }, {
+      children: tabs.map((tab, index) => jsx(TabPanel, Object.assign({
+        value: activeTab,
+        index: index
+      }, {
+        children: tab.tafList.map(({
+          taf
+        }) => jsx(TacContainer, {
+          taf: taf,
+          isActive: isActiveLocation(taf.location),
+          isFormDisabled: _isFormDisabled
+        }, taf.uuid))
+      }), tab.title))
+    }))]
+  }));
 };
 
 const TacOverviewMobile = ({
@@ -8497,43 +8521,49 @@ const TacOverviewMobile = ({
 }) => {
   const [isOpen, toggleOpen] = React.useState(_defaultOpen);
   const onClose = () => toggleOpen(false);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
-    isSelected: isOpen,
-    onClick: () => toggleOpen(true),
-    "data-testid": "tac-overview-mobile-button",
-    sx: {
-      display: {
-        xs: 'inline-flex',
-        sm: 'none'
-      },
-      position: 'absolute',
-      right: '4px',
-      top: '42px'
-    },
-    variant: "tool"
-  }, /*#__PURE__*/React.createElement(ListItem, null)), /*#__PURE__*/React.createElement(Dialog, {
-    open: isOpen,
-    onClose: onClose,
-    PaperProps: {
+  return jsxs(Fragment, {
+    children: [jsx(CustomIconButton, Object.assign({
+      isSelected: isOpen,
+      onClick: () => toggleOpen(true),
+      "data-testid": "tac-overview-mobile-button",
       sx: {
-        margin: 2,
-        width: '100%',
-        height: '100%'
-      }
-    },
-    "data-testid": "tac-overview-mobile"
-  }, /*#__PURE__*/React.createElement(ToolHeader, {
-    title: "TAC Overview",
-    size: "small",
-    isDraggable: false,
-    onClose: onClose
-  }), /*#__PURE__*/React.createElement(TacOverview, {
-    upcomingTafs: upcomingTafs,
-    currentTafs: currentTafs,
-    expiredTafs: expiredTafs,
-    activeTaf: activeTaf,
-    hideTitle: true
-  })));
+        display: {
+          xs: 'inline-flex',
+          sm: 'none'
+        },
+        position: 'absolute',
+        right: '4px',
+        top: '42px'
+      },
+      variant: "tool"
+    }, {
+      children: jsx(ListItem, {})
+    })), jsxs(Dialog, Object.assign({
+      open: isOpen,
+      onClose: onClose,
+      PaperProps: {
+        sx: {
+          margin: 2,
+          width: '100%',
+          height: '100%'
+        }
+      },
+      "data-testid": "tac-overview-mobile"
+    }, {
+      children: [jsx(ToolHeader, {
+        title: "TAC Overview",
+        size: "small",
+        isDraggable: false,
+        onClose: onClose
+      }), jsx(TacOverview, {
+        upcomingTafs: upcomingTafs,
+        currentTafs: currentTafs,
+        expiredTafs: expiredTafs,
+        activeTaf: activeTaf,
+        hideTitle: true
+      })]
+    }))]
+  });
 };
 
 const formatBaseTime = time => dateUtils.dateToString(time, DATE_FORMAT_BASE_TIME);
@@ -8570,38 +8600,23 @@ const TopTabs = ({
   const onChangeTab = (_event, newValue) => {
     _onChangeTimeSlot(tabs[newValue].timeSlot, isDirty);
   };
-  return /*#__PURE__*/React__default.createElement(Tabs, {
+  return jsx(Tabs, Object.assign({
     value: activeTab,
     onChange: onChangeTab,
     "aria-label": "timeslot-tabs",
     "data-testid": "timeslot-tabs",
     variant: "fullWidth"
-  }, tabs.map((tab, index) => ( /*#__PURE__*/React__default.createElement(Tab, Object.assign({
-    key: tab.title,
-    label: tab.title,
-    "data-testid": `toptab-${index}`,
-    sx: {
-      fontSize: 16
-    }
-  }, muiTabA11yProps(index))))));
+  }, {
+    children: tabs.map((tab, index) => jsx(Tab, Object.assign({
+      label: tab.title,
+      "data-testid": `toptab-${index}`,
+      sx: {
+        fontSize: 16
+      }
+    }, muiTabA11yProps(index)), tab.title))
+  }));
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
 const LocationTabs = ({
   tafList,
   activeIndex: _activeIndex = 0,
@@ -8613,73 +8628,84 @@ const LocationTabs = ({
       isDirty
     }
   } = useFormContext();
-  return /*#__PURE__*/React.createElement(MenuList, {
+  return jsx(MenuList, Object.assign({
     "data-testid": "location-tabs",
     sx: {
       paddingTop: '32px'
     }
-  }, tafList.map(({
-    taf,
-    editor
-  }, index) => ( /*#__PURE__*/React.createElement(MenuItem, {
-    key: taf.uuid,
-    selected: index === _activeIndex,
-    sx: {
-      backgroundColor: 'geowebColors.cards.cardContainer',
-      borderColor: 'geowebColors.cards.cardContainerBorder',
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      margin: '0 0 4px',
-      height: '56px',
-      justifyContent: 'center',
-      ':after': {
-        background: 'none!important'
-      },
-      '&.Mui-selected': {
+  }, {
+    children: tafList.map(({
+      taf,
+      editor
+    }, index) => jsxs(MenuItem, Object.assign({
+      selected: index === _activeIndex,
+      sx: {
         backgroundColor: 'geowebColors.cards.cardContainer',
-        marginRight: '-17px',
-        borderRight: '0px',
-        zIndex: 1
-      }
-    },
-    onClick: () => _onChangeTab(index, isDirty)
-  }, editor && ( /*#__PURE__*/React.createElement(Box$1, {
-    sx: {
-      position: 'absolute',
-      top: '4px',
-      left: '8px'
-    }
-  }, /*#__PURE__*/React.createElement(TafAvatar, {
-    editor: editor,
-    tooltipPlacement: "right"
-  }))), /*#__PURE__*/React.createElement(Box$1, {
-    component: "span",
-    "data-testid": "taf-location",
-    sx: {
-      fontSize: '12px',
-      fontWeight: '500',
-      letterSpacing: '0.09px'
-    }
-  }, taf.location), /*#__PURE__*/React.createElement(Box$1, {
-    component: "span",
-    sx: {
-      position: 'absolute',
-      bottom: '-1px',
-      width: '24px',
-      height: '24px'
-    }
-  }, /*#__PURE__*/React.createElement(StatusIcon, {
-    timeSlot: timeSlot,
-    status: taf.status
-  }))))));
+        borderColor: 'geowebColors.cards.cardContainerBorder',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        margin: '0 0 4px',
+        height: '56px',
+        justifyContent: 'center',
+        ':after': {
+          background: 'none!important'
+        },
+        '&.Mui-selected': {
+          backgroundColor: 'geowebColors.cards.cardContainer',
+          marginRight: '-17px',
+          borderRight: '0px',
+          zIndex: 1
+        }
+      },
+      onClick: () => _onChangeTab(index, isDirty)
+    }, {
+      children: [editor && jsx(Box$1, Object.assign({
+        sx: {
+          position: 'absolute',
+          top: '4px',
+          left: '8px'
+        }
+      }, {
+        children: jsx(TafAvatar, {
+          editor: editor,
+          tooltipPlacement: "right"
+        })
+      })), jsx(Box$1, Object.assign({
+        component: "span",
+        "data-testid": "taf-location",
+        sx: {
+          fontSize: '12px',
+          fontWeight: '500',
+          letterSpacing: '0.09px'
+        }
+      }, {
+        children: taf.location
+      })), jsx(Box$1, Object.assign({
+        component: "span",
+        sx: {
+          position: 'absolute',
+          bottom: '-1px',
+          width: '24px',
+          height: '24px'
+        }
+      }, {
+        children: jsx(StatusIcon, {
+          timeSlot: timeSlot,
+          status: taf.status
+        })
+      }))]
+    }), taf.uuid))
+  }));
 };
 
-const Spinner = props => ( /*#__PURE__*/React__default.createElement(Backdrop, Object.assign({
+const Spinner = props => jsx(Backdrop, Object.assign({
   open: true
-}, props), /*#__PURE__*/React__default.createElement(CircularProgress, {
-  "data-testid": "spinner",
-  color: "inherit"
-})));
+}, props, {
+  children: jsx(CircularProgress, {
+    "data-testid": "spinner",
+    color: "inherit"
+  })
+}));
 
 const fromActionToStatus = tafAction => {
   switch (tafAction) {
@@ -8795,47 +8821,51 @@ const TafPanel = ({
       return false;
     }
   });
-  return /*#__PURE__*/React__default.createElement(TabPanel, {
+  return jsxs(TabPanel, Object.assign({
     value: activeTafIndex,
     index: index,
     "data-testid": `taf-panel${activeTafIndex === index ? '-active' : ''}`
-  }, /*#__PURE__*/React__default.createElement(TafHeader, {
-    title: getTafStatusLabel(tafFromBackend.taf.status, tafAction, _isFormDisabled),
-    sx: {
-      marginBottom: '4px'
-    }
-  }), _isLoading && ( /*#__PURE__*/React__default.createElement(Spinner, {
-    "data-testid": "taf-loading",
-    sx: {
-      position: 'absolute',
-      zIndex: 1,
-      color: 'geowebColors.backdrops.white.fill'
-    }
-  })), error && ( /*#__PURE__*/React__default.createElement(AlertBanner, {
-    severity: severity,
-    title: error.title,
-    info: error.message,
-    dataTestId: "taf-error",
-    shouldClose: true
-  })), /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      marginTop: {
-        xs: '44px',
-        sm: '10px'
-      },
-      padding: 1
-    }
-  }, /*#__PURE__*/React__default.createElement(TafForm, {
-    tafFromBackend: tafFromBackend,
-    onFormAction: onTafAction,
-    isIssuesPaneOpen: _isIssuesPaneOpen,
-    setIsIssuesPaneOpen: _setIsIssuesPaneOpen,
-    isDisabled: _isFormDisabled,
-    setIsDisabled: _setIsFormDisabled,
-    onSwitchEditor: _patchTaf,
-    fetchNewTafList: _fetchNewTafList,
-    previousTaf: _previousTaf
-  })));
+  }, {
+    children: [jsx(TafHeader, {
+      title: getTafStatusLabel(tafFromBackend.taf.status, tafAction, _isFormDisabled),
+      sx: {
+        marginBottom: '4px'
+      }
+    }), _isLoading && jsx(Spinner, {
+      "data-testid": "taf-loading",
+      sx: {
+        position: 'absolute',
+        zIndex: 1,
+        color: 'geowebColors.backdrops.white.fill'
+      }
+    }), error && jsx(AlertBanner, {
+      severity: severity,
+      title: error.title,
+      info: error.message,
+      dataTestId: "taf-error",
+      shouldClose: true
+    }), jsx(Box, Object.assign({
+      sx: {
+        marginTop: {
+          xs: '44px',
+          sm: '10px'
+        },
+        padding: 1
+      }
+    }, {
+      children: jsx(TafForm, {
+        tafFromBackend: tafFromBackend,
+        onFormAction: onTafAction,
+        isIssuesPaneOpen: _isIssuesPaneOpen,
+        setIsIssuesPaneOpen: _setIsIssuesPaneOpen,
+        isDisabled: _isFormDisabled,
+        setIsDisabled: _setIsFormDisabled,
+        onSwitchEditor: _patchTaf,
+        fetchNewTafList: _fetchNewTafList,
+        previousTaf: _previousTaf
+      })
+    }))]
+  }));
 };
 
 const IssuesPaneWrapper = props => {
@@ -8845,7 +8875,7 @@ const IssuesPaneWrapper = props => {
     }
   } = useFormContext();
   const errorList = filterDuplicateErrors(getErrors(errors));
-  return /*#__PURE__*/React.createElement(IssuesPane, Object.assign({
+  return jsx(IssuesPane, Object.assign({
     errorList: errorList
   }, props));
 };
@@ -9024,130 +9054,153 @@ const TafLayout = ({
     return null;
   }
   const activeTaf = locations[activeTafIndex];
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    id: MODAL_DIALOG_ELEMENT,
-    component: "div",
-    sx: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      overflow: 'hidden',
-      pointerEvents: 'none'
-    }
-  }), /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      height: '100%',
-      maxHeight: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(Box, {
-    sx: {
-      minWidth: 320,
-      margin: 'auto',
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    spacing: 2,
-    sx: {
-      paddingLeft: 1,
-      paddingRight: 1
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12,
-    sm: 9
-  }, /*#__PURE__*/React__default.createElement(TopTabs, {
-    tafFromBackend: lastCurrentTaf,
-    timeSlot: timeSlot,
-    onChangeTimeSlot: onChangeTimeSlot
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 12,
-    sm: 3
-  }, lastUpdateTime && ( /*#__PURE__*/React__default.createElement(LastUpdateTime, {
-    lastUpdateTime: lastUpdateTime,
-    onPressRefresh: _onUpdateTaf,
-    dataTestId: "lastupdated-time"
-  })))), /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    flexGrow: 1,
-    overflow: "hidden"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    spacing: 2,
-    sx: {
-      height: '100%',
-      paddingLeft: 1,
-      paddingRight: 1,
-      paddingTop: 2,
-      overflow: 'auto'
-    }
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 3,
-    sm: 1
-  }, /*#__PURE__*/React__default.createElement(LocationTabs, {
-    tafList: locations,
-    activeIndex: activeTafIndex,
-    onChangeTab: onChangeLocationTab,
-    timeSlot: timeSlot
-  })), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: true
-  }, /*#__PURE__*/React__default.createElement(Card, {
-    variant: "outlined",
-    sx: {
-      marginBottom: '12px',
-      position: 'relative',
-      minHeight: locations.length * 62 + 32
-    }
-  }, /*#__PURE__*/React__default.createElement(TacOverviewMobile, {
-    upcomingTafs: upcoming,
-    currentTafs: current,
-    expiredTafs: expired,
-    activeTaf: activeTaf
-  }), locations.map((tafFromBackend, index) => ( /*#__PURE__*/React__default.createElement(TafPanel, {
-    key: tafFromBackend.taf.uuid,
-    activeTafIndex: activeTafIndex,
-    index: index,
-    tafFromBackend: tafFromBackend,
-    isIssuesPaneOpen: isIssuesPaneOpen,
-    setIsIssuesPaneOpen: onToggleIssuesPane,
-    isFormDisabled: isFormDisabled,
-    setIsFormDisabled: setIsFormDisabled,
-    postTaf: postTaf,
-    patchTaf: patchTaf,
-    isLoading: isLoading,
-    error: error,
-    fetchNewTafList: _onUpdateTaf,
-    previousTaf: getPreviousTaf(_tafList, tafFromBackend),
-    tafAction: tafAction
-  }))))), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 0,
-    sm: 3,
-    height: {
-      xs: 0,
-      sm: '100%'
-    },
-    width: {
-      xs: 0,
-      sm: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(TacOverview, {
-    upcomingTafs: upcoming,
-    currentTafs: current,
-    expiredTafs: expired,
-    activeTaf: activeTaf,
-    isFormDisabled: isFormDisabled
-  })))))), /*#__PURE__*/React__default.createElement(IssuesPaneWrapper, {
-    handleClose: onCloseIssuesPane,
-    isOpen: isIssuesPaneOpen,
-    startPosition: startPosition,
-    onUserHasDragged: onUserHasDragged
-  }));
+  return jsxs(Fragment, {
+    children: [jsx(Box, {
+      id: MODAL_DIALOG_ELEMENT,
+      component: "div",
+      sx: {
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        overflow: 'hidden',
+        pointerEvents: 'none'
+      }
+    }), jsx(Box, Object.assign({
+      sx: {
+        height: '100%',
+        maxHeight: '100%'
+      }
+    }, {
+      children: jsxs(Box, Object.assign({
+        sx: {
+          minWidth: 320,
+          margin: 'auto',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }, {
+        children: [jsxs(Grid, Object.assign({
+          container: true,
+          spacing: 2,
+          sx: {
+            paddingLeft: 1,
+            paddingRight: 1
+          }
+        }, {
+          children: [jsx(Grid, Object.assign({
+            item: true,
+            xs: 12,
+            sm: 9
+          }, {
+            children: jsx(TopTabs, {
+              tafFromBackend: lastCurrentTaf,
+              timeSlot: timeSlot,
+              onChangeTimeSlot: onChangeTimeSlot
+            })
+          })), jsx(Grid, Object.assign({
+            item: true,
+            xs: 12,
+            sm: 3
+          }, {
+            children: lastUpdateTime && jsx(LastUpdateTime, {
+              lastUpdateTime: lastUpdateTime,
+              onPressRefresh: _onUpdateTaf,
+              dataTestId: "lastupdated-time"
+            })
+          }))]
+        })), jsx(Grid, Object.assign({
+          container: true,
+          flexGrow: 1,
+          overflow: "hidden"
+        }, {
+          children: jsxs(Grid, Object.assign({
+            container: true,
+            spacing: 2,
+            sx: {
+              height: '100%',
+              paddingLeft: 1,
+              paddingRight: 1,
+              paddingTop: 2,
+              overflow: 'auto'
+            }
+          }, {
+            children: [jsx(Grid, Object.assign({
+              item: true,
+              xs: 3,
+              sm: 1
+            }, {
+              children: jsx(LocationTabs, {
+                tafList: locations,
+                activeIndex: activeTafIndex,
+                onChangeTab: onChangeLocationTab,
+                timeSlot: timeSlot
+              })
+            })), jsx(Grid, Object.assign({
+              item: true,
+              xs: true
+            }, {
+              children: jsxs(Card, Object.assign({
+                variant: "outlined",
+                sx: {
+                  marginBottom: '12px',
+                  position: 'relative',
+                  minHeight: locations.length * 62 + 32
+                }
+              }, {
+                children: [jsx(TacOverviewMobile, {
+                  upcomingTafs: upcoming,
+                  currentTafs: current,
+                  expiredTafs: expired,
+                  activeTaf: activeTaf
+                }), locations.map((tafFromBackend, index) => jsx(TafPanel, {
+                  activeTafIndex: activeTafIndex,
+                  index: index,
+                  tafFromBackend: tafFromBackend,
+                  isIssuesPaneOpen: isIssuesPaneOpen,
+                  setIsIssuesPaneOpen: onToggleIssuesPane,
+                  isFormDisabled: isFormDisabled,
+                  setIsFormDisabled: setIsFormDisabled,
+                  postTaf: postTaf,
+                  patchTaf: patchTaf,
+                  isLoading: isLoading,
+                  error: error,
+                  fetchNewTafList: _onUpdateTaf,
+                  previousTaf: getPreviousTaf(_tafList, tafFromBackend),
+                  tafAction: tafAction
+                }, tafFromBackend.taf.uuid))]
+              }))
+            })), jsx(Grid, Object.assign({
+              item: true,
+              xs: 0,
+              sm: 3,
+              height: {
+                xs: 0,
+                sm: '100%'
+              },
+              width: {
+                xs: 0,
+                sm: '100%'
+              }
+            }, {
+              children: jsx(TacOverview, {
+                upcomingTafs: upcoming,
+                currentTafs: current,
+                expiredTafs: expired,
+                activeTaf: activeTaf,
+                isFormDisabled: isFormDisabled
+              })
+            }))]
+          }))
+        }))]
+      }))
+    })), jsx(IssuesPaneWrapper, {
+      handleClose: onCloseIssuesPane,
+      isOpen: isIssuesPaneOpen,
+      startPosition: startPosition,
+      onUserHasDragged: onUserHasDragged
+    })]
+  });
 };
 
 const TafWrapper = _a => {
@@ -9155,7 +9208,7 @@ const TafWrapper = _a => {
       children
     } = _a,
     props = __rest(_a, ["children"]);
-  return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
+  return jsx(ReactHookFormProvider, Object.assign({
     options: {
       mode: 'onTouched',
       reValidateMode: 'onChange',
@@ -9177,7 +9230,11 @@ const TafWrapper = _a => {
         IS_DRAFT: false
       }
     }
-  }, /*#__PURE__*/React.createElement(TafModuleProvider, Object.assign({}, props), children));
+  }, {
+    children: jsx(TafModuleProvider, Object.assign({}, props, {
+      children: children
+    }))
+  }));
 };
 
 const getCurrentDate = () => dateUtils.dateToString(dateUtils.utc(), dateUtils.DATE_FORMAT_HOURS);
@@ -9227,35 +9284,41 @@ const TafModule = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoggedIn]);
   usePoller([tafList, errorMessage], fetchNewTafList);
-  return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, /*#__PURE__*/React.createElement(Box, {
-    component: "div",
-    id: "tafmodule",
-    "data-testid": "tafmodule",
-    sx: {
-      height: '100%'
-    }
-  }, isLoggedIn && isLoading && ( /*#__PURE__*/React.createElement(LinearProgress, {
-    "data-testid": "loading-bar",
-    color: "secondary",
-    sx: {
-      marginBottom: '-4px'
-    }
-  })), errorMessage ? ( /*#__PURE__*/React.createElement(AlertBanner, {
-    severity: "error",
-    title: errorMessage.title,
-    info: errorMessage.info,
-    "data-testid": "error-message",
-    actionButtonProps: errorMessage.title !== ERROR_AUTH ? {
-      title: 'Try again',
-      onClick: fetchNewTafList
-    } : undefined
-  })) : null, /*#__PURE__*/React.createElement(TafLayout, {
-    tafList: tafList,
-    onUpdateTaf: onUpdateTaf,
-    lastUpdateTime: lastUpdateTime
-  })));
-};
-const Wrapper = props => ( /*#__PURE__*/React.createElement(TafWrapper, Object.assign({}, props), /*#__PURE__*/React.createElement(TafModule, null)));
+  return jsx(ResponsiveWrapper, {
+    children: jsxs(Box, Object.assign({
+      component: "div",
+      id: "tafmodule",
+      "data-testid": "tafmodule",
+      sx: {
+        height: '100%'
+      }
+    }, {
+      children: [isLoggedIn && isLoading && jsx(LinearProgress, {
+        "data-testid": "loading-bar",
+        color: "secondary",
+        sx: {
+          marginBottom: '-4px'
+        }
+      }), errorMessage ? jsx(AlertBanner, {
+        severity: "error",
+        title: errorMessage.title,
+        info: errorMessage.info,
+        "data-testid": "error-message",
+        actionButtonProps: errorMessage.title !== ERROR_AUTH ? {
+          title: 'Try again',
+          onClick: fetchNewTafList
+        } : undefined
+      }) : null, jsx(TafLayout, {
+        tafList: tafList,
+        onUpdateTaf: onUpdateTaf,
+        lastUpdateTime: lastUpdateTime
+      })]
+    }))
+  });
+};
+const Wrapper = props => jsx(TafWrapper, Object.assign({}, props, {
+  children: jsx(TafModule, {})
+}));
 
 const getApiRoutes$1 = axiosInstance => ({
   getTafList: () => {
@@ -10314,22 +10377,6 @@ const createApi = () => {
   return getApiRoutes(instance);
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * */
 const tafScreenPreset = {
   id: 'screenConfigTaf',
   title: 'TAF',
@@ -10352,7 +10399,7 @@ const TafApiWrapper = ({
   onSetAuth,
   onPreventCloseView
 }) => {
-  return config ? ( /*#__PURE__*/React.createElement(ApiProvider, {
+  return config ? jsx(ApiProvider, Object.assign({
     config: {
       baseURL: config.baseURL,
       appURL: config.baseURL,
@@ -10362,9 +10409,13 @@ const TafApiWrapper = ({
     auth: auth,
     onSetAuth: onSetAuth,
     createApi: createApi$1
-  }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Wrapper, {
-    onPreventCloseView: onPreventCloseView
-  })))) : null;
+  }, {
+    children: jsx(ErrorBoundary, {
+      children: jsx(Wrapper, {
+        onPreventCloseView: onPreventCloseView
+      })
+    })
+  })) : null;
 };
 const componentsLookUp = (payload, {
   config,
@@ -10381,7 +10432,7 @@ ConnectedModuleWrapper = null) => {
   switch (componentType) {
     case 'TafModule':
       if (ConnectedModuleWrapper) {
-        return /*#__PURE__*/React.createElement(ConnectedModuleWrapper, {
+        return jsx(ConnectedModuleWrapper, {
           component: TafApiWrapper,
           payload: payload,
           "data-testid": "tafmodule",
@@ -10390,7 +10441,7 @@ ConnectedModuleWrapper = null) => {
           onSetAuth: onSetAuth
         });
       }
-      return /*#__PURE__*/React.createElement(TafApiWrapper, {
+      return jsx(TafApiWrapper, {
         "data-testid": "tafmodule",
         config: config,
         auth: auth,