@opengeoweb/shared 2.8.0 → 2.12.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 +133 -341
  2. package/index.umd.js +136 -343
  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 +3 -4
  8. package/lib/components/UserMenu/CheatSheet/Icons.d.ts +0 -7
package/index.esm.js CHANGED
@@ -1,17 +1,14 @@
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, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
4
+ import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, OptionKey, ArrowUp, ArrowDown, CommandKey, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/theme';
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
- import { useThemeContext } from '@opengeoweb/theme';
11
- import { DragIndicator, Close as Close$1, Delete } from '@mui/icons-material';
12
10
  import { throttle } from 'lodash';
13
11
  import withStyles from '@mui/styles/withStyles';
14
- import MoreVertIcon from '@mui/icons-material/MoreVert';
15
12
  import createStyles from '@mui/styles/createStyles';
16
13
 
17
14
  /* *
@@ -114,10 +111,12 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
114
111
  _a$cancelLabel = _a.cancelLabel,
115
112
  cancelLabel = _a$cancelLabel === void 0 ? 'Go back' : _a$cancelLabel,
116
113
  onSubmit = _a.onSubmit,
117
- onClose = _a.onClose,
114
+ _onClose = _a.onClose,
118
115
  _a$content = _a.content,
119
116
  content = _a$content === void 0 ? null : _a$content,
120
- other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
117
+ _a$disableAutoFocus = _a.disableAutoFocus,
118
+ disableAutoFocus = _a$disableAutoFocus === void 0 ? false : _a$disableAutoFocus,
119
+ other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus"]);
121
120
 
122
121
  other.catchOnCancel;
123
122
  var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -133,7 +132,10 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
133
132
  }
134
133
  },
135
134
  // fix for briefly showing default options when closing dialog
136
- transitionDuration: 0
135
+ transitionDuration: 0,
136
+ onClose: function onClose() {
137
+ _onClose('CLOSED');
138
+ }
137
139
  }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
138
140
  sx: {
139
141
  zIndex: 1,
@@ -159,14 +161,16 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
159
161
  "data-testid": "confirmationDialog-close",
160
162
  "aria-label": "close",
161
163
  onClick: function onClick() {
162
- return onClose('CLOSED');
164
+ return _onClose('CLOSED');
163
165
  },
164
166
  size: "small"
165
- }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
167
+ }, /*#__PURE__*/React.createElement(Close, {
168
+ "data-testid": "CloseIcon"
169
+ }))), /*#__PURE__*/React.createElement(DialogContent, {
166
170
  sx: {
167
171
  padding: '8px 16px'
168
172
  }
169
- }, /*#__PURE__*/React.createElement(Typography, {
173
+ }, description && /*#__PURE__*/React.createElement(Typography, {
170
174
  variant: "body1"
171
175
  }, description), content), /*#__PURE__*/React.createElement(DialogActions, {
172
176
  sx: {
@@ -179,35 +183,50 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
179
183
  }, /*#__PURE__*/React.createElement(Button, {
180
184
  "data-testid": "confirmationDialog-cancel",
181
185
  variant: "tertiary",
182
- sx: {
183
- width: {
184
- xs: '100%',
185
- sm: '150px'
186
- }
186
+ // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
187
+ sx: function sx(theme) {
188
+ return {
189
+ width: {
190
+ xs: '100%',
191
+ sm: '150px'
192
+ },
193
+ '&:focus': {
194
+ outline: theme.palette.geowebColors.buttons.focusDefault.outline,
195
+ borderColor: 'transparent'
196
+ }
197
+ };
187
198
  },
188
199
  onClick: function onClick() {
189
- return onClose('CANCELLED');
200
+ return _onClose('CANCELLED');
190
201
  },
191
- autoFocus: true,
192
- disableRipple: true
202
+ disableFocusRipple: true
193
203
  }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
194
204
  "data-testid": "confirmationDialog-confirm",
195
205
  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
- }
206
+ // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
207
+ sx: function sx(theme) {
208
+ return {
209
+ width: {
210
+ xs: '100%',
211
+ sm: '150px'
212
+ },
213
+ marginLeft: {
214
+ xs: '0px!important',
215
+ sm: '8px!important'
216
+ },
217
+ marginTop: {
218
+ xs: 2,
219
+ sm: 0
220
+ },
221
+ '&:focus': {
222
+ outline: theme.palette.geowebColors.buttons.focusDefault.outline,
223
+ borderColor: 'transparent'
224
+ }
225
+ };
209
226
  },
210
- onClick: onSubmit
227
+ onClick: onSubmit,
228
+ autoFocus: !disableAutoFocus,
229
+ disableFocusRipple: true
211
230
  }, confirmLabel)));
212
231
  };
213
232
 
@@ -696,74 +715,40 @@ var AlertIcon = function AlertIcon(_ref) {
696
715
 
697
716
  switch (severity) {
698
717
  case 'info':
699
- return /*#__PURE__*/React.createElement(SvgIcon, {
718
+ return /*#__PURE__*/React.createElement(Info, {
700
719
  sx: {
701
720
  color: 'geowebColors.functional.notification'
702
721
  },
703
722
  "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
- }));
723
+ });
712
724
 
713
725
  case 'success':
714
- return /*#__PURE__*/React.createElement(SvgIcon, {
726
+ return /*#__PURE__*/React.createElement(Success, {
715
727
  sx: {
716
728
  color: 'geowebColors.functional.success'
717
729
  },
718
730
  "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
- }));
731
+ });
727
732
 
728
733
  case 'warning':
729
- return /*#__PURE__*/React.createElement(SvgIcon, {
734
+ return /*#__PURE__*/React.createElement(Exclamation, {
730
735
  sx: {
731
736
  color: 'geowebColors.functional.warning'
732
737
  },
733
738
  "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
- }));
739
+ });
742
740
 
743
741
  case 'error':
744
742
  default:
745
- return /*#__PURE__*/React.createElement(SvgIcon, {
743
+ return /*#__PURE__*/React.createElement(Exclamation, {
746
744
  sx: {
747
745
  color: 'geowebColors.functional.error'
748
746
  },
749
747
  "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
- }));
748
+ });
758
749
  }
759
750
  };
760
751
 
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
752
  var AlertBanner = function AlertBanner(_ref) {
768
753
  var title = _ref.title,
769
754
  _ref$severity = _ref.severity,
@@ -838,7 +823,8 @@ var AlertBanner = function AlertBanner(_ref) {
838
823
  }, title), info && /*#__PURE__*/React.createElement(Box, {
839
824
  sx: {
840
825
  fontSize: '16px',
841
- marginTop: 1
826
+ marginTop: 1,
827
+ wordBreak: 'break-word'
842
828
  }
843
829
  }, info), actionButtonProps && /*#__PURE__*/React.createElement(Button, {
844
830
  variant: "flat",
@@ -849,7 +835,7 @@ var AlertBanner = function AlertBanner(_ref) {
849
835
  sx: {
850
836
  backgroundColor: 'transparent!important'
851
837
  },
852
- startIcon: IconChevronRight
838
+ startIcon: /*#__PURE__*/React.createElement(ChevronRight, null)
853
839
  }, actionButtonProps.title.toUpperCase()));
854
840
  };
855
841
 
@@ -869,7 +855,7 @@ var AlertBanner = function AlertBanner(_ref) {
869
855
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
870
856
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
871
857
  * */
872
- var useStyles$8 = makeStyles(function () {
858
+ var useStyles$7 = makeStyles(function () {
873
859
  return {
874
860
  wrapper: {
875
861
  height: '100vh',
@@ -886,7 +872,7 @@ var useStyles$8 = makeStyles(function () {
886
872
  var AppLayout = function AppLayout(_ref) {
887
873
  var header = _ref.header,
888
874
  children = _ref.children;
889
- var classes = useStyles$8();
875
+ var classes = useStyles$7();
890
876
  return /*#__PURE__*/React__default.createElement("div", {
891
877
  className: classes.wrapper
892
878
  }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -894,9 +880,7 @@ var AppLayout = function AppLayout(_ref) {
894
880
  }, children));
895
881
  };
896
882
 
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) {
883
+ var useStyles$6 = makeStyles(function (theme) {
900
884
  var _header;
901
885
 
902
886
  return {
@@ -911,9 +895,6 @@ var useStyles$7 = makeStyles(function (theme) {
911
895
  }), _defineProperty(_header, theme.breakpoints.up('sm'), {
912
896
  padding: '0 24px'
913
897
  }), _header),
914
- logo: {
915
- height: 30
916
- },
917
898
  title: {
918
899
  marginLeft: 6,
919
900
  fontSize: '1.25rem',
@@ -933,7 +914,7 @@ var AppHeader = function AppHeader(_ref) {
933
914
  userMenu = _ref.userMenu,
934
915
  _ref$title = _ref.title,
935
916
  title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
936
- var classes = useStyles$7();
917
+ var classes = useStyles$6();
937
918
  return /*#__PURE__*/React__default.createElement("header", {
938
919
  className: classes.header
939
920
  }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -956,11 +937,7 @@ var AppHeader = function AppHeader(_ref) {
956
937
  justifyContent: "center",
957
938
  alignItems: "center",
958
939
  wrap: "nowrap"
959
- }, /*#__PURE__*/React__default.createElement("img", {
960
- alt: title,
961
- className: classes.logo,
962
- src: img
963
- }), /*#__PURE__*/React__default.createElement(Typography, {
940
+ }, /*#__PURE__*/React__default.createElement(GeoWebLogo, null), /*#__PURE__*/React__default.createElement(Typography, {
964
941
  variant: "h1",
965
942
  className: classes.title
966
943
  }, title))), /*#__PURE__*/React__default.createElement(Grid, {
@@ -1017,33 +994,6 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
1017
994
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
1018
995
  * */
1019
996
 
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
997
  var ResizeComponent = function ResizeComponent(_a) {
1048
998
  var _a$startPosition = _a.startPosition,
1049
999
  startPosition = _a$startPosition === void 0 ? {
@@ -1064,6 +1014,7 @@ var ResizeComponent = function ResizeComponent(_a) {
1064
1014
  minWidth = _a$minWidth === void 0 ? 50 : _a$minWidth,
1065
1015
  props = __rest(_a, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
1066
1016
 
1017
+ var theme = useTheme();
1067
1018
  var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
1068
1019
  var onStartResize = React__default.useCallback(function (event, _direction, node) {
1069
1020
  event.stopPropagation();
@@ -1097,10 +1048,17 @@ var ResizeComponent = function ResizeComponent(_a) {
1097
1048
  size: size,
1098
1049
  onResizeStop: onResizeStop,
1099
1050
  handleComponent: {
1100
- bottomRight: /*#__PURE__*/React__default.createElement(ResizeHandle, {
1101
- isRightAligned: true
1051
+ bottomRight: /*#__PURE__*/React__default.createElement(Resize, {
1052
+ isRightAligned: true,
1053
+ style: {
1054
+ fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
1055
+ }
1102
1056
  }),
1103
- bottomLeft: /*#__PURE__*/React__default.createElement(ResizeHandle, null)
1057
+ bottomLeft: /*#__PURE__*/React__default.createElement(Resize, {
1058
+ style: {
1059
+ fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
1060
+ }
1061
+ })
1104
1062
  },
1105
1063
  enable: {
1106
1064
  top: false,
@@ -1161,9 +1119,12 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
1161
1119
  var children = this.props.children;
1162
1120
 
1163
1121
  if (error) {
1164
- return /*#__PURE__*/React.createElement("div", {
1165
- style: {
1166
- whiteSpace: 'pre-wrap'
1122
+ return /*#__PURE__*/React.createElement(Box, {
1123
+ sx: {
1124
+ whiteSpace: 'pre-wrap',
1125
+ width: 'inherit',
1126
+ height: 'inherit',
1127
+ overflowY: 'scroll'
1167
1128
  }
1168
1129
  }, /*#__PURE__*/React.createElement(AlertBanner, {
1169
1130
  severity: "error",
@@ -1215,7 +1176,7 @@ ErrorBoundary.defaultProps = {
1215
1176
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
1216
1177
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
1217
1178
  * */
1218
- var useStyles$6 = makeStyles(function (theme) {
1179
+ var useStyles$5 = makeStyles(function (theme) {
1219
1180
  return {
1220
1181
  container: {
1221
1182
  position: 'absolute',
@@ -1263,7 +1224,7 @@ var UserMenu = function UserMenu(_ref) {
1263
1224
  } : _ref$onClose,
1264
1225
  children = _ref.children,
1265
1226
  initials = _ref.initials;
1266
- var classes = useStyles$6();
1227
+ var classes = useStyles$5();
1267
1228
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
1268
1229
  "data-testid": "userButton",
1269
1230
  onClick: onToggle,
@@ -1346,7 +1307,7 @@ var MenuItemTheme = function MenuItemTheme() {
1346
1307
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
1347
1308
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
1348
1309
  * */
1349
- var useStyles$5 = makeStyles(function (theme) {
1310
+ var useStyles$4 = makeStyles(function (theme) {
1350
1311
  return {
1351
1312
  footer: {
1352
1313
  boxShadow: theme.shadows[1],
@@ -1359,7 +1320,7 @@ var useStyles$5 = makeStyles(function (theme) {
1359
1320
  }); // drag handles will be handled by DraggableResizable/Resizable
1360
1321
 
1361
1322
  var ToolFooter = function ToolFooter() {
1362
- var classes = useStyles$5();
1323
+ var classes = useStyles$4();
1363
1324
  return /*#__PURE__*/React__default.createElement("footer", {
1364
1325
  className: classes.footer
1365
1326
  });
@@ -1468,7 +1429,10 @@ var ToolHeader = function ToolHeader(_ref) {
1468
1429
  alignItems: "center"
1469
1430
  }, /*#__PURE__*/React__default.createElement(Grid, {
1470
1431
  item: true,
1471
- xs: columnSizeIcon
1432
+ xs: columnSizeIcon,
1433
+ sx: {
1434
+ paddingRight: 1
1435
+ }
1472
1436
  }, isDraggable && size !== 'xxs' && !leftComponent && /*#__PURE__*/React__default.createElement(Grid, {
1473
1437
  container: true,
1474
1438
  justifyContent: "flex-start"
@@ -1479,7 +1443,7 @@ var ToolHeader = function ToolHeader(_ref) {
1479
1443
  sx: Object.assign(Object.assign({}, iconStyle), {
1480
1444
  pointerEvents: 'none'
1481
1445
  })
1482
- }, /*#__PURE__*/React__default.createElement(DragIndicator, null))), leftComponent && leftComponent), /*#__PURE__*/React__default.createElement(Grid, {
1446
+ }, /*#__PURE__*/React__default.createElement(DragHandle, null))), leftComponent && leftComponent), /*#__PURE__*/React__default.createElement(Grid, {
1483
1447
  item: true,
1484
1448
  xs: columnSizeTitle
1485
1449
  }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -1502,17 +1466,25 @@ var ToolHeader = function ToolHeader(_ref) {
1502
1466
  transform: 'rotate(90deg)',
1503
1467
  height: 12
1504
1468
  })
1505
- }, /*#__PURE__*/React__default.createElement(DragIndicator, null)))), /*#__PURE__*/React__default.createElement(Grid, {
1469
+ }, /*#__PURE__*/React__default.createElement(DragHandle, null)))), /*#__PURE__*/React__default.createElement(Grid, {
1506
1470
  item: true,
1507
1471
  xs: columnSizeIcon,
1508
1472
  container: true,
1509
1473
  justifyContent: "flex-end"
1510
- }, onClose && /*#__PURE__*/React__default.createElement(IconButton, {
1474
+ }, onClose && /*#__PURE__*/React__default.createElement(Tooltip, {
1475
+ title: "Close",
1476
+ placement: "bottom",
1477
+ sx: {
1478
+ pointerEvents: 'none'
1479
+ }
1480
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
1511
1481
  "data-testid": "closeBtn",
1512
1482
  onClick: onClickClose,
1513
1483
  size: "large",
1514
1484
  sx: iconStyle
1515
- }, /*#__PURE__*/React__default.createElement(Close$1, null)))));
1485
+ }, /*#__PURE__*/React__default.createElement(Close, {
1486
+ "data-testid": "CloseIcon"
1487
+ }))))));
1516
1488
  };
1517
1489
 
1518
1490
  /* *
@@ -1571,14 +1543,14 @@ var ToolContainer = function ToolContainer(_a) {
1571
1543
  return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
1572
1544
  elevation: elevation,
1573
1545
  sx: styles$1.container
1574
- }, props), /*#__PURE__*/React__default.createElement(ToolHeader, {
1546
+ }, props), /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(ToolHeader, {
1575
1547
  title: title,
1576
1548
  size: size,
1577
1549
  isDraggable: isDraggable,
1578
1550
  onClose: onClose,
1579
1551
  className: headerClassName,
1580
1552
  leftComponent: leftComponent
1581
- }), /*#__PURE__*/React__default.createElement(Box, {
1553
+ })), /*#__PURE__*/React__default.createElement(Box, {
1582
1554
  sx: styles$1.content,
1583
1555
  style: {
1584
1556
  maxHeight: maxHeight
@@ -1773,7 +1745,7 @@ var DraggableComponent = function DraggableComponent(_a) {
1773
1745
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
1774
1746
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
1775
1747
  * */
1776
- var useStyles$4 = makeStyles(function (theme) {
1748
+ var useStyles$3 = makeStyles(function (theme) {
1777
1749
  return {
1778
1750
  icon: {
1779
1751
  backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1813,7 +1785,7 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
1813
1785
  var _ref$type = _ref.type,
1814
1786
  type = _ref$type === void 0 ? 'text' : _ref$type,
1815
1787
  children = _ref.children;
1816
- var classes = useStyles$4();
1788
+ var classes = useStyles$3();
1817
1789
 
1818
1790
  if (type === 'divider') {
1819
1791
  return /*#__PURE__*/React__default.createElement(Typography, {
@@ -1847,171 +1819,6 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
1847
1819
  }, children);
1848
1820
  };
1849
1821
 
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
1822
  /* *
2016
1823
  * Licensed under the Apache License, Version 2.0 (the "License");
2017
1824
  * you may not use this file except in compliance with the License.
@@ -2042,26 +1849,26 @@ var shortcuts = [{
2042
1849
  type: "connect"
2043
1850
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2044
1851
  type: "icon"
2045
- }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1852
+ }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2046
1853
  type: "divider"
2047
1854
  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2048
1855
  type: "icon"
2049
- }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null))),
1856
+ }, /*#__PURE__*/React__default.createElement(ArrowRight, null))),
2050
1857
  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2051
1858
  type: "icon"
2052
1859
  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2053
1860
  type: "connect"
2054
1861
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2055
1862
  type: "icon"
2056
- }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1863
+ }, /*#__PURE__*/React__default.createElement(OptionKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2057
1864
  type: "connect"
2058
1865
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2059
1866
  type: "icon"
2060
- }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1867
+ }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2061
1868
  type: "divider"
2062
1869
  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2063
1870
  type: "icon"
2064
- }, /*#__PURE__*/React__default.createElement(ArrowRightIcon, null)))
1871
+ }, /*#__PURE__*/React__default.createElement(ArrowRight, null)))
2065
1872
  }, {
2066
1873
  title: 'Toggle hide/show time slider',
2067
1874
  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2097,7 +1904,7 @@ var shortcuts = [{
2097
1904
  type: "connect"
2098
1905
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2099
1906
  type: "icon"
2100
- }, /*#__PURE__*/React__default.createElement(OptionIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1907
+ }, /*#__PURE__*/React__default.createElement(OptionKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2101
1908
  type: "connect"
2102
1909
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2103
1910
  type: "icon"
@@ -2110,22 +1917,22 @@ var shortcuts = [{
2110
1917
  type: "connect"
2111
1918
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2112
1919
  type: "icon"
2113
- }, /*#__PURE__*/React__default.createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1920
+ }, /*#__PURE__*/React__default.createElement(ArrowUp, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2114
1921
  type: "divider"
2115
1922
  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2116
1923
  type: "icon"
2117
- }, /*#__PURE__*/React__default.createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)")),
1924
+ }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)")),
2118
1925
  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2119
1926
  type: "icon"
2120
- }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1927
+ }, /*#__PURE__*/React__default.createElement(CommandKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2121
1928
  type: "connect"
2122
1929
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2123
1930
  type: "icon"
2124
- }, /*#__PURE__*/React__default.createElement(ArrowUpIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
1931
+ }, /*#__PURE__*/React__default.createElement(ArrowUp, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2125
1932
  type: "divider"
2126
1933
  }, "or"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2127
1934
  type: "icon"
2128
- }, /*#__PURE__*/React__default.createElement(ArrowDownIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)"))
1935
+ }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)"))
2129
1936
  }, {
2130
1937
  title: 'Return to current time',
2131
1938
  description: /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2137,7 +1944,7 @@ var shortcuts = [{
2137
1944
  type: "connect"
2138
1945
  }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2139
1946
  type: "icon"
2140
- }, /*#__PURE__*/React__default.createElement(ArrowLeftIcon, null)))
1947
+ }, /*#__PURE__*/React__default.createElement(ArrowLeft, null)))
2141
1948
  }, {
2142
1949
  title: 'Change layer manager values by scrolling',
2143
1950
  description: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
@@ -2145,7 +1952,7 @@ var shortcuts = [{
2145
1952
  }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll")),
2146
1953
  descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
2147
1954
  type: "icon"
2148
- }, /*#__PURE__*/React__default.createElement(CommandIcon, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll"))
1955
+ }, /*#__PURE__*/React__default.createElement(CommandKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll"))
2149
1956
  }];
2150
1957
  var getShortcutList = function getShortcutList(shortcutList) {
2151
1958
  var platform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'windows';
@@ -2535,7 +2342,10 @@ var ToolButton = function ToolButton(_a) {
2535
2342
  width: "".concat(width, "!important"),
2536
2343
  height: "".concat(height, "!important"),
2537
2344
  textTransform: 'none!important',
2538
- padding: '11px!important'
2345
+ padding: '11px!important',
2346
+ '& .MuiSvgIcon-root': {
2347
+ marginRight: '0px!important'
2348
+ }
2539
2349
  }, sx)
2540
2350
  }, props), children);
2541
2351
  };
@@ -2620,17 +2430,17 @@ var ToggleMenu = function ToggleMenu(_ref) {
2620
2430
  setAnchorEl(document.getElementById(buttonTestId));
2621
2431
  }
2622
2432
  }, [isDefaultOpen, buttonTestId]);
2623
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
2433
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
2434
+ placement: "top",
2435
+ title: tooltipTitle
2436
+ }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ToolButton, {
2624
2437
  active: isOpen,
2625
2438
  sx: buttonSx,
2626
2439
  onClick: handleClick,
2627
2440
  "data-testid": buttonTestId,
2628
2441
  variant: variant,
2629
2442
  id: buttonTestId
2630
- }, /*#__PURE__*/React.createElement(Tooltip, {
2631
- placement: "top",
2632
- title: tooltipTitle
2633
- }, /*#__PURE__*/React.createElement(MoreVertIcon, null))), /*#__PURE__*/React.createElement(Menu, {
2443
+ }, /*#__PURE__*/React.createElement(Options, null)))), /*#__PURE__*/React.createElement(Menu, {
2634
2444
  anchorEl: anchorEl,
2635
2445
  open: isOpen,
2636
2446
  onClose: handleClose,
@@ -2828,24 +2638,6 @@ var EnableButton = function EnableButton(_ref) {
2828
2638
  onChangeEnableLayer(!isEnabled);
2829
2639
  };
2830
2640
 
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
2641
  return /*#__PURE__*/React.createElement(ManagerButton, {
2850
2642
  tooltipTitle: title,
2851
2643
  onClick: onClick,
@@ -2864,8 +2656,8 @@ var EnableButton = function EnableButton(_ref) {
2864
2656
  color: 'inherit'
2865
2657
  }
2866
2658
  },
2867
- icon: visibilityOffIcon,
2868
- checkedIcon: visibilityIcon,
2659
+ icon: /*#__PURE__*/React.createElement(VisibilityOff, null),
2660
+ checkedIcon: /*#__PURE__*/React.createElement(Visibility, null),
2869
2661
  checked: isEnabled,
2870
2662
  disableFocusRipple: true,
2871
2663
  tabIndex: -1