@opengeoweb/shared 2.7.0 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/index.esm.js +122 -338
  2. package/index.umd.js +125 -341
  3. package/lib/components/ConfirmationDialog/ConfirmationDialog.d.ts +1 -0
  4. package/lib/components/ErrorBoundary/ErrorBoundary.stories.d.ts +2 -0
  5. package/lib/components/Providers/Providers.d.ts +8 -0
  6. package/lib/components/Providers/index.d.ts +1 -0
  7. package/package.json +4 -3
  8. package/lib/components/UserMenu/CheatSheet/Icons.d.ts +0 -7
package/index.esm.js CHANGED
@@ -1,17 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import React__default from 'react';
3
- import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Alert, AlertTitle, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
4
- import Close from '@mui/icons-material/Close';
3
+ import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
4
+ import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, DragHandle, ArrowLeft, ArrowRight, OptionKey, ArrowUp, ArrowDown, CommandKey, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/icons';
5
5
  import { useFormContext } from 'react-hook-form';
6
6
  import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
7
7
  import makeStyles from '@mui/styles/makeStyles';
8
8
  import Draggable from 'react-draggable';
9
9
  import { Resizable } from 're-resizable';
10
10
  import { useThemeContext } from '@opengeoweb/theme';
11
- import { DragIndicator, Close as Close$1, Delete } from '@mui/icons-material';
12
11
  import { throttle } from 'lodash';
13
12
  import withStyles from '@mui/styles/withStyles';
14
- import MoreVertIcon from '@mui/icons-material/MoreVert';
15
13
  import createStyles from '@mui/styles/createStyles';
16
14
 
17
15
  /* *
@@ -114,10 +112,12 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
114
112
  _a$cancelLabel = _a.cancelLabel,
115
113
  cancelLabel = _a$cancelLabel === void 0 ? 'Go back' : _a$cancelLabel,
116
114
  onSubmit = _a.onSubmit,
117
- onClose = _a.onClose,
115
+ _onClose = _a.onClose,
118
116
  _a$content = _a.content,
119
117
  content = _a$content === void 0 ? null : _a$content,
120
- other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
118
+ _a$disableAutoFocus = _a.disableAutoFocus,
119
+ disableAutoFocus = _a$disableAutoFocus === void 0 ? false : _a$disableAutoFocus,
120
+ other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus"]);
121
121
 
122
122
  other.catchOnCancel;
123
123
  var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -133,7 +133,10 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
133
133
  }
134
134
  },
135
135
  // fix for briefly showing default options when closing dialog
136
- transitionDuration: 0
136
+ transitionDuration: 0,
137
+ onClose: function onClose() {
138
+ _onClose('CLOSED');
139
+ }
137
140
  }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
138
141
  sx: {
139
142
  zIndex: 1,
@@ -159,14 +162,16 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
159
162
  "data-testid": "confirmationDialog-close",
160
163
  "aria-label": "close",
161
164
  onClick: function onClick() {
162
- return onClose('CLOSED');
165
+ return _onClose('CLOSED');
163
166
  },
164
167
  size: "small"
165
- }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
168
+ }, /*#__PURE__*/React.createElement(Close, {
169
+ "data-testid": "CloseIcon"
170
+ }))), /*#__PURE__*/React.createElement(DialogContent, {
166
171
  sx: {
167
172
  padding: '8px 16px'
168
173
  }
169
- }, /*#__PURE__*/React.createElement(Typography, {
174
+ }, description && /*#__PURE__*/React.createElement(Typography, {
170
175
  variant: "body1"
171
176
  }, description), content), /*#__PURE__*/React.createElement(DialogActions, {
172
177
  sx: {
@@ -179,35 +184,50 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
179
184
  }, /*#__PURE__*/React.createElement(Button, {
180
185
  "data-testid": "confirmationDialog-cancel",
181
186
  variant: "tertiary",
182
- sx: {
183
- width: {
184
- xs: '100%',
185
- sm: '150px'
186
- }
187
+ // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
188
+ sx: function sx(theme) {
189
+ return {
190
+ width: {
191
+ xs: '100%',
192
+ sm: '150px'
193
+ },
194
+ '&:focus': {
195
+ outline: theme.palette.geowebColors.buttons.focusDefault.outline,
196
+ borderColor: 'transparent'
197
+ }
198
+ };
187
199
  },
188
200
  onClick: function onClick() {
189
- return onClose('CANCELLED');
201
+ return _onClose('CANCELLED');
190
202
  },
191
- autoFocus: true,
192
- disableRipple: true
203
+ disableFocusRipple: true
193
204
  }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
194
205
  "data-testid": "confirmationDialog-confirm",
195
206
  variant: "primary",
196
- sx: {
197
- width: {
198
- xs: '100%',
199
- sm: '150px'
200
- },
201
- marginLeft: {
202
- xs: '0px!important',
203
- sm: '8px!important'
204
- },
205
- marginTop: {
206
- xs: 2,
207
- sm: 0
208
- }
207
+ // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
208
+ sx: function sx(theme) {
209
+ return {
210
+ width: {
211
+ xs: '100%',
212
+ sm: '150px'
213
+ },
214
+ marginLeft: {
215
+ xs: '0px!important',
216
+ sm: '8px!important'
217
+ },
218
+ marginTop: {
219
+ xs: 2,
220
+ sm: 0
221
+ },
222
+ '&:focus': {
223
+ outline: theme.palette.geowebColors.buttons.focusDefault.outline,
224
+ borderColor: 'transparent'
225
+ }
226
+ };
209
227
  },
210
- onClick: onSubmit
228
+ onClick: onSubmit,
229
+ autoFocus: !disableAutoFocus,
230
+ disableFocusRipple: true
211
231
  }, confirmLabel)));
212
232
  };
213
233
 
@@ -696,74 +716,40 @@ var AlertIcon = function AlertIcon(_ref) {
696
716
 
697
717
  switch (severity) {
698
718
  case 'info':
699
- return /*#__PURE__*/React.createElement(SvgIcon, {
719
+ return /*#__PURE__*/React.createElement(Info, {
700
720
  sx: {
701
721
  color: 'geowebColors.functional.notification'
702
722
  },
703
723
  "data-testid": dataTestId
704
- }, /*#__PURE__*/React.createElement("rect", {
705
- width: 24,
706
- height: 24,
707
- fill: "transparent"
708
- }), /*#__PURE__*/React.createElement("path", {
709
- d: "M12 4c4.418 0 8 3.581 8 8 0 4.418-3.582 8-8 8s-8-3.582-8-8c0-4.419 3.582-8 8-8zm1.052 6H10v1.613h.949v3.774H10V17h4v-1.613h-.948V10zM11.99 6c-.837 0-1.491.654-1.491 1.49 0 .837.654 1.51 1.49 1.51.837 0 1.51-.673 1.51-1.51 0-.836-.673-1.49-1.51-1.49z",
710
- transform: "translate(-946.000000, -368.000000) translate(930.000000, 356.000000) translate(16.000000, 12.000000)"
711
- }));
724
+ });
712
725
 
713
726
  case 'success':
714
- return /*#__PURE__*/React.createElement(SvgIcon, {
727
+ return /*#__PURE__*/React.createElement(Success, {
715
728
  sx: {
716
729
  color: 'geowebColors.functional.success'
717
730
  },
718
731
  "data-testid": dataTestId
719
- }, /*#__PURE__*/React.createElement("rect", {
720
- width: 24,
721
- height: 24,
722
- fill: "transparent"
723
- }), /*#__PURE__*/React.createElement("path", {
724
- d: "M16.51 10.034l-5.633 5.633-3.387-3.386c-.369-.37-.369-.973 0-1.343.36-.357.983-.357 1.342 0l2.045 2.046 4.292-4.291c.357-.357.983-.359 1.342 0 .368.369.368.97 0 1.341M12 4C7.582 4 4 7.582 4 12s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8",
725
- transform: "translate(-96.000000, -368.000000) translate(80.000000, 356.000000) translate(16.000000, 12.000000)"
726
- }));
732
+ });
727
733
 
728
734
  case 'warning':
729
- return /*#__PURE__*/React.createElement(SvgIcon, {
735
+ return /*#__PURE__*/React.createElement(Exclamation, {
730
736
  sx: {
731
737
  color: 'geowebColors.functional.warning'
732
738
  },
733
739
  "data-testid": dataTestId
734
- }, /*#__PURE__*/React.createElement("rect", {
735
- width: 24,
736
- height: 24,
737
- fill: "transparent"
738
- }), /*#__PURE__*/React.createElement("path", {
739
- d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
740
- transform: "translate(-521.000000, -368.000000) translate(505.000000, 356.000000) translate(16.000000, 12.000000)"
741
- }));
740
+ });
742
741
 
743
742
  case 'error':
744
743
  default:
745
- return /*#__PURE__*/React.createElement(SvgIcon, {
744
+ return /*#__PURE__*/React.createElement(Exclamation, {
746
745
  sx: {
747
746
  color: 'geowebColors.functional.error'
748
747
  },
749
748
  "data-testid": dataTestId
750
- }, /*#__PURE__*/React.createElement("rect", {
751
- width: 24,
752
- height: 24,
753
- fill: "transparent"
754
- }), /*#__PURE__*/React.createElement("path", {
755
- d: "M12.862 16.72c-.22.226-.507.339-.86.339-.364 0-.662-.113-.894-.34-.232-.226-.347-.52-.347-.885 0-.32.118-.59.356-.81.236-.22.531-.331.884-.331.332 0 .613.11.845.33.232.222.347.491.347.811 0 .365-.11.66-.33.886zm.216-9.805l-.134 6.669H11.06l-.15-6.67h2.169zM12 4.5c-4.141 0-7.5 3.359-7.5 7.501s3.359 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5C19.5 7.86 16.142 4.5 12 4.5z",
756
- transform: "translate(-1371.000000, -368.000000) translate(1355.000000, 356.000000) translate(16.000000, 12.000000)"
757
- }));
749
+ });
758
750
  }
759
751
  };
760
752
 
761
- var IconChevronRight = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
762
- d: "M5.427 15.03c-.57.618-.57 1.57 0 2.188.57.603 1.494.603 2.062 0l5.514-5.843 5.512 5.843c.57.603 1.494.603 2.063 0 .285-.303.426-.7.426-1.094a1.59 1.59 0 0 0-.426-1.094L13.003 7l-7.576 8.03z",
763
- id: "chrevron-right",
764
- transform: "rotate(90 13.002 12.335)"
765
- }));
766
-
767
753
  var AlertBanner = function AlertBanner(_ref) {
768
754
  var title = _ref.title,
769
755
  _ref$severity = _ref.severity,
@@ -838,7 +824,8 @@ var AlertBanner = function AlertBanner(_ref) {
838
824
  }, title), info && /*#__PURE__*/React.createElement(Box, {
839
825
  sx: {
840
826
  fontSize: '16px',
841
- marginTop: 1
827
+ marginTop: 1,
828
+ wordBreak: 'break-word'
842
829
  }
843
830
  }, info), actionButtonProps && /*#__PURE__*/React.createElement(Button, {
844
831
  variant: "flat",
@@ -849,7 +836,7 @@ var AlertBanner = function AlertBanner(_ref) {
849
836
  sx: {
850
837
  backgroundColor: 'transparent!important'
851
838
  },
852
- startIcon: IconChevronRight
839
+ startIcon: /*#__PURE__*/React.createElement(ChevronRight, null)
853
840
  }, actionButtonProps.title.toUpperCase()));
854
841
  };
855
842
 
@@ -869,7 +856,7 @@ var AlertBanner = function AlertBanner(_ref) {
869
856
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
870
857
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
871
858
  * */
872
- var useStyles$8 = makeStyles(function () {
859
+ var useStyles$7 = makeStyles(function () {
873
860
  return {
874
861
  wrapper: {
875
862
  height: '100vh',
@@ -886,7 +873,7 @@ var useStyles$8 = makeStyles(function () {
886
873
  var AppLayout = function AppLayout(_ref) {
887
874
  var header = _ref.header,
888
875
  children = _ref.children;
889
- var classes = useStyles$8();
876
+ var classes = useStyles$7();
890
877
  return /*#__PURE__*/React__default.createElement("div", {
891
878
  className: classes.wrapper
892
879
  }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -894,9 +881,7 @@ var AppLayout = function AppLayout(_ref) {
894
881
  }, children));
895
882
  };
896
883
 
897
- var img = "data:image/svg+xml,%3c!--Licensed under the Apache License%2c Version 2.0 (the 'License')%3byou 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.0Unless required by applicable law or agreed to in writing%2c softwaredistributed under the License is distributed on an 'AS IS' BASIS%2cWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND%2c either express or implied.See the License for the specific language governing permissions andlimitations under the License.Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)Copyright 2021 - Finnish Meteorological Institute (FMI)--%3e%3csvg id='svg4550' xmlnsRdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='55.156mm' viewBox='0 0 289.84072 195.43326' width='81.799mm' version='1.1' xmlnsCc='http://creativecommons.org/ns%23' xmlnsXlink='http://www.w3.org/1999/xlink' xmlnsDc='http://purl.org/dc/elements/1.1/'%3e %3cdefs id='defs14'%3e %3clinearGradient id='linearGradient4263' y2='113.1' gradientUnits='userSpaceOnUse' y1='76.066' gradientTransform='translate(0 -.0012816)' x2='199.26' x1='160.9'%3e %3cstop id='stop4259' stop-color='white' stop-opacity='.33333' offset='0'/%3e %3cstop id='stop4261' stop-color='white' stop-opacity='0' offset='1'/%3e %3c/linearGradient%3e %3clinearGradient id='linearGradient4240' y2='79.833' gradientUnits='userSpaceOnUse' x2='120.82' y1='120.77' x1='128.56'%3e %3cstop id='stop4236' stop-color='white' stop-opacity='0' offset='0'/%3e %3cstop id='stop4238' stop-color='white' stop-opacity='.33333' offset='1'/%3e %3c/linearGradient%3e %3c/defs%3e %3cg id='layer1' transform='translate(353.49 -626.07)'%3e %3cg id='g4'%3e %3cpath id='path4220' d='m-207 679.86c-7.6546-3.9726-16.149-6.0541-24.773-6.0703-24.585 0.0315-46.045 16.665-52.207 40.465-2.23-0.35755-4.4838-0.54689-6.7422-0.56642-24.881-0.00043-45.051 20.17-45.051 45.051-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 8.9834 0 22.962 0.009 36.879 0.0165 9.7409 0.38215 35.645-0.43398 53.537-23.548 17.892-23.115 7.1203-72.79-0.31513-94.017s-30.566-42.361-53.247-42.361c-26.664 0-50.367 14.562-62.311 36.07z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%230b9ee5'/%3e %3cpath id='path4220-7' opacity='.98' d='m-335.78 758.74c-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 4.439-5.7347 7.1108-13.107 8.5098-21.271-35.448-0.0105-239.67-0.15823-253.16-0.15823z' fill='%2360bce9'/%3e %3c/g%3e %3cpath id='path4220-2' d='m-144.69 643.79c-19.529 0-37.464 7.8167-50.359 20.447-4.6476 4.6419-8.6513 9.9041-11.953 15.623 0 40.944 0.0195 77.914 0.0195 123.83 8.4824 0.007 16.983 0.0137 25.438 0.0137 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 17.892-23.115 7.1209-72.791-0.31446-94.018s-30.565-42.361-53.246-42.361z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='white' fill-opacity='.31373'/%3e %3c/g%3e %3cg id='g4244' transform='translate(2.926 -1.3827)'%3e %3cpath id='path4329' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%23003232' d='m211.54 98.88c11.484 8.7901 14.857 8.43 22.486 19.238 3.6519 5.1733 5.5602 11.69 5.5645 18.164-0.00018 17.949-14.551 32.499-32.5 32.498-17.948-0.00018-32.498-14.55-32.498-32.498 0.006-0.50098 0.0236-1.0018 0.0527-1.502-3.4629-1.1175-6.9173-1.9297-9.6543-1.9297-2.7565 0-6.2409 0.82134-9.7285 1.9512 0.036 0.49286 0.0607 0.98649 0.0742 1.4805-0.00018 17.948-14.55 32.498-32.498 32.498-17.948-0.00019-32.498-14.55-32.498-32.498 0.006-3.5239 0.71774-6.9687 1.8781-10.26 5.474-20.521 8.7944-44.229 27.665-46.855 8.2552-1.1488 15.952 8.848 25.107 8.848 9.1558-0.00028 9.318-14.58 23.088-14.836 16.828-0.3123 31.185 16.304 43.462 25.701zm-4.7539 13.92c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-84.125 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z'/%3e %3cpath id='path4329-2' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='url(%23linearGradient4263)' d='m157.24 77.869c-2.1199 2.1753-3.6401 4.4832-5.4018 6.5241-0.53185 0.61614-1.2448 1.3191-1.8477 1.7949-1.2058 0.9517-2.5477 1.6107-4.168 1.7793-0.27005 0.0281-0.54787 0.04296-0.83398 0.04297 5.0928 13.298 11.821 26.014 20 44.834 2.737 0 6.1914 0.8122 9.6543 1.9297-0.0291 0.5002-0.0467 1.001-0.0527 1.502 0 8.4131 3.196 16.08 8.4414 21.852 0.34969 0.38474 0.70861 0.75939 1.0762 1.127 5.881 5.8809 14.007 9.5194 22.98 9.5195 0.5609 0.00004 1.118-0.0149 1.6719-0.043 3.3236-0.16829 6.5154-0.83435 9.502-1.9277 0.99554-0.36446 1.9688-0.77802 2.916-1.2344 1.4208-0.68453 2.7833-1.4677 4.0801-2.3438 8.645-5.84 14.33-15.731 14.33-26.949-0.004-6.474-2.0849-12.873-5.5645-18.164-7.0668-10.745-14.684-12.763-22.486-19.238-11.815-9.8048-26.968-25.716-42.627-25.716-6.2104 0-9.3385 2.3185-11.67 4.7112zm49.543 34.924c4.9706 0 9.5876 1.5119 13.418 4.0996 0.6384 0.43129 1.255 0.89176 1.8476 1.3809 0.59266 0.4891 1.1622 1.0059 1.7051 1.5488 4.3431 4.3431 7.0293 10.343 7.0293 16.971 0 12.841-10.085 23.326-22.766 23.969-0.40906 0.0207-0.82015 0.0312-1.2344 0.0312-4.97 0-9.5878-1.5105-13.418-4.0976-0.00044-0.0003-0.002 0.00029-0.002 0-6.384-4.3129-10.58-11.618-10.58-19.902 0-6.6275 2.6862-12.628 7.0293-16.971 0.54288-0.54289 1.1124-1.0597 1.7051-1.5488 0.59266-0.4891 1.2073-0.94957 1.8457-1.3809 3.8304-2.5878 8.4493-4.0996 13.42-4.0996z'/%3e %3cpath id='path4329-7' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' d='m121.43 79.077c-0.51208-0.01011-1.027 0.01805-1.543 0.08985-18.871 2.626-22.19 26.335-27.664 46.856-1.1604 3.2913-1.8729 6.7359-1.8789 10.26 0 17.948 14.55 32.498 32.498 32.498s32.498-14.55 32.498-32.498c-0.0135-0.49402-0.0382-0.98762-0.0742-1.4805 3.5012-1.0071 5.7853-1.8693 9.6893-1.9248-4.8944-11.377-14.29-31.914-19.961-44.863-8.5828 0.000001-15.883-8.7859-23.565-8.9376zm1.2344 33.723c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z' fill='url(%23linearGradient4240)'/%3e %3c/g%3e%3c/svg%3e";
898
-
899
- var useStyles$7 = makeStyles(function (theme) {
884
+ var useStyles$6 = makeStyles(function (theme) {
900
885
  var _header;
901
886
 
902
887
  return {
@@ -911,9 +896,6 @@ var useStyles$7 = makeStyles(function (theme) {
911
896
  }), _defineProperty(_header, theme.breakpoints.up('sm'), {
912
897
  padding: '0 24px'
913
898
  }), _header),
914
- logo: {
915
- height: 30
916
- },
917
899
  title: {
918
900
  marginLeft: 6,
919
901
  fontSize: '1.25rem',
@@ -933,7 +915,7 @@ var AppHeader = function AppHeader(_ref) {
933
915
  userMenu = _ref.userMenu,
934
916
  _ref$title = _ref.title,
935
917
  title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
936
- var classes = useStyles$7();
918
+ var classes = useStyles$6();
937
919
  return /*#__PURE__*/React__default.createElement("header", {
938
920
  className: classes.header
939
921
  }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -956,11 +938,7 @@ var AppHeader = function AppHeader(_ref) {
956
938
  justifyContent: "center",
957
939
  alignItems: "center",
958
940
  wrap: "nowrap"
959
- }, /*#__PURE__*/React__default.createElement("img", {
960
- alt: title,
961
- className: classes.logo,
962
- src: img
963
- }), /*#__PURE__*/React__default.createElement(Typography, {
941
+ }, /*#__PURE__*/React__default.createElement(GeoWebLogo, null), /*#__PURE__*/React__default.createElement(Typography, {
964
942
  variant: "h1",
965
943
  className: classes.title
966
944
  }, title))), /*#__PURE__*/React__default.createElement(Grid, {
@@ -1017,33 +995,6 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
1017
995
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
1018
996
  * */
1019
997
 
1020
- var ResizeHandle = function ResizeHandle(_ref2) {
1021
- var isRightAligned = _ref2.isRightAligned;
1022
- var theme = useTheme();
1023
- return /*#__PURE__*/React__default.createElement(SvgIcon, {
1024
- sx: Object.assign(Object.assign({
1025
- width: 20,
1026
- height: 20,
1027
- top: -10,
1028
- position: 'relative'
1029
- }, isRightAligned ? {
1030
- left: -10
1031
- } : {
1032
- left: 10,
1033
- transform: 'rotate(90deg)'
1034
- }), {
1035
- zIndex: 1
1036
- }),
1037
- "data-testid": "resizeHandle"
1038
- }, /*#__PURE__*/React__default.createElement("rect", {
1039
- fill: "#ffffff"
1040
- }), /*#__PURE__*/React__default.createElement("path", {
1041
- d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
1042
- fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color),
1043
- transform: "rotate(-45 16.687 16.787)"
1044
- }));
1045
- };
1046
-
1047
998
  var ResizeComponent = function ResizeComponent(_a) {
1048
999
  var _a$startPosition = _a.startPosition,
1049
1000
  startPosition = _a$startPosition === void 0 ? {
@@ -1064,6 +1015,7 @@ var ResizeComponent = function ResizeComponent(_a) {
1064
1015
  minWidth = _a$minWidth === void 0 ? 50 : _a$minWidth,
1065
1016
  props = __rest(_a, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
1066
1017
 
1018
+ var theme = useTheme();
1067
1019
  var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
1068
1020
  var onStartResize = React__default.useCallback(function (event, _direction, node) {
1069
1021
  event.stopPropagation();
@@ -1097,10 +1049,17 @@ var ResizeComponent = function ResizeComponent(_a) {
1097
1049
  size: size,
1098
1050
  onResizeStop: onResizeStop,
1099
1051
  handleComponent: {
1100
- bottomRight: /*#__PURE__*/React__default.createElement(ResizeHandle, {
1101
- isRightAligned: true
1052
+ bottomRight: /*#__PURE__*/React__default.createElement(Resize, {
1053
+ isRightAligned: true,
1054
+ style: {
1055
+ fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
1056
+ }
1102
1057
  }),
1103
- bottomLeft: /*#__PURE__*/React__default.createElement(ResizeHandle, null)
1058
+ bottomLeft: /*#__PURE__*/React__default.createElement(Resize, {
1059
+ style: {
1060
+ fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
1061
+ }
1062
+ })
1104
1063
  },
1105
1064
  enable: {
1106
1065
  top: false,
@@ -1161,9 +1120,12 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
1161
1120
  var children = this.props.children;
1162
1121
 
1163
1122
  if (error) {
1164
- return /*#__PURE__*/React.createElement("div", {
1165
- style: {
1166
- whiteSpace: 'pre-wrap'
1123
+ return /*#__PURE__*/React.createElement(Box, {
1124
+ sx: {
1125
+ whiteSpace: 'pre-wrap',
1126
+ width: 'inherit',
1127
+ height: 'inherit',
1128
+ overflowY: 'scroll'
1167
1129
  }
1168
1130
  }, /*#__PURE__*/React.createElement(AlertBanner, {
1169
1131
  severity: "error",
@@ -1215,7 +1177,7 @@ ErrorBoundary.defaultProps = {
1215
1177
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
1216
1178
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
1217
1179
  * */
1218
- var useStyles$6 = makeStyles(function (theme) {
1180
+ var useStyles$5 = makeStyles(function (theme) {
1219
1181
  return {
1220
1182
  container: {
1221
1183
  position: 'absolute',
@@ -1263,7 +1225,7 @@ var UserMenu = function UserMenu(_ref) {
1263
1225
  } : _ref$onClose,
1264
1226
  children = _ref.children,
1265
1227
  initials = _ref.initials;
1266
- var classes = useStyles$6();
1228
+ var classes = useStyles$5();
1267
1229
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
1268
1230
  "data-testid": "userButton",
1269
1231
  onClick: onToggle,
@@ -1346,7 +1308,7 @@ var MenuItemTheme = function MenuItemTheme() {
1346
1308
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
1347
1309
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
1348
1310
  * */
1349
- var useStyles$5 = makeStyles(function (theme) {
1311
+ var useStyles$4 = makeStyles(function (theme) {
1350
1312
  return {
1351
1313
  footer: {
1352
1314
  boxShadow: theme.shadows[1],
@@ -1359,7 +1321,7 @@ var useStyles$5 = makeStyles(function (theme) {
1359
1321
  }); // drag handles will be handled by DraggableResizable/Resizable
1360
1322
 
1361
1323
  var ToolFooter = function ToolFooter() {
1362
- var classes = useStyles$5();
1324
+ var classes = useStyles$4();
1363
1325
  return /*#__PURE__*/React__default.createElement("footer", {
1364
1326
  className: classes.footer
1365
1327
  });
@@ -1468,7 +1430,10 @@ var ToolHeader = function ToolHeader(_ref) {
1468
1430
  alignItems: "center"
1469
1431
  }, /*#__PURE__*/React__default.createElement(Grid, {
1470
1432
  item: true,
1471
- xs: columnSizeIcon
1433
+ xs: columnSizeIcon,
1434
+ sx: {
1435
+ paddingRight: 1
1436
+ }
1472
1437
  }, isDraggable && size !== 'xxs' && !leftComponent && /*#__PURE__*/React__default.createElement(Grid, {
1473
1438
  container: true,
1474
1439
  justifyContent: "flex-start"
@@ -1479,7 +1444,7 @@ var ToolHeader = function ToolHeader(_ref) {
1479
1444
  sx: Object.assign(Object.assign({}, iconStyle), {
1480
1445
  pointerEvents: 'none'
1481
1446
  })
1482
- }, /*#__PURE__*/React__default.createElement(DragIndicator, null))), leftComponent && leftComponent), /*#__PURE__*/React__default.createElement(Grid, {
1447
+ }, /*#__PURE__*/React__default.createElement(DragHandle, null))), leftComponent && leftComponent), /*#__PURE__*/React__default.createElement(Grid, {
1483
1448
  item: true,
1484
1449
  xs: columnSizeTitle
1485
1450
  }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -1502,7 +1467,7 @@ var ToolHeader = function ToolHeader(_ref) {
1502
1467
  transform: 'rotate(90deg)',
1503
1468
  height: 12
1504
1469
  })
1505
- }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
1470
+ }, /*#__PURE__*/React__default.createElement(DragHandle, null)))), /*#__PURE__*/React__default.createElement(Grid, {
1506
1471
  item: true,
1507
1472
  xs: columnSizeIcon,
1508
1473
  container: true,
@@ -1512,7 +1477,9 @@ var ToolHeader = function ToolHeader(_ref) {
1512
1477
  onClick: onClickClose,
1513
1478
  size: "large",
1514
1479
  sx: iconStyle
1515
- }, /*#__PURE__*/React__default.createElement(Close$1, null)))));
1480
+ }, /*#__PURE__*/React__default.createElement(Close, {
1481
+ "data-testid": "CloseIcon"
1482
+ })))));
1516
1483
  };
1517
1484
 
1518
1485
  /* *
@@ -1571,14 +1538,14 @@ var ToolContainer = function ToolContainer(_a) {
1571
1538
  return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
1572
1539
  elevation: elevation,
1573
1540
  sx: styles$1.container
1574
- }, props), /*#__PURE__*/React__default.createElement(ToolHeader, {
1541
+ }, props), /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(ToolHeader, {
1575
1542
  title: title,
1576
1543
  size: size,
1577
1544
  isDraggable: isDraggable,
1578
1545
  onClose: onClose,
1579
1546
  className: headerClassName,
1580
1547
  leftComponent: leftComponent
1581
- }), /*#__PURE__*/React__default.createElement(Box, {
1548
+ })), /*#__PURE__*/React__default.createElement(Box, {
1582
1549
  sx: styles$1.content,
1583
1550
  style: {
1584
1551
  maxHeight: maxHeight
@@ -1773,7 +1740,7 @@ var DraggableComponent = function DraggableComponent(_a) {
1773
1740
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
1774
1741
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
1775
1742
  * */
1776
- var useStyles$4 = makeStyles(function (theme) {
1743
+ var useStyles$3 = makeStyles(function (theme) {
1777
1744
  return {
1778
1745
  icon: {
1779
1746
  backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1813,7 +1780,7 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
1813
1780
  var _ref$type = _ref.type,
1814
1781
  type = _ref$type === void 0 ? 'text' : _ref$type,
1815
1782
  children = _ref.children;
1816
- var classes = useStyles$4();
1783
+ var classes = useStyles$3();
1817
1784
 
1818
1785
  if (type === 'divider') {
1819
1786
  return /*#__PURE__*/React__default.createElement(Typography, {
@@ -1847,171 +1814,6 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
1847
1814
  }, children);
1848
1815
  };
1849
1816
 
1850
- /* *
1851
- * Licensed under the Apache License, Version 2.0 (the "License");
1852
- * you may not use this file except in compliance with the License.
1853
- * You may obtain a copy of the License at
1854
- *
1855
- * http://www.apache.org/licenses/LICENSE-2.0
1856
- *
1857
- * Unless required by applicable law or agreed to in writing, software
1858
- * distributed under the License is distributed on an "AS IS" BASIS,
1859
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1860
- * See the License for the specific language governing permissions and
1861
- * limitations under the License.
1862
- *
1863
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
1864
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
1865
- * */
1866
- var useStyles$3 = makeStyles(function (theme) {
1867
- return {
1868
- icon: {
1869
- fill: theme.palette.geowebColors.typographyAndIcons.text
1870
- }
1871
- };
1872
- });
1873
- var OptionIcon = function OptionIcon() {
1874
- var classes = useStyles$3();
1875
- return /*#__PURE__*/React__default.createElement(SvgIcon, {
1876
- viewBox: "0 0 12 11",
1877
- style: {
1878
- width: 12,
1879
- height: 11
1880
- }
1881
- }, /*#__PURE__*/React__default.createElement("title", null, "Option"), /*#__PURE__*/React__default.createElement("g", {
1882
- id: "Symbols:-General",
1883
- stroke: "none",
1884
- strokeWidth: "1",
1885
- fill: "none",
1886
- fillRule: "evenodd"
1887
- }, /*#__PURE__*/React__default.createElement("g", {
1888
- id: "Shortcut-Option-\"\u2325\"",
1889
- transform: "translate(-14.000000, -13.000000)",
1890
- className: classes.icon
1891
- }, /*#__PURE__*/React__default.createElement("path", {
1892
- d: "M18.01,13.88 L22.56,22.99 L25.7,22.99 L25.7,24 L21.74,24 L17.19,14.9 L14.06,14.9 L14.06,13.88 L18.01,13.88 Z M25.7,13.88 L25.7,14.9 L20.97,14.9 L20.97,13.88 L25.7,13.88 Z",
1893
- id: "Option"
1894
- }))));
1895
- };
1896
- var CommandIcon = function CommandIcon() {
1897
- var classes = useStyles$3();
1898
- return /*#__PURE__*/React__default.createElement(SvgIcon, {
1899
- viewBox: "0 0 12 12",
1900
- style: {
1901
- width: 12,
1902
- height: 12
1903
- }
1904
- }, /*#__PURE__*/React__default.createElement("title", null, "Command"), /*#__PURE__*/React__default.createElement("g", {
1905
- id: "Symbols:-General",
1906
- stroke: "none",
1907
- strokeWidth: "1",
1908
- fill: "none",
1909
- fillRule: "evenodd"
1910
- }, /*#__PURE__*/React__default.createElement("g", {
1911
- id: "Shortcut-Command-\"\u2318\"",
1912
- transform: "translate(-14.000000, -13.000000)",
1913
- className: classes.icon
1914
- }, /*#__PURE__*/React__default.createElement("path", {
1915
- d: "M23.04,13.63 C24.08,13.63 25.19,14.44 25.19,15.8 C25.19,16.8 24.4,17.93 23.04,17.93 L23.04,17.93 L21.9,17.93 L21.9,19.95 L23,19.95 C24.4,19.95 25.19,21.1 25.19,22 C25.19,23.6 24,24.26 23,24.26 C22,24.26 20.89,23.5 20.89,22 L20.89,22 L20.89,20.97 L18.86,20.97 L18.86,22 C18.86,23.5 17.75,24.26 16.71,24.26 C15.7,24.26 14.56,23.5 14.56,22 C14.56,21 15.55,19.95 16.71,19.95 L16.71,19.95 L17.85,19.95 L17.85,17.93 L16.71,17.93 C15.55,17.93 14.525085,17 14.5614747,15.7207438 C14.5978644,14.4414876 15.7,13.63 16.71,13.63 C17.75,13.63 18.86,14.38 18.86,15.8 L18.86,15.8 L18.86,16.92 L20.89,16.92 L20.89,15.8 C20.89,14.38 22,13.63 23.04,13.63 Z M17.85,20.96 L16.71,20.96 C16.0803954,20.96 15.57,21.4703954 15.57,22.1 C15.57,22.7296046 16.0803954,23.24 16.71,23.24 C17.3396046,23.24 17.85,22.7296046 17.85,22.1 L17.85,22.1 L17.85,20.96 Z M23.04,20.96 L21.9,20.96 L21.9,22.1 L21.9066894,22.2242156 C21.9685825,22.7953889 22.452369,23.24 23.04,23.24 C23.6696046,23.24 24.18,22.7296046 24.18,22.1 C24.18,21.4703954 23.6696046,20.96 23.04,20.96 L23.04,20.96 Z M20.89,17.93 L18.86,17.93 L18.86,19.95 L20.89,19.95 L20.89,17.93 Z M16.71,14.64 C16.0803954,14.64 15.57,15.1503954 15.57,15.78 C15.57,16.4096046 16.0803954,16.92 16.71,16.92 L16.71,16.92 L17.85,16.92 L17.85,15.78 L17.8433106,15.6557844 C17.7814175,15.0846111 17.297631,14.64 16.71,14.64 Z M23.04,14.64 C22.4103954,14.64 21.9,15.1503954 21.9,15.78 L21.9,15.78 L21.9,16.92 L23.04,16.92 C23.6696046,16.92 24.18,16.4096046 24.18,15.78 C24.18,15.1503954 23.6696046,14.64 23.04,14.64 Z",
1916
- id: "Command"
1917
- }))));
1918
- };
1919
- var ArrowLeftIcon = function ArrowLeftIcon() {
1920
- var classes = useStyles$3();
1921
- return /*#__PURE__*/React__default.createElement(SvgIcon, {
1922
- viewBox: "0 0 12 6",
1923
- style: {
1924
- width: 12,
1925
- height: 6
1926
- }
1927
- }, /*#__PURE__*/React__default.createElement("title", null, "Arrow left"), /*#__PURE__*/React__default.createElement("g", {
1928
- id: "Symbols:-General",
1929
- stroke: "none",
1930
- strokeWidth: "1",
1931
- fill: "none",
1932
- fillRule: "evenodd"
1933
- }, /*#__PURE__*/React__default.createElement("g", {
1934
- id: "Shortcut-Arrow-left-\"\u2190\"",
1935
- transform: "translate(-14.000000, -16.000000)",
1936
- className: classes.icon
1937
- }, /*#__PURE__*/React__default.createElement("polygon", {
1938
- id: "Arrow-left",
1939
- transform: "translate(19.880000, 18.960000) rotate(90.000000) translate(-19.880000, -18.960000) ",
1940
- points: "16.92 21.485 19.88 24.445 22.84 21.485 20.39 21.485 20.39 13.475 19.37 13.475 19.37 21.485"
1941
- }))));
1942
- };
1943
- var ArrowRightIcon = function ArrowRightIcon() {
1944
- var classes = useStyles$3();
1945
- return /*#__PURE__*/React__default.createElement(SvgIcon, {
1946
- viewBox: "0 0 12 6",
1947
- style: {
1948
- width: 12,
1949
- height: 6
1950
- }
1951
- }, /*#__PURE__*/React__default.createElement("title", null, "Arrow right"), /*#__PURE__*/React__default.createElement("g", {
1952
- id: "Symbols:-General",
1953
- stroke: "none",
1954
- strokeWidth: "1",
1955
- fill: "none",
1956
- fillRule: "evenodd"
1957
- }, /*#__PURE__*/React__default.createElement("g", {
1958
- id: "Shortcut-Arrow-right-\"\u2192\"",
1959
- transform: "translate(-14.000000, -16.000000)",
1960
- className: classes.icon
1961
- }, /*#__PURE__*/React__default.createElement("polygon", {
1962
- id: "Arrow-right",
1963
- transform: "translate(19.880000, 18.960000) rotate(-90.000000) translate(-19.880000, -18.960000) ",
1964
- points: "16.92 21.485 19.88 24.445 22.84 21.485 20.39 21.485 20.39 13.475 19.37 13.475 19.37 21.485"
1965
- }))));
1966
- };
1967
- var ArrowDownIcon = function ArrowDownIcon() {
1968
- var classes = useStyles$3();
1969
- return /*#__PURE__*/React__default.createElement(SvgIcon, {
1970
- viewBox: "0 0 6 12",
1971
- style: {
1972
- width: 6,
1973
- height: 12
1974
- }
1975
- }, /*#__PURE__*/React__default.createElement("title", null, "Arrow down"), /*#__PURE__*/React__default.createElement("g", {
1976
- id: "Symbols:-General",
1977
- stroke: "none",
1978
- strokeWidth: "1",
1979
- fill: "none",
1980
- fillRule: "evenodd"
1981
- }, /*#__PURE__*/React__default.createElement("g", {
1982
- id: "Shortcut-Arrow-down-\"\u2193\"",
1983
- transform: "translate(-17.000000, -13.000000)",
1984
- className: classes.icon
1985
- }, /*#__PURE__*/React__default.createElement("polygon", {
1986
- id: "Arrow-down",
1987
- points: "16.92 21.89 19.88 24.85 22.84 21.89 20.39 21.89 20.39 13.88 19.37 13.88 19.37 21.89"
1988
- }))));
1989
- };
1990
- var ArrowUpIcon = function ArrowUpIcon() {
1991
- var classes = useStyles$3();
1992
- return /*#__PURE__*/React__default.createElement(SvgIcon, {
1993
- viewBox: "0 0 6 11",
1994
- style: {
1995
- width: 6,
1996
- height: 11
1997
- }
1998
- }, /*#__PURE__*/React__default.createElement("title", null, "Arrow up"), /*#__PURE__*/React__default.createElement("g", {
1999
- id: "Symbols:-General",
2000
- stroke: "none",
2001
- strokeWidth: "1",
2002
- fill: "none",
2003
- fillRule: "evenodd"
2004
- }, /*#__PURE__*/React__default.createElement("g", {
2005
- id: "Shortcut-Arrow-up-\"\u2191\"",
2006
- transform: "translate(-17.000000, -13.000000)",
2007
- className: classes.icon
2008
- }, /*#__PURE__*/React__default.createElement("polygon", {
2009
- id: "Arrow-up",
2010
- transform: "translate(19.880000, 18.485000) scale(1, -1) translate(-19.880000, -18.485000) ",
2011
- points: "16.92 21.01 19.88 23.97 22.84 21.01 20.39 21.01 20.39 13 19.37 13 19.37 21.01"
2012
- }))));
2013
- };
2014
-
2015
1817
  /* *
2016
1818
  * Licensed under the Apache License, Version 2.0 (the "License");
2017
1819
  * you may not use this file except in compliance with the License.
@@ -2042,26 +1844,26 @@ var shortcuts = [{
2042
1844
  type: "connect"
2043
1845
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2044
1846
  type: "icon"
2045
- }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1847
+ }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2046
1848
  type: "divider"
2047
1849
  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2048
1850
  type: "icon"
2049
- }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null))),
1851
+ }, /*#__PURE__*/React__default.createElement(ArrowRight, null))),
2050
1852
  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2051
1853
  type: "icon"
2052
1854
  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2053
1855
  type: "connect"
2054
1856
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2055
1857
  type: "icon"
2056
- }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1858
+ }, /*#__PURE__*/React__default.createElement(OptionKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2057
1859
  type: "connect"
2058
1860
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2059
1861
  type: "icon"
2060
- }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1862
+ }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2061
1863
  type: "divider"
2062
1864
  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2063
1865
  type: "icon"
2064
- }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null)))
1866
+ }, /*#__PURE__*/React__default.createElement(ArrowRight, null)))
2065
1867
  }, {
2066
1868
  title: 'Toggle hide/show time slider',
2067
1869
  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2097,7 +1899,7 @@ var shortcuts = [{
2097
1899
  type: "connect"
2098
1900
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2099
1901
  type: "icon"
2100
- }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1902
+ }, /*#__PURE__*/React__default.createElement(OptionKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2101
1903
  type: "connect"
2102
1904
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2103
1905
  type: "icon"
@@ -2110,22 +1912,22 @@ var shortcuts = [{
2110
1912
  type: "connect"
2111
1913
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2112
1914
  type: "icon"
2113
- }, /*#__PURE__*/React__default.createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1915
+ }, /*#__PURE__*/React__default.createElement(ArrowUp, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2114
1916
  type: "divider"
2115
1917
  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2116
1918
  type: "icon"
2117
- }, /*#__PURE__*/React__default.createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)")),
1919
+ }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)")),
2118
1920
  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2119
1921
  type: "icon"
2120
- }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1922
+ }, /*#__PURE__*/React__default.createElement(CommandKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2121
1923
  type: "connect"
2122
1924
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2123
1925
  type: "icon"
2124
- }, /*#__PURE__*/React__default.createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1926
+ }, /*#__PURE__*/React__default.createElement(ArrowUp, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2125
1927
  type: "divider"
2126
1928
  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2127
1929
  type: "icon"
2128
- }, /*#__PURE__*/React__default.createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)"))
1930
+ }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)"))
2129
1931
  }, {
2130
1932
  title: 'Return to current time',
2131
1933
  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2137,7 +1939,7 @@ var shortcuts = [{
2137
1939
  type: "connect"
2138
1940
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2139
1941
  type: "icon"
2140
- }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)))
1942
+ }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)))
2141
1943
  }, {
2142
1944
  title: 'Change layer manager values by scrolling',
2143
1945
  description: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2145,7 +1947,7 @@ var shortcuts = [{
2145
1947
  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll")),
2146
1948
  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2147
1949
  type: "icon"
2148
- }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll"))
1950
+ }, /*#__PURE__*/React__default.createElement(CommandKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll"))
2149
1951
  }];
2150
1952
  var getShortcutList = function getShortcutList(shortcutList) {
2151
1953
  var platform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'windows';
@@ -2620,17 +2422,17 @@ var ToggleMenu = function ToggleMenu(_ref) {
2620
2422
  setAnchorEl(document.getElementById(buttonTestId));
2621
2423
  }
2622
2424
  }, [isDefaultOpen, buttonTestId]);
2623
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
2425
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
2426
+ placement: "top",
2427
+ title: tooltipTitle
2428
+ }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ToolButton, {
2624
2429
  active: isOpen,
2625
2430
  sx: buttonSx,
2626
2431
  onClick: handleClick,
2627
2432
  "data-testid": buttonTestId,
2628
2433
  variant: variant,
2629
2434
  id: buttonTestId
2630
- }, /*#__PURE__*/React.createElement(Tooltip, {
2631
- placement: "top",
2632
- title: tooltipTitle
2633
- }, /*#__PURE__*/React.createElement(MoreVertIcon, null))), /*#__PURE__*/React.createElement(Menu, {
2435
+ }, /*#__PURE__*/React.createElement(Options, null)))), /*#__PURE__*/React.createElement(Menu, {
2634
2436
  anchorEl: anchorEl,
2635
2437
  open: isOpen,
2636
2438
  onClose: handleClose,
@@ -2828,24 +2630,6 @@ var EnableButton = function EnableButton(_ref) {
2828
2630
  onChangeEnableLayer(!isEnabled);
2829
2631
  };
2830
2632
 
2831
- var visibilityIcon = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("rect", {
2832
- width: 24,
2833
- height: 24,
2834
- fill: "transparent"
2835
- }), /*#__PURE__*/React.createElement("path", {
2836
- d: "M14.4980749,15.8618431 C15.8661433,15.0851043 16.779689,13.6936347 16.779689,12.1014551 C16.779689,10.5092755 15.8661433,9.11870594 14.4980749,8.34106705 C17.6257313,9.18620931 19.3529176,11.4300215 19.8092405,12.1014551 C19.3529176,12.7719886 17.6266313,15.0167008 14.4980749,15.8618431 L14.4980749,15.8618431 Z M4.18985949,12.1014551 C4.64618231,11.4300215 6.37336867,9.18710936 9.49922496,8.3419671 C8.13295665,9.11870594 7.21851093,10.5101755 7.21851093,12.1014551 C7.21851093,13.6936347 8.13295665,15.0842042 9.49922496,15.8618431 C6.37336867,15.0167008 4.64618231,12.7728886 4.18985949,12.1014551 L4.18985949,12.1014551 Z M11.99955,13.8583429 C10.9950998,13.8583429 10.180559,13.0717036 10.180559,12.1014551 C10.180559,11.1312066 10.9950998,10.3445672 11.99955,10.3445672 C13.0031002,10.3445672 13.8176409,11.1312066 13.8176409,12.1014551 C13.8176409,13.0717036 13.0031002,13.8583429 11.99955,13.8583429 L11.99955,13.8583429 Z M20.7983899,11.7666383 C20.6813841,11.5713286 17.8696435,7 11.99955,7 C6.12945647,7 3.31681584,11.5713286 3.19980999,11.7666383 L3,12.1014551 L3.19980999,12.4362718 C3.31681584,12.6306815 6.12945647,17.2020101 11.99955,17.2020101 C17.8696435,17.2020101 20.6813841,12.6306815 20.7983899,12.4362718 L21,12.1014551 L20.7983899,11.7666383 Z"
2837
- }));
2838
- var visibilityOffIcon = /*#__PURE__*/React.createElement(SvgIcon, {
2839
- style: {
2840
- marginTop: 2
2841
- }
2842
- }, /*#__PURE__*/React.createElement("rect", {
2843
- width: 24,
2844
- height: 24,
2845
- fill: "transparent"
2846
- }), /*#__PURE__*/React.createElement("path", {
2847
- d: "M12 15.309c-.755 0-1.45-.088-2.092-.236l.798-.797c.41.124.844.192 1.294.192 2.453 0 4.442-1.988 4.442-4.44 0-.495-.085-.907-.234-1.255l.03-.03c1.72.906 2.781 2.167 3.218 2.766-.724.992-3.151 3.8-7.456 3.8zm-7.456-3.8c.442-.607 1.522-1.89 3.276-2.796-.166.36-.261.79-.261 1.315 0 1.228.499 2.34 1.305 3.144l-1.102 1.104c-1.72-.906-2.78-2.169-3.218-2.767zm5.646-3.524c.818 0 1.482.665 1.482 1.483 0 .818-.664 1.481-1.482 1.481s-1.482-.663-1.482-1.481c0-.818.664-1.483 1.482-1.483zm10.608 3.19c-.073-.125-1.245-2.026-3.603-3.388l2.009-2.01c.406-.406.406-1.065 0-1.473-.407-.405-1.066-.405-1.473 0l-2.58 2.582c-.93-.295-1.98-.478-3.151-.478-5.87 0-8.681 4.57-8.798 4.766L3 11.51l.202.335c.073.124 1.244 2.025 3.603 3.387l-2.009 2.01c-.406.406-.406 1.065 0 1.472.204.203.47.305.737.305.266 0 .532-.102.736-.305l2.58-2.58c.93.293 1.98.476 3.151.476 5.87 0 8.681-4.57 8.798-4.765l.202-.335-.202-.335z"
2848
- }));
2849
2633
  return /*#__PURE__*/React.createElement(ManagerButton, {
2850
2634
  tooltipTitle: title,
2851
2635
  onClick: onClick,
@@ -2864,8 +2648,8 @@ var EnableButton = function EnableButton(_ref) {
2864
2648
  color: 'inherit'
2865
2649
  }
2866
2650
  },
2867
- icon: visibilityOffIcon,
2868
- checkedIcon: visibilityIcon,
2651
+ icon: /*#__PURE__*/React.createElement(VisibilityOff, null),
2652
+ checkedIcon: /*#__PURE__*/React.createElement(Visibility, null),
2869
2653
  checked: isEnabled,
2870
2654
  disableFocusRipple: true,
2871
2655
  tabIndex: -1