@evergis/react 2.0.140 → 2.0.143

package/dist/components/EvergisCard/styled.d.ts

@@ -1,4 +1,4 @@
-import { IIconProps } from '@evergis/ui';
+import { IconProps } from '@evergis/icons';
 export declare const EvergisCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StickyHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -16,11 +16,12 @@ export declare const AttributeValueContainer: import("styled-components").Styled
 export declare const SimpleAttribute: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ValueLink: import("styled-components").StyledComponent<"a", any, {}, never>;
 declare type CardIconProps = {
+    kind?: string;
     onClick?: () => void;
 };
-export declare const StatIcon: import("styled-components").StyledComponent<"span", any, IIconProps & CardIconProps, never>;
-export declare const ZoomIcon: import("styled-components").StyledComponent<"span", any, IIconProps & CardIconProps, never>;
-export declare const CloseIcon: import("styled-components").StyledComponent<"span", any, IIconProps & CardIconProps, never>;
-export declare const PrevIcon: import("styled-components").StyledComponent<"span", any, IIconProps & CardIconProps, never>;
-export declare const NextIcon: import("styled-components").StyledComponent<"span", any, IIconProps & CardIconProps, never>;
+export declare const StatIcon: import("styled-components").StyledComponent<"i", any, IconProps & CardIconProps, never>;
+export declare const ZoomIcon: import("styled-components").StyledComponent<"i", any, IconProps & CardIconProps, never>;
+export declare const CloseIcon: import("styled-components").StyledComponent<"i", any, IconProps & CardIconProps, never>;
+export declare const PrevIcon: import("styled-components").StyledComponent<"i", any, IconProps & CardIconProps, never>;
+export declare const NextIcon: import("styled-components").StyledComponent<"i", any, IconProps & CardIconProps, never>;
 export {};

package/dist/components/MapControls/styled.d.ts

@@ -6,11 +6,11 @@ export declare type MapControlsProps = {
 declare type MapControlBtnProps = {
     onClick?: () => void;
 };
-export declare const ZoomInBtn: import("styled-components").StyledComponent<"span", any, import("@evergis/ui").IIconProps & MapControlBtnProps, never>;
-export declare const ZoomOutBtn: import("styled-components").StyledComponent<"span", any, import("@evergis/ui").IIconProps & MapControlBtnProps, never>;
-export declare const SearchBtn: import("styled-components").StyledComponent<"span", any, import("@evergis/ui").IIconProps & MapControlBtnProps, never>;
-export declare const FullscreenBtn: import("styled-components").StyledComponent<"span", any, import("@evergis/ui").IIconProps & MapControlBtnProps, never>;
-export declare const MeasureBtn: import("styled-components").StyledComponent<"span", any, import("@evergis/ui").IIconProps & MapControlBtnProps, never>;
+export declare const ZoomInBtn: import("styled-components").StyledComponent<"i", any, import("@evergis/icons").IconProps & MapControlBtnProps, never>;
+export declare const ZoomOutBtn: import("styled-components").StyledComponent<"i", any, import("@evergis/icons").IconProps & MapControlBtnProps, never>;
+export declare const SearchBtn: import("styled-components").StyledComponent<"i", any, import("@evergis/icons").IconProps & MapControlBtnProps, never>;
+export declare const FullscreenBtn: import("styled-components").StyledComponent<"i", any, import("@evergis/icons").IconProps & MapControlBtnProps, never>;
+export declare const MeasureBtn: import("styled-components").StyledComponent<"i", any, import("@evergis/icons").IconProps & MapControlBtnProps, never>;
 export declare const MapControl: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MapControls: import("styled-components").StyledComponent<"div", any, MapControlsProps, never>;
 export {};

package/dist/components/SearchInput/styled.d.ts

@@ -1,3 +1,2 @@
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputField: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const SearchPrefix: import("styled-components").StyledComponent<"span", any, import("@evergis/ui").IIconProps, never>;

package/dist/hooks/index.d.ts

@@ -30,4 +30,5 @@ export * from './useCrs';
 export * from './useDraggableMarker';
 export * from './useMetersToPixels';
 export * from './useDebouncedCallback';
+export * from './useToggle';
 export * from './LayerProps';

package/dist/hooks/useToggle.d.ts

@@ -0,0 +1 @@
+export declare const useToggle: (initial?: boolean | undefined) => [boolean, VoidFunction, (value: boolean) => void];

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export * from './utils/format';
 export * from './utils/math';
 export * from './utils/metersToPixels';
 export * from './utils/polygonCircleFromPoint';
+export * from './utils/isNumeric';

package/dist/react.cjs.development.js

@@ -12,6 +12,7 @@ var api = require('@evergis/api');
 var _Map = require('@evergis/sgis/es/Map');
 var DomPainter = require('@evergis/sgis/es/painters/DomPainter/DomPainter');
 var FeatureLayer$1 = require('@evergis/sgis/es/layers/FeatureLayer');
+var icons = require('@evergis/icons');
 var condition = require('@evergis/condition');
 var MultiPoint = require('@evergis/sgis/es/features/MultiPoint');
 var Polyline = require('@evergis/sgis/es/features/Polyline');
@@ -50,7 +51,6 @@ var PointEditor = require('@evergis/sgis/es/controls/PointEditor');
 var utils = require('@evergis/sgis/es/utils/utils');
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
-var ui = require('@evergis/ui');
 var punycode = _interopDefault(require('punycode'));
 var TileLayer$1 = require('@evergis/sgis/es/layers/TileLayer');
 
@@ -1945,6 +1945,8 @@ const polygonCircleFromPoint = (center, diameter) => {
   return [coordinates];
 };
 
+const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
+
 let CircleLineMiterRender = /*#__PURE__*/function (_LineMiterRender) {
   _inherits(CircleLineMiterRender, _LineMiterRender);
 
@@ -4378,6 +4380,12 @@ const useDebouncedCallback = interval => {
   }, interval), [interval]);
 };
 
+const useToggle = initial => {
+  const [state, setState] = React.useState(initial !== undefined ? initial : false);
+  const toggle = React.useCallback(() => setState(!state), [state]);
+  return [state, toggle, setState];
+};
+
 const Symbol = _ref => {
   let {
     symbol,
@@ -4429,12 +4437,12 @@ const StyleSymbol = _ref => {
   }) : null));
 };
 
-var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
-const EvergisCardContainer = /*#__PURE__*/styled__default.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 2.25rem;\n  right: 0.5rem;\n  width: 22.5rem;\n  margin-bottom: 1rem;\n  max-height: 90%;\n  min-height: 1rem;\n  background: #fff;\n  border-radius: 4px;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  overflow: initial;\n  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);\n\n  ", " {\n    color: rgba(0, 0, 0, 0.65);\n    cursor: pointer;\n    user-select: none;\n\n    &:hover {\n      color: #1fb3aa;\n    }\n  }\n"])), ui.Icon);
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+const EvergisCardContainer = /*#__PURE__*/styled__default.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 2.25rem;\n  right: 0.5rem;\n  width: 22.5rem;\n  margin-bottom: 1rem;\n  max-height: 90%;\n  min-height: 1rem;\n  background: #fff;\n  border-radius: 4px;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  overflow: initial;\n  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);\n\n  ", " {\n    color: rgba(0, 0, 0, 0.65);\n    cursor: pointer;\n    user-select: none;\n\n    &:hover {\n      color: #1fb3aa;\n    }\n  }\n"])), icons.Icon);
 const StickyHeader = /*#__PURE__*/styled__default.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: sticky;\n  top: 0;\n  flex-direction: column;\n  background: #fff;\n"])));
 const CardHeader = /*#__PURE__*/styled__default.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 1.5rem 1.5rem 1rem;\n  align-items: center;\n"])));
 const CardTitle = /*#__PURE__*/styled__default.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin: 0 0.5rem;\n  width: 13.5rem;\n  flex-grow: 1;\n"])));
-const CardControls = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", " {\n    margin: 0 0.5rem;\n  }\n"])), ui.Icon);
+const CardControls = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", " {\n    margin: 0 0.5rem;\n  }\n"])), icons.Icon);
 const FeatureName = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 1.25rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 const LayerName = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #30454f;\n  font-size: 0.75rem;\n"])));
 const CardPagination = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 2.5rem;\n  padding: 0 1.5rem;\n  align-items: center;\n  font-size: 0.75rem;\n  justify-content: space-between;\n  background: linear-gradient(\n    0deg,\n    rgba(161, 186, 208, 0.12),\n    rgba(161, 186, 208, 0.12)\n  );\n"])));
@@ -4442,16 +4450,15 @@ const PaginationDescription = /*#__PURE__*/styled__default.div(_templateObject9
 const CurrentFeatureIndex = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 0 0.25rem;\n  color: #1fb3aa;\n"])));
 const CardAttributes = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 1rem 1.5rem;\n  overflow-y: scroll;\n"])));
 const AttributeContainer = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 0.5rem;\n"])));
-const AttributeTitle = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #30454f;\n  font-size: 0.75rem;\n  margin: 0.25rem 0;\n"])));
+const AttributeTitle = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0.25rem 0;\n  color: #30454f;\n  font-size: 0.75rem;\n"])));
 const AttributeValueContainer = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex-wrap: wrap;\n  display: flex;\n"])));
 const SimpleAttribute = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 const ValueLink = /*#__PURE__*/styled__default.a(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0.25rem;\n  color: #1fb3aa;\n  text-decoration: none;\n"])));
 const featureCardIconMixin = /*#__PURE__*/styled.css(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #30454f;\n"])));
-const StatIcon = /*#__PURE__*/styled__default(ui.Icon)(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
-const ZoomIcon = /*#__PURE__*/styled__default(ui.Icon)(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
-const CloseIcon = /*#__PURE__*/styled__default(ui.Icon)(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
-const PrevIcon = /*#__PURE__*/styled__default(ui.Icon)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
-const NextIcon = /*#__PURE__*/styled__default(ui.Icon)(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+const ZoomIcon = /*#__PURE__*/styled__default(icons.Icon)(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+const CloseIcon = /*#__PURE__*/styled__default(icons.Icon)(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+const PrevIcon = /*#__PURE__*/styled__default(icons.Icon)(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
+const NextIcon = /*#__PURE__*/styled__default(icons.Icon)(_templateObject22 || (_templateObject22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), featureCardIconMixin);
 
 const MailValue = _ref => {
   let {
@@ -4575,16 +4582,13 @@ const StyledCard = _ref => {
     symbol: feature.symbol || {}
   }), React__default.createElement(CardTitle, null, React__default.createElement(FeatureName, {
     title: feature.displayName || ''
-  }, feature.displayName), React__default.createElement(LayerName, null, feature.layerAlias)), React__default.createElement(CardControls, null, onStatistics && React__default.createElement(StatIcon, {
-    kind: "statistics",
+  }, feature.displayName), React__default.createElement(LayerName, null, feature.layerAlias)), React__default.createElement(CardControls, null, onStatistics && React__default.createElement(icons.IconButton, {
     onClick: () => onStatistics(feature)
-  }), !hideZoom && React__default.createElement(ZoomIcon, {
-    kind: "zoom_to",
+  }, React__default.createElement(icons.EverCloudStatisticsIcon, null)), !hideZoom && React__default.createElement(icons.IconButton, {
     onClick: zoom
-  }), React__default.createElement(CloseIcon, {
-    kind: "close",
+  }, React__default.createElement(icons.EverCloudZoomtoIcon, null)), React__default.createElement(icons.IconButton, {
     onClick: reset
-  }))), features.length > 1 ? React__default.createElement(CardPagination, null, React__default.createElement(PrevIcon, {
+  }, React__default.createElement(icons.EverCloudCloseIcon, null)))), features.length > 1 ? React__default.createElement(CardPagination, null, React__default.createElement(PrevIcon, {
     kind: "prev",
     onClick: prev
   }), React__default.createElement(PaginationDescription, null, React__default.createElement(CurrentFeatureIndex, {
@@ -4743,19 +4747,15 @@ const LegendSection = _ref => {
   return React__default.createElement(LegendSectionContainer, null, !hideTitle && React__default.createElement(LegendSectionHeader, null, renderLegendTitle ? renderLegendTitle(item) : item.title), item.values.map(children));
 };
 
-var _templateObject$3, _templateObject2$2, _templateObject3$2;
-const InputContainer = /*#__PURE__*/styled__default.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 0.125rem;\n  box-sizing: border-box;\n  border: 0.0625rem solid rgba(48, 69, 79, 0.12);\n  margin-bottom: 0.5rem;\n"])));
+var _templateObject$3, _templateObject2$2;
+const InputContainer = /*#__PURE__*/styled__default.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 0.125rem;\n  box-sizing: border-box;\n  border: 0.0625rem solid rgba(48, 69, 79, 0.12);\n  margin-bottom: 0.5rem;\n  \n  i {\n    color: rgba(48, 69, 79, 0.54);\n    padding: 0.25rem;\n\n    &:hover {\n      cursor: pointer;\n      color: rgba(48, 69, 79, 0.87);\n    }\n  }\n"])));
 const InputField = /*#__PURE__*/styled__default.input(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: none;\n  outline: none;\n  font-size: 1rem;\n  line-height: 1.1875rem;\n  padding: 0 0.5rem;\n  background-color: transparent;\n  color: rgba(48, 69, 79, 0.87);\n"])));
-const SearchPrefix = /*#__PURE__*/styled__default(ui.Icon)(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: rgba(48, 69, 79, 0.54);\n  padding: 0.25rem;\n\n  &:hover {\n    cursor: pointer;\n    color: rgba(48, 69, 79, 0.87);\n  }\n"])));
-SearchPrefix.defaultProps = {
-  kind: "search"
-};
 
 const SearchInput = _ref => {
   let {
     onChange
   } = _ref;
-  return React__default.createElement(InputContainer, null, React__default.createElement(SearchPrefix, null), React__default.createElement(InputField, {
+  return React__default.createElement(InputContainer, null, React__default.createElement(icons.EverCloudSearchIcon, null), React__default.createElement(InputField, {
     onChange: onChange
   }));
 };
@@ -4905,13 +4905,13 @@ const Map = _ref => {
   }, children);
 };
 
-var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2;
+var _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4$2, _templateObject5$2;
 
 const topLeft = distance => styled.css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  left: ", ";\n"])), distance, distance);
 
 const topRight = distance => styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  top: ", ";\n  right: ", ";\n"])), distance, distance);
 
-const bottomLeft = distance => styled.css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
+const bottomLeft = distance => styled.css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  left: ", ";\n"])), distance, distance);
 
 const bottomRight = distance => styled.css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  bottom: ", ";\n  right: ", ";\n"])), distance, distance);
 
@@ -4927,29 +4927,19 @@ const placementMixin = function placementMixin(placement, distance) {
   return styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top-left' && topLeft(distance), placement === 'top-right' && topRight(distance), placement === 'bottom-left' && bottomLeft(distance), placement === 'bottom-right' && bottomRight(distance));
 };
 
-var _templateObject$5, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
+var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
 const mapControlBtnMixin = /*#__PURE__*/styled.css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: #fff;\n"])));
-const ZoomInBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-ZoomInBtn.defaultProps = {
-  kind: "plus"
-};
-const ZoomOutBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-ZoomOutBtn.defaultProps = {
-  kind: "minus"
-};
-const SearchBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-SearchBtn.defaultProps = {
-  kind: "search"
-}; // TODO not exists in fonts
-
-const FullscreenBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-FullscreenBtn.defaultProps = {
-  kind: "maximize"
-};
-const MeasureBtn = /*#__PURE__*/styled__default(ui.Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin);
-MeasureBtn.defaultProps = {
-  kind: "measure_length"
-};
+const ZoomInBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomInBtn.defaultProps = { kind: "plus" };
+
+const ZoomOutBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // ZoomOutBtn.defaultProps = { kind: "minus" };
+
+const SearchBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // SearchBtn.defaultProps = { kind: "search" };
+// TODO not exists in fonts
+
+const FullscreenBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // FullscreenBtn.defaultProps = { kind: "maximize" };
+
+const MeasureBtn = /*#__PURE__*/styled__default(icons.Icon)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), mapControlBtnMixin); // MeasureBtn.defaultProps = { kind: "measure_length" };
+
 const MapControl = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0.15rem;\n  background: rgba(28, 33, 48, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 1.5rem;\n  cursor: pointer;\n  height: auto;\n  width: auto;\n  padding: 0.25rem;\n"])));
 const MapControls = /*#__PURE__*/styled__default.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  flex-direction: ", ";\n\n  ", "\n\n  ", " {\n    margin-bottom: ", ";\n    margin-right: ", ";\n    flex-direction: ", ";\n  }\n"])), _ref => {
   let {
@@ -4996,10 +4986,10 @@ const Fullscreen = () => {
   }));
 };
 
-var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1;
+var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1;
 const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
 const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 12.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
-const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
+const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
 const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
 const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 1rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  \n  ", "\n"])), _ref => {
   let {
@@ -5042,7 +5032,7 @@ const getValueFromLegendTitle = (title, minOrMax) => {
     return minOrMax === "min" ? result == null ? void 0 : result[0] : result == null ? void 0 : result[1];
   }
 
-  return (title == null ? void 0 : (_title$split = title.split(" ")) == null ? void 0 : _title$split.find(ui.isNumeric)) || "";
+  return (title == null ? void 0 : (_title$split = title.split(" ")) == null ? void 0 : _title$split.find(isNumeric)) || "";
 };
 
 const MinimizedLegend = _ref => {
@@ -5074,7 +5064,7 @@ const MapLegend = _ref => {
     className
   } = _ref;
   const legend = useMapLegend(layer, config);
-  const [isExpanded, toggleExpanded] = ui.useToggle();
+  const [isExpanded, toggleExpanded] = useToggle();
 
   if (!legend) {
     return null;
@@ -5331,7 +5321,7 @@ const Measurer = _ref => {
   }, props)) : null;
 };
 
-var _templateObject$7, _templateObject2$6, _templateObject3$6;
+var _templateObject$7, _templateObject2$6, _templateObject3$5;
 const ScaleRulerContainer = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  cursor: default;\n  display: flex;\n  align-items: flex-end;\n  padding: 0 0.5rem 0.5rem;\n  box-sizing: border-box;\n"])));
 const ScaleRulerBlock = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  width: ", ";\n  height: 0.25rem;\n  border: 0.0625rem solid white;\n  border-top: 0;\n"])), _ref => {
   let {
@@ -5339,7 +5329,7 @@ const ScaleRulerBlock = /*#__PURE__*/styled__default.div(_templateObject2$6 || (
   } = _ref;
   return width + "px";
 });
-const TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), _ref2 => {
+const TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: ", ";\n  width: ", ";\n  color: #fff;\n  font-size: 1rem;\n  cursor: default;\n  padding: 0 0.5rem;\n"])), _ref2 => {
   let {
     alignEnd
   } = _ref2;
@@ -5392,13 +5382,13 @@ const ZoomLevel = () => {
   }, level || 0);
 };
 
-var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$2;
+var _templateObject$8, _templateObject2$7, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$2;
 
 const cornerBottom = cornerSize => styled.css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  &:before {\n    left: 50%;\n    transform: translate(-50%, 100%);\n    bottom: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
 const cornerLeft = cornerSize => styled.css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-100%, -50%);\n    left: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-right: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
-const cornerRight = cornerSize => styled.css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(100%, -50%);\n    right: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-left: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
+const cornerRight = cornerSize => styled.css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(100%, -50%);\n    right: 0;\n    top: 50%;\n    border-top: ", " solid transparent;\n    border-left: ", " solid rgba(28, 33, 48, 0.8);\n    border-bottom: ", " solid transparent;\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
 const cornerTop = cornerSize => styled.css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  &:before {\n    transform: translate(-50%, -100%);\n    left: 50%;\n    top: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-bottom: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
@@ -5631,6 +5621,7 @@ exports.isImageSymbol = isImageSymbol;
 exports.isLabelSymbol = isLabelSymbol;
 exports.isMaskedImageSymbol = isMaskedImageSymbol;
 exports.isMiterExist = isMiterExist;
+exports.isNumeric = isNumeric;
 exports.isParameterByAttribute = isParameterByAttribute;
 exports.isParameterValueSimple = isParameterValueSimple;
 exports.isParameterValueSymbol = isParameterValueSymbol;
@@ -5726,6 +5717,7 @@ exports.useMount = useMount;
 exports.useProperty = useProperty;
 exports.useScale = useScale;
 exports.useSymbol = useSymbol;
+exports.useToggle = useToggle;
 exports.useTooltip = useTooltip;
 exports.useTooltipContext = useTooltipContext;
 exports.useUpdate = useUpdate;