@opengeoweb/theme 2.1.0 → 2.1.4

package/{theme.umd.js → index.umd.js}

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@material-ui/core'), require('react')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@material-ui/core', 'react'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.core, global.React));
-})(this, (function (exports, core, React) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('react')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', 'react'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.material, global.React));
+})(this, (function (exports, material, React) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -134,9 +134,9 @@
     };
     var BORDER_RADIUS = 3;
     var createTheme = function createTheme(paletteType, geowebColors, shadows) {
-      return core.createMuiTheme({
+      return material.createTheme({
         palette: {
-          type: paletteType,
+          mode: paletteType,
           secondary: {
             main: geowebColors.typographyAndIcons.iconLinkActive
           },
@@ -157,193 +157,304 @@
           fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
         },
         shadows: shadows,
-        overrides: {
+        components: {
           MuiCssBaseline: {
-            '@global': {
-              body: {
-                fontSmoothing: 'auto'
-              }
-            }
+            styleOverrides: "\n          html {\n            -webkit-font-smoothing: auto;\n          }\n        "
           },
           MuiMenuItem: {
-            root: {
-              fontSize: '0.875rem',
-              letterSpacing: '0.25px',
-              ':not(:last-child)&:after': {
-                content: '""',
-                position: 'absolute',
-                width: '100%',
-                height: 1,
-                background: geowebColors.greys.accessible,
-                bottom: 0,
-                left: 0,
-                opacity: 0.5
-              },
-              '&.Mui-selected': {
-                background: 'none',
-                boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive
+            styleOverrides: {
+              root: {
+                fontSize: '0.875rem',
+                letterSpacing: '0.25px',
+                ':not(:last-child)&:after': {
+                  content: '""',
+                  position: 'absolute',
+                  width: '100%',
+                  height: 1,
+                  background: geowebColors.greys.accessible,
+                  bottom: 0,
+                  left: 0,
+                  opacity: 0.5
+                },
+                '&.Mui-selected': {
+                  background: 'none',
+                  boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive
+                }
               }
             }
           },
           MuiRadio: {
-            root: {
-              color: geowebColors.typographyAndIcons.iconLinkActive
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.iconLinkActive,
+                '&.Mui-disabled': {
+                  color: geowebColors.typographyAndIcons.iconLinkDisabled + "!important"
+                },
+                '&.Mui-checked': {
+                  color: geowebColors.typographyAndIcons.iconLinkActive
+                }
+              }
+            }
+          },
+          MuiCheckbox: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.iconLinkActive,
+                '&.Mui-disabled': {
+                  color: geowebColors.typographyAndIcons.iconLinkDisabled + "!important"
+                },
+                '&.Mui-checked': {
+                  color: geowebColors.typographyAndIcons.iconLinkActive
+                }
+              }
             }
           },
           MuiPaper: {
-            outlined: {
-              borderColor: geowebColors.cards.cardContainerBorder
+            styleOverrides: {
+              root: {
+                backgroundImage: 'unset'
+              },
+              outlined: {
+                borderColor: geowebColors.cards.cardContainerBorder
+              }
             }
           },
           MuiCard: {
-            root: {
-              backgroundColor: geowebColors.cards.cardContainer
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.cards.cardContainer
+              }
             }
           },
           MuiSlider: {
-            root: {
-              color: geowebColors.typographyAndIcons.iconLinkActive
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.iconLinkActive
+              }
             }
           },
           MuiTable: {
-            root: {
-              borderSpacing: '0 0.25rem',
-              borderCollapse: 'separate'
+            styleOverrides: {
+              root: {
+                borderSpacing: '0 0.25rem',
+                borderCollapse: 'separate'
+              }
             }
           },
           MuiTableRow: {
-            head: {
-              '&:hover': {
-                boxShadow: shadows[0]
-              }
-            },
-            root: {
-              transition: 'box-shadow 100ms ease-out',
-              boxShadow: shadows[0],
-              borderRadius: BORDER_RADIUS,
-              '&:hover': {
-                boxShadow: shadows[1]
+            styleOverrides: {
+              head: {
+                '&:hover': {
+                  boxShadow: shadows[0]
+                }
               },
-              position: 'relative'
+              root: {
+                transition: 'box-shadow 100ms ease-out',
+                boxShadow: shadows[0],
+                borderRadius: BORDER_RADIUS,
+                '&:hover': {
+                  boxShadow: shadows[1]
+                },
+                position: 'relative'
+              }
             }
           },
           MuiTableCell: {
-            head: {
-              borderBottom: 'none',
-              fontSize: '0.875rem',
-              fontWeight: 400
-            },
-            body: {
-              padding: 12,
-              fontWeight: 500,
-              backgroundColor: geowebColors.background.surface,
-              borderStyle: 'solid',
-              borderColor: 'transparent',
-              borderWidth: 1,
-              borderTopColor: geowebColors.cards.cardContainerBorder,
-              borderBottomColor: geowebColors.cards.cardContainerBorder,
-              '&:first-child': {
-                borderLeftColor: geowebColors.cards.cardContainerBorder,
-                borderRadius: BORDER_RADIUS + "px 0px 0px " + BORDER_RADIUS + "px"
+            styleOverrides: {
+              head: {
+                borderBottom: 'none',
+                fontSize: '0.875rem',
+                fontWeight: 400
               },
-              '&:last-child': {
-                borderRightColor: geowebColors.cards.cardContainerBorder,
-                borderRadius: "0px " + BORDER_RADIUS + "px " + BORDER_RADIUS + "px 0px"
+              body: {
+                padding: 12,
+                fontWeight: 500,
+                backgroundColor: geowebColors.background.surface,
+                borderStyle: 'solid',
+                borderColor: 'transparent',
+                borderWidth: 1,
+                borderTopColor: geowebColors.cards.cardContainerBorder,
+                borderBottomColor: geowebColors.cards.cardContainerBorder,
+                '&:first-child': {
+                  borderLeftColor: geowebColors.cards.cardContainerBorder,
+                  borderRadius: BORDER_RADIUS + "px 0px 0px " + BORDER_RADIUS + "px"
+                },
+                '&:last-child': {
+                  borderRightColor: geowebColors.cards.cardContainerBorder,
+                  borderRadius: "0px " + BORDER_RADIUS + "px " + BORDER_RADIUS + "px 0px"
+                }
               }
             }
           },
           MuiTabs: {
-            root: {
-              position: 'relative',
-              '&:after': {
-                content: '""',
-                position: 'absolute',
-                bottom: 0,
-                height: 1,
-                width: '100%',
-                zIndex: 0,
-                backgroundColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+            styleOverrides: {
+              root: {
+                position: 'relative',
+                '&:after': {
+                  content: '""',
+                  position: 'absolute',
+                  bottom: 0,
+                  height: 1,
+                  width: '100%',
+                  zIndex: 0,
+                  backgroundColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+                }
+              },
+              indicator: {
+                zIndex: 1,
+                backgroundColor: geowebColors.typographyAndIcons.iconLinkActive
               }
-            },
-            indicator: {
-              zIndex: 1,
-              backgroundColor: geowebColors.typographyAndIcons.iconLinkActive
             }
           },
           MuiTab: {
-            root: {
-              textTransform: 'initial',
-              '&.Mui-selected': {
-                color: geowebColors.typographyAndIcons.iconLinkActive
-              },
-              '&:hover': {
-                opacity: 1,
-                color: geowebColors.typographyAndIcons.iconLinkActive,
-                backgroundColor: geowebColors.tab.mouseOver.rgba
+            styleOverrides: {
+              root: {
+                textTransform: 'initial',
+                '&.Mui-selected': {
+                  color: geowebColors.typographyAndIcons.iconLinkActive
+                },
+                '&:hover': {
+                  opacity: 1,
+                  color: geowebColors.typographyAndIcons.iconLinkActive,
+                  backgroundColor: geowebColors.tab.mouseOver.rgba
+                }
               }
             }
           },
           MuiListItem: {
-            root: {
-              color: geowebColors.typographyAndIcons.text
-            },
-            divider: {
-              borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.text,
+                fontSize: '14px'
+              },
+              divider: {
+                borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
+              }
             }
           },
           MuiBackdrop: {
-            root: {
-              backgroundColor: geowebColors.backdrops.black.rgba
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.backdrops.black.rgba
+              }
             }
           },
           MuiTooltip: {
-            tooltip: {
-              backgroundColor: geowebColors.tooltips.tooltipContainer.rgba,
-              color: geowebColors.tooltips.tooltipText.color,
-              padding: '8px 12px',
-              fontSize: 16,
-              fontWeight: 400,
-              fontStretch: 'normal',
-              fontStyle: 'normal',
-              letterSpacing: 0.44,
-              lineHeight: 1.56
+            styleOverrides: {
+              tooltip: {
+                backgroundColor: geowebColors.tooltips.tooltipContainer.rgba,
+                color: geowebColors.tooltips.tooltipText.color,
+                padding: '8px 12px',
+                fontSize: 16,
+                fontWeight: 400,
+                fontStretch: 'normal',
+                fontStyle: 'normal',
+                letterSpacing: 0.44,
+                lineHeight: 1.56
+              }
             }
           },
           MuiLink: {
-            root: {
-              color: geowebColors.typographyAndIcons.textLinkActive
+            styleOverrides: {
+              root: {
+                color: geowebColors.typographyAndIcons.textLinkActive,
+                textDecoration: 'none',
+                '&:hover': {
+                  textDecoration: 'underline',
+                  textDecorationColor: geowebColors.typographyAndIcons.textLinkActive
+                }
+              }
             }
           },
           // TODO: implement correct theming values https://gitlab.com/opengeoweb/opengeoweb/-/issues/1369
           MuiAlert: {
-            standardError: {
-              border: '1px solid #c00000',
-              borderRadius: '0px',
-              backgroundColor: '#fff0ea'
-            },
-            standardWarning: {
-              border: '1px solid #ffa800',
-              borderRadius: '0px',
-              backgroundColor: '#fff8eb'
-            },
-            standardInfo: {
-              border: '1px solid #0062e6',
-              borderRadius: '0px',
-              backgroundColor: '#eaf3ff'
-            },
-            standardSuccess: {
-              border: '1px solid #72bb23',
-              borderRadius: '0px',
-              backgroundColor: '#fcffeb'
-            },
-            action: {
-              color: '#0075a9'
-            },
-            message: {
-              fontSize: '14px',
-              lineHeight: 1.43,
-              letterSpacing: '0.25px',
-              color: '#051039'
+            styleOverrides: {
+              standardError: {
+                border: '1px solid #c00000',
+                borderRadius: '0px',
+                backgroundColor: '#fff0ea'
+              },
+              standardWarning: {
+                border: '1px solid #ffa800',
+                borderRadius: '0px',
+                backgroundColor: '#fff8eb'
+              },
+              standardInfo: {
+                border: '1px solid #0062e6',
+                borderRadius: '0px',
+                backgroundColor: '#eaf3ff'
+              },
+              standardSuccess: {
+                border: '1px solid #72bb23',
+                borderRadius: '0px',
+                backgroundColor: '#fcffeb'
+              },
+              action: {
+                color: '#0075a9'
+              },
+              message: {
+                fontSize: '14px',
+                lineHeight: 1.43,
+                letterSpacing: '0.25px',
+                color: '#051039'
+              }
+            }
+          },
+          MuiFilledInput: {
+            styleOverrides: {
+              root: {
+                backgroundColor: geowebColors.textInputField["default"].rgba,
+                '&.Mui-focused': {
+                  backgroundColor: geowebColors.textInputField.active.rgba
+                },
+                '&.Mui-disabled': {
+                  backgroundColor: geowebColors.textInputField.disabled.rgba
+                }
+              },
+              underline: {
+                '&:after': {
+                  borderBottom: 'transparent'
+                },
+                '&.Mui-disabled:before': {
+                  borderBottomStyle: 'solid'
+                }
+              }
+            }
+          },
+          MuiFormLabel: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.captions.captionStatus.color,
+                opacity: geowebColors.captions.captionStatus.opacity,
+                '&.Mui-focused': {
+                  color: geowebColors.captions.captionInformation.color,
+                  opacity: geowebColors.captions.captionInformation.opacity
+                },
+                '&.Mui-error': {
+                  color: geowebColors.captions.captionError.color,
+                  opacity: geowebColors.captions.captionError.opacity
+                },
+                '&.Mui-disabled': {
+                  color: geowebColors.captions.captionDisabled.color,
+                  opacity: geowebColors.captions.captionDisabled.opacity
+                }
+              }
+            }
+          },
+          MuiFormHelperText: {
+            styleOverrides: {
+              root: {
+                color: geowebColors.captions.captionStatus.color,
+                opacity: geowebColors.captions.captionStatus.opacity,
+                '&.Mui-error': {
+                  color: geowebColors.captions.captionError.color,
+                  opacity: geowebColors.captions.captionError.opacity
+                },
+                '&.Mui-disabled': {
+                  color: geowebColors.captions.captionDisabled.color,
+                  opacity: geowebColors.captions.captionDisabled.opacity
+                }
+              }
             }
           }
         }
@@ -624,7 +735,7 @@
 
     var geowebColors = __assign({}, colors$1);
 
-    var GWTheme = core.createMuiTheme({
+    var GWTheme = material.createTheme({
       palette: {
         secondary: {
           main: '#0075a9'
@@ -693,138 +804,208 @@
           color: '0075a9'
         }
       },
-      overrides: {
+      components: {
         MuiTooltip: {
-          tooltip: {
-            borderRadius: '2px',
-            fontSize: '16px',
-            fontWeight: 'normal',
-            padding: '10px',
-            backgroundColor: '#232323'
+          styleOverrides: {
+            tooltip: {
+              borderRadius: '2px',
+              fontSize: '16px',
+              fontWeight: 'normal',
+              padding: '10px',
+              backgroundColor: '#232323'
+            }
           }
         },
         MuiIconButton: {
-          root: {
-            color: '#0075a9'
+          styleOverrides: {
+            root: {
+              color: '#0075a9'
+            }
           }
         },
         MuiCheckbox: {
-          root: {
-            color: '#0075a9'
+          styleOverrides: {
+            root: {
+              '&.Mui-disabled': {
+                color: '#CCCCCC!important'
+              },
+              '&.Mui-checked': {
+                color: '#0075a9'
+              }
+            }
           }
         },
         MuiSelect: {
-          icon: {
-            color: '#0075a9'
-          },
-          select: {
-            '&:focus': {
-              backgroundColor: 'rgba(0, 117, 169, 0.05)'
+          styleOverrides: {
+            icon: {
+              color: '#0075a9'
+            },
+            select: {
+              '&:focus': {
+                backgroundColor: 'rgba(0, 117, 169, 0.05)'
+              }
             }
           }
         },
         MuiAlert: {
-          standardError: {
-            border: '1px solid #c00000',
-            borderRadius: '0px',
-            backgroundColor: '#fff0ea'
-          },
-          standardWarning: {
-            border: '1px solid #ffa800',
-            borderRadius: '0px',
-            backgroundColor: '#fff8eb'
-          },
-          standardInfo: {
-            border: '1px solid #0062e6',
-            borderRadius: '0px',
-            backgroundColor: '#eaf3ff'
-          },
-          standardSuccess: {
-            border: '1px solid #72bb23',
-            borderRadius: '0px',
-            backgroundColor: '#fcffeb'
-          },
-          action: {
-            color: '#0075a9'
-          },
-          message: {
-            fontSize: '14px',
-            lineHeight: 1.43,
-            letterSpacing: '0.25px',
-            color: '#051039'
+          styleOverrides: {
+            standardError: {
+              border: '1px solid #c00000',
+              borderRadius: '0px',
+              backgroundColor: '#fff0ea'
+            },
+            standardWarning: {
+              border: '1px solid #ffa800',
+              borderRadius: '0px',
+              backgroundColor: '#fff8eb'
+            },
+            standardInfo: {
+              border: '1px solid #0062e6',
+              borderRadius: '0px',
+              backgroundColor: '#eaf3ff'
+            },
+            standardSuccess: {
+              border: '1px solid #72bb23',
+              borderRadius: '0px',
+              backgroundColor: '#fcffeb'
+            },
+            action: {
+              color: '#0075a9'
+            },
+            message: {
+              fontSize: '14px',
+              lineHeight: 1.43,
+              letterSpacing: '0.25px',
+              color: '#051039'
+            }
           }
         },
         MuiTabs: {
-          root: {
-            backgroundColor: '#ffffff',
-            minHeight: '30px'
-          },
-          scrollButtons: {
-            width: '20px'
+          styleOverrides: {
+            root: {
+              backgroundColor: '#ffffff',
+              minHeight: '30px'
+            },
+            scrollButtons: {
+              width: '20px'
+            }
           }
         },
         MuiTab: {
-          root: {
-            minHeight: '30px',
-            textTransform: 'none',
-            minWidth: '76px',
-            '@media (min-width: 600px)': {
-              minWidth: '76px'
+          styleOverrides: {
+            root: {
+              minHeight: '30px',
+              textTransform: 'none',
+              minWidth: '76px',
+              '@media (min-width: 600px)': {
+                minWidth: '76px'
+              }
+            },
+            labelIcon: {
+              minHeight: '30px'
             }
-          },
-          labelIcon: {
-            minHeight: '30px'
           }
         },
         MuiListItem: {
-          root: {
-            '&$selected': {
-              backgroundColor: 'rgba(0, 117, 169, 0.15)',
-              borderLeft: '4px solid #0075a9',
+          styleOverrides: {
+            root: {
+              '&$selected': {
+                backgroundColor: 'rgba(0, 117, 169, 0.15)',
+                borderLeft: '4px solid #0075a9',
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 117, 169, 0.10)'
+                }
+              }
+            },
+            button: {
               '&:hover': {
-                backgroundColor: 'rgba(0, 117, 169, 0.10)'
+                backgroundColor: 'rgba(0, 117, 169, 0.15)'
               }
             }
-          },
-          button: {
-            '&:hover': {
-              backgroundColor: 'rgba(0, 117, 169, 0.15)'
+          }
+        },
+        MuiMenuItem: {
+          styleOverrides: {
+            root: {
+              '&.Mui-selected': {
+                backgroundColor: 'rgba(0, 117, 169, 0.15)',
+                borderLeft: '4px solid #0075a9',
+                '&:hover': {
+                  backgroundColor: 'rgba(0, 117, 169, 0.10)'
+                }
+              },
+              '&:hover': {
+                backgroundColor: 'rgba(0, 117, 169, 0.15)'
+              }
             }
           }
         },
         MuiFormLabel: {
-          root: {
-            color: 'rgba(5, 16, 57, 0.7)',
-            '&$focused': {
-              color: '#0075a9'
+          styleOverrides: {
+            root: {
+              color: 'rgba(5, 16, 57, 0.7)',
+              '&.Mui-focused': {
+                color: '#0075a9'
+              },
+              '&.Mui-error': {
+                color: '#d32f2f!important'
+              }
             }
           }
         },
         MuiOutlinedInput: {
-          root: {
-            '&$focused $notchedOutline': {
-              borderColor: '#0075a9'
+          styleOverrides: {
+            root: {
+              '&$focused $notchedOutline': {
+                borderColor: '#0075a9'
+              }
             }
           }
         },
         MuiFilledInput: {
-          root: {
-            backgroundColor: 'rgba(0, 117, 169, 0.05)',
-            color: '#051039',
-            '&$disabled': {
-              backgroundColor: 'transparent'
+          styleOverrides: {
+            root: {
+              backgroundColor: 'rgba(0, 117, 169, 0.05)',
+              color: '#051039',
+              '&.Mui-disabled': {
+                backgroundColor: 'white'
+              },
+              '&.Mui-focused': {
+                backgroundColor: 'rgba(0,0,0,0.09)'
+              }
+            },
+            underline: {
+              '&.Mui-disabled:before': {
+                borderBottomStyle: 'none'
+              }
             }
-          },
-          underline: {
-            '&$disabled:before': {
-              borderBottomStyle: 'none'
+          }
+        },
+        MuiRadio: {
+          styleOverrides: {
+            root: {
+              '&.Mui-disabled': {
+                color: '#CCCCCC!important'
+              },
+              '&.Mui-checked': {
+                color: '#0075a9'
+              }
             }
           }
         },
         MuiCardContent: {
-          root: {
-            '&:last-child': {
-              paddingBottom: 0
+          styleOverrides: {
+            root: {
+              '&:last-child': {
+                paddingBottom: 0
+              }
+            }
+          }
+        },
+        MuiDialog: {
+          styleOverrides: {
+            paperWidthLg: {
+              maxWidth: '1280px'
             }
           }
         }
@@ -868,7 +1049,7 @@
           fill: '#186DFF'
         },
         flatMouseover: {
-          fill: '#242424'
+          fill: '#494949'
         },
         focusDefault: {
           outline: 'solid 2px #419cfe'
@@ -1131,9 +1312,9 @@
           toggleTheme: toggleTheme,
           isDark: isDark
         }
-      }, /*#__PURE__*/React__namespace.createElement(core.ThemeProvider, {
+      }, /*#__PURE__*/React__namespace.createElement(material.ThemeProvider, {
         theme: currentTheme
-      }, !disableCssBaseline && /*#__PURE__*/React__namespace.createElement(core.CssBaseline, null), children));
+      }, !disableCssBaseline && /*#__PURE__*/React__namespace.createElement(material.CssBaseline, null), children));
     };
     var useThemeContext = function useThemeContext() {
       return React__namespace.useContext(ThemeContext);
@@ -1145,10 +1326,12 @@
           theme = _b === void 0 ? lightTheme : _b,
           _c = _a.disableCssBaseline,
           disableCssBaseline = _c === void 0 ? false : _c;
-      return /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
+      return /*#__PURE__*/React__namespace.createElement(material.StyledEngineProvider, {
+        injectFirst: true
+      }, /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
         theme: theme,
         disableCssBaseline: disableCssBaseline
-      }, children);
+      }, children));
     }; // Wrapper for storybook stories with GWTheme. Will be deprecated
 
     var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {